{"_id":"@material/button","_rev":"1843-19feef3633a110f89fc632d71cc2a9a3","name":"@material/button","description":"The Material Components for the web 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/button","version":"0.1.0","license":"Apache 2.0","_id":"@material/button@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":"cbcd8674fb45764e4e326e334bec6a4f09a8f37d","tarball":"https://registry.npmjs.org/@material/button/-/button-0.1.0.tgz","integrity":"sha512-H4s2OlsAK25yjPBytKv6DoItl4M9TEFFbZKsq0H6D0yr7WXbUOfj89ua7x1BRDV/98hGJoB2T4GqF+18x8zVnQ==","signatures":[{"sig":"MEUCIFbOvyw6vFxEnT1RfCC+FyroXkx1eh1zwUCfj8FKOamGAiEAvGSkPB/rornw6YKOVwVMGJDx++5QcpPA632iChQon+I=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}]},"_from":".","_shasum":"cbcd8674fb45764e4e326e334bec6a4f09a8f37d","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 button component","directories":{},"_nodeVersion":"7.1.0","dependencies":{"@material/theme":"^0.1.0","@material/animation":"^0.1.0","@material/elevation":"^0.1.0","@material/typography":"^0.1.0"},"_npmOperationalInternal":{"tmp":"tmp/button-0.1.0.tgz_1481824455265_0.6776092869695276","host":"packages-12-west.internal.npmjs.com"}},"0.1.1":{"name":"@material/button","version":"0.1.1","license":"Apache 2.0","_id":"@material/button@0.1.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":"8c3b1f8c7992363ec8fb60094239b72901272ab9","tarball":"https://registry.npmjs.org/@material/button/-/button-0.1.1.tgz","integrity":"sha512-pKbZPlGaOkbBxTpjjpeTZ1EM9yPMe3Pbnl+8umDrnCzwsNN0pjDW352XLFQkW79VfqUqerw5q0v160uUgRj1+g==","signatures":[{"sig":"MEYCIQCSkMsNpCNcLFVzqmUid+93Js2UuDV7sYDLvJa3npaN5wIhAKsbfukrZbadarM6SLotv7Aj4a9umrVRrlaM/uAYnRiB","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}]},"_from":".","_shasum":"8c3b1f8c7992363ec8fb60094239b72901272ab9","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 button component","directories":{},"_nodeVersion":"7.2.1","dependencies":{"@material/theme":"^0.1.0","@material/animation":"^0.1.1","@material/elevation":"^0.1.1","@material/typography":"^0.1.0"},"_npmOperationalInternal":{"tmp":"tmp/button-0.1.1.tgz_1483977432008_0.1404456365853548","host":"packages-12-west.internal.npmjs.com"}},"0.2.0":{"name":"@material/button","version":"0.2.0","license":"Apache 2.0","_id":"@material/button@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":"f651dd38e035d015eb1f06dd02ff484e8db7c40c","tarball":"https://registry.npmjs.org/@material/button/-/button-0.2.0.tgz","integrity":"sha512-CUSCgN57RuH+LGluW/2M+fHkdcJiO+2kT0PGvVA8hu/DBjj1dSp4/S71izmhDFUKbzPAMSPlWdyIMvzXSFa9Gg==","signatures":[{"sig":"MEUCIH8d9zGBKtU166nwQ0zObWcvMHXP3WVTNrB/F1lI7xsDAiEA2JZ11TwYkJSuhPThiFBlgXNxSJq3xAT9hNSo+uLhJyU=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}]},"_from":".","_shasum":"f651dd38e035d015eb1f06dd02ff484e8db7c40c","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 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","@material/typography":"^0.1.1"},"_npmOperationalInternal":{"tmp":"tmp/button-0.2.0.tgz_1485190170760_0.8825061090756208","host":"packages-18-east.internal.npmjs.com"}},"0.2.1":{"name":"@material/button","version":"0.2.1","license":"Apache 2.0","_id":"@material/button@0.2.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":"bf2b2ec6082d16f5d2faa14561ed8669c8aeea64","tarball":"https://registry.npmjs.org/@material/button/-/button-0.2.1.tgz","integrity":"sha512-eO0XL/llfdU2MG151opnFbrFtkTerXGWjoZwO0rG6pV1yvNtap9mFdpvs/BIXaldLVuC4e3MNIhh918pU6tMcg==","signatures":[{"sig":"MEYCIQCYO78HOXOKWe7xXTxA6K/qCQfD4P+xPYFz9jzfVkWYagIhANkA9ueSJxz+mikEshiYWwvlkmMcVB7qr0EwgECCjWh1","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}]},"_from":".","_shasum":"bf2b2ec6082d16f5d2faa14561ed8669c8aeea64","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 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","@material/typography":"^0.1.1"},"_npmOperationalInternal":{"tmp":"tmp/button-0.2.1.tgz_1486407879853_0.28448781557381153","host":"packages-12-west.internal.npmjs.com"}},"0.3.0":{"name":"@material/button","version":"0.3.0","keywords":["material components","material design","button"],"license":"Apache 2.0","_id":"@material/button@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":"84844cfc32a8c6d45cb75078eddbfa8d6d8b742a","tarball":"https://registry.npmjs.org/@material/button/-/button-0.3.0.tgz","integrity":"sha512-xb4+Sn2mI4/Hz7TIMOFiw/yuw4X9Qfqj63Sp1Hj5p28bmlWJOn4rKlrY0f0b4fCqF/8PUxM/VyD0BVLy+QQgfA==","signatures":[{"sig":"MEYCIQC178ulQoPQMwDhRjBazSSGYYUAGzdY459ouXDCYWwogQIhAKJDTnplP+tlEj7I1HDULrANdyRjzG8rstmeJezjYk81","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}]},"_from":".","_shasum":"84844cfc32a8c6d45cb75078eddbfa8d6d8b742a","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 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","@material/typography":"^0.2.0"},"_npmOperationalInternal":{"tmp":"tmp/button-0.3.0.tgz_1487698049382_0.6642017855774611","host":"packages-18-east.internal.npmjs.com"}},"0.3.1":{"name":"@material/button","version":"0.3.1","keywords":["material components","material design","button"],"license":"Apache 2.0","_id":"@material/button@0.3.1","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":"990de8307e18c2369966864c55a4b716a285c942","tarball":"https://registry.npmjs.org/@material/button/-/button-0.3.1.tgz","integrity":"sha512-oon2FnkqLEtd49upUAOawEoLOHiZ94Fr8d7DPLYnQwFi7rP9YexJfdXrWqENOvYKVPjDRZVsy8w/6lW3zVkrtQ==","signatures":[{"sig":"MEQCIBbDkk1TS0Fyr5+guL3fWUhthYVJ4Y8DH3q7Qn54EMvjAiBGNA8RYBnJIrgT65xEQPMWIVT3oWXH834yXdOVkbqhOA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}]},"_from":".","_shasum":"990de8307e18c2369966864c55a4b716a285c942","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 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","@material/typography":"^0.2.0"},"_npmOperationalInternal":{"tmp":"tmp/button-0.3.1.tgz_1488819729835_0.8828683865722269","host":"packages-18-east.internal.npmjs.com"}},"0.3.2":{"name":"@material/button","version":"0.3.2","keywords":["material components","material design","button"],"license":"Apache 2.0","_id":"@material/button@0.3.2","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":"c58941b9bd7c2465014cbd9d07dc9d73e73732ae","tarball":"https://registry.npmjs.org/@material/button/-/button-0.3.2.tgz","integrity":"sha512-tM5LhnB938rKDnOUvzJwXgNIV1s/LhAXKKcYWgQZrU/XGy5KAEU9E05aXhyv0G1P3eRdWGJVICAFgEhIzAs48w==","signatures":[{"sig":"MEYCIQCOXpy96qrklVfJOMjhMCZt7dnQAdMSJ1Myk0+pDx9MngIhAN1mzVYb1WGASUA8/L+oone2q3ZlZzW9L9LpnE9jWK/j","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}]},"_from":".","_shasum":"c58941b9bd7c2465014cbd9d07dc9d73e73732ae","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 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","@material/typography":"^0.2.0"},"_npmOperationalInternal":{"tmp":"tmp/button-0.3.2.tgz_1491233277875_0.9544849968515337","host":"packages-12-west.internal.npmjs.com"}},"0.3.3":{"name":"@material/button","version":"0.3.3","keywords":["material components","material design","button"],"license":"Apache 2.0","_id":"@material/button@0.3.3","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":"6af6041d7db1957691a36fbfa866e82018edb021","tarball":"https://registry.npmjs.org/@material/button/-/button-0.3.3.tgz","integrity":"sha512-ctZlp7v17MSwddwMkU4wHtuBlx59RtUKKwlrgHyfsFbGOV0ekmlMrR6FssXj9acv6Yrius3BcSK3Ed1mPw7l7Q==","signatures":[{"sig":"MEYCIQDVmEbwCCMJktFGtk907+yNZHi1q4uqJtkTBeYjhMYUZAIhAJNbGkfuxw9jqFkbLlQtShFr/qgkMddIrNHmtWZh7+3e","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}]},"_from":".","_shasum":"6af6041d7db1957691a36fbfa866e82018edb021","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 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","@material/typography":"^0.2.1"},"_npmOperationalInternal":{"tmp":"tmp/button-0.3.3.tgz_1492527072877_0.9506183543708175","host":"packages-12-west.internal.npmjs.com"}},"0.3.4":{"name":"@material/button","version":"0.3.4","keywords":["material components","material design","button"],"license":"Apache 2.0","_id":"@material/button@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":"2d146d6fb1b18715218312b4146b35eb7f223a9e","tarball":"https://registry.npmjs.org/@material/button/-/button-0.3.4.tgz","integrity":"sha512-nQ20maVEmJJOMdDNxib17JS+w+WvgH1P7VE6Fki+nQgKczFRImpK9C0rG7etq/i5DFTpWompXZaXfGlagGdOUg==","signatures":[{"sig":"MEYCIQDV7xaRCr3ItaoEIUUgp3HU5RaA7bZxj68t41mp1oEu1wIhALYVsmckqs+MUJbz68qtpZMM2WaAFPOTinekKilhkbTR","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}]},"_from":".","_shasum":"2d146d6fb1b18715218312b4146b35eb7f223a9e","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 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","@material/typography":"^0.2.1"},"_npmOperationalInternal":{"tmp":"tmp/button-0.3.4.tgz_1493653380685_0.40576582215726376","host":"packages-18-east.internal.npmjs.com"}},"0.3.5":{"name":"@material/button","version":"0.3.5","keywords":["material components","material design","button"],"license":"Apache 2.0","_id":"@material/button@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":"394db93950a04d1b3e8f1ed6507c655b238c27ec","tarball":"https://registry.npmjs.org/@material/button/-/button-0.3.5.tgz","integrity":"sha512-VwykLnmSJEEZ1E7/KSmQkc6fafn7orrmSZFtJlo1I+AS5yChAXTbautD5R3bKH9ezK3skKULaxlLQD7BBuk26Q==","signatures":[{"sig":"MEUCIQC4M2H8vjfCNXO54ZHt/HY+Wy4XoI/36rw/lxkHaPPi2QIgOxRD7wslvzmh0D/DqEMynTdnF8kHAz0EMLBne+RjIjU=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}]},"_from":".","_shasum":"394db93950a04d1b3e8f1ed6507c655b238c27ec","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 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","@material/typography":"^0.2.2"},"_npmOperationalInternal":{"tmp":"tmp/button-0.3.5.tgz_1494865558081_0.9356878607068211","host":"packages-18-east.internal.npmjs.com"}},"0.3.6":{"name":"@material/button","version":"0.3.6","keywords":["material components","material design","button"],"license":"Apache 2.0","_id":"@material/button@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":"84e61f56a8d81181413c29d56cd7edece243feba","tarball":"https://registry.npmjs.org/@material/button/-/button-0.3.6.tgz","integrity":"sha512-mDulSqn4K15y+/RQID4i5KNBb3v8Vz+OEzCe8gfK6xDWyf+pwb6FhS98RsuDr99awNlMZQw4tx9XxyszTmvxcg==","signatures":[{"sig":"MEQCIHIO0FshZQ9/6ta2iMg+ZpOP2aKscmLuhT/XMFptLv1VAiBgB30qV4cqkBrkuHTp4eqM/YD/qlVuXdqJJ8luAiXdgw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}]},"_from":".","_shasum":"84e61f56a8d81181413c29d56cd7edece243feba","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 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","@material/typography":"^0.2.2"},"_npmOperationalInternal":{"tmp":"tmp/button-0.3.6.tgz_1495031293455_0.1701955976895988","host":"packages-18-east.internal.npmjs.com"}},"0.3.7":{"name":"@material/button","version":"0.3.7","keywords":["material components","material design","button"],"license":"Apache 2.0","_id":"@material/button@0.3.7","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":"3912791322f7f7129a5a2239c3098e8b10a4ceb8","tarball":"https://registry.npmjs.org/@material/button/-/button-0.3.7.tgz","integrity":"sha512-KpUGzqFPjRGcsZGa5aIYcTcE8UrzRf4ghOG/C5BEps+fCrTc5iVpHEhx6KGGkqFr053wWXRTYOvuXg3hCAkFBQ==","signatures":[{"sig":"MEUCIQCRCUmef0UjkvI3et/2HA3NlJjWDVs1TY13321YCB7CaAIgPzBJ4oCpjXgdlNyNoBBHWT7ljLWCxZYCt8Ec9gAu54o=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}]},"_from":".","_shasum":"3912791322f7f7129a5a2239c3098e8b10a4ceb8","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 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","@material/typography":"^0.2.2"},"_npmOperationalInternal":{"tmp":"tmp/button-0.3.7.tgz_1496171070106_0.017295406432822347","host":"s3://npm-registry-packages"}},"0.3.8":{"name":"@material/button","version":"0.3.8","keywords":["material components","material design","button"],"license":"Apache 2.0","_id":"@material/button@0.3.8","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":"47874a4879832da49890bc2a16c6cbf8eb0dc118","tarball":"https://registry.npmjs.org/@material/button/-/button-0.3.8.tgz","integrity":"sha512-gVkGdEQRp2fdlccVd9CE/18Vxj2E67NKV+AMME6e2pee7AnwydJfmyKWTfdnFhx7zWNCxR5PS31EsTfnMkbQWA==","signatures":[{"sig":"MEQCIDvKF57wmFXhe3vOMD3ES+Jj67dpHuzAQxAbEjvcFl+tAiAqE422sKGANjYE7TjSrMp9IyF/YkDbEA7qveLScHYb1g==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}]},"_from":".","_shasum":"47874a4879832da49890bc2a16c6cbf8eb0dc118","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 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","@material/typography":"^0.2.2"},"_npmOperationalInternal":{"tmp":"tmp/button-0.3.8.tgz_1498493447486_0.8480105160269886","host":"s3://npm-registry-packages"}},"0.3.9":{"name":"@material/button","version":"0.3.9","keywords":["material components","material design","button"],"license":"Apache 2.0","_id":"@material/button@0.3.9","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":"3d5d08abecd1e2a3a6476a2b523fe2c456971a34","tarball":"https://registry.npmjs.org/@material/button/-/button-0.3.9.tgz","integrity":"sha512-613w3S60TKAPD9UYwZUJG5XcyE7jynPqeWgy6DmTAYpJGtugirZKgLUXPFMb0VHO80QlFXXG1/+qLusq8t5CHg==","signatures":[{"sig":"MEUCIQCpufY/bbOOvf52XOHfUavzCQbNJedBrdNYepN0RCryNwIgeSkckB9U8td5to3Mtthpo9aWE5SQwoRFLTf+UxkUCIY=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}]},"_from":".","_shasum":"3d5d08abecd1e2a3a6476a2b523fe2c456971a34","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 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/button-0.3.9.tgz_1499702327705_0.01208281028084457","host":"s3://npm-registry-packages"}},"0.3.10":{"name":"@material/button","version":"0.3.10","keywords":["material components","material design","button"],"license":"Apache 2.0","_id":"@material/button@0.3.10","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":"fec02394db79ee7a5799917f806076c8047a00ad","tarball":"https://registry.npmjs.org/@material/button/-/button-0.3.10.tgz","integrity":"sha512-EjJjckTE7CvvRAwwoMXkxGAt4EwgI8JYHBvqETFI9AJrB3pj3+AxIhMtEdDBS4J/e+vU+laHTQaDCJQ03Jpr7g==","signatures":[{"sig":"MEQCIHwJ52a8Xa1O26ASo1+dGC4yjBllbj5vqJISOtQh+wHFAiAU4g+JORFUjKXuVjSnrujzRK/Sy29cXb7xS38v3wLteA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}]},"_from":".","_shasum":"fec02394db79ee7a5799917f806076c8047a00ad","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 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","@material/typography":"^0.2.3"},"_npmOperationalInternal":{"tmp":"tmp/button-0.3.10.tgz_1500911350440_0.21556714037433267","host":"s3://npm-registry-packages"}},"0.3.11":{"name":"@material/button","version":"0.3.11","keywords":["material components","material design","button"],"license":"Apache 2.0","_id":"@material/button@0.3.11","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":"17ab4cd5d55389e3da3496b1c1626dce4f6a7839","tarball":"https://registry.npmjs.org/@material/button/-/button-0.3.11.tgz","integrity":"sha512-K9HDwEilqyYQmPz76TqaIGvKGPuQUpalhRFvn0P0EajZQ96s7Q7M4rN+OjoU85G8qpdTDl3+7QXjPF/p634rOw==","signatures":[{"sig":"MEYCIQCT4fU6lM2WP3s0zPss8OhZhrz9Cc9L2YwFC8Q/yIO9QQIhAO41rJFr46x7EYMLOiemHH/eoIOQVh2Xrk/kAwV9YlvE","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}]},"_from":".","_shasum":"17ab4cd5d55389e3da3496b1c1626dce4f6a7839","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 button component","directories":{},"_nodeVersion":"7.10.1","dependencies":{"@material/theme":"^0.1.7","@material/ripple":"^0.8.2","@material/elevation":"^0.1.11","@material/typography":"^0.3.0"},"_npmOperationalInternal":{"tmp":"tmp/button-0.3.11.tgz_1502138903931_0.28154714312404394","host":"s3://npm-registry-packages"}},"0.4.0":{"name":"@material/button","version":"0.4.0","keywords":["material components","material design","button"],"license":"Apache 2.0","_id":"@material/button@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":"1ef10e7da9d675e4e38d21cad4db033a3b04c64a","tarball":"https://registry.npmjs.org/@material/button/-/button-0.4.0.tgz","integrity":"sha512-+QNYiKv/ir27zA/RVULJ/maTxUJvmKDFiuhNruNmEyYnordpkSr91JoRNim9lUBvnTJ8b1CESB6QHZinyVx1YQ==","signatures":[{"sig":"MEUCIQDtCqW1XaFw0lcD89DC7uSgLl1RaRg1z+4YtRJqyE7TngIgW11UdabchBHhT8aS1z1fIrFJleeGNIHV1K+5EvkLygI=","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 button component","directories":{},"_nodeVersion":"8.1.4","dependencies":{"@material/theme":"^0.2.0","@material/ripple":"^0.8.3","@material/elevation":"^0.1.11","@material/typography":"^0.3.0"},"_npmOperationalInternal":{"tmp":"tmp/button-0.4.0.tgz_1503336465010_0.9132010054308921","host":"s3://npm-registry-packages"}},"0.4.1":{"name":"@material/button","version":"0.4.1","keywords":["material components","material design","button"],"license":"Apache 2.0","_id":"@material/button@0.4.1","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":"0f2ed237621c85847848d6e711d0ab137c5417d6","tarball":"https://registry.npmjs.org/@material/button/-/button-0.4.1.tgz","integrity":"sha512-SFaFzfS2135+MB2Mpilsni7rGsAznqP2d4hs8YQRxyP1ly4LebrEpGdLVHV1WDmqwbB3JcKhIo/3TELmYr8T5w==","signatures":[{"sig":"MEUCIQCwyTrUIluRk1y2R/GGjlyaU4eLWvp0PsTTGhkZswoSIQIgIpq7JU7K7oqAmpXwYWFFB3ig9ZQrC666YS6kV3UW+Y0=","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 button component","directories":{},"_nodeVersion":"8.1.4","dependencies":{"@material/theme":"^0.2.0","@material/ripple":"^0.8.4","@material/elevation":"^0.1.11","@material/typography":"^0.3.0"},"_npmOperationalInternal":{"tmp":"tmp/button-0.4.1.tgz_1503585998735_0.748576037120074","host":"s3://npm-registry-packages"}},"0.5.0":{"name":"@material/button","version":"0.5.0","keywords":["material components","material design","button"],"license":"Apache 2.0","_id":"@material/button@0.5.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":"a4382b8c4f1773c95020830318d566dffe8c4f4c","tarball":"https://registry.npmjs.org/@material/button/-/button-0.5.0.tgz","integrity":"sha512-cvel9kAM8trBE4ocxhubCsqWbUO/POlRC9NZFwKgNru0WZB6EQ7DD/jW5zDEdYrU/bpAUkltvLqHN3Z8Ytk5vQ==","signatures":[{"sig":"MEUCIQCeVdync3rVzIPCpE42kmn+TnkoIVgsvMES00t8oq+vnQIgMJIM+Q9w5GGwFVugOd2PkAPF1Co2zk7VfS+ZLiz0Yqk=","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 button component","directories":{},"_nodeVersion":"8.1.4","dependencies":{"@material/theme":"^0.2.0","@material/ripple":"^0.8.5","@material/elevation":"^0.1.11","@material/typography":"^0.3.0"},"_npmOperationalInternal":{"tmp":"tmp/button-0.5.0.tgz_1503681652959_0.5676166550256312","host":"s3://npm-registry-packages"}},"0.6.0":{"name":"@material/button","version":"0.6.0","keywords":["material components","material design","button"],"license":"Apache 2.0","_id":"@material/button@0.6.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":"ced420d28b4fd2d5d4b0270646306ece503627b6","tarball":"https://registry.npmjs.org/@material/button/-/button-0.6.0.tgz","integrity":"sha512-mMe8pLDgy/FXtNcYYcBPvXOW7iqqv4ntHSN4ELwXnirCDpCsotDxfSuxh6vkgVSyS8jDXbX5olQQmyyDdJI0NQ==","signatures":[{"sig":"MEYCIQDHgJ5KCpysYMiFoe/3xHM/fCmROKVlTINo1NqCv4tbrgIhALIt+zkcrYy0YSXY/md95ZCahVyk7Kbi85TUSfEalSPc","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}]},"_from":".","_shasum":"ced420d28b4fd2d5d4b0270646306ece503627b6","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 button component","directories":{},"_nodeVersion":"7.10.0","dependencies":{"@material/theme":"^0.3.0","@material/ripple":"^0.8.6","@material/elevation":"^0.1.11","@material/typography":"^0.3.0"},"_npmOperationalInternal":{"tmp":"tmp/button-0.6.0.tgz_1504642564219_0.32791246147826314","host":"s3://npm-registry-packages"}},"0.7.0":{"name":"@material/button","version":"0.7.0","keywords":["material components","material design","button"],"license":"Apache 2.0","_id":"@material/button@0.7.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":"9c8d7fc29fcd574e0116e0008a3f32bd687b1685","tarball":"https://registry.npmjs.org/@material/button/-/button-0.7.0.tgz","integrity":"sha512-T2Gcn8IJOJtzSU8mHN7HMqGbvkOy5lEWDZ/dLmVviGKeip22XR9pjm8sO52dCcs1rJJxsJPCl9UnaQUmT8Shaw==","signatures":[{"sig":"MEUCIQCDTlsp36WP4vflMffU+msBdnURZWg7UOexUBzKyVkTqAIgJ7iHvtECle94+oz9bIjcZofzcXntIgaiNjOmXFpnoAg=","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 button component","directories":{},"_nodeVersion":"6.9.2","dependencies":{"@material/theme":"^0.3.1","@material/ripple":"^0.8.7","@material/elevation":"^0.1.12","@material/typography":"^0.3.0"},"_npmOperationalInternal":{"tmp":"tmp/button-0.7.0.tgz_1505759733490_0.26939079188741744","host":"s3://npm-registry-packages"}},"0.7.1":{"name":"@material/button","version":"0.7.1","keywords":["material components","material design","button"],"license":"Apache 2.0","_id":"@material/button@0.7.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":"53de509d24596034506e387ce16ab3a6a81ad709","tarball":"https://registry.npmjs.org/@material/button/-/button-0.7.1.tgz","integrity":"sha512-/KgL6U+Vb14zlkMuEWq8yFvwraCwCEBBMv7knpQgBw4HWvfRjW0tBX4RwImFfQvikdK09ewbDX7o0SJvvm34vg==","signatures":[{"sig":"MEYCIQDHDPiaOZX3iL8M3lV3TQPCHZKt6gJq3WMiQDYgvF/dIgIhAOSGdtvlNIvPW1ihw7cIR6lEafI15JlAnwXyGhXOHEri","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}]},"_from":".","_shasum":"53de509d24596034506e387ce16ab3a6a81ad709","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 button component","directories":{},"_nodeVersion":"7.10.1","dependencies":{"@material/theme":"^0.4.0","@material/ripple":"^0.8.8","@material/elevation":"^0.1.13","@material/typography":"^0.3.0"},"_npmOperationalInternal":{"tmp":"tmp/button-0.7.1.tgz_1506978697542_0.05346850981004536","host":"s3://npm-registry-packages"}},"0.23.0":{"name":"@material/button","version":"0.23.0","keywords":["material components","material design","button"],"license":"Apache 2.0","_id":"@material/button@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":"6c5c24778292ab1f13f83ee94a2c8e026b04a2d3","tarball":"https://registry.npmjs.org/@material/button/-/button-0.23.0.tgz","integrity":"sha512-sjrL3neogeZGZlZ1ClZhAl6eII2rDmRtksJoNRaFPsFbM2lrZuIpbKetAKy7Z4aDwSXV4Hml0we2sMnEs2s7pQ==","signatures":[{"sig":"MEUCIQDF300ThH4u05RoIOqz8tPSgVdzoIp9u8MhyaDGJP1MhQIgdcCBK3AY2mRbcogZady1x96prXkyldJWtnnAfe3aVUM=","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 button component","directories":{},"_nodeVersion":"8.1.4","dependencies":{"@material/theme":"^0.4.0","@material/ripple":"^0.23.0","@material/elevation":"^0.1.13","@material/typography":"^0.3.0"},"_npmOperationalInternal":{"tmp":"tmp/button-0.23.0.tgz_1508187734846_0.8482365033123642","host":"s3://npm-registry-packages"}},"0.24.0":{"name":"@material/button","version":"0.24.0","keywords":["material components","material design","button"],"license":"Apache 2.0","_id":"@material/button@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":"96db24310a0ea8f4be448857f5728024d0e14710","tarball":"https://registry.npmjs.org/@material/button/-/button-0.24.0.tgz","integrity":"sha512-j3NfMNlJQS5z2G15GRWqYZVT39Sp5YcKXWHxTdkcJZdP93renGfsheE/mhQDlqkc1tiLjqb0aees5M6VredhDQ==","signatures":[{"sig":"MEUCIEvnPM/tt2guqwUEwm2JQvv0Jxx4ePS7raY8BGR6O78WAiEAkOSMtvQVrlEZJPp6w+cBZplRanFegMvXTdOHl6vRrhA=","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 button component","directories":{},"_nodeVersion":"8.4.0","dependencies":{"@material/theme":"^0.24.0","@material/ripple":"^0.24.0","@material/elevation":"^0.1.13","@material/typography":"^0.3.0"},"_npmOperationalInternal":{"tmp":"tmp/button-0.24.0.tgz_1509390677432_0.4329722148831934","host":"s3://npm-registry-packages"}},"0.25.0":{"name":"@material/button","version":"0.25.0","keywords":["material components","material design","button"],"license":"Apache 2.0","_id":"@material/button@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":"617729f8c605af24836783f14b0abcd1ea7fe0ca","tarball":"https://registry.npmjs.org/@material/button/-/button-0.25.0.tgz","integrity":"sha512-9nEjKYJ5WCA6vKSs78H2tApxYbiW4xU6cANOmBAS8tMJLQRl3EeWEqFSeVZpThQNeK4xamS6bui3NzDK14yYQg==","signatures":[{"sig":"MEUCIQCQg9xQiUpDOF62bP+YblqZtX0r67coaoKiJ4v6L46dOAIgCOZ1PcmB4DR0cO/j0FU1G/6CYRCxlreauLtvf5f908U=","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 button component","directories":{},"_nodeVersion":"6.9.2","dependencies":{"@material/theme":"^0.25.0","@material/ripple":"^0.25.0","@material/elevation":"^0.25.0","@material/typography":"^0.3.0"},"_npmOperationalInternal":{"tmp":"tmp/button-0.25.0.tgz_1510603339428_0.6429825231898576","host":"s3://npm-registry-packages"}},"0.26.0":{"name":"@material/button","version":"0.26.0","keywords":["material components","material design","button"],"license":"Apache 2.0","_id":"@material/button@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":"d222ecbcfde5a5e0923aeb6b69acedba0f830c8e","tarball":"https://registry.npmjs.org/@material/button/-/button-0.26.0.tgz","integrity":"sha512-C6zZOxe39JSrNs+DLgfZzu224o2l40G3UeJYHJyOz++FSrIaGvHf46L+c0qcqFmo/irr0DG0zrnDpF7pnrWlnA==","signatures":[{"sig":"MEYCIQDAlj+TyEfkAPfGSNN3sOj9g0EpC872SE56/lZA+utlugIhAPBCs97Lxb4CAnBbG4EX8Y3U2TlK/K32/4TxAqzWuyu6","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 button component","directories":{},"_nodeVersion":"8.7.0","dependencies":{"@material/theme":"^0.25.0","@material/ripple":"^0.26.0","@material/elevation":"^0.25.0","@material/typography":"^0.3.0"},"_npmOperationalInternal":{"tmp":"tmp/button-0.26.0.tgz_1511821585268_0.19772974564693868","host":"s3://npm-registry-packages"}},"0.27.0":{"name":"@material/button","version":"0.27.0","keywords":["material components","material design","button"],"license":"Apache 2.0","_id":"@material/button@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":"546e1887324043b2607ecd3ba661b029ef6c909b","tarball":"https://registry.npmjs.org/@material/button/-/button-0.27.0.tgz","integrity":"sha512-K48NRs4QtVRqTsPGHEo/5eiOBf5VVHOMTB7MA5ZvtH+uMcqtpea7LQe2mbOE+LXHQafCoRw1PHEi2nCdGa95IA==","signatures":[{"sig":"MEYCIQDa0I4Bgv73w6ltcW21/5kTXJSEYEMDXomBEwKn/pYt7wIhAJ72xzekFJOugLd1QXMSQa1B1yceaWspGLPlTtcsLtxK","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 button component","directories":{},"_nodeVersion":"8.9.2","dependencies":{"@material/theme":"^0.27.0","@material/ripple":"^0.27.0","@material/elevation":"^0.25.0","@material/typography":"^0.3.0"},"_npmOperationalInternal":{"tmp":"tmp/button-0.27.0.tgz_1513020927872_0.3160507050342858","host":"s3://npm-registry-packages"}},"0.28.0":{"name":"@material/button","version":"0.28.0","keywords":["material components","material design","button"],"license":"Apache 2.0","_id":"@material/button@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":"df08fa721686f272b6c6745df556763688b45598","tarball":"https://registry.npmjs.org/@material/button/-/button-0.28.0.tgz","integrity":"sha512-8UG6ixCrQctZ4PrNGIhZtCCt+pVtJfLJXxZHJqIsZiX+nIOhg7g8fdhtZFCtntoMp5gVJAMlQluE6YDCX4GQAw==","signatures":[{"sig":"MEQCIHq/g5w5i3FQn7zCuftVjGMm0/idFN+KgdElyb6d3c3IAiBsEDxXQPzhLdFpisshGLftUq6xdt+P9FCsBWFHK2TtIw==","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 button component","directories":{},"_nodeVersion":"8.1.4","dependencies":{"@material/theme":"^0.28.0","@material/ripple":"^0.28.0","@material/elevation":"^0.28.0","@material/typography":"^0.28.0"},"_npmOperationalInternal":{"tmp":"tmp/button-0.28.0.tgz_1515437708908_0.9273922403808683","host":"s3://npm-registry-packages"}},"0.29.0":{"name":"@material/button","version":"0.29.0","keywords":["material components","material design","button"],"license":"Apache 2.0","_id":"@material/button@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":"a0bd58caee34f375dd80b1f9365cd3a66044ec3a","tarball":"https://registry.npmjs.org/@material/button/-/button-0.29.0.tgz","integrity":"sha512-tz73dUQadF8UBccbyctWpk4QNw5ypR3RuTbSsC0fTj2MN0/tEuPME/QXxvpaN3+rurdnbuhpzGOxS7nzDZL7fw==","signatures":[{"sig":"MEUCIBhsUGjeJRqzseYk0dZu9J36AMzVilQMzRS1SRdfJZpCAiEAiGd4ZRcrXfW27E9a1Ck/2v0YOnrOU0qmNUs+wHAQPpM=","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 button component","directories":{},"_nodeVersion":"8.7.0","dependencies":{"@material/theme":"^0.29.0","@material/ripple":"^0.29.0","@material/elevation":"^0.28.0","@material/typography":"^0.28.0"},"_npmOperationalInternal":{"tmp":"tmp/button-0.29.0.tgz_1516645854025_0.2795286935288459","host":"s3://npm-registry-packages"}},"0.30.0":{"name":"@material/button","version":"0.30.0","keywords":["material components","material design","button"],"license":"Apache 2.0","_id":"@material/button@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":"da98519559a421106ae85314f4389542d23c227d","tarball":"https://registry.npmjs.org/@material/button/-/button-0.30.0.tgz","integrity":"sha512-BE+2m1/bwAKyqSW8T2fZznKS9bjKssCbQZWu6rUBzMLeDS8E3CUzfDrA1swSwCG6uUpE+oU3xTuqG+TVl++NtA==","signatures":[{"sig":"MEUCIFXpY5i5EciiaLXb15o1wkW4Qc/b83mtcesM0drQbs+EAiEA4kxoI1wZ9WZiy3fUuSuhQXmdsKylDxLB6HCisExp0nQ=","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 button component","directories":{},"_nodeVersion":"8.1.4","dependencies":{"@material/theme":"^0.30.0","@material/ripple":"^0.30.0","@material/elevation":"^0.28.0","@material/typography":"^0.28.0"},"_npmOperationalInternal":{"tmp":"tmp/button-0.30.0.tgz_1517868137802_0.19169335858896375","host":"s3://npm-registry-packages"}},"0.31.0":{"name":"@material/button","version":"0.31.0","keywords":["material components","material design","button"],"license":"Apache 2.0","_id":"@material/button@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":"bb98d23f3bbb0e3f5fa881561c999a6820e69bb0","tarball":"https://registry.npmjs.org/@material/button/-/button-0.31.0.tgz","fileCount":7,"integrity":"sha512-i2zh/UidubnuZ43cj9R4Vj5OlvO2d9fhysGiInHpHMiVQVyU88e2eYGPAFl3npUsErZldLayBn3BegUSQ2JUjQ==","signatures":[{"sig":"MEUCIFRjlNm1BrQWjnH/qsStvlDSv4i/VqzvlkbXmVJnmM/wAiEAhGqeQ1VL+Hz4Pc4Bfsb6mVZyZsP8w1cmlaCFHG3AmEg=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":34819},"_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 button component","directories":{},"_nodeVersion":"9.0.0","dependencies":{"@material/theme":"^0.30.0","@material/ripple":"^0.31.0","@material/elevation":"^0.28.0","@material/typography":"^0.28.0"},"_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/button_0.31.0_1519150977919_0.45887033175203285","host":"s3://npm-registry-packages"}},"0.32.0":{"name":"@material/button","version":"0.32.0","keywords":["material components","material design","button"],"license":"Apache 2.0","_id":"@material/button@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":"5792b701a8a10dd6052e6d5ef9429d23fbef8a84","tarball":"https://registry.npmjs.org/@material/button/-/button-0.32.0.tgz","fileCount":7,"integrity":"sha512-3PBA+o8T5lFJbCo2GZD8sm5U4VXiHDN6nHkrKlysuvcbo6QQK1C3ZMP4BIj2nmSpodvNRXOk8opG3feDcubg3g==","signatures":[{"sig":"MEYCIQDy0KnsYbHHPYVT+Swfn4NZbbEuxJ+TFRxTl4FQAhHUcQIhAL81CDj/UL29UsbvQPGrXpRqbvLsuiTeLWxHi46feP4P","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":32708},"_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 button component","directories":{},"_nodeVersion":"8.7.0","dependencies":{"@material/theme":"^0.30.0","@material/ripple":"^0.32.0","@material/elevation":"^0.28.0","@material/typography":"^0.28.0"},"_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/button_0.32.0_1520287719633_0.6949061393522076","host":"s3://npm-registry-packages"}},"0.33.0":{"name":"@material/button","version":"0.33.0","keywords":["material components","material design","button"],"license":"Apache 2.0","_id":"@material/button@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":"4d89a65ab49ce47635c0f886a1799bfe6005615d","tarball":"https://registry.npmjs.org/@material/button/-/button-0.33.0.tgz","fileCount":7,"integrity":"sha512-B8tBKwa0ZRAHgJhASboxqIkoWbvBJMNF3xjTA1Es5JknTTHH2KZiH0xYaiKlGUPyVzo81aOW92blZSr/sASsSw==","signatures":[{"sig":"MEUCIBjRTvKZWXhUzNLnGmCUVYbpdvwEvwK9xob6HIDOzAl/AiEAxTJmyzOszNj93Mw2uKTKgHcp03KRnEKSZYjkwAO2SyM=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":37282},"_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 button component","directories":{},"_nodeVersion":"9.4.0","dependencies":{"@material/rtl":"^0.33.0","@material/theme":"^0.33.0","@material/ripple":"^0.33.0","@material/elevation":"^0.28.0","@material/typography":"^0.28.0"},"_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/button_0.33.0_1521477597166_0.18600784828883277","host":"s3://npm-registry-packages"}},"0.34.0":{"name":"@material/button","version":"0.34.0","keywords":["material components","material design","button"],"license":"Apache 2.0","_id":"@material/button@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":"47e7284cc1f3f5e2929a0f6b8fcd09d21e9714e7","tarball":"https://registry.npmjs.org/@material/button/-/button-0.34.0.tgz","fileCount":7,"integrity":"sha512-Gh7OAd4GZ1uDda7GIwSpf4Jb7SphMHGq7dEw0G91JhayUVKEGYQLPLzEgw+SZApqiUA7xZkrQbOQbvYV8D84lQ==","signatures":[{"sig":"MEUCIHC0SINz98O08+mZTLLTd+HAxAzMjTMXtG72oYF9ipJWAiEApUgiYeRTafEU6ZggmGMdMaXpMGM5oAmD8hbWwZWEM7w=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":39003},"_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 button component","directories":{},"_nodeVersion":"8.11.0","dependencies":{"@material/rtl":"^0.34.0","@material/theme":"^0.34.0","@material/ripple":"^0.34.0","@material/elevation":"^0.34.0","@material/typography":"^0.34.0"},"_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/button_0.34.0_1522705911017_0.33601543089261887","host":"s3://npm-registry-packages"}},"0.34.1":{"name":"@material/button","version":"0.34.1","keywords":["material components","material design","button"],"license":"Apache 2.0","_id":"@material/button@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":"683fa3ace6a46cb0212c874a500ae9a6315ef9a8","tarball":"https://registry.npmjs.org/@material/button/-/button-0.34.1.tgz","fileCount":7,"integrity":"sha512-fYuMNviMDPd9r3/+f+2rbahzNnG6D+JXNrlfSn4Yuq61E2QRT9HlSF4+epS6srCQV4cJnaSKweth/gfcF9P23g==","signatures":[{"sig":"MEUCIQDaqFcxQYyb2SjAfwDfNUIkiTL+uncXyhMngYmzbaGj5wIgXXba2hBq26Sb1s0lCQhFZLAp6ibdeUBzYFQHGxL8skI=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":39003},"_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 button component","directories":{},"_nodeVersion":"8.11.0","dependencies":{"@material/rtl":"^0.34.0","@material/theme":"^0.34.0","@material/ripple":"^0.34.1","@material/elevation":"^0.34.0","@material/typography":"^0.34.0"},"_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/button_0.34.1_1522798783814_0.34709984212345435","host":"s3://npm-registry-packages"}},"0.35.0":{"name":"@material/button","version":"0.35.0","keywords":["material components","material design","button"],"license":"Apache 2.0","_id":"@material/button@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":"2c1df47ac71a9dd16998925557ef91d80c01b42c","tarball":"https://registry.npmjs.org/@material/button/-/button-0.35.0.tgz","fileCount":7,"integrity":"sha512-s51eDAT7CqkTP5YqOZiCtW0TWqME/mhB+b+/XOmGm6aGzX3wXSvV9tJJTjarFHIabXkz8BirGuqVyrLLIZp8Ng==","signatures":[{"sig":"MEUCIElrX4s1kdPI+vE+yjnAzmts6kyxo6MiTVxnvVYoHalwAiEA9vzaJSwKMymZzzxZw9kUgXnGLjmmi3Aeir11zWhpm78=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":34266,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJa3mC+CRA9TVsSAnZWagAA0QcQAJ1fdfV5e6mAtVCpgo47\nJZDwf5kcn0DsfJCi5JYL6jNQonQHZl0DAOkyP/iMVOj4ngWYhEj/JGSmkE+Y\naApM1m72f1lqPUO344oNmiqTHp97H5zOgdDR/PNHiiZ9YPeyq1SZEA74R7zm\n8p3QOvH6zLNr8vIcLP0CSLTyEQp+nVHgtDyNeYiaUQaofh7CoWzdYBy177M5\n2JDmXqX/1ag4zC9dRXoqzVOqR5oTJrXl9qm3ORufVdH4A4cdjayQgl4OkvLC\nvNMuJeeu1MpqEDVn6x1uBxQ6fVfvyvyJzbJfUnNYcv7HMQS5nn6BPI0qw566\n6iV8t6S8sFj4Quco+pXMCH3dvzuSHcZ6ySMO1ZXuhAJhwFvfOQuC+8c9gwgm\nhGF0JPbl5Y+mI1QhTgygQDOLQhMgOwGz5FaJzdi2cGN0IgXzQzlbxSw9DXu0\n3nksMOSTF5l0yA8IbzgH4USomE1iJIqY2q5datfBKLziO5Jhsluz8a4pDmIV\nXVpMLbZDTfamBz7XEUgvwhZWCKA1cTq+qsTiaV/vru8ddZchayqF78wzYoc4\ny4LRH1qesZAq7Nr499phElJVQpye9L0lLihAQGXjcqxLgQx574cpbcTPRSzt\no4985ApeMOHZLUfPjepQUl28i2jBIPDXVI5XNU0oPnPCJVOh5O6acY8j5Q6r\nhdFK\r\n=AHXH\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n\n\nThe MDC Button component is a spec-aligned button component adhering to the\n[Material Design button requirements](https://material.io/guidelines/components/buttons.html).\nIt works without JavaScript with basic functionality for all states.\nYou can enhance the button to have ripple effects by instantiating `MDCRipple` on\nthe `button` element. See [MDC Ripple](../mdc-ripple) and [Demo](https://material-components-web.appspot.com/button.html) for details.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/button\n```\n\n## Usage\n\n### HTML Structure\n```html\n\n```\n\n> Note: Examples and documents use generic `\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n### CSS Classes\n\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory, defaults to a text button that is flush with the surface\n`mdc-button__icon` | Optional, for the icon element\n`mdc-button--raised` | Optional, a contained button that is elevated upon the surface\n`mdc-button--unelevated` | Optional, a contained button that is flush with the surface\n`mdc-button--outlined` | Optional, a contained button that is flush with the surface and has a visible border\n`mdc-button--dense` | Optional, compresses the button text to make it slightly smaller\n\n### Disabled Button\n\nUsers can add `disabled` directly to the button element or set the fieldset containing\nthe button to `disabled` to disable a button. Disabled buttons cannot be interacted\nwith and have no visual interaction effect.\n\n```html\n\n```\n\n### Adding MDC Ripple\n\nTo add the ink ripple effect to a button, attach a [ripple](../mdc-ripple) instance to the\nbutton element.\n\n```js\nmdc.ripple.MDCRipple.attachTo(document.querySelector('.mdc-button'));\n```\n\nYou can also do this declaratively when using the [material-components-web](../material-components-web) package.\n\n```html\n\n```\n\nButtons are fully aware of ripple styles, so no DOM or CSS changes are required to use them.\n\n### Sass Mixins\n\nBy default an MDC Button will inherit its color from the theme and align with [Material Design button requirements](https://material.io/guidelines/components/buttons.html). To customize a Button's color and properties, you can use the following mixins.\n\n#### `mdc-button-filled-accessible($container-fill-color)`\n\nThis mixin is provided for customizing a *raised* or *unelevated* button's color. It changes the Button's\ncontainer color to the given color, and updates the Button'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, outline or ripple. You can use all of them if you want to completely customize a Button. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, outline and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`mdc-button-container-fill-color($color)` | Sets the container color to the given color.\n`mdc-button-icon-color($color)` | Sets the icon color to the given color.\n`mdc-button-ink-color($color)` | Sets the ink color to the given color. This affects both text and icon, unless `mdc-button-icon-color` is also used.\n`mdc-button-corner-radius($corner-radius)` | Sets the corner radius to the given number (defaults to 2px).\n`mdc-button-horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`mdc-button-outline-color($color)` | Sets the outline color to the given color.\n`mdc-button-outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `mdc-button-horizontal-padding` is also included with a custom value.\n\nThe ripple effect for the Button component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n> **Note:** If you want to customize both horizontal padding and the outline width, simply include the `mdc-button-outline-width` mixin with both arguments. It will include `mdc-button-horizontal-padding` for you.\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-button-container-fill-color` will not honor CSS variables in Edge.\nThis means you will need to override button container styles manually for Edge if you are altering the affected CSS variables for theme properties\n(raised and unelevated buttons use primary 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 button component","directories":{},"_nodeVersion":"8.7.0","dependencies":{"@material/rtl":"^0.35.0","@material/theme":"^0.35.0","@material/ripple":"^0.35.0","@material/elevation":"^0.35.0","@material/typography":"^0.35.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/button_0.35.0_1524523197559_0.8589211026765537","host":"s3://npm-registry-packages"}},"0.36.0-0":{"name":"@material/button","version":"0.36.0-0","keywords":["material components","material design","button"],"license":"Apache 2.0","_id":"@material/button@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":"2e0092c4878e951ae4413ed0152f5d7984e15b67","tarball":"https://registry.npmjs.org/@material/button/-/button-0.36.0-0.tgz","fileCount":7,"integrity":"sha512-8t4MAlV86jFQTBBvg4DUmgFr59CH2eSGFyjrO77GhLwz9o07Tw2HRadpcNzIZcxFxJQ9Ffv5rH7MOj5kuuFFvQ==","signatures":[{"sig":"MEQCIDbjjaI/gMSbpsU7ShJ0TESEqhmbPqlamgQekhbmU3VYAiBiZRhaQ9R3YLmZU7o2HSTDTKnxKG2k5AIMILS900apEA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":33358,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJbDXAeCRA9TVsSAnZWagAAdZoQAIzCfH/DPG+CG/AQl24W\nPpx7HAsERhUMD1GF/ZypAnQkOM5MZvI+Y7m/3gt7IoCWt4lCBi3MtkjyhI2Q\nbwqtuIXAOZBiaDxOybMlEd8cr3KTLap7qQOfU80bpPV7FvFv4IBk4v9Dns0/\nFzfA/qVAC4Ep8G10o6JVMbA6erLAeL1ftwYXKRjjb4wEUiv+m/WlKpv67b2L\nLn+dEcwFQCMzn9SV7HcSRwwWW/a/It/JkAnHkZi9VP0DsPt7S0c81DvIVawH\nKwcQq/3XHujrYkyW4xH0XtA6B7DvertRQrX4Mrq2be6M4k5ctp/+2YkiY+zj\nGpqob156K/EiEhswNSoLGV/SnW4ik94eao7RlM3HllqV1047v2Iw67+u7SMs\nswMdma7EBy6YsCuqKT6NtmMTtJqYTGwm0OsoH4UpW6YdKx+nJ0FCMDB1Jx3B\nO5CqwsWfiPEmTyiYyWMQMhLd/F8uJ5c7DzVlYdbUCQNhH48MyxOg8dTtXNuZ\nEd7WG1vvPt8JeC8TCgt1tdj9jOUEtTsfOTO4WjsDO/uB8u6HF/u9ee5/O1Qw\nEY/OlpQAzi5VyrhHJiqiD6OIysO+w3BV4Y63GMIovFD40EoeDoiKDOWevpeV\nk1HVvEpOQbz8VG1YugkAtbsmImg22+6Es8pgS1SkaapLQ/TXnZZiDw6J0Lhz\n/i8N\r\n=8iml\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 button component","directories":{},"_nodeVersion":"8.11.1","dependencies":{"@material/rtl":"^0.35.0","@material/theme":"^0.35.0","@material/ripple":"^0.36.0-0","@material/elevation":"^0.35.0","@material/typography":"^0.35.0"},"_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/button_0.36.0-0_1527607325037_0.24682877163559103","host":"s3://npm-registry-packages"}},"0.36.0":{"name":"@material/button","version":"0.36.0","keywords":["material components","material design","button"],"license":"Apache 2.0","_id":"@material/button@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":"fc01a5c8f504254626cfc2ad500dc4d7495b7bc1","tarball":"https://registry.npmjs.org/@material/button/-/button-0.36.0.tgz","fileCount":7,"integrity":"sha512-gxIIBDBo5V0bcTSbtqGgu9d4HhKAnb/qoprOVBX74i1F9wKQ/Uy5/zqRunRlxR3deM30kdum31BFoVaj9H7Hww==","signatures":[{"sig":"MEYCIQDuD9DPqh2uM62tgdH/q0+JyxaxZNw42dixIw08mYHL5AIhALX8mkvy4U7hrAUTJ7eua90mA5v8J0FGGSHcMAkMvX+9","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":33354,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJbFVzICRA9TVsSAnZWagAAjUYP/2HmNbLLC6Ax5v1P+Jer\n+s4SfHAJtbQV951rMMJdSRBySJfWf+LJXoFxyX75OrR4fdBQRVImyDQNhbSq\nV3dsLLJEF+G4kB/ydpHD4QxFTj59FKdOpNJ5TRbeDO44DTR3SS3RKgB7torv\nLIiNfqwqZWUvDTLqIqsMvAo32hzdmGLk7vKq07y8h/n/RAut78xPk6ohxf98\n3x1VlfH31FWg3iOn9qjjFQzMDtv3UYKSfKA8OiOuNKzCbOkPvpk8CsMl5OGv\nCOYn8AeHLoqnGc4k0Cm3R1qC1GgToG/C99uHTd1OE1jl41SD61WJlXlEeVRG\n9dt2YIFkn8kjDxiTE+4vXyfuwIjppuoPPTDmjORdyG4xzEmknMjwebpMBgVr\nL+RNh9/tEAhjEJ9HKGGwbE/NP7ZD2cK/Vf6a/CQxm0lX2HbOqv+3WHEjF2hZ\ncPtr2QBM8JLR99N/Z7M1i3XU8kHSRbtNjAd6+pTo+DY1R7HJImFjtKrr/OXs\nuTXygtPmiw6XcGhndUfr4fotESgzwtG7OamxdfZt7hlKulFCJl0Dmo4AtNMQ\nwsRibC3jwJWPfzEJe1eWqmdRJyvIFGgAC0Tz/6a5GWSh8im9/jfnVhY5FK4Q\n+K2MmdIUX8otx1Qbp1Q9gzeyQreREvzajOUGrQGU9qG+2XSO8abSGniHREAH\nw4ov\r\n=Dwx0\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 button component","directories":{},"_nodeVersion":"8.11.1","dependencies":{"@material/rtl":"^0.36.0","@material/theme":"^0.35.0","@material/ripple":"^0.36.0","@material/elevation":"^0.35.0","@material/typography":"^0.35.0"},"_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/button_0.36.0_1528126663093_0.22883131029160486","host":"s3://npm-registry-packages"}},"0.36.1":{"name":"@material/button","version":"0.36.1","keywords":["material components","material design","button"],"license":"Apache 2.0","_id":"@material/button@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":"751d0925689a84ce23c20825b273a58ab77dc2d4","tarball":"https://registry.npmjs.org/@material/button/-/button-0.36.1.tgz","fileCount":7,"integrity":"sha512-t0PRU0ugwAmD4Z8h6H1XqI0lvfwxwvINREjqs9qRk+Z2hWVOJMFAKmc5bJCjdteFwNQpAU+Hi9XR07C4dDcjFw==","signatures":[{"sig":"MEUCIQDnIb1/aJXN02iFFGW531vDcOA+rdiDrMTexWUKssJwFQIga7Uv7MbvDWuMi3PvHBPXbq9q8aU9sPPq6w5QsKCjRt4=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":33354,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJbJ9JjCRA9TVsSAnZWagAAfukQAI1+/F2SYcese/wjAIYu\nJLfCevp5AY5EQgsJYVLgWs97TI5oAAT5VCs+DM8m89aYBKoStaT9jMcsiKzr\nOGmjuaVJkso1W03mtBSUHFoI6Mv13kwEaRHZ8xy+UeRN0gJ4/H5jJ+iu8fWG\n3HXJ39nl47oglX8eY1jYwm3cA6FFkldtbPQzt8AXx/q+qyFWzHIsUtUHmNMx\n0evv21Bn4gKHYN9tyktb1wn1B64WnI9ocqmICaaxjFRtpAb5ZbGsAC8c/r9W\nu5RQJFMhG5x4r0CpqYDkLonZR1U/oaDPTowSdGJXiZWy9dFKFPqC51U+OU8A\nC9+yPOukdi88ESqEFEr/wvB4xBV1EnXjWTr0+/rxBR7kNrIiClKvRPxbyKEd\nt+VzN2jwjZaWlUccZ+fcQ8UedugbQ/HDkRfO3LaGziu+oqZ0sQSxXvRX2Qbc\nyW9LpAshMaNcfiFhSowb03hi7Kol2ws6iU1kKpnQ9SSobfh0wxj6A61j/8jr\nlk+aOgmf0dyNRPiKLLdg/In5jZD5tK7itt4NK2ISSY+IoMnX+B5iznVIIfg7\n0WEL9vPQcF/9fuMAebjlR44ks9vLVqiH+T9CQNA4Wrw81HrVp5x0TjNirQ1K\nhnrGyVWErohHLkXJUWHwPv2Kjz0iBtuENCi7Zxn24RLsEx5j80yiy+ABKHGB\nvjFp\r\n=Phcg\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 button component","directories":{},"_nodeVersion":"8.11.1","dependencies":{"@material/rtl":"^0.36.0","@material/theme":"^0.35.0","@material/ripple":"^0.36.0","@material/elevation":"^0.36.1","@material/typography":"^0.35.0"},"_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/button_0.36.1_1529336417938_0.6817493726028707","host":"s3://npm-registry-packages"}},"0.37.0":{"name":"@material/button","version":"0.37.0","keywords":["material components","material design","button"],"license":"Apache 2.0","_id":"@material/button@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":"1c2b639b9222d022d2e7059084ec5e4c048c1268","tarball":"https://registry.npmjs.org/@material/button/-/button-0.37.0.tgz","fileCount":7,"integrity":"sha512-R0fpPCpl0dh3lbYbAK18tTx/rUAzUBihpRI+uh+//q2snPkZjG57F69zpl5UqA54KpzgFwbui/UFeA/prm+EbQ==","signatures":[{"sig":"MEQCIHj3h2NNQk3VgiVE8cFukZvUaFWys155CfpmMZ8GTf+BAiB6+l6nTRR8a9fR4POnn7iLt3GgA0dt9F/e93iMD97V2g==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":33347,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJbOqOiCRA9TVsSAnZWagAAV5oP/2VTuxMwq++DEQ36aFvQ\nzCdHVvkjgO6hGSSlyD0pQ4123XamRlYubnucJ701SJd5uzPRSt4wbtOroFFA\nQwGdrkOQosFfizOcduTQSFjJf9ZNczDdW1qEgAW8MKLKx1vY5LZ18+C6HEeF\nrL46buUlLcDu+ZvDxHmDQ0uejDVWBw/PWBPLi/ztXwIjdpkEkxoJU4c0UzDP\nry2vFJpVNvY1XkV2RlKizoFe2+noGKsxEjvUIGc+exHZR/C7+v5qlh4jlml7\nzyvJNMXkJO+Q0+5J+Rz+/gl9wrmSjgZpLncAJ3qL9ZD/8Njzs937+EL7Z5n2\nFJLwi1El69kjNtknjN9t6/vdAeImkQXHM+8EvXRE+dgkx3H2u8DxpttIjhyX\ne9W7Uiys0QNIZNA3+nfHprhkB8jn9N8PQV0Q8xmJLQ9V7yjYPizbA2VQvbiI\nc399PqPphTeK+Xr8GqEGvlfWU65KsIkTH/hO22bbJ2O9eSN8jWqlj9HeQ4C4\nm4MgahXCHuhWzBVrxF0PHOuv19soifqq4T356SyPpd+0KkoyaqyNZK3q6dii\nAzgy+i68JJmKhKViH/mJ60UJVZIheU4Zqfd8zySX/XS+ku7FzKMnFaIrM2Ia\nGY1PuubTY/8ueCLeSwa9JXfxiZksBmF5FYKVL68g478upFXU0S/dM2TZ8Fvx\nlSrp\r\n=L71q\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 button component","directories":{},"_nodeVersion":"8.11.1","dependencies":{"@material/rtl":"^0.36.0","@material/theme":"^0.35.0","@material/ripple":"^0.37.0","@material/elevation":"^0.36.1","@material/typography":"^0.35.0"},"_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/button_0.37.0_1530569634331_0.5664102588876787","host":"s3://npm-registry-packages"}},"0.37.1":{"name":"@material/button","version":"0.37.1","keywords":["material components","material design","button"],"license":"Apache 2.0","_id":"@material/button@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":"3670a5c13a7ab4f5bf22731b32cb3898c919dcd0","tarball":"https://registry.npmjs.org/@material/button/-/button-0.37.1.tgz","fileCount":7,"integrity":"sha512-sI6YRk2Z5hcAyBCV0k6i+QuWS7tlHO008jDNm7rjUPt3bJ5z/JaLaAaHIc6kEtgVSp+NMKlu6HhYtDl9KLq3xg==","signatures":[{"sig":"MEUCIQDm9KcNHUppOyqEJVoX5INll9rUxkAf3i5ZJ/3F3DHUlQIgMlkKQa4V4DC+1uMJYS/UGa1O0V0a6e9dzEwJ/bDFKBk=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":32728,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJbTQvOCRA9TVsSAnZWagAAY1cP/jAi897MTYol31I1JdK8\nfrO6D0t2HPr1wcwwGP1f4HD+RtUsHX8bngLs7gYp7GVyu+tTrqa6683cfX1v\nMpYfEJTGNEGbm53BUch69r0sOMtAbHuZ5ltmkEsIcPRRoDzzNSPnQUXBtMNg\nshLemIN8PqBmMEBwBxeNAitlS/rakLj0PbffwrhZdNYtRX5dUY29rn3ZbTW7\n5puc9T+BoJL3BvxMvEqVRJjwCNon7ip7dSx9HUus29Ttz1DVfeGLa8NYBTAh\nvtirXVy1Bl4B7as4bGW7ab1X7w6yC3+iPmssDQ5PjfduaLMGe03fYxaA3hHB\nMaGFTgzkNL3iV6TjIaeENSrTfZLKVi1Z8V67A/y1vGA0ogp7yxhobixv8uOs\niWMCcQlbfXrSzybw/SbTvQrVj9p2ZdAU2bX+xdAMDUGeNQpJdUYojhhQif7n\nrta5jMuueVt/+dNI4Y/wy9RZCNQ/eWZG6kbm450CRidOmrV3o0xOz4/bJpxL\n63qaIcrbccQTkXm1HSrkYoV506q9/6D8gLkDf+YP2XWsyVugMqqw//o/UhDr\nTJZqWLUYtTyEKUONsIvBtLfASIwRxO+LzPpHHlbkhTmcvZngCHGkO9mTbTKd\nwrPwqK2RmuWloD2PMWLi32zwdBNC6QdKokrrmeoQ6tURdRQUhmd31dcQMBUe\nSzOj\r\n=uVtZ\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 button component","directories":{},"_nodeVersion":"10.3.0","dependencies":{"@material/rtl":"^0.36.0","@material/theme":"^0.35.0","@material/ripple":"^0.37.1","@material/elevation":"^0.36.1","@material/typography":"^0.37.1"},"_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/button_0.37.1_1531775950423_0.5820522759311197","host":"s3://npm-registry-packages"}},"0.38.0":{"name":"@material/button","version":"0.38.0","keywords":["material components","material design","button"],"license":"Apache 2.0","_id":"@material/button@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":"41fe6c70a00cb887b32a04b110c858881aa5b111","tarball":"https://registry.npmjs.org/@material/button/-/button-0.38.0.tgz","fileCount":7,"integrity":"sha512-NMljx5cBOOGcfN07NCs1Q/zjh9XucRRjzvrpSeyWNF37JJNHY7BOvZwATG7snT/rNzKm0yXxV0rRKYypj4Flqw==","signatures":[{"sig":"MEYCIQC5zYx+PjbX9t3Dm6WkD2/ybT0B3VfCQsrgCC+AQAMh6wIhAOK6E3O5hEkt56TCm8cK8dgBjEIgGMaWGOzjmT5AafB+","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":32993,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJbX0WoCRA9TVsSAnZWagAApOgQAJpixG5mS9SssOcOaEkr\ntgI0GRrfbsyVE2N+XIY7ZB0zi6IvL2Sw4rbZTzQmEKF18yLKJYvqc6OKm9au\nNlDQrHKsWi71Xa4P6uZLnR9Miy/GxQ1D1O9qhVL0KMlQxopqCjGtEvM1Y+bl\n3D/OPrF/0ZOjmGuUAExlvsaWwjMKNGZ8Kvk1JXHYlef6wiJrV/ERC2gWFqP5\nxw5iOpPefqw9/cOEKjjjFvbS/1I1DTgJmqhwLW7xvhOsfLzJWdaV3W32PuBb\n8vE56unL/nluIwqlkZ6yPahKEh1brEYCt73RY+N702ZxA1/R1mdWKd6/7//U\nHqlB449tVaUeM1Edn//ZmJ5svYxw1mHzpaTN9Q0239p10B1KZj8nc4XyAcMo\nISQFXwGc+4wl13MQpghuYwB/N/srdi2Zi4E7YW8SJ/9hKCDTDCLX0C+sbO0I\nmbhIHoX0Ah2V9ndjIGDVcpGtGkr7JbxWTNgKAJDMGw3vrxSGd3nElFbF1zOy\n6TZeLEkZXZhlICsRM1OwNjr4T4Q/zCIZAxqk1oUge47O6Eqeb7ZzTUrPSZvp\n4rp6t3xYzRfsatL5cLEI2rpJv4AIArysmzxJCRspuxJZG+D3Z1TdV8EQESvl\nTwo+YWhmPCre3bgSKW/xvp5cv4eWwOMxtFH6g07jNKxqxIaTpBV7KoyukO+Q\nart1\r\n=gDvh\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 button component","directories":{},"_nodeVersion":"9.11.1","dependencies":{"@material/rtl":"^0.36.0","@material/theme":"^0.38.0","@material/ripple":"^0.38.0","@material/elevation":"^0.38.0","@material/typography":"^0.38.0"},"_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/button_0.38.0_1532970408374_0.3507902346007714","host":"s3://npm-registry-packages"}},"0.38.1":{"name":"@material/button","version":"0.38.1","keywords":["material components","material design","button"],"license":"Apache 2.0","_id":"@material/button@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":"006fac3c4b11d4731f86b60994ad38ddfc29fca2","tarball":"https://registry.npmjs.org/@material/button/-/button-0.38.1.tgz","fileCount":7,"integrity":"sha512-ceib9rvFIpUTe0/3crfmR/y4OTOQibj6OlHGedA5H/sh2d9ie+btQLP4Xe8I6UKZdzcy6IiLvmlRWR0YdABmZw==","signatures":[{"sig":"MEQCIDvHBb7vBphbmpf2bHNSi6SBo3QRy2D3JgKZmLEVyYx+AiBabzxwpQ/TavuMu1tkWUeNuXeZpD/ZuK6slHITSwsrYw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":32993,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJbcexlCRA9TVsSAnZWagAAHh0P+QHfN95kSF68733YF1wb\nTkpt2LDS0zxgkpIY/8gKElLcyXDSs181AeSldw3/i31HXIhS8nuDVMCJdo/X\njh/pqYQvuWsQhecLWdVslik2PonY4dUgHOj0PGjUTuDvyXxRy3PvOsuHesVK\nCR9LfqyJucWH0Vz65/SZ3GfQstQs2I70+4lr042TsDm8EoBJ8dvwU2tTx+5B\nq1JVCLE4a+6u6xc6U8i3bGangepTmxiz73DZFL/sUfcF9RQQSaU4OFDnznM8\nbBxcBaAni8X/w1UDAdC9fC4gz5/o7GN/G1nC7w0DahwlJfzC3qggY/mXbtjz\nY6yLNCPfgN2teaKIVZLIDPg06fvmfMGWWJZdEUGN3x/Bjn8wZvkr6xCnlOOf\nwTWmTgWoY5qm8E5b5UH6s/58EMalzOHsHzy9tRGB2qPQy/K/0UWFSwprPE6B\nJdmyp8uGjz1dvYE2XhoOzpG+zT8dT4XAvUE4WzLTNRUjlN6THaZ+u35QDsxc\nZNUsY4C6wjU4+6QrT8VEJV+v8e4tLrNVCWYaElQHba4Dtj9Bh9dpjOyS7qqS\nLXtZ8dVtjrTpv4xLrpxJTM0DW2iZZyqoqSYiZ3Zs2fHYemUCsm25ivYvb3Pv\nBNY1u5+4paoBDmmA5kKkAQ4qqA5YuH1RWc5hbp5KXKaIay4u4/WJcg2zZq62\n3W+W\r\n=cqv1\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 button component","directories":{},"_nodeVersion":"8.11.1","dependencies":{"@material/rtl":"^0.36.0","@material/theme":"^0.38.0","@material/ripple":"^0.38.1","@material/elevation":"^0.38.0","@material/typography":"^0.38.0"},"_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/button_0.38.1_1534192740965_0.4384426398345891","host":"s3://npm-registry-packages"}},"0.39.0-0":{"name":"@material/button","version":"0.39.0-0","keywords":["material components","material design","button"],"license":"Apache 2.0","_id":"@material/button@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":"2996e1c2f14a4f2d53a8069f107d88b42cfc0d58","tarball":"https://registry.npmjs.org/@material/button/-/button-0.39.0-0.tgz","fileCount":7,"integrity":"sha512-cx5bBftAJxzL0D3D8JSGBIIw4TYrpCtgiOpV03slLCr3oN+MYYwxXeyrVTmb6URUhb5jj9oaabADOjBT1VjBHg==","signatures":[{"sig":"MEYCIQDO9ZZh7KIRHil6LJZMQGiN5tqwfzhSyi9G/tDqPw2UtAIhAKw6Mj3Bv0shdywcuFR57UNGWm7FHGs0MN2aZtaewDUr","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":32997,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJbdZUtCRA9TVsSAnZWagAAZJsP/3w1eNt+mCyUSU2RqaiD\nohPpnVVt16AumeNXebpCNG4NyVXCmXRBejvmC0LbtSO3R070XvsgnkmmBGEI\nbhn7rzt2Ur7q6wlP1yX8Ho8BNgquW2tktPIv9UYxdKiBo0+SykcTHWpjapds\nqmSwo6Btl1TTtkHn8tSUTPok1W5EOPj01oK+2JNR55/+C72WbuGn7IXrQ133\nz07SDIjVRUmAsulf52khhvSh5KvUh5nWsG0N7fvxb7zBPWOA5mNeGli1rCjy\nzlH6GsUM32grxf/1ok3e9ZZO7mZ81psnZh7+dW/Tjcsj3uSTSgZ9mEaC0Z02\n3vLhaoHlOx5kP8Vr3rIDPDm3AQPtPDzmQU/7WSOwK5GNhpy2cGsMafJY+5cC\ncd3DQiAx3+AfyEcJ2HxYhm8v9u+f7RFxwNgxKliWR0OOW7GNnMK17i6Rrvp0\nLQFiyMLaXKzGSlj/Nu40hgjA6yGjPD74UPtufX8YMckx2TdbIz/mJnMtyPNE\nieoP95pep/0ovaXommcirSJT0aX5fuW7wEc3HUupD/nvilUYCpLgiHuzf5jT\nUOFlp2HkyS1dF6FiligNmn+F/E6Q3gyFCQYuG+VIRr1DtOeY2fMoqmGZpn1g\nkqQcMpO/kJiFrE+ysRcMB34afwZJWD+KJirn1XV1ADaK+4PY70WkJ2XNzpe9\nFn8i\r\n=zAw0\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n\n\nButtons allow users to take actions, and make choices, with a single tap.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/button\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n```\n\n> _NOTE_: Examples here use the generic `\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button--dense` | Optional. Makes the button text and container slightly smaller.\n`mdc-button__icon` | Optional. Indicates an icon element.\n\n### Sass Mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass Mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`mdc-button-filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass Mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`mdc-button-container-fill-color($color)` | Sets the container fill color to the given color.\n`mdc-button-icon-color($color)` | Sets the icon color to the given color.\n`mdc-button-ink-color($color)` | Sets the ink color to the given color, and sets the icon color to the given color unless `mdc-button-icon-color` is also used.\n`mdc-button-corner-radius($corner-radius)` | Sets the corner radius to the given number (defaults to 2px).\n`mdc-button-horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`mdc-button-outline-color($color)` | Sets the outline color to the given color.\n`mdc-button-outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `mdc-button-horizontal-padding` is also included with a custom value.\n\n##### Caveat: Edge and CSS Custom Properties\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-button-container-fill-color` mixin, you must pass in an actual color value for support in Edge.\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 button component","directories":{},"_nodeVersion":"8.11.1","dependencies":{"@material/rtl":"^0.36.0","@material/theme":"^0.38.0","@material/ripple":"^0.38.1","@material/elevation":"^0.38.0","@material/typography":"^0.39.0-0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/button_0.39.0-0_1534432556597_0.24558263539444547","host":"s3://npm-registry-packages"}},"0.39.0":{"name":"@material/button","version":"0.39.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"efc36bf25eaa78b78881a229d882618207a745f6","tarball":"https://registry.npmjs.org/@material/button/-/button-0.39.0.tgz","fileCount":7,"integrity":"sha512-+dZeBi4tX0RzNKHebRKbm0tKrRtdEqhSk9I3Ts1mS+f3sZYYYxCNM9GRGk453MhSH9l4Ag8Da0byLSrXSh/w8w==","signatures":[{"sig":"MEUCIARJWenoyqe8gq+Nyv/Q7Aqa3yuTcG7xSVt0uaLhWs3tAiEApqwPS1sMjMwdleGJLcA10PS3YFwT8G918thQ5GmUgVg=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":34469,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJbhDeRCRA9TVsSAnZWagAABI8P/A5lJEKMtiBlwST6zMFH\nwbbgwvC5Io/JMvBQZS9SU43CrI0O6Q10OTSoWX7T3FXmEtTNi96XhwsILs16\nn6C7Q0658X2+IZgXlz1rhKHOk6ju4p8uJLXK1u4SdNjTgTMjQHQuXVchuwSM\n65FovkyW13H3E3/0bO4W+Xfsxr1kr9FCeWgF36nHDANu6gO/Y57e3uUHCU+h\nazj9idIALtiIuh1gBmvNI0gHwpi3MPoTEZPAGZs2pH4fiZ/EyZl88if3ZVWY\nmizGOhCXPBL6ZAoPetO8IldNg9NYhrtvGg4+IEABRXO/6FOvgzNLJdM/ogB7\ntElo4CJ0d5yH9n3+IX+ziapmK7nYpxwr4O+0J7pbcOBt7i4Vnrk7l65SLPba\n2NRtrXzP+l6F8qmFy8JU9VTNeJkrVqMix1MfeHgA4FfhD+jFMmt4I4kPuwY3\nsoU6vzLlaD5LHgkEvmVbBHmSK4Leql9sbIfKEPi1L7gek4sgGTwngjpyeDB2\n9QSE4hMIk7zSwyxhP6o2MULjRmZLZ8IymC8/E/uKYd3kdSrpqXiymyfGYIg1\n2vHw08QqIPTE7zNECatrCuANzcj48oX9e3IEt1KhA1dr2gSY5sYvqW66G6kW\n4Kz8xrxusfSrObshvrcfNl9vcCC551R4Jle9ez16uAKyFbxE5d5ODTJP2ZQT\nNvVb\r\n=vOhM\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 button component","directories":{},"_nodeVersion":"9.4.0","dependencies":{"@material/rtl":"^0.39.0","@material/theme":"^0.39.0","@material/ripple":"^0.39.0","@material/elevation":"^0.39.0","@material/typography":"^0.39.0"},"_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/button_0.39.0_1535391633000_0.47138620055332114","host":"s3://npm-registry-packages"}},"0.39.1":{"name":"@material/button","version":"0.39.1","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"29b3fc7d91073509007967320137b68e5d56ca9e","tarball":"https://registry.npmjs.org/@material/button/-/button-0.39.1.tgz","fileCount":7,"integrity":"sha512-Tc6bQkyxEii9nK+/dLlV4HGoAtQue6Fg/83j3fiNN4P8Zuc/8ypMvGNImGK67CK5m6g3/i3ZGrTWrU+QfZab1Q==","signatures":[{"sig":"MEQCHxsZnJcuvSzSSjFr3BLeHUXV0SWs6qqBNbp9eKmiypcCIQDeK1Etnt3vstK1KZkRJTRSyf8KG01VcPeAu0owR0m3iA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":34469,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJbibTaCRA9TVsSAnZWagAAc4MP/iL82IMxjbwwSMGH9Rip\nheKAJk1fOlGFQu+7RN1T3IvjfC77Fs68DYDrAkq0M+6/bmMKgordqpaI8N2j\nkqJaSkDUiwzIDqLct7e7ffVFP2rBcA/27tvYMlJoM2w544UqPMoGTQohbC8O\nTqs47wFrVSDLcaedyaPgbsmvs6GclC7kUsuwIpxpBkbTERaT6xMbqGTtOIua\nemh7NDnd0J/f1aifS4Hog1XB0O4naY+QeZ7kaMG9Ez151+p56/xINrFl65Bf\np3KO+8owtupypMW6CPinsgYdG5KetEzF5SJWjIfCANy3pjabdzd1DARSxYNO\nbXimmbaTZfNch3cT0TFctrE1wD8prLTyBUnandw44MzmedtCiMSJ7qo1FdF4\nppH3usc4zxqdUlOJPdvT+Z3xTLhgjXQMawRtr6IzWWG1YidY/QqBij6DM2QR\naqvpBPslaXSAhBBOVEaG41wDE/wFRhHMccr8utYSKgu63wC9F9yvpkDNf0wW\naHnqYIM2X4u52u3H1I7nUPtxqUOUyXgWFHfxkPayL7E3n3ouvYM1tKSInckC\nDlYSqpXpiFFOIsZMCHXpm3QxlFCENlGvuD5eGWwQzB5WdEENB9Eh7BLO9FCv\ncSUbz8X880uAdDfoWul1N28A9XrJQ2neO2dMCeYztV7WUGqP0tyfxZQM+6bO\nVoZj\r\n=7D9n\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 button component","directories":{},"_nodeVersion":"9.4.0","dependencies":{"@material/rtl":"^0.39.1","@material/theme":"^0.39.1","@material/ripple":"^0.39.1","@material/elevation":"^0.39.1","@material/typography":"^0.39.0"},"_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/button_0.39.1_1535751386232_0.3117494093485824","host":"s3://npm-registry-packages"}},"0.39.2":{"name":"@material/button","version":"0.39.2","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"276d133012ddedabd3a71b7a3a8a6ea10ca20947","tarball":"https://registry.npmjs.org/@material/button/-/button-0.39.2.tgz","fileCount":7,"integrity":"sha512-rwsDkTcDYjdm7YWY9CO7ndAYOxsAULH/CStuJZc7AkdCPiujgIMxce59oLzSCWouxo8CadovAynme8vukJ/7nA==","signatures":[{"sig":"MEUCIBc55O2wbzwfwWR9RvQdGR1Oild4WrzHaW7gwnskXR9mAiEA3kn1x8/BBi0/NFZT0eqncJIBAbfWYSncH9ljp+pC3AY=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":34469,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJbl/NrCRA9TVsSAnZWagAA2FsQAIBh8ccE3E9boiYuHqY+\ncPaWisOzft6it4T9g1QAqw//7tEOqT7zVtXEl4Q485ymjTOsnFfWeAOw2WvH\nolIfJceSmEcWNLjpJs9o7AxNOzTby7CzeBJO6r+KDk4s+aqJMvSvlMVhCMM9\nLvCLZg46BNbsDA/uixt7w9G/RQlkFnB4xuyOqeKFan8LEAtCeDSHznHq9wtj\nPov/rsVkTa5U1ABWSXekXQ4WCTvVaovuBfojSUscayQiXC2ocsGl11okZZi+\nAmnVgM2h7dhZTOYHI7Pe9TyDnTF+dLoNhTQPR5JUDy5Ny8t/ECR4Ivnos09d\nJiIc0wxYZkUhiR8cfiFYO0LrasOhr0CKe28mXGpv/Uj/zBVZTSwDQtdL+Tvi\nrEmiE9F6OmfwAbc58IVfpKzd+Tux2BJg9i+CB8326jyPeBK638u4kQAtiFx/\nyqR7H0mGm1XW2rmp0UumtAWX464fMDmbYFy/n7ighZ/n+JSDxK7RcfTOV/Uq\nJky867zsDOMhpMLr9eyEg2x/ulYWL2ZzfBq22O90uKihBPo8G0Quo0fmK0Bv\nDQzM+cFcN7MEz4I3PwroD0fcp6uIrtYRa1mxy1Jfw4jUlZNgiWaWzLqZ8TOb\nLois5ys5aeB/HFgqBAihjr04VLPx4aTMZccZBG8EUx0Et2wp1BJdW17SF/Vv\n9wY+\r\n=l4RW\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 button component","directories":{},"_nodeVersion":"9.4.0","dependencies":{"@material/rtl":"^0.39.1","@material/theme":"^0.39.1","@material/ripple":"^0.39.2","@material/elevation":"^0.39.1","@material/typography":"^0.39.0"},"_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/button_0.39.2_1536684906578_0.209978880901998","host":"s3://npm-registry-packages"}},"0.39.3":{"name":"@material/button","version":"0.39.3","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"f2aaaac96932deeb692379a2379eca6eced918ac","tarball":"https://registry.npmjs.org/@material/button/-/button-0.39.3.tgz","fileCount":7,"integrity":"sha512-O4QcglZ9kgixhHbUk+vLZYm5LKgImqd8VUeClBXL3sDrqNSQX047D17fLk6Fy3n3WKroZ1WkVbM9T9gQTBmaxA==","signatures":[{"sig":"MEYCIQDSwUdyvCW/lun1FagfXaKFTCOVJJnJK8RAq2Il5UGuyAIhAJD+Zvyi1qUKdY9E1xyL4+xzf2rW6oXSSHBJR7SrP4gE","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":34469,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJbl/j/CRA9TVsSAnZWagAAeykQAJ4GaIXMRiMShE3g4l+b\n+KIDomoBAdXwYeoE1QmHVdYjwKzsoVcc8FDsdrQCgoWAKXCyOao3E2m43dMh\nlclrskYsojYfUzl9awMTwvWTrM97iL/CKpeYNLZDkwOrxSzIRMM8YoSfs9GL\nEtEG40Q/9PCYMeyHQcXdXLHjxi0xxFvcUiNe9whoYjL5ep3poiaCm295UlLp\nj18YziZOOrcqj9dQdoVnCHqLWEWyOMH3+Apt7e/ll9oXDQOOFYJLqLPjedij\nUJuWdU4aDNv8FiN+gr/nEDUxixN/ZGV0unx6AyhjL/ASgRbd8RMZWffHxpEF\nj0CBJ+GaP5yfs5BviZlO+ATOAL1mxTkpZU8f1Zd/ANJQdyFIP4TNm6IjnpjH\nI+SY0UXH98MYM8r4rACYKOHJ3bln/sAETfN3Hh+SqQrfwb+eCU0zWB07+7GO\n9wxsK0o5GDvsskGy1QPkjUzWCr1cPqHUsfyj38gbbeay8Wzcu7fkUgqMQ6o4\npmtI8Nt9ohBV9psqDuwlydaWbvH3b2GM0jWXwp798OQbnvyiceHnAGxaBMLW\nYahROAVhsTDb6fF5EfIBO3aBcRDTli7/nb0txil94lhNxr+ran3mcdZvnZkc\nqi2cvSCDRJeY9rhJTYxgwLJOAUD5r7T0PD26P30pNfQDOZiZJ8RFUy+42ZVF\nWpTI\r\n=t4qx\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 button component","directories":{},"_nodeVersion":"9.4.0","dependencies":{"@material/rtl":"^0.39.1","@material/theme":"^0.39.1","@material/ripple":"^0.39.3","@material/elevation":"^0.39.1","@material/typography":"^0.39.0"},"_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/button_0.39.3_1536686334887_0.5051006252594996","host":"s3://npm-registry-packages"}},"0.40.0":{"name":"@material/button","version":"0.40.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"d23cac5d6f628668782cc8b12368d10450e67397","tarball":"https://registry.npmjs.org/@material/button/-/button-0.40.0.tgz","fileCount":7,"integrity":"sha512-1HWT+Exqfcplda6xPmD9hvWmmr7Y8MdCkIhFkY14g1UuIf3rcGQGfS49HCT6OkLbcQ9tM7qgCSXHxCGK6MkY9w==","signatures":[{"sig":"MEQCIHhh/i+mCNIqvr+LD7vgK5Qbj6IUVjhluGhlbq1Vye3dAiASUbKGrIqKR3/Ki2jh836wq+MpU/D632Ja1/jhJexiGw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":35008,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJbqUKvCRA9TVsSAnZWagAA0UsP/3Hl0QPh33yJ5ZjgqLvz\nlPwxkkxINMSryZ/fEF6Qa2SfzitSvZH0zlhdLF3o179dlGDfT2dnAU1m2/1f\n+0ndwFjAPuPLiMHKs3VzXQn0ii5j0SMY9HeGwcbpaaGNBwem3gILeLtmxZOP\nPS6M1rb9uLbuh88nA7gevJOt9xUZn5LE3ORuwa2XHhKThmPgMjRPyZ+bHc3O\n8+riOKyI+2yq2b1y8F1ZjtDrG/1FA5a0f47IUklkHuFe93Z9z0JSeTCuYr+2\naKIQXV2+PQwBvX+rPj3ep40X6a6SLK/I7bxVSe9rcn/1QAn/L3vXZymqas7q\nwOeHeo+H2beK95QCGN+GUgyMKDqOvRAaH5WBZMXJ5nMv1MKuvuOQVqa7x3DK\njft0ndHSeJFY4kC1CaCUCxr2sj404jmTTzuY/cs0oiSTUxGOeG8CBsKRWPI4\nrhMitMa3PYggz7GZheM9qdCtLQDxpoL8iLag16mqdu1wH18MUuf+8z/9EHuS\n6YKKfk9Fb8CwkFl72xmaB6g8onp8xmhTNwI5J0apMhD7yRAdOndWS6IwJ2/s\n05+59QkC117DuPCaYCqAWC3c7s+3vi7CzCtBBuVQ6bBufI3pl6oUHt7EsTx+\nZ1Dkw65jGk9bHggc+6Lzz2tWeayJnl6DPpP113L5TodcfaCRElb8c6+f8q2Z\nsF1+\r\n=g67d\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 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/elevation":"^0.40.0","@material/typography":"^0.39.0"},"_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/button_0.40.0_1537819310292_0.6808900222968539","host":"s3://npm-registry-packages"}},"0.40.1":{"name":"@material/button","version":"0.40.1","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"b5a8657f7d3783d7fc0936f95d0187bdb0319eae","tarball":"https://registry.npmjs.org/@material/button/-/button-0.40.1.tgz","fileCount":7,"integrity":"sha512-xLNjq9zySnpZAP4UynyeXnnlLXf3iIA/6ilecwgF4d2ooUmNXcRdlRa8wGYT36JHsCfsP3AeZOjoTZUcmaiejw==","signatures":[{"sig":"MEUCIBFpbLGYqoWOmcJiB/eH1WB0fiNg+8eq9XQq4niWgHeOAiEA5lbJEErqmnd6Dw5u4tQSIxOjR2FAfeaEN+I9qpm4m/g=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":35286,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJbu8QMCRA9TVsSAnZWagAAg8AP/jeAwnxf47bFxX/xKNRi\nC+qWvF6LYzlzLxehstdm6FfvgWwQ+DHE5AspYpsxhlYwvQcB3CwIzTtjejcm\nZP6wqbHot56MBvthoR+iHGaVG5PBZSrbCvE4riVsu99HfJC3gjZ6aNEgEZ8P\nzkcYmTeUOhccRBOBCkZxMdVEHPJP+Cnx8vb4gaxxMHI3BsdF79BUAqERyMdf\nPggGZrnDoWrZeHsZxp3kvxyjC9shcXL0T45p/f5/Fm6hzB9l/+eml4fen2cF\nSFDe0OTTcmBzLWERWIRzzOXCbglCST/PdwILF7exRVZvIMTt+cvx9XvjqkQ2\nYS3BcRCv0QidwIiGK7hcC2o9wTUmD/k0L7RZx/BU4GMz3JwQNgD4sd4KRa90\nysieTd0eaHr+qlywsBpEElaCSRvckuTJitoG5IT0Ftr/DtJin8m1nmTVFrda\nueavzPfpMzkQcB8BoQw0DvkAItHPgXETvDRIxY5lE6/Npl59/UNb0ElP47/Y\nh3PmFkg3y5yhtuvjdbhNY6t4l+j/tBrHAseBs+tBZz075Jqt/LbMnZ6OK7Hl\nTZebC4zr2HMU87vpPIGCfqRQRGLxM7Az38GX81S8K4uP9M/Haa0fDMvEOLwd\n+/YqPTkXGaKZzhsROFRLxxkwaIA1HB1YYLx2XxcB0w9gh0BLITfQlNZEydIp\n5ylX\r\n=aquN\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 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/elevation":"^0.40.1","@material/typography":"^0.40.1"},"_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/button_0.40.1_1539032076231_0.6719568654645824","host":"s3://npm-registry-packages"}},"0.41.0":{"name":"@material/button","version":"0.41.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"2663f23780e777e5c9ebc8bf35e385f1edc94673","tarball":"https://registry.npmjs.org/@material/button/-/button-0.41.0.tgz","fileCount":7,"integrity":"sha512-9mA/7P8yD3YPJ8ijwu0oOiT65OCa8Km3M9OF6VAsBE+XJS9Wo5hWDMgkv16raeOFeXj+1ALsjvuTz31JdcSkgQ==","signatures":[{"sig":"MEYCIQDA0ZmR0DKYDiRKWyo1eXy3ezZi10MPZcR4SvtJB6spIgIhAMeZbeajSUMa4k5MM/Vq5TC8mOuX9Pv3hjjtBXQp3GcW","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":35286,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJb12vtCRA9TVsSAnZWagAA2tEP/1PPKNPvRj3oROoqNtiT\n+fmIKxtl5ya6OJidtUHinG+a0MFPFkxUlQQEIcdD3GGvkvqmBVXZZOnljtD8\nYRvofUCYYALE8SVBgYumIR+htOFb3NQZuVYnIhc6mJ9m5JiFvolTu3/Po8bN\nQEccuNeWfc5Fq97eQeW8TDzLDR3+1CCQIAWp081dBiFxKjKaf5eAfXAbTtY/\nKofUi3Wl4aVHdTPZWcpwhQYKtego/T+4xGuof2yvp7uBiQK9jwBBFN5rdAY+\nXSPUefhorBrOgtkRmj6nWQ+HfVosxm4LxnJKe3bDSrDuM2xujY9R77Z4/7by\nr0A3aHZM/+IBRMoiwH2NMQJLKGyshcDaUYZuiiqA2JS6A7Xbz/kR8eRKnLYv\nZjdLVWL+1CtDQfK4hppza5yEzXwRvU8vERwbklRB1BVwloklQid/OkyAsJsQ\nlVLk+q5p012QRP6NC00tpC5muoqnu9STBeBY5atFLy/cWBdtCibTdcQH6Axq\nIovtK2asCLndX5Of/GIF113D8WkPuQZg5LJo/MbNAtEJ3/pgnlNGsorifHeU\np+/PGhlAxSPPKmo+JO4ANo2aSfmspue9OyONY82x3FW3Zi7QBrf9yU90hSIT\nBgXbxCOIsxPe5u89Pa+T5xLl2yeS9UlXWKJk9shq4ZUL1Oe2D3rpXz5Q9J/o\nZ/gq\r\n=FIFz\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 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/elevation":"^0.41.0","@material/typography":"^0.41.0"},"_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/button_0.41.0_1540844525120_0.8978110874372311","host":"s3://npm-registry-packages"}},"0.42.0":{"name":"@material/button","version":"0.42.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"564df61bfcf4a7acc890992e5c8d122450b8fa27","tarball":"https://registry.npmjs.org/@material/button/-/button-0.42.0.tgz","fileCount":7,"integrity":"sha512-sX5FXkSs9VwIPFsUkdg7DixIwzff6GGOPEaTeDflu0f8GApkaj0rANoqlRdZbcRLLyruD7hIlp7jS0DpQqsIpQ==","signatures":[{"sig":"MEQCIEqjibccpMsJJvYKPUv7AH+rdT2kiGMOLTOGCkvA17jvAiAFzXVkj/gqHBlFuH5zTMZz0rVFIknrWUqG+AIaEhcq9g==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":34925,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcBwW2CRA9TVsSAnZWagAAzGsQAI7e2SBzAtZ2Dd87OIJG\n7rGzHst9njaYio9sNSRzAJ4t9hCaEIPpZEwYhKySMJwtaApX3/6hxNPFAhE0\nhVMIpRNiaFS4I+zSredSjj3eRWoKfE3lHxgl26gQWZVRr9nT+yp6L78O50+0\ntxg0S4+cmi2ZhWgC4j4k4bIPStX0vhpRvHeiep82MCzMdATd9O6tDLv60sMn\nuaPSgxwTwa/l8OkRfv2PdFPjjUg/B7yMCg8PhDhqL7/j8pcf7FSKQH+2TxOf\nj4x+vl7Yc/LVGZhSXveAfGJqPLHdaVzGM81+tCfldYqsFr2kgH8TpdCaDifg\nmkUeVVGmHwueIdC1BNJhrmnLN1/FvvEtf9SiKCp5ZGrL2b9FKjVrqkAqG/sY\nQhI3tlP9MWfPef4k5zjz7fsitSP65Ho4mIV4tsKJEnua/6VxRIpb7dFe77a5\nnwuri9PEmg3ifRdX8/p5ADEnpEz//rvUM/5mfxJOa12NfInHcV+DF5n4OrFn\nKtws5CSwTdNMcEqPyyR5xE18DwPqbcMar7wU4XFtUlYniZKk+flNLtJCYFKm\n0Kt3bm22BCLpJ/9RMBHRVI7MNxJzH6/9zWzlooc7iinlI2nTFvou3gsuj2Cm\n8ltzljdj0YSWtlBhxNbW+pwVnGICYkWQ4LFRi6S8WzMrz2ZlU+fDJ5vK+Zcu\ndrCD\r\n=KTt+\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 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/elevation":"^0.41.0","@material/typography":"^0.42.0"},"_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/button_0.42.0_1543964085618_0.20373118063272355","host":"s3://npm-registry-packages"}},"0.43.0":{"name":"@material/button","version":"0.43.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"ed612a5d47779a9eb9e15623ec2c2f2ae214d2bb","tarball":"https://registry.npmjs.org/@material/button/-/button-0.43.0.tgz","fileCount":9,"integrity":"sha512-BQbU1se1RH2TcLxhvxEKCJVR0jtQVCmk1gjOJ1SmrVsRshTT5gSQE4WRSFiV/3YmXYU994/KVYMCs2aovLFE/A==","signatures":[{"sig":"MEUCIQCUDPdwqSyFVgM/tDE1VnW8VNQIf37AlOegfqEjDzSAcgIgZd8NFKx9EIQHgkTbR1L9PYSm0yaFkl8CFBw2gmeJBaQ=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":131156,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcM601CRA9TVsSAnZWagAAOogP/2pIrd29v19Hp6sf+j3W\n2JVggkq6mVBfsvgf+9pn6TTn/jIL71AQCes+p+1ZUUtlH4F1e4EAy6w/wxoN\nkIAkDe/i0CO6h/hZXZ1+haTtbxy12qC/0VE/yA2x30wlNK7Ib69MGG6dSOgd\n+b8wAuQo3H0RVjMYvtFBzaY4fBGIXlXtuPsX8V0qCDhEZXfEt0d898UMU7iy\nFJCh44T9ac5OSZeQF++ZjG55T0uQRdro+DvkLvdny8rd7YhArKi6JkIWykbS\nuOj8viyMtC/SIdk3lkbKHhylQdSrMP/VI5A77UrzaDuzYes00RggZZvfIc2j\ne3NpLDt6d8lBgY495Q3H8hhnS44ZvVV5EZUDRpGePESfI27m93lY1FlI1KQP\nUK4C7OpP10njBY3QKrtxIj1x87TgZvP+NmWzNxIezq6CNJCqD2yBqKy9UTxF\nQn85bPNgB/CMR3P2V8Wv9xL/c+YiAmKPObByCGrNhy+Tx1DVD4SiEhGnaidE\n2nEv+BorfOflWXrenXyBFEX5xNqKs1NUZ8rCzKZK+XA0UR+bdgnoNevPnGBU\naEXOPNmYgLTBQZrjDjH0ruPffxThGmABS1oyaMvs8N/NeDau5tQn181VZKWe\nFpaSr7IG38girHtFmRv7Y24UTZMBvgz4yVafVj+MauaSQclGwcm7YhE+48j3\n+wqx\r\n=CUSr\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 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/elevation":"^0.43.0","@material/typography":"^0.43.0"},"_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/button_0.43.0_1546890548908_0.9740051849697466","host":"s3://npm-registry-packages"}},"0.44.0":{"name":"@material/button","version":"0.44.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"f01dcbea88bdc314e7640b76e5558101c8b4d69d","tarball":"https://registry.npmjs.org/@material/button/-/button-0.44.0.tgz","fileCount":9,"integrity":"sha512-T8u8s8rlB49D9/5Nh5b0XsKRgSq3X0yWGo71MgaTnCnwxt8oZ6PxW/cH6Nn3Xp0NCr3mlSVQs08BviUfAmtlsg==","signatures":[{"sig":"MEUCIQDPwr37X0HMaUdm8Jqhqd448XPYE4/GhREBftKxojMrPgIgDazHD1oI8lwDyQoPGfEcMoN3rcFlOIIG5kf/cvxS++0=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":146094,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcWIM2CRA9TVsSAnZWagAAnw0P+gNFBo2aAdAH7BWofTUl\n7ZAsLkR6CoTnc/ujTnjE0BYf5r1LcS6nMAhZDFV4f/e5Z4A17UUZzyhdq9S5\nNz1qHs/MbtFyfEK30Tw592VPVQaoajRf7ZjTAGN/Onzio5ueMYtJyjgmeMCh\n0vZRbd5ooBPgnXaI37PM7DJef6CZ2LE7fpvPt9oCeu5+MPNOoxnZ3rK+e1yY\n4oFD4liGH5vjAwXQpE9UyXzGvUkf/QNk3Ilun0hLqGoKI4xdNrn7GTopbXwn\nhPqXTqoHOfu1xURlIYdCBjZCqd9IH8E5esr5B3ZzgT1NY4wJMeDxiO/MMqIN\nJg1aMdbWSBfoqQ98/qwBEXnBcen1UJuQiuvOxVpp5uk61xpwRNyB76BQVfwr\n6fnQiXZr15co8EgBjnIECyQbjphNNjHn4aQo2TH0vuGGkmyoF5jDmasaa8Bi\nyi16mQoZWfzP3TjzasW02UC2FJTyQ51MmWBMrlj9PgsL6UsLvHR2xxgnvulU\nRECMqHlESX+Ewla4Qh+qBgcXMdj3ZCbiQR2cLTdapbcbzXkhWfCPMdKCtAaR\nDvAhgzEpGdxaNwpk016WqpzY6lsWNLh5E9g3/jA7BXvf4o69rNX/j0pdpPRf\n206hYjtPZdmvL5BBwpJbW4qE+vh3LisNP4HGXg9VQB9B3Apna+3Hm6MHGMQ9\nBfkl\r\n=vFBg\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 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/elevation":"^0.44.0","@material/typography":"^0.44.0","@material/feature-targeting":"^0.44.0"},"_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/button_0.44.0_1549304630283_0.9345548290322718","host":"s3://npm-registry-packages"}},"0.44.1":{"name":"@material/button","version":"0.44.1","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"2a0bc0e6961128ace81e050770695c4aaad7f3bd","tarball":"https://registry.npmjs.org/@material/button/-/button-0.44.1.tgz","fileCount":9,"integrity":"sha512-+eI0nI2zkxZOanPfeWzZPoQDbv2NqgUhUhPxERKoXEqkyJIne7gWRYMHqHjKPctsD2xmzgqGmGCLcrvhgFZ+FQ==","signatures":[{"sig":"MEUCIEp+ElyijUrLEZPZm54PW3SKclYlkXlms0RZ3Ikh9xrbAiEAn7hOFKfUKdAEQif3UAWykmeyHYGx68IsNjjfO/BZIUY=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":146094,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcbIsYCRA9TVsSAnZWagAAwB0P/3Kex/3b+PKGCIcQbT8H\nIoA1tTw2dKot1WiTUAFl8vw1u9Hc6jXMQBYOgewRvIP0Lks9QG3edIlgaB1m\nXnrel89OMvxxuRLoK53jQlVUWNAtSb+6SOT0MWgm3P6pcytjb2UNHjtIiCUJ\nWkkjAEYoy/mG1GQjMFNb8mw6aBHYTTKLhiS19csEKc8gHTJymRtWLr1ni83+\nLduiYm9pSpdhgkHLDBTjCVg7cKU4egvyx5lUS53FFgHowlTNHl54/UWbeACZ\nqYh+KaWiVTMMELONBmibZVs1LJ6Y9CrDdFongZ9AP8cFDlPRy3ziht2OPslG\nZ2mtUuMjZY2VdbHgQpo4t7qt65PRLCXL/BdJcZ1yVot1i8X0W3A5vtzL0O/H\nD+U0HpWIs9evbp8AqusEvKKHTKh/TgZMCu4dpNLIWoWtropHXbMHhJjb+HX2\nrzkq6ZalkmbQPqEHRMTwdyaBGcnXPNz0rlvCRlw3CmrdSEnKUYnBeJG6Ez2n\nMlRCrG0xKMEKxqq8QFLjQpRI7t9EJxxzAfXGgkk0PGnRt0qC1cVbehwv/E6Q\njHzMMfqRU47xTon2ftnHCPZOQjJ6TwLFu94BKSFgoTtLgWvqSJtr3ds59Z+i\ny4SIS85+jXlP7dYMzD1XQo8hcU6mQv21kBsN2HBC8TgexL5VSOXXcSxAWI06\nBvrT\r\n=rdnn\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 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/elevation":"^0.44.1","@material/typography":"^0.44.1","@material/feature-targeting":"^0.44.1"},"_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/button_0.44.1_1550617367296_0.07100726787930167","host":"s3://npm-registry-packages"}},"1.0.0-0":{"name":"@material/button","version":"1.0.0-0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"c61740b93e68fb2cb00412650b3ebe657e120d3a","tarball":"https://registry.npmjs.org/@material/button/-/button-1.0.0-0.tgz","fileCount":9,"integrity":"sha512-GDl8K6ntBwBJ081umkKeDGc0v/02VmA1FjhQ6jb5lBfdIGYXAKc6pPKcwcUKtleXKZ2dw2WmpMZAPotimaT9fw==","signatures":[{"sig":"MEUCIQDaeDMaZn8+KM550KAcQVmMAPDkX80zDb2/h5DhOaQNLwIgGMLDDzxW/DBiqcFYTkqHwfev/glOVIUE4HYAYM+As84=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":153996,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcdyRkCRA9TVsSAnZWagAAVA4P/Rgyi1Sy4plRo9u/VjKN\nfeyf3lc9bVBP/YJx7GYRZgZQKY6geHMW8q9dTKZ8/Fc4Tok02XojQ+Tc22cY\njGOrCoEzU/oa6BeVAjheXJQJRe42Lpad1uBaFHU0Swl9UEHCkkTW9shn79SB\neEz4t0eAWLYC0SxglsJAPRzzr8WntgZjRTnX93CXUonIo8TWAPvdPHaryoBo\nsWoWTMxuyVJWbI/lNndPlMD7lKEBc4wyebeKLeSSEkwJdf0Kp2+q/7glkZ7h\nnTKZBU/pBlA6s6m1jvCkgFb6d+FD6jIecRBL0JDuisbl8jQnt0+zqU1qeSHW\ncnJYHckkqiNhLZcQ1wapr0iJx3VgTOkjgzQDNr3LfAeHuboSIJftKZ44DMwe\nSva2JSgwQTfqBBOPzM6ezctEdRpI7xU0hQD+/8HOB4jz+rsDgID1LYFMi1GH\nULMRKaaZDjFRNm5+mUFg/HdHvHhjA1TzWrjeqsA0snCG30LDOf8oEJU7kktZ\nTc/8XpM4SVs/uPGSSBQWAyGc8qaoOTAZZeoiqquqVacH+k2h/XhXaASzqomG\n1JUtlczHSJZvGmFF9TjoyRl4xkKF419dBqzv/VGJ0g/Rh7KJujqn++l0GdtR\n8q2ngBfHrHdUrhxf1W70bIsszfSS70mBAKqyuJ1TPuYMiEw7ygH+SxMCEoNU\n5sLL\r\n=+aiq\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n\n\nButtons allow users to take actions, and make choices, with a single tap.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/button\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n```\n\n> _NOTE_: Examples here use the generic `\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n> _NOTE_: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button--dense` | Optional. Makes the button text and container slightly smaller.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n\n> \\*_NOTE_: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n> buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n> directly within the `mdc-button` element.\n> However, the `mdc-button__label` class may become mandatory for all cases in the future, so it is recommended to\n> always include it to be future-proof.\n\n### Sass Mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass Mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`mdc-button-filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass Mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`mdc-button-container-fill-color($color)` | Sets the container fill color to the given color.\n`mdc-button-icon-color($color)` | Sets the icon color to the given color.\n`mdc-button-ink-color($color)` | Sets the ink color to the given color, and sets the icon color to the given color unless `mdc-button-icon-color` is also used.\n`mdc-button-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to button with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`mdc-button-horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`mdc-button-outline-color($color)` | Sets the outline color to the given color.\n`mdc-button-outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `mdc-button-horizontal-padding` is also included with a custom value.\n\n##### Caveat: Edge and CSS Custom Properties\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-button-container-fill-color` mixin, you must pass in an actual color value for support in Edge.\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 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/elevation":"^1.0.0-0","@material/typography":"^1.0.0-0","@material/feature-targeting":"^0.44.1"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/button_1.0.0-0_1551311972007_0.6133806893828531","host":"s3://npm-registry-packages"}},"1.0.0-1":{"name":"@material/button","version":"1.0.0-1","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"afd2afc604f73a849a889c67b67d0e6f61d8a285","tarball":"https://registry.npmjs.org/@material/button/-/button-1.0.0-1.tgz","fileCount":9,"integrity":"sha512-QcCpxE8cA/ZMcuLOND3IzCstLxRM6XUY3LZofGxAcDkFBS1dKbvq8gVGb10Qkq1aHlqektg8YmmorY+p2sooXA==","signatures":[{"sig":"MEQCIBGpyFtdT6A3LzJiYBQ5GayYz3+3LB5LD4J/zDotREwUAiA5TeH2aw5Grhs/VcCiIR3/vetEANeIgX+y4IsN0D3Uww==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":153996,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcfbXFCRA9TVsSAnZWagAAw9AP/j/W3RFkvjnkaIVWJ9ht\naqzCci0AcVzA8/55VVBHn42CYCKk5gU5alNrL0Ik0Ft6EW+PHQV3XFJ2PZsN\nGCAPHAzQr1Mq46lFYIudbaP0ZbWjZYI0GC4XjnKs5isfGl3qv8DLHqNV9zWj\nn0uoDFA3KfZYpDtecVBhEidzn/CT1f6qgMk7WRakw7t3KPdShAywFp1VmhOS\nC1zKt+fXir93AWdYya8Gp+bUcut0s/4UgMViFYhdcrqf4/MYreM4FG3ztfp7\nK7SJ0dgDCrqukbVfj2Zi5pPW1+UBC7r4h6G7tb/QxzjLHfvzfTEiqsyk1VqA\n1Cei4RtZka5l6auuib7HYQUdTlsicJHun4ZtvtVgq6Nm/YM9K1qi8FneFOk4\nH4Tbp5Ih+xSBgvQqnByc+lbK4rmI10fJQ1RhiT5fRmoblA4vvpyd7JnEMkKz\ndlaBufi9CEkS46PkQoZx8sr2s8clg0/KxEliHVGUO/3VbQlcuSbrQ0N7I1B3\nh98AMODRgppggI+yFI7YqHekofUpGrFW4AHlbVAy3hrM8PgM1eT5FQ4evpqa\nUsJ/SWdEd49HQE5wMfFgX3PXKYHQZ+9Ia8Rm9q5F/LOSCpzARWbJ0dtCbvPN\nV8NmlhGXUpZShmAbGRYZYCamYO4Kcsi/ILwH61zisZtTSUj81xExSlPDUuX4\nZ6pn\r\n=j5Nb\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n\n\nButtons allow users to take actions, and make choices, with a single tap.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/button\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n```\n\n> _NOTE_: Examples here use the generic `\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n> _NOTE_: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button--dense` | Optional. Makes the button text and container slightly smaller.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n\n> \\*_NOTE_: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n> buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n> directly within the `mdc-button` element.\n> However, the `mdc-button__label` class may become mandatory for all cases in the future, so it is recommended to\n> always include it to be future-proof.\n\n### Sass Mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass Mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`mdc-button-filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass Mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`mdc-button-container-fill-color($color)` | Sets the container fill color to the given color.\n`mdc-button-icon-color($color)` | Sets the icon color to the given color.\n`mdc-button-ink-color($color)` | Sets the ink color to the given color, and sets the icon color to the given color unless `mdc-button-icon-color` is also used.\n`mdc-button-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to button with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`mdc-button-horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`mdc-button-outline-color($color)` | Sets the outline color to the given color.\n`mdc-button-outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `mdc-button-horizontal-padding` is also included with a custom value.\n\n##### Caveat: Edge and CSS Custom Properties\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-button-container-fill-color` mixin, you must pass in an actual color value for support in Edge.\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 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/elevation":"^1.0.0-1","@material/typography":"^1.0.0-1","@material/feature-targeting":"^0.44.1"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/button_1.0.0-1_1551742405102_0.36603712355014073","host":"s3://npm-registry-packages"}},"1.0.0":{"name":"@material/button","version":"1.0.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"5a7d6c7d607b81ed001770afb42c78dff75f9605","tarball":"https://registry.npmjs.org/@material/button/-/button-1.0.0.tgz","fileCount":9,"integrity":"sha512-g5fCKZhGZCFE7CfruJJn1t6qr8SC6DvmmZtAW1w10lDblseyoYIN/72zihE6Ol4PMCGaf3c6DKMkVXPKbyY0mw==","signatures":[{"sig":"MEQCIERgHhF0ZG6CFyrkpSE9croCKvQLRDJGFi+nfRw9YIjgAiA4gI8i/VY6p0qvnzMJtrRY6xf5n/j7dgawTcJrbJ38PQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":153984,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcgDa+CRA9TVsSAnZWagAAUMcP/3xmwnMkmAm4nXSHamnD\nrUp3QH+A1piQcfTHyHw5SonR+/ZnclA1bNlZWVI834K52rr82JShBAfC4crx\njb1dBjOoZeTftP+WYAfVNwZLPWVoREJhobQYnWuUMOBnzW9w6UkPnlq1SqoC\n6SjIEnlJ0RJ4LOsZC826c6jGUH9gYnSdMBn0RH61N2AnaUImOXgoq+wdBEi2\nOUNyvro75xNawBzjKCbSPKj2QU01JTKp2Qms+rG/Rln5hWGEy0YBAQOPP7E2\njwogfiFr6OhLZap5kZ67bTnF7p+vPq0xkbiYkort0/R5nQjrpXxtrGWB22/w\npEpxIFm+8SJrKbfZkB/B9CqhX6Q4S7yCsPmZ+46Mn3byp0NOI93DAgkeKQBC\nZxBbd6JB4bmBabT8DAK1NQJxEYLohqw9/lm2cntkNfmndJldehBMfxDaWARo\ng4V3LakOI1BTDu6is4Wna309ZWLXKlidpFphmIup43PAqMYR2Z5gzLoZodmx\ncRCF4hnP93clF0BEmOEulSVe5nJFTaWPams0abLXekyUNGi7GazIzxG7sUo9\nmJR+DWr2q7QwieK4wrJTT/Zr/t69k/54bdP1CNRoQ9TuWj6rGy2DPDO2LAKY\ntVNuNlw0zhfPhHkuZRHIGNvOUd4dHhTTomEfdxF//mlSkUve1e+oavVEnX9e\nKIc6\r\n=DEpO\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 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/elevation":"^1.0.0","@material/typography":"^1.0.0","@material/feature-targeting":"^0.44.1"},"_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/button_1.0.0_1551906493584_0.6000260814192939","host":"s3://npm-registry-packages"}},"1.0.1":{"name":"@material/button","version":"1.0.1","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"095bc9457ae18bcea5d4a0c8aa0a8a510a31afb1","tarball":"https://registry.npmjs.org/@material/button/-/button-1.0.1.tgz","fileCount":9,"integrity":"sha512-gMGuAlG9ETKH14Up4RAH87Z+51NkU725C4H7J0AnICzG75Rto8PtpMqNu5+w/c1cQM1Hudc8JfsflneMEZ10oA==","signatures":[{"sig":"MEUCIGjWKmNnct5eeIsFkELgSTXVg8B8dFpynpyPfDS0lrjyAiEAt/nhBqnmAEM1kBmFFHNl2Z9V+N6wJ++W3cg6bbguHXQ=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":156327,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJchtwYCRA9TVsSAnZWagAA7usQAKCvVDkfwpXmJG80H2Ht\nUucC7D5IDyGIUiRfD3EHv2Z+a2HaacCNCH7Boiu3gnVWYCUCJo8lnfugg0Um\nxZMBehz2yjZ8x9FrD4mmUhPg0m8DfBxoTOXqx7Tmzjn7grO8cisrQ4XCu2HW\nuFh4qJUCxAfwo8zW/jgt1d3U/t6VSkB0WNbT2bASgC4QgcxY1PPWec8hqy3f\nOrG+Rt8/kWUCImFmJ/7mEAptSRBl5tYT+8fmge18L4nc5uaS8ADnp4nfnbB6\nAboYoMmoPq0KteLVAGMh0tGbEZ0kL9keJQteiUu5ucXyzeAsnucmGl7SWQCZ\nTBrbrHIkatGfJwsuUt2H/9MnPgAcmfuIFiruodKrYsLsN7Dy0Oh927evR8V4\nfrxj8Yliq8b3ivLPlKr/kbxVtwGDKnRrKugLXO1d/mj2qWtvOiOaPlJdw4Ke\ncyqjXg1FxHGIVu+dH335rGT8SzqPLu7K0hFvX8TihhlP3UUl6s9MadirTfBh\nZrSyi33Ia9IwaRvOa6gEedC5JjWzOw5FvHQEoL9OFjW2tHCogQ/8rG11ky/T\nCZeUPfwa4KkeypGWuXr2k3baLaYzcRINoRPzSHJIWi3co7mecKX+MB6xxW19\nzIUjk8idrDYhZQGTlG4WSEyCzjhPkhc+EgsegM3oCU4GCuxAq+ozo3PPUQ74\nfSah\r\n=aNtA\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 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/elevation":"^1.0.0","@material/typography":"^1.0.0","@material/feature-targeting":"^0.44.1"},"_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/button_1.0.1_1552342039199_0.6909504729460931","host":"s3://npm-registry-packages"}},"1.1.0":{"name":"@material/button","version":"1.1.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"dbb46c953040d3a161346e1d3cd057159b9a3c34","tarball":"https://registry.npmjs.org/@material/button/-/button-1.1.0.tgz","fileCount":9,"integrity":"sha512-P1oZyyC1ELRe26vdnmax+fO3BWNmftDqHDDlQbJ+gfYMDQsNQtZNJU16ZbnVHsnzEXOpFj729imbmuLfnz8Nbg==","signatures":[{"sig":"MEYCIQD/iyfJ6cEEmtis+/USTn8FCSWjTQBYBDYX69Y0IHnKsgIhAM5c2ByKCVFNr9G5lzjbIsLn0rVt9ojfDbfvCsCEM8bQ","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":157130,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcmnzECRA9TVsSAnZWagAAHdUQAI4VnEz8p22fZ7L1YNoi\nC23V73yj1T0feFepp//tSTIcniauCthc1Uo79pUD1wvOulu/kswlpSZOBtrL\n3VwHjvOziMOvyXZdWvs4cvcVRbHaVWY0Usvso54htYwGT+Tw/8Lmz5WR46Il\nbWra0muIUTlOkPzJFpzoCTxKAR8t0PeKRBM+L+5Un6hHHRlC06mmxH6EAm43\nJJtDuFuZb3Imhr1LN6nORhHWErjxCMUalv5A6T/VFVl1AyenjB+C98/tJu4q\nffjxY/osm3eXBzxKimcFUMgvPox4mlZSxSI52rdb1g4pNsS80vLWkAYTZuTn\nr5Z3S92Zo+sb0YdfIa0OpX7oKMOKnBMkJd5tS6rEjFXhsPXs99Rh88baP7Ej\n4BNqjl61DzSiA7wPkJuMC6ERviuU2TB99xm+lZv341U63NyhTplgw6X3gLZk\nwFKJYuMNv6NXinI2gDM2q6defPhLmYheTviSXU9js7mJvync65tb58n+++JO\n+0ebZ1HSNkllY+BPQFzydeYFxOL817GcxaFIFxEUDBYoVVqYpy3g9+jNZloQ\nMS7SIYElPYeLDZa58lZhtIPzXbctUnKuop/Uq59T85EG0xGxyO+Uh/5ooO/g\n9+xPb+/wInyafWpngwriRHhxMqD0f3G+J0s8ngI9dAxKZFZNZCwY0pX3Rp00\n97tZ\r\n=uNlY\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 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/elevation":"^1.1.0","@material/typography":"^1.0.0","@material/feature-targeting":"^0.44.1"},"_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/button_1.1.0_1553628355240_0.3308634521803395","host":"s3://npm-registry-packages"}},"1.1.1":{"name":"@material/button","version":"1.1.1","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"35af0d295f6ce6e3df9d4978485b5294d794f682","tarball":"https://registry.npmjs.org/@material/button/-/button-1.1.1.tgz","fileCount":9,"integrity":"sha512-03aEyzZBIeqpgZkqLjro/enz8ORUnfQslBUdAgkPqdjh1X0oIEugr3UaFyC5QlSBTU3j3GIsnKIxWaggkRenpQ==","signatures":[{"sig":"MEQCIBdirXuy5kuGzId7jQPa9ps81W3V7FIIWJD4vHvU/oAUAiAMrlr5VDiIQ0zFtsi5uRthgf4Z/3NjmPZOANk5qrmBjw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":157130,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcq6uDCRA9TVsSAnZWagAA5cwQAJvUaMilLjTlE1iM3MmJ\nRYuLvwCUbnh1BmLfqFJIXZaHz/AdxhTjS3+zj3VFsT2vmSmxodonlX3eHvrd\ninPzop0eMcPrbtjs1fWjFyvOSiIemmzXq1QUzn8GMuW9pFC0H8u+qW2Oafq1\nv+f/oG9KUCsFsQ86BBs/6tEc7rpBQMyjZyTmOYS8dpMLDZI28RlSch6L5nHF\nkA8cX+VsGPe2TrYGxkatMjDIzMpBgTjLXLohvVX9VUgQ0vOuVi6vCD428C2Y\nBTzeNMYNipYVOZYdG7JVbuYedsNpmVtkjcuJgxvBuavptBXxtAtCPUWiPOul\n8WIPPlbP5iQs5+3ZHNisCS3NyM5uj8ORIeq0B1y0lkIp63uWqbjohQ+lnTej\n7itOcyYPBIlkjbu5+6QhdIgidhByJo8OqhC4c1yvrZvP40G1EYXu6GJ45Zqv\n++Y6sTtKBjQ/u75VPuzj9uBGUrBtlTRIBcjg0bDc9u9teaHYsJFL6e2t6eYc\nz5ls3n8iG13NE7e107Hv2b7jXfqr4CYlrvhflcO/c7utcgNyuQjyWb1FYlNQ\nEg4z8t9eGPsAqPhIWXdAEhpQJiShL/kxh9zLqowf/aWy318ikovnkhk8Oi54\nXHSrcgEsT9DAFRSXF8LFg6v/NCagu6AMdP0BdZ2APASo9GBQFmCmpyjynjkZ\nPS7W\r\n=cr/s\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 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/elevation":"^1.1.0","@material/typography":"^1.0.0","@material/feature-targeting":"^0.44.1"},"_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/button_1.1.1_1554754434871_0.7768993406644074","host":"s3://npm-registry-packages"}},"2.0.0":{"name":"@material/button","version":"2.0.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"8699cbae8fe30572b2d6e499438f85481be6262a","tarball":"https://registry.npmjs.org/@material/button/-/button-2.0.0.tgz","fileCount":9,"integrity":"sha512-3qGywVbKUM34CDUihHPNpGh4PmKOmPgPYa8Y346mZg1wpOf7gW0vi+EZQOC98AqEKhIMe7l0axKuLfklUHOHjA==","signatures":[{"sig":"MEUCICkGU3rJtuy0zpf7b6ZoDPhqADaLgfLqSjU2DAH+YmYjAiEApz2PtxIPRVIGTP4J5N75X+cDJPG78xh3Bj2j9G/oHmI=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":157717,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcxzb1CRA9TVsSAnZWagAAHboP/3seIT9qS9ALCoIOv1WP\nUvn8HMcArQ6mDm/De4Kl6QD0FlK+t2s1S1AtyfQm8kvFDwMJAw+GbdvJJ7Ni\nQxQ066JM9EjjQFQx0BmSGSTjUubhM1t3UdtscTs9SBgxNoWlhCKE49fhm4xH\npnfudH0oVzXj3PXa5JX2/O9/8cEkj3L3mYsxBgkTsEYObNWCR4gRD33eqVWi\nMVzM6mxoNFoPKuoP7fpeu4szAUT7xMM3DLoUzHbsXtUctZ+54iwD0YpUsofw\npcpxdPHj4LmUtglEXj0QpMTnR5s5acYqmUCRJiv8ZxfGc36+bgqLR/2BfQ/G\nUoA/EU3CSRwxrF0/ow+DSnx2rtD7AxXBVZPV3BPjEHqeqVrERMgirv0D/iyt\nc4R3LZVsyC7YfOSdcsKzJSm65zpQX7bRLhhmrdchdyh+iU9D6x8o8ZPDZ3sH\nw27LFyA02e1Pw2Koi2ZBRj4/BVffbtwxSw4cQlIkqgg84/tHPp/g2p72NTOq\nkznbWocFi6CwNcSyygKSQ56PENVxv9Oc7qUcaUkg1q5TSdTRcSjQnzab1We4\n2jXsdOEcp3ntuO1vZJxdO/XPYMOE9/o/shIyxhh7tmr4zrb8gWSMSXgDxGNc\nvaRP9nnJZzgOOscO4krogP+tVCx49PSHNYsD0kEsOy/3pBJpIwibUZMS3RcH\nfmcP\r\n=Ygyh\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 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/elevation":"^1.1.0","@material/typography":"^1.0.0","@material/feature-targeting":"^0.44.1"},"_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/button_2.0.0_1556559604650_0.24300894115073635","host":"s3://npm-registry-packages"}},"2.1.1":{"name":"@material/button","version":"2.1.1","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"e2bc631bad8480dd0b46fbbaaaa7d6712bf0d86d","tarball":"https://registry.npmjs.org/@material/button/-/button-2.1.1.tgz","fileCount":9,"integrity":"sha512-fVhwrVSMwaUsLgPec0yYfJHwf70q3p2yk0qq5EnbFl36AcapUihV5QydEnlJBHmrwB3nvpMooL7hYNzRiqlcYg==","signatures":[{"sig":"MEQCIAJyQbsL/gVXHhHth4ufzWn7Krw/F0oxXQ/3Av1E9YbFAiBtVdu6LP0QRVO6ZvrCKJPO01ICI/peRPMvCJIVN4LpUQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":157565,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJc1bP4CRA9TVsSAnZWagAALDQQAKNHT4aAencBFuF+5yut\nTa53IVBU3Z2Fe1q3HkfHGz9flmzHBJdddVWenhIg2SftlPNoEO6L4xvllXyv\ngYZSTBJpplBzlkKkcdA9knVzbg47vS7lkzCNnYi19rSr29QYSzDgPcqe97Gu\nmm74JA4XWizxfyJluLgv5ih8a3oBCV87HAg9DrGVVvF6kElbyaQ9TdACidml\nUBuKnpunJd1W54us661+FgX8NMlunL5h4FsWZkltEvJfIn5EZQs8haD3A2IB\nOG8liN9r0WRp1bViN5QM5jT8+Q3OmWqyeBHLwWu/sGCfTrdgv1VlydNV9YBV\nSQH4wv5LWIpOjLWOEiYhalkRBGlT9ez0GhGI5DUPdzo563x5WAXjfoBGHlRX\ng212aDbdfMLlMJ07iQ4IeyOVZQ46sQO2DJ/yANpCTXEQx55MVZ3FGMtJGwk0\nmKbHfo3KtE2UomsmxhdpHXmdefOPwtdlH84FFSKRFqMGJAG1fxJmBZaZ3Vbr\nSUiBC9nbtBn4ccrBkTqn8MMjaXOLxxlAnvA1hS9nvCZ5Ns/8Jabuijxowj6n\n+Q08diRygVGzOAzSTIKwzQCycjmiM9sJxgQ3zZ7uGG98wpWQ8MPKL2xNZ6zL\ngkUuPdq0HUOxU2HRPy4zQ6k5MZDxdJB5XiLzwrl25ixR6Croa1L16v078oPk\nJX2f\r\n=oqN9\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 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/elevation":"^1.1.0","@material/typography":"^1.0.0","@material/feature-targeting":"^0.44.1"},"_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/button_2.1.1_1557509111546_0.15855951018306014","host":"s3://npm-registry-packages"}},"2.3.0":{"name":"@material/button","version":"2.3.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"eff1349babf3f929bd99f86742df988185247d43","tarball":"https://registry.npmjs.org/@material/button/-/button-2.3.0.tgz","fileCount":9,"integrity":"sha512-xFyZjm0pmisfSU6OHO3Wk2zZX51N9D0DohmaPoXnZt2unfD8bCwRmlmD7TTUQCLnuBoIaqrYShpcRTGp4K5dMw==","signatures":[{"sig":"MEUCIBnM0bcetROm+07yq/on6KMC/0KOGTJAnLrBy4mnLLD7AiEAwwsPTtHIeXOcdHQQmVCOolVflu7rlxEIP/RAjNMC+Vc=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":157566,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJc7abjCRA9TVsSAnZWagAAmDIP/3O++G3Jm1Tjdt2ppGAa\nC2eQcOscveM2oCLtOjO3qNHgxfwzEwB+U+b7ZwBYSvmhGhw6vRNra5LNQycx\n3eylAkS3Clx+pNixZgaCe7Ojer5uhwKI12i/xREH6Styc5rjwEvuDQZuaWbt\nVonnoDVCuimhEdgkrkzkCqRLy6kCe9YafegjIkXMuW6Zl+peVJeCqXeVhDKJ\neS80yFTGEK5fO2yveL5W2Gr7BJpz2YmC5MK/WCa4FohalqN+cNSKnnYjf+Lh\nvFrm0U4kRA9OLC/DUtsjV1p7KcFHackqiHijgaslEiMB5jdGZn+BfZNe0UKx\nFXFtgx4LgZ7NJSJxDgf8cL/XDe2UWsssJQehBaV7z3kjDv4gh7A5BrAK7UTu\nfMLcC+v3WcDFzpAuOvzlJjEYRbIcaSzaq0jBPTZ8Ym4BKB2w7UL43ASsKKVi\n3xqv/GC8PRpgFUQD6pywbpFedM7KWx2cX7+ZgBYipsPS4XD5HjXWouOYdt0+\nVKztizm8T7Oeudw9jL8HV1Z4FQR6MoG/dzVB4CKWCnsWjyD6Z9YTN4k/XPzu\niLXY682IuJiAb5sg/bD9FtJw5NBLExLPG+Mxl8LM1JbZbAjoYUtTgAR5kal0\nL+eIH1ZiFBwmdNzB4JR2l1miOKyULx7KxFAcjPuo6ABqTenDeESyVVdhcVVU\nIEeF\r\n=bPBd\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 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/elevation":"^1.1.0","@material/typography":"^2.3.0","@material/feature-targeting":"^0.44.1"},"_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/button_2.3.0_1559078626884_0.5749723874218435","host":"s3://npm-registry-packages"}},"3.0.0-alpha.0":{"name":"@material/button","version":"3.0.0-alpha.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"5bd430728b5f4dbe50ec55f34047d6d2fc8da770","tarball":"https://registry.npmjs.org/@material/button/-/button-3.0.0-alpha.0.tgz","fileCount":10,"integrity":"sha512-K6FCFmBm3EBE6kM3QeLLOeRtlcubBWkKoOVK0lh9WPeUGYaqYzTTvPCHkDzz9UkdBac+islbJy8NvCPCuOiHcw==","signatures":[{"sig":"MEUCIGe4FzLBWWTCA2sZhGeUT7KoiY5jF3ErBizM5KeICqPaAiEA0759Fk80rCvEzDFkIFXubIZauj6yDf7Pu+WxCt1ThVs=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":158749,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdAHpeCRA9TVsSAnZWagAA5IgP/iMAl3rEi8qUtcO4jS1u\nOHFsLGTZtczTdadDj6fhAqUkMpmI8heqwxYPSKhE0Ev+nXNveaoX+lliyIlB\nU1KbQr7A4++YcprfkoILRH0s3f5mVi7owI8u5NT4VlKnky59twlUiiATg/7P\naOh28e53UAG53tZW/AvI5VD4Mj6Wx2oruanh5v9NCxm8aMp08ufGg4mdMRWY\nn36oYrN+ukp7MqR0rqz2tFQsihS0LDcpWA2Wzw4jY9C7bm9VplFGw17AnwEa\n5XCVb+wy3Ju8XiVtCuTKUYkqiG1mec1c6P7nWPkGO6YnvOZ4r3MWGZVesHmn\noehAYzWIaDIRGt4s3vZeruZxnzUv5HbgY7Nrz0El+0ow5MuQ5LDSB9hKH8/G\nB2tVe5BilWs0oHBSJb2kHdSnKBY0/b0OHGM5P8KzW619uq5UwgtkiWH4wt9t\nkJsVciIqXC7PCNBUazFsuGfaNtGoRCJt0T2aoBLFDPpdryLWcuqkigR8RRrA\nf1wBCyjx75i0zJVUCdCMbOAL3UT/oiG62OVuT01uTmJnuvKAAszCTndhfbYm\nQQZkDUS/gDwr5atMYxmEOHc3h9cuCImxRsP/jlNaCGrjReyFg4Sl3/c909BD\nl86jQTNclr7mD/JBONrROkcfSxnamTr9uChCYK6nHNkLHjZdVTBa19yZeXCq\nQT9R\r\n=CPSp\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n\n\nButtons allow users to take actions, and make choices, with a single tap.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/button\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n```\n\n> _NOTE_: Examples here use the generic `\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n> _NOTE_: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button--dense` | Optional. Makes the button text and container slightly smaller.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n\n> \\*_NOTE_: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n> buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n> directly within the `mdc-button` element.\n> However, the `mdc-button__label` class may become mandatory for all cases in the future, so it is recommended to\n> always include it to be future-proof.\n\n### Sass Mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass Mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`mdc-button-filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass Mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`mdc-button-container-fill-color($color)` | Sets the container fill color to the given color.\n`mdc-button-icon-color($color)` | Sets the icon color to the given color.\n`mdc-button-ink-color($color)` | Sets the ink color to the given color, and sets the icon color to the given color unless `mdc-button-icon-color` is also used.\n`mdc-button-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to button with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`mdc-button-horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`mdc-button-outline-color($color)` | Sets the outline color to the given color.\n`mdc-button-outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `mdc-button-horizontal-padding` is also included with a custom value.\n\n##### Caveat: Edge and CSS Custom Properties\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-button-container-fill-color` mixin, you must pass in an actual color value for support in Edge.\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 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/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/button_3.0.0-alpha.0_1560312414061_0.4009113662037411","host":"s3://npm-registry-packages"}},"3.0.0-alpha.1":{"name":"@material/button","version":"3.0.0-alpha.1","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"a6c62b538763243baed5fc17b1e1f86a3bf29cf6","tarball":"https://registry.npmjs.org/@material/button/-/button-3.0.0-alpha.1.tgz","fileCount":10,"integrity":"sha512-Lmh5UPD1t/SzsXospWQlrM3JCgtj70SvohBFLjw/HrAuTxJCD4abisNOaYlFYhY8SX/aiaHmfflpXV8pUm/hKQ==","signatures":[{"sig":"MEYCIQC0PlnKvxeJ+HelgtTx1nbBOJzh8L+U/tdrmBvcjQXPngIhAPUr4+N7NstCb4aeE2KQ37VcvVrTaoN/JXxU1ehwJ1mR","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":158749,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdAUw1CRA9TVsSAnZWagAAIgoP/3WqTg8h0ywWyjWQnmSp\n9paOi0wFyti956icVyQvsJ4Lzmsce/PBGapnUT5wP7/X14hCKtajyh2zT1oR\nCJCbdrsZvm50gjYW/tyO4sti5lm4JQekuhfvMWGhFFq/L0mLXKCSBgwEonr2\ntZMSI6+iYvdcdQDhanop6QjMSNEamou/zoBjVtUP1H45HAbZ0C/8iHNzIqP7\ncD9CWaWx9K86rT3JRgr4y7wtJ5wjwe09Zbtuu74w6pno6zAUoj0Fk4fPJ+d2\nQmXa95Z/XIe9YvIt8jI9Oo3pg9mG0Duvf6y38cdR4fHZiQ/QW5SjZTzPvzC/\nA9L2ZlvYzjPAeyAKx+LZ9dxclz00lX9wLw+FqeQ8S4E2a8iz7CuFt7dZ4OsC\ntR436RIwl2W/UZmT3PXH8+9E/11k+KvQYf/Giqv5kLHDvH6ayOi5/PrSC9ib\n/4cjClZDEAnpChSKq0C7CJDIsq0w4Gtk6LhSV76cWqvYfiiCf5465WuN02Kt\nd6D/xTtnoSagq+WkAop2fv2lzRDtaGjB2yH33MKphUAYTC05kPQsZDoJbOQI\naUaVHbQCku3tlnag9mGHX8X8PoSUnODq027EwnPdJRIfPAJa0ztgC+7BOtQx\nxBCbveEB7zKAIBWgCvXcLfxm0T+gIawqHIaoAHc7VOqplzYuxsHzlw/+yexB\nPoHa\r\n=hDzG\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n\n\nButtons allow users to take actions, and make choices, with a single tap.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/button\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n```\n\n> _NOTE_: Examples here use the generic `\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n> _NOTE_: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button--dense` | Optional. Makes the button text and container slightly smaller.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n\n> \\*_NOTE_: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n> buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n> directly within the `mdc-button` element.\n> However, the `mdc-button__label` class may become mandatory for all cases in the future, so it is recommended to\n> always include it to be future-proof.\n\n### Sass Mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass Mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`mdc-button-filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass Mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`mdc-button-container-fill-color($color)` | Sets the container fill color to the given color.\n`mdc-button-icon-color($color)` | Sets the icon color to the given color.\n`mdc-button-ink-color($color)` | Sets the ink color to the given color, and sets the icon color to the given color unless `mdc-button-icon-color` is also used.\n`mdc-button-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to button with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`mdc-button-horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`mdc-button-outline-color($color)` | Sets the outline color to the given color.\n`mdc-button-outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `mdc-button-horizontal-padding` is also included with a custom value.\n\n##### Caveat: Edge and CSS Custom Properties\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-button-container-fill-color` mixin, you must pass in an actual color value for support in Edge.\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 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/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/button_3.0.0-alpha.1_1560366132922_0.0006114284040885654","host":"s3://npm-registry-packages"}},"3.0.0":{"name":"@material/button","version":"3.0.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"ec5bdcf8feca1e3ad9bdf0c75579861b4990ff84","tarball":"https://registry.npmjs.org/@material/button/-/button-3.0.0.tgz","fileCount":11,"integrity":"sha512-Kz15tShAyTgzPdIAHWXJSHkwiuyXVZkhiM7DCzKjiqerCpPs1Nzah5hj32NL1ZD9fadFoPtZcsbDXRRF7mZlzA==","signatures":[{"sig":"MEUCIE9zB5OFd9qMb9DmHxurV8+0T3XJtnEmXNHD+qcxvqsDAiEA+GistD02ywH7UhHqXtKfyR0vgoaAZHKF0xqp6vLro9Y=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":159151,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdEp/wCRA9TVsSAnZWagAAY+cP/022aBZ8Gh/X+OmE23+W\ng12RaIENKz7gKWAl6tjCFb9MH0/Gx/HPCNSjqhC+ZKYEY486qdhlpuuJkg4o\naO621PCrWbId76KU1jvUMb2tqxyCwn8zOUhH7GyIAmvhPU5xKF1BKhhtWOEq\ncayWGVeFyYEeQ8F1RG3zGAtGehaEr4qg7QOcmZS6VWYmujiXqVB6wXWB7gsp\nIp3gPVzgi2T4AzPDUGb15fwSRclZuA2nQ0uJf38lnTkf2X078EPBTyvryJYx\ntM4hqJ3ntMSJgfU15LK3FHF0k9UQVr/uzabG9/uDpCihKNAAyPFodB9QzkMc\nTl2BNxbVJ9pAcDkfLtfo4qj3kluUc0AyGKBfnOlwm3hlQKA5FByY1cnD3BuB\nku5h7kV5DJwKbnYoe+33rLvhxOf0Eh4nSFia9eNTLC8uYRVhCNMOkgDDd6cf\nI48GHexp3NZ0DI1F5yt3KEQHNYcEOBwOVpUsQAmQhgShvEp0cOZHsp/ItkHx\nw+Fr+BudynmucFfRSEBRx9BIjN7dz7jd15rGB4duZQFYfna3mIA6xOUWkP7U\nXkZ8IH6yjfpIhZteKDmrmV9N29IidYf1hnj6HoXTIApodrn+RN8jW1cxaJ0a\n+6YcwQtR2V8eWeJ2Rx9Da3TfAslQFxuJSkjBIai2Sdk+g9chVzJ1a/lNPE6e\nK29p\r\n=ya4W\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 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/elevation":"^3.0.0","@material/typography":"^3.0.0","@material/feature-targeting":"^3.0.0"},"_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/button_3.0.0_1561501680050_0.25314337681978993","host":"s3://npm-registry-packages"}},"3.1.0-alpha.0":{"name":"@material/button","version":"3.1.0-alpha.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"b183554abd23d5380d2d575f1d809a8fb3ee2353","tarball":"https://registry.npmjs.org/@material/button/-/button-3.1.0-alpha.0.tgz","fileCount":11,"integrity":"sha512-aTkk8mueBM52nAx5oOQ86ky2C3H/DkGSfC8vMW3PfwaSAotBOprOS9yTqIt6tK+tTj3MZTxz0DkKlScBQDb5Qg==","signatures":[{"sig":"MEYCIQDo4BlVWss3bLL+TV0TO3Q44NlnQQCJS5rzMZJxkcqSbQIhAPhgHeZP1viFIETSVBewhyZ4DZy/8arAunl+l4zNBCEi","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":157359,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdLdEnCRA9TVsSAnZWagAADaMP/2pQgYs88UtC7tARyliM\n/P+1n96YUC9b704Mu2+puABCDZRCobI+sVNiqyDco1g6mgKiRIqaei50bbC2\ng/a8+KCovCQNKBtNVJPNTWxrSoXlCQw5sj27VEMUfQ/8cY3mwIzDwe4gPr3o\nHMvM1eJuUnRfSAtf3wAMmLF2DXVMuzYD1HeL5eVyMHt4URF21MCMyesfbgxO\nfAOxJMU91Tcw+K9udZ3WbBjthtKpSRbg55FX0rxVtkYnr8u2/WQv83GMMxg/\n7pDaF6739FWvVp4ghCrD8M8RTDkIyypXDlEqYjhTZ1ytdoUXn67e5f0qWsjn\nfjWKVyeVqoX0GFDaXUvM4wfzX/WBz/NR4C4YzX3T2gt6zzoI82Ldfu3NpICO\nhD974hhIEE5WVJmDYlWYoineMEPuQWcyCTGpfHXuzxSSXvX2OQmhymBKdArn\nDVCW8cBHQQLS60G1Gthj0q1Ru7YhGY3oUCTDX9o4wt4QOdHG6j92o0Uq/PS5\n4dl1W3lyvJduZWq1COKPyggJ6PaK5sAb+iVWTSXpBOKEwkHiEb9DRFSfX1Bg\npriOXjwcZng6shnpoLZHQpFVOdYg5laEMqcddRSTIB3ccf67Vu+zxW85zEkE\nPL1N4xCGoRU8Y9H1ULain48G0c5cdqDGvQvu8Kac3jWySmGwcp9stH4Qh7h3\ncUUT\r\n=/PVy\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n\n\nButtons allow users to take actions, and make choices, with a single tap.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/button\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n```\n\n> _NOTE_: Examples here use the generic `\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n> _NOTE_: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button--dense` | Optional. Makes the button text and container slightly smaller.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n\n> \\*_NOTE_: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n> buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n> directly within the `mdc-button` element.\n> However, the `mdc-button__label` class may become mandatory for all cases in the future, so it is recommended to\n> always include it to be future-proof.\n\n### Sass Mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass Mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`mdc-button-filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass Mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`mdc-button-container-fill-color($color)` | Sets the container fill color to the given color.\n`mdc-button-icon-color($color)` | Sets the icon color to the given color.\n`mdc-button-ink-color($color)` | Sets the ink color to the given color, and sets the icon color to the given color unless `mdc-button-icon-color` is also used.\n`mdc-button-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to button with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`mdc-button-horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`mdc-button-outline-color($color)` | Sets the outline color to the given color.\n`mdc-button-outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `mdc-button-horizontal-padding` is also included with a custom value.\n\n##### Caveat: Edge and CSS Custom Properties\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-button-container-fill-color` mixin, you must pass in an actual color value for support in Edge.\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 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/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/button_3.1.0-alpha.0_1563283751304_0.8759175089648754","host":"s3://npm-registry-packages"}},"3.1.0":{"name":"@material/button","version":"3.1.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"bee60a7a5ec0a7c3dcb242dac48bbdaf16bac66b","tarball":"https://registry.npmjs.org/@material/button/-/button-3.1.0.tgz","fileCount":11,"integrity":"sha512-DBx3UYtvh8/Vn8/2oDrwrpkyGQrZCElcbkJy8CnZtftbb1P5qVKGvXqEeoND3d0AWTIwdKDYbX3X0zSXQUe3iA==","signatures":[{"sig":"MEQCIA9aVY4YEO6IzZ9khaBF3+V/wfbVkDx3HrfKBPTaUm+QAiBwPe01gD1TJWQTPuXgziIHDAj5LF7Sy21iO5YiNYnSSA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":157541,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdNjKECRA9TVsSAnZWagAAat8P/3accRj3cv52ALuFu2rf\nuxeURQ2P/4IpgdndDolx8ZyrXLAWvQCVG1VqCel2QqiiJ8KmgLhH0bpAbSTN\nd3AZCOPd3Bb7JQuw0XG0PmMzbjpdSZE7o/FNXcl/pukJtDQvdW4hZTU4/xss\neT0DlTN2QwJcrkvg+nkhFUZ/+ggAPWEEsSxBhSzknn0tUukq0XnpXo9OukiR\n2UWVl5A8AUaS2k511knwyTGSoLqGiCvH0K5FzMzYGvax0FR5Cm6ObNUCgbtz\nv1Vjlu5m/6KhOaq87CykU0X9f3WoosD+8/H0+wft5P++lUdItN3HRJmEG0bv\nDXxMLn0yQByYBClQWp/CnIK8xeZy5Bw4pvKkmz/YcPQBTWl8EJVP+zWn9RKK\nAVUbjMqnrZmw7tpnxOTy9o5uggUiwU7ikVv++tTOGdcj2xUj6XrQZ/VIfSG1\n1UUXkDewe/hKf+NVic02qZ7DZuejbAZtVfCjRcjl4YzWZXOINTxIu6tisCFD\nvuo9HoHW1Vffz03n8b7HWZZRUmU6/yoq6tIRbMLYVfcJwiXKESaWyfGoEJjF\nCxpme2OR4lXsGD+tlq6RWrJcL0bHR5BwgmaDTUGVgUea1Bv402jdOCoRfI4Y\ne65v+0EBBEE5F1fbLJQ92y/LFRFN8KQQECvhN3YzYaOF1AnhhRrtYHWTQER+\nQHaX\r\n=DlYV\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-button"},"_npmVersion":"lerna/3.14.1/node@v8.16.0+x64 (darwin)","description":"The Material Components for the web 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/elevation":"^3.1.0","@material/typography":"^3.1.0","@material/feature-targeting":"^3.1.0"},"_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/button_3.1.0_1563832963910_0.03051773915244782","host":"s3://npm-registry-packages"}},"4.0.0-alpha.0":{"name":"@material/button","version":"4.0.0-alpha.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"c5178b00bd447dd87e921dc6bf92deea71cffd6d","tarball":"https://registry.npmjs.org/@material/button/-/button-4.0.0-alpha.0.tgz","fileCount":11,"integrity":"sha512-rPmtZLFiIdCAD2ZiYjdXxrP98LtL6TYTKcZHG6ZRWPSulLfTwNo4IWp+ACfqfTTMkk8qFvfcdsxD2VDOkyGLgA==","signatures":[{"sig":"MEUCICsfNZq7kpj3jpWBy1Luub1kqTjXFjBxhiXlfRLaUW/XAiEAmkk0s/oiPP6Gb/S5ZurLRLKGe5p9lSDIuMd1LLiQXTg=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":177127,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdSz4QCRA9TVsSAnZWagAAkdsP/A/hN9iyiOzCNpMrpLP3\nyd5+VtHkRksj5AFljSprp5/TC5NaFjYcdPN8CSdsqJ6ROHDuVPOpK4phUBq5\n/KqXAmbHaVLhtj50wfUC4kxRrXsdrMefkieM315lgeFaiIYOALimJ5uMJUYS\nqyGX19sa4lILHoEAhPdOSVSCVkbKA8NH0X4+uqgJRJQoNxz9gqPwN9mAA6p7\nrpktAAzeWFBvt/SbY4HdiQ4Kq2aV+oLPW7/qAcJP9CowXWS/zD29zJe/fIfu\niU8o9mgqY/I3gLSGBWd15iXgWLC7vwE+2Q1qwtqHKp02Ox7PA2Qyl4e42M+q\nnDvHdcALQc5R6cIXPJah2WJVU0u7RMk10jac7W4ohT87coJ/HljvWDesMFjg\nq30p3FKWhbPWOVb06Lp9iGLkMWGsGPGBO8sGrAorhmkTPdgH8wY2WvmLPoKT\nXN7VLMRzjlrhiaJM4aY8IBcqgE9ZbHX/sSQmYAcFU+8wIpSt32tw5XQhVuM4\nLxHG44Wkwbjuvpymp33fDUgk3BmgixYMzsY4xrpyFz3E14nijROvvTN0z3z7\nuNNojt2qJNn+FuThe1JNEt1RT7EQTsvU7zPSAtxhNCkxetNNRi2dF4EbwcLP\nxrFRPqliGAb2Yd/RoTsmTif0fcwyLR5wZyVe74ZMHSPfrc5wwEKYyAJxl0qw\n/BqI\r\n=8ve1\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n\n\nButtons allow users to take actions, and make choices, with a single tap.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/button\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n```\n\n> _NOTE_: Examples here use the generic `\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n> _NOTE_: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Additional Information\n\n### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n\n \n\n```\n\nNote that the wrapper `` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button--dense` | Optional. Makes the button text and container slightly smaller.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n\n> \\*_NOTE_: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n> buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n> directly within the `mdc-button` element.\n> However, the `mdc-button__label` class may become mandatory for all cases in the future, so it is recommended to\n> always include it to be future-proof.\n\n### Sass Mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass Mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`mdc-button-filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass Mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`mdc-button-container-fill-color($color)` | Sets the container fill color to the given color.\n`mdc-button-icon-color($color)` | Sets the icon color to the given color.\n`mdc-button-ink-color($color)` | Sets the ink color to the given color, and sets the icon color to the given color unless `mdc-button-icon-color` is also used.\n`mdc-button-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to button with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`mdc-button-horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`mdc-button-outline-color($color)` | Sets the outline color to the given color.\n`mdc-button-outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `mdc-button-horizontal-padding` is also included with a custom value.\n\n##### Caveat: Edge and CSS Custom Properties\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-button-container-fill-color` mixin, you must pass in an actual color value for support in Edge.\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-button"},"_npmVersion":"lerna/3.14.1/node@v8.16.0+x64 (darwin)","description":"The Material Components for the web 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/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/button_4.0.0-alpha.0_1565212175317_0.4665488781713012","host":"s3://npm-registry-packages"}},"4.0.0-canary.0":{"name":"@material/button","version":"4.0.0-canary.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"21e325b6ba4de22b13380987939e7c7fbc4f2c4d","tarball":"https://registry.npmjs.org/@material/button/-/button-4.0.0-canary.0.tgz","fileCount":11,"integrity":"sha512-i5yvZmFuWcgLzrnEShr3MqPVPPbjUlzCmTYhgUkWaIaZB3F0uK6Wcekm80dfkg0RFnGgrlS5xK6eFspl9VH9Yw==","signatures":[{"sig":"MEUCIQCjLwC1J91GR+ov6nTu1imq9Je8nVC6IrdZltn8kCk12gIgVHyNumdr8wtWSDX7MQiDOfagJCBDeVJtgpAtYoScbB4=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":193401,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdcJEjCRA9TVsSAnZWagAAo4wP/RSQPVUwit/VbjtFCivA\nZpKiUWw6M4EfLrdriDw2g7BcjHQ7WajnUs1MSUWnYH4ePzzEGlscTfaxX634\nbXc3oEwmtUTw7Cg7IOrx/LiwnYbauVri36TdmjQukI8TcIqeWzHWJO179o6Y\n4+MEwHcQ03JWgwziWiF0cFJAX7yshM5qec+/cAHocnAmMxIb45ySMx1fkSa8\n3o0Jkx80RHT9wk//tWhz/L5RcTi22PcYl2ZOdV0bc/L52zsLDZj5bo+hgKtj\nR4MKygBS4rc25isIdMadoTyctDBiXdqHvs69DHtSnpnDARuZPxrlFTmkFDzu\nTrv8tnonFSsxQbCrr4656jiqwTxWzl2/NGV2TQQALSAaW6nbbkA/nn05HEnJ\ngsxl5PaaU+9AUJaAPM3GI4joenjb7CVamsZnHI4o+d5ZVY3TygykyF+AhkUg\nXGnlX+uGSgwiOG6er1ocvtdwj4W0VQGwkV240JWgQuKzooKvnixGyp9lVI+M\n1IgRh4sdLx6ZG12B9UUYH8EYOSbUFqSCISCd6BdZKrBeAXjxSOLutEZcd78J\nHNn8525u+6r960Anu64Zltyfp1CDOePw0dDlLSFDkl1sGF+GkXnogn14nGqT\netQRzvBG5U/5sP21KMB1nSZ5AKJtaVxYOLxCsxG/ZFRqs1oincLWK1sgS1HF\ndzo9\r\n=Dbqn\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n\n\nButtons allow users to take actions, and make choices, with a single tap.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/button\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n```\n\n> _NOTE_: Examples here use the generic `\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n> _NOTE_: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Additional Information\n\n### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n\n \n\n```\n\nNote that the wrapper `` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n\n> \\*_NOTE_: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n> buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n> directly within the `mdc-button` element.\n> However, the `mdc-button__label` class may become mandatory for all cases in the future, so it is recommended to\n> always include it to be future-proof.\n\n### Sass Mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass Mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`mdc-button-filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass Mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`mdc-button-container-fill-color($color)` | Sets the container fill color to the given color.\n`mdc-button-icon-color($color)` | Sets the icon color to the given color.\n`mdc-button-ink-color($color)` | Sets the ink color to the given color, and sets the icon color to the given color unless `mdc-button-icon-color` is also used.\n`mdc-button-density($density-scale)` | Sets density scale for button. Supported density scale values (`-3` or `compact`), `-2`, (`-1` or `comfortable`), (`0` or `default`).\n`mdc-button-height($height)` | Sets custom height of button.\n`mdc-button-shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$mdc-button-density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`mdc-button-horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`mdc-button-outline-color($color)` | Sets the outline color to the given color.\n`mdc-button-outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `mdc-button-horizontal-padding` is also included with a custom value.\n\n##### Caveat: Edge and CSS Custom Properties\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-button-container-fill-color` mixin, you must pass in an actual color value for support in Edge.\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-button"},"_npmVersion":"lerna/3.14.1/node@v8.16.0+x64 (darwin)","description":"The Material Components for the web 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/density":"^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/button_4.0.0-canary.0_1567658274440_0.6678084620109725","host":"s3://npm-registry-packages"}},"4.0.0-canary.1":{"name":"@material/button","version":"4.0.0-canary.1","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"bfab0daa4e761a8cde8ea742108ee73d5a429aa4","tarball":"https://registry.npmjs.org/@material/button/-/button-4.0.0-canary.1.tgz","fileCount":11,"integrity":"sha512-Hq6INoVSkyn+qcrte4wwy65bGSw9UZ1dQ1C2XTqN5o8yssCinLPLHy3Sq5RqvA7ZtDf7HuUcNg/45P1gdZijNA==","signatures":[{"sig":"MEUCIQCZFGrD3kULQiwSvUEnoXBnnJk6M/2gnZj+YFyyE63S4AIgYbrm50hsyg+oWQtWOfRJIEWo9RoNQ+aAgX4S2OaNRQA=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":197585,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJddrQfCRA9TVsSAnZWagAAhpYP/RP/h06kkV+oV9Su85Sg\nO33/CH+YN4SsI3ugMnKEjEPzUqxo2z6Dj5IomiVgCuCkXc7v47vQntjU3XTr\nLLhYtwHMBnJgWOBLbXjXH9XDSubGl6X/hFa/qalmldtqepSN4zpiaA6Ecz9c\nz7MtsnGdJS2Kp88KL6GwI5GvlMoFLWY/iS5NKA/yAyz3g9tvHj0+U2TdUHkg\nXFeCAthgiSjcaJUkTbjfaAnqoZqqUe93VYuQDo5loYV8Zs/238X4iU+pwhBf\nEscMDPZHXbTivYZaECAilFYfo+qiZP6SuCAlEZhOBHcpHvw1FL6oNoCOjCGE\nJ1VIsjAiUaCCzAAL5HES0dL309Cvz/EHUEOvJSRogIJf8280BhSQ3ELe4jua\nsi9WpLpP2vGXBBo/Br1FT0AiATn59e7lqpRMsqAnQviRKFMJ/P6G8O3FLTuJ\n3x3nfV9R9ZgmiKa/W4DpyZmUH4A6osSn/vUSfxGN/WzXmIrkc0Y+RTQ52+vB\nofWfP2YMRCRqDbBEjX1dAFSauk2roD4UYl5pm6Jt2ejWgl4ZqHGIh1PI0FDp\nd+KPoS2Z6kJcjdRccY1FNuwVAWuKAqzfGSXblGltTXEHBdv0W5yedVPwxIjl\nPYhQANfdkOBqx2m0+rn7eT9YgHH8l9hYOg9x10DONFAXhmQgVLMonWlx/mvY\niEqG\r\n=O4AW\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n\n\nButtons allow users to take actions, and make choices, with a single tap.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/button\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n```\n\n> _NOTE_: Examples here use the generic `\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n> _NOTE_: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Additional Information\n\n### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n\n \n\n```\n\nNote that the wrapper `` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n\n> \\*_NOTE_: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n> buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n> directly within the `mdc-button` element.\n> However, the `mdc-button__label` class may become mandatory for all cases in the future, so it is recommended to\n> always include it to be future-proof.\n\n### Sass Mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass Mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`mdc-button-filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass Mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`mdc-button-container-fill-color($color)` | Sets the container fill color to the given color.\n`mdc-button-icon-color($color)` | Sets the icon color to the given color.\n`mdc-button-ink-color($color)` | Sets the ink color to the given color, and sets the icon color to the given color unless `mdc-button-icon-color` is also used.\n`mdc-button-density($density-scale)` | Sets density scale for button. Supported density scale values (`-3` or `compact`), `-2`, (`-1` or `comfortable`), (`0` or `default`).\n`mdc-button-height($height)` | Sets custom height of button.\n`mdc-button-shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$mdc-button-density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`mdc-button-horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`mdc-button-outline-color($color)` | Sets the outline color to the given color.\n`mdc-button-outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `mdc-button-horizontal-padding` is also included with a custom value.\n\n##### Caveat: Edge and CSS Custom Properties\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-button-container-fill-color` mixin, you must pass in an actual color value for support in Edge.\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-button"},"_npmVersion":"lerna/3.14.1/node@v8.16.0+x64 (darwin)","description":"The Material Components for the web 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/density":"^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/button_4.0.0-canary.1_1568060446820_0.3766546821385548","host":"s3://npm-registry-packages"}},"3.2.0":{"name":"@material/button","version":"3.2.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"859d9ce164d6ee5925ac0fb04af57ea7d9295c6e","tarball":"https://registry.npmjs.org/@material/button/-/button-3.2.0.tgz","fileCount":11,"integrity":"sha512-VEASy3Dtc7BCo8/cuUIp6w0+/l4U1myGZffK5GeFVInP/erStSQOmYXT7jGXkZpUglRzWOpVvEpc6nsvhMqGbw==","signatures":[{"sig":"MEUCIEB5fpw97yygr/SVHlGCxI9wD46BZwpgN5onER+ueJWWAiEAzFFXXDW/gfB10bqglsVA4KkrPGXLJcQAxNTmSq4Y88E=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":174937,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJder5eCRA9TVsSAnZWagAA2n4P/3p5uIpGK9fwi33h/Zy0\nia0e190hACQCgTRY934u8kea/8VsU1v38CHGBvzLHnNdhMwOVC4oxdmIPMe+\nqqFYjOfWp7JQVGcm0FGKJzeKjmd2ONLBRVUKGSiuaBJWCzVZXj8gsUTbBYIq\nLNmiOH04fmNpD4uI/24INdhRfE01cE0FBzqC+4H5z3P90USuUuUSBZim5DHf\nJ6gF/fbPY2UkqOO8mG+CPp4nAgpOkmj7BrMVrrKCskZOlsmzfkLlBGM/Vn6L\nwPHaTlh/gQkqmIqMbkzPmLUfA8pcsL6ZI5RvohjetGyq8IrXppIhZTrw/gkq\n1xMOo0HzGZRwQyL8tiCP5lhOlvnnMQWucjW1UDPgKAk/12u039SJ7WIO6ZmR\nNzvW9XiKwIiUa2IUqCl5AwIUk9XDXQ/nVsxnpZfELRHKSKu9axopBFhePZxk\nWupm3LU4lhJ/dMt8ihGacCkHUQyDDDc172Ekd079kd33n0o/Mynzgel0yXjw\nDAnnXz54R+b3anmaxAtVnP21Ck9tVoTlfqJDS0uzMPQRs+evMqV8B2VEXKYI\nvDU7mqmgKgTDr2OxEB54G+1YGjHjQ8EicxLrKTG6KFbN8XvxH9XHVE06Cxow\nn+lXIJ9D79lFer45hMUjC+sSuBHcEwh3LyHmKfn7lJR3/cjmfEg7IEl9v8iu\nhSX0\r\n=nxXO\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-button"},"_npmVersion":"lerna/3.14.1/node@v8.16.0+x64 (darwin)","description":"The Material Components for the web 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/elevation":"^3.1.0","@material/typography":"^3.1.0","@material/feature-targeting":"^3.1.0"},"_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/button_3.2.0_1568325213604_0.15215768144487685","host":"s3://npm-registry-packages"}},"4.0.0-canary.79d881baf.0":{"name":"@material/button","version":"4.0.0-canary.79d881baf.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"45bae9d56e4d740f5e4d2bf55e3496eef8d814e0","tarball":"https://registry.npmjs.org/@material/button/-/button-4.0.0-canary.79d881baf.0.tgz","fileCount":11,"integrity":"sha512-z35Zco1/5d/koAptOCapvsTDqqH5eHdUM8VsyHVEHgs45wJeKvTCvyKEIwDS7JF4GQZNnBlH1iqKIdgdHRhV6A==","signatures":[{"sig":"MEUCIGU0dFoj4DhCYKOzp6YzhEQhm2+D2TgH4MW0DetWdXuJAiEAhjbA647JbBQ4IC0hjMvWkqT5Lr/Ko+Uv7C0tS11WBs0=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":210017,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdev0xCRA9TVsSAnZWagAAoZ8P/1BJ1LW87YSYdrZYJkUC\n+O5RaQXHcAWcAmfMdfbpSInGr3agwtfbXEY8GgpJF2Ml8Ea3dkTZU6AC1nsy\n7EG5Ih+p3eB1/RO15874AskpTpFF9NlPlqO331RX3cTU3kYEJjhblLnW9Bl7\nEG2jm5nQAoyBNs3Chg9KBidNBPkCqVToQIPYOegaBSlE3EENEqufO3byKsPa\n9S+MHIq7aUzWB+nWi+R7YmSt2hwMZ9UY7vFq1YgxMhwzPSXEdHdb9b1RKnTl\nxefmq92atpaGcLY9OXFTutt11BWntularZEHRAbHkkFuO0+HnyzN8WT3Def2\nAWnGuljlk0BNAL5hy7QCcN7gkl4p3tfuDfllU7xFifw6J84qPjmaC9sSDIJF\nB3h80NCxvmbOIWfDowZoNeqmJDuMFQHA0kB6cJxVqumLokMZy/xawC+hnISO\nerxzZs9BEMCSEpxsias90SYeSxeQfiyE89tsJTuMbShU3rZti8yOwDxUavpi\n+F+JYY85hrlziXEZEhVjVbeP7FEH65pfT0VYidg0o+aU9r7/xLvjW1d7I6sv\nozfOHQy3U6BcAARIL2Hcs2GQLZIoWDf/aSoSE+3fj4AWQvTZXAYKgvh+TDFu\n5OXqM+HBVGwGquYUcK6OuU/Sg9NjOnWogqojHYtPG6RYoOuKVFr7HHX1OeaM\nBFN9\r\n=Ua/G\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n\n\nButtons allow users to take actions, and make choices, with a single tap.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/button\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n```\n\n> _NOTE_: Examples here use the generic `\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n> _NOTE_: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Additional Information\n\n### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n\n \n\n```\n\nNote that the wrapper `` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n\n> \\*_NOTE_: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n> buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n> directly within the `mdc-button` element.\n> However, the `mdc-button__label` class may become mandatory for all cases in the future, so it is recommended to\n> always include it to be future-proof.\n\n### Sass Mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass Mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`mdc-button-filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass Mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`mdc-button-container-fill-color($color)` | Sets the container fill color to the given color.\n`mdc-button-icon-color($color)` | Sets the icon color to the given color.\n`mdc-button-ink-color($color)` | Sets the ink color to the given color, and sets the icon color to the given color unless `mdc-button-icon-color` is also used.\n`mdc-button-density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`mdc-button-height($height)` | Sets custom height of button.\n`mdc-button-shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$mdc-button-density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`mdc-button-horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`mdc-button-outline-color($color)` | Sets the outline color to the given color.\n`mdc-button-outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `mdc-button-horizontal-padding` is also included with a custom value.\n\n##### Caveat: Edge and CSS Custom Properties\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-button-container-fill-color` mixin, you must pass in an actual color value for support in Edge.\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-button"},"_npmVersion":"lerna/3.14.1/node@v12.10.0+x64 (darwin)","description":"The Material Components for the web 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/density":"^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/button_4.0.0-canary.79d881baf.0_1568341296486_0.026385106172745365","host":"s3://npm-registry-packages"}},"4.0.0-canary.e851d4f40.0":{"name":"@material/button","version":"4.0.0-canary.e851d4f40.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"d21b037b573b7c2d5260496b2364281fbe65db9f","tarball":"https://registry.npmjs.org/@material/button/-/button-4.0.0-canary.e851d4f40.0.tgz","fileCount":11,"integrity":"sha512-bdVVviEqZ1RUBAulyfij72hD7ct3TulKr8JE3Yr8IaZefCc0ijqdqkktoNOA2bX7MikT3CdauEP8DCG8WwYUig==","signatures":[{"sig":"MEUCIQDsu8sSZEcnosuKOKzxXyTsptw3ODEeS7iFT+Vm/hwi1AIgLzZbA9L1Mj5v4O8KwUKBVBGM/dJ3AECsyo1a9vo/r2Q=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":226865,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdexX8CRA9TVsSAnZWagAAXaUQAIdBfCP7FdfFUxIiTRe8\nx0uT5qKEPSn6EpvCrShlRynI5uU0VWzkC2U6WdN2tP3tZHrUe/Vf0cyCzndU\nXuRhATk58Gn2fTpP6NJ1Ya+0oIQQGMJyq1h98kojCjb+Z+1BP3aSb+8rsdgD\nc516N8gOi+iQl2ALocHssWKggcErH8fiEKnhvb8bDjX5RdyFhlt0UG+UPsZj\n7/O3hjZQvL4WGAFMsHKrxRv9NzNlKuq1knlK+AwB9qKX1/LGbr+nw3bMpI6b\nJPVKvHQFMV5IiEIFiMSZWvbEH9RcCUvALu/LC+qk9DN2C4g+OUSm9wRbYeKa\nBgLLwJDB5SDl/M2rYxgpCBWTnRlQ+I6U2WUjsTndqkacN4261xS9UiekMeqx\n6JQrQlPPYAJ3dkITE4lPdt4yszL8PJvloE1vRLDR2OPo7ucI+/ALRh7mdy8a\nnHSmsy4LEE+qSAR6A9dG0Soz5AdoU3BaH7Mb8iiftQdF5njqvKC0GdOMNSYz\nZ2KVaS3BWuUSq8ciZ/IkEeZSJlb8l0fdz/SwreEwlF5FS4zZ2+nm2HhRnyDu\nvNjBxLQFoftZEnDePqo1xbNWCczUb6CHlrDSG5vObk6b2vZzRZES1f/5VTUp\n//bb5hM/sr6iJLy2wkNkqtsXw8OTJWYR6yacwNFOmUlkz7w3EfAwa1ukq+5y\njIQ1\r\n=92KS\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n\n\nButtons allow users to take actions, and make choices, with a single tap.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/button\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n```\n\n> _NOTE_: Examples here use the generic `\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n> _NOTE_: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Additional Information\n\n### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n\n \n\n```\n\nNote that the wrapper `` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n\n> \\*_NOTE_: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n> buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n> directly within the `mdc-button` element.\n> However, the `mdc-button__label` class may become mandatory for all cases in the future, so it is recommended to\n> always include it to be future-proof.\n\n### Sass Mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass Mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`mdc-button-filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass Mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`mdc-button-container-fill-color($color)` | Sets the container fill color to the given color.\n`mdc-button-icon-color($color)` | Sets the icon color to the given color.\n`mdc-button-ink-color($color)` | Sets the ink color to the given color, and sets the icon color to the given color unless `mdc-button-icon-color` is also used.\n`mdc-button-density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`mdc-button-height($height)` | Sets custom height of button.\n`mdc-button-shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$mdc-button-density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`mdc-button-horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`mdc-button-outline-color($color)` | Sets the outline color to the given color.\n`mdc-button-outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `mdc-button-horizontal-padding` is also included with a custom value.\n\n##### Caveat: Edge and CSS Custom Properties\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-button-container-fill-color` mixin, you must pass in an actual color value for support in Edge.\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-button"},"_npmVersion":"lerna/3.14.1/node@v12.10.0+x64 (darwin)","description":"The Material Components for the web 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/density":"^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/button_4.0.0-canary.e851d4f40.0_1568347643597_0.7746270726425248","host":"s3://npm-registry-packages"}},"4.0.0-canary.905884690.0":{"name":"@material/button","version":"4.0.0-canary.905884690.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"57de8cde30969dfc830f84a46b3053bd25bbf1f2","tarball":"https://registry.npmjs.org/@material/button/-/button-4.0.0-canary.905884690.0.tgz","fileCount":11,"integrity":"sha512-pDmlyorv6x6cVad6CrImW/i62q2Gf2qm8ZoLwxHyU7PVomoQSbaMOxt8YWQziA1qcFlXnRJa+45iQqHnDx90QQ==","signatures":[{"sig":"MEYCIQDYwQp13acIzsaFTnqYG4pbWJwPjsk8iTCqVl/2WM7NQQIhAKpI7XgaO1iMdczvaFsu3inJUR9QJHmfCVM5QpDnRrq4","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":229275,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdgB88CRA9TVsSAnZWagAA8CUP/1+kejf04i6kOLFGjuAm\nyw8OBVTQY8wm7XFTFXCP5sD4vXQNokcSyYbcRumjG6HE/FJ61Alj2exGHwry\nJ08xcI71Hnypw90M8gb1y1aIjB2SCB6jJQfAxrG4+b7FS6nYrN4tGdC4WkJY\nv7P2AldIaftJQaovlwT81QthcpPtDkblPRoLWhDpQ4uwiIXrS/dEwjUjMwMV\nwBnqgA5C1k8vqYTVimNYODFlC3AyuvOPvzdR/KJnuZlV4TiKMiQ4mjLv+7Dz\nb8y7V7URPvZ8lqTAT71CtT1WP+3hCKzP9k/ZaKhFbEM/gV8/dxqg6MGjnUk8\navyM0yHecJXGUi8zbrFeCmrCC02MKf90PtkIP5lLekGSRrvAvRgcJ/PcdE2D\nqZXA8g0yr+nKt+XxvzbCS9qzMemG72Xm6fq7Kg6/AiHCXZkEQwRVAvghf7Q0\nUTlrkc0nf92iZHjiLkTPbzdouKeJ0hjNv7gm5uGRTTXwADFJXXKK8A2/WPbE\ncITEJQVSjgpJBtXAcGJP7ic1XnwuNzrC9WaDV/gxp+dD7vwCQAPwxoiZHdzD\nATQf8zqkxmtqZIoiaidAmsJ//EWJKZghcDth/ZKbAUm7GA7GpcuZNtOk7TRV\nq7BzzTYUlj0VjXW78nOwWcCWjcp+PZ3u9qrik3wwvwrRlE6nILPC4mTLwkj2\nx6Co\r\n=esJB\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n\n\nButtons allow users to take actions, and make choices, with a single tap.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/button\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n```\n\n> _NOTE_: Examples here use the generic `\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n> _NOTE_: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Additional Information\n\n### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n\n \n\n```\n\nNote that the wrapper `` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n\n> \\*_NOTE_: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n> buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n> directly within the `mdc-button` element.\n> However, the `mdc-button__label` class may become mandatory for all cases in the future, so it is recommended to\n> always include it to be future-proof.\n\n### Sass Mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass Mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`mdc-button-filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass Mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`mdc-button-container-fill-color($color)` | Sets the container fill color to the given color.\n`mdc-button-icon-color($color)` | Sets the icon color to the given color.\n`mdc-button-ink-color($color)` | Sets the ink color to the given color, and sets the icon color to the given color unless `mdc-button-icon-color` is also used.\n`mdc-button-density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`mdc-button-height($height)` | Sets custom height of button.\n`mdc-button-shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$mdc-button-density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`mdc-button-horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`mdc-button-outline-color($color)` | Sets the outline color to the given color.\n`mdc-button-outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `mdc-button-horizontal-padding` is also included with a custom value.\n\n##### Caveat: Edge and CSS Custom Properties\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-button-container-fill-color` mixin, you must pass in an actual color value for support in Edge.\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-button"},"_npmVersion":"lerna/3.14.1/node@v10.16.3+x64 (darwin)","description":"The Material Components for the web 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/density":"^4.0.0-canary.905884690.0","@material/elevation":"^4.0.0-canary.905884690.0","@material/typography":"^4.0.0-canary.905884690.0","@material/touch-target":"^4.0.0-canary.905884690.0","@material/feature-targeting":"^4.0.0-canary.905884690.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/button_4.0.0-canary.905884690.0_1568677692392_0.31344302101779253","host":"s3://npm-registry-packages"}},"4.0.0-canary.199534d61.0":{"name":"@material/button","version":"4.0.0-canary.199534d61.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"fe413e022236a90c4c2ea07a5e4b3e8959461daa","tarball":"https://registry.npmjs.org/@material/button/-/button-4.0.0-canary.199534d61.0.tgz","fileCount":11,"integrity":"sha512-quSWvKgxkBKtSwz3eogiBh6BvmWFGlgkp0LE211zS17XjQ7OcOKwJApvlBJd/WNK0OI9JUR7LrbxUHyx/VG9aw==","signatures":[{"sig":"MEQCIAhEEXnlYTyC5qRoTE/+sDLLIspPAEyLTcmh90BZBGLDAiAMverlpk4QFftrkpnj+X2f9uOlS2ySjntFoiO0QeUrHA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":234670,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdjlu1CRA9TVsSAnZWagAAwpUP/2b9HWS2abZ0KmhMaAqU\ngaMInujBOYpIqkJ+ClADxLIWw2m6raMh5S+lu+/OtxKFdWmcxyrqPbscKoLh\nKHSbuni0Z0L4XK/U/XyFy4Q+j0BDIuhbZLrxgX2X0YoF/QmC6uITjg+wHqm2\nw7IaoVoPNpbcL55fcCbE13TnLjg2Zib5NZaIZ4cNH8oWrhF19ZVXDPTWWR1g\njcTjYW34iPYN76qH/eQLGpjMrzZrQ9Ok8h8S18kzUvT2liy1yswAbE0EfUx9\nnhZ780EOb3W0L/ktJz2C/6n/wiy0SUJyRv9CIuVZLLikZmJGUqvaDaj3eaeJ\nxdj8+LhD+gaDscjcS3qry0iTpbDV/f6rjEbTZqSTDVozo6G5GsZ+atgFsFqc\nY2ufbUOfOBUeQckDv5GGIpMBfv+TJ8+UXZd7V9i09q7+mBxrL5nzndwumtUn\nZxkYw2GFQE0CKptnxy0V6xEihA3sufb83wlT4cd+8SfeWXgRVWSyIU8XHNQD\nnlSX6cWtYMD8/4v3t026waXMLs0sCG+PHnvmo/s7ZVSIPkSMXO/1Dbcw2iF9\nlCnzcLFNJmDV2sSjoQ+efl0Wf/awlEu7p/TtyTddw/XGpE1Gd7+jpneRATJt\n17dS9OxOXx5rdYLNXITSTWAOWLeCJ0VIcPb3TdwVPoa4VrQ8XDAkbAi2dG3q\n8N0n\r\n=hmtW\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n\n\nButtons allow users to take actions, and make choices, with a single tap.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/button\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n```\n\n> _NOTE_: Examples here use the generic `\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n> _NOTE_: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Additional Information\n\n### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n\n \n\n```\n\nNote that the wrapper `` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n\n> \\*_NOTE_: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n> buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n> directly within the `mdc-button` element.\n> However, the `mdc-button__label` class may become mandatory for all cases in the future, so it is recommended to\n> always include it to be future-proof.\n\n### Sass Mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass Mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`mdc-button-filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass Mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`mdc-button-container-fill-color($color)` | Sets the container fill color to the given color.\n`mdc-button-icon-color($color)` | Sets the icon color to the given color.\n`mdc-button-ink-color($color)` | Sets the ink color to the given color, and sets the icon color to the given color unless `mdc-button-icon-color` is also used.\n`mdc-button-density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`mdc-button-height($height)` | Sets custom height of button.\n`mdc-button-shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$mdc-button-density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`mdc-button-horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`mdc-button-outline-color($color)` | Sets the outline color to the given color.\n`mdc-button-outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `mdc-button-horizontal-padding` is also included with a custom value.\n\n##### Caveat: Edge and CSS Custom Properties\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-button-container-fill-color` mixin, you must pass in an actual color value for support in Edge.\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-button"},"_npmVersion":"lerna/3.14.1/node@v10.16.3+x64 (darwin)","description":"The Material Components for the web 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/density":"^4.0.0-canary.199534d61.0","@material/elevation":"^4.0.0-canary.199534d61.0","@material/typography":"^4.0.0-canary.199534d61.0","@material/touch-target":"^4.0.0-canary.199534d61.0","@material/feature-targeting":"^4.0.0-canary.199534d61.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/button_4.0.0-canary.199534d61.0_1569610677146_0.31588315822743707","host":"s3://npm-registry-packages"}},"4.0.0-canary.22d7ad2fb.0":{"name":"@material/button","version":"4.0.0-canary.22d7ad2fb.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"818ebabed7c03a84b3c307218b46b2915ef7cef0","tarball":"https://registry.npmjs.org/@material/button/-/button-4.0.0-canary.22d7ad2fb.0.tgz","fileCount":11,"integrity":"sha512-IxkfnXXzxWpgWDx/PZIePjo99U+7mqtOrWmO/mGOYtHE0m39fNZKb4QEGEvp4hSdPYkMG8IsWTBMdRBWUgkjeg==","signatures":[{"sig":"MEQCIG59CZ0+Ae40cpLXc23+ws28qVe2O3L+qnFAujYebPIEAiBAP1wASPxoojlCXm38FA6dnGtW9y8Hkl8Qt0F2JGH1fg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":237574,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdphaOCRA9TVsSAnZWagAA8TsQAJuwB4iAifS1ax3t5ezb\ncpRhD67mIHld2XnjIbTM2AnmVF5dDhNrpO2i0QEmQ81VJiAxEr6DVtoWwzfz\nS3zFUlz5t+d5Ab2ml4iXQ8rf8hjprJzawEXD06oSQrt4G6VWFtFqJ+Ub+jdM\nnZ5RUV4iKes1GNhdKKI9zUTAm3esBTjkwUaFewMm0wU9FZs/ykGXDokvnEBQ\nTMIj+sadPxxxiQcleVd3TNrJQfA4BeC4QcZXkXvbiNIepErR6ASwCOWNwPb7\n2cLID6kn1FKjWfx6pdcjYTTVc11Les++xtbt1OuN17Mc5SQFavTAeIQNB+56\n/qzaL6jDV5JBqKCA5xVAU8UR8dP3azHnsaozcWs2jmI+UvnvnpiGp27nKmG1\nWRA6SmU/gG46y12UccxoO5hAZ6IUia+vEAR35taLp86aa4+ayvVgrM/eWM+g\na7/EisuOa8dDVqNj+MbSukRAAH8hqfE7Bb/OvYmeYS3pg9VNtItx6xnoS0Z/\nOKyvgdADGxlF77dAyYX7SADal7PobtNgoZKnraNRkG1uP+TF4w0TJk0O1Qet\na4jBvrGTBSWxtZYKxaj3Fy3Fjzs8uavbvcp4dlpuK8tGl+JzJjewP78bkbfx\n5mkJCqbZPkAhE7CRKpJedTHrqHIRCr/+TSK8xfsOAQVtKaFXPQIIJC6qO1Lq\nrCcv\r\n=jtAd\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n\n\nButtons allow users to take actions, and make choices, with a single tap.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/button\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n```\n\n> _NOTE_: Examples here use the generic `\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n> _NOTE_: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Additional Information\n\n### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n\n \n\n```\n\nNote that the wrapper `` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n\n> \\*_NOTE_: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n> buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n> directly within the `mdc-button` element.\n> However, the `mdc-button__label` class may become mandatory for all cases in the future, so it is recommended to\n> always include it to be future-proof.\n\n### Sass Mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass Mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`mdc-button-filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass Mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`mdc-button-container-fill-color($color)` | Sets the container fill color to the given color.\n`mdc-button-icon-color($color)` | Sets the icon color to the given color.\n`mdc-button-ink-color($color)` | Sets the ink color to the given color, and sets the icon color to the given color unless `mdc-button-icon-color` is also used.\n`mdc-button-density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`mdc-button-height($height)` | Sets custom height of button.\n`mdc-button-shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$mdc-button-density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`mdc-button-horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`mdc-button-outline-color($color)` | Sets the outline color to the given color.\n`mdc-button-outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `mdc-button-horizontal-padding` is also included with a custom value.\n\n##### Caveat: Edge and CSS Custom Properties\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-button-container-fill-color` mixin, you must pass in an actual color value for support in Edge.\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-button"},"_npmVersion":"lerna/3.14.1/node@v10.16.3+x64 (darwin)","description":"The Material Components for the web 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/density":"^4.0.0-canary.22d7ad2fb.0","@material/elevation":"^4.0.0-canary.22d7ad2fb.0","@material/typography":"^4.0.0-canary.22d7ad2fb.0","@material/touch-target":"^4.0.0-canary.22d7ad2fb.0","@material/feature-targeting":"^4.0.0-canary.22d7ad2fb.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/button_4.0.0-canary.22d7ad2fb.0_1571165837445_0.5967279779494039","host":"s3://npm-registry-packages"}},"4.0.0-canary.735147131.0":{"name":"@material/button","version":"4.0.0-canary.735147131.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"4fcf1ad32fad132b8e2e7edea4a570bc0b8eae61","tarball":"https://registry.npmjs.org/@material/button/-/button-4.0.0-canary.735147131.0.tgz","fileCount":11,"integrity":"sha512-u/xbKFoZr7WOGT397f+xqvbmXDsGQvU4/l6PU2IAs21F6XZtpqfHMPC9dZo0I6IH0+tB14Od0zmD4jrO/REmhw==","signatures":[{"sig":"MEYCIQCgx+Fv84CoFCTaBKIRkmQh4Dz+AmiTuu6r1pjIzHgHDgIhAK93uic5X4fotlYKzz7t/dHGM4jgPlVlFd6swIiFYcZ+","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":246814,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdpnEcCRA9TVsSAnZWagAAGYsP/0SOiMvHBt1dKZKAuBhH\nRjytLGWfVxVWg1Fd6bLle9cV0xERYFm1SPAmxynugae0QFw1gjvCMn6SmvJ4\ngYCQ2U9S4NDs612uCuOCv2U8QdwtUvwHGDVuioJt1V1SeTp3D/X1rsLhGWPR\nf5HTAWotlvKzdJcGPqN0tbPxeR+Fw9Px5z8oiJwTxabw6VX06PjeDlVzRoX1\ntym2fbYnOcA85wNbKYi00Oq41yXday1mK4EaiihGQT1iIKRhvI7sgojgxFEC\nBq3TyRYj33aqU9ob0f4KdrHalg7oyIcQyBP2XWY23qGONstDP+3RsK56Bdsr\nfxQbrpT96bizh01MHITQ42lyzd9moXIujPA26GZegIFzUHKwG/Z8+uKSbKAJ\nkxTwOJzpVHTNNWLwCNKPB7LE+YqncLimpskitSCKWWEv+m8mP0lh7rNnAdV5\n7x+czw6idc8LKDiaJXcYOoUtXa4NnBdouXuhe1JFj7rIeb2kk37j7xS9lmkG\nybMnt7X08Ndfz/gcInigUiM22y7Xjb8HsPP6OoTXxKTBdQvvg8KkFYBoGkSt\ngsXYVEd4vPK94NzA9KzvoF4UNUdmZ6KBmFAXiwKktGJ1dW6Opu0ZC4p/0Ojk\nwH1HrZ1X68vhWoNBp41nn1EbLkQpi7fMJ95CldalWdNF1tBN+WymSZ18UPST\nzhiF\r\n=ys6s\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n\n\nButtons allow users to take actions, and make choices, with a single tap.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/button\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n```\n\n> _NOTE_: Examples here use the generic `\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n> _NOTE_: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Additional Information\n\n### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n\n> \\*_NOTE_: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n> buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n> directly within the `mdc-button` element.\n> However, the `mdc-button__label` class may become mandatory for all cases in the future, so it is recommended to\n> always include it to be future-proof.\n\n### Sass Mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass Mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`mdc-button-filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass Mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`mdc-button-container-fill-color($color)` | Sets the container fill color to the given color.\n`mdc-button-icon-color($color)` | Sets the icon color to the given color.\n`mdc-button-ink-color($color)` | Sets the ink color to the given color, and sets the icon color to the given color unless `mdc-button-icon-color` is also used.\n`mdc-button-density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`mdc-button-height($height)` | Sets custom height of button.\n`mdc-button-shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$mdc-button-density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`mdc-button-horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`mdc-button-outline-color($color)` | Sets the outline color to the given color.\n`mdc-button-outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `mdc-button-horizontal-padding` is also included with a custom value.\n\n##### Caveat: Edge and CSS Custom Properties\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-button-container-fill-color` mixin, you must pass in an actual color value for support in Edge.\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-button"},"_npmVersion":"lerna/3.14.1/node@v10.16.3+x64 (darwin)","description":"The Material Components for the web 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/density":"4.0.0-canary.735147131.0","@material/elevation":"4.0.0-canary.735147131.0","@material/typography":"4.0.0-canary.735147131.0","@material/touch-target":"4.0.0-canary.735147131.0","@material/feature-targeting":"4.0.0-canary.735147131.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/button_4.0.0-canary.735147131.0_1571189019409_0.6122901033753259","host":"s3://npm-registry-packages"}},"4.0.0-canary.062ade5c0.0":{"name":"@material/button","version":"4.0.0-canary.062ade5c0.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"e2dbddd254513ee7ec3352be46039f027f01e0aa","tarball":"https://registry.npmjs.org/@material/button/-/button-4.0.0-canary.062ade5c0.0.tgz","fileCount":11,"integrity":"sha512-zxzGlOsFSv9jJnwUz3DipprpZAwphNXE/y/c+F/IlnjKcIaFyA7wSw9xoZ2dda+vNTb4xbcFiaAzPi7dGXkmLA==","signatures":[{"sig":"MEYCIQCy/31L2v2X3NzwB4dT49CqE8bo+vYHc7b8WjU4hZToDAIhAO7FMRq3n8uz6tZNfbBxB0KQlGf+NJWpMMBs4KdUgK5P","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":249853,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdp71zCRA9TVsSAnZWagAAC88P/37wruxpMEtDu33CUjJv\nR5gVZS/TNNaUwknCFtoiGjHTeh8Q8q6T6MxWG7Eq7TlS2PXZGPBQEkA369ZG\nb7GhC9tnBSlT9Yvtue8LPD27mnne9UYTiTYz9/NKh9LTy5E4NJhLAJRnfySl\n8T3GBqp5eGPvhM7JglQ5AVLhK9HMHq1ZuTxFYG5Sxwe1op8UHXhOvs+Px5DJ\nktdA3xXrFx8R7QEPVQezx9VgVspOdQH+MJiUmNZ5Kd7u53u1TOce0N3tjIrh\nbZmfr8NkMMI6SNEmoBNjM8GxavqX4lu5Rp0aKFfpCcmCal+7eTAw/5AlHOD7\nAne/K5IZVPXNvH7QfExhP0r1EBaq/A+uksbhWHHFWIB+6KcNm6X9Rn48ebiI\n+P75XLSLhbTEek8E+VrycrYfC3ynWcKbXZ6/YYH5Zu++X3rL/IVpay54mDT/\nZeSJTHWYBuamOINhwOlpvcv6kxYhyFM4032O1Pl3+KSNCSlAl5b+NUtzaI3Z\nMFwxJnCKrGjqnj/C20eMogqRQhvBRezU6P08rhKFtAPetjETHfaz0QoBwJRM\nZ5zdq7YzDGl0oLB7UZieJOxOgx5G9K5vtdHhDJXrpRDuErcTrtd8ypzzIxla\nTOOys+A+0QEBOIOyt3/DBfpauH8EA/VaBf1jM8LrrTYAFVfQ6CJVP6ZcfkLM\nW77K\r\n=1BPY\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n\n\nButtons allow users to take actions, and make choices, with a single tap.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/button\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n```\n\n> _NOTE_: Examples here use the generic `\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n> _NOTE_: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Additional Information\n\n### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n\n> \\*_NOTE_: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n> buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n> directly within the `mdc-button` element.\n> However, the `mdc-button__label` class may become mandatory for all cases in the future, so it is recommended to\n> always include it to be future-proof.\n\n### Sass Mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass Mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`mdc-button-filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass Mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`mdc-button-container-fill-color($color)` | Sets the container fill color to the given color.\n`mdc-button-icon-color($color)` | Sets the icon color to the given color.\n`mdc-button-ink-color($color)` | Sets the ink color to the given color, and sets the icon color to the given color unless `mdc-button-icon-color` is also used.\n`mdc-button-density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`mdc-button-height($height)` | Sets custom height of button.\n`mdc-button-shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$mdc-button-density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`mdc-button-horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`mdc-button-outline-color($color)` | Sets the outline color to the given color.\n`mdc-button-outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `mdc-button-horizontal-padding` is also included with a custom value.\n\n##### Caveat: Edge and CSS Custom Properties\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-button-container-fill-color` mixin, you must pass in an actual color value for support in Edge.\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-button"},"_npmVersion":"lerna/3.14.1/node@v10.16.3+x64 (darwin)","description":"The Material Components for the web 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/density":"4.0.0-canary.062ade5c0.0","@material/elevation":"4.0.0-canary.062ade5c0.0","@material/typography":"4.0.0-canary.062ade5c0.0","@material/touch-target":"4.0.0-canary.062ade5c0.0","@material/feature-targeting":"4.0.0-canary.062ade5c0.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/button_4.0.0-canary.062ade5c0.0_1571274099003_0.611406336728259","host":"s3://npm-registry-packages"}},"4.0.0-canary.774ad4f8.0":{"name":"@material/button","version":"4.0.0-canary.774ad4f8.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"05d738b770ed36f5330f1a806bfb5e809b165e8b","tarball":"https://registry.npmjs.org/@material/button/-/button-4.0.0-canary.774ad4f8.0.tgz","fileCount":11,"integrity":"sha512-KWNVtobgjXYEcKJFESWU+kefAj5DG7oa9mwvkyxrBDbx/1RF5GMA3+z90wwww75bIg8U4EvpHM7/3wzOtU8ESw==","signatures":[{"sig":"MEUCIFF9n+ZgLRJZG0YijWXF4+v4SN/N/wYmVyWT0XK+tohPAiEA9saei5HAJ3AP2cQSggeaBepAe38vzGpeAvhWD6Ibd5Y=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":188355,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdp+hZCRA9TVsSAnZWagAA+iAP/1HqOW86MzQcXmeRqSlM\nwF5yerFpMXyimmUIF6A9Ef/m48l8cd9N5UHVo90bw7+Q+ar0z+PbD9lpjPWZ\nIWOZPnIRxXcC3i+ewlDtj01GnSV7WEbWkI1hTEKFdAK73Gm0j/ajHgzobL4i\nz8G6yPflMLWn2t2SiWu4z9I6BYvCdA11xc5ZiL5SIgR0ayi2rPR7zrxKwxqo\n3f4fsuqsXDqG3WJJdymi4iPQCSKYeoqtHJAmjUFJXNr+6sJ2KHASfdGkcMDe\neoR2HwCHoho1wBJ401mWzHi9grIF5Co7GciT0fQUvP87cDtRtvCSOAWMDCYA\nwX+JARseenICvDIfA5n3c/v+jAmt4DbXrMcsCEZ5H1BkqBNjYzqd3S3IkVU5\ni2UZGvP6yh8BBD9vc44MAZTw0FeRZiERiKnu5nIdYu1TSrxAyIfKgJ0t236y\nL2VxRm1fMLPqqBZGVZZwXqJek7T5YLfoOEjSJYPfu8WMRZ+UZMY9/WYHkm/m\npeAQ1Pyz794VRTmJmw9gk9qMw6QZX7S5uKrXgbJLa/esSNZiqtT1ywcXqAD4\nKDlBOdAi5lOc1nFh8PKWjsNUerY1KrdGx9r4ioGSesu4N9wxT0MiHQpvRypz\nLwLbsp6rarBQkZStyu2+KZ/mSqLprLU4DNp8nPAkjyeW6+UiSHaezcDeJFio\nV46z\r\n=e5dQ\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n\n\nButtons allow users to take actions, and make choices, with a single tap.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/button\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n```\n\n> _NOTE_: Examples here use the generic `\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n> _NOTE_: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Additional Information\n\n### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n\n> \\*_NOTE_: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n> buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n> directly within the `mdc-button` element.\n> However, the `mdc-button__label` class may become mandatory for all cases in the future, so it is recommended to\n> always include it to be future-proof.\n\n### Sass Mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass Mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`mdc-button-filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass Mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`mdc-button-container-fill-color($color)` | Sets the container fill color to the given color.\n`mdc-button-icon-color($color)` | Sets the icon color to the given color.\n`mdc-button-ink-color($color)` | Sets the ink color to the given color, and sets the icon color to the given color unless `mdc-button-icon-color` is also used.\n`mdc-button-density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`mdc-button-height($height)` | Sets custom height of button.\n`mdc-button-shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$mdc-button-density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`mdc-button-horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`mdc-button-outline-color($color)` | Sets the outline color to the given color.\n`mdc-button-outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `mdc-button-horizontal-padding` is also included with a custom value.\n\n##### Caveat: Edge and CSS Custom Properties\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-button-container-fill-color` mixin, you must pass in an actual color value for support in Edge.\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-button"},"_npmVersion":"lerna/3.14.1/node@v10.16.3+x64 (linux)","description":"The Material Components for the web 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/density":"4.0.0-canary.774ad4f8.0","@material/elevation":"4.0.0-canary.774ad4f8.0","@material/typography":"4.0.0-canary.774ad4f8.0","@material/touch-target":"4.0.0-canary.774ad4f8.0","@material/feature-targeting":"4.0.0-canary.774ad4f8.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/button_4.0.0-canary.774ad4f8.0_1571285081028_0.8469232368200272","host":"s3://npm-registry-packages"}},"4.0.0-canary.5916d18c.0":{"name":"@material/button","version":"4.0.0-canary.5916d18c.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"e8b1c85bc88dcd24f993a320ca7abcd9812c20e7","tarball":"https://registry.npmjs.org/@material/button/-/button-4.0.0-canary.5916d18c.0.tgz","fileCount":11,"integrity":"sha512-18fL+/ddZgRtlYwsaAGRITgGbR+U7adl9LJ3sjH2bLu/M6C+qePQTwZZLQgNgOWW3InXaZNBRhkwVJcAf/iS1Q==","signatures":[{"sig":"MEUCIQD2MOkVTDMrlxLZNtqu1mYvzVi633k1cv4eGCYRm8wIDgIgczt+syvSlK9MWi1RElJb9GiKeFgSrovGKaTR6vc7rDw=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":188445,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdqhvPCRA9TVsSAnZWagAAJbsQAIKAIr477h+dLniWwk8H\nHgf+rkOEv15I98Cpx72s3oSdOWdEVW5R992OUB2RGfVy9/Sy3rlp8DO+M8SM\ngOKVzuJnTT/sw2NzVA+hNwF0jXnlNyDxLuwfwIuidrnHLwDxc0Orpujc9bQC\n1Qbc3kqQyblhtkyaGi5HtMiS0jWo3W8u1qMsOMoMN9gGTbPMHifmBW1f0c7E\nBo/1SIXbhAhcci/PYhzbNsSTE4JZSLj1oMMNUYxoxTYEN1lxVDoukPw0gIFm\nSDxi1VdXQGpCSOD6fCyKqs5nPnI7KkbRbLEorDpWy1FDbXciz37WxD0eryr5\nqQUH0FrzFlatp+bVJEbOxxc9NT+U5UJnEfagOAFy9s3st7FFxdUuv9HHXsvm\nHWPDNqtl/9ke6z+uHW+4Y0BQDVPVvGyPIlKS42hiz8RlvOhztI8vqqB9E91K\nI/YZvMURpPOeJlURy4kzz2BUO2s8OXAs5tH4AwYj5WURpWbHcRZIBPF5QpEO\ngCAdmNhCeFyZKzcCxSxoNl0gS1f2Cwyr/TqZ6Bsq5ADuYdGit5091fljt2OW\noDJce7lIv2KmGMEUXlgQj0LTDnn/s/YJY1oOymNeKNgvOZnQ5xYBfZv9lRIL\nbse+XcT8XllIQCttyOt78zikaal+yYJQcDcECWAxYstHX47Qpf6F3OQGkEIL\nhl+S\r\n=Mdd7\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n\n\nButtons allow users to take actions, and make choices, with a single tap.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/button\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n```\n\n> _NOTE_: Examples here use the generic `\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n> _NOTE_: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Additional Information\n\n### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n\n> \\*_NOTE_: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n> buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n> directly within the `mdc-button` element.\n> However, the `mdc-button__label` class may become mandatory for all cases in the future, so it is recommended to\n> always include it to be future-proof.\n\n### Sass Mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass Mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`mdc-button-filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass Mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`mdc-button-container-fill-color($color)` | Sets the container fill color to the given color.\n`mdc-button-icon-color($color)` | Sets the icon color to the given color.\n`mdc-button-ink-color($color)` | Sets the ink color to the given color, and sets the icon color to the given color unless `mdc-button-icon-color` is also used.\n`mdc-button-density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`mdc-button-height($height)` | Sets custom height of button.\n`mdc-button-shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$mdc-button-density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`mdc-button-horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`mdc-button-outline-color($color)` | Sets the outline color to the given color.\n`mdc-button-outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `mdc-button-horizontal-padding` is also included with a custom value.\n\n##### Caveat: Edge and CSS Custom Properties\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-button-container-fill-color` mixin, you must pass in an actual color value for support in Edge.\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-button"},"_npmVersion":"lerna/3.14.1/node@v10.16.3+x64 (linux)","description":"The Material Components for the web 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/density":"4.0.0-canary.5916d18c.0","@material/elevation":"4.0.0-canary.5916d18c.0","@material/typography":"4.0.0-canary.5916d18c.0","@material/touch-target":"4.0.0-canary.5916d18c.0","@material/feature-targeting":"4.0.0-canary.5916d18c.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/button_4.0.0-canary.5916d18c.0_1571429326419_0.6140161568911484","host":"s3://npm-registry-packages"}},"4.0.0-canary.d4141c95.0":{"name":"@material/button","version":"4.0.0-canary.d4141c95.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"6add0a2c51ef15953be760107710836f8bc24efa","tarball":"https://registry.npmjs.org/@material/button/-/button-4.0.0-canary.d4141c95.0.tgz","fileCount":11,"integrity":"sha512-Ok4+hB3+SjuYQZiZ1p9UQxTmPuqeN61TukklCZqhY3iHXMKLBeHSVTN4U/qeWqZKtChjY3pV+oUXNUpPpymrqg==","signatures":[{"sig":"MEUCICAw/jtpZUPeQvkTmujW9s89ibZKpe6jhLlsGADzh1noAiEApnQRDNv3ZlR2TnsykoIXbqey/EmF2glKrvBTWT7hwY0=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":188444,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdsQCPCRA9TVsSAnZWagAAU1IP/1BAFlaFv+gA5M2cai4E\n6RMnn9XFRXU58VtrZzTYR7WwgIEoYmJ7gPk2ro4kHM0mSQZgNEJHEqWQsUXY\n9QcgGROS8My08MY7yvibMalSN6bro2V6N4cHlOhOOudUxy0UFkoeLcRP/2lw\nLTHFmq835wKllgiJu9xdM2+c7icci75KDItWGBsy5ELyLD2sjZRjl4Rtkhtd\nkbq8nPsaxQIF+0s9eOEQI/Ld3ykkd2G0UBIn6mQs5kfcYMkowtE1k6yR6Kfh\nyiOamGyS7JNfU2Pv1/V9+5yqvR7+jOZO1yyxHx13qfToIKvdBvxb5FW1maPk\namhDLi71Civ5Tq8dnMvvN3FEw9+/jUojffXTjuTpIL8l9Wb/OvAQR1gAxuQq\nlInB5fJj+FF0jn9LMSZAcx0Qi72cbYd+3G+redieBaC29pTa2PSIFUN05nKi\nK5R9sQZDhC2CwyK13+h5Edbl5BI0/wsQtbPLgFRyzRgN8qExA7OSMe+qWCtG\nQssC1NQ7PYnNBCL9BbRqA0yrzSp8xMLRcGqp6XaXCV+qpMMub45cLQ8c8bwM\nQozrHlFKHRn2jQlB0q4WrqRtynQszD3jVs2EjMI61EKKJfiSdkjL2ueNptq3\nfX628tjOIVzT/9f3yJTkgsFUhaU20efMhh10XBurQyY///dFgB9/isGeRz8h\n/3Xi\r\n=pPZ+\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n\n\nButtons allow users to take actions, and make choices, with a single tap.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/button\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n```\n\n> _NOTE_: Examples here use the generic `\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n> _NOTE_: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Additional Information\n\n### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n\n> \\*_NOTE_: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n> buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n> directly within the `mdc-button` element.\n> However, the `mdc-button__label` class may become mandatory for all cases in the future, so it is recommended to\n> always include it to be future-proof.\n\n### Sass Mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass Mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`mdc-button-filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass Mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`mdc-button-container-fill-color($color)` | Sets the container fill color to the given color.\n`mdc-button-icon-color($color)` | Sets the icon color to the given color.\n`mdc-button-ink-color($color)` | Sets the ink color to the given color, and sets the icon color to the given color unless `mdc-button-icon-color` is also used.\n`mdc-button-density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`mdc-button-height($height)` | Sets custom height of button.\n`mdc-button-shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$mdc-button-density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`mdc-button-horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`mdc-button-outline-color($color)` | Sets the outline color to the given color.\n`mdc-button-outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `mdc-button-horizontal-padding` is also included with a custom value.\n\n##### Caveat: Edge and CSS Custom Properties\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-button-container-fill-color` mixin, you must pass in an actual color value for support in Edge.\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-button"},"_npmVersion":"lerna/3.14.1/node@v10.17.0+x64 (linux)","description":"The Material Components for the web 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/density":"4.0.0-canary.d4141c95.0","@material/elevation":"4.0.0-canary.d4141c95.0","@material/typography":"4.0.0-canary.d4141c95.0","@material/touch-target":"4.0.0-canary.d4141c95.0","@material/feature-targeting":"4.0.0-canary.d4141c95.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/button_4.0.0-canary.d4141c95.0_1571881102951_0.08247155018891328","host":"s3://npm-registry-packages"}},"4.0.0-canary.2b878b3e.0":{"name":"@material/button","version":"4.0.0-canary.2b878b3e.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"a2e1205920156960ba3570a281ecda2c8b2daea3","tarball":"https://registry.npmjs.org/@material/button/-/button-4.0.0-canary.2b878b3e.0.tgz","fileCount":11,"integrity":"sha512-g17t50ihuMgzaFbxjlYpWy1FvYL7/PMOJOswA82iC+AVLwGBkdgjm9EQS9olI1YkWg3pQMo2f5X08bZOa6hrBQ==","signatures":[{"sig":"MEUCIQCiUBwlJIMJKpC9k6HskJJHNnA1j4tMNcvLFNVhi6dY1QIgbNcWeNYfc5iPsRLf2K+rx3es8kVbXE9DqrZ5UPyAVUs=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":188554,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdslmrCRA9TVsSAnZWagAAyCsP/1lrvSH2Sy5dXIGDEUjS\nvNRCw82wcre+gw9pVgOnaoeny/0ZOCVug9GUIET4ghmAKCoj2CXl9DjsePjK\nGH5kDJgkqrjb7FwTauxflt4HPxpGjUu3QzmjVObVpb2rkqDssJSOyOSDnkoY\nJ/HNDCDfdvNf4Vzh9MN/FQr5T3DHv6UhHl81vE8RYyvseZfMWzEDy9Xr1Wid\nPETrukf0psg/0CyHSSt2MS02LVrKJDgwuUTC7sf8aZD2XHQbB0zJvp6DWd2/\nkdYXlNSoAUlLMmdAfOcMHKiHaYfwzAK0de5fcY7W9YPy0DNW5sbBV/lFQcl4\nO8ci8jL19Yc+ZUGEzuVZTOgyov8EAhWQdsnJmmlxIZP6MsEqufufLLs7HbMC\nwNTxozmy+BI2VfEAiLSrZ929hh+pgMS0H9RKwh0katnewYNh/sE3OK7WADv+\nKr40lQCaKIJrH2MzyZI6A9N6pw6R4yFP9bvRDtn2niTZ7gxy8y/HECMv0NnS\n35D/GCX736OVeUy16QBFl8pNmW83bdQR/sOXXElUVcbIxbrjgMQ8mcu8z9hF\n75LJAA97CW9tPR8f/FDya/kw7vzjDCw+e5TxuO+nhmpyGIBwVJg1edWtAATH\nHTZTURhq1GF+PY2KfM0vApUXhwOASdO1Y+K0j6Sojccw/8q/NRS/UwvAxgwm\n39XX\r\n=1sX0\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n\n\nButtons allow users to take actions, and make choices, with a single tap.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/button\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n```\n\n> _NOTE_: Examples here use the generic `\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n> _NOTE_: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Additional Information\n\n### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n\n> \\*_NOTE_: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n> buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n> directly within the `mdc-button` element.\n> However, the `mdc-button__label` class may become mandatory for all cases in the future, so it is recommended to\n> always include it to be future-proof.\n\n### Sass Mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass Mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`mdc-button-filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass Mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`mdc-button-container-fill-color($color)` | Sets the container fill color to the given color.\n`mdc-button-icon-color($color)` | Sets the icon color to the given color.\n`mdc-button-ink-color($color)` | Sets the ink color to the given color, and sets the icon color to the given color unless `mdc-button-icon-color` is also used.\n`mdc-button-density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`mdc-button-height($height)` | Sets custom height of button.\n`mdc-button-shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$mdc-button-density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`mdc-button-horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`mdc-button-outline-color($color)` | Sets the outline color to the given color.\n`mdc-button-outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `mdc-button-horizontal-padding` is also included with a custom value.\n\n##### Caveat: Edge and CSS Custom Properties\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-button-container-fill-color` mixin, you must pass in an actual color value for support in Edge.\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-button"},"_npmVersion":"lerna/3.14.1/node@v10.17.0+x64 (linux)","description":"The Material Components for the web 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/density":"4.0.0-canary.2b878b3e.0","@material/elevation":"4.0.0-canary.2b878b3e.0","@material/typography":"4.0.0-canary.2b878b3e.0","@material/touch-target":"4.0.0-canary.2b878b3e.0","@material/feature-targeting":"4.0.0-canary.2b878b3e.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/button_4.0.0-canary.2b878b3e.0_1571969450983_0.5288511369726772","host":"s3://npm-registry-packages"}},"4.0.0-canary.b06c0efe.0":{"name":"@material/button","version":"4.0.0-canary.b06c0efe.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"64ccdd8d928f1508db24c026367b919c50eb748d","tarball":"https://registry.npmjs.org/@material/button/-/button-4.0.0-canary.b06c0efe.0.tgz","fileCount":11,"integrity":"sha512-3LyBFuFGdLf0pdHfYv1UgYsq7nSkULGwVAilcshDCzoSAtlqG1iATlYiQ2jQttj+1hN5npy7suqxhGkJiFzqRA==","signatures":[{"sig":"MEUCIG4IsqYuE70/6S+AgQMqKy8uKD6Igt+w813jElrDPgl4AiEAuRdWdSOpAX0Efu7YNxQPS4C/mYO034ah1+ACkdbzEn0=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":188258,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJds6LVCRA9TVsSAnZWagAAMaYP/3DHQlVKyTYczYCqOB2D\n1w0FQlUA3SV8DhrpEJ/hmVYRXWjkme+CDNXM2gWT7fCr1vvfC2ceHteBsAey\nrgEBCwfPwxby+2Bky/6DaI93eJtXnTOky5tGbyWV+ct0f1vgOLfUDJZCQNEI\n143WtA80LoVrkvv78kG5bRHz8xz6UiHRhon4/wHBegBg5G0LlpaqUW55KdeZ\nsMF3c5r8QeJoHAbgU+TSpGojqX7vgU6/qHZW+dcgNJKA0OMDlBjyHzAxNt8G\nUjLuk3TJOPqlP6gtANDnTxRN6tiWtnrcNZPAee3HfzEBCCwnv5eCkaeNsgS8\nnwy0ADqW8R9H1Z6jDMSGMSvcXjhaFuyMuGNfFVDPtRnR0rriBBFITVFQtwmo\n+3KXlCgXT2Asjt7GKJmGoQgdxTX4YmOdTqKtnG0JlKUx7rW67uqyyTaSCE/o\n765cR2ihdzFHoNEygeFHdO+/sC3XIwCtigJk5V9i8g8B0NLMLHE66I5+CkUv\n8KA9FyFSkWB+g3BRB/+7tYXscstXk2W5fQh1n7Hn2p1nZoVIMY0gvnkZax73\nyBWzLqVDRd/cQgNKD3utPSU6rISmr2F1NhHFzn6LbrXC1y9GwyYR3RlHKawd\n+RwHrEcp99Juwv74ONw6HddtPqIGafb/t3t8woex4VPmLnniX+faQXXyHeSY\ndqAr\r\n=hdMz\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n\n\nButtons allow users to take actions, and make choices, with a single tap.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/button\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n```\n\n> _NOTE_: Examples here use the generic `\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n> _NOTE_: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Additional Information\n\n### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n\n> \\*_NOTE_: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n> buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n> directly within the `mdc-button` element.\n> However, the `mdc-button__label` class may become mandatory for all cases in the future, so it is recommended to\n> always include it to be future-proof.\n\n### Sass Mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass Mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`mdc-button-filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass Mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`mdc-button-container-fill-color($color)` | Sets the container fill color to the given color.\n`mdc-button-icon-color($color)` | Sets the icon color to the given color.\n`mdc-button-ink-color($color)` | Sets the ink color to the given color, and sets the icon color to the given color unless `mdc-button-icon-color` is also used.\n`mdc-button-density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`mdc-button-height($height)` | Sets custom height of button.\n`mdc-button-shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$mdc-button-density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`mdc-button-horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`mdc-button-outline-color($color)` | Sets the outline color to the given color.\n`mdc-button-outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `mdc-button-horizontal-padding` is also included with a custom value.\n\n##### Caveat: Edge and CSS Custom Properties\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-button-container-fill-color` mixin, you must pass in an actual color value for support in Edge.\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-button"},"_npmVersion":"lerna/3.14.1/node@v10.17.0+x64 (linux)","description":"The Material Components for the web 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/density":"4.0.0-canary.b06c0efe.0","@material/elevation":"4.0.0-canary.b06c0efe.0","@material/typography":"4.0.0-canary.b06c0efe.0","@material/touch-target":"4.0.0-canary.b06c0efe.0","@material/feature-targeting":"4.0.0-canary.b06c0efe.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/button_4.0.0-canary.b06c0efe.0_1572053717016_0.046674988352579216","host":"s3://npm-registry-packages"}},"4.0.0-canary.01628efa.0":{"name":"@material/button","version":"4.0.0-canary.01628efa.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"c52e3a61f5509e11210d10719f173e97da8d0dce","tarball":"https://registry.npmjs.org/@material/button/-/button-4.0.0-canary.01628efa.0.tgz","fileCount":11,"integrity":"sha512-mUTocVhldOqYlT7pO7iPdG2GsI4W9bxgvbRyz/tRek1Vm5eX1IzABTsoh/c6XVEWiXU6OeYwoInY0bjLLRlwsw==","signatures":[{"sig":"MEYCIQCj60mPDhHCB+/hbQU3VRfKg/Qz8+ezjRsWDLwqeIwjsQIhANOS0VHN87iuyRNDVeMUD9lzIxpxUTMUi6TCGRSWMFYQ","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":188551,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdt4HACRA9TVsSAnZWagAAtaEP/RQ1Uebphv1FcEFjNSoy\np+DAWzuAmwLOK37528dGQjUL27NgXEYcyH0JV480qYonOqTXz9WS6/RRNWiH\nUH+SeE08q9+OtJLhWvD/CSlV7Rh5RXWwBdKqfiqT8G6KLB/hLWuPhJA+C7VU\nwdBIv2y28ltqCIQjdyBVQMTAYU3EMt9X7s3/0+fuucHn46b6A0bPMAJQbNLL\nKGPKP/3lMRSWFsNEH/6DhcC2gfm2WV4A/hHgRNWFE5arcnkVtZ6WRr0CEH8F\naAve03Nyy+1qDuIFHKPn0Dq7xcsqSzJIXwMVbp8BqrRZNi3427aWi+YIJX78\nNNIo8bk5Qv/nuV6bfGtho+h7qNEnvQKC231woRVN2EserHc1FnWGNR2PUyu5\nF353mj2P9L5nNNnmcbTCSdgo2zjCbQSLcw5H2ZxqPKjuP8Ptw9R9mVifWAkI\nB0dMNN+SVGQtZ95Bh7ru1XsXkUbN75DiSSdWjT0ysG2rwFkvUjV0BZwYJUYF\n/blcnYs/EVUBTZefi/B97AjIziKqZlakh2jg+g/V6ZmYDGRDTdWClL6MT1XL\nNut+QTaZuDgQV2aaEAikF0DX75UmwiwY9/RJNydQom/b0h4en7Na0HXVBmG0\ncisS4b7QBD+5/v3EByW/po5En7T0WGX27YlFTfvT1Rf0MR3HQudhlXEHnd9L\nGF2v\r\n=Rrzh\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n\n\nButtons allow users to take actions, and make choices, with a single tap.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/button\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n```\n\n> _NOTE_: Examples here use the generic `\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n> _NOTE_: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Additional Information\n\n### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n\n> \\*_NOTE_: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n> buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n> directly within the `mdc-button` element.\n> However, the `mdc-button__label` class may become mandatory for all cases in the future, so it is recommended to\n> always include it to be future-proof.\n\n### Sass Mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass Mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`mdc-button-filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass Mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`mdc-button-container-fill-color($color)` | Sets the container fill color to the given color.\n`mdc-button-icon-color($color)` | Sets the icon color to the given color.\n`mdc-button-ink-color($color)` | Sets the ink color to the given color, and sets the icon color to the given color unless `mdc-button-icon-color` is also used.\n`mdc-button-density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`mdc-button-height($height)` | Sets custom height of button.\n`mdc-button-shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$mdc-button-density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`mdc-button-horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`mdc-button-outline-color($color)` | Sets the outline color to the given color.\n`mdc-button-outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `mdc-button-horizontal-padding` is also included with a custom value.\n\n##### Caveat: Edge and CSS Custom Properties\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-button-container-fill-color` mixin, you must pass in an actual color value for support in Edge.\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-button"},"_npmVersion":"lerna/3.14.1/node@v10.17.0+x64 (linux)","description":"The Material Components for the web 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/density":"4.0.0-canary.01628efa.0","@material/elevation":"4.0.0-canary.01628efa.0","@material/typography":"4.0.0-canary.01628efa.0","@material/touch-target":"4.0.0-canary.01628efa.0","@material/feature-targeting":"4.0.0-canary.01628efa.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/button_4.0.0-canary.01628efa.0_1572307392156_0.6845183629523384","host":"s3://npm-registry-packages"}},"4.0.0-canary.b5c6d66b.0":{"name":"@material/button","version":"4.0.0-canary.b5c6d66b.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"8d430121204695f984ff0b8dcba2061aa7c615ff","tarball":"https://registry.npmjs.org/@material/button/-/button-4.0.0-canary.b5c6d66b.0.tgz","fileCount":11,"integrity":"sha512-1F9df/Wa89APXxY196wdNsIc2K+N52xOpWGHyfZrPmtfD4Sf1K/aVc14YzE1Yjqpsi7iZq6ZYlCQoqwKdh59KQ==","signatures":[{"sig":"MEUCIQC5Th1RB4O/4aqAWpPBI9Mua8cehkYonMicJqpWEoEnggIgM0ZfGU7FJXtoLsTf8YW3BN2XjdwqBKamvF1AJ+lAElc=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":188438,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJduH1tCRA9TVsSAnZWagAAjwIP/2FxwO3XixPG+pBLBy3M\nlEpI3eJHDtMnzAUCYbWLK2eC4KJrjmkT49+ZNFMLnlkm0uNrf2ofB8vudeKv\nN+VgP7Js3YvAZ+S10UCLS3/bpyQN/OeEMuo1SzjubrlyAd2Dl6EA0zh7diak\nzfAJE8GRE+3xMnf/LiRule0B6PSx6PXXF2OnNqo/WOxedre+rTZxIrshL7dj\nlgZimyURBs/Dq+TlpR54QKp0Ti5ZpopvSoQJZ0P2NP6hPntKjCy+DEuCk45N\nTd3mRXu6Q0jLbpfqDAh0nbvuz/GIr31kpqCr2bQe8SWaEgMlHqnmzI7HajDX\nu+zGMhQYmHAsULc9WkUg7+3NCzmCwq018ui9OSNJFg0sl8R3ZXFPiA4xcXLz\n/kOj6zj08dwoUzYAlMYZ2u6RbOY3CDdkJmjLs9ao+DDvnmIC0B8sldq0gv7O\n/muJixP5ZIzBe2DVhE4zE131EPzh75bOo9UnIzX5oPFrX9C5h63mLMo+Cbqy\n2UkyAV4uOkg11EpE43Q+B3YyFKc/zTAAi2FV4nYstkT6cMbTdRiuPUM+9+g/\nJ+j+VdZZYCnfTmvgz34gEWH4hPXVGC3gUuJnMq5dJZFSS3qb2ECJOvFX3lnM\nk59C8zBcQRZnaOvZjuuAMQIbYZkmlotAvTwXALh2xvv1xwgRTtx03d4jOocV\nBQzh\r\n=blTy\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n\n\nButtons allow users to take actions, and make choices, with a single tap.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/button\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n```\n\n> _NOTE_: Examples here use the generic `\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n> _NOTE_: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Additional Information\n\n### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n\n> \\*_NOTE_: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n> buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n> directly within the `mdc-button` element.\n> However, the `mdc-button__label` class may become mandatory for all cases in the future, so it is recommended to\n> always include it to be future-proof.\n\n### Sass Mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass Mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`mdc-button-filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass Mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`mdc-button-container-fill-color($color)` | Sets the container fill color to the given color.\n`mdc-button-icon-color($color)` | Sets the icon color to the given color.\n`mdc-button-ink-color($color)` | Sets the ink color to the given color, and sets the icon color to the given color unless `mdc-button-icon-color` is also used.\n`mdc-button-density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`mdc-button-height($height)` | Sets custom height of button.\n`mdc-button-shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$mdc-button-density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`mdc-button-horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`mdc-button-outline-color($color)` | Sets the outline color to the given color.\n`mdc-button-outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `mdc-button-horizontal-padding` is also included with a custom value.\n\n##### Caveat: Edge and CSS Custom Properties\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-button-container-fill-color` mixin, you must pass in an actual color value for support in Edge.\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-button"},"_npmVersion":"lerna/3.14.1/node@v10.17.0+x64 (linux)","description":"The Material Components for the web 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/density":"4.0.0-canary.b5c6d66b.0","@material/elevation":"4.0.0-canary.b5c6d66b.0","@material/typography":"4.0.0-canary.b5c6d66b.0","@material/touch-target":"4.0.0-canary.b5c6d66b.0","@material/feature-targeting":"4.0.0-canary.b5c6d66b.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/button_4.0.0-canary.b5c6d66b.0_1572371820567_0.746522035287096","host":"s3://npm-registry-packages"}},"4.0.0-canary.cdf858ea.0":{"name":"@material/button","version":"4.0.0-canary.cdf858ea.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"774f30091a19f7825695f10881f141e6ae73875e","tarball":"https://registry.npmjs.org/@material/button/-/button-4.0.0-canary.cdf858ea.0.tgz","fileCount":11,"integrity":"sha512-Xd3Q8lN1qBsKF2+ucTwxIlIeqKlvW0mMExFZmXpoePr1ZE3aTGjJfFb/6lWLm76MuOxCHrUGdyMcKg2Z/bfM8Q==","signatures":[{"sig":"MEYCIQDd8iY49YlPkff/ijMcjogMww5hv9tTsbt0WPiQ8wtfBwIhAJJECxord1QIqYnpcX6FLBFtEig4vhVrpTGak0y/yYEg","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":188258,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdvHJmCRA9TVsSAnZWagAAdAMP/3LCg1XQqhl/dOIneJdH\nGWWN5h8yTvozIhEGm8fGrSWsSnULsIytbePFez/Xtv4iw1aF3FtdIu2lbG7s\n6SB4bJjd0Z5Ij3mxxP5XUfusCLG2ggUV7i/Xcwfb6VT//Fy30bijakKfNJrW\noHwpoy2A7kdUbN/y7FkkMkrzhhrHG4bytYDCCVFPaEuNxTygGvnoAdhwHq1Z\nDsOokfXzI0ongfaNlTbd8ALe27IF7daK+kCRWfkUrw1svzRXRc7nm9aaY3nn\n1cQoHXj0IpIcQ4Pb47oIMLh8BUCj0xAHB5GJc+TAIIuMBIutRAAOY+sLQetK\noEIHRF/qynrAgrUYIaarRbGv7lGDZqhkWdzDTgJDfO0p9GVBvmC7EtPfAsoG\ncVKmMXjT3kiuSx3BZWMCJATHtlknqBkN2SydQQn8GTTdHeW02scIswiBYhrn\nICszVg81K72AuzJGkvakoOigQ+kfIMtkBJEUXi8i0Vp1a7lDVRB1SE+bDDG6\ntVVdXfMSDyYJGyNU+LDT8TmZ4luL8NgxtBeTIVJukcHksEUMZAjlRz3KdP+i\nNwrUPu6W3UiQTfQeoLvWevfY+ov4hhPCiboAAKBSAnf/mnfFLyeh8CoFYmUY\nMGAYjckU0k03zfZuHUALifI7LbJtGXOpouD3dDQ8YwcgU4oSVvYNq+PEn6BX\nZ4k2\r\n=d7rw\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n\n\nButtons allow users to take actions, and make choices, with a single tap.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/button\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n```\n\n> _NOTE_: Examples here use the generic `\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n> _NOTE_: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Additional Information\n\n### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n\n> \\*_NOTE_: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n> buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n> directly within the `mdc-button` element.\n> However, the `mdc-button__label` class may become mandatory for all cases in the future, so it is recommended to\n> always include it to be future-proof.\n\n### Sass Mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass Mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`mdc-button-filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass Mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`mdc-button-container-fill-color($color)` | Sets the container fill color to the given color.\n`mdc-button-icon-color($color)` | Sets the icon color to the given color.\n`mdc-button-ink-color($color)` | Sets the ink color to the given color, and sets the icon color to the given color unless `mdc-button-icon-color` is also used.\n`mdc-button-density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`mdc-button-height($height)` | Sets custom height of button.\n`mdc-button-shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$mdc-button-density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`mdc-button-horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`mdc-button-outline-color($color)` | Sets the outline color to the given color.\n`mdc-button-outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `mdc-button-horizontal-padding` is also included with a custom value.\n\n##### Caveat: Edge and CSS Custom Properties\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-button-container-fill-color` mixin, you must pass in an actual color value for support in Edge.\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-button"},"_npmVersion":"lerna/3.14.1/node@v10.17.0+x64 (linux)","description":"The Material Components for the web 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/density":"4.0.0-canary.cdf858ea.0","@material/elevation":"4.0.0-canary.cdf858ea.0","@material/typography":"4.0.0-canary.cdf858ea.0","@material/touch-target":"4.0.0-canary.cdf858ea.0","@material/feature-targeting":"4.0.0-canary.cdf858ea.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/button_4.0.0-canary.cdf858ea.0_1572631142351_0.03130479186980639","host":"s3://npm-registry-packages"}},"4.0.0-canary.719b57e1.0":{"name":"@material/button","version":"4.0.0-canary.719b57e1.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"222056a249b6411a57549b1decd71ddd1048ff0d","tarball":"https://registry.npmjs.org/@material/button/-/button-4.0.0-canary.719b57e1.0.tgz","fileCount":11,"integrity":"sha512-BZp0wBqouzVGB64/usa59io3DbSW+DC7LwdWjmw586/4uHgnbYxA3qV4wftBwiGxxnfR36LslepMWxb1plYtVQ==","signatures":[{"sig":"MEUCIQCGluPQw/Y54R5mnXNPrcXkVmf7pE83XrBNM0USgp+z5wIgbqHh9iCFH3Pmo9B9n5mGXIYc/xyXt9P2lfXJDKkUdD0=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":188454,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdvI8oCRA9TVsSAnZWagAA/d8P/3RzwDwn8l+6z6kDOaby\nqUlnCCxRQAhyRc+GRQkoXm61Ko+nUbQzjsR58f48l2NGdMJgAZCuhw8rG9Pm\nFFbPGAYZvxrfmRXaiLtmmxCBzRXGWCJOvPI8vrqM+mXYuN6AR0jNG+vzSqkv\nP3uWkdqEfNeuMJT2oGYtiyHwtvBHuD5sHUTm+8X2neHxK6w+drlpbkT6PZLE\nF0ZBb35BjK7H9HNHxljo2l63IGVsq2xjesKw4KAe6VAJ+KasZUASfswfksni\nufJyGGiaNjJKOfu8H50h+OOVfhZMx+ISOzJ2DvkxYTl+/d0KZ0ZNj4kSoD2+\n+QRk1RK9WUJp3vEu2fYefsZgvxaVAwnq6EyjkT7gtXSsW0okA5w1FBZTOCua\nqw5rAWPhGqKstmJh7djLLp5oCBFgK0n0EWcH1NZuRVRXw3Z/ZsWZe+VOgR05\nciPQVRgr6z5osjJ/qaGC2DJHKd8z9KT3QE+p3liPQlPr4NPt8ecIjbisQ51o\nvfpgvRoAbdpKu7NkeI9NLUo2u+ySGaTfPLc4tXFWcIVrMunJkfzeZsYiWArx\nZUWlzocESvJkFkrH1Ih0dPZ3U6I3yYmIQ1OAfPFDf6Ua6AB03XyIhOJZebcu\nPl0Lutmb66Ki8ZMeZfeaFB2r/uOs7mehlj4BFOimpVX+PkdyP0HpbtxezheC\nk8fi\r\n=scqL\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n\n\nButtons allow users to take actions, and make choices, with a single tap.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/button\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n```\n\n> _NOTE_: Examples here use the generic `\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n> _NOTE_: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Additional Information\n\n### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n\n> \\*_NOTE_: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n> buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n> directly within the `mdc-button` element.\n> However, the `mdc-button__label` class may become mandatory for all cases in the future, so it is recommended to\n> always include it to be future-proof.\n\n### Sass Mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass Mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`mdc-button-filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass Mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`mdc-button-container-fill-color($color)` | Sets the container fill color to the given color.\n`mdc-button-icon-color($color)` | Sets the icon color to the given color.\n`mdc-button-ink-color($color)` | Sets the ink color to the given color, and sets the icon color to the given color unless `mdc-button-icon-color` is also used.\n`mdc-button-density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`mdc-button-height($height)` | Sets custom height of button.\n`mdc-button-shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$mdc-button-density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`mdc-button-horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`mdc-button-outline-color($color)` | Sets the outline color to the given color.\n`mdc-button-outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `mdc-button-horizontal-padding` is also included with a custom value.\n\n##### Caveat: Edge and CSS Custom Properties\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-button-container-fill-color` mixin, you must pass in an actual color value for support in Edge.\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-button"},"_npmVersion":"lerna/3.14.1/node@v10.17.0+x64 (linux)","description":"The Material Components for the web 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/density":"4.0.0-canary.719b57e1.0","@material/elevation":"4.0.0-canary.719b57e1.0","@material/typography":"4.0.0-canary.719b57e1.0","@material/touch-target":"4.0.0-canary.719b57e1.0","@material/feature-targeting":"4.0.0-canary.719b57e1.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/button_4.0.0-canary.719b57e1.0_1572638503954_0.15600965778140363","host":"s3://npm-registry-packages"}},"4.0.0-canary.97cbbdc2.0":{"name":"@material/button","version":"4.0.0-canary.97cbbdc2.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"54598290db92dac9a3432805f0bd65cb17ca7c09","tarball":"https://registry.npmjs.org/@material/button/-/button-4.0.0-canary.97cbbdc2.0.tgz","fileCount":11,"integrity":"sha512-pk3uTaTx3Od5o7UoQpQnCNs52Vv6iYWj3YVzA+OsiIHD+JgKO2F5sxgrK0xFlyqAoJV+QRLk+ljOBj3DxhK9cA==","signatures":[{"sig":"MEQCIHqY2LFC7MEckd2nRxt/aIY29xtMHvtkLZNoTPPQBNqQAiB5Wh8cLSqFtQvB6OFseCF/W+1wwvyCeozcJTCHtDFRxQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":188467,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdvJWiCRA9TVsSAnZWagAAM3QP/jEHPCDmdvoECbgjIiN1\nxQBvEY+2rIUSvAdimBUpD5YbWz0g3RxL3FtBRDdlENEYmC4E3eaAqUveH4Tp\nFf8FLcUCwypdqQuHftuf8qnqBx2AjnwSKCB/L7ifdptQ81rX+ig7MzHqyQ2A\n57TgSlkiG/X/oDAId56x5DWkmpMqIeNJL5ujUy9isLzFIpc2WRVs+mUQbYHR\nn8hdkkUCBiH+IBV929C/VfSWNGSekgnHGvEZocdgK+epvLUAsBm2J1HkITXm\nF6OaKXDq+x3AAkCWwjUKI4OtlHHI+ec0g8JcKLowHm+2qXgcHSpmTh5hMB+1\ntJSVEN0JsK8wtKQgZchUZB6Mx4j488pfgndmbf+uvOJHC2T7yF55PVhZ9YMP\nkUOx53kjl2mKk60CAO2aluVDYYy2ZIxqSQCWcI60+Pa+UIJyx/aQSHpUEhPj\nWFbpbh6uvpUVRhizyUORoGoKX2216wR8kEDigFRSn52oz/7K047P8kuSKbpl\nDlR9GmU9QFw18FBlU3jowm0krXzzxvs4JJSPUxQ9/4uvrVKEqnYuVtuL3Br2\niL5PQtmF5ZEZ8eBzhtwdiqDUsAQiTEaoCMt7KC0/1xEVhkpnhRYkVC/xbvPh\nkGSYIrOfjeEDc0kAwEFwNASI2fuvjrX7RntmuprzI1nCqrHCQwsJpucMJhK2\naq55\r\n=JLzw\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n\n\nButtons allow users to take actions, and make choices, with a single tap.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/button\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n```\n\n> _NOTE_: Examples here use the generic `\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n> _NOTE_: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Additional Information\n\n### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n\n> \\*_NOTE_: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n> buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n> directly within the `mdc-button` element.\n> However, the `mdc-button__label` class may become mandatory for all cases in the future, so it is recommended to\n> always include it to be future-proof.\n\n### Sass Mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass Mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`mdc-button-filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass Mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`mdc-button-container-fill-color($color)` | Sets the container fill color to the given color.\n`mdc-button-icon-color($color)` | Sets the icon color to the given color.\n`mdc-button-ink-color($color)` | Sets the ink color to the given color, and sets the icon color to the given color unless `mdc-button-icon-color` is also used.\n`mdc-button-density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`mdc-button-height($height)` | Sets custom height of button.\n`mdc-button-shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$mdc-button-density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`mdc-button-horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`mdc-button-outline-color($color)` | Sets the outline color to the given color.\n`mdc-button-outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `mdc-button-horizontal-padding` is also included with a custom value.\n\n##### Caveat: Edge and CSS Custom Properties\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-button-container-fill-color` mixin, you must pass in an actual color value for support in Edge.\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-button"},"_npmVersion":"lerna/3.14.1/node@v10.17.0+x64 (linux)","description":"The Material Components for the web 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/density":"4.0.0-canary.97cbbdc2.0","@material/elevation":"4.0.0-canary.97cbbdc2.0","@material/typography":"4.0.0-canary.97cbbdc2.0","@material/touch-target":"4.0.0-canary.97cbbdc2.0","@material/feature-targeting":"4.0.0-canary.97cbbdc2.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/button_4.0.0-canary.97cbbdc2.0_1572640162559_0.1738713678867192","host":"s3://npm-registry-packages"}},"4.0.0-canary.8e36b3b7.0":{"name":"@material/button","version":"4.0.0-canary.8e36b3b7.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"702b44d4ee72d3c4abafd420396e3f34f006bac6","tarball":"https://registry.npmjs.org/@material/button/-/button-4.0.0-canary.8e36b3b7.0.tgz","fileCount":11,"integrity":"sha512-TV4bBOqOd/vuqrBqYtDQatqVrjkK1oS7Zkn4PbCdUmYbpy8qvT2SI5jiGoqfpG7+1u1wNrw2cLCF8Oku3rfhkQ==","signatures":[{"sig":"MEQCIAqJj1s/pQlxJAC3IpapJbjR21TCrl7V/IJJZQzqBtOsAiAgIarYilHnXctdHJt/+qyn9sUDV+r2aLruFNEHbcOTaw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":188255,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdvJ0sCRA9TVsSAnZWagAA4qwQAIyQ1w0xcgsFiFkYcMlS\neY54XAeA6zj6pM+uh8tFYIh4opBvMM8wjC1nIY7CN0Y9pr2YiphOyypAC7ZX\nPG9vGI0Lg0BEQkB/pbdC0+HUbdBvkampzvJCAJWzzF2OsjITicZ4QWEcF41P\nQk1CF3xjX5zhFooxLLVd6yRcAavvIBR4A2KssiZFR3y0P+Xn0UyqsEgwjxkI\nV4klTvslBXPU49MTyVdTVFrtHYGVRuVFH7n0IekJaHPgrGL+eqiNYyuL9+3o\n9TlmOSRHel0MCL5/xFLeoSasJEYLrND48HNI/siIqjcY8rjuOG99zHiE75uy\nxwgbZMw1oq9IERyMYUczjLoSSiuj7K+zpjwLolNrjjEulc2bZAIrt0KFTxHU\nu6LKAxlkJ+8LRZFJVXwuaCs08R1YQhT0RO/eFaK/UJ0jxRtMQX1U6RpOqheo\nmZ0a43CrTJgYA10dbjtOgA1eb6PTsngPLlhfU7rNHl92Xuif7hUgrZ6wI44E\n+IXL/MxogQB8NYCjsGesVq2ki0hcLxT5zVD6f8X1JWUHbp0ydadxrSCiLxrX\ntBXN/gwLUtSUdnW+8nSUTenbMKwB74vkpWddYHc2sgQnFPSdmnRdTH1J+DA7\nMoLgkT+iJLTonSBr+BD+/RDjaZ/rVPWG0acXlgODD2QKUU7b3a1Feywi0y8b\nVgQV\r\n=APIw\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n\n\nButtons allow users to take actions, and make choices, with a single tap.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/button\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n```\n\n> _NOTE_: Examples here use the generic `\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n> _NOTE_: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Additional Information\n\n### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n\n> \\*_NOTE_: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n> buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n> directly within the `mdc-button` element.\n> However, the `mdc-button__label` class may become mandatory for all cases in the future, so it is recommended to\n> always include it to be future-proof.\n\n### Sass Mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass Mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`mdc-button-filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass Mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`mdc-button-container-fill-color($color)` | Sets the container fill color to the given color.\n`mdc-button-icon-color($color)` | Sets the icon color to the given color.\n`mdc-button-ink-color($color)` | Sets the ink color to the given color, and sets the icon color to the given color unless `mdc-button-icon-color` is also used.\n`mdc-button-density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`mdc-button-height($height)` | Sets custom height of button.\n`mdc-button-shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$mdc-button-density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`mdc-button-horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`mdc-button-outline-color($color)` | Sets the outline color to the given color.\n`mdc-button-outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `mdc-button-horizontal-padding` is also included with a custom value.\n\n##### Caveat: Edge and CSS Custom Properties\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-button-container-fill-color` mixin, you must pass in an actual color value for support in Edge.\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-button"},"_npmVersion":"lerna/3.14.1/node@v10.17.0+x64 (linux)","description":"The Material Components for the web 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/density":"4.0.0-canary.8e36b3b7.0","@material/elevation":"4.0.0-canary.8e36b3b7.0","@material/typography":"4.0.0-canary.8e36b3b7.0","@material/touch-target":"4.0.0-canary.8e36b3b7.0","@material/feature-targeting":"4.0.0-canary.8e36b3b7.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/button_4.0.0-canary.8e36b3b7.0_1572642091998_0.9567515484379054","host":"s3://npm-registry-packages"}},"4.0.0-canary.62d3a09b.0":{"name":"@material/button","version":"4.0.0-canary.62d3a09b.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"902c9c35b53497b89452f1854818a6938efd3760","tarball":"https://registry.npmjs.org/@material/button/-/button-4.0.0-canary.62d3a09b.0.tgz","fileCount":11,"integrity":"sha512-dqOOw0B3OjCqeVIhTvv0av+BZeApqbhZmcGYZGY4JzmU2MJglnLwtxfiEuz1AOHtVEQz5wORn9G51cpVpqGmQw==","signatures":[{"sig":"MEUCIDdqpJClxmBqKw6yVa95mv0f26XACAsH3ot2h2MHtTxhAiEApHdR6pmj3lwr9BHI+QkVK+7NPlg/FoUKcKHqrPrDUBU=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":188255,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdvJ9eCRA9TVsSAnZWagAAplsP/jebCFLkmwIgMy9iYt6w\nFDp+K3Luk5ids1tYv06MvyIBypgq/rmOOa9SNSuihdqLprSznFyQaJ+vVyuy\nQiV3cPgSUTwgeTEer25/WLV85lXHKDFMdjHy4ADU4HYuqiIBdvWQmASk7A3c\nv7kv7ijAcag2sMV+DzzK6HZIKeSFtbabOD8/HHNxpfOJl7ahgSLHTxN0BCzQ\n/uOWc/aeks+bFATSnnz9qaCtsKJYFn77bLGpA3OXMOYz+CRFkxqdRG8y88fX\noXLOi6dGtC0uoXd48LG8ukxPkKwjO0skjSOrLVpAXFDYogUDfZ43Pk5ZYiT8\nIDQwEQSVT3VJV5Ohcswk4JddzNR5+Ox+m0+SC9XQm/4BfaXOFMT0z/ak2zFm\nOi6p9GH6oaWuxBEYL6PJ+pQAVo+5uM355gPfVkzAygMbd47lXBwjz9h6Z7ID\ndk4Ed2AxV8kFymPYzMpkYGOn898vd+lPQQou5qCPgQdcpm+/yjprV64GqkTQ\nK9ARfFAkDfr/v+AVC/Fkp4IGVa37zPK8YvmC6lxdADVtDfLgJFP13ilQQvmw\nrAash0hnvUuK46KptKejF/XRhUznOBUZxvtH1icSv8RHFaEbWF7jESgIW8GV\nhcc/ukxq+Z2Ie1lhisMfU+uTbXe7AtLQGMLdhAQxlpKfn2FqRzG+mic5bak9\nYe+0\r\n=4KbJ\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n\n\nButtons allow users to take actions, and make choices, with a single tap.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/button\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n```\n\n> _NOTE_: Examples here use the generic `\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n> _NOTE_: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Additional Information\n\n### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n\n> \\*_NOTE_: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n> buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n> directly within the `mdc-button` element.\n> However, the `mdc-button__label` class may become mandatory for all cases in the future, so it is recommended to\n> always include it to be future-proof.\n\n### Sass Mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass Mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`mdc-button-filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass Mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`mdc-button-container-fill-color($color)` | Sets the container fill color to the given color.\n`mdc-button-icon-color($color)` | Sets the icon color to the given color.\n`mdc-button-ink-color($color)` | Sets the ink color to the given color, and sets the icon color to the given color unless `mdc-button-icon-color` is also used.\n`mdc-button-density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`mdc-button-height($height)` | Sets custom height of button.\n`mdc-button-shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$mdc-button-density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`mdc-button-horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`mdc-button-outline-color($color)` | Sets the outline color to the given color.\n`mdc-button-outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `mdc-button-horizontal-padding` is also included with a custom value.\n\n##### Caveat: Edge and CSS Custom Properties\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-button-container-fill-color` mixin, you must pass in an actual color value for support in Edge.\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-button"},"_npmVersion":"lerna/3.14.1/node@v10.17.0+x64 (linux)","description":"The Material Components for the web 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/density":"4.0.0-canary.62d3a09b.0","@material/elevation":"4.0.0-canary.62d3a09b.0","@material/typography":"4.0.0-canary.62d3a09b.0","@material/touch-target":"4.0.0-canary.62d3a09b.0","@material/feature-targeting":"4.0.0-canary.62d3a09b.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/button_4.0.0-canary.62d3a09b.0_1572642654478_0.5169095192517545","host":"s3://npm-registry-packages"}},"4.0.0":{"name":"@material/button","version":"4.0.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"714cba51a6d3d33c51fe106f8d0d114596d95b1d","tarball":"https://registry.npmjs.org/@material/button/-/button-4.0.0.tgz","fileCount":11,"integrity":"sha512-CoQjShblZ7evChPJoM+Cao90Fwi25NCIhdTequzZifD73BvQegyN7MlNdbHaGqpecYzOrm0xq+nocg+yQN90qg==","signatures":[{"sig":"MEUCIEJUyQDsx1ZHmbG7NuvzvpjIUtTWRheXHEAGa1LdBgvTAiEAg8z7x11AGaamf2ZXrfQKrQxAVLuefNOqf1DHyTDzPZ0=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":252573,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdvcbkCRA9TVsSAnZWagAAZjYP/2AO5SC9jtGeC8Z5mwlz\nRaMUCoNWY2Tcru5ZYYTJK7TS/GPHXl69ZgBR/mpiyB9kAgJQSDpIrSFFHNB9\nXIIddK+K02cKcmZwu+O2hVUyficiNXbujE2mS2HwuU1xCtI+GtyaTXvUfy1g\nzOsA6TGdBJvDts0Hq6OhGZ35fySpDWxsAerNPt9ANYAFLiMRvA4GsqJ/YSbl\ngBrGuv3MTVZKfHnzB8wPvfp3XWaGfpslva37eaYJgXK6m80mmfz/w3ceDiTg\n6TOD5zg9NsalZ5sOs5OQKBppU8zXzcxiCjbPIGRBKLE4oKACspgjCTB6CtJY\nx4zEnofUCtWt0FaEst8lrf0E6LjJag0dc59fjfyuBe6znS4Aex1JVyT6RAjq\nV0TNySGZlmYuh2Bpwq+vFh03sGTuxJjZ05tdk+SCBjRbAQmrXOXcZcsb/Dnm\n6FQEc/wpIg8GXVflgqZfYIYJkw8n3kLII5bnbwtxQdviVLtdvJ4YuwCW0kCW\nHVjjPchmxtcB2F8crkrKunWTvRr9RzwqlieliSwE8VgMUzGLi7Z2lvhQ07qB\n9Q6WSd50P/8vhAW8P/2vMqBMOnSJawzxgtLoc4789c1m1t86XFeHc1h1Zjd1\nNMDpPV4o5BkthwLVNpIg0uIVmsczul8/J7HzPyGYRBxu4V3LHQlUyH81P8bA\n6oGZ\r\n=HzwG\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-button"},"_npmVersion":"lerna/3.14.1/node@v10.16.3+x64 (darwin)","description":"The Material Components for the web 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/density":"^4.0.0","@material/elevation":"^4.0.0","@material/typography":"^4.0.0","@material/touch-target":"^4.0.0","@material/feature-targeting":"^4.0.0"},"_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/button_4.0.0_1572718308279_0.5312055265362763","host":"s3://npm-registry-packages"}},"5.0.0-canary.b5eb51e94.0":{"name":"@material/button","version":"5.0.0-canary.b5eb51e94.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"ae419a7d767da106a86878597e02b7711df49c65","tarball":"https://registry.npmjs.org/@material/button/-/button-5.0.0-canary.b5eb51e94.0.tgz","fileCount":11,"integrity":"sha512-28cgOK2aLHC0tcgen1EzwjseMG2hic8r53us6se5lTnCePt/ixKihl9VvmwtwvLBMeTUZ8J8GW43WKzkZoa4MA==","signatures":[{"sig":"MEUCIBa6yIbQn+IV5zAHfywN8tJeZylro5wio5UA63xdqL2iAiEAwCcwiHreT//3k5gTMaaInXLGkxTaOHbwV6NtR6A1JOk=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":199743,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdxGOPCRA9TVsSAnZWagAAObAP/3oVjrc+tJ3gknjaFWyB\nCXJ4E2onkzkZT3VOJrlY8dgUsEqTxYEz7r3zzgpJLMbYIOe37QPORZrjEoTr\nfFb5Sua09eydWdhMAsYb36MnzZqL4usOfeMP2UboecXYzGry4D0q1lrkchQM\n+KU/WvsOsaHOuh+hIf21zBveZPf1/0k8vVUuuJTj6VHmg7PdpBhar9IgHdhT\nqWKcISgG33MxxeuyGFSIX6ihX52hBzrLQKrGR6MIcKQt9oSZPpr94AB7hUna\nlg21ouoNbyNdNX/t1QSqerM+LW637yEmjyMgRNvJyoQKpaFaJoJ6OwYbZ3Az\nlXkcPwff4RlNiVCH+EOLabRnMR4oY28Uuw7hGMRxHc6AlEATAc13JiRlsuxz\nPRi/ZH9sC/qVOrsRdzryYp13UmAAPECVudWBYuE6d8jDK67hMzgTVwIm5Gqq\nilRkUluuJIvZUdw1HVk2D3l1TILKImYkfcmf4TV5u/aFX8F8nmaieuFisadq\nGuCVtWZ+IKhiPRvHF5WMFJjeUxabCcNxHWgm2QM3KvigRfJOIdPVcTfZ4S9Q\no3qgiiUtWe9qF9wyJc+3dMCvPHK6c+JeIyNEUh8/RZWOcpE6Tj/whk6SiPDy\ncrgRINeZPcmV9LENfRCDOcNTRhDB7kyPHES6qZSPvrt7sAMDFxhRn+SJ3pUh\ncT2S\r\n=KlXj\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n\n\nButtons allow users to take actions, and make choices, with a single tap.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/button\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n```\n\n> _NOTE_: Examples here use the generic `\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n> _NOTE_: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Additional Information\n\n### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n\n> \\*_NOTE_: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n> buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n> directly within the `mdc-button` element.\n> However, the `mdc-button__label` class may become mandatory for all cases in the future, so it is recommended to\n> always include it to be future-proof.\n\n### Sass Mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass Mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`mdc-button-filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass Mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`mdc-button-container-fill-color($color)` | Sets the container fill color to the given color for an enabled button.\n`mdc-button-disabled-container-fill-color($color)` | Sets the container fill color to the given color for a disabled button.\n`mdc-button-icon-color($color)` | Sets the icon color to the given color for an enabled button.\n`mdc-button-disabled-icon-color($color)` | Sets the icon color to the given color for a disabled button.\n`mdc-button-ink-color($color)` | Sets the ink color to the given color for an enabled button, and sets the icon color to the given color unless `mdc-button-icon-color` is also used.\n`mdc-button-disabled-ink-color($color)` | Sets the ink color to the given color for a disabled button, and sets the icon color to the given color unless `mdc-button-icon-color` is also used.\n`mdc-button-density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`mdc-button-height($height)` | Sets custom height of button.\n`mdc-button-shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$mdc-button-density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`mdc-button-horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`mdc-button-outline-color($color)` | Sets the outline color to the given color for an enabled button.\n`mdc-button-disabled-outline-color($color)` | Sets the outline color to the given color for a disabled button.\n`mdc-button-outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `mdc-button-horizontal-padding` is also included with a custom value.\n\n##### Caveat: Edge and CSS Custom Properties\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-button-container-fill-color` mixin, you must pass in an actual color value for support in Edge.\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-button"},"_npmVersion":"lerna/3.14.1/node@v10.17.0+x64 (linux)","description":"The Material Components for the web 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/density":"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/button_5.0.0-canary.b5eb51e94.0_1573151630872_0.6348560021289706","host":"s3://npm-registry-packages"}},"5.0.0-canary.58500806e.0":{"name":"@material/button","version":"5.0.0-canary.58500806e.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"82dc51ebc5c145b9b74eeda997fea8558357f9ba","tarball":"https://registry.npmjs.org/@material/button/-/button-5.0.0-canary.58500806e.0.tgz","fileCount":11,"integrity":"sha512-byU8vDMCjVQCMVCzhVcjjI2zECjJDzo95wJ65KNYY+mavLI2siu1W/tkvdsXMAnRyg8ReljEIw2JXAnIUS6eJA==","signatures":[{"sig":"MEUCIEo8no9bCsJUW2PgDAvU31HfqK95U2PLbbjrn8Zby9OlAiEAwEng50JKh5mWtJ/6QIHBucp9E1C+fwMEWxPhfts3xA8=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":199743,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdxYtaCRA9TVsSAnZWagAA/0gP/A9WxJUESUkCif4tnFyS\nMkeXHrL9D+itoARsb0sVZRZyjBQoiZpGweWITVAGqSCVT5H19ObCkRq9IoB6\ne+0GYGY81WbWsI6VVpAYN9MbYWHrRlXPQks1iHixMGtzs96X0OlDBqpR7GDF\nhn8PKSDkcpKtyb5AO9RxLVys6dAyQJ7HKdOR68+nkhOTOgYz0FFnmEvDXG8/\n5i9Tw+f+6yuf55qZlnze9e/Yj7u0BwDeZOjmzIvIpQzqHBOrKP2Dc++lzTTd\nK/+e/otBfn3H00/58pwN9GDi6DP6qgn88sE6Bk6MzugEzeJTJEtm7PzGp6Ev\nprSjm3JYeLf/5YaGpQtVtxFKHtzYedIaGkQlE5lz8sXW5/x09YICn2yNl27a\nNuSexImJvv/Jdhutg2Drv0/LMqqw6dsoRViXkCvOM/90+dF1DVS/IWyII1i5\n1dwrG7qVIzGTp1kRD5sbsEr8M3Bjz45BkAdDO1Lnd5R6P3O0VCKHczTjJpyo\nT5DnU2kIZnKOhN6YN8qWzbWehPPSSOX7MAzkyeHAq4D0NFK/ZPg+qgf44vFI\n1cjTA8TKlG7yqR5Kw19nlPB8zVaoXMtsJfKnqQyFcaV4/UPBTz8soOtz7jKB\nV3LDzCLXFJbEaBn0ldFUIL+E3UrE/86nKJ2mKMB9C61Wqwn08r771E1tBuzr\naSSU\r\n=typG\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n\n\nButtons allow users to take actions, and make choices, with a single tap.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/button\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n```\n\n> _NOTE_: Examples here use the generic `\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n> _NOTE_: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Additional Information\n\n### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n\n> \\*_NOTE_: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n> buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n> directly within the `mdc-button` element.\n> However, the `mdc-button__label` class may become mandatory for all cases in the future, so it is recommended to\n> always include it to be future-proof.\n\n### Sass Mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass Mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`mdc-button-filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass Mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`mdc-button-container-fill-color($color)` | Sets the container fill color to the given color for an enabled button.\n`mdc-button-disabled-container-fill-color($color)` | Sets the container fill color to the given color for a disabled button.\n`mdc-button-icon-color($color)` | Sets the icon color to the given color for an enabled button.\n`mdc-button-disabled-icon-color($color)` | Sets the icon color to the given color for a disabled button.\n`mdc-button-ink-color($color)` | Sets the ink color to the given color for an enabled button, and sets the icon color to the given color unless `mdc-button-icon-color` is also used.\n`mdc-button-disabled-ink-color($color)` | Sets the ink color to the given color for a disabled button, and sets the icon color to the given color unless `mdc-button-icon-color` is also used.\n`mdc-button-density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`mdc-button-height($height)` | Sets custom height of button.\n`mdc-button-shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$mdc-button-density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`mdc-button-horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`mdc-button-outline-color($color)` | Sets the outline color to the given color for an enabled button.\n`mdc-button-disabled-outline-color($color)` | Sets the outline color to the given color for a disabled button.\n`mdc-button-outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `mdc-button-horizontal-padding` is also included with a custom value.\n\n##### Caveat: Edge and CSS Custom Properties\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-button-container-fill-color` mixin, you must pass in an actual color value for support in Edge.\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-button"},"_npmVersion":"lerna/3.14.1/node@v10.17.0+x64 (linux)","description":"The Material Components for the web 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/density":"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/button_5.0.0-canary.58500806e.0_1573227354486_0.42542061884017923","host":"s3://npm-registry-packages"}},"5.0.0-canary.66299b646.0":{"name":"@material/button","version":"5.0.0-canary.66299b646.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"72760ea66c05d2fa23f72cdcda9662a9012c51db","tarball":"https://registry.npmjs.org/@material/button/-/button-5.0.0-canary.66299b646.0.tgz","fileCount":11,"integrity":"sha512-nTVOfj1nkttob+S/BVJxC0IwynfnmNuf8SLSAWpV361tsyofgmDs3QK2dbpx3XYRaBkRWTPjiBk0/U1sF/Y2VA==","signatures":[{"sig":"MEUCIBOSyf6iUCnBkpDgyNUFGZlwMDUg98tLjcxZhfHe+TuGAiEAs1yWOvW3IkislPjOpfsYTxwKZBqlJABZ69ylwwWRfzE=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":199743,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdxdEwCRA9TVsSAnZWagAA4SwP/1oMWD4ZJKlIsTXMRaDj\n2ySdBqwqTLQxNovoqBevhnGx6MNYTPjAwvjOPbYLse4hfQDw1XUfS4sUGEH2\ntemYDwUw1gTBEUwwh+rAGOrFdJ/B63BFGBoHgrAcuFMTw8Ax6Oap6YtWUnxT\nYNQbbgeg2JbszDNxveBlpQzDK/xJw4skpp/TKJD8J/NrY0huEMr/JFbVTcEL\nYTI3UBrWBd/A7fmKTvc5My6tMHjyn3WlAkY0uB73kgmXFmLuqaU1RRGQP++H\nnlOi5wfphx5dv6npP8sif6t+v53iu0zhVbMUvJ8V5ZlF00JBgiqd0NL2142P\nbEgDnuSUJA7TcTg8LtTOs8GVa0ASnY0jbaRz4fAKdg0/PD3xmSEibx2HHyCL\nu7mZinMyiUE8JT93sDOA5AOIVxj/B/6bQ2+S5sc1TFRmhjrmyKfQ+UNrNclZ\n4A5Du2rKMl93YNS5auk7hQVHrtOMWzSxlgr/cXlW4QkgYAawjYRfZyNP+nkJ\nmabkeYCWWUsKPUvoXCPQgCEynMyKe7IcZzIvibMbCL4fmdP2VTISaMWtqG5y\nkM8FZmtpFKoo0nDVQqeBqUhnZoyyjvLHBEFbgee6omCeiF06xtOGapHETlOz\nlbO6DktafDvwwAlyvJ1ICgCxL445rZFmWoKKRHktiwKnMxdau3gBBG4IprD5\ngwtw\r\n=Wk3+\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n\n\nButtons allow users to take actions, and make choices, with a single tap.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/button\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n```\n\n> _NOTE_: Examples here use the generic `\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n> _NOTE_: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Additional Information\n\n### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n\n> \\*_NOTE_: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n> buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n> directly within the `mdc-button` element.\n> However, the `mdc-button__label` class may become mandatory for all cases in the future, so it is recommended to\n> always include it to be future-proof.\n\n### Sass Mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass Mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`mdc-button-filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass Mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`mdc-button-container-fill-color($color)` | Sets the container fill color to the given color for an enabled button.\n`mdc-button-disabled-container-fill-color($color)` | Sets the container fill color to the given color for a disabled button.\n`mdc-button-icon-color($color)` | Sets the icon color to the given color for an enabled button.\n`mdc-button-disabled-icon-color($color)` | Sets the icon color to the given color for a disabled button.\n`mdc-button-ink-color($color)` | Sets the ink color to the given color for an enabled button, and sets the icon color to the given color unless `mdc-button-icon-color` is also used.\n`mdc-button-disabled-ink-color($color)` | Sets the ink color to the given color for a disabled button, and sets the icon color to the given color unless `mdc-button-icon-color` is also used.\n`mdc-button-density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`mdc-button-height($height)` | Sets custom height of button.\n`mdc-button-shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$mdc-button-density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`mdc-button-horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`mdc-button-outline-color($color)` | Sets the outline color to the given color for an enabled button.\n`mdc-button-disabled-outline-color($color)` | Sets the outline color to the given color for a disabled button.\n`mdc-button-outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `mdc-button-horizontal-padding` is also included with a custom value.\n\n##### Caveat: Edge and CSS Custom Properties\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-button-container-fill-color` mixin, you must pass in an actual color value for support in Edge.\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-button"},"_npmVersion":"lerna/3.14.1/node@v10.17.0+x64 (linux)","description":"The Material Components for the web 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/density":"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/button_5.0.0-canary.66299b646.0_1573245231737_0.6094613064969432","host":"s3://npm-registry-packages"}},"5.0.0-canary.821871e04.0":{"name":"@material/button","version":"5.0.0-canary.821871e04.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"bfe97d4df01cc6bdbe379b87baac118a2957f713","tarball":"https://registry.npmjs.org/@material/button/-/button-5.0.0-canary.821871e04.0.tgz","fileCount":11,"integrity":"sha512-REu5PfFYSMz+L62fr7sxTohlUMl/UVWCUDyff0sRvsZcKLp/P6vt5Tb40u2rqRPPfMcK4hyTCufyXnml3mRPYw==","signatures":[{"sig":"MEQCIFrgaKsdCxIcge66t9fpm3LJTWZ0jjPei4FTdMBqn65cAiAn63W+Yx324KyooMREe05pFNLB3zy453kK4gtRCUmWdQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":199743,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdxd33CRA9TVsSAnZWagAAh+wP/0jyyY2LEylVDT4y2m6P\nU2UGdjowB+L6cfxDoUqfEm/phs3VybgGdx9IOXFWZxAzQxmdybavaJQDqbPL\nQyLhmXWNbFGi8a2bONnvxtvAc9Qe4s/PoqPQkWyvFz8Ti8p8Gk6czEofw1+q\n9RajvE7+QhqORscP+/4rfalDJYctgSRUaI8iDsSZa4sDAZPZEt0td8EBkose\ngxnsmeYSn2K9/Lajvb+Bs3UuQ+71HNb6lEmXvR99jqBV5WBsN94+BeWV0Quc\nazk40te7ntW/bgyn/FJVjAYJbBU2rATTRb/p2lWCuVuvBGKKF+C6qNYZII90\nDvKtZiOAUyQs0CvFCHODSuhjW3+B/8oBSSDmElWxl1w75eq6rNkPF2rhJzfV\npeqmeRogWEKGKcgPcgNP1tV4LOCYMiUsD5nExd7TVHAEz9pCGKcQ/Z/uB3OX\n9+J41EkU50JE2jKo5I1o8RoNy+3lIeCuPD7vB0q7eAwt/rbuZr6w/MiIWC70\nb3Yr0T+ab71UvUvQdrMXIGzVmgcZ/DPo84OK6vduDAgCLoGOqgXJsjdxOqos\naff4BZCRYIRD/8oL8ReaIl7avElsOyOk2Yv4fsN2Ymz36UdDunXYVSawR/8V\nGocOGF4JIyn9x74O8LoJ3+grMv3Q+5vAVVSjxhUv2ColivbWOnYWHCDP6RtR\nhx4Q\r\n=7DXn\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n\n\nButtons allow users to take actions, and make choices, with a single tap.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/button\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n```\n\n> _NOTE_: Examples here use the generic `\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n> _NOTE_: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Additional Information\n\n### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n\n> \\*_NOTE_: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n> buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n> directly within the `mdc-button` element.\n> However, the `mdc-button__label` class may become mandatory for all cases in the future, so it is recommended to\n> always include it to be future-proof.\n\n### Sass Mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass Mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`mdc-button-filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass Mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`mdc-button-container-fill-color($color)` | Sets the container fill color to the given color for an enabled button.\n`mdc-button-disabled-container-fill-color($color)` | Sets the container fill color to the given color for a disabled button.\n`mdc-button-icon-color($color)` | Sets the icon color to the given color for an enabled button.\n`mdc-button-disabled-icon-color($color)` | Sets the icon color to the given color for a disabled button.\n`mdc-button-ink-color($color)` | Sets the ink color to the given color for an enabled button, and sets the icon color to the given color unless `mdc-button-icon-color` is also used.\n`mdc-button-disabled-ink-color($color)` | Sets the ink color to the given color for a disabled button, and sets the icon color to the given color unless `mdc-button-icon-color` is also used.\n`mdc-button-density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`mdc-button-height($height)` | Sets custom height of button.\n`mdc-button-shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$mdc-button-density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`mdc-button-horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`mdc-button-outline-color($color)` | Sets the outline color to the given color for an enabled button.\n`mdc-button-disabled-outline-color($color)` | Sets the outline color to the given color for a disabled button.\n`mdc-button-outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `mdc-button-horizontal-padding` is also included with a custom value.\n\n##### Caveat: Edge and CSS Custom Properties\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-button-container-fill-color` mixin, you must pass in an actual color value for support in Edge.\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-button"},"_npmVersion":"lerna/3.14.1/node@v10.17.0+x64 (linux)","description":"The Material Components for the web 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/density":"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/button_5.0.0-canary.821871e04.0_1573248502947_0.36796536137173796","host":"s3://npm-registry-packages"}},"5.0.0-canary.491fddc31.0":{"name":"@material/button","version":"5.0.0-canary.491fddc31.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"3ffe71e10395135f1a57ba5c0aef859ce08cab77","tarball":"https://registry.npmjs.org/@material/button/-/button-5.0.0-canary.491fddc31.0.tgz","fileCount":11,"integrity":"sha512-OK71h8IMlEhB6/6X4lK6fKm/MQPAFPPNmikK98xj/3WZlqMP11RskKGmDhKt4aKRe+r0mn/K+vnGUmaXrYOHeQ==","signatures":[{"sig":"MEUCIQDtETa9eGXYT5ch+dqT8//lF0T8S1MQmTsp1XhepzZ07QIgaKqnoDv+mDF9/T+lKeq1S8vMP6PaDHdnek4M8IM257I=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":199743,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdxeccCRA9TVsSAnZWagAAk/8QAJBMrQUzSLyfaJM+nMTW\nkjsz0w4i4OfrDcqaLHTzykX17fLg8uQmi4SWlMEqQEYkvAB6la4qt+BYqotd\n3mymAFGqReujPBxK2WX2yvorFzpyQqNnUGjdQa7p0jwHXaMf39O+uMP53YUs\ndtf3OGHV4hd0k+t3KTiie21KkI+iMNalu/9C95yZbLn5Oia+7dky+fA9zqtH\nbS+IJ1tuvSru7UNJgbzKdSbP5u+Ol10euVRl+xkbspoLNR5PZJCHzKsXcbEN\nH4e4WGyuuZrDB9ZGP7fpbsdumRWWtuUwVrxnL95zl6CEFkDlAN0ltnyrzvoA\nAiAmrfcj0Nw4nhNbUif1rHxBwa08arPgEYntN8D60v91ZD2qnl//GsTViXBe\nYj4zPHNlTL3YtV9eRhc2IJAg6AiX0Q8qLwm+z2jNx8GD3YK3SRmYq6epDXJb\nZwWNMllbO3JFZyeR87MXL1X304lgduXnLnOhLfg69dA6v0jn+ocsLRGk+ZPn\nO9qewVcdz6rrCQIsLMtipMMrlmLIJCoqTgXDhme4Vq9ljZXkLSbO4W8k94FD\nPB863bkzVPM0Hu1mCMHV46bvGddcTGsSzvmwrJSjy9nbmtSv8WffO5azL8yP\nO1P0mNbwOBB/jcjURhLPbv+2DZCIXCBpb65UWAjlegcNuKG9WzO15eqVKYte\nHjJg\r\n=g5b+\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n\n\nButtons allow users to take actions, and make choices, with a single tap.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/button\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n```\n\n> _NOTE_: Examples here use the generic `\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n> _NOTE_: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Additional Information\n\n### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n\n> \\*_NOTE_: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n> buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n> directly within the `mdc-button` element.\n> However, the `mdc-button__label` class may become mandatory for all cases in the future, so it is recommended to\n> always include it to be future-proof.\n\n### Sass Mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass Mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`mdc-button-filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass Mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`mdc-button-container-fill-color($color)` | Sets the container fill color to the given color for an enabled button.\n`mdc-button-disabled-container-fill-color($color)` | Sets the container fill color to the given color for a disabled button.\n`mdc-button-icon-color($color)` | Sets the icon color to the given color for an enabled button.\n`mdc-button-disabled-icon-color($color)` | Sets the icon color to the given color for a disabled button.\n`mdc-button-ink-color($color)` | Sets the ink color to the given color for an enabled button, and sets the icon color to the given color unless `mdc-button-icon-color` is also used.\n`mdc-button-disabled-ink-color($color)` | Sets the ink color to the given color for a disabled button, and sets the icon color to the given color unless `mdc-button-icon-color` is also used.\n`mdc-button-density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`mdc-button-height($height)` | Sets custom height of button.\n`mdc-button-shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$mdc-button-density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`mdc-button-horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`mdc-button-outline-color($color)` | Sets the outline color to the given color for an enabled button.\n`mdc-button-disabled-outline-color($color)` | Sets the outline color to the given color for a disabled button.\n`mdc-button-outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `mdc-button-horizontal-padding` is also included with a custom value.\n\n##### Caveat: Edge and CSS Custom Properties\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-button-container-fill-color` mixin, you must pass in an actual color value for support in Edge.\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-button"},"_npmVersion":"lerna/3.14.1/node@v10.17.0+x64 (linux)","description":"The Material Components for the web 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/density":"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/button_5.0.0-canary.491fddc31.0_1573250844380_0.9585133896182461","host":"s3://npm-registry-packages"}},"5.0.0-canary.b0cecf145.0":{"name":"@material/button","version":"5.0.0-canary.b0cecf145.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"2483f7a9aa2ff486a69b0b1d80d23684279e4386","tarball":"https://registry.npmjs.org/@material/button/-/button-5.0.0-canary.b0cecf145.0.tgz","fileCount":11,"integrity":"sha512-JmaDclWrDk1poNZS088HCUWnif4qQsnjfi0rCOcxRSLH//NArcRDO5degbp/omFoJZvx1PHCLh61fl+eq33Mvg==","signatures":[{"sig":"MEYCIQCwmqur2Nmex9D1ngoPGflnznP2ppf92zlXKx7Hg4Y9LgIhAMLn+GTMJODkVbo782X8Lfnke847WOMp/sLIr3fzuRZG","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":200337,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdxwiaCRA9TVsSAnZWagAAeXwP/07mqJOFWCdfTBKiv2Kx\nVcDg4jyx/fNRsF+PzsHzx5pqCnBaRWL/TGgTfdq3+F26wElWiYdtOpkRKLbA\nnjasW2/OErnb5vJqE2OaM8/nFzMZOTVS+GLiiL0jtadMdbQg4hLO7nXMSAy5\nDR7LjRlNT6HJnQbX+0n0bPRqMgrv3ztjgVQ2kzGca2CWGMjqnhgBnGir8s7T\nNYTzcq/WP8oWWV1Bh2FhHUsAGT9yCo1MdrghAiP8V7N1udq7ywTjcSwJxfvq\n73iO/1Xrcid9+cQrcABxQTDtRoA/jaSP4ZEjwXBpX4ZgwNY0CGINheE0evpc\nM3p84dZWgYu+qlJGGLrBFuozvzIW2gSwHhm/y9JAplaaVa82FoHCEPpntvoZ\nNr8Djcmu36+taqO+NkWm/eKOBg2n6KX+KdrBF6Pko9K4UrAiHM2HWR6YALl1\nf8ob1qIgsTc8v1zM9y2hg5DN147cegCbK5nGBmBb0UFK59+E4yNziC4axMP8\nrYMzu9CyRcuY24tCNQ+aRhnin8zbXdFwbfGaWDTTBMrrVJ3FWJQhAQf4IyE7\npDVRIosAspXaC41Ll0P5dbINNf99KiK1PXNkgOe31HFWOlpVTeJ1OtwkpFkc\nB17hQ9FI1Df8XgMbCpeinQ915OcTsK0LMjfJXZpqM5wLFyF28c+wRLzHmEgK\nhHo0\r\n=oQHM\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n\n\nButtons allow users to take actions, and make choices, with a single tap.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/button\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n```\n\n> _NOTE_: Examples here use the generic `\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n> _NOTE_: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Additional Information\n\n### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n\n> \\*_NOTE_: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n> buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n> directly within the `mdc-button` element.\n> However, the `mdc-button__label` class may become mandatory for all cases in the future, so it is recommended to\n> always include it to be future-proof.\n\n### Sass Mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass Mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`mdc-button-filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass Mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`mdc-button-container-fill-color($color)` | Sets the container fill color to the given color for an enabled button.\n`mdc-button-disabled-container-fill-color($color)` | Sets the container fill color to the given color for a disabled button.\n`mdc-button-icon-color($color)` | Sets the icon color to the given color for an enabled button.\n`mdc-button-disabled-icon-color($color)` | Sets the icon color to the given color for a disabled button.\n`mdc-button-ink-color($color)` | Sets the ink color to the given color for an enabled button, and sets the icon color to the given color unless `mdc-button-icon-color` is also used.\n`mdc-button-disabled-ink-color($color)` | Sets the ink color to the given color for a disabled button, and sets the icon color to the given color unless `mdc-button-icon-color` is also used.\n`mdc-button-density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`mdc-button-height($height)` | Sets custom height for button.\n`mdc-button-shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$mdc-button-density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`mdc-button-horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`mdc-button-outline-color($color)` | Sets the outline color to the given color for an enabled button.\n`mdc-button-disabled-outline-color($color)` | Sets the outline color to the given color for a disabled button.\n`mdc-button-outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `mdc-button-horizontal-padding` is also included with a custom value.\n\n##### Caveat: Edge and CSS Custom Properties\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-button-container-fill-color` mixin, you must pass in an actual color value for support in Edge.\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-button"},"_npmVersion":"lerna/3.14.1/node@v10.17.0+x64 (linux)","description":"The Material Components for the web 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/density":"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/button_5.0.0-canary.b0cecf145.0_1573324954254_0.8850658460294658","host":"s3://npm-registry-packages"}},"5.0.0-canary.afe0dd1bc.0":{"name":"@material/button","version":"5.0.0-canary.afe0dd1bc.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"c6fd447ac2271d6c59e0e6f4a3b3dd9e58f3830b","tarball":"https://registry.npmjs.org/@material/button/-/button-5.0.0-canary.afe0dd1bc.0.tgz","fileCount":11,"integrity":"sha512-z5odtVkPP+9ZFbDZ63i5NzQF7SkMM/mllu3xnPQN8tKeiTEsz3xGBunne3wYBOsecTnSLE1TWwOlblt7+7eJBQ==","signatures":[{"sig":"MEQCIF/V5pSGky0GqBioTEQMwZc45mPDqdZWUmhcJu8OzZmeAiAguU12pLzwKLYh8jduYbs8Qv7XQ25oYsUpZ/4SaaSmuA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":200784,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdyYBTCRA9TVsSAnZWagAAfRwP+wZ/dBs0ms7drAFuHFkT\npVnv4grB0EtTrIGYZghu1WNrR5CKT7AFm4i1Lb8FLnto9bEmm8EqOQZTaOkO\njmhy81nlkS1L/BizEwdJmaRO4cWqe6gVpBhhBfkZl4TPB/FKtVOJb6029WC7\nanGf546/2oTG68Av3Hyvg2vY+32FaPsz1we9z5JIv7NTUDLA+PEN+qYaE0jU\nF0kcOPmgALyNk+bosNng6KcYQfZd/MU3aylOmDRGspScBf61+mqGTzT1tsup\nQqItVNmbTokKKuomexKutaKu7ngAQMfcCeupzeznAN98blUyt+dA01uZgLBw\nSiPzZgnBVXO/tinZJuIJAkazUiVZt+Olrn6tLfYXZC4ncMU/7Ki93ic/crEf\ngtZbh+B0eGggg+5qNI7iURvFFAH/a6adzVufPf7RYOF66eZ3zrzz1VetEUwm\nFZZSwECbUMOELQYDPlE5BbIEArQysW++EJ89rBmTC93I8ms8TprfdqC8GDTt\n9ko0o9aD4XXI32FP9415urlotfr2iTsDk4uGUbtMnFPwZTEblE3ipXhYH01S\n1pVPWZSttMrTmdRtbCLnN3Jqrshiw18N0yTgoXMZMpK1B1+ggwjp0pDQSj72\nIQT5EIRGKQfRA7skEvghCf4AueH2r30xPeNAPaq/Iu/rmEkPuzdsnbPdRNr1\n1i9/\r\n=ehPM\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n\n\nButtons allow users to take actions, and make choices, with a single tap.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/button\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n```\n\n> _NOTE_: Examples here use the generic `\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n> _NOTE_: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Additional Information\n\n### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n\n> \\*_NOTE_: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n> buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n> directly within the `mdc-button` element.\n> However, the `mdc-button__label` class may become mandatory for all cases in the future, so it is recommended to\n> always include it to be future-proof.\n\n### Sass Mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass Mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`mdc-button-filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass Mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`mdc-button-container-fill-color($color)` | Sets the container fill color to the given color for an enabled button.\n`mdc-button-disabled-container-fill-color($color)` | Sets the container fill color to the given color for a disabled button.\n`mdc-button-icon-color($color)` | Sets the icon color to the given color for an enabled button.\n`mdc-button-disabled-icon-color($color)` | Sets the icon color to the given color for a disabled button.\n`mdc-button-ink-color($color)` | Sets the ink color to the given color for an enabled button, and sets the icon color to the given color unless `mdc-button-icon-color` is also used.\n`mdc-button-disabled-ink-color($color)` | Sets the ink color to the given color for a disabled button, and sets the icon color to the given color unless `mdc-button-icon-color` is also used.\n`mdc-button-density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`mdc-button-height($height)` | Sets custom height for button.\n`mdc-button-shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$mdc-button-density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`mdc-button-horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`mdc-button-outline-color($color)` | Sets the outline color to the given color for an enabled button.\n`mdc-button-disabled-outline-color($color)` | Sets the outline color to the given color for a disabled button.\n`mdc-button-outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `mdc-button-horizontal-padding` is also included with a custom value.\n\n##### Caveat: Edge and CSS Custom Properties\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-button-container-fill-color` mixin, you must pass in an actual color value for support in Edge.\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-button"},"_npmVersion":"lerna/3.14.1/node@v10.17.0+x64 (linux)","description":"The Material Components for the web 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/density":"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/button_5.0.0-canary.afe0dd1bc.0_1573486673930_0.46638750054583356","host":"s3://npm-registry-packages"}},"5.0.0-canary.b4cfdc40b.0":{"name":"@material/button","version":"5.0.0-canary.b4cfdc40b.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"f3985a3e9141b80601259ecd9c85ad3ed31e3dfa","tarball":"https://registry.npmjs.org/@material/button/-/button-5.0.0-canary.b4cfdc40b.0.tgz","fileCount":11,"integrity":"sha512-xRJcXqE4N44sUZfrQMxK14OzXyAyLTfYSWmZMQtpPwiXXOJIv7QKZUutPK3wBCVmq8UI2Qc0wNp17XZml8gNAw==","signatures":[{"sig":"MEUCIQDew5PvPjTtizA3rZq00jMKLr3HUwA9XAJAcqRhv2tibAIgb6xdPdD6SNWaxGLfdaobYX1IlpnWOH4qpkfgriIln30=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":206814,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdzXm7CRA9TVsSAnZWagAAvcgP/09d0DwlSKBERF4v9jVa\nnC7BwpO3H/byofiMq5TwH4J8p6kLthdOpkT6DSvL8kOh1Egg6taOIwCmos5M\nw2e+1fhoXJ98qabkQ/Azm9rQ+Kh1jscU1tHsntvMp0l9KDI8R1VoOVkoXu69\nEiiG+Q8FkTHn9yA5lvKp870XLwYYVPqRj/OMkIwtSBT2WlwFGnf6ZIpH5uhM\nPQYuBY83hCmHxtsRyhiERZioULJ/h9euOGGR9iVXWMMhNJbGLx7SfrIeROTo\nyVdrML3h2dWG9SPswJZOwBussr/3p3DQQTQvlKAk8/9oK7W2UK+OBbrxJgTD\ngAOX7RzPyhZKd41WBfQK45H0mU+HT2DFghg9/2Qv8D6uKzFr299dVFgV5wAE\nqtUrAEIDnher7+HR7e6k0F5tybkdpRekBA+wBeKPp+elZu2CBH7/mA1Ir9N4\nZa8DOpmbeiHRrVQUAke2jXtujEHK4kBkR6deJflAVXeuiNPlJobRfkRQ/uSQ\nl8zNTEqUKhm0MzLhkULF/D9P0+4CCio9Is/Gzm4cNCLjU2hZs+0pZV5+A1q6\nFFclExoepzce/k3Q/clOE5D4Gu4DFH/46eg2rALT+vlKvXhS7wPQOzs0VPZB\nZRa1CftT4QNFMy0ZidVeekzfrq9BonbCIqr9zzVBn29QvRElmoyRupb/VDfk\nagWJ\r\n=I6aK\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n\n\nButtons allow users to take actions, and make choices, with a single tap.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/button\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n```\n\n> _NOTE_: Examples here use the generic `\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n> _NOTE_: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Additional Information\n\n### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n\n> \\*_NOTE_: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n> buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n> directly within the `mdc-button` element.\n> However, the `mdc-button__label` class may become mandatory for all cases in the future, so it is recommended to\n> always include it to be future-proof.\n\n### Sass Mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass Mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`mdc-button-filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass Mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`mdc-button-container-fill-color($color)` | Sets the container fill color to the given color for an enabled button.\n`mdc-button-disabled-container-fill-color($color)` | Sets the container fill color to the given color for a disabled button.\n`mdc-button-icon-color($color)` | Sets the icon color to the given color for an enabled button.\n`mdc-button-disabled-icon-color($color)` | Sets the icon color to the given color for a disabled button.\n`mdc-button-ink-color($color)` | Sets the ink color to the given color for an enabled button, and sets the icon color to the given color unless `mdc-button-icon-color` is also used.\n`mdc-button-disabled-ink-color($color)` | Sets the ink color to the given color for a disabled button, and sets the icon color to the given color unless `mdc-button-icon-color` is also used.\n`mdc-button-density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`mdc-button-height($height)` | Sets custom height for button.\n`mdc-button-shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$mdc-button-density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`mdc-button-horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`mdc-button-outline-color($color)` | Sets the outline color to the given color for an enabled button.\n`mdc-button-disabled-outline-color($color)` | Sets the outline color to the given color for a disabled button.\n`mdc-button-outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `mdc-button-horizontal-padding` is also included with a custom value.\n\n##### Caveat: Edge and CSS Custom Properties\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-button-container-fill-color` mixin, you must pass in an actual color value for support in Edge.\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-button"},"_npmVersion":"lerna/3.14.1/node@v10.17.0+x64 (linux)","description":"The Material Components for the web 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/density":"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/button_5.0.0-canary.b4cfdc40b.0_1573747131577_0.0775416043395798","host":"s3://npm-registry-packages"}},"5.0.0-canary.525989b5d.0":{"name":"@material/button","version":"5.0.0-canary.525989b5d.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"4387aa841db3e4e5bbebdc7c7be1daf26d6c3597","tarball":"https://registry.npmjs.org/@material/button/-/button-5.0.0-canary.525989b5d.0.tgz","fileCount":11,"integrity":"sha512-vnKj0eZfvVA42ZFdwDHdjrKffmpnJNWX2HmOeXzRditeKzXnKo9K91jHUFUZEsq9InSzP11SaLG80VpS8W9ejA==","signatures":[{"sig":"MEUCIQDqlhq2Jb2nGtzYvG4m9vE5I3+tPDU3Fb35vMiHsGMKsAIgIUqVph7LB/qC4K62WlSOPJU0UhPL0eKgCdFfw80gUxY=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":206814,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdzeOzCRA9TVsSAnZWagAA+UoP/2dl4RlHO17xkMisYoJz\nQpZIYx8Uwqp0CYBocmhUPyub6Al6v0ztC4hLuNaj+PXNv8geCmevU4W2rXXD\nHjBjQwQ4RLQPigQMF5vIyC+3mFDrB4ZjOoRHvFNR5ewcws1OL735UaBIncl5\naQPzGCgYYW4h457cEGyIOyHizIeECTQLBLxFgJoQcnnxLd0UaE+LKM6qPld4\nwoeug6YMhUlBqZIalgGAe1ScdGQsyWjhzbmowCpl3+a5lOca3k4zRvNU1Mxt\neOm9NtHLpHH4Ia4NeXJxS0Ce+XJZyd5BzCIiXf8VUWyNFZPk7JiejdN0+G0P\nOvkTyAUeUM4ZniE3DLo3YYzIOPZv64B22C19O4l5LCP6g6J5EDk1/gqQlXtQ\nnhlvcJ+isUW5GCF6sKHqI30OZAdrTMEW2b9pv8dfbr3PdlfxeEWhykTnJST5\nEMyA6YTpwSTxl6y7Dg/ahdjgluRGiOmVAtBwkC9ibuSjHtVLY/vkh0sozUom\nbIJ4Ep64co8U1Pd3hK9KWxlSs9NekgqtoSfJaXj27U18PtDiUDyzAHXNmClI\n0To7J6Htfj14MYihnoYugnZjQRHdjwDsuuY//BuCmd27ZiwEb1PG3GkxnhX2\nrCAj7hYONCBu8bkk32rq8EFG3wDekM1Cah9hfmU9mt8bN/GceLqvcbjojaHB\nL7uc\r\n=GQ7T\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n\n\nButtons allow users to take actions, and make choices, with a single tap.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/button\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n```\n\n> _NOTE_: Examples here use the generic `\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n> _NOTE_: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Additional Information\n\n### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n\n> \\*_NOTE_: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n> buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n> directly within the `mdc-button` element.\n> However, the `mdc-button__label` class may become mandatory for all cases in the future, so it is recommended to\n> always include it to be future-proof.\n\n### Sass Mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass Mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`mdc-button-filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass Mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`mdc-button-container-fill-color($color)` | Sets the container fill color to the given color for an enabled button.\n`mdc-button-disabled-container-fill-color($color)` | Sets the container fill color to the given color for a disabled button.\n`mdc-button-icon-color($color)` | Sets the icon color to the given color for an enabled button.\n`mdc-button-disabled-icon-color($color)` | Sets the icon color to the given color for a disabled button.\n`mdc-button-ink-color($color)` | Sets the ink color to the given color for an enabled button, and sets the icon color to the given color unless `mdc-button-icon-color` is also used.\n`mdc-button-disabled-ink-color($color)` | Sets the ink color to the given color for a disabled button, and sets the icon color to the given color unless `mdc-button-icon-color` is also used.\n`mdc-button-density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`mdc-button-height($height)` | Sets custom height for button.\n`mdc-button-shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$mdc-button-density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`mdc-button-horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`mdc-button-outline-color($color)` | Sets the outline color to the given color for an enabled button.\n`mdc-button-disabled-outline-color($color)` | Sets the outline color to the given color for a disabled button.\n`mdc-button-outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `mdc-button-horizontal-padding` is also included with a custom value.\n\n##### Caveat: Edge and CSS Custom Properties\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-button-container-fill-color` mixin, you must pass in an actual color value for support in Edge.\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-button"},"_npmVersion":"lerna/3.14.1/node@v10.17.0+x64 (linux)","description":"The Material Components for the web 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/density":"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/button_5.0.0-canary.525989b5d.0_1573774258935_0.6464869859437339","host":"s3://npm-registry-packages"}},"5.0.0-canary.7084b403a.0":{"name":"@material/button","version":"5.0.0-canary.7084b403a.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"9098d2596a16779e584a37cc77f6977025291c61","tarball":"https://registry.npmjs.org/@material/button/-/button-5.0.0-canary.7084b403a.0.tgz","fileCount":11,"integrity":"sha512-bqsXC8hhKvRyR0/qi2b46CJJHpMmCBox32wf4qE2Nk8hLMXei6JMN02XMNJJmnTcQ2gnOaj2ZwWR8IDESZJq0w==","signatures":[{"sig":"MEUCIQDmD8EVkRsFSvzASNaPEaCro0cntnrnsP2xnzJk/4HYDwIgaztVKiTG9uhN1EyAeJhKUTY0EJquAWKCTsrZBsNIg5g=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":206814,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdzfn9CRA9TVsSAnZWagAAtTAQAIIvnRyKKROFFsjbx9wM\nOdkLJhw3Uxcck9KdZse00XyQZP//ijnnfBFH/XvWw2JuVwhJ/32xu2CAWCTC\nG6JmOEKOZqa3Eyvreb00QZfNGthjpcLSeAtQBFTIHNjaPmFMGWilFfa3JXbe\nMFHZA4J6RmTVIpxB7FE7GWb+Kimpp8ra/Gaj3715zpndZC40zA8AloNJhx2/\nvlpEGT1wMNRam5jjabGSDFYHUdpAP9CzOkWxlUfAo19vp7J+CXHRq5HzS8af\nhg5gCiouzcVrjRXboTHyfc5RgPxPLGqLfF8luoJnLoLaTXWCvM9oVucZ6sY/\nqt7Nmk2sphvxAVvilAEhFPL6mqDt7xSm5F8Mdi2By5oGGmYueCIpnrSzYBWL\nuEJWBvo3J7Vf48ByJCl79O8sLDkepPev71wardw+YSQDhLVdleXo7diPQXM2\nhn0oDl7/g8vHAWdr1NBrkK69fNp3w0KDAmXzQrMs0n3z9ynA/VZvgvhgxPac\n/dNrXh61SWBeOpMWrrM/V7VS9B0mZYZTOWDTvx+4+ngvOpsJ1YNL9Ar0yvpl\n4D1FbMJz57+GZLMNI6oYjzR5IMHecME8N+O0srKbqDNER5FRSh645hoG94VL\nmV47inzwvcSkIIyMZByBBIp2vruy+MiRT8qlyeYSzCjYieVEK7hxyK9CewOB\nPMKv\r\n=fLTI\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n\n\nButtons allow users to take actions, and make choices, with a single tap.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/button\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n```\n\n> _NOTE_: Examples here use the generic `\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n> _NOTE_: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Additional Information\n\n### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n\n> \\*_NOTE_: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n> buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n> directly within the `mdc-button` element.\n> However, the `mdc-button__label` class may become mandatory for all cases in the future, so it is recommended to\n> always include it to be future-proof.\n\n### Sass Mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass Mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`mdc-button-filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass Mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`mdc-button-container-fill-color($color)` | Sets the container fill color to the given color for an enabled button.\n`mdc-button-disabled-container-fill-color($color)` | Sets the container fill color to the given color for a disabled button.\n`mdc-button-icon-color($color)` | Sets the icon color to the given color for an enabled button.\n`mdc-button-disabled-icon-color($color)` | Sets the icon color to the given color for a disabled button.\n`mdc-button-ink-color($color)` | Sets the ink color to the given color for an enabled button, and sets the icon color to the given color unless `mdc-button-icon-color` is also used.\n`mdc-button-disabled-ink-color($color)` | Sets the ink color to the given color for a disabled button, and sets the icon color to the given color unless `mdc-button-icon-color` is also used.\n`mdc-button-density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`mdc-button-height($height)` | Sets custom height for button.\n`mdc-button-shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$mdc-button-density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`mdc-button-horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`mdc-button-outline-color($color)` | Sets the outline color to the given color for an enabled button.\n`mdc-button-disabled-outline-color($color)` | Sets the outline color to the given color for a disabled button.\n`mdc-button-outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `mdc-button-horizontal-padding` is also included with a custom value.\n\n##### Caveat: Edge and CSS Custom Properties\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-button-container-fill-color` mixin, you must pass in an actual color value for support in Edge.\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-button"},"_npmVersion":"lerna/3.14.1/node@v10.17.0+x64 (linux)","description":"The Material Components for the web 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/density":"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/button_5.0.0-canary.7084b403a.0_1573779964857_0.8479480926557252","host":"s3://npm-registry-packages"}},"5.0.0-canary.3cbee6dac.0":{"name":"@material/button","version":"5.0.0-canary.3cbee6dac.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"0f428db126fe64bc3f38cde3ef6b293253d9d43b","tarball":"https://registry.npmjs.org/@material/button/-/button-5.0.0-canary.3cbee6dac.0.tgz","fileCount":11,"integrity":"sha512-Bf6NueY4Lc5tyrolAAKFDnI0ukkp2Y6VQ4wYo8nIMZgc2xPRM5u8ty3w1AEKHPasZBRUQsAAbSO06XMXS9HijQ==","signatures":[{"sig":"MEQCICvw5KV6v0xUKLH4PnM9hN0uAMwUwTfe63zU6lI6s3h1AiAygt039HGsXrbHpfB2QnaNxPwhHsPuKUbUlqlyDRFK1w==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":218223,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdzyeeCRA9TVsSAnZWagAAYyoP/jy4Y3l54vTdxKHZGjTI\nzgJrag0NNWQ+ftyi2MN8pHew7XiBdreia16VWMO0CVtY28OA4bfoX1BG+jM6\ncEcMfk6bcEBYL1UkGZWPPiLBDFF2fZfC/vJc9VpTvQiv3BKH2JANfr17zqBA\np3YNp8rNsNK6psv0kUcG4H0NbeZq88LxsxXE2+S66mbohbjQ7+6yOknfORDU\nkhUoTq6k5T0+jhM/Muv52bduzuHUZt4Y5URE4ye2rgJGOV6h+eNfXBxD7j+4\nZVuLpejnDzpFQSH5moUhiHaDCXmRJOCv5FvIj6Wwskukk9ZUcnNe4QCOnpNn\nBCjH7Q9uTnrtBlcyvqUy9qqVGDONVDgExg7q43rs0qV/116OWSPnxuLMXRyx\n3gO1crhtKjHVRb/mMhoA7dM4+OVC5cs/VrDsnzXQsF0TZ5TeQllyIgzo/MUw\n8y2Um+O4+s444Gsf6b9Cd5i6HcsJfM4a2Vjl98B6t/z0bewKvyDzrXBGnq/c\nGe13b8uwfNO1Ndw/roA0Kq08UoqhHDHNkRZ2tvS9aPEW+svNk8TBKhpLeLbw\nYMfU2DfG36qIVtCdthm9BTnRJveCXHKJBRyNaopnRQ54syF+55eVVs+YiKsZ\nZKwVsWt07lTVdC3ph+irk1XbBrHTT9kSOrcc3j3lVL2gPlR51FgeQSz4Rmex\ncJFS\r\n=XhhX\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n\n\nButtons allow users to take actions, and make choices, with a single tap.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/button\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n```\n\n> _NOTE_: Examples here use the generic `\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n> _NOTE_: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Additional Information\n\n### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n\n> \\*_NOTE_: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n> buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n> directly within the `mdc-button` element.\n> However, the `mdc-button__label` class may become mandatory for all cases in the future, so it is recommended to\n> always include it to be future-proof.\n\n### Sass Mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass Mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`mdc-button-filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass Mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`mdc-button-container-fill-color($color)` | Sets the container fill color to the given color for an enabled button.\n`mdc-button-disabled-container-fill-color($color)` | Sets the container fill color to the given color for a disabled button.\n`mdc-button-icon-color($color)` | Sets the icon color to the given color for an enabled button.\n`mdc-button-disabled-icon-color($color)` | Sets the icon color to the given color for a disabled button.\n`mdc-button-ink-color($color)` | Sets the ink color to the given color for an enabled button, and sets the icon color to the given color unless `mdc-button-icon-color` is also used.\n`mdc-button-disabled-ink-color($color)` | Sets the ink color to the given color for a disabled button, and sets the icon color to the given color unless `mdc-button-icon-color` is also used.\n`mdc-button-density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`mdc-button-height($height)` | Sets custom height for button.\n`mdc-button-shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$mdc-button-density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`mdc-button-horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`mdc-button-outline-color($color)` | Sets the outline color to the given color for an enabled button.\n`mdc-button-disabled-outline-color($color)` | Sets the outline color to the given color for a disabled button.\n`mdc-button-outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `mdc-button-horizontal-padding` is also included with a custom value.\n\n##### Caveat: Edge and CSS Custom Properties\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-button-container-fill-color` mixin, you must pass in an actual color value for support in Edge.\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-button"},"_npmVersion":"lerna/3.14.1/node@v10.17.0+x64 (linux)","description":"The Material Components for the web 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/density":"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/button_5.0.0-canary.3cbee6dac.0_1573857181608_0.7131047602725673","host":"s3://npm-registry-packages"}},"5.0.0-canary.591a6ad44.0":{"name":"@material/button","version":"5.0.0-canary.591a6ad44.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"3d12ded26dad97eaea11e6f5f61569cbe656a462","tarball":"https://registry.npmjs.org/@material/button/-/button-5.0.0-canary.591a6ad44.0.tgz","fileCount":11,"integrity":"sha512-eG1bjpEN7xLfczt9852CQHu4TvGSSul3RExQjA5uxPQkhTwZ0IZOLjudj0vOPS9iQ0lG8v84lG0VqEy1dkapTA==","signatures":[{"sig":"MEQCIHp09D8BcmN8vMIn4z6/i3Wxu87ZqMk5WWTxG0U4l92NAiAP1SeWpsieKQWbJnDbuy7DskIRGzrSzT/R6qHREhYB5g==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":218223,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJd0y3dCRA9TVsSAnZWagAAsxAP/RflC7e4tNLHC3cfhUqV\ny2ArONgzA/Xr9+XbuQ0WRnpqT1mqCZAq1NKlqyfj6lwUsIjlqH4j90kv5Sy6\n0YQpLBHm9JHpdbC1VluN0DLms9dhLQQvOqqGC0Y7fnSH+zKSg2es35nVn3JI\nceMjdLTHf6wIhG+l/tOXpF+yQd0Wt8vNXYtfL2nYtoDYV3LTGR5nGflwgbQr\nrBs0lAXlY/MDN/pznYUMHqUaSckweM1Fknoumuf/LStN2iAJqjG5Vs1wxgBl\nn/nS55t7Jlkxya/08D9QxBjC/36gD3kP+KvmAp5NyCw0retz3bBLnTxy1xpj\nb7qjQuivBswQBolR1Rty1kCdz4Tfp1E+bXl14XRDeT/9s/43OEEECMeQJel/\nODKxzwqq7Me9OtSeF9JJMFzHb00YFCO2wmt2sRcSytGmcdG/AGxxZfY14TR+\n2I3yOl+OoWGkTHqRouuZffNps08514eYGrs0U4ohgu+t3gevXufGtnhiAOzr\ncdMLnR44JehRPYsLdEzZ7qqnB8xmr4ME6sxGKhuZlcbmYj0QQEZX3ugtKu6/\nUGt+o0u8cGTbHyKg+eu5ZnLb1EDciGSN+r1nQBBY452dhbMRTDWw5pClVXQS\n7Df4ZQWPPOg+B/5ZFlD1aeBHluUHC/4vWEeALp4CaD1RUIyXk29bNf6VWk2r\nJGU+\r\n=IUUU\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n\n\nButtons allow users to take actions, and make choices, with a single tap.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/button\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n```\n\n> _NOTE_: Examples here use the generic `\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n> _NOTE_: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Additional Information\n\n### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n\n> \\*_NOTE_: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n> buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n> directly within the `mdc-button` element.\n> However, the `mdc-button__label` class may become mandatory for all cases in the future, so it is recommended to\n> always include it to be future-proof.\n\n### Sass Mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass Mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`mdc-button-filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass Mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`mdc-button-container-fill-color($color)` | Sets the container fill color to the given color for an enabled button.\n`mdc-button-disabled-container-fill-color($color)` | Sets the container fill color to the given color for a disabled button.\n`mdc-button-icon-color($color)` | Sets the icon color to the given color for an enabled button.\n`mdc-button-disabled-icon-color($color)` | Sets the icon color to the given color for a disabled button.\n`mdc-button-ink-color($color)` | Sets the ink color to the given color for an enabled button, and sets the icon color to the given color unless `mdc-button-icon-color` is also used.\n`mdc-button-disabled-ink-color($color)` | Sets the ink color to the given color for a disabled button, and sets the icon color to the given color unless `mdc-button-icon-color` is also used.\n`mdc-button-density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`mdc-button-height($height)` | Sets custom height for button.\n`mdc-button-shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$mdc-button-density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`mdc-button-horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`mdc-button-outline-color($color)` | Sets the outline color to the given color for an enabled button.\n`mdc-button-disabled-outline-color($color)` | Sets the outline color to the given color for a disabled button.\n`mdc-button-outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `mdc-button-horizontal-padding` is also included with a custom value.\n\n##### Caveat: Edge and CSS Custom Properties\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-button-container-fill-color` mixin, you must pass in an actual color value for support in Edge.\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-button"},"_npmVersion":"lerna/3.14.1/node@v10.17.0+x64 (linux)","description":"The Material Components for the web 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/density":"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/button_5.0.0-canary.591a6ad44.0_1574120925223_0.7291262765272011","host":"s3://npm-registry-packages"}},"5.0.0-canary.5729943ba.0":{"name":"@material/button","version":"5.0.0-canary.5729943ba.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"2337f01b65852823e6fc474347605704ab14ce66","tarball":"https://registry.npmjs.org/@material/button/-/button-5.0.0-canary.5729943ba.0.tgz","fileCount":11,"integrity":"sha512-SqyCkeBgES+pgkiIFqCKMC6cW3XeKqM5ReakuV7oHhvX57wcb/xZmFONWWxNGmnlOuXFXzmbvgnEfwlpdk/O8A==","signatures":[{"sig":"MEYCIQCXS2rlGyyTwoEg2jaqh1OpATtI+I6NCQyMZ9swZfXpwgIhAIbJWDxp0Uq74OX8q0w5VGuNYAEdbj65LgIuWZw0/Mm2","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":218223,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJd1MzoCRA9TVsSAnZWagAARLUP/As/YoD18TEuvzq6HoHr\nZCTXSZy152VkDMmkykWtLsFi9LT0H4mC2N8D2pRuCmr+TkpEnJIbTfwJBWZv\nNcPIgbR8NxrWAXSDisYaWlayW5tZeQg1/8b5BZq9Y40gBkNivLMw56FdZTnR\ndlZFNFLKEr5tXD56U2YOjp+f+bOAl2u8tl5PgY44xMv5Rvx/1nMkhsmjYIyc\nML47EwPqcsaa+cHRKw/1LDWStzXKaYTYA0ALhgZe9SZeoaBIK9ev9hidYCQG\nYDP6p161n/gVx2+rP29jE0qGli5+UdtpaZ0uB8rhPAcoBj2ZDeuaH5L11JWI\nxr0oTZ74t/as326Kq6bWTrC00yT2FRzSWfoDh/u65VmT9pVdtzfkO15fjmqX\nN+cOJoFSCvCCE2t4b2WRnJHLqrs5Uc8Onlsbj7xzEaPyduerKWuUAx/PM0pe\n5aDA/h7d0T0lSjsyHN/HWoycgAWgp5uiHkytS8XLjNmVMGIzCnmReE7GZiMo\n0CyYj2wz/J0IjPdlBhPTZrBCEGM1F+HWv/RCEY978NqGOp2FU1X7uzpqKBJn\nZ5rbHpdtmveT+YIQKuofAOebgVHYb8IiqIKtQ2ORxdR2R9PubllKnYk3tG+I\nTWLon4SIAGWLnivg5GT/MJzAkZ1loSvOXdfXhMN/P/91Ku65GzRAhlOyIQrU\nWU+3\r\n=YwyV\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n\n\nButtons allow users to take actions, and make choices, with a single tap.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/button\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n```\n\n> _NOTE_: Examples here use the generic `\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n> _NOTE_: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Additional Information\n\n### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n\n> \\*_NOTE_: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n> buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n> directly within the `mdc-button` element.\n> However, the `mdc-button__label` class may become mandatory for all cases in the future, so it is recommended to\n> always include it to be future-proof.\n\n### Sass Mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass Mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`mdc-button-filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass Mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`mdc-button-container-fill-color($color)` | Sets the container fill color to the given color for an enabled button.\n`mdc-button-disabled-container-fill-color($color)` | Sets the container fill color to the given color for a disabled button.\n`mdc-button-icon-color($color)` | Sets the icon color to the given color for an enabled button.\n`mdc-button-disabled-icon-color($color)` | Sets the icon color to the given color for a disabled button.\n`mdc-button-ink-color($color)` | Sets the ink color to the given color for an enabled button, and sets the icon color to the given color unless `mdc-button-icon-color` is also used.\n`mdc-button-disabled-ink-color($color)` | Sets the ink color to the given color for a disabled button, and sets the icon color to the given color unless `mdc-button-icon-color` is also used.\n`mdc-button-density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`mdc-button-height($height)` | Sets custom height for button.\n`mdc-button-shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$mdc-button-density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`mdc-button-horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`mdc-button-outline-color($color)` | Sets the outline color to the given color for an enabled button.\n`mdc-button-disabled-outline-color($color)` | Sets the outline color to the given color for a disabled button.\n`mdc-button-outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `mdc-button-horizontal-padding` is also included with a custom value.\n\n##### Caveat: Edge and CSS Custom Properties\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-button-container-fill-color` mixin, you must pass in an actual color value for support in Edge.\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-button"},"_npmVersion":"lerna/3.14.1/node@v10.17.0+x64 (linux)","description":"The Material Components for the web 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/density":"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/button_5.0.0-canary.5729943ba.0_1574227176503_0.2921456313610893","host":"s3://npm-registry-packages"}},"5.0.0-canary.e89750dc7.0":{"name":"@material/button","version":"5.0.0-canary.e89750dc7.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"0d8841048b758af85680502694e0b52cf595f048","tarball":"https://registry.npmjs.org/@material/button/-/button-5.0.0-canary.e89750dc7.0.tgz","fileCount":11,"integrity":"sha512-nSs8E+hJ8iDKT7z/AA+l78QhhZc7WF3kQhATaVshiAuyakUQUfLu1B2mdEcUtjdT8P1uFqfcxjVY+pRURcDlBA==","signatures":[{"sig":"MEUCIDvoU+I0pCBM65F9DOXGxu5U9vIeotuQDz66Ftp8oPwrAiEAj3LDzViAMBOjDg83IKHJgAPYzEIwWB4JiTFSB91ns7Y=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":199338,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJd3dr2CRA9TVsSAnZWagAA/u0QAIFGVmYiiFH1bz6JOAeg\n8CTRdExO1zJ17msjpMKq4h6eBtELf8YX9NbzEJJfqgiBLlWVgW89P/XC/3J2\nUwO2z6ajYVUJYx6FwXncy3+WrbQBGNdyDZ5ArjvoLjpztlkbPCNxa1Yf4ske\nyCeaJNxnAQMTpvEnE3M0A9s+t6QUSTKa+DluAA8fBBbXQ9hQHNLWU49xBcJn\nwRSDED4iHoVAnYI5HS0TOeYN73UFNugPaTRtBOIbA7DUjEaiBlCYaE1Z5dDL\ngg3vwbJh7e/wAnI1VthIzsH/Hn70Y4gWR/bUkPe/Sv0eVjXbJ7NUynmVZ/xa\nZrpVqBeQvjpb/JEirLdukY852De/rMpJY7hDG1A/wWeP/BkvCcwX3ekocynH\niyLTxBPsoqDHglWpJSiO969UoAbq08lV0uQKZZY2QAmV17IrCW13lFtXk+/7\nS99QweDs8qDTuqqyn1Vx197pbGwiNP+vF19k2g8pNnGj6xPoF8mg1XRhmf6d\nyl0+im/qg2R7scpmmoHo2XZkgo76ZIqvtE5ECCP5opDBW285omYq059CAdpH\nfjqIBipvy+vYJ0npmxQ9yyq15I6Na6yyt6bpnKGfYIEVr+C5VwvMYdVfphUm\nKiNVlIanklgsyJvQN5SpoRNj/sXL7s2IBW9jtNEJTRBAQrQafTmjodPMTcZ4\nYRnn\r\n=G0g9\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n\n\nButtons allow users to take actions, and make choices, with a single tap.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/button\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n```\n\n> _NOTE_: Examples here use the generic `\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n> _NOTE_: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Additional Information\n\n### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n\n> \\*_NOTE_: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n> buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n> directly within the `mdc-button` element.\n> However, the `mdc-button__label` class may become mandatory for all cases in the future, so it is recommended to\n> always include it to be future-proof.\n\n### Sass Mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass Mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`mdc-button-filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass Mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`mdc-button-container-fill-color($color)` | Sets the container fill color to the given color for an enabled button.\n`mdc-button-disabled-container-fill-color($color)` | Sets the container fill color to the given color for a disabled button.\n`mdc-button-icon-color($color)` | Sets the icon color to the given color for an enabled button.\n`mdc-button-disabled-icon-color($color)` | Sets the icon color to the given color for a disabled button.\n`mdc-button-ink-color($color)` | Sets the ink color to the given color for an enabled button, and sets the icon color to the given color unless `mdc-button-icon-color` is also used.\n`mdc-button-disabled-ink-color($color)` | Sets the ink color to the given color for a disabled button, and sets the icon color to the given color unless `mdc-button-icon-color` is also used.\n`mdc-button-density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`mdc-button-height($height)` | Sets custom height for button.\n`mdc-button-shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$mdc-button-density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`mdc-button-horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`mdc-button-outline-color($color)` | Sets the outline color to the given color for an enabled button.\n`mdc-button-disabled-outline-color($color)` | Sets the outline color to the given color for a disabled button.\n`mdc-button-outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `mdc-button-horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.14.1/node@v10.17.0+x64 (linux)","description":"The Material Components for the web 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/density":"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/button_5.0.0-canary.e89750dc7.0_1574820597363_0.9701355102440603","host":"s3://npm-registry-packages"}},"5.0.0-canary.3e560b33a.0":{"name":"@material/button","version":"5.0.0-canary.3e560b33a.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"cfc935627414196a45fc4714ac3c120ec26f0af8","tarball":"https://registry.npmjs.org/@material/button/-/button-5.0.0-canary.3e560b33a.0.tgz","fileCount":11,"integrity":"sha512-5pBQvnnJ7Z1OiYYTFcr8/Zoqr+htLQdciOC8bSPuwsrn2Pz1jR9pbZ8VRDBd6wj37rEWd/7Ckg+1MA3vBwqVGw==","signatures":[{"sig":"MEQCIE4efznNxPWGrxnwqe7WM8As7RQoL2S2nS67EUbuvCFOAiBprGFQEQ67ptGRe0tynsY2w6vB0aE3F6sbSDLt1gvnew==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":199338,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJd3dsmCRA9TVsSAnZWagAAMm8P/RDcdkdE/LK7UyXmi/Mg\nhB01CQAgHR78AyeVduJxtdh6O4tMpLkmnBJHd5vwBsrtcWlmJSFfmOzk6LJS\n1rN+i7p+7t0CfrhF44tqdbrlxhyCYVc98b1ITImNAPddZNdWwP9qV24fQEzZ\nvyWwYPblmnz4k0vr4LlI9/XasyIMT6b0kuYPvPYy3JCRlcIarFhz0VI5NrEy\nB1mW1NmDgelwoMbciYbmBfW07NY6sBmOu+zo7l5vUCby6RUdl7oOU4CvlE9J\n2N0yu25WDaL/fnbSdfdVleGJLqqKGl1FB5EpiHKoIo8P9hnRd7UjjoGjBD+O\nbf642U41YftH2vQfqLdJZuoUcg6iQ7uq4IP1XLE1gE7tCi297TbYNiXgOuTW\nISu4FCSc8NevnMAKvU4LgM3qaq+US8qVWP0IgJkuapHOZuLijgGbWfC78zC9\nEgwoRHQ/cKFLHX4I+8HOGRiP9BVGVYn6ayyF151RqkoIpq2Qu953nXNTeTQh\nQbknVEe5i9dSHNyszjGGKAXf8haTDaVgn96jTwbAQxY7LFIvlt7N2IYVrRVP\nAvu1pM9BAPu8x1uU/i0zcr3x0MzMAkYHLkcBy0y4ZYIQqReNJbjgibM/MSqF\nVP2COGOp/D/3vJZTJ58761QUT2Z3LT1Bh2LWFmB4shjIPjkBckzQ8XN5CflJ\n3SGh\r\n=CuO4\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n\n\nButtons allow users to take actions, and make choices, with a single tap.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/button\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n```\n\n> _NOTE_: Examples here use the generic `\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n> _NOTE_: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Additional Information\n\n### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n\n> \\*_NOTE_: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n> buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n> directly within the `mdc-button` element.\n> However, the `mdc-button__label` class may become mandatory for all cases in the future, so it is recommended to\n> always include it to be future-proof.\n\n### Sass Mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass Mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`mdc-button-filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass Mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`mdc-button-container-fill-color($color)` | Sets the container fill color to the given color for an enabled button.\n`mdc-button-disabled-container-fill-color($color)` | Sets the container fill color to the given color for a disabled button.\n`mdc-button-icon-color($color)` | Sets the icon color to the given color for an enabled button.\n`mdc-button-disabled-icon-color($color)` | Sets the icon color to the given color for a disabled button.\n`mdc-button-ink-color($color)` | Sets the ink color to the given color for an enabled button, and sets the icon color to the given color unless `mdc-button-icon-color` is also used.\n`mdc-button-disabled-ink-color($color)` | Sets the ink color to the given color for a disabled button, and sets the icon color to the given color unless `mdc-button-icon-color` is also used.\n`mdc-button-density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`mdc-button-height($height)` | Sets custom height for button.\n`mdc-button-shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$mdc-button-density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`mdc-button-horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`mdc-button-outline-color($color)` | Sets the outline color to the given color for an enabled button.\n`mdc-button-disabled-outline-color($color)` | Sets the outline color to the given color for a disabled button.\n`mdc-button-outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `mdc-button-horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.14.1/node@v10.17.0+x64 (linux)","description":"The Material Components for the web 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/density":"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/button_5.0.0-canary.3e560b33a.0_1574820646116_0.6268240508254457","host":"s3://npm-registry-packages"}},"5.0.0-canary.7fd17ce5e.0":{"name":"@material/button","version":"5.0.0-canary.7fd17ce5e.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"8a8cdb816a7d069d3528694f74eaf14edab5bdb7","tarball":"https://registry.npmjs.org/@material/button/-/button-5.0.0-canary.7fd17ce5e.0.tgz","fileCount":11,"integrity":"sha512-EThnC+3OJtWziywkCQh7pj9LNewovWK6rJxT2DrPFuKw+yzmtPItvHuheRx3cAKAAMPMh+4yLTkrL6QcjlZFuA==","signatures":[{"sig":"MEQCIEIVLcVBA9RhlO6e6zuH88pB6yb9eZWhfoqIuCinG09NAiBLM4/nBj+QxAWZp47Y6yxp/q5Nwtel9e75rBLIe98azg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":199338,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJd3ds5CRA9TVsSAnZWagAAL20P/jD1VX0URHVzpqkcQwTb\n5ZGG2TuBfzXXyHYD6MzI5JVBm9Ul9QuygdI5I3ZN6CwrAbsyCASR99hwFR+n\nYfDgYfux+RTMpJaue75RoLKDkyclO95wCPiUjSMUpa5RX2RU8FkJ9z35p94e\nrMNHXgNRvqVfTrrfC7xkz4XdKYPQnbceDU2q2P7yLfyJUU7KYr1T4teuH5MW\njtz+DAuNgY0kpuxAH+plLbfVsby12fXmZ8K+cyLNbEhMKwSRGTbVNZ46o8Me\n6Gn/jjngLRZ4+yHGKfrZgTTQYMFgqUMg4pMcY9Rww0l49vhglrALtivi03Px\nPjnNqQzy4FluaMnDuX24WIayObTgqC6UwQnLne+ZvTFVs85P2XYKL6PUkeF7\nzADpNADELDR+weUoc7l0hGFmWJ/JXPyBW3fiovwR7G9RhBEvrD6HZeY24CQv\nG8mzZ8vl7Yb2hKLsSiNtvUPd+286S2+OZnKmTHeY1uF88ewv0d6Si4mNt9F2\nPMSJcRFUA+lu5l8Tvrr5mG31GPnOzmfusCCluS0rkbCm50hvvFTuuxLUEbOX\nR2c38YBHSjiz7kwzKNg1yjjuFGh/yirEOorgoJWx91WWGGNJAKT2mPQgXuwg\n8EOPQyFd2wtzAncJzyQfvvtwGaGaXMyPk07qAdZ7g4afzqymiR0rB6Y8MmCH\nuGt+\r\n=YJ0C\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n\n\nButtons allow users to take actions, and make choices, with a single tap.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/button\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n```\n\n> _NOTE_: Examples here use the generic `\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n> _NOTE_: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Additional Information\n\n### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n\n> \\*_NOTE_: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n> buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n> directly within the `mdc-button` element.\n> However, the `mdc-button__label` class may become mandatory for all cases in the future, so it is recommended to\n> always include it to be future-proof.\n\n### Sass Mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass Mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`mdc-button-filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass Mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`mdc-button-container-fill-color($color)` | Sets the container fill color to the given color for an enabled button.\n`mdc-button-disabled-container-fill-color($color)` | Sets the container fill color to the given color for a disabled button.\n`mdc-button-icon-color($color)` | Sets the icon color to the given color for an enabled button.\n`mdc-button-disabled-icon-color($color)` | Sets the icon color to the given color for a disabled button.\n`mdc-button-ink-color($color)` | Sets the ink color to the given color for an enabled button, and sets the icon color to the given color unless `mdc-button-icon-color` is also used.\n`mdc-button-disabled-ink-color($color)` | Sets the ink color to the given color for a disabled button, and sets the icon color to the given color unless `mdc-button-icon-color` is also used.\n`mdc-button-density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`mdc-button-height($height)` | Sets custom height for button.\n`mdc-button-shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$mdc-button-density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`mdc-button-horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`mdc-button-outline-color($color)` | Sets the outline color to the given color for an enabled button.\n`mdc-button-disabled-outline-color($color)` | Sets the outline color to the given color for a disabled button.\n`mdc-button-outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `mdc-button-horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.14.1/node@v10.17.0+x64 (linux)","description":"The Material Components for the web 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/density":"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/button_5.0.0-canary.7fd17ce5e.0_1574820664988_0.3072273546020814","host":"s3://npm-registry-packages"}},"5.0.0-canary.ec729683b.0":{"name":"@material/button","version":"5.0.0-canary.ec729683b.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"ae6fb47f774e6650203b81dae3f1ae1bca627500","tarball":"https://registry.npmjs.org/@material/button/-/button-5.0.0-canary.ec729683b.0.tgz","fileCount":11,"integrity":"sha512-UGv2p3uqNSZiWUOpC1gVAbH/MRiaDozJ7gFqyYGV4Y7f9lQPKHf1r3PFsY42T6Mv6pGkDDL3uJgFAgmoVDFaFQ==","signatures":[{"sig":"MEQCIDxHW998GMbe1l8SzaUNRuDptTBthN1DF/3lwWf46vzPAiB6LU/wEReOBSUXq56Wbecwf5xHhG4HVgaUtFGxCXWPuQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":199338,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJd3pxgCRA9TVsSAnZWagAAICAP/iXYeP+QqJ0iFj0j/72o\nBgwlJ//OkiUx7T3yzup0ddtV6lhL3LVZzcRTAugKtzy14s9P78b4Rcwz1w6E\nnOrdPg6xSwt4GVmd+ww1h7xLhVpGffdeQ4+uINqzqL2VT1yemTQaH3PlNaJU\ngQ9gTOh6Ydhvgq6RzD5it3vvygbr+Q9OBogF2oqP/fchENYFSaYbuenXy6zK\nDhN1VxEe6HdixIB11TTmZkXljRT58ZXW0SvKPg6oGdTKYG70N4t4yf2/8Taz\nTqPCIJuneV+xqo0YKYAqjnZdI84c4j3a3AbFZoJkAny4GCL+l6AH8TaT+CIX\nSKGp7Ab5LeQMw6aqy96AzB6QkpXQycRLomOnzD8mfA5wC8Ov59XSqHAQ4BU8\nFCgkOD2W+QRhurPEvmRiYdB2rcB65uxIYh8DR1a1LtZU55unitOXx7Qz/S7N\nofita05ImRvPg1B7miLkNYH/q+s2Eb4ttBU/z7fqUJsDiUV/AA9bV8G7gXL5\nT4WPc1jmJTCgAWbKtSYtMetUvKlcyJUeVzh1JEtuztLdQnLIOKajnY7gyqN0\nPri0b6+F9xJj83xthznlgHt4RNB5h7dkkCLcV0naDVnWG8DkvhpN8FEDi2vY\nabUjWj9LkAg/wDyMY7yV5krmQYz0qYXAnLrQXjKFy5QmN9mDDafi7Xpua5JC\ngyFz\r\n=rE8L\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n\n\nButtons allow users to take actions, and make choices, with a single tap.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/button\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n```\n\n> _NOTE_: Examples here use the generic `\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n> _NOTE_: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Additional Information\n\n### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n\n> \\*_NOTE_: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n> buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n> directly within the `mdc-button` element.\n> However, the `mdc-button__label` class may become mandatory for all cases in the future, so it is recommended to\n> always include it to be future-proof.\n\n### Sass Mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass Mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`mdc-button-filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass Mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`mdc-button-container-fill-color($color)` | Sets the container fill color to the given color for an enabled button.\n`mdc-button-disabled-container-fill-color($color)` | Sets the container fill color to the given color for a disabled button.\n`mdc-button-icon-color($color)` | Sets the icon color to the given color for an enabled button.\n`mdc-button-disabled-icon-color($color)` | Sets the icon color to the given color for a disabled button.\n`mdc-button-ink-color($color)` | Sets the ink color to the given color for an enabled button, and sets the icon color to the given color unless `mdc-button-icon-color` is also used.\n`mdc-button-disabled-ink-color($color)` | Sets the ink color to the given color for a disabled button, and sets the icon color to the given color unless `mdc-button-icon-color` is also used.\n`mdc-button-density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`mdc-button-height($height)` | Sets custom height for button.\n`mdc-button-shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$mdc-button-density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`mdc-button-horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`mdc-button-outline-color($color)` | Sets the outline color to the given color for an enabled button.\n`mdc-button-disabled-outline-color($color)` | Sets the outline color to the given color for a disabled button.\n`mdc-button-outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `mdc-button-horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.14.1/node@v10.17.0+x64 (linux)","description":"The Material Components for the web 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/density":"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/button_5.0.0-canary.ec729683b.0_1574870112517_0.5919372339990714","host":"s3://npm-registry-packages"}},"5.0.0-canary.b8bc4a26e.0":{"name":"@material/button","version":"5.0.0-canary.b8bc4a26e.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"16ed82b6b9c23c46b782f84591d4c361c80d74ab","tarball":"https://registry.npmjs.org/@material/button/-/button-5.0.0-canary.b8bc4a26e.0.tgz","fileCount":11,"integrity":"sha512-nISXLdFM7MVMkW9rW8RBVWQIxulN6r+RT3xsT+4wPIFV7D7B3ATNyOfHmlSpTEKrMwvdlf8VvShKt3WxPPnIUQ==","signatures":[{"sig":"MEQCIH/EaRTPueXNcMKOWyAzuf62JVvYd22IJXp0sYkSNlXBAiBzxg1ewxXw3jbP/+vOs/uyE0mc08tlcjl3wOYr6OHTxw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":199338,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJd3supCRA9TVsSAnZWagAA5WIP/1kG6mfvCXirW8j7Zt55\nTLZwH9ZhN7aTLo1u6ASh0glhHVVn7xFsCGxHHlo2ZXft/7RD0ql0lEOD1Cn6\nReXwgPBzjzgaK9oUqbojv0ZwHUjiiGb+ShyHhg9zuZZAFHtzosr0n1FBM0uj\nPHqPuTkV4jPqBnVcgumk4pM1B/Xv+8cLFattHTz89CFg8OCBVng7cZ2v1NW0\n9wy3XmHMqTaMmSy9uPr4VL5wjHhxhMi+nd0kwXAdpDPsv7dT6gkKD1i/dgcL\noVvkZ1N0rwZdIFy93qZyyyD28oeo2tTC0xNBydAwIs01BcwFEtyXGFmlU6eB\nXMdjxe0NNejpocox/mOQHgVsfftADoIa6S59BLXCCcQUAlHJVtm2Nox434ih\n6GY/s3aIYi44RJtIrMtmLEGDenAXxTb+6RAsU2K/f/Vd9LkFyLLOFhfUCfRy\naziXgR8EZ/mRRXzplCVn3zKwPQTAOyA/QvIHucaDOmkZPUdylRCn3ZF2+hTm\nFzveTs1PVZHVXAIhww90Xwuogd6mMTNvu46UxhOyUsnbjzGYuaW1P0Qtu8PY\ndB27KhgHIlu8w7KNXenr0+ZY8Ts6vw0N1EA4T8hJIDgBkL0kfbY3T0ipCORn\nI3p4A9lvNAHoU/RHLmAj1cYDrdxpdozbiq96wROCSyCXw61AWPsrlC7aoqAC\nblSa\r\n=jw47\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n\n\nButtons allow users to take actions, and make choices, with a single tap.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/button\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n```\n\n> _NOTE_: Examples here use the generic `\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n> _NOTE_: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Additional Information\n\n### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n\n> \\*_NOTE_: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n> buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n> directly within the `mdc-button` element.\n> However, the `mdc-button__label` class may become mandatory for all cases in the future, so it is recommended to\n> always include it to be future-proof.\n\n### Sass Mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass Mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`mdc-button-filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass Mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`mdc-button-container-fill-color($color)` | Sets the container fill color to the given color for an enabled button.\n`mdc-button-disabled-container-fill-color($color)` | Sets the container fill color to the given color for a disabled button.\n`mdc-button-icon-color($color)` | Sets the icon color to the given color for an enabled button.\n`mdc-button-disabled-icon-color($color)` | Sets the icon color to the given color for a disabled button.\n`mdc-button-ink-color($color)` | Sets the ink color to the given color for an enabled button, and sets the icon color to the given color unless `mdc-button-icon-color` is also used.\n`mdc-button-disabled-ink-color($color)` | Sets the ink color to the given color for a disabled button, and sets the icon color to the given color unless `mdc-button-icon-color` is also used.\n`mdc-button-density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`mdc-button-height($height)` | Sets custom height for button.\n`mdc-button-shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$mdc-button-density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`mdc-button-horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`mdc-button-outline-color($color)` | Sets the outline color to the given color for an enabled button.\n`mdc-button-disabled-outline-color($color)` | Sets the outline color to the given color for a disabled button.\n`mdc-button-outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `mdc-button-horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.14.1/node@v10.17.0+x64 (linux)","description":"The Material Components for the web 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/density":"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/button_5.0.0-canary.b8bc4a26e.0_1574882216744_0.9284745276782389","host":"s3://npm-registry-packages"}},"5.0.0-canary.f978109c3.0":{"name":"@material/button","version":"5.0.0-canary.f978109c3.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"deb190ab9311c1fc30a8bd0552275dae23e19f8c","tarball":"https://registry.npmjs.org/@material/button/-/button-5.0.0-canary.f978109c3.0.tgz","fileCount":11,"integrity":"sha512-T7UewbOB71Avf/qt9+nMjuMKKCqRFrQ6isn+vRcyEMGlCRkEjfsCcA7eXh1d9xvzkbWbrHFjQCDJ4cxTO7l/Qw==","signatures":[{"sig":"MEYCIQCMHfyzSj3Cmi75pBU6VeO0W1MkTYEJKAsq9FVMvWI2iwIhAPxEccikKtsgfM0jkqikRP174EkGTZs4nOkcZMHEGxZ7","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":199338,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJd5UTWCRA9TVsSAnZWagAA+cIP/j/V4itM9uItFkIA9FiL\nhnjcMBEJs3Cl+3PsVJy+yQgKjAqho2v6w7VRDLwpCxjB1KlskbT8oILqzMQg\nlYBUSdiqeFQ0sm3RN20vQWRFVxEiTMZqV1JbcSmS1VjSlJbzlywljTFCDTiU\nUmmA+hiV2y8NPbsvUC06STLP708BD2yBFyCyqL0heFF5WNJ4WOSnhM9hmWtf\n7c2DP5Dl/R4shq+Y36thD27qFTwDa++l0LzJDKcB1o45GR4u7dc2FtBT15+X\nuek+j4YVf3T/YQHeCnqIfJ2eb/hR4G0+3gPAEylcvGcTTa2QnbSPT9mA9PKn\nCyrh+/s63roTsfhZHeEEiIcGMg/Wq6vGRBs3drkZzjLPlNs5RgEp2PnuZtl3\nOWx18Rg92wrhu+1cZdz0j6YzFI7gPJvw/BbB5wNqN5iJ4/su8tkssPrwDsJT\n/Fz8sIlHX1BZPVXqqsDNL9P7IOpAZ8kyg0mQVvgnHpReI2lQGTa29WsYIyVt\nZjUrHDcPoL5vItx0fhro0ol/3tbE5vJ9GnieUHeRZpQzPxkymtmoGVxLggd1\n/RKvLOEn2eFyBcs9/N1LoyKDjPHyYiXTVrQvYxqph2qQ0ekYDHS7WMNSCFow\no4omzRfoO98mlvjC7DKGlC2R4zmCnJSvqhve1y8avIUlxGeyRkO0aV9+Wq8f\n3iwN\r\n=9gCv\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n\n\nButtons allow users to take actions, and make choices, with a single tap.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/button\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n```\n\n> _NOTE_: Examples here use the generic `\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n> _NOTE_: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Additional Information\n\n### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n\n> \\*_NOTE_: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n> buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n> directly within the `mdc-button` element.\n> However, the `mdc-button__label` class may become mandatory for all cases in the future, so it is recommended to\n> always include it to be future-proof.\n\n### Sass Mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass Mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`mdc-button-filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass Mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`mdc-button-container-fill-color($color)` | Sets the container fill color to the given color for an enabled button.\n`mdc-button-disabled-container-fill-color($color)` | Sets the container fill color to the given color for a disabled button.\n`mdc-button-icon-color($color)` | Sets the icon color to the given color for an enabled button.\n`mdc-button-disabled-icon-color($color)` | Sets the icon color to the given color for a disabled button.\n`mdc-button-ink-color($color)` | Sets the ink color to the given color for an enabled button, and sets the icon color to the given color unless `mdc-button-icon-color` is also used.\n`mdc-button-disabled-ink-color($color)` | Sets the ink color to the given color for a disabled button, and sets the icon color to the given color unless `mdc-button-icon-color` is also used.\n`mdc-button-density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`mdc-button-height($height)` | Sets custom height for button.\n`mdc-button-shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$mdc-button-density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`mdc-button-horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`mdc-button-outline-color($color)` | Sets the outline color to the given color for an enabled button.\n`mdc-button-disabled-outline-color($color)` | Sets the outline color to the given color for a disabled button.\n`mdc-button-outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `mdc-button-horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.14.1/node@v10.17.0+x64 (linux)","description":"The Material Components for the web 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/density":"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/button_5.0.0-canary.f978109c3.0_1575306454160_0.43468610055464785","host":"s3://npm-registry-packages"}},"5.0.0-canary.ad9dfe706.0":{"name":"@material/button","version":"5.0.0-canary.ad9dfe706.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"a5d788682283e4747392e258c131d7d64cc96fe4","tarball":"https://registry.npmjs.org/@material/button/-/button-5.0.0-canary.ad9dfe706.0.tgz","fileCount":11,"integrity":"sha512-iBV16kkNsjyzycFAmU+YdyGKkjuw6o1S964sGXGz45T7e2z+Urn/PqoT337LyrXdb4j47t2JiV9xV3wasxDH4w==","signatures":[{"sig":"MEUCIEBQjZ/RtEzAmFxfg5VixvR7jegdWD7CW2lHyrOyeMX+AiEA2L5gDAWFqXxP1elubGxU6MlT6NVybNXvqzEPm2HNbpY=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":199338,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJd5u04CRA9TVsSAnZWagAACTYP/RnWOFn6HkJf9bunmMPo\ncx6YVEDtYzgdkxEcwch+YBQRiAH3QtngbeCQqmI2O3vEEYeQJxmeG1sNbDmf\ndAPvt47XeRmGqyUfZb6VcMqhaA8ZDHduIN4YviwVe8/h9wRmBilqvEOmivkM\nG1dWuQb+l2G+a5mLryobqTIwWkqZRn07f8jo0Tb4orz1XuASz4aMOcUsQir9\nLNIOiFQLGLGfeNZl9h5t0V3CX9t3pdSKeBjh76QpgkYF+m9dufo56Uebmlfk\nL9gDDK1oys5LI4WQFMyIxYR2+mMCM3DD3glVwsuZJQOCvCVJejUXq/wv52ZJ\nRaaw4IO46/MbeJ6x2c3FJLKhL952uUGEFnCYDs85wPEhdly+mNzz/sq0EUY4\n2swomNTXFOUyfIteOrH0x75tdNhH5gkWprOjqD55M7lZq1TIWQLQ/3NqS+iI\n3kO7JwLjqxkTmZ424g3kqVCafEeoTeptfma9FWLmRGDXyiwcHfq8jCLSifvI\niLnvm39nys8GKBx+1tHca/rSw3tQ71PGWhP8efrqKrKgBRFbdn4BuJ+LJ766\n+APxeVeHVULA3/eCwfswyH1ZN/nQ83BJKAY47ynEYKvLd4Sb+hC2OJJQ8a84\n2gAGCPI1Sw//s0WsIhPNYi8Ufm5Fa2QfQhRr3jvYpl/NoCpZ8OilsXcEFN4d\nsFiF\r\n=UHNu\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n\n\nButtons allow users to take actions, and make choices, with a single tap.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/button\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n```\n\n> _NOTE_: Examples here use the generic `\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n> _NOTE_: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Additional Information\n\n### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n\n> \\*_NOTE_: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n> buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n> directly within the `mdc-button` element.\n> However, the `mdc-button__label` class may become mandatory for all cases in the future, so it is recommended to\n> always include it to be future-proof.\n\n### Sass Mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass Mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`mdc-button-filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass Mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`mdc-button-container-fill-color($color)` | Sets the container fill color to the given color for an enabled button.\n`mdc-button-disabled-container-fill-color($color)` | Sets the container fill color to the given color for a disabled button.\n`mdc-button-icon-color($color)` | Sets the icon color to the given color for an enabled button.\n`mdc-button-disabled-icon-color($color)` | Sets the icon color to the given color for a disabled button.\n`mdc-button-ink-color($color)` | Sets the ink color to the given color for an enabled button, and sets the icon color to the given color unless `mdc-button-icon-color` is also used.\n`mdc-button-disabled-ink-color($color)` | Sets the ink color to the given color for a disabled button, and sets the icon color to the given color unless `mdc-button-icon-color` is also used.\n`mdc-button-density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`mdc-button-height($height)` | Sets custom height for button.\n`mdc-button-shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$mdc-button-density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`mdc-button-horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`mdc-button-outline-color($color)` | Sets the outline color to the given color for an enabled button.\n`mdc-button-disabled-outline-color($color)` | Sets the outline color to the given color for a disabled button.\n`mdc-button-outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `mdc-button-horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.14.1/node@v10.17.0+x64 (linux)","description":"The Material Components for the web 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/density":"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/button_5.0.0-canary.ad9dfe706.0_1575415096224_0.7957404769042369","host":"s3://npm-registry-packages"}},"5.0.0-canary.5e45d77f3.0":{"name":"@material/button","version":"5.0.0-canary.5e45d77f3.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"41b8ac6a3efdbcfd84b1434ca4827158550480fe","tarball":"https://registry.npmjs.org/@material/button/-/button-5.0.0-canary.5e45d77f3.0.tgz","fileCount":11,"integrity":"sha512-kuJtk2KNJSZuD+uHIuNMcGWf4kwX+usgiw0y8uKsS8ocGpp0tydlMpk/oCTkP06LK1ZgxYLiH6Rhg36J701t4g==","signatures":[{"sig":"MEQCIAKGWzWh+uKfblmcURyEZC5HwivVCw9cqeK4u0UwFF49AiBnAPO80UnA+r6wwPtCvsaa6VfXrcb+v2+V8Fhhf0KvBw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":199338,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJd5u2VCRA9TVsSAnZWagAAjRAP/0PQaBJyIBgUZV52PQZF\naT622Qnl/WTW8m/0r7rv15Nq6A9zbbeOLxm/pbaZzI67KHshcspqLqnvDmIr\nsuc4qfGb7F60FX57ke+Gsyw2JbyzW+3tiDM4FKCNy+cxsimsxem5GgwyLPm+\nGYbcfiY/92A2KV1pQOdbCYiW6tUuqGxoEP4JzEGZg4fuItUqTdVfmsJ5IqRh\nMXoe05uNsPZeGWw21scKTUHJPgOGuA42EKhKKVNr2rk8HSe8PUY9MwPnkVnk\n93D+oJjGhzpogSNzGiYNVx5hNusr3/enlj6HkVxA2hbzqPQy4lBmqWKjjcQo\nADP0yNAb1hm4RrlhyQfMmBW8f8q57kbRnmd/PPGTqoPiGfXc9kKKVwELd+rS\nJ9ASa5OZPYB3GsTvTLfC/ddJQt+N8xzvYytXwq9ekGmvflZBMogAxROMs+QM\n6GELmX4cg0y8jAFurF6hu3+1hm4RtwEu1aruej2VyHp/BpvS2V3SGlVzzqX9\nnuTrihPs96KdOgGuEFylzk2vcq9QyInbSH34kZcxR6VGZkEGiX7DAm5mnVYC\nBwF6Hx2lx7uH6gs5fgjccq1zv8LQrzPUceUHhEplHP8v8aywyQ3U1QvkRZIv\nb4aiDVW97FaWCOwryku+pGa+kudl65QbwwiOfe2qVD6d6c4jmiUOGZXzLPKV\nCK8f\r\n=f2Zk\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n\n\nButtons allow users to take actions, and make choices, with a single tap.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/button\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n```\n\n> _NOTE_: Examples here use the generic `\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n> _NOTE_: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Additional Information\n\n### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n\n> \\*_NOTE_: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n> buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n> directly within the `mdc-button` element.\n> However, the `mdc-button__label` class may become mandatory for all cases in the future, so it is recommended to\n> always include it to be future-proof.\n\n### Sass Mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass Mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`mdc-button-filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass Mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`mdc-button-container-fill-color($color)` | Sets the container fill color to the given color for an enabled button.\n`mdc-button-disabled-container-fill-color($color)` | Sets the container fill color to the given color for a disabled button.\n`mdc-button-icon-color($color)` | Sets the icon color to the given color for an enabled button.\n`mdc-button-disabled-icon-color($color)` | Sets the icon color to the given color for a disabled button.\n`mdc-button-ink-color($color)` | Sets the ink color to the given color for an enabled button, and sets the icon color to the given color unless `mdc-button-icon-color` is also used.\n`mdc-button-disabled-ink-color($color)` | Sets the ink color to the given color for a disabled button, and sets the icon color to the given color unless `mdc-button-icon-color` is also used.\n`mdc-button-density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`mdc-button-height($height)` | Sets custom height for button.\n`mdc-button-shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$mdc-button-density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`mdc-button-horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`mdc-button-outline-color($color)` | Sets the outline color to the given color for an enabled button.\n`mdc-button-disabled-outline-color($color)` | Sets the outline color to the given color for a disabled button.\n`mdc-button-outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `mdc-button-horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.14.1/node@v10.17.0+x64 (linux)","description":"The Material Components for the web 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/density":"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/button_5.0.0-canary.5e45d77f3.0_1575415189496_0.8582341016393225","host":"s3://npm-registry-packages"}},"5.0.0-canary.d10e8cdf3.0":{"name":"@material/button","version":"5.0.0-canary.d10e8cdf3.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"13aafa5871113bb0697818e432bfc57e04bd8bc9","tarball":"https://registry.npmjs.org/@material/button/-/button-5.0.0-canary.d10e8cdf3.0.tgz","fileCount":11,"integrity":"sha512-py5TpxKiz21Ks711yUdVGS1SVA52evmYpdVpXfuLx8jhsnNiqw4jbNDRcr4VqXph9SvjX4e1F0zUx7wtd0yarA==","signatures":[{"sig":"MEUCIQDnKmoDZQmUcV+tO1zk2jafcwjZy0OepQHTlK7tYUar7gIgfX6EhQsaueT1XImBqDqj8LMtWk1BbeGsHmJ9bOyWDGY=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":199338,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJd5u3CCRA9TVsSAnZWagAAcZoP/1uI6fYamtWTYfsPgujs\n1lUTmSIqVMl16Z+6DxIXvSE4AZNUu4lCQN0l5aT07S7LLubhjP8lJpjLYBBs\nytzoGgi5VG5i7qpu8ULiD2e5Z0rbT8TcVUFFOnqNkQ+zP0IEXlO03MeU2Tb/\nRnDbyUIRLWGuaggBoi217vCkXGoIdtr4086kvj8/X8dCYg4SK6aDHqK7+SUp\nwvBchneEM0A2UMcNEZyRFrqngeD5BCOexqtIR5uZoFYX2+Tlxq16jpo7p3kr\nF5vxReg0Tm8Qhut0hw2nFlihCDaB8ehHO0kzbzIqPjSHg44UcmDGLA2ORhQi\n/EVJOPI8WL1tF/h1YqhrAIRjN63U/80Ujn+9EuMuxuSUKW2wEF1YhkfH4kCl\nPyd5Ky1O7e1mhyms3rTuJnxC6oIydyiUhD2C336KLG7OCyGENnQujkjjGC7F\nqRDG86EQVcluVevXWLKQ6yBB5UioIYO9Hdbm+UXpYlz7F853bV+Ae0SsVsaf\n2f2b198azjSB8suT1mq+6kYaw1xx32ci0oiB/9dIAXyJ8vGvo3Zz7juvBXSQ\n/081Jl7pQpRFJioXheOjJh7J8MD7DhooCLsFrJzHJmZliULHVw0AekjkcfRd\nfplKBQO2lzJtIQ+9EDmaXCf8DmPOXhJ5ln37WNWA/RzhQPzvS7yTKzJuHjul\n/q1d\r\n=WN0M\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n\n\nButtons allow users to take actions, and make choices, with a single tap.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/button\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n```\n\n> _NOTE_: Examples here use the generic `\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n> _NOTE_: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Additional Information\n\n### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n\n> \\*_NOTE_: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n> buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n> directly within the `mdc-button` element.\n> However, the `mdc-button__label` class may become mandatory for all cases in the future, so it is recommended to\n> always include it to be future-proof.\n\n### Sass Mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass Mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`mdc-button-filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass Mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`mdc-button-container-fill-color($color)` | Sets the container fill color to the given color for an enabled button.\n`mdc-button-disabled-container-fill-color($color)` | Sets the container fill color to the given color for a disabled button.\n`mdc-button-icon-color($color)` | Sets the icon color to the given color for an enabled button.\n`mdc-button-disabled-icon-color($color)` | Sets the icon color to the given color for a disabled button.\n`mdc-button-ink-color($color)` | Sets the ink color to the given color for an enabled button, and sets the icon color to the given color unless `mdc-button-icon-color` is also used.\n`mdc-button-disabled-ink-color($color)` | Sets the ink color to the given color for a disabled button, and sets the icon color to the given color unless `mdc-button-icon-color` is also used.\n`mdc-button-density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`mdc-button-height($height)` | Sets custom height for button.\n`mdc-button-shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$mdc-button-density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`mdc-button-horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`mdc-button-outline-color($color)` | Sets the outline color to the given color for an enabled button.\n`mdc-button-disabled-outline-color($color)` | Sets the outline color to the given color for a disabled button.\n`mdc-button-outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `mdc-button-horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.14.1/node@v10.17.0+x64 (linux)","description":"The Material Components for the web 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/density":"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/button_5.0.0-canary.d10e8cdf3.0_1575415233760_0.5232696543014095","host":"s3://npm-registry-packages"}},"5.0.0-canary.a5dbd8a2a.0":{"name":"@material/button","version":"5.0.0-canary.a5dbd8a2a.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"34a0bc9481a8feebd434d87f735bf65612864ba4","tarball":"https://registry.npmjs.org/@material/button/-/button-5.0.0-canary.a5dbd8a2a.0.tgz","fileCount":11,"integrity":"sha512-cvkcI/mSqWDh48la6SMov2htRlh+qZ4tE82XYZ3QiEBpsqeddStslfhCdEvkWd9LfMMWe0uqIG6Sj4tnyMRHJw==","signatures":[{"sig":"MEYCIQCIBH9M30iq/Iym+2I2VcRFk+zAmKFcMOJHyY+2Sz9+aQIhAMs36GQhe4eNvzFoY3EXq7eTEGgem99hei64bYIa88mc","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":199338,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJd5vXiCRA9TVsSAnZWagAAY+oQAIudXxsPPqsEHrVTC91e\n2xwTqg7nMdvcHnsGTZ2sBZX4fALqsuCh4Wpn7E2dIV9rwv5dhsIO8JZE8VKb\n6OJkoX0U7Arw5dHUNyh0kcCWRWpo0VbrZJ+VHNSm9nnX5WoABUPuWlfNZ5UA\ninhbpaMXF8iblN7YhlSbNs3tKBEgcLBiooFpBl2rNhs7oH6dTTTvqzspkJfG\n7NRHxEQACNI5LWmQN8G8JV+M3kqsM29Sf5d0BnCjS+OMjI8rMQEpMr6kDdwk\nfYtJKJO/dYLSpK46f3pNaXCULCIok1YWEauWQqwMgaiXf01bDlieoxumM+bY\nwN61LKmvKzG8bPDn4sMHR+nvhBmxom6oVmVf/AWRJIIyteG7LoflwFmgPpV9\nceueEENEp9J6Fd7O8k1DwTtcWMwXQD8eght3mT2x6gD6ad/8mb7OL1L/EQ6S\nCWFdmJ3s7fU4fD0546veQ7zZiWrUzQ8whzAEIumwpt5zKOA7mzohWuzWw8ch\nKt3s0Mt2ITltvVKhSQuX6+sRv5msbtvfSyfZFWxSG3SUi4tvuClppUtM2aBs\n2ZuBpB2OyNElA9bPkWUtt4qNLIlm1Qyjy09BVh2sVnLo0xYCUdQ5bto74hwA\nIy+zKT4WjtWDc6IXRAeNdsGssqAGz0+RWIX27iTypggUY7Xu6UgVsJXyQo5k\nDlMG\r\n=0RCO\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n\n\nButtons allow users to take actions, and make choices, with a single tap.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/button\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n```\n\n> _NOTE_: Examples here use the generic `\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n> _NOTE_: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Additional Information\n\n### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n\n> \\*_NOTE_: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n> buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n> directly within the `mdc-button` element.\n> However, the `mdc-button__label` class may become mandatory for all cases in the future, so it is recommended to\n> always include it to be future-proof.\n\n### Sass Mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass Mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`mdc-button-filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass Mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`mdc-button-container-fill-color($color)` | Sets the container fill color to the given color for an enabled button.\n`mdc-button-disabled-container-fill-color($color)` | Sets the container fill color to the given color for a disabled button.\n`mdc-button-icon-color($color)` | Sets the icon color to the given color for an enabled button.\n`mdc-button-disabled-icon-color($color)` | Sets the icon color to the given color for a disabled button.\n`mdc-button-ink-color($color)` | Sets the ink color to the given color for an enabled button, and sets the icon color to the given color unless `mdc-button-icon-color` is also used.\n`mdc-button-disabled-ink-color($color)` | Sets the ink color to the given color for a disabled button, and sets the icon color to the given color unless `mdc-button-icon-color` is also used.\n`mdc-button-density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`mdc-button-height($height)` | Sets custom height for button.\n`mdc-button-shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$mdc-button-density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`mdc-button-horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`mdc-button-outline-color($color)` | Sets the outline color to the given color for an enabled button.\n`mdc-button-disabled-outline-color($color)` | Sets the outline color to the given color for a disabled button.\n`mdc-button-outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `mdc-button-horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.14.1/node@v10.17.0+x64 (linux)","description":"The Material Components for the web 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/density":"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/button_5.0.0-canary.a5dbd8a2a.0_1575417313841_0.28947369660879185","host":"s3://npm-registry-packages"}},"5.0.0-canary.ba879b68b.0":{"name":"@material/button","version":"5.0.0-canary.ba879b68b.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"e4144873dfc7bacb8c66d8917f9497b62e5c3f0b","tarball":"https://registry.npmjs.org/@material/button/-/button-5.0.0-canary.ba879b68b.0.tgz","fileCount":11,"integrity":"sha512-9LO2RJkzCk6PZycUKFiym+mcYjdUZrMBm7x/is0DytRhGsOhpeU9VfAX/pOmxgWVycCnHcSFj9do8EZDox78Tw==","signatures":[{"sig":"MEUCIDaevxZgQ0ezUVncf4ERQ5hIASFuqE56Ui/YEbWLmnO9AiEAqHyQKUYKhHWiumLqoRtDr39LkNrmhfQ75sc7XpPPGME=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":199957,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJd6BWfCRA9TVsSAnZWagAADmkQAJt8VCHBXTyoUQJXwLM+\n0laVC++wC9MyANoSrjc8Pny4xSRBpYfX23p6/tk//lW/7SYCYgeNisv6Un8X\npQ/cnanDkh0ICEDAp9xZYsWgoamWoUalpkhIVCY5MvgCdpjH5covTrt+hKiy\n2ie1BuYOrx1ReVZcSxP9JdemZhITMYXxSKEWjw9G2bVnmNssgj2qrQhWdkaR\nUkpfvlOv0mUK/sd1pdSIYaqKtuUyq26dRL9NGCfJ8ti1HYalfM3K4QkIDwdl\nh8Yur5ynoLv5HG4q+xTAfWM3YRGumu313AKu474tZTT+3+V43rcRJYWrzo0v\ndTASKKZMLDFRiDqcKcpDSAWOqUNzXA5lNtyKWmAKb2MLnL0WqqqY69t/JHJG\nee1CHo0YqKGojg3MGdVnz00iGXJQYlcDkmZ/GkYBZVRarnJmuw7ae3aAttJF\n2vQpajx+EkEBaJYk2j+j2WWkkHW+KnE4tquy0VxuXF7bb/mHP/MtSAus7QIa\nAw7xz+9uJYsqWNYKo/boe0CS0HmdQDLGcmgI/Wolq/OHpRX8lTKTEQIcegWF\nRhzUJydBa4LN4AqOiHaREicXp8EFTKl0+EjdVn4Y2qYbdrQZMlBiA5V2rFQ6\nogsIsUHI5e2yhZmdXBiORbK9OQTnuWDnOs0d08QE9RtSPuUEakCP03mKsMOa\nNCdB\r\n=NuHh\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n\n\nButtons allow users to take actions, and make choices, with a single tap.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/button\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n```\n\n> _NOTE_: Examples here use the generic `\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n> _NOTE_: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Additional Information\n\n### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n\n> \\*_NOTE_: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n> buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n> directly within the `mdc-button` element.\n> However, the `mdc-button__label` class may become mandatory for all cases in the future, so it is recommended to\n> always include it to be future-proof.\n\n### Sass Mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass Mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`mdc-button-filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass Mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`mdc-button-container-fill-color($color)` | Sets the container fill color to the given color for an enabled button.\n`mdc-button-disabled-container-fill-color($color)` | Sets the container fill color to the given color for a disabled button.\n`mdc-button-icon-color($color)` | Sets the icon color to the given color for an enabled button.\n`mdc-button-disabled-icon-color($color)` | Sets the icon color to the given color for a disabled button.\n`mdc-button-ink-color($color)` | Sets the ink color to the given color for an enabled button, and sets the icon color to the given color unless `mdc-button-icon-color` is also used.\n`mdc-button-disabled-ink-color($color)` | Sets the ink color to the given color for a disabled button, and sets the icon color to the given color unless `mdc-button-icon-color` is also used.\n`mdc-button-density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`mdc-button-height($height)` | Sets custom height for button.\n`mdc-button-shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$mdc-button-density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`mdc-button-horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`mdc-button-outline-color($color)` | Sets the outline color to the given color for an enabled button.\n`mdc-button-disabled-outline-color($color)` | Sets the outline color to the given color for a disabled button.\n`mdc-button-outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `mdc-button-horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.14.1/node@v10.17.0+x64 (linux)","description":"The Material Components for the web 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/density":"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/button_5.0.0-canary.ba879b68b.0_1575490975254_0.3315793565788874","host":"s3://npm-registry-packages"}},"5.0.0-canary.aa0eba489.0":{"name":"@material/button","version":"5.0.0-canary.aa0eba489.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"2d47979d85f4e2a985651f4e50e64da10766cc12","tarball":"https://registry.npmjs.org/@material/button/-/button-5.0.0-canary.aa0eba489.0.tgz","fileCount":11,"integrity":"sha512-DaaOuIkORk6xi0+nEWofZlvVYSL4SpjGQ/+l//6ku3vEt4DtkwCkInUNaM/3/qWzuS+Gj3z1TMZuoD9DLXhksA==","signatures":[{"sig":"MEUCIQDZLqw5VFyS4lopn4+r3TgPuzT+FWk2jw1mHhWuNFxq9wIgdi2YNb8DTmWRlY6BZnn8x2i5inEoJN3eshIc9yXttS0=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":199957,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJd6bX2CRA9TVsSAnZWagAAjE0QAIpEOhPZslzqswuQmuQ7\n66eRqfARzpcLbV4H8pF1UkfPSOaKQVVvhHFsCvWXKb/7fotHZSgxwYXyQE5x\n6EFuD0BIbjwMm9TxuxMM5e/JihQmawrzUEtMcpvekCL0IzoQGJtHwG9MQPYT\n5lbGfUi/uMYTRRSmgzayVFfeg7DTPK12fldINjmV9CC9ftQg6kkB0OVDIKux\nLu6wd4ZWIrgsP+f9eFUbT+kZhdBfc9uXLxUtN6YSbLaaYw6M7iER7U5AAeXy\nhm7cjr/G24S8iAxtFbrx3BR2G2YjLgPlowl8z7seYvHf6496Vz1FQ6NapyZo\nwcGNCyuNOxRq8HoM51HHjYP8Tv1rsICROpPByRxTnsmwP8leaXgoKJMYrrrw\nx6UTxZ9cbM7yImCsqKIzfmPg2hMl3zcyeiKMnjKxD555QL1+2tCJfdfXummz\noj+Ug7PUKLsAkNXA74YzOu/hqfvquZ8/1DDJriEBOGJxg13Wqk8qWJ5msxHL\n1CeVl9hjI7Ng1VRohq/G/EFSIJyLCldsdsV9oQwf+iNWj8zdaC6vMR2wTLid\nsoJmLXpHN4tlDRqT38xTTuk1eDgpPzgvZEh+QdU3znCuioiuZcXEl6W5Qgte\nl+hrvoh5JdEjzGBgz7Fq5Qp5G7+PNSIyZjEAWtOk1K7ThdPhTWd2zhBnW+sd\nEoia\r\n=4VZ3\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n\n\nButtons allow users to take actions, and make choices, with a single tap.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/button\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n```\n\n> _NOTE_: Examples here use the generic `\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n> _NOTE_: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Additional Information\n\n### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n\n> \\*_NOTE_: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n> buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n> directly within the `mdc-button` element.\n> However, the `mdc-button__label` class may become mandatory for all cases in the future, so it is recommended to\n> always include it to be future-proof.\n\n### Sass Mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass Mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`mdc-button-filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass Mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`mdc-button-container-fill-color($color)` | Sets the container fill color to the given color for an enabled button.\n`mdc-button-disabled-container-fill-color($color)` | Sets the container fill color to the given color for a disabled button.\n`mdc-button-icon-color($color)` | Sets the icon color to the given color for an enabled button.\n`mdc-button-disabled-icon-color($color)` | Sets the icon color to the given color for a disabled button.\n`mdc-button-ink-color($color)` | Sets the ink color to the given color for an enabled button, and sets the icon color to the given color unless `mdc-button-icon-color` is also used.\n`mdc-button-disabled-ink-color($color)` | Sets the ink color to the given color for a disabled button, and sets the icon color to the given color unless `mdc-button-icon-color` is also used.\n`mdc-button-density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`mdc-button-height($height)` | Sets custom height for button.\n`mdc-button-shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$mdc-button-density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`mdc-button-horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`mdc-button-outline-color($color)` | Sets the outline color to the given color for an enabled button.\n`mdc-button-disabled-outline-color($color)` | Sets the outline color to the given color for a disabled button.\n`mdc-button-outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `mdc-button-horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.14.1/node@v10.17.0+x64 (linux)","description":"The Material Components for the web 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/density":"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/button_5.0.0-canary.aa0eba489.0_1575597558107_0.8661131768588974","host":"s3://npm-registry-packages"}},"5.0.0-canary.cb7b71a86.0":{"name":"@material/button","version":"5.0.0-canary.cb7b71a86.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"19e2ae703a5442a0aef7ea489ba9237c4cf6da2b","tarball":"https://registry.npmjs.org/@material/button/-/button-5.0.0-canary.cb7b71a86.0.tgz","fileCount":11,"integrity":"sha512-mCaXQGHOWMu+XtbEpv38syAkMjtGIOHhqJCTp3WMliH6FUNsymUTBTvutrGK/sb0hrdSl1clkLth95GF3F3elg==","signatures":[{"sig":"MEUCIQCGRI45VPt+enMsbg/rtSlNYEShmIBKxKi8/ZW18EeEqwIgQxvtVWenvv6PhzInz/mDjrjb0XwxReDlUXhi2a0ew0Y=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":199957,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJd6uqUCRA9TVsSAnZWagAAT/MP/2Zd+2dJKEOo6nrv5hCb\nH8pFzxOmzeeCQ6VTeQLC+Ni0vU182xuyiyPayVIgBkuH/1Lh6TK8MG+iK3Gv\niJiocQ6hgWCrqz9WZ/F+rZ88mtpxpoLcKv9T5xdRGMyGVdpzZ85SHkeQo20e\nx/8r5bT0RUJDPiC0RWUbDfGxzZ5AatIOhTNoh5KzpoWUDo7YhpYMy/tR77zX\n54yTxG5rDNbPQD1vyv2IGJ6J3ut1rhITsTunLce7o1xA736LlenvuQ2iO7RE\nx4NrECnF18p241nDP1vc2XoPnIEVM0WxAysmV5kCLRGFnuVWg+OvDgQzBd67\nNl83peoRs9HjSq7rljs5yKQuxF8czqF36WdpC31W7uGgWAlDRnuEJiRRwjeQ\nJr6Jtd5VJ2XrdaiZ0IUHH9LM21cbPX6MTMmdo+9Dwn89QxY0T1JEaW7J1PeB\n/tc0GUSjmaSEHEnHvgwqjgL9yQ//J1iTxl/eXH+fSqNfLQ3lbS6L3hNZIJUV\nG8vAHEbqGU7iyJ7N/lOdiGOnndqa90YInDfXdNooMpRgjCRPkihi38auKFvz\n1wRw3r1UBQlvi/yi09ko7NIgWUmVyiam9/gf2zrCdu/t903mVApWenIQ2cML\nrJ1Yc0nstNnl1F9imxOX1jdaksUfAlNgKO/tpHyTTBc9CYEHd9BZkFLofgCf\n+Nft\r\n=v4Xn\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n\n\nButtons allow users to take actions, and make choices, with a single tap.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/button\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n```\n\n> _NOTE_: Examples here use the generic `\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n> _NOTE_: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Additional Information\n\n### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n\n> \\*_NOTE_: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n> buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n> directly within the `mdc-button` element.\n> However, the `mdc-button__label` class may become mandatory for all cases in the future, so it is recommended to\n> always include it to be future-proof.\n\n### Sass Mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass Mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`mdc-button-filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass Mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`mdc-button-container-fill-color($color)` | Sets the container fill color to the given color for an enabled button.\n`mdc-button-disabled-container-fill-color($color)` | Sets the container fill color to the given color for a disabled button.\n`mdc-button-icon-color($color)` | Sets the icon color to the given color for an enabled button.\n`mdc-button-disabled-icon-color($color)` | Sets the icon color to the given color for a disabled button.\n`mdc-button-ink-color($color)` | Sets the ink color to the given color for an enabled button, and sets the icon color to the given color unless `mdc-button-icon-color` is also used.\n`mdc-button-disabled-ink-color($color)` | Sets the ink color to the given color for a disabled button, and sets the icon color to the given color unless `mdc-button-icon-color` is also used.\n`mdc-button-density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`mdc-button-height($height)` | Sets custom height for button.\n`mdc-button-shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$mdc-button-density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`mdc-button-horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`mdc-button-outline-color($color)` | Sets the outline color to the given color for an enabled button.\n`mdc-button-disabled-outline-color($color)` | Sets the outline color to the given color for a disabled button.\n`mdc-button-outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `mdc-button-horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.14.1/node@v10.17.0+x64 (linux)","description":"The Material Components for the web 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/density":"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/button_5.0.0-canary.cb7b71a86.0_1575676564007_0.29195006344277763","host":"s3://npm-registry-packages"}},"5.0.0-canary.50f110a6c.0":{"name":"@material/button","version":"5.0.0-canary.50f110a6c.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"07fcd9b6982f0700d94ed1cca1e66dc68acafc4b","tarball":"https://registry.npmjs.org/@material/button/-/button-5.0.0-canary.50f110a6c.0.tgz","fileCount":11,"integrity":"sha512-DaCPtdkfNu1WO3Ae5H6rl/C0Uol4b0Si164OSUwfbhutsowx6ow6m6771QYfuRE2c348yOamTMih+GQ+X0fCBg==","signatures":[{"sig":"MEUCID+s6XuvFdwU0483ZSF6SA7LfyJcX/RcpxiR58J58a6gAiEApnbxCdH1lXsa6dCtKUANQ5+g/oYhoTkh2GfbBMqlGcg=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":199957,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJd788DCRA9TVsSAnZWagAAs0sP+QAKKtEULde8+pMUqe9D\nZ/FN9Doqw/LhQhIA1DVp6WjsxRUEa5JuL0RodgP+nJVpOaLc6Zcjao2s0qcd\nUfZNty7fJdFKe3SF11gYjK4HfmwRCbpTQ3E72NxLruUihRV9h9/XX5SplGdj\nW3k99QarwK0liewidUcvTpJ+T3l9085nSSjc3rjrGMxEw7ZkiHEcLwPffpK5\nPBjvrNLQqRZzDz4NMNbGFck7VQlih2qAfeIP5N3Va/sWq7rYWd3BETE9OWp/\nSWWoFopPJRS9m03ilz+u945CVTyjUMqWLMmC6hZnzr+UYbyvN6ecHAi+lWPK\n/CePEYKwt6ryweZqXWcRq905w5Ui7yYmXE//dHBq+AWH/WA4qul2aw6DRee9\nXkWK/8B2hwiJJdx3kEHLM9E+f1F5o/YPdVob1Zsf1x5MSqyFwwghtlotGUUr\nZiT6qojP+wVn7X7DGfoIEA9YUGMuyFFE8TT8bnyDZPa5XJm5X0BKN8ZS8FKV\nQoyQfu+BIXrK18L8m87l0rxgX8kLiFzL38gSfJvwq3LUWVOsPQjOWC4F3Zzp\niAdy2XXemceL2cX4dlqBkLd9t23IPpd/VqrjYrYcdJS/ZO/ESZ0FpIagX/k1\n/WU6xTJW0XtUadFkSiN0CaQa7JLv3cuDyvvJzFM9XwaQgBiYur/329zaoARD\nfbQp\r\n=hko6\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n\n\nButtons allow users to take actions, and make choices, with a single tap.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/button\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n```\n\n> _NOTE_: Examples here use the generic `\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n> _NOTE_: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Additional Information\n\n### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n\n> \\*_NOTE_: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n> buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n> directly within the `mdc-button` element.\n> However, the `mdc-button__label` class may become mandatory for all cases in the future, so it is recommended to\n> always include it to be future-proof.\n\n### Sass Mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass Mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`mdc-button-filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass Mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`mdc-button-container-fill-color($color)` | Sets the container fill color to the given color for an enabled button.\n`mdc-button-disabled-container-fill-color($color)` | Sets the container fill color to the given color for a disabled button.\n`mdc-button-icon-color($color)` | Sets the icon color to the given color for an enabled button.\n`mdc-button-disabled-icon-color($color)` | Sets the icon color to the given color for a disabled button.\n`mdc-button-ink-color($color)` | Sets the ink color to the given color for an enabled button, and sets the icon color to the given color unless `mdc-button-icon-color` is also used.\n`mdc-button-disabled-ink-color($color)` | Sets the ink color to the given color for a disabled button, and sets the icon color to the given color unless `mdc-button-icon-color` is also used.\n`mdc-button-density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`mdc-button-height($height)` | Sets custom height for button.\n`mdc-button-shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$mdc-button-density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`mdc-button-horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`mdc-button-outline-color($color)` | Sets the outline color to the given color for an enabled button.\n`mdc-button-disabled-outline-color($color)` | Sets the outline color to the given color for a disabled button.\n`mdc-button-outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `mdc-button-horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.14.1/node@v10.17.0+x64 (linux)","description":"The Material Components for the web 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/density":"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/button_5.0.0-canary.50f110a6c.0_1575997186951_0.6367430205499214","host":"s3://npm-registry-packages"}},"5.0.0-canary.878a08b7c.0":{"name":"@material/button","version":"5.0.0-canary.878a08b7c.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"881afb23eed55b8830e627e31d68eecd8ad2fec8","tarball":"https://registry.npmjs.org/@material/button/-/button-5.0.0-canary.878a08b7c.0.tgz","fileCount":11,"integrity":"sha512-4lIILSVoTXW7w0EBN9JRQyPUXc6l+AlBNgIz2z5V4BSCvFcjUOxkyRVFO5fH4eB312i+u+gTIXQbONYrLUPCzw==","signatures":[{"sig":"MEYCIQCLGtI6E8VIf7a/4+tNT5tHwd8AO9DkUOJQlEBuxS5fhgIhAMsUxOO7p6w2IYEb4Rn2//WmEpHT7G/tuYM0pV/neUkt","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":199957,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJd8U6fCRA9TVsSAnZWagAA+d4P/1COdRGiM19CFMW4aUor\n5/qj6schQU+0zE+ZrDMXjRV/XjbEvUdIn8ioczA8gwCGI0nNQ9PEF29QWI4S\nr4SZtMY9C87dKiHis7Ow2fHwhJg3qTTqqpttUXkX3SK9z9tGZrCUugRPPjfp\n5AMKcDPm74P/ENPhthXT+/7GZ3IUZQf6oorc86KNMoLEA/vKz4M+L/UxB/jC\nzB5LoqnVGImiQd2JMqadK9DoIAjDIeWg6KqnOv5Q71V88QkKtVlPbPhEJ0W6\nBwMYVr2eQH2Id2IKOb76WwlrRsK5n52eFschPZWbPIBiGoTTWra3V0kQ9Bwh\nxkoc++9D9wgPmOX2gjHtya6kqeOLus6B1ATXou1gChdDFsSG8lQ4/tdg2e8n\nnhOiYzCjbJbVfjlZMSRa5gERPSjN2pdb+T9POo2HtHtIey7U1Uh4Q9PFFait\nQ1T+1xri6Q8qsf/yNmMlH0Q5RDbD9ZFGloACBRSaUfXf8mLzEWRNTuEvpski\n+CMQE/l82YZ+ZU2/auw4fDdJNzaSFUolKmRJcK+VHgb4JbMLKASY8CygDxWY\nQsOwctbt9TM+BRBEIf44uq5UgAQ/bPjUC+EW/W+AMb+ve6msRvZzUHP86vtl\nM9LtW0iZCJEahB8PzTNLhRmrwOwOjvPJyhyPVoHI7Cd8+6FsLwxds+fFQTUR\nKfHQ\r\n=n+Td\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n\n\nButtons allow users to take actions, and make choices, with a single tap.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/button\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n```\n\n> _NOTE_: Examples here use the generic `\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n> _NOTE_: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Additional Information\n\n### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n\n> \\*_NOTE_: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n> buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n> directly within the `mdc-button` element.\n> However, the `mdc-button__label` class may become mandatory for all cases in the future, so it is recommended to\n> always include it to be future-proof.\n\n### Sass Mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass Mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`mdc-button-filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass Mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`mdc-button-container-fill-color($color)` | Sets the container fill color to the given color for an enabled button.\n`mdc-button-disabled-container-fill-color($color)` | Sets the container fill color to the given color for a disabled button.\n`mdc-button-icon-color($color)` | Sets the icon color to the given color for an enabled button.\n`mdc-button-disabled-icon-color($color)` | Sets the icon color to the given color for a disabled button.\n`mdc-button-ink-color($color)` | Sets the ink color to the given color for an enabled button, and sets the icon color to the given color unless `mdc-button-icon-color` is also used.\n`mdc-button-disabled-ink-color($color)` | Sets the ink color to the given color for a disabled button, and sets the icon color to the given color unless `mdc-button-icon-color` is also used.\n`mdc-button-density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`mdc-button-height($height)` | Sets custom height for button.\n`mdc-button-shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$mdc-button-density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`mdc-button-horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`mdc-button-outline-color($color)` | Sets the outline color to the given color for an enabled button.\n`mdc-button-disabled-outline-color($color)` | Sets the outline color to the given color for a disabled button.\n`mdc-button-outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `mdc-button-horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.14.1/node@v10.17.0+x64 (linux)","description":"The Material Components for the web 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/density":"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/button_5.0.0-canary.878a08b7c.0_1576095390990_0.7426253349126584","host":"s3://npm-registry-packages"}},"5.0.0-canary.397905b4e.0":{"name":"@material/button","version":"5.0.0-canary.397905b4e.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"db396c67abcc73ab31d7ff5bb3cd4b80c7ea3a9b","tarball":"https://registry.npmjs.org/@material/button/-/button-5.0.0-canary.397905b4e.0.tgz","fileCount":11,"integrity":"sha512-0T+OPvh/a2hczsGaBDqIWzflQ1175Gq1jg4iu4MDm/inNuOnuUYlDKQmD14og09xCtb6vZZ07gXaOeoP6UBnfQ==","signatures":[{"sig":"MEUCIQCc39bzda/RzjlBfstUN+i3hRfwWhEFvC57KjmOyaBMpQIgbAKIupLwl2pmTywp1UpzD9ugqpw/YkBGiBjEFR3xWfw=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":199957,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJd8apBCRA9TVsSAnZWagAApS0P/3Z0NZNeWheb/G2kZB/E\nDfj6SPJWuyBWGoxt5IzmirpY3+GPtKwQ+9bVZokqc6pYT9Dlmgta2jmYoN7f\neGAx8E4NsuXXLtuja7IrU2SkIpL/e1A/IHIRdZTcd6uc8sMgfQgLvX9RiUKn\nPIY03lRceukhKciI98WdIjk8tA6Dh46RB8OtwyvUWd+gHmLxJbJ6B1zh2gJa\ndX/JTJaM8QbjwaUFnv3HppAaSmOBMJObGCJHwqSlhuKrQd7j5PWEq7q3uJKz\neofjsva05V6OpvjYZLt3O9pkMGDdhVCxL13/9Hccyuz4OtNSat5NnA4ZqDWo\nt1bMu0Khh8+syeRyb2EDA4ypHlh+5yCZqM3JmmOJ9/Xh54099WFlNJ7G92pW\nNf0z4mvyGvCNY3LzYBMSuzauVD330CY0ij+ER7Fmz9kWemc+IcCuKlp7PTxB\nRMahRewKussLPcHPDvcZK8ryj8b45ZnDlytDt79hIXxdrKdMfZSiptVPQHwB\npIaAlURNOQOwVsP6y54d9YNPxELpmZWD2yxlPCfYVCCJ3H63YAndeDkzH/JC\nIwP3rrFSHZ75a+8hzoMwsOTnznzKRjFYeQmUlRpiu+nI8w6YjMIhenTsFhWS\n/7unSTcpw/Rm23+XR2mg46bUCh+S7ibqV8INyHVoEZ7o+PDgn44w/bMiPcBE\n2sR3\r\n=e2Ym\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n\n\nButtons allow users to take actions, and make choices, with a single tap.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/button\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n```\n\n> _NOTE_: Examples here use the generic `\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n> _NOTE_: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Additional Information\n\n### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n\n> \\*_NOTE_: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n> buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n> directly within the `mdc-button` element.\n> However, the `mdc-button__label` class may become mandatory for all cases in the future, so it is recommended to\n> always include it to be future-proof.\n\n### Sass Mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass Mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`mdc-button-filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass Mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`mdc-button-container-fill-color($color)` | Sets the container fill color to the given color for an enabled button.\n`mdc-button-disabled-container-fill-color($color)` | Sets the container fill color to the given color for a disabled button.\n`mdc-button-icon-color($color)` | Sets the icon color to the given color for an enabled button.\n`mdc-button-disabled-icon-color($color)` | Sets the icon color to the given color for a disabled button.\n`mdc-button-ink-color($color)` | Sets the ink color to the given color for an enabled button, and sets the icon color to the given color unless `mdc-button-icon-color` is also used.\n`mdc-button-disabled-ink-color($color)` | Sets the ink color to the given color for a disabled button, and sets the icon color to the given color unless `mdc-button-icon-color` is also used.\n`mdc-button-density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`mdc-button-height($height)` | Sets custom height for button.\n`mdc-button-shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$mdc-button-density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`mdc-button-horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`mdc-button-outline-color($color)` | Sets the outline color to the given color for an enabled button.\n`mdc-button-disabled-outline-color($color)` | Sets the outline color to the given color for a disabled button.\n`mdc-button-outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `mdc-button-horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.14.1/node@v10.17.0+x64 (linux)","description":"The Material Components for the web 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/density":"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/button_5.0.0-canary.397905b4e.0_1576118848727_0.4113953041596494","host":"s3://npm-registry-packages"}},"5.0.0-canary.1fbf5bd1d.0":{"name":"@material/button","version":"5.0.0-canary.1fbf5bd1d.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"ae3670b957e8c618782b00b7d714c4d2b145f244","tarball":"https://registry.npmjs.org/@material/button/-/button-5.0.0-canary.1fbf5bd1d.0.tgz","fileCount":11,"integrity":"sha512-zin//Fa/Wo3B0mGZNJt+oC8SaPTR/SPQjqtM2u/WSmij7dahtixuTWwz3OtXVGdQa6DjTQ9MIpizDEegPXe1zQ==","signatures":[{"sig":"MEQCIDCdwAIN2Hj+DgVVgTOO4LLOy8P1zmb3dSg1auN8Je92AiBMy3EJhihHn5btWMnRd8Wu1lg2hwBh3LsocYrNz2Kmuw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":199957,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJd8o4RCRA9TVsSAnZWagAAx1cP/jN8VjtVTa0D57QOh9X+\nxiOfnNK7AxBb/N3WxuIjBut6winIOtXrSBlKVHH+XnFs596lg+eJh33Bim88\nKzAuh5LQxUVQ5pdQdwirdokNaLwcKwwSrU0nytegHB09nSYHOlJ7J9MJHvH6\ngVsKn9Mdt5ZfwIeWML4v8P29hLITTiJQQcb2JML+8proGdNOXLCafrRKiYkj\nnXvltQkXTWc2jCY5hhfeK8Gd3pAh7fNZ4GhMytoLVuxbFF79f3A6e8r/Ep0q\nnRVo7zPJTz7jm2xMS/ka/J2s1HAXRBW9Bt7jl3KEVFZvURuBaGL22bw02SMB\n3N+j/My9uKRTeYMyvfuthdgn5yAvfcU2mE538ke+ur9aa8ONBBlNPh2oSrTc\nWcIyB/09xJOJr5IpTwTwkzE6fJEt5emq9C84Fcin6874wy2oDp4fK6Ozimzz\n6kl1lImxhWjikCa1zC2p8FdBpqwSxQGEYaekZ+0vNiT05YjD3U6evp496/bg\n5wcCocd4qYuZ/Us6Kk0KP/tkXrLHbomeH+fGF+H07Gl1ENrG57x0ttD0QeQ+\nuCuu67485uJZdlM53kdyxYsFkmUrJ9V7pYvTgtTs3yDENdqhxLw9fxdXnfXA\nF3ypqD7g3kB+DgtKniPKATPzD97kTTsB9ahhqfYYmYcq85VR2YKA9ylCode1\nawvH\r\n=P6bN\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n\n\nButtons allow users to take actions, and make choices, with a single tap.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/button\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n```\n\n> _NOTE_: Examples here use the generic `\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n> _NOTE_: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Additional Information\n\n### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n\n> \\*_NOTE_: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n> buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n> directly within the `mdc-button` element.\n> However, the `mdc-button__label` class may become mandatory for all cases in the future, so it is recommended to\n> always include it to be future-proof.\n\n### Sass Mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass Mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`mdc-button-filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass Mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`mdc-button-container-fill-color($color)` | Sets the container fill color to the given color for an enabled button.\n`mdc-button-disabled-container-fill-color($color)` | Sets the container fill color to the given color for a disabled button.\n`mdc-button-icon-color($color)` | Sets the icon color to the given color for an enabled button.\n`mdc-button-disabled-icon-color($color)` | Sets the icon color to the given color for a disabled button.\n`mdc-button-ink-color($color)` | Sets the ink color to the given color for an enabled button, and sets the icon color to the given color unless `mdc-button-icon-color` is also used.\n`mdc-button-disabled-ink-color($color)` | Sets the ink color to the given color for a disabled button, and sets the icon color to the given color unless `mdc-button-icon-color` is also used.\n`mdc-button-density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`mdc-button-height($height)` | Sets custom height for button.\n`mdc-button-shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$mdc-button-density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`mdc-button-horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`mdc-button-outline-color($color)` | Sets the outline color to the given color for an enabled button.\n`mdc-button-disabled-outline-color($color)` | Sets the outline color to the given color for a disabled button.\n`mdc-button-outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `mdc-button-horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.14.1/node@v10.17.0+x64 (linux)","description":"The Material Components for the web 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/density":"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/button_5.0.0-canary.1fbf5bd1d.0_1576177169300_0.5670943535947417","host":"s3://npm-registry-packages"}},"5.0.0-canary.b723dfa78.0":{"name":"@material/button","version":"5.0.0-canary.b723dfa78.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"ebcc26e95bec6ab09e8f6d9558b63b8a01064fa1","tarball":"https://registry.npmjs.org/@material/button/-/button-5.0.0-canary.b723dfa78.0.tgz","fileCount":11,"integrity":"sha512-U11eecdJA2zXO71MUOipmSCn7TdqO+7nfP424qTcjUzNiKYMSXYHSC+4TrHIjTIQk6JM5qbkPsWdA0kthXvYoQ==","signatures":[{"sig":"MEYCIQDMJwxd+oaOHx/+B1mqRzhg5frGMSLUTqtFqgvku7GX2AIhAPTBC3gmNlijf/tGIkOojrywYrDe0qWFQN8wrxuUo4/Q","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":200021,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJd8p6fCRA9TVsSAnZWagAAQYAP/3tq9KPb34cIAB/FHStT\n0mO9L2E3TfB7t6LQJEgui2XZ/YIJZaxaFIM06QYIJuYPOl4nIn9+jlk7lYmf\n9XwyzTcKOepJvmnDS2e+mPj9B5nh/8F9CA6IZ5YJwO3XHv7bcqnN6pxPn/HF\n7Ul95dgT+ANsQK95Ruz7ZJEmgirqdbeArWUtb31Sz3Y/oofq/u3svIiAiWBA\nMchP3x5JlBie+exSNnrllWfl4zSrSDERGHpwvWoWBlpAZhwtwZBYOx9JRu0d\npzJHtTtnhgnJg1KDsGQTlzVlxMwWxPiQkEa3iNt/XeJSL/Keb7rUebTc8ojo\nTH8JDX0MDspYUVgCDhgd34yJHjhwdoH49wzk6MJQykqWdVa0GMn83BQ6iYhn\nnye439mdQiQcpwsc6kYUA0XSIezgqqxu7I1SkM6QDL++aAxyrz1v2H96gGVD\nHpkOjEm4qyGULF3TibzA9cEUz6ZLK+jVMwklOmoh8GkW6ldYC2OlnDCgtF/a\nA4XNAfjjvBzHdaXPC/ZM18S+gZa495FndbwfNcFFGqwE9qgUPDLtH9dFhAf2\nhQmE4ijrRkXYdLtptkhd0kT3tpHFXNjS0nYAyRUVTxR9LCS8PrsMsTwWEXun\nShkvca7BMNKAB9ir2bRXFC3pB7vmLXU1vIr8M+FYtnA1Ge4r9Le6KkzGC0P2\nVdjK\r\n=3efY\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n\n\nButtons allow users to take actions, and make choices, with a single tap.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/button\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n```\n\n> _NOTE_: Examples here use the generic `\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n> _NOTE_: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Additional Information\n\n### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n\n> \\*_NOTE_: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n> buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n> directly within the `mdc-button` element.\n> However, the `mdc-button__label` class may become mandatory for all cases in the future, so it is recommended to\n> always include it to be future-proof.\n\n### Sass Mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass Mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`mdc-button-filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass Mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`mdc-button-container-fill-color($color)` | Sets the container fill color to the given color for an enabled button.\n`mdc-button-disabled-container-fill-color($color)` | Sets the container fill color to the given color for a disabled button.\n`mdc-button-icon-color($color)` | Sets the icon color to the given color for an enabled button.\n`mdc-button-disabled-icon-color($color)` | Sets the icon color to the given color for a disabled button.\n`mdc-button-ink-color($color)` | Sets the ink color to the given color for an enabled button, and sets the icon color to the given color unless `mdc-button-icon-color` is also used.\n`mdc-button-disabled-ink-color($color)` | Sets the ink color to the given color for a disabled button, and sets the icon color to the given color unless `mdc-button-icon-color` is also used.\n`mdc-button-density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`mdc-button-height($height)` | Sets custom height for button.\n`mdc-button-shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$mdc-button-density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`mdc-button-horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`mdc-button-outline-color($color)` | Sets the outline color to the given color for an enabled button.\n`mdc-button-disabled-outline-color($color)` | Sets the outline color to the given color for a disabled button.\n`mdc-button-outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `mdc-button-horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.14.1/node@v10.17.0+x64 (linux)","description":"The Material Components for the web 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/density":"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/button_5.0.0-canary.b723dfa78.0_1576181406721_0.4529587444260377","host":"s3://npm-registry-packages"}},"5.0.0-canary.1c494e567.0":{"name":"@material/button","version":"5.0.0-canary.1c494e567.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"55504930715896532b9318211a07a67de057a35b","tarball":"https://registry.npmjs.org/@material/button/-/button-5.0.0-canary.1c494e567.0.tgz","fileCount":11,"integrity":"sha512-cv+UFAPx0s2Rs7wksGNucU5fF836WbbMm0rQAxlSwsCMxB8k86OembnHIbhwVJDcrAYlWiz/mnO+THZKBnMc2Q==","signatures":[{"sig":"MEYCIQC/u4gLVnVH1RV9kn6Z8uwfPljyj4TBM8yDPtkC32A7UwIhALVbh302z7HYux9vNzA4iWF/v426MLUdql7CjwRhKbey","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":200021,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJd8s8dCRA9TVsSAnZWagAAugoP/iZdbeuarT0X+EdOL2jy\nHsVYB+SR86c1zjb22PiXaIXIePIFpsTllIYFXYdPOJjOkGZJr9NqxUyvdsJS\nHHufWZcXsXOpmMZF7PfzPW6hSS/jrM/FxNB/AZfiaG7E2bU6BKxw7zUdcPPn\nkZaVDUGT2A0CrARlIy3hm5RvAKcdFVYOv7zVSOubSdZq4eqCmoYj6a2Ukt+O\n3P/aq93BkEfM5TIUntXgKUvtB6GJ9HkVLzrlwkgv4RizDbb5HM9RHR0Jg7xU\nrMgMFl9C72IO2sojGWZnWivuj1QdwNUC0DtOikneivOktgTYVZhfa7uqyzzg\nSvjzvHpOxRo+uZWUIGo1nmGUC8+iRTT50B44Z2yDIm6AtsAKqlHhAnB21QF9\nC4gl80XXNhteg3mIisqLAG44Cm4rCf5SQ8Jova23C4Szce1D9eimaiQuAiE1\nVDjVQ/Ssse+l2Ap59bMeQSYMIZSdDgecQtbqmB+Uk1S+fSbysoelwgtR3U+8\nWD+sFw++4+S001lLRszu0rYgMV+l/xnn7MaO+DdLl1GjCw2E8FX2qJY5WNhf\nOkiE9GsJq2TH4u5v092pzw79/RP5lGbzy5BVldea7aB71emRtkK/AFv9RYfx\n4qtgHz7A3Ed8vEPfOCamwCG/FwwWm7BcDwFSusankoSq+qeLZVfq/dWg5uVg\n3nLb\r\n=2p63\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n\n\nButtons allow users to take actions, and make choices, with a single tap.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/button\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n```\n\n> _NOTE_: Examples here use the generic `\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n> _NOTE_: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Additional Information\n\n### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n\n> \\*_NOTE_: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n> buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n> directly within the `mdc-button` element.\n> However, the `mdc-button__label` class may become mandatory for all cases in the future, so it is recommended to\n> always include it to be future-proof.\n\n### Sass Mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass Mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`mdc-button-filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass Mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`mdc-button-container-fill-color($color)` | Sets the container fill color to the given color for an enabled button.\n`mdc-button-disabled-container-fill-color($color)` | Sets the container fill color to the given color for a disabled button.\n`mdc-button-icon-color($color)` | Sets the icon color to the given color for an enabled button.\n`mdc-button-disabled-icon-color($color)` | Sets the icon color to the given color for a disabled button.\n`mdc-button-ink-color($color)` | Sets the ink color to the given color for an enabled button, and sets the icon color to the given color unless `mdc-button-icon-color` is also used.\n`mdc-button-disabled-ink-color($color)` | Sets the ink color to the given color for a disabled button, and sets the icon color to the given color unless `mdc-button-icon-color` is also used.\n`mdc-button-density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`mdc-button-height($height)` | Sets custom height for button.\n`mdc-button-shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$mdc-button-density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`mdc-button-horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`mdc-button-outline-color($color)` | Sets the outline color to the given color for an enabled button.\n`mdc-button-disabled-outline-color($color)` | Sets the outline color to the given color for a disabled button.\n`mdc-button-outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `mdc-button-horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.14.1/node@v10.17.0+x64 (linux)","description":"The Material Components for the web 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/density":"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/button_5.0.0-canary.1c494e567.0_1576193820631_0.23603925359269873","host":"s3://npm-registry-packages"}},"5.0.0-canary.c9e98a125.0":{"name":"@material/button","version":"5.0.0-canary.c9e98a125.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"64075bcc5b6c81b3e13e95cb23e643b4850bb2b7","tarball":"https://registry.npmjs.org/@material/button/-/button-5.0.0-canary.c9e98a125.0.tgz","fileCount":11,"integrity":"sha512-QpwrrWy6PJIO1l0xjRihCFgPiwDNsIfGPrF+mBR6KSXb+u49Eo79Ot5fXBfzIBepxuMYoVp4qU3gWDVMUvO0Rg==","signatures":[{"sig":"MEUCIFHxCwxjMMf8IN+vckizCzrsRAOQjSEWZ9+r3CDInIV7AiEAvw3i8YGk9pr+iXxgzKsVBrgpcC8WE4PNP6pTPVB2eC0=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":200021,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJd+RoGCRA9TVsSAnZWagAAEEoP/1Hv7rtr1siGaUcQnVQ/\n6JqbiU6QvRgRUw7lnvFJnk1l5DpZXCXj4d8G04SkIzhd96Q/ibjvvAAOyQSh\nWKPGdUUEjdZsIxwirHxegQwrbCVhJ6QBvKnR9SziEg2Uyw5Ldl3/a8YBuLFs\nf3EnxP6pgBMoKBGYFTHmWL7Nz1uQGbfGf6dZYiquqfb4QRY/zjFsR3UyjFXo\nUWJrWRfeSPJNIk44pwCY+Pk23hhRbeInVzkVVfdy7oQfG3wW0qej6+0VdgS7\ntkGbiJ9uXhABtkXtaNKxx2nFIXilhtLj/W7mfSxkQqBxW3Y4W5Rz8Noa1D3d\nu98XAMz1qjOCYkHz6moh+g7GGDXJ6iJvuq+Lf1w9+agArgW9YzxNSHG7fWqh\n6O6KXRiP4Nkfkih7ruoN2G0LNmt1MINZ4Xs3q7BUO8xSCrs5O5QRtEYDV9EZ\ndKRBIfRy1+kBqa0EPfIVe+BRT0neyx/WK3cQtCRCwzrN9KSBYHtT7/+smMPA\nuNK72XkQ88IS+UbOPCCYHfwIg9j/ZsgP2QF6Owr1G2XowqApWqRVYev7CFBD\n2e7z66I5lfi9JLHtPy7hlWDLskBMbPzpf+NpDF+RGrB/s9/9XedmEEZao1+k\nnqrcMSMVqIsxRHROeSimvsLuykLM/Lnd/UVLshdAEHvLchaE53rYNODzvm8f\nC2DN\r\n=vmoB\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n\n\nButtons allow users to take actions, and make choices, with a single tap.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/button\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n```\n\n> _NOTE_: Examples here use the generic `\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n> _NOTE_: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Additional Information\n\n### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n\n> \\*_NOTE_: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n> buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n> directly within the `mdc-button` element.\n> However, the `mdc-button__label` class may become mandatory for all cases in the future, so it is recommended to\n> always include it to be future-proof.\n\n### Sass Mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass Mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`mdc-button-filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass Mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`mdc-button-container-fill-color($color)` | Sets the container fill color to the given color for an enabled button.\n`mdc-button-disabled-container-fill-color($color)` | Sets the container fill color to the given color for a disabled button.\n`mdc-button-icon-color($color)` | Sets the icon color to the given color for an enabled button.\n`mdc-button-disabled-icon-color($color)` | Sets the icon color to the given color for a disabled button.\n`mdc-button-ink-color($color)` | Sets the ink color to the given color for an enabled button, and sets the icon color to the given color unless `mdc-button-icon-color` is also used.\n`mdc-button-disabled-ink-color($color)` | Sets the ink color to the given color for a disabled button, and sets the icon color to the given color unless `mdc-button-icon-color` is also used.\n`mdc-button-density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`mdc-button-height($height)` | Sets custom height for button.\n`mdc-button-shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$mdc-button-density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`mdc-button-horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`mdc-button-outline-color($color)` | Sets the outline color to the given color for an enabled button.\n`mdc-button-disabled-outline-color($color)` | Sets the outline color to the given color for a disabled button.\n`mdc-button-outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `mdc-button-horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.14.1/node@v10.17.0+x64 (linux)","description":"The Material Components for the web 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/density":"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/button_5.0.0-canary.c9e98a125.0_1576606213747_0.796915465000549","host":"s3://npm-registry-packages"}},"5.0.0-canary.5ffe8f7e3.0":{"name":"@material/button","version":"5.0.0-canary.5ffe8f7e3.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"8635dea704017fc014a6780dfbdd439af57b3299","tarball":"https://registry.npmjs.org/@material/button/-/button-5.0.0-canary.5ffe8f7e3.0.tgz","fileCount":11,"integrity":"sha512-SX6cjFvDU/EAc9X0is8QjDr6mP7FyyenkOrKETWciNgC27Unb9IsgHjHAnwVD1kqWWdo0ibjvJHrwxr6R4XOGA==","signatures":[{"sig":"MEUCIQCf8foyX7SgqotF0hofknsWd4LgA6i0pqzFFe/YeiuHCgIga+cGFucAWOw6sSQZyUQmcdnFhO3cFwBwfzJibQ1Ue2k=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":200021,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJd+Ve5CRA9TVsSAnZWagAAXggP/1/aK9sXijmK8BO5hfEd\nLndWuH2C7Ah9sjSbq+BlF1lktFHw4eo4L7ZWVm8pn9GNkhZxFgeNDh87jgUc\ne9UcoOV+yIeXJUf/zm76kj8xyBjfECZzS2g/0uIHLiBhqulT3JFFOhMBOiWU\nKvKWkB7cSV+HvTPPJszFOYPwv2IOcr8s9Jw8Mo2jCNibF6l7zbBn1KcdXUc/\nekgcPIRN9ugBAefuDt/IFSElMi7/o1fWj0NzieF5XKdcGz2BJrjrn0QidUCI\nVjpt2C/2QbUhC4m4ms0KRyOG6xk9cazVj0kA5DH1NmrvGqKNIBzPTfZA1ZfB\nJn2LKPtC2k+6Ojm6f0LcTX8ujC1NjKRtp3WB0W9GTVFBmUJGm+99p7a6FSeh\nNW8WBcxleQ5wygMApzDIpX0epJcgmgatgthMZD051YrFLGomSQVuQy7xnRiL\nB5+Zvr8uvtvR8X9RiuYlPqsjLB4SonPI8BjemDcH/o1tnxXUV8S41MDh6aP0\n7M8Iy5BJ/FV8YCegyaDq/ANnWFC9/CNIKEGmnUgc3bDj0MAxWbQu2Vj/e1L5\nBGyxgSwFFBlgfggbHIaoQH6FL2PIOIFIG8an0TgSkphoASgQ98AYSptb5V5F\nHA6VJiRLreOqcPM+nSujx2nHWtBoTksF4+0bNdcFAVcModciDeln7feqve4k\nYlJZ\r\n=OPHD\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n\n\nButtons allow users to take actions, and make choices, with a single tap.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/button\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n```\n\n> _NOTE_: Examples here use the generic `\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n> _NOTE_: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Additional Information\n\n### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n\n> \\*_NOTE_: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n> buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n> directly within the `mdc-button` element.\n> However, the `mdc-button__label` class may become mandatory for all cases in the future, so it is recommended to\n> always include it to be future-proof.\n\n### Sass Mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass Mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`mdc-button-filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass Mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`mdc-button-container-fill-color($color)` | Sets the container fill color to the given color for an enabled button.\n`mdc-button-disabled-container-fill-color($color)` | Sets the container fill color to the given color for a disabled button.\n`mdc-button-icon-color($color)` | Sets the icon color to the given color for an enabled button.\n`mdc-button-disabled-icon-color($color)` | Sets the icon color to the given color for a disabled button.\n`mdc-button-ink-color($color)` | Sets the ink color to the given color for an enabled button, and sets the icon color to the given color unless `mdc-button-icon-color` is also used.\n`mdc-button-disabled-ink-color($color)` | Sets the ink color to the given color for a disabled button, and sets the icon color to the given color unless `mdc-button-icon-color` is also used.\n`mdc-button-density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`mdc-button-height($height)` | Sets custom height for button.\n`mdc-button-shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$mdc-button-density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`mdc-button-horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`mdc-button-outline-color($color)` | Sets the outline color to the given color for an enabled button.\n`mdc-button-disabled-outline-color($color)` | Sets the outline color to the given color for a disabled button.\n`mdc-button-outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `mdc-button-horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.14.1/node@v10.18.0+x64 (linux)","description":"The Material Components for the web 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/density":"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/button_5.0.0-canary.5ffe8f7e3.0_1576622008675_0.09833815866060291","host":"s3://npm-registry-packages"}},"5.0.0-canary.47949b08e.0":{"name":"@material/button","version":"5.0.0-canary.47949b08e.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"ae5972d7912e15a32cfd76e6dae1a0ef9ae269ad","tarball":"https://registry.npmjs.org/@material/button/-/button-5.0.0-canary.47949b08e.0.tgz","fileCount":11,"integrity":"sha512-EYeDSMK4JWrwiBdb5OlCLwk2nilMRxV0WGN7fc33kgeRSBvkaMOs/zteQKHlK6PM0W4DZJzBP9E+fhFDyH7tVw==","signatures":[{"sig":"MEUCIAJJ/QgSfA7MTDzXxLpau9R3w+qf+T7noQqQX+O/HMdUAiEAknMYwvD5AtMNxo6x6pQyUr5DWtzs+7SDYZWq3D5hmB4=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":200921,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJd+mSdCRA9TVsSAnZWagAAVJMP+QBKsgccbl3eATPQhq44\nNSosIGbUXEhnLVdEukjg/zTptDfPGe7EqqL5GtOo2N6uGVN7cbZz0E0GRXfG\naGBDa3a+uI9lCq5kvbqn4Rlibynhxz2dnMWGRiCwctGTbr0/7mRwarM3bP5x\nb7ow5Pxcytq/l1iG0+BJqHdfYGMYFl4cn2K8Ggspld68N+d5pzeR72lAkC6+\nDyteaJXKG8mAcuo8NMOJFMwIourF3shM0L1UciNTks4NXLmdRN/x64H5mFQF\nDnJnEWDJIOZagfYNCu1ZjkMnpA3L91bzvytFv4nDJxyJHDp/vSRq/YrfpXkB\neNligCtw/WhnJA29WDNZT3tRrGcKTpVDSx1YqjwmoXcWwcnxb6++5um6uTuL\nzepogzp3TyEq/Pp/RKyksBtcNCyI8sKwpF/ZkzdhcUWyUqu3bhddKJf88M9I\nP4kbSPVRMIA0vJn4C88NIyBvPS6y0zQFGdtc8t/yhwP9WSx6MZDUbD8A1y2h\nVatIp+IdlvDgo4s3o8nodKsranuoc6j7OhhPFddG2x7RdAsgBQWwBACW+15J\nBIPopoYSSfRP7tW+7GPjqKrsm/JFRMBnYTNvCc9PVQwOuyHIEPpq1m3+Mm5D\nPx+i7ma+q9IFNKgQzaITikW6rylwNZ3K4o5LHaPhvtCUC4ijbQkmbNGmQocv\nBwDK\r\n=N4Yg\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n\n\nButtons allow users to take actions, and make choices, with a single tap.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/button\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n```\n\n> _NOTE_: Examples here use the generic `\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n> _NOTE_: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Additional Information\n\n### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n\n> \\*_NOTE_: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n> buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n> directly within the `mdc-button` element.\n> However, the `mdc-button__label` class may become mandatory for all cases in the future, so it is recommended to\n> always include it to be future-proof.\n\n### Sass Mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass Mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`mdc-button-filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass Mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`mdc-button-container-fill-color($color)` | Sets the container fill color to the given color for an enabled button.\n`mdc-button-disabled-container-fill-color($color)` | Sets the container fill color to the given color for a disabled button.\n`mdc-button-icon-color($color)` | Sets the icon color to the given color for an enabled button.\n`mdc-button-disabled-icon-color($color)` | Sets the icon color to the given color for a disabled button.\n`mdc-button-ink-color($color)` | Sets the ink color to the given color for an enabled button, and sets the icon color to the given color unless `mdc-button-icon-color` is also used.\n`mdc-button-disabled-ink-color($color)` | Sets the ink color to the given color for a disabled button, and sets the icon color to the given color unless `mdc-button-icon-color` is also used.\n`mdc-button-density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`mdc-button-height($height)` | Sets custom height for button.\n`mdc-button-shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$mdc-button-density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`mdc-button-horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`mdc-button-outline-color($color)` | Sets the outline color to the given color for an enabled button.\n`mdc-button-disabled-outline-color($color)` | Sets the outline color to the given color for a disabled button.\n`mdc-button-outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `mdc-button-horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.14.1/node@v10.18.0+x64 (linux)","description":"The Material Components for the web 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/density":"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/button_5.0.0-canary.47949b08e.0_1576690845004_0.34090453836806534","host":"s3://npm-registry-packages"}},"5.0.0-canary.b240bcc1b.0":{"name":"@material/button","version":"5.0.0-canary.b240bcc1b.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"3e3cbd4ca4948dcdb85930fe4732fc01a0798c43","tarball":"https://registry.npmjs.org/@material/button/-/button-5.0.0-canary.b240bcc1b.0.tgz","fileCount":11,"integrity":"sha512-vB0evPXTlTY2gkMUlg22u0LGFPzhiP1QMonbjCE5L1u4DKP2gEwAK8FphY/vIkSbNNaXh3WCdd7qf4OURofkXg==","signatures":[{"sig":"MEYCIQDYvL0raeJQ+OUlBkHdwxF3i/TYRZzHhNBW7fLCRc+tPQIhAJy9lYsa0tqVotJXTwbxgA5K0rxelzxR7Is2JzKN+T8f","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":200921,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJd+nsyCRA9TVsSAnZWagAAePQP/j3XGz7a0ldlleuS1qtK\n5PUvicDw9IvuuKQm4dhji3jzrK+0L4X4EGswLPS7VMpN7YzhjcV+ZfjtAniY\nt3kl0+K5KnVvsL2RpuRcDxnb++3J6LvR2zTPGegKTbPz68N8l8lM5dDpmk2s\nzYUTtRO7IEFbASwZiwitJrdVR7saodb7Tq8JGlpo1ybWKI2DYAi4l7GvFiWo\nQ8BJqMQG6WUxnfA/CKGRaDFf1nZsCM273eHJmltAeRMzhuIQXnBRSMueoXUK\nhtz5Wm0+e3l7tQ6fhNS6pmF5felw8wXXJvGwZ4jRZ8Qyey8yjJ0hfGq9bI83\npOJM3zz+ECqC1f4NlsKb2whtBh6UAs4EgX/n1kFvpvq3Kz5/mKc00s8Ug9tb\n2lUGQqairW2A+WL7bk7QvGlXYMab7mNsLoDhg45gYdbh7V5BRZwKcyqGv94l\nsJuZxAY349XEt27lw5kKTxCL+BN2UtWVr22uJEcNmQKEfyjHOyIc6efaVKCQ\npR10SPH4zBngynpWow8+8mWVSKheSoNP1SJcxDuW54w3DHKzMBskHdOqhvBp\nACdeZFSbl5tjhNmnfPTgv9VFMS0bVAqLh5sjPLrZzMZE8lczglz517fFMyZv\nuW7XCfYD2UzI1Kj0mHv6ixArV0O1EMHSgyN2aznDWesnm8MdjTIbHkxyPcDD\niC4e\r\n=f2fY\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n\n\nButtons allow users to take actions, and make choices, with a single tap.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/button\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n```\n\n> _NOTE_: Examples here use the generic `\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n> _NOTE_: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Additional Information\n\n### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n\n> \\*_NOTE_: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n> buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n> directly within the `mdc-button` element.\n> However, the `mdc-button__label` class may become mandatory for all cases in the future, so it is recommended to\n> always include it to be future-proof.\n\n### Sass Mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass Mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`mdc-button-filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass Mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`mdc-button-container-fill-color($color)` | Sets the container fill color to the given color for an enabled button.\n`mdc-button-disabled-container-fill-color($color)` | Sets the container fill color to the given color for a disabled button.\n`mdc-button-icon-color($color)` | Sets the icon color to the given color for an enabled button.\n`mdc-button-disabled-icon-color($color)` | Sets the icon color to the given color for a disabled button.\n`mdc-button-ink-color($color)` | Sets the ink color to the given color for an enabled button, and sets the icon color to the given color unless `mdc-button-icon-color` is also used.\n`mdc-button-disabled-ink-color($color)` | Sets the ink color to the given color for a disabled button, and sets the icon color to the given color unless `mdc-button-icon-color` is also used.\n`mdc-button-density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`mdc-button-height($height)` | Sets custom height for button.\n`mdc-button-shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$mdc-button-density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`mdc-button-horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`mdc-button-outline-color($color)` | Sets the outline color to the given color for an enabled button.\n`mdc-button-disabled-outline-color($color)` | Sets the outline color to the given color for a disabled button.\n`mdc-button-outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `mdc-button-horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.14.1/node@v10.18.0+x64 (linux)","description":"The Material Components for the web 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/density":"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/button_5.0.0-canary.b240bcc1b.0_1576696626309_0.43757831344132847","host":"s3://npm-registry-packages"}},"5.0.0-canary.391674a26.0":{"name":"@material/button","version":"5.0.0-canary.391674a26.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"12b0d2891e35eaf1da2af81dddf8814e0dac8142","tarball":"https://registry.npmjs.org/@material/button/-/button-5.0.0-canary.391674a26.0.tgz","fileCount":11,"integrity":"sha512-DybttfnJMpzCw9jgQ06WbX0+ufTBFh4VkdEbpAzP9zQ+RluJw8uUoQht0ME4GURHtz3G8D09iyvq30UCBe1+9w==","signatures":[{"sig":"MEUCIBrqAGqzt12EjeCEHrnNwX1C7bTGGiJ5jUv3xnoucW5fAiEA1C5+xagfPebZ79tuCc7VdWB5DE8IqwBv9HQmRsCrfmY=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":200921,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJd+ns+CRA9TVsSAnZWagAAy7sQAInz4DISzH/8WdIGJzOv\n1ChpKOrAhgmyOJp4M318udOi52+lzhqFdhoHjtXAFqNJG3Ol/wR70ttxWqHm\n6zkaijZ+XpOXizqx16wWLripmciyRIvv0yR6pbduSYd4fzI0DIzBw1g2C6Jz\nCYo6MCueELm+GRNK03JqbzRnU40APV6hIIx4lCQ4bBY6ZuEs7MF1eJKywil2\nevKUdV8VmTJVZTie4V+lxsE+r7cP6Acz2AeFIN6UYaOYVMYgHOOVxWrV7N+t\n+Jrgsfr2cs6SF+6QCta9Wia18saeX49OYBvjlQt2wQQ9pHlcvzckkwP+vJCq\n8KmxiN+2HFBhaAwf1N0thuwVWDcrDkNZSjxD6iPMWpr/qsrKEggSD8ZpMdVr\nsGACvU6L3zJqF2Q+v8u9kNluRwB3QddVRF97Z99sU9GbtdLudakFlkHlZJj4\nMdV6LgbVHc6R4wAjMBnMrREFnWFJETEnpspbPMUwZ4i8CejDzfdTJntqY/TE\n1W2ucquV1l4nc63qEqtGcPGvDZWOsdG59MfmrEhDnMjLSD1NNaUUVxuYKCKS\nxeKr/rNVfdwXck58jOHCmsyA5T9AjJpxnpoBelVdR02p90t1F0K42JVehKgp\nCv90DyILkfZZsKoIg0BneRM4Tka25pXf0jx2zylG3BqP6uAx2Rq06YkzimgR\n+tBB\r\n=yBDT\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n\n\nButtons allow users to take actions, and make choices, with a single tap.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/button\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n```\n\n> _NOTE_: Examples here use the generic `\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n> _NOTE_: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Additional Information\n\n### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n\n> \\*_NOTE_: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n> buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n> directly within the `mdc-button` element.\n> However, the `mdc-button__label` class may become mandatory for all cases in the future, so it is recommended to\n> always include it to be future-proof.\n\n### Sass Mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass Mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`mdc-button-filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass Mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`mdc-button-container-fill-color($color)` | Sets the container fill color to the given color for an enabled button.\n`mdc-button-disabled-container-fill-color($color)` | Sets the container fill color to the given color for a disabled button.\n`mdc-button-icon-color($color)` | Sets the icon color to the given color for an enabled button.\n`mdc-button-disabled-icon-color($color)` | Sets the icon color to the given color for a disabled button.\n`mdc-button-ink-color($color)` | Sets the ink color to the given color for an enabled button, and sets the icon color to the given color unless `mdc-button-icon-color` is also used.\n`mdc-button-disabled-ink-color($color)` | Sets the ink color to the given color for a disabled button, and sets the icon color to the given color unless `mdc-button-icon-color` is also used.\n`mdc-button-density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`mdc-button-height($height)` | Sets custom height for button.\n`mdc-button-shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$mdc-button-density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`mdc-button-horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`mdc-button-outline-color($color)` | Sets the outline color to the given color for an enabled button.\n`mdc-button-disabled-outline-color($color)` | Sets the outline color to the given color for a disabled button.\n`mdc-button-outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `mdc-button-horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.14.1/node@v10.18.0+x64 (linux)","description":"The Material Components for the web 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/density":"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/button_5.0.0-canary.391674a26.0_1576696638204_0.46979771350588906","host":"s3://npm-registry-packages"}},"5.0.0-canary.c4837746c.0":{"name":"@material/button","version":"5.0.0-canary.c4837746c.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"958faf44458fd6857471e5c38ef0ee802f3a9f4d","tarball":"https://registry.npmjs.org/@material/button/-/button-5.0.0-canary.c4837746c.0.tgz","fileCount":11,"integrity":"sha512-zoSY+DuIEuxfVB6YOYVRytbUwQ66AuyWfj8y/jQs6cMaxplAlTFI6xrXpoPACOLmKdcoeXTANAx47F4z9hFrgg==","signatures":[{"sig":"MEQCIHkyDrPP8XgKc0KX6bvwyQ5qhWPcjSHJJkKTYxnlOiTjAiB22TPyWz+2Xl+x7wskBdtHBp+8Bcv8udWvZ0aaZ/L5Sw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":200921,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJd+n98CRA9TVsSAnZWagAA5doQAJLojS3XAaV9kE1swc3t\n0YvfMdHpB8add46In3kh9ZgBonKvHcg++EmbOWGpMN+wdoE5BcqW/M4fj60c\nTvrH5pcEXCeHUeK3MMPsgklYPjTCoqSgLwEvwkt572ypVvW0AgTZU+J84O9D\nCKPSkoNUlAWtG98iI0j7T09D+TSkGzTrqzJft6H7fXU9VD7SSqlipFAYbIbM\nZPM1/bfHAydaS/6sfw6LBUkbw4Ph1qpkQraeOUBnKM9uDkjAMwNttyI8SAgY\ncm9Dnd26mW2vGju1mNt+pLa1PRm36gBlZTTIhH/G+eEBHOz06zxPJ/xTT0g2\nXzoDT6cVfYiLOAeLLxMmk15WW9FpaFYRjs3OB5byZj6q7fxyx0a4zfjtMf/A\nskhKLLdNkJZZWa29FoJGRo66qN0XiJC3cdvX1L88Ga38NdjLY9/z2nMW27KE\nak1z/7sdxFyWnLnquRJjvvmIeavxASbgGflLtVtF3lwh/pLovet5FqznlrvM\nQt+ec2vjKl80I4mxzgtmahFmknRo1BIrETl0YK0IRRsoHgBH10jjSeMr0C+x\nkie00m2PG4s37tn1gFRi0l9DZzoKbOCLvCT1qZb7UYIIz093rohNKOETghEF\nca+e3MgwR3TL0+FQCQDKaBl32mHUFJX/pNq7GkbHR9unL1beRjjB3IQqYB2O\nVPOQ\r\n=R4Of\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n\n\nButtons allow users to take actions, and make choices, with a single tap.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/button\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n```\n\n> _NOTE_: Examples here use the generic `\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n> _NOTE_: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Additional Information\n\n### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n\n> \\*_NOTE_: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n> buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n> directly within the `mdc-button` element.\n> However, the `mdc-button__label` class may become mandatory for all cases in the future, so it is recommended to\n> always include it to be future-proof.\n\n### Sass Mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass Mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`mdc-button-filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass Mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`mdc-button-container-fill-color($color)` | Sets the container fill color to the given color for an enabled button.\n`mdc-button-disabled-container-fill-color($color)` | Sets the container fill color to the given color for a disabled button.\n`mdc-button-icon-color($color)` | Sets the icon color to the given color for an enabled button.\n`mdc-button-disabled-icon-color($color)` | Sets the icon color to the given color for a disabled button.\n`mdc-button-ink-color($color)` | Sets the ink color to the given color for an enabled button, and sets the icon color to the given color unless `mdc-button-icon-color` is also used.\n`mdc-button-disabled-ink-color($color)` | Sets the ink color to the given color for a disabled button, and sets the icon color to the given color unless `mdc-button-icon-color` is also used.\n`mdc-button-density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`mdc-button-height($height)` | Sets custom height for button.\n`mdc-button-shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$mdc-button-density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`mdc-button-horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`mdc-button-outline-color($color)` | Sets the outline color to the given color for an enabled button.\n`mdc-button-disabled-outline-color($color)` | Sets the outline color to the given color for a disabled button.\n`mdc-button-outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `mdc-button-horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.14.1/node@v10.18.0+x64 (linux)","description":"The Material Components for the web 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/density":"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/button_5.0.0-canary.c4837746c.0_1576697724169_0.6036897437779478","host":"s3://npm-registry-packages"}},"5.0.0-canary.e41a70425.0":{"name":"@material/button","version":"5.0.0-canary.e41a70425.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"afbd23ab8607a46378e29457a35309975128b956","tarball":"https://registry.npmjs.org/@material/button/-/button-5.0.0-canary.e41a70425.0.tgz","fileCount":11,"integrity":"sha512-9jjm+h1ID2HHxL31RyLIpLo7YnfHlT+cTkBFgP+0+1PGmNCd5pcwgwGcwIHSa8/7Bg5L3NlfCQFJFKJFGf68xg==","signatures":[{"sig":"MEQCIAJbiW4ewaVPll7IOm5Gr3HTAsNBoUg95jKfXFUQnob4AiA/8rBFBm/vp0b9Q9qWkG9b4AF7S4XMqOw2wOK2zkDDiA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":200921,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJd+rQ9CRA9TVsSAnZWagAAML8P/A5OF4GZ00lT4ypGGRP3\nhsLFgypJSY74yWXN+XpSaJkR/ZbA97LuqqMYZAUzv27ax4EHGyBKXTU1lyW9\nmJbFBUpJ529f2k5JHPMHDZMqlMHqpCTlY/ww0tcdmKpSBUxn/mqb9EKxmj4m\nuhTwTG3dyLNstvT4ACIFlshbVcwuUx6vutip67f5e4QcBLxwDeb4jGpRzm/K\ndljuHvkiBZYa98h41guvNoC1KU4miuVlXgF+Lcb9kTRlohRnIT292z9B/CHb\ncIezGnlZ1dGmhlCpdVWO1ZGECR8mNDQpDepONEvYZM9zPKM5wpeIWfH5Gpk9\n8Q1AkO5CTIAk+XfNEhHFKohfMjAi4SJyKJie9zJL3IEWAW/8+AOMhYU1fMff\nAHm1FKVqWOiXLjR3FtYAENsmoozPaLVX5szbRUdL7QuUAWqdFrHtmEOw/mDD\nR/OM1QL2gK2BGcQnaUpOUhis6MpXCCCataIOodwIqEy4gRDDDDNxKHPBcjLm\nvbuFLW0YNadq13wkdOjQJrVLlT1Tr4X32J3tnNU1biHS+R19RVifAzuI8KNN\n7gvxReWGBrOPmmtJs1ULFSb4s/NTlrU/UGzNYK5pbg/MhatRpUmP2jO9RD5C\nFfQPCA4/L3tWCJscvWNUeqZMgAMlhzvisvRQLljzXo5HfpKRfl5h1tY4sTD0\nlcxr\r\n=70e2\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n\n\nButtons allow users to take actions, and make choices, with a single tap.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/button\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n```\n\n> _NOTE_: Examples here use the generic `\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n> _NOTE_: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Additional Information\n\n### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n\n> \\*_NOTE_: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n> buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n> directly within the `mdc-button` element.\n> However, the `mdc-button__label` class may become mandatory for all cases in the future, so it is recommended to\n> always include it to be future-proof.\n\n### Sass Mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass Mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`mdc-button-filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass Mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`mdc-button-container-fill-color($color)` | Sets the container fill color to the given color for an enabled button.\n`mdc-button-disabled-container-fill-color($color)` | Sets the container fill color to the given color for a disabled button.\n`mdc-button-icon-color($color)` | Sets the icon color to the given color for an enabled button.\n`mdc-button-disabled-icon-color($color)` | Sets the icon color to the given color for a disabled button.\n`mdc-button-ink-color($color)` | Sets the ink color to the given color for an enabled button, and sets the icon color to the given color unless `mdc-button-icon-color` is also used.\n`mdc-button-disabled-ink-color($color)` | Sets the ink color to the given color for a disabled button, and sets the icon color to the given color unless `mdc-button-icon-color` is also used.\n`mdc-button-density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`mdc-button-height($height)` | Sets custom height for button.\n`mdc-button-shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$mdc-button-density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`mdc-button-horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`mdc-button-outline-color($color)` | Sets the outline color to the given color for an enabled button.\n`mdc-button-disabled-outline-color($color)` | Sets the outline color to the given color for a disabled button.\n`mdc-button-outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `mdc-button-horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.14.1/node@v10.18.0+x64 (linux)","description":"The Material Components for the web 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/density":"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/button_5.0.0-canary.e41a70425.0_1576711228976_0.479892396903139","host":"s3://npm-registry-packages"}},"5.0.0-canary.bac43eb43.0":{"name":"@material/button","version":"5.0.0-canary.bac43eb43.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"8511737f473d35caecccdff4fb38778c83add6ea","tarball":"https://registry.npmjs.org/@material/button/-/button-5.0.0-canary.bac43eb43.0.tgz","fileCount":11,"integrity":"sha512-BCZwI4UWQPVGzpWcSosI3uxNZe3G0q/0oRhWSaRsUrX7JuAWz1fJ6cHiPiNHxMf6MXm7lDHIePfUQ/d9cYX8qg==","signatures":[{"sig":"MEYCIQDK22uUik/2pEo4DG5OxPHUt26nU3CUU1mA6Cnt/t/rOQIhAIfEPhtUPcML8WWcnYFoOmZSw2KLn7AOELhkFl8IR4yg","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":200921,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJd+rUhCRA9TVsSAnZWagAAvmMP/2Kd+dkZNo7UWem9JyCi\nUEF4zVMiQa63V4/+XLrTh4upJmD/usux0Lh9EuCy6z2owm/c8mVc7f5oWRzs\ntbS8mbqyku0J+wUu0UEdPkZ9FNadYn6xyEvgMfQmvY+q8MRAtIEkKfco5jUv\nY/2CI+lY8fjEuR54qHiG3vlzHi9V5tNzek7V04Vfmi0VROUaXeZcbqJ+cc6t\nL6mb4obWDuqUcOLFgxL0kqA8owDZhVKH6AWh/N0Rjd1c+sMlTB3QrTbl4QeQ\nTnNTkIDKvxvmvXVEp+I0RDOphsKglQyGB1FEUBqR+3HCgOsCc4VnZmItr86G\n8UbKEebBSSxZaM+BC2IyvNvGiEUlm1H6gn+V2WB7XjWfRB+olvUPm6Hi3Set\ny00PkBYv7n7OpaXfvVbcR77s6EnRlTyWUcSD39svtX5bsaB06XkuZox7abmO\nIgHBaJeR4vy4GwFFTH5sQ8v8WZXUtP4fj8FchheaNUaf7naa6lbSdycx5KOF\n5xY395ouY/tVjKGUpPVjcEiMy2giNAHqfRYMIEdMUx+iog8V1W8RV3SB8iSr\nDVLysKUSRA0Hff+NKDzNfkR+3Y73HzHSfL5KEPASZ48TIUE2Jpyj0IQbOW63\nN/8178LdZ6S98847juzV41QNUesCdXM0wFlmAqmVStlyY4ART6GN5wd5KYA8\nuTOb\r\n=rKC7\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n\n\nButtons allow users to take actions, and make choices, with a single tap.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/button\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n```\n\n> _NOTE_: Examples here use the generic `\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n> _NOTE_: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Additional Information\n\n### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n\n> \\*_NOTE_: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n> buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n> directly within the `mdc-button` element.\n> However, the `mdc-button__label` class may become mandatory for all cases in the future, so it is recommended to\n> always include it to be future-proof.\n\n### Sass Mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass Mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`mdc-button-filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass Mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`mdc-button-container-fill-color($color)` | Sets the container fill color to the given color for an enabled button.\n`mdc-button-disabled-container-fill-color($color)` | Sets the container fill color to the given color for a disabled button.\n`mdc-button-icon-color($color)` | Sets the icon color to the given color for an enabled button.\n`mdc-button-disabled-icon-color($color)` | Sets the icon color to the given color for a disabled button.\n`mdc-button-ink-color($color)` | Sets the ink color to the given color for an enabled button, and sets the icon color to the given color unless `mdc-button-icon-color` is also used.\n`mdc-button-disabled-ink-color($color)` | Sets the ink color to the given color for a disabled button, and sets the icon color to the given color unless `mdc-button-icon-color` is also used.\n`mdc-button-density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`mdc-button-height($height)` | Sets custom height for button.\n`mdc-button-shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$mdc-button-density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`mdc-button-horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`mdc-button-outline-color($color)` | Sets the outline color to the given color for an enabled button.\n`mdc-button-disabled-outline-color($color)` | Sets the outline color to the given color for a disabled button.\n`mdc-button-outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `mdc-button-horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.14.1/node@v10.18.0+x64 (linux)","description":"The Material Components for the web 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/density":"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/button_5.0.0-canary.bac43eb43.0_1576711457473_0.015553090586925444","host":"s3://npm-registry-packages"}},"5.0.0-canary.2e491de55.0":{"name":"@material/button","version":"5.0.0-canary.2e491de55.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"1d2325c085c0cdf4094cb6f3aa2daf2a2bc11e66","tarball":"https://registry.npmjs.org/@material/button/-/button-5.0.0-canary.2e491de55.0.tgz","fileCount":11,"integrity":"sha512-CQFVj56WywqXC5XSxEHOlW5Gp/v/RNfhuhF6cOBKbflC8EHzzQIzGh+gz0KRcofi3hEtjlVITZyvL9XDcT0FIQ==","signatures":[{"sig":"MEUCIQDdj6exdZS6JnrKWXyNpobJDBDyKq006vqVJ8E9jsEmYQIgeIjKvmc8OMfI+fMIcINCgoOofwMyZNhh02u9yjD8Mh4=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":200921,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJd+1XXCRA9TVsSAnZWagAAxNAP/RAcDC+oHY/9h/EGT7a6\nD8XPMOx26qxoE/EZLUe3VE3NbV4RGxZIVM2CRqW7sE0em6XfzKIrdgcd222H\nnysfnaWYqprlpTiuTkhTN7a2fsRXT+JC8o4Djs/mboKR1Q5Vo3UGr9gPmruj\nfBamV0+Zp48zKZakQupYanZcV7dOC6/UoRNgUqw9Relhpc94waRwLaCRmREc\nln+g3sL/qocveL5LEuR2gIIOOA40gsTaisDeQq1iZZuGyOnA7ehvRFNPPo4x\nJSRFCqaIVO9DvxMDKdMX7acrLYcxKc8TAWwq3tRTZ3MqlBbG3wXdPMHpT8Nj\nMZdJ5XOreUTpdnhb6lIN4WEphotrcns8RCRWWxrDNGX3Eo3/S87x9agDmp4j\nw3qHaJ0pLa2N/XNQxtKE1tWkvor/MxpovHvXCred6n4dPED6XEpR8tBhdj4J\nMpVAnz0kPgv3HFxSyZXVfpqox1VmPBNevGA2+q+Oj8x4S+3Mn/VFIy7VNTUW\n8/JR8PyaKS8exMnyJUBzn909NlrqIShXQ2XeBENKM5JcE0M2/0u25X9cs53i\nAWmYIUT3g6vJYTPB0LlK39pOKbnfeC+Hm86PVz6vu0x0H5Dv0wBlpNRa5Vt6\nIjuck/h+CbeMPkMYLaXLnfEtHjhu0n++D1EjjNCwmxpZiay6MyeKLm89CEHW\nHk04\r\n=tWGV\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n\n\nButtons allow users to take actions, and make choices, with a single tap.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/button\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n```\n\n> _NOTE_: Examples here use the generic `\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n> _NOTE_: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Additional Information\n\n### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n\n> \\*_NOTE_: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n> buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n> directly within the `mdc-button` element.\n> However, the `mdc-button__label` class may become mandatory for all cases in the future, so it is recommended to\n> always include it to be future-proof.\n\n### Sass Mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass Mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`mdc-button-filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass Mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`mdc-button-container-fill-color($color)` | Sets the container fill color to the given color for an enabled button.\n`mdc-button-disabled-container-fill-color($color)` | Sets the container fill color to the given color for a disabled button.\n`mdc-button-icon-color($color)` | Sets the icon color to the given color for an enabled button.\n`mdc-button-disabled-icon-color($color)` | Sets the icon color to the given color for a disabled button.\n`mdc-button-ink-color($color)` | Sets the ink color to the given color for an enabled button, and sets the icon color to the given color unless `mdc-button-icon-color` is also used.\n`mdc-button-disabled-ink-color($color)` | Sets the ink color to the given color for a disabled button, and sets the icon color to the given color unless `mdc-button-icon-color` is also used.\n`mdc-button-density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`mdc-button-height($height)` | Sets custom height for button.\n`mdc-button-shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$mdc-button-density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`mdc-button-horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`mdc-button-outline-color($color)` | Sets the outline color to the given color for an enabled button.\n`mdc-button-disabled-outline-color($color)` | Sets the outline color to the given color for a disabled button.\n`mdc-button-outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `mdc-button-horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.14.1/node@v10.18.0+x64 (linux)","description":"The Material Components for the web 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/density":"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/button_5.0.0-canary.2e491de55.0_1576752599081_0.30281170075859754","host":"s3://npm-registry-packages"}},"5.0.0-canary.ae101c144.0":{"name":"@material/button","version":"5.0.0-canary.ae101c144.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"69cba0201592cc264740a2e4ddf97c9538896b69","tarball":"https://registry.npmjs.org/@material/button/-/button-5.0.0-canary.ae101c144.0.tgz","fileCount":11,"integrity":"sha512-82PCmiKCfeHqxxHq2wSbiyoJCp72cxUDWQ6f12tNKb+rKWCXtJXrpvl/GzvVhdTYjzNWbNf9KYdzQVnQ7dP/pw==","signatures":[{"sig":"MEUCICqh8ifXomw7BN3Nti9Osdim84VlsRTu1ZR2zVPsXArDAiEAwy3x2oAJNQ460okJysfpQ6tHrp5dPh6/A0PGMDocx0A=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":200921,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJd+6RiCRA9TVsSAnZWagAAEXwQAI8PjGbuBTyfQxStXEMS\nYqE//537RtJUWOOPb0+SL/cA38TK8Ur01XEpSpB/qIp6h0Q71JPWRDR7u84I\nfohvV1oN0c4IV7rFfQWr7O/kWEjwwkHn4/mpurompKGu44OGv+O9uCVnvLix\nNoIHXM0MZIszkRW1IcAAgBxMu/35q4XTSYU4HQrj3dt9MvYI4jse/4GdtQGq\n8mo/R7x/j+ZuQgUPUT5IKcz6nVTE1Q3gf16BKzguD+yOHZk/WSlqraKvRXbq\nCTRqSHHw1ndDIrEsAS4HjDRRZ6Y35m1DkFFVYGP1GBtDe6bG6mstH4a/GJlV\nDbg4vdchcxZc1TV+aahGEj5ryc8u9RxndjEUeO3MTnCPive36Pv6c0BbagYJ\nf85dXZeKhAshdTWoJyQwPO/40DV/vbSnQGZdiaX0R4qrswMjyv5zY/H+/Oya\nSp68NiuhnCwW7VkmCd1Tj8DVC58kmJ6TpzFW09oTqu5ZtCah/7nFRq+It6aB\nhRf3OuAtEizer+baEs18Wi5QavHIOg5VKkAWM6ak9Spw9D0fCUiyTWOxprYX\ng+jpyNWYQeXYSS8gaVQpkyFVQ0oXMUW9vMA1B92bPLfbsxpjTTYOS/mHPXjc\nzjnkNXaT68dhCeBbr1fu07vEFTyZJ9a8thNm7IZ+sl5eL1gnuRi/1QT8hZV7\nOvCB\r\n=RMwx\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n\n\nButtons allow users to take actions, and make choices, with a single tap.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/button\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n```\n\n> _NOTE_: Examples here use the generic `\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n> _NOTE_: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Additional Information\n\n### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n\n> \\*_NOTE_: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n> buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n> directly within the `mdc-button` element.\n> However, the `mdc-button__label` class may become mandatory for all cases in the future, so it is recommended to\n> always include it to be future-proof.\n\n### Sass Mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass Mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`mdc-button-filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass Mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`mdc-button-container-fill-color($color)` | Sets the container fill color to the given color for an enabled button.\n`mdc-button-disabled-container-fill-color($color)` | Sets the container fill color to the given color for a disabled button.\n`mdc-button-icon-color($color)` | Sets the icon color to the given color for an enabled button.\n`mdc-button-disabled-icon-color($color)` | Sets the icon color to the given color for a disabled button.\n`mdc-button-ink-color($color)` | Sets the ink color to the given color for an enabled button, and sets the icon color to the given color unless `mdc-button-icon-color` is also used.\n`mdc-button-disabled-ink-color($color)` | Sets the ink color to the given color for a disabled button, and sets the icon color to the given color unless `mdc-button-icon-color` is also used.\n`mdc-button-density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`mdc-button-height($height)` | Sets custom height for button.\n`mdc-button-shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$mdc-button-density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`mdc-button-horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`mdc-button-outline-color($color)` | Sets the outline color to the given color for an enabled button.\n`mdc-button-disabled-outline-color($color)` | Sets the outline color to the given color for a disabled button.\n`mdc-button-outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `mdc-button-horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.14.1/node@v10.18.0+x64 (linux)","description":"The Material Components for the web 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/density":"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/button_5.0.0-canary.ae101c144.0_1576772706374_0.4156375938097434","host":"s3://npm-registry-packages"}},"5.0.0-canary.a51c31f26.0":{"name":"@material/button","version":"5.0.0-canary.a51c31f26.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"511450745f9bfdb57784847ca3df3890e1a4b45c","tarball":"https://registry.npmjs.org/@material/button/-/button-5.0.0-canary.a51c31f26.0.tgz","fileCount":11,"integrity":"sha512-BRwQ1kKgupRGdOH4uYkL6O8wUKDN+6bHBabq5Kux2uMcRk5WzS8D/NVztWIOMyirH3HWdOWoL/rdiKPFaTIgZg==","signatures":[{"sig":"MEYCIQCaXLCcwNL2wS49y0Y59YzmReUFFmdcRPcgXPAvXpOSSwIhALBkdj/gb8vomWV3W63UoeIXs6Lqn2YNabbkujiM7n9S","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":200921,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJd+6/0CRA9TVsSAnZWagAAhFwP/Al/Pihq4CjDLQI/rfPR\n3wI+jaG7JKpdgNTaUrqi7oPPiNHwd6pqr01dvQwiU8RGpt7GosaK4nYKQi0C\npSSH/SqK3g/Q0aB/uQVcxJayAHv2rZ7JJzcXh2VO/fQb1Qlhd4OjL16fb7uk\nWrLwqwi5A1TE6bAiLhs47HgP/vnkpxrNqWR4KSn6xIqoIhW8TkBTT7KTDfnX\nwRsVadowKvrcDv33r3dEFOYk7C4p4eROQvcS24zK0X/H5UW1Ety/nOVGucnG\nYrhuBJnF0g6gLGvVsrmiVUnOBZfFnKvjVvpsO+Wzff3msisJizhgTWNmJGIX\nmA0fO3dja74AMxpCBuw6eNfHfmTwMrOA33aMaPDJV450Uo6427N4kLPh2sX4\nJN7CykYJgLTilebiEuiAnTEIQ5VZPSHEzaEnjbtWuzfwnKpZCDEIDg7iU7BC\nECdqdwAa1op/8auOJpBIZEx/+VaL3On1OkJEDv1owlhTcfd9T/O/JcfSObeD\nbG7V+ibr0Blk/SqkKF1ymdV6vq7TwSrOzKrr4uAsE4E3glVDQtMmKlH8zgde\nY4nq3w0lbM/URLFu2uSnnSh1qipcE7MZvxAe9YBlaSnXbJ5nYn1BEG9S9Zpu\nRc+pWKImpQYLm1hWo5HaJEXzKzBkSH4t+zfL++JaVoiOLyb1xWqcXjKnYaW0\nBQZU\r\n=S80T\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n\n\nButtons allow users to take actions, and make choices, with a single tap.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/button\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n```\n\n> _NOTE_: Examples here use the generic `\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n> _NOTE_: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Additional Information\n\n### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n\n> \\*_NOTE_: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n> buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n> directly within the `mdc-button` element.\n> However, the `mdc-button__label` class may become mandatory for all cases in the future, so it is recommended to\n> always include it to be future-proof.\n\n### Sass Mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass Mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`mdc-button-filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass Mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`mdc-button-container-fill-color($color)` | Sets the container fill color to the given color for an enabled button.\n`mdc-button-disabled-container-fill-color($color)` | Sets the container fill color to the given color for a disabled button.\n`mdc-button-icon-color($color)` | Sets the icon color to the given color for an enabled button.\n`mdc-button-disabled-icon-color($color)` | Sets the icon color to the given color for a disabled button.\n`mdc-button-ink-color($color)` | Sets the ink color to the given color for an enabled button, and sets the icon color to the given color unless `mdc-button-icon-color` is also used.\n`mdc-button-disabled-ink-color($color)` | Sets the ink color to the given color for a disabled button, and sets the icon color to the given color unless `mdc-button-icon-color` is also used.\n`mdc-button-density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`mdc-button-height($height)` | Sets custom height for button.\n`mdc-button-shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$mdc-button-density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`mdc-button-horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`mdc-button-outline-color($color)` | Sets the outline color to the given color for an enabled button.\n`mdc-button-disabled-outline-color($color)` | Sets the outline color to the given color for a disabled button.\n`mdc-button-outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `mdc-button-horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.14.1/node@v10.18.0+x64 (linux)","description":"The Material Components for the web 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/density":"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/button_5.0.0-canary.a51c31f26.0_1576775667602_0.9372882369814195","host":"s3://npm-registry-packages"}},"5.0.0-canary.21fc4e13b.0":{"name":"@material/button","version":"5.0.0-canary.21fc4e13b.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"1cce2613b8508b2e32c5aa9ed946c3564dd8cd39","tarball":"https://registry.npmjs.org/@material/button/-/button-5.0.0-canary.21fc4e13b.0.tgz","fileCount":11,"integrity":"sha512-dNJd+qpt5s27h/WE/kChCEGhoZQin1TLZRfOX6aCCfVLmHGFUH1/0RGFfc8aPWIhBoVRS64ni+WLH44toWBYgA==","signatures":[{"sig":"MEUCIQCCFrEfQA8OKU3iuoJglOg8RPpW6MlkZbQfr0jfPbYMLAIgTSsmRTa8w6ejEjFQVzu74RmQ4fonTAdBb4pxkeyeezQ=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":200921,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJd++s2CRA9TVsSAnZWagAAtAkP/3nQYZwknx0DFU2XsRJb\n9bm4jPkYWZLiB97Kq9+TvboonMx3H6SUiJ6mO3q1laF65L8OzauuU5InctGH\n+G1VCwBBHzQfjBGJN6VQuQQcoK6ELdszQ224IpdQOlgrN3/i8dT/WNHGntqq\npAyIATnWxBJwWGwPTfI1OgbPwfQr604NlTW7Dj8rRwWTW4VMqsfnZ4V+fhz4\nlTNGdzHCb6A+UVIdNyY0AY1E7YR9fQxNWXumc6UCySabzg9jlZmXV8Vw3CO2\nqttmfHzREh+qbqOH2TJxzjX86E0RcAcW3GzlNOOaYMCkgKCJkgzEUft/zV0w\nbonSKq2zg0Wh0r/OfgDhA5knOckNs7rF/+qu9/rET7Svw2jYh1gwJ/9uZAX4\nIQ2oiGldblFxLavUQ6p8u829ITXEBecJbOY/sWIovTXP3Llh6wSTZvZAOrli\ndSEyIpMqH1e9C3o2aSeaeQw8GAVkZ4st71r2icVtIOhFGLxoTo0om5STIuA8\nuS8+GKL3C/Omr7/JaSpWNgSNcgutipUyiNwOPNZ0PpS3l468LYfBRSz9+fqy\nCH9EiZHH919Y8AyTOiPahv9m+8ywtNv8YshuqyE3m1w/Y1NNIYtywdfIYL5P\nFekj6XrlpuTJKr/usAfpT+lLPk30iP/CAGeFK4kSgOSkrWnMfgUo9yap2tLU\nuvyp\r\n=K2UL\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n\n\nButtons allow users to take actions, and make choices, with a single tap.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/button\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n```\n\n> _NOTE_: Examples here use the generic `\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n> _NOTE_: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Additional Information\n\n### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n\n> \\*_NOTE_: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n> buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n> directly within the `mdc-button` element.\n> However, the `mdc-button__label` class may become mandatory for all cases in the future, so it is recommended to\n> always include it to be future-proof.\n\n### Sass Mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass Mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`mdc-button-filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass Mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`mdc-button-container-fill-color($color)` | Sets the container fill color to the given color for an enabled button.\n`mdc-button-disabled-container-fill-color($color)` | Sets the container fill color to the given color for a disabled button.\n`mdc-button-icon-color($color)` | Sets the icon color to the given color for an enabled button.\n`mdc-button-disabled-icon-color($color)` | Sets the icon color to the given color for a disabled button.\n`mdc-button-ink-color($color)` | Sets the ink color to the given color for an enabled button, and sets the icon color to the given color unless `mdc-button-icon-color` is also used.\n`mdc-button-disabled-ink-color($color)` | Sets the ink color to the given color for a disabled button, and sets the icon color to the given color unless `mdc-button-icon-color` is also used.\n`mdc-button-density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`mdc-button-height($height)` | Sets custom height for button.\n`mdc-button-shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$mdc-button-density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`mdc-button-horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`mdc-button-outline-color($color)` | Sets the outline color to the given color for an enabled button.\n`mdc-button-disabled-outline-color($color)` | Sets the outline color to the given color for a disabled button.\n`mdc-button-outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `mdc-button-horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.14.1/node@v10.18.0+x64 (linux)","description":"The Material Components for the web 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/density":"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/button_5.0.0-canary.21fc4e13b.0_1576790838296_0.145123524836134","host":"s3://npm-registry-packages"}},"5.0.0-canary.d2ae6e17d.0":{"name":"@material/button","version":"5.0.0-canary.d2ae6e17d.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"0826fa7b278f770949da08856aeb8addc4ec448b","tarball":"https://registry.npmjs.org/@material/button/-/button-5.0.0-canary.d2ae6e17d.0.tgz","fileCount":11,"integrity":"sha512-zxRJPRsHFIXrKwh0NauwkSKeGzDT3YLcLevj3sfP7alBkq9ofUSxmHvz7r2s8CKf6ydcTsrZTpARbAnGUcssFQ==","signatures":[{"sig":"MEYCIQCkHSb8n9cIqpePmXDmaVDkiriSFxltHauTSfBRPSsVHQIhAO8pgRl0iC7FYNKil9Y1vMFCtRKrU4trphv6x7lVSjaQ","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":200921,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJd+/iTCRA9TVsSAnZWagAAgx0P/3YYBuh5f7xUEipgUjqa\n1DrolDig1yZfvjyEByKt+4FKKuRIwCkZvRTcR1V/BtO5Fa8FbxuWoVSU17JW\nbbp3Tvz1lRsGFpiR7zXx/LXzOfudVdkel+eOCYBWTbKxrLqdb6Uo+TqjSbwd\noOVnLq4xbdkL2rbuRvkQ4L2xB14XfCG6F6T/mcjD23iU2U4vBkiTX189EsaB\ndNpgJP2hHQZMfmGIc5KI/Hbsf+KS2TbHOyTKf9fN8MXstaPNqRZasQ6gE1p7\n1iKju2sS6eBL7C4HOTBddCvS8bgnps6iEim68irUNbZ2UwTh1vNgcklXZRWu\ne7MSdqd+TPzDdr8w3aOToPhpEBl1HIYXtvZZg7WCluhFymOabqH71M28FYHq\ncBNCwmDpeuqkx4Cz8srOlMIyChykEo7xCcAw4v0KUJZ/dYfXgqaiPI4FxISz\nXQ4pxiLjrq+wGjkJAJpZoSoGrCFY0oZnwk/J+zI87EJi7fL/gjTuRXRh3A57\nzGC0HK9IFQ/Pm+E8g58rMeVGAfi/hY8wfxws5bFmtq68iDvXMRo63KlGz4H6\ngJNTLwLX/mzRvKtfqRleY0tieYSjA6IurLKTRxvPs29Mo/diGlj1jyJMlwpr\nVuwi7mpdqUij0LPNki32Qs1G1ypCIVl824Wg3JPAbuP1h9/pbCrB6dSwyE/t\n4QYr\r\n=oKIe\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n\n\nButtons allow users to take actions, and make choices, with a single tap.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/button\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n```\n\n> _NOTE_: Examples here use the generic `\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n> _NOTE_: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Additional Information\n\n### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n\n> \\*_NOTE_: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n> buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n> directly within the `mdc-button` element.\n> However, the `mdc-button__label` class may become mandatory for all cases in the future, so it is recommended to\n> always include it to be future-proof.\n\n### Sass Mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass Mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`mdc-button-filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass Mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`mdc-button-container-fill-color($color)` | Sets the container fill color to the given color for an enabled button.\n`mdc-button-disabled-container-fill-color($color)` | Sets the container fill color to the given color for a disabled button.\n`mdc-button-icon-color($color)` | Sets the icon color to the given color for an enabled button.\n`mdc-button-disabled-icon-color($color)` | Sets the icon color to the given color for a disabled button.\n`mdc-button-ink-color($color)` | Sets the ink color to the given color for an enabled button, and sets the icon color to the given color unless `mdc-button-icon-color` is also used.\n`mdc-button-disabled-ink-color($color)` | Sets the ink color to the given color for a disabled button, and sets the icon color to the given color unless `mdc-button-icon-color` is also used.\n`mdc-button-density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`mdc-button-height($height)` | Sets custom height for button.\n`mdc-button-shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$mdc-button-density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`mdc-button-horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`mdc-button-outline-color($color)` | Sets the outline color to the given color for an enabled button.\n`mdc-button-disabled-outline-color($color)` | Sets the outline color to the given color for a disabled button.\n`mdc-button-outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `mdc-button-horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.14.1/node@v10.18.0+x64 (linux)","description":"The Material Components for the web 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/density":"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/button_5.0.0-canary.d2ae6e17d.0_1576794259124_0.7404951428698876","host":"s3://npm-registry-packages"}},"5.0.0-canary.ba30399ad.0":{"name":"@material/button","version":"5.0.0-canary.ba30399ad.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"14dc7a3c636279fce637e970eb698345e8597ba0","tarball":"https://registry.npmjs.org/@material/button/-/button-5.0.0-canary.ba30399ad.0.tgz","fileCount":11,"integrity":"sha512-WvI7bwDpiMyGnWz9jMB9PLwqmoPhpqj8YRIhHevh+Thk77TKKcrznSrD/ceEcG74hL1hDS6TW0OGAhDEoxXvgw==","signatures":[{"sig":"MEQCIBvPzltgNl+zRFH5E6hkJaYQv7Ym7Oj8FveVuQVoC0cpAiAMhS6p1eQDnZgNwelPHC1zBkBgmtDsGad34tE3qiEDkg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":200921,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJd/B9xCRA9TVsSAnZWagAA9XkQAIpj82dgpk58Yh/uHtx4\nTiyHxCNDDmJKr4984z3wkFE27sdFXzBCEhucbHc8+HC150wnLTQOmgA1BTkG\n4Dm5aYPkXt4YLamomMzIHc8XKJSHMB3EmUpjX9d3w//PvrWLQ4/4WHeuJolV\nn4UosP2035XKCHpqADJ8GijGMihBpWzGzMv4q53kvTcA+gvTs0IS5rEf614Y\nMAZR0OPxipI7ndpIzVxsJ3/HAL+biBPTkWZ76PbKmsNP4ctHHSw8o5qEyrZv\nMmaWxxaqulfCkDYnxnTDQIQgKf9HQyQSIgpNVItEMqaUIxHNEMGpmvVVsL3L\nEEpFRpnMDej21ZMgOB7M3AmHNUTpllVWZwJ1hOgvKbcCHyNOVKgSfeX0oj9F\n5ZYUssy2P4OmWULRoZrWnuj+oJEx3Fh3z/Tei2c6E64uaI83xLOzQG2kQwM8\ncZXqEky8a8Dw0KfxAVIyN2H9m+aC8zWU1u7rLvCMdwDk2mncfIkbQne0qxRr\ni8IZGzGvRiPHRUWMrYaT87lh67NcEmWP3NIu11UGge+cQjnPTJTx7RnccMPM\nEd2BvlteCl0Owf+j2LSWHM43yGnGpikbsU1y8ZKH8SU6UxDG2bdPDeOQ2inj\nNgtOyR2YDbWTk/X6JHftqvV7av1K8+F6LXFI22K73hGJZ50bSm9bj2SUigZO\napym\r\n=KDz4\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n\n\nButtons allow users to take actions, and make choices, with a single tap.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/button\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n```\n\n> _NOTE_: Examples here use the generic `\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n> _NOTE_: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Additional Information\n\n### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n\n> \\*_NOTE_: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n> buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n> directly within the `mdc-button` element.\n> However, the `mdc-button__label` class may become mandatory for all cases in the future, so it is recommended to\n> always include it to be future-proof.\n\n### Sass Mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass Mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`mdc-button-filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass Mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`mdc-button-container-fill-color($color)` | Sets the container fill color to the given color for an enabled button.\n`mdc-button-disabled-container-fill-color($color)` | Sets the container fill color to the given color for a disabled button.\n`mdc-button-icon-color($color)` | Sets the icon color to the given color for an enabled button.\n`mdc-button-disabled-icon-color($color)` | Sets the icon color to the given color for a disabled button.\n`mdc-button-ink-color($color)` | Sets the ink color to the given color for an enabled button, and sets the icon color to the given color unless `mdc-button-icon-color` is also used.\n`mdc-button-disabled-ink-color($color)` | Sets the ink color to the given color for a disabled button, and sets the icon color to the given color unless `mdc-button-icon-color` is also used.\n`mdc-button-density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`mdc-button-height($height)` | Sets custom height for button.\n`mdc-button-shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$mdc-button-density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`mdc-button-horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`mdc-button-outline-color($color)` | Sets the outline color to the given color for an enabled button.\n`mdc-button-disabled-outline-color($color)` | Sets the outline color to the given color for a disabled button.\n`mdc-button-outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `mdc-button-horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.14.1/node@v10.18.0+x64 (linux)","description":"The Material Components for the web 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/density":"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/button_5.0.0-canary.ba30399ad.0_1576804208876_0.23107639591809992","host":"s3://npm-registry-packages"}},"5.0.0-canary.a08ccec35.0":{"name":"@material/button","version":"5.0.0-canary.a08ccec35.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"b57f027e6b5198b00e0b0f946ab6fafcbd93fd20","tarball":"https://registry.npmjs.org/@material/button/-/button-5.0.0-canary.a08ccec35.0.tgz","fileCount":11,"integrity":"sha512-xjuZdJ/7/gJN11KH3ztrIMXtlgr9VoLHosExSw/EiELlSwpQ+MvcXVo+9tJ56aF4lsj2UZ5woV+ZoNFp9BUZug==","signatures":[{"sig":"MEQCIA/VchDFco0HyZbB6KDqW7Cf+oIfxladkdN1qvTDXLAVAiB6AhQo2kWp6Qr1aDHpw0kcva6o/5qfQxt0lsohPh9aqg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":200921,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJd/VjCCRA9TVsSAnZWagAAbDEP/1X4PSPkHAZgQBp3RIl3\nhZs6M2baGvLCuu6gAcj8oxrwzBdhBxbhRDcZs+c2HsEeto8ZUeMFljvb2Eeu\n2AJr5tNsSipj03jixZTnNZT5IewFWOQ2jM1WyghMPpPf05nLdKxF6pSi2pls\nbOGAavW4DSWywrJ0pqutW3/I6ySP35ff0zGgsGWMo6+eMRnBlaH7E0rY1Oe2\nk8cCd6IRy84h65cmh2/Y5xNeCqR7qTKWLK3fwYtseb8Y/3ZWsvAYdc4BbbUG\nqikxRlr4bafw4i9dUoUmQDnk4OcXXs00L2014XD1wfaBdSUEmbpNI99D56nf\nBL3npsFUPqO/0/uN/S8cp9MXVDt2B1IM5ZX2yHQE5ICs0wf/mZqhLtWsjjh+\nF35VcfHJflobivbqW91pbr8DK+Ayg0gyfNOxeX/N7MxVUdbTxksO+eRDS/37\nc1RrpIMG56zn3r+dPcwX4p4kl6sd/txa/v0ujXRZVftAwBx0dvy5KXCVCI2p\n+ocud9D1ajpSjadieH5Fc3Kf9ZJ2ALO1oaH6TRdH/TM1uRBT5fUABIKGNyZz\nPx4A1hX288GSz1Tp5QnVvWLv3T58g3Odv2ljgJYPKl8IZ8Pfwumu/1L45BSh\nQQsagjkKWzv1OGVHA5ZLc8VbAiJ1t/nkn7eVLwaEFj7l4leyySgDHuhW4BPS\nhgrc\r\n=as51\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n\n\nButtons allow users to take actions, and make choices, with a single tap.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/button\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n```\n\n> _NOTE_: Examples here use the generic `\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n> _NOTE_: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Additional Information\n\n### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n\n> \\*_NOTE_: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n> buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n> directly within the `mdc-button` element.\n> However, the `mdc-button__label` class may become mandatory for all cases in the future, so it is recommended to\n> always include it to be future-proof.\n\n### Sass Mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass Mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`mdc-button-filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass Mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`mdc-button-container-fill-color($color)` | Sets the container fill color to the given color for an enabled button.\n`mdc-button-disabled-container-fill-color($color)` | Sets the container fill color to the given color for a disabled button.\n`mdc-button-icon-color($color)` | Sets the icon color to the given color for an enabled button.\n`mdc-button-disabled-icon-color($color)` | Sets the icon color to the given color for a disabled button.\n`mdc-button-ink-color($color)` | Sets the ink color to the given color for an enabled button, and sets the icon color to the given color unless `mdc-button-icon-color` is also used.\n`mdc-button-disabled-ink-color($color)` | Sets the ink color to the given color for a disabled button, and sets the icon color to the given color unless `mdc-button-icon-color` is also used.\n`mdc-button-density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`mdc-button-height($height)` | Sets custom height for button.\n`mdc-button-shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$mdc-button-density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`mdc-button-horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`mdc-button-outline-color($color)` | Sets the outline color to the given color for an enabled button.\n`mdc-button-disabled-outline-color($color)` | Sets the outline color to the given color for a disabled button.\n`mdc-button-outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `mdc-button-horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.14.1/node@v10.18.0+x64 (linux)","description":"The Material Components for the web 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/density":"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/button_5.0.0-canary.a08ccec35.0_1576884417726_0.224785133784851","host":"s3://npm-registry-packages"}},"5.0.0-canary.a2f75105e.0":{"name":"@material/button","version":"5.0.0-canary.a2f75105e.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"6cb444151ff9f9b9e747f219e1303c7b7ee25685","tarball":"https://registry.npmjs.org/@material/button/-/button-5.0.0-canary.a2f75105e.0.tgz","fileCount":11,"integrity":"sha512-0GLnsQUDd5VTKpUF23ET2ypGuOBBjJJ1e+9/JJBp7jEW9Ox1YAskDoHUBO62I/kJ6P7147as8UFUVyAGnkSCYA==","signatures":[{"sig":"MEYCIQC4ZmH7mdVoPTAG0AgMFl5i1oHl21cH+Re5SLu4MpMfBwIhAN6pIlvYv7sGV6EoWyrIKKguM5U0gHad1F37NzzgbAW1","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":200921,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeARnsCRA9TVsSAnZWagAAVZgP/i9YQVcoHAP27GGMkJ4L\nVwCNUz8RGIZAb7XUjYwMIl3qect2ey0hO5ZPF1/wBz2Mj9DjwulYsJeYPee0\n4OVRzsKad+twR1/+E1++nMB1TD1H9wdJBBIGuHzT+am3Upe3xUWj4EnNZi3R\njDZExU4NLQt+TLgQGov/uc4rocvYUT9OBeoZ4jM4WJgDyRgDq1z4W9slL3FU\n/zxNskBBSeZ87LST4zgS7QzaTRmnLX4gWUMsj3zDFeEUoS2aZ91NMIC8A5BG\nORxQGvWdNsIi46Z/C4nLVn3ZqZaG1V5rKQ69zn5nIwwZulE1LWClEYSWERxi\nzwCElkB3hHfSnHI55MbLfdpLtv75QsJpZ0g2tZJQEYWz3G4nOtVN8UG+I1Kl\ngYdDK4IBO1n56IOUjv3qA35q3H3KSTsA6gLKFLwZVuq1L5KHwn0iMkbPsBDH\nE6GVcRu6hrHeW8OVfChfqp9r9VUu5yUU2bueukDi0j9pnyjNq47keXN24kME\nhc06zMscJEUn4F9TzgCz+sEwUv5mIE+ypoCrBxkP4q8eIRUl+zrZC0IWOuwU\nMIGFc5/M+97uhQrFsrwCVgu4rLvGw/7wi6L+npleYuRvxAvcsHaTWR/OdpDJ\nE/52kFshr3nbWmlaQj1ODwA08Qi2yxFrZpFTi4qhGKIyh1fhY6uIA0K/oH5z\n+tUR\r\n=C3vW\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n\n\nButtons allow users to take actions, and make choices, with a single tap.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/button\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n```\n\n> _NOTE_: Examples here use the generic `\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n> _NOTE_: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Additional Information\n\n### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n\n> \\*_NOTE_: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n> buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n> directly within the `mdc-button` element.\n> However, the `mdc-button__label` class may become mandatory for all cases in the future, so it is recommended to\n> always include it to be future-proof.\n\n### Sass Mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass Mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`mdc-button-filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass Mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`mdc-button-container-fill-color($color)` | Sets the container fill color to the given color for an enabled button.\n`mdc-button-disabled-container-fill-color($color)` | Sets the container fill color to the given color for a disabled button.\n`mdc-button-icon-color($color)` | Sets the icon color to the given color for an enabled button.\n`mdc-button-disabled-icon-color($color)` | Sets the icon color to the given color for a disabled button.\n`mdc-button-ink-color($color)` | Sets the ink color to the given color for an enabled button, and sets the icon color to the given color unless `mdc-button-icon-color` is also used.\n`mdc-button-disabled-ink-color($color)` | Sets the ink color to the given color for a disabled button, and sets the icon color to the given color unless `mdc-button-icon-color` is also used.\n`mdc-button-density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`mdc-button-height($height)` | Sets custom height for button.\n`mdc-button-shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$mdc-button-density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`mdc-button-horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`mdc-button-outline-color($color)` | Sets the outline color to the given color for an enabled button.\n`mdc-button-disabled-outline-color($color)` | Sets the outline color to the given color for a disabled button.\n`mdc-button-outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `mdc-button-horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.14.1/node@v10.18.0+x64 (linux)","description":"The Material Components for the web 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/density":"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/button_5.0.0-canary.a2f75105e.0_1577130475753_0.03452284371611092","host":"s3://npm-registry-packages"}},"5.0.0-canary.c054a24c7.0":{"name":"@material/button","version":"5.0.0-canary.c054a24c7.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"6c1da3ccb649f7fc439512da5482bbc83df91a19","tarball":"https://registry.npmjs.org/@material/button/-/button-5.0.0-canary.c054a24c7.0.tgz","fileCount":11,"integrity":"sha512-jjC4G7OiIw8jD//hdRtsYdMq61ti+5VEvSm2wSVE+BUGWlNPyXzZhb7sa3/I4FgUuQ5QSFao79TXsOKynO3kNg==","signatures":[{"sig":"MEUCIFLnB06ZT60AZpjfhMdP1gsG35yEXocAs2uwSdkgF5YUAiEA3ZO/4zWWwMWIU/Y8nGpAjRJKWHLgoKgjtof6uYAnnIM=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":200921,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeATaVCRA9TVsSAnZWagAAlRkQAJqB5dazePfgEgCvukN7\n0OeqhGxbJ3eXj2ENaHlkknmfdb2Gj+S2gfR6v1OpxBJEQIUsk0b/nDuj2xro\nKVkE5/POnpCjbi1Jn+4h/kcOO7x0xzppHpiwFQ0Kc8+nbq3+3yUuyClVbXp/\nuHUo7YaXkFgWRdlwlvbFTeLwk69VqeYpNNEZ+/WQhK+VHmv2qPb2tXs6g6GM\nvGgqhM9niBinPswaIgzKIJwEOCCoPMnk791pJRuybcJI805RjEhEQbvMTbzR\nYq0x7FhEacdFRjWbCrONtcb/MhYx2bfrOKykJ80A/ANIdom769DToOBULwQZ\nAynjfnsqzZKtRsDrqbOV/ya7iEmrMJEVXq1xw3tdQtTdX+BPRbyjkK5nHpVK\nrVM0isAvm3LF+flC0zUhr3Kq/uZ/TeKs+5iUnxTzd13+EGiCXwDuOrp4Zw4K\nEgPb3XwU4j+Xu4e2C9bkxBitSxxsUmfiHcFAm3jXdhmzkDLvFU4/0a0k3fvA\n5YoY1mVJOGG6VVFEvWjxltq5qfa2WQ2cYgqtsEaBlcZZ1dJRyHqAHrLdlB2Q\nXvuQbfgtNYiDwet+0dlYxQtNlEjPea1DB7R2Ebs+bDTv60C/bUXgrRAmQtLC\n6Ar7AJvVIoGHgRavjr5vl4QZt2ax4zQSt8XznhvTcGiCFZvBfGt8Y+pjbnTr\n31sx\r\n=smsO\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n\n\nButtons allow users to take actions, and make choices, with a single tap.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/button\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n```\n\n> _NOTE_: Examples here use the generic `\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n> _NOTE_: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Additional Information\n\n### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n\n> \\*_NOTE_: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n> buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n> directly within the `mdc-button` element.\n> However, the `mdc-button__label` class may become mandatory for all cases in the future, so it is recommended to\n> always include it to be future-proof.\n\n### Sass Mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass Mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`mdc-button-filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass Mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`mdc-button-container-fill-color($color)` | Sets the container fill color to the given color for an enabled button.\n`mdc-button-disabled-container-fill-color($color)` | Sets the container fill color to the given color for a disabled button.\n`mdc-button-icon-color($color)` | Sets the icon color to the given color for an enabled button.\n`mdc-button-disabled-icon-color($color)` | Sets the icon color to the given color for a disabled button.\n`mdc-button-ink-color($color)` | Sets the ink color to the given color for an enabled button, and sets the icon color to the given color unless `mdc-button-icon-color` is also used.\n`mdc-button-disabled-ink-color($color)` | Sets the ink color to the given color for a disabled button, and sets the icon color to the given color unless `mdc-button-icon-color` is also used.\n`mdc-button-density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`mdc-button-height($height)` | Sets custom height for button.\n`mdc-button-shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$mdc-button-density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`mdc-button-horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`mdc-button-outline-color($color)` | Sets the outline color to the given color for an enabled button.\n`mdc-button-disabled-outline-color($color)` | Sets the outline color to the given color for a disabled button.\n`mdc-button-outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `mdc-button-horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.14.1/node@v10.18.0+x64 (linux)","description":"The Material Components for the web 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/density":"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/button_5.0.0-canary.c054a24c7.0_1577137812671_0.5042143259835474","host":"s3://npm-registry-packages"}},"5.0.0-canary.c6808c51c.0":{"name":"@material/button","version":"5.0.0-canary.c6808c51c.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"b549cdb6375a309136e40bde62d9db840899115f","tarball":"https://registry.npmjs.org/@material/button/-/button-5.0.0-canary.c6808c51c.0.tgz","fileCount":11,"integrity":"sha512-BpwgOF69nhMwWqUYuHAdiYZ3dntCCilXw5PZ0lYaLsX+fpBh/03OgVwXXxj2Ux4uP6e++tzPbmn8WruWHeGlyg==","signatures":[{"sig":"MEYCIQCrlajlNWAlSn2XAYd5C1vzrJbFH4ZK+ugTUts3Bn6Y1gIhAN2zNgYSzlSw6YQv5my7E7T5nN/i1uM0fWS6QRAO5aoU","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":200921,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeATeoCRA9TVsSAnZWagAAGEUP/R6BcCDkDtuBVA/XWVLs\ndB5yWpWpNUHD7wEUycemlERB55hdean/qFqkZiHxzc8pI9HGp8s5i/viMsSH\nWBKCiCBQlngnOO/d1Q+21a3AjPRaOZ374JWI79gcc7W+lIisrQa60mDDZNTz\nPecN5fID65hVYpIQKjvq/sAIV5g/xMJvUH2wiEFUJJ1NsmhMav+Nywmuddzc\nmqTwPBxXeeDkIgfIyF6O1OqXdgfGLhaVkvTHSQhBPafP8IRRHTECYsoF+UDa\nqlYiLOkV4EsvRFQ7z/KMIe8o31VA0ArDyVq+oOMN8hvJLg1Y/jlwuNg25muX\nbVg7LE6ik27ULJh1YIW9EDBIYDq1t09Ss+cOoX6P5veN49VRcnxFYSyq5ixm\nwl8O51gfpOt0moX7klw3nQDawfWPLlzwpxKXMfoBMtRzvHbLTqxUatTgwoDd\nkeI3WhwaudDA5hH9UI8ZZ8zXMOG0jwdC+kU+jEEtJ34oZyniMsb0tClkFWyl\nSBXVMFodJYZrEbPHnBtZumHX0RuQr7XO35TnOlJ+83CU5kL8ntVVjNeJmM3P\njjI8tMV2Nt+unsUrQZYG/+h9pH7oiXznOaU1wVWx2vwnWfeFoUFZWANHNUeF\nnLoD0/cU89pv75vhGVunCPa8mocmaMwWN2+/FWQRTe0DlHJ8sCleWj2eGusW\nyOjs\r\n=gjUu\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n\n\nButtons allow users to take actions, and make choices, with a single tap.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/button\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n```\n\n> _NOTE_: Examples here use the generic `\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n> _NOTE_: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Additional Information\n\n### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n\n> \\*_NOTE_: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n> buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n> directly within the `mdc-button` element.\n> However, the `mdc-button__label` class may become mandatory for all cases in the future, so it is recommended to\n> always include it to be future-proof.\n\n### Sass Mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass Mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`mdc-button-filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass Mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`mdc-button-container-fill-color($color)` | Sets the container fill color to the given color for an enabled button.\n`mdc-button-disabled-container-fill-color($color)` | Sets the container fill color to the given color for a disabled button.\n`mdc-button-icon-color($color)` | Sets the icon color to the given color for an enabled button.\n`mdc-button-disabled-icon-color($color)` | Sets the icon color to the given color for a disabled button.\n`mdc-button-ink-color($color)` | Sets the ink color to the given color for an enabled button, and sets the icon color to the given color unless `mdc-button-icon-color` is also used.\n`mdc-button-disabled-ink-color($color)` | Sets the ink color to the given color for a disabled button, and sets the icon color to the given color unless `mdc-button-icon-color` is also used.\n`mdc-button-density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`mdc-button-height($height)` | Sets custom height for button.\n`mdc-button-shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$mdc-button-density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`mdc-button-horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`mdc-button-outline-color($color)` | Sets the outline color to the given color for an enabled button.\n`mdc-button-disabled-outline-color($color)` | Sets the outline color to the given color for a disabled button.\n`mdc-button-outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `mdc-button-horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.14.1/node@v10.18.0+x64 (linux)","description":"The Material Components for the web 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/density":"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/button_5.0.0-canary.c6808c51c.0_1577138088491_0.8958309577250092","host":"s3://npm-registry-packages"}},"5.0.0-canary.7bce9cf77.0":{"name":"@material/button","version":"5.0.0-canary.7bce9cf77.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"744511da791048dacabd513662cb608206eae391","tarball":"https://registry.npmjs.org/@material/button/-/button-5.0.0-canary.7bce9cf77.0.tgz","fileCount":11,"integrity":"sha512-7iuL/bXNLgNAGfFf+IneFiH1LGVgIiEBOGy0Vcm0buricUTe8AW5o2zWO8X98uxsYLy9h8LDuIyF1KTNa4+yrA==","signatures":[{"sig":"MEYCIQC+69YovNDevSQr0zLu85ZnS4tI617vIXAo6PC/FQ+a5QIhANKpoBhdgKJ/wBzbOFDm7RtxnzGIZW+WeEl3KkHCjCyI","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":200921,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeBP/fCRA9TVsSAnZWagAAZVwP/AsmEuoFJB/ETdwXUQbT\nsNuszr9M3LjMHXXtgbAtCA+pdQXed2Klz00DejbfwV9irXCEXs1PeGsp8Esz\npLLfoCV8NF/utEt7pvVgzVB5s5ZAUJJl3BrRtAmeCirr4C7RHNncQm/MpXmO\ntl9Hgo7I1K3orNz/AON2Mu7FFbFX6g2+xYwjn0bljLt6JSXbTzZSlWmPthP9\nDfaHANCCRD2jX5JFgG57DWjC2fxFX5HtfyyEgFraHuSaVwULUaKT9DaFlI5u\nvEIz183QVOy2ee9CgzPpqplwFrf6rz0lybJXEhdGjUyfLYY/lkv1zmsM4eyO\n/peBqdikgdn+G/Wf6lbFTBao8SVJJDDCp6RGKX19B1UhLVGcSL36/40E5p4A\n5x1bD0HZlUb9W5wfLp1IN4kFAJJZgdlzm8rXdngLcCT80g1xMXNjKRnQDnOD\ndczyblCjHeI41g+L6FoXLHKS5q1VBlAkaeCHg+iHbUqf8lubB7xegFwjWkMd\nOe2gVSszrAu4M4r7cK2HkuvcNBorf7Jt4kUj6cGkOJWL9e0wrYsF48hQw992\nNLNwdYkqwg0VqcaXoTKnoLDYInV/gw1PE5MA6DHp5U8CF9+UWRRGi6ZBm6zI\nra1IfTMrx6Y9e4BHSPySmKNYTW739F9JB2UhaMZc+RaFRfHwCeliwwB6miRD\nRFVr\r\n=nClc\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n\n\nButtons allow users to take actions, and make choices, with a single tap.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/button\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n```\n\n> _NOTE_: Examples here use the generic `\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n> _NOTE_: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Additional Information\n\n### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n\n> \\*_NOTE_: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n> buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n> directly within the `mdc-button` element.\n> However, the `mdc-button__label` class may become mandatory for all cases in the future, so it is recommended to\n> always include it to be future-proof.\n\n### Sass Mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass Mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`mdc-button-filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass Mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`mdc-button-container-fill-color($color)` | Sets the container fill color to the given color for an enabled button.\n`mdc-button-disabled-container-fill-color($color)` | Sets the container fill color to the given color for a disabled button.\n`mdc-button-icon-color($color)` | Sets the icon color to the given color for an enabled button.\n`mdc-button-disabled-icon-color($color)` | Sets the icon color to the given color for a disabled button.\n`mdc-button-ink-color($color)` | Sets the ink color to the given color for an enabled button, and sets the icon color to the given color unless `mdc-button-icon-color` is also used.\n`mdc-button-disabled-ink-color($color)` | Sets the ink color to the given color for a disabled button, and sets the icon color to the given color unless `mdc-button-icon-color` is also used.\n`mdc-button-density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`mdc-button-height($height)` | Sets custom height for button.\n`mdc-button-shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$mdc-button-density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`mdc-button-horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`mdc-button-outline-color($color)` | Sets the outline color to the given color for an enabled button.\n`mdc-button-disabled-outline-color($color)` | Sets the outline color to the given color for a disabled button.\n`mdc-button-outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `mdc-button-horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.14.1/node@v10.18.0+x64 (linux)","description":"The Material Components for the web 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/density":"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/button_5.0.0-canary.7bce9cf77.0_1577385950813_0.3888715715764073","host":"s3://npm-registry-packages"}},"5.0.0-canary.c92f038c3.0":{"name":"@material/button","version":"5.0.0-canary.c92f038c3.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"785fd24eaa471ffe93d5b0195a08a1edbfbdd2e6","tarball":"https://registry.npmjs.org/@material/button/-/button-5.0.0-canary.c92f038c3.0.tgz","fileCount":11,"integrity":"sha512-6kBBv8dOI6keqHdVWWxNw0TI1AbrjhdtaS6EjSvr394LPLtBLtoJv0Qmc1QfCc7Yg+a8V92pvxKdQcvv54UsUg==","signatures":[{"sig":"MEUCIQDkKFF8rVG+iSO9hE/SgrBr/HlQZu4FJuXNwdjY127oNwIgabCo7lGWAq5g1o8X9goIhH/47qErF374D8CS4uS5Pc0=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":200921,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeCnQuCRA9TVsSAnZWagAAdzgP/0gJwsLmXz3VILNENtgh\nujbLr0DgDAPv4TO+E7F65VOKAyGTz5IdNnmygWunTE6SvvOlduwaTAbFXqg1\n0aRyBauswYwN+UNWmIM5rD4GwLdmRiLpbZr1aBpAx16aIa/gzYCqZIm6bWcH\nGYrnj4/JYSYerA/bShH1T7/otZQccTqX1fN/tdMqmsDaBz/8o1caNiLw3RWT\nPsa1sdiaFEC6y4F+aruxn5YoFM6PvM/66XytHZf7KEiPZriE3AfMiHqDikF9\nwVWMmyAfvVxSBLXef0Lh+JFHSWcLwJOFOukPz1kMH4fnPMbabcpAS9KAIMah\nH0EvRjgFKYQ/13eCeDOp0zKSo+llN3Qy5B1Cr1HIs/NEnDkeh4yJr/2ewaN7\n0MQpiKtnb0cEvGp/zBRyxUdJe7u82lHDeZRfKixyvWN9OfBN5wMUdlZCGm+a\nKCn+IzfQItK0wfzzPn166uInnHKnYwtQa4QfdVyGH9Mg9+HYqtV2vyIwEblZ\nUZ5GRDPCarQvhFm9N0Eny5R83vOEDn92ahoDvF4aajoJD1rnhp7alSUDOtuI\noIcrBxlb6B8auGesJzkxbnuubOz+qRte6/i+UPhq2keqfFcmmNDeA628uOXg\nX2oTyfJensDNwVG5m3Q+693Q/DQtXwFOcx2TTuawWh9cjgcy6nzivA7IuP2f\n0Ov6\r\n=5O0d\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n\n\nButtons allow users to take actions, and make choices, with a single tap.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/button\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n```\n\n> _NOTE_: Examples here use the generic `\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n> _NOTE_: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Additional Information\n\n### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n\n> \\*_NOTE_: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n> buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n> directly within the `mdc-button` element.\n> However, the `mdc-button__label` class may become mandatory for all cases in the future, so it is recommended to\n> always include it to be future-proof.\n\n### Sass Mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass Mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`mdc-button-filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass Mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`mdc-button-container-fill-color($color)` | Sets the container fill color to the given color for an enabled button.\n`mdc-button-disabled-container-fill-color($color)` | Sets the container fill color to the given color for a disabled button.\n`mdc-button-icon-color($color)` | Sets the icon color to the given color for an enabled button.\n`mdc-button-disabled-icon-color($color)` | Sets the icon color to the given color for a disabled button.\n`mdc-button-ink-color($color)` | Sets the ink color to the given color for an enabled button, and sets the icon color to the given color unless `mdc-button-icon-color` is also used.\n`mdc-button-disabled-ink-color($color)` | Sets the ink color to the given color for a disabled button, and sets the icon color to the given color unless `mdc-button-icon-color` is also used.\n`mdc-button-density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`mdc-button-height($height)` | Sets custom height for button.\n`mdc-button-shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$mdc-button-density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`mdc-button-horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`mdc-button-outline-color($color)` | Sets the outline color to the given color for an enabled button.\n`mdc-button-disabled-outline-color($color)` | Sets the outline color to the given color for a disabled button.\n`mdc-button-outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `mdc-button-horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.14.1/node@v10.18.0+x64 (linux)","description":"The Material Components for the web 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/density":"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/button_5.0.0-canary.c92f038c3.0_1577743406072_0.3855463288884755","host":"s3://npm-registry-packages"}},"5.0.0-canary.1f1ac7558.0":{"name":"@material/button","version":"5.0.0-canary.1f1ac7558.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"263d4ddd6262311896329dcde5b2aed39d0dbb89","tarball":"https://registry.npmjs.org/@material/button/-/button-5.0.0-canary.1f1ac7558.0.tgz","fileCount":11,"integrity":"sha512-oVEyhVWCf65oY+LtBuQi5cL8mcmsz5XscPz6VOibVqmNSGn3Ng/hMNymOt8UGvzYuJPBEUAVw5IIqHj+FS/FCA==","signatures":[{"sig":"MEQCIFst4U83OQIK/+n14HDSstPFR/hkFVHhuKDnKD3fwZUBAiA1HKD2NVf8CZh9QemviLOvRyouMyriXYN2KN5hetKLwQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":200921,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeDlh7CRA9TVsSAnZWagAAHr8P/28TjrxCyZpL+Qqr2H2P\nbEaNPF3kBfIit8dF0+3gphWFOdmVmmnU1VB8Xx7QGM+jjVM/64RurMIl20HM\n3YVTn5XhUt0e044f+Uvz7OidWP5FzeNLq1IwTsurPl6cfg9oj6fInaofTMn3\nG7fcxEGYjGV5yVV7YZ4aucChZTL49M1OAIzaMOBorutlfcEF8txcJwh0laks\n7J0hf8MCTVtsW8IpyxGZtYgqaEfwDKW5apK+J+D3cKdrXyv0fuTbmDnjwYer\n8cB3PHDAJ4pUXkXs8jvigyvW6B2yV5JKPDhbbl301ngSE/NSbHmaJbnSpSAZ\nVy9rZrHZ147gKsi4ogVZYI5vF9G6eREfTZ/YMIMnR23WSbicET8EQ2Ap7GJm\nYzgiFnE2gd6ZWotZbU8+ARSTWM6UIvyBvyO4LqKqYOUafjYHzcGjQhyH4ra0\nKvxOX0LUFJW36Y4o1mUjqHoSedw4FaghauhMMcPkjmmjrazAa7YTfCzwfbFK\nyYtPYMfIPfxjlYFAHN/LV6IddSYJVmo4X4OSaD8WO8qxN+fwPGm3QEnt2FaG\nVMZSHvnFCJ9wAJ6HBqv0KTFp7CT9czKZSFvsAOFI2YF7nZ4zvUTQjUt4q3z5\nPenzQ+Jr0RmOJB306CLiL9RbwQRQm6a/R09r6BmTV/6yVxZrWvelC2ZF88y8\njX2p\r\n=zt5x\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n\n\nButtons allow users to take actions, and make choices, with a single tap.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/button\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n```\n\n> _NOTE_: Examples here use the generic `\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n> _NOTE_: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Additional Information\n\n### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n\n> \\*_NOTE_: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n> buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n> directly within the `mdc-button` element.\n> However, the `mdc-button__label` class may become mandatory for all cases in the future, so it is recommended to\n> always include it to be future-proof.\n\n### Sass Mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass Mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`mdc-button-filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass Mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`mdc-button-container-fill-color($color)` | Sets the container fill color to the given color for an enabled button.\n`mdc-button-disabled-container-fill-color($color)` | Sets the container fill color to the given color for a disabled button.\n`mdc-button-icon-color($color)` | Sets the icon color to the given color for an enabled button.\n`mdc-button-disabled-icon-color($color)` | Sets the icon color to the given color for a disabled button.\n`mdc-button-ink-color($color)` | Sets the ink color to the given color for an enabled button, and sets the icon color to the given color unless `mdc-button-icon-color` is also used.\n`mdc-button-disabled-ink-color($color)` | Sets the ink color to the given color for a disabled button, and sets the icon color to the given color unless `mdc-button-icon-color` is also used.\n`mdc-button-density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`mdc-button-height($height)` | Sets custom height for button.\n`mdc-button-shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$mdc-button-density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`mdc-button-horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`mdc-button-outline-color($color)` | Sets the outline color to the given color for an enabled button.\n`mdc-button-disabled-outline-color($color)` | Sets the outline color to the given color for a disabled button.\n`mdc-button-outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `mdc-button-horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.14.1/node@v10.18.0+x64 (linux)","description":"The Material Components for the web 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/density":"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/button_5.0.0-canary.1f1ac7558.0_1577998458875_0.590234573880795","host":"s3://npm-registry-packages"}},"5.0.0-canary.ec26e799c.0":{"name":"@material/button","version":"5.0.0-canary.ec26e799c.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"521ef5584d8053942604e8dc1eaa34bd286b7b77","tarball":"https://registry.npmjs.org/@material/button/-/button-5.0.0-canary.ec26e799c.0.tgz","fileCount":11,"integrity":"sha512-hgx0rKcJbVTSclM37rMlDdzfl6tgNxw9Vsdaqh0lSpbI+iBzgHKVxRdjhIPekjjqKLK6NqyWTHLl7wNuOy/awA==","signatures":[{"sig":"MEUCIBg9iT4aNpM5+PnD2/dZXHlT90IAc+EJMOyGnLNYtFnNAiEAhmpLDUmFkn+KkWcg+AC032ZXj5CvyHLdCVUHzfaiZds=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":201191,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeDmPHCRA9TVsSAnZWagAA+lYP/1xHDSeF9RwGah/k4NhY\noJjCP5QGRWuSGqRZSdM36u78Yxd/XW8FLXxYng23419eTe3paHnfYvgp+uey\n22ndQIpRXk75oXa97SXObFASeTcvXYk1u38KoM8R3nJPvXElOrCG1kwealyX\nNt1OK3aRuqs+rFDzjNzF3ejZgFJ7q84wpmoXxL6Tdb2UOd8L6y7az6fRhxyB\n0ohCeyeRVP5Gr4h3TmjoHAB8oMX7HaLMOMlyeoz2ZkGJSdArkUecbyDCn3ww\n1F4v5Y8v1ZCEPpnJh98zpvmN8DJ8SfDS5QZSEjl5JErz0DUsuSm8PlAvNpyX\nJaCGNij5zC/jy8vU+sYxSzEcY6LPygKPvhoWSaS/FMu+sUHOHbJz0cujhVXz\n8n4vht0idSEhpxGD6NtTnpbmR+IECF2M90VkRYfU1d7tbIVqKmAtiRk5ZJDY\nqeXD7hhIc7WERBjCyNA6sRfyi4Cxwt4j3lBPRTSEsO/IZOrPbihQyKssiN4P\n2JjqeMOSem8sxZ7XKqxX3wIQJ9l09yHlpA6gdxXbCs+dsCGWr1+mZWXcmXip\n3Vrh/h+6tJBBwfbZ1J3ataPliAA+iSqXRgGY8j9eKezjJNGe2h58hnEoPR9i\n8WxeyyE7rndyvPHWjXDsV+d6AkVGMzUm6Ew3caOTKZKMp1CBZSwxXfAkU+qZ\nDq3h\r\n=4q2o\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n\n\nButtons allow users to take actions, and make choices, with a single tap.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/button\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n```\n\n> _NOTE_: Examples here use the generic `\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n> _NOTE_: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Additional Information\n\n### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n\n> \\*_NOTE_: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n> buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n> directly within the `mdc-button` element.\n> However, the `mdc-button__label` class may become mandatory for all cases in the future, so it is recommended to\n> always include it to be future-proof.\n\n### Sass Mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass Mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`mdc-button-filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass Mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`mdc-button-container-fill-color($color)` | Sets the container fill color to the given color for an enabled button.\n`mdc-button-disabled-container-fill-color($color)` | Sets the container fill color to the given color for a disabled button.\n`mdc-button-icon-color($color)` | Sets the icon color to the given color for an enabled button.\n`mdc-button-disabled-icon-color($color)` | Sets the icon color to the given color for a disabled button.\n`mdc-button-ink-color($color)` | Sets the ink color to the given color for an enabled button, and sets the icon color to the given color unless `mdc-button-icon-color` is also used.\n`mdc-button-disabled-ink-color($color)` | Sets the ink color to the given color for a disabled button, and sets the icon color to the given color unless `mdc-button-icon-color` is also used.\n`mdc-button-density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`mdc-button-height($height)` | Sets custom height for button.\n`mdc-button-shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$mdc-button-density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`mdc-button-horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`mdc-button-outline-color($color)` | Sets the outline color to the given color for an enabled button.\n`mdc-button-disabled-outline-color($color)` | Sets the outline color to the given color for a disabled button.\n`mdc-button-outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `mdc-button-horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.14.1/node@v10.18.0+x64 (linux)","description":"The Material Components for the web 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/density":"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/button_5.0.0-canary.ec26e799c.0_1578001350931_0.014511583334626321","host":"s3://npm-registry-packages"}},"5.0.0-canary.0a40ced40.0":{"name":"@material/button","version":"5.0.0-canary.0a40ced40.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"4903de9ccb51c3286a5d8e4ca133f2515b0484d2","tarball":"https://registry.npmjs.org/@material/button/-/button-5.0.0-canary.0a40ced40.0.tgz","fileCount":11,"integrity":"sha512-F81cGSKgZcFUn8BKdbjamFaG0oQV36LNgBM7m574XlHLUfkBU/2p1ry76qkq9Kyy9dayCYSYYN+Pl5DsZHUZwA==","signatures":[{"sig":"MEUCICgMJ86VAsQ+wCSHyba2Bp20h2hL1EeGGsxwv7Negf1OAiEA0wVi4gEnxbdmI3j4VdpWDaGzwHc19ViSxmFThSYfVm4=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":201191,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeD3VSCRA9TVsSAnZWagAARZAQAKRnXR/tjo0lgHaMOwrh\nM2hWZZcm9ye6ZOSDoTYii47UrfB6yi0bKFxT9I3QMo3G2qDg1L2iTFOa4yDz\nZlxgyL0FNvc6Mqq+BEeS/LOqLpgFLn6M2EdFmBrASot1fmr3OnAn0bc2BT8n\nu+J5KwrTUxRuXKhbOioIBhyy5tl390dVAqSKtbZs+KaFBjmZ1NtBNqd5ocI8\n5wRf3Ad1axt2Ae0u+bLhGmTgHVuJO6VVkbfuIO5viUtG3OrPzRyULwIq7Wt8\n2fKEkilr/JnOfH9GGj2zsP/XGsiqEa67wJreT3Z9fokN93jnco1rBBPxl8j1\nKmlyMcDbBJIaHFZrLrZfK9QUlB5zc6cSKQ464G8QpQR/nD+Xvyg8TOPcEFvo\nM3q8l7cST0fc+M6BlVst7FEX1/r/nZl+b5U9p9gpsuTSORwSok8biIDAJOCe\nYEBugFQGysl8o28KZv3+Ih4CGcuWxqH115iCmdcLqhM2xy8G1UPo/M/ANM1Z\njHsZgiio8ogbpDj6fjAHvmW7w07EI4u/kiLroC9e6ExvNZbLJc0lya6sI5/0\n4nKy32e+WGGhtMjPmhOkwk/N7vgQLDe3f2/viM0p7i3qZwtTbT22af1+xzdK\nAafipQsininjo24nHxWNxQS63WlggKQJV77SfMkHfBBaPscaPv9KU6sQHic6\n1jW5\r\n=69Yb\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n\n\nButtons allow users to take actions, and make choices, with a single tap.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/button\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n```\n\n> _NOTE_: Examples here use the generic `\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n> _NOTE_: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Additional Information\n\n### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n\n> \\*_NOTE_: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n> buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n> directly within the `mdc-button` element.\n> However, the `mdc-button__label` class may become mandatory for all cases in the future, so it is recommended to\n> always include it to be future-proof.\n\n### Sass Mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass Mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`mdc-button-filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass Mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`mdc-button-container-fill-color($color)` | Sets the container fill color to the given color for an enabled button.\n`mdc-button-disabled-container-fill-color($color)` | Sets the container fill color to the given color for a disabled button.\n`mdc-button-icon-color($color)` | Sets the icon color to the given color for an enabled button.\n`mdc-button-disabled-icon-color($color)` | Sets the icon color to the given color for a disabled button.\n`mdc-button-ink-color($color)` | Sets the ink color to the given color for an enabled button, and sets the icon color to the given color unless `mdc-button-icon-color` is also used.\n`mdc-button-disabled-ink-color($color)` | Sets the ink color to the given color for a disabled button, and sets the icon color to the given color unless `mdc-button-icon-color` is also used.\n`mdc-button-density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`mdc-button-height($height)` | Sets custom height for button.\n`mdc-button-shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$mdc-button-density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`mdc-button-horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`mdc-button-outline-color($color)` | Sets the outline color to the given color for an enabled button.\n`mdc-button-disabled-outline-color($color)` | Sets the outline color to the given color for a disabled button.\n`mdc-button-outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `mdc-button-horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.14.1/node@v10.18.0+x64 (linux)","description":"The Material Components for the web 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/density":"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/button_5.0.0-canary.0a40ced40.0_1578071378542_0.9184416760855953","host":"s3://npm-registry-packages"}},"5.0.0-canary.3adf84899.0":{"name":"@material/button","version":"5.0.0-canary.3adf84899.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"fa133939c0a8da95e124f7ceb99eb6e64e92273b","tarball":"https://registry.npmjs.org/@material/button/-/button-5.0.0-canary.3adf84899.0.tgz","fileCount":11,"integrity":"sha512-J3HBfzQpbEY5FNRDEilx6+qMPD7UggRy/MZli/7N3o3VpOb29nh6GjZ3lOrZP/Cy4KXeVUn4qKcq6ID+eweztQ==","signatures":[{"sig":"MEUCIBuZ+EcTJbVgd31woCiUSo60C4Zq0ylLbg/Jg1/EMS7wAiEA03AEiLZGWiTjHHMDOwq8gxyY6Fmu9heBvzak/365leU=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":201191,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeD4ZsCRA9TVsSAnZWagAAEyQP/0Xs5aMTMDxLnh9IWD6R\nErugwjLXAJqb6TbPAY3AcIJhffzF1UWiineVyOD+qjvaRH8sB9sxuXVtW7Cx\n3sPNxXNjITEohqxt0vy4biGhgzgzAgnfXWg/yacPv675ZHLi9WpnDWH2AX+5\nAFZfiFRsTs0RJP738fNywjuOCMoAUhkXKBsfvhBuwmwIPDCn05Sg0NJ8SwUO\nEGM1hG2ylAS2NVDDsRZ32cy2OcbNyPsoWiREVbjoUYcgGuI1NI1ZkMPFsiUU\nIByE4j3TPdFGwOb91a6tTlMYMbVLU5+YgkAqJ9RfzgYusG7TcKhTvbiArSKT\nKPQssM8MBz2if3djmj9qVTBtN4dd2N/vHnYFRaA3oDUt1qy7cOye601IxAZg\niFm41jEG3U1P2/9P/JPvygaRzB9ba9J7t0a/lFVJe9PHYAsdE54A1tLJD+1S\nFrdc4kW1NzTeAmoURrFk+zUnfqJGB6XnI6nQuMnZsJojdTvcfF07f6VqkWda\nBG3HEHSbOR9Xj84kMdYuDvV8LzNvkHIOd80Zc0okQ3Ah27ckLhXQIYflZrIL\nmyR7CsVaMBxI0LVWopKfvDNY1YBVwOWntJuNtLBMbVZjtU5pIQ6yVSdQBY1L\nSFdTQKAgAxtHc1LAdTnH9XvI0/Av8uWK1qRB8nGyO2zb/wkLTNEA5BM7icRZ\nr2Xu\r\n=/Xp4\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n\n\nButtons allow users to take actions, and make choices, with a single tap.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/button\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n```\n\n> _NOTE_: Examples here use the generic `\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n> _NOTE_: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Additional Information\n\n### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n\n> \\*_NOTE_: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n> buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n> directly within the `mdc-button` element.\n> However, the `mdc-button__label` class may become mandatory for all cases in the future, so it is recommended to\n> always include it to be future-proof.\n\n### Sass Mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass Mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`mdc-button-filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass Mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`mdc-button-container-fill-color($color)` | Sets the container fill color to the given color for an enabled button.\n`mdc-button-disabled-container-fill-color($color)` | Sets the container fill color to the given color for a disabled button.\n`mdc-button-icon-color($color)` | Sets the icon color to the given color for an enabled button.\n`mdc-button-disabled-icon-color($color)` | Sets the icon color to the given color for a disabled button.\n`mdc-button-ink-color($color)` | Sets the ink color to the given color for an enabled button, and sets the icon color to the given color unless `mdc-button-icon-color` is also used.\n`mdc-button-disabled-ink-color($color)` | Sets the ink color to the given color for a disabled button, and sets the icon color to the given color unless `mdc-button-icon-color` is also used.\n`mdc-button-density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`mdc-button-height($height)` | Sets custom height for button.\n`mdc-button-shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$mdc-button-density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`mdc-button-horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`mdc-button-outline-color($color)` | Sets the outline color to the given color for an enabled button.\n`mdc-button-disabled-outline-color($color)` | Sets the outline color to the given color for a disabled button.\n`mdc-button-outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `mdc-button-horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.14.1/node@v10.18.0+x64 (linux)","description":"The Material Components for the web 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/density":"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/button_5.0.0-canary.3adf84899.0_1578075756248_0.16844754404710027","host":"s3://npm-registry-packages"}},"5.0.0-canary.0d42ee650.0":{"name":"@material/button","version":"5.0.0-canary.0d42ee650.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"b2ba228fefbc29db68dd323ada4982ef6b113cc6","tarball":"https://registry.npmjs.org/@material/button/-/button-5.0.0-canary.0d42ee650.0.tgz","fileCount":11,"integrity":"sha512-X87NOkzSyxWLESiiqDl1WRul6cI7/hGIG27kGl22OpDooBsq1Yju26dfdM+ODpqRLwdIlv/FEbeCpTzvQwE5ug==","signatures":[{"sig":"MEUCIQCl8FQUB3bq2Yp+b0I+PMTSJFt40E9+PX/gPHBtFhm66AIgctjUrbYc2FKSywQ6YpcAb//bdrjTDTkYG3cXzf8ycE4=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":201191,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeD7QGCRA9TVsSAnZWagAAjSsP/A/3prS+lFZwBf0LLnlh\njrSymp2Vo1AE9fAci5Z89uh81iDsnZxhDA4pqWAlJjLHG18efyPaJBnT3zre\no3a3RPLJJvbu/HOhgihJGemmDLuEuUiCuudqctekDNpvWE2su1zPdNOAiRKM\ne7ffTjRRNxUbCocmdS39Ys5kBFCg8SVke3eCa9AaOLJm1Vt4e1djVWTcmIHO\nthtXKFdWXePrDaGCUMTnz0fhq+8X6m5LK675B0+8oi7cRRhb0w3OVyAK1NC0\nlWWCrnizA5BN1pfieIvytbsNj4rIijbi6gSaFTV7E28+LP9VJdIym43HFWPg\nlOe61CQ6oa4XXyWwekeUk4//9TsZVdV87oTF4c+XREbJraGz2vaBwiNlJcY+\nPO9c/RIa+v0ZxTWG3B66s6/0zjlRwvQMLiTnZ41fZE/hVCVodWMIa0SFZF5Y\nRgN4oJeGahUwTH3iisFNYWLMBksj9zCrL2NREmDWfVCKY3RX9gDCFGlvwS0O\nwccTKaxshzMu1i82XkRH2zsybeYGYItQLLI2YxLXPPrIjis9Iroy5uB0naWh\nxBhKvVgiitjiKzbQOOk+BFKsckDdXdGaucZdeASgBffcd2xSnPoArfFB1qgN\nJq+F2+Qqni4xf2L7IfsezhVBjRjGO2v/y5CxVfi6v/pnh5VOEw4BVcCwRkoe\nN/Nh\r\n=wM1P\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n\n\nButtons allow users to take actions, and make choices, with a single tap.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/button\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n```\n\n> _NOTE_: Examples here use the generic `\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n> _NOTE_: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Additional Information\n\n### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n\n> \\*_NOTE_: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n> buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n> directly within the `mdc-button` element.\n> However, the `mdc-button__label` class may become mandatory for all cases in the future, so it is recommended to\n> always include it to be future-proof.\n\n### Sass Mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass Mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`mdc-button-filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass Mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`mdc-button-container-fill-color($color)` | Sets the container fill color to the given color for an enabled button.\n`mdc-button-disabled-container-fill-color($color)` | Sets the container fill color to the given color for a disabled button.\n`mdc-button-icon-color($color)` | Sets the icon color to the given color for an enabled button.\n`mdc-button-disabled-icon-color($color)` | Sets the icon color to the given color for a disabled button.\n`mdc-button-ink-color($color)` | Sets the ink color to the given color for an enabled button, and sets the icon color to the given color unless `mdc-button-icon-color` is also used.\n`mdc-button-disabled-ink-color($color)` | Sets the ink color to the given color for a disabled button, and sets the icon color to the given color unless `mdc-button-icon-color` is also used.\n`mdc-button-density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`mdc-button-height($height)` | Sets custom height for button.\n`mdc-button-shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$mdc-button-density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`mdc-button-horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`mdc-button-outline-color($color)` | Sets the outline color to the given color for an enabled button.\n`mdc-button-disabled-outline-color($color)` | Sets the outline color to the given color for a disabled button.\n`mdc-button-outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `mdc-button-horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.14.1/node@v10.18.0+x64 (linux)","description":"The Material Components for the web 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/density":"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/button_5.0.0-canary.0d42ee650.0_1578087430480_0.8809450443836822","host":"s3://npm-registry-packages"}},"5.0.0-canary.847dd1ada.0":{"name":"@material/button","version":"5.0.0-canary.847dd1ada.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"f1dbf0fee6694cade095f465caba3cb7b0cc92e3","tarball":"https://registry.npmjs.org/@material/button/-/button-5.0.0-canary.847dd1ada.0.tgz","fileCount":11,"integrity":"sha512-nDU+wkftuQQbIP0yU+krgVaThitdyg9sysDVJTWR8915D9KtccMD/uTcj+9+1lbS/C7Xuv0cjcrqHPos+0XG7Q==","signatures":[{"sig":"MEUCIB559HSg8eJ/ys7RTUSKcURQdiCoxrfC0hcJOiv++jAaAiEA4lLhFAhyWzr4N6hMhcUTdA8519dwPjsxcJHw1844YVE=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":201191,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeE4nmCRA9TVsSAnZWagAAi9MP/17lnhllNtqQ6dIkVL68\nErgquYq6yaWMrp9UdAyIoiAPYycPkc6c3PNjfJYP3Xrby76Ync236GXo5OmI\nVMa+3VSwIdTMdSqu+TKNHOlbu5U+2GqQwRzuovZktpt7mt69MISDL/oWGcOW\n+Q9p4qGhbVwSQtrl1/GZPDoFgUCw9q3Gh2j6cKG8pOm0M/6E2Nbco4cfN1Nt\nStOHrnFA0Lyjr1gmp71erLfcRhqceT5Z6CDopYinbhrXhyZRd1t/+ypQJnk4\nezTDjIzJB9Ber7mzFzTkI6i/kOSFEavVdYYlwwhoZPTYdjhV2q/qkqeKzhrk\nvMeRN9QQPjS+5cwmf+Z/fp+hcMGThlOeLigzW/A0EN8EWaVH5HnnHLMxXr9c\n0YJhxuYqV4Lnfr99OYj/RFmFz5wAgBp9tZvyQWuQRAezHYflajOAOay9kgei\npZgGuYzSWif7to/Th0xrQ3ORBtXrG+WVt14KbibGU+6ylEkwRnsSgGKDVS5u\nJtj1MvyhF3Wm9lFM4G+87CzXmsDA9jSLuY0HsEVZACUVW42JBvuqPadK4nAZ\nj3lmO9kSDFGAJU6PJ3Epc0zFrsuOWmGsjO3e5RPgIw00jEuOABvfc8OaY2Ic\n0EwpLvmLtjUWGJtsIOQQnOGKpImlcR/oKm+9C9OLuNKkbGMJTU2BDVmLmOL2\n+hdL\r\n=R5K6\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n\n\nButtons allow users to take actions, and make choices, with a single tap.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/button\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n```\n\n> _NOTE_: Examples here use the generic `\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n> _NOTE_: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Additional Information\n\n### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n\n> \\*_NOTE_: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n> buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n> directly within the `mdc-button` element.\n> However, the `mdc-button__label` class may become mandatory for all cases in the future, so it is recommended to\n> always include it to be future-proof.\n\n### Sass Mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass Mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`mdc-button-filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass Mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`mdc-button-container-fill-color($color)` | Sets the container fill color to the given color for an enabled button.\n`mdc-button-disabled-container-fill-color($color)` | Sets the container fill color to the given color for a disabled button.\n`mdc-button-icon-color($color)` | Sets the icon color to the given color for an enabled button.\n`mdc-button-disabled-icon-color($color)` | Sets the icon color to the given color for a disabled button.\n`mdc-button-ink-color($color)` | Sets the ink color to the given color for an enabled button, and sets the icon color to the given color unless `mdc-button-icon-color` is also used.\n`mdc-button-disabled-ink-color($color)` | Sets the ink color to the given color for a disabled button, and sets the icon color to the given color unless `mdc-button-icon-color` is also used.\n`mdc-button-density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`mdc-button-height($height)` | Sets custom height for button.\n`mdc-button-shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$mdc-button-density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`mdc-button-horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`mdc-button-outline-color($color)` | Sets the outline color to the given color for an enabled button.\n`mdc-button-disabled-outline-color($color)` | Sets the outline color to the given color for a disabled button.\n`mdc-button-outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `mdc-button-horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.14.1/node@v10.18.0+x64 (linux)","description":"The Material Components for the web 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/density":"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/button_5.0.0-canary.847dd1ada.0_1578338789925_0.5368893610626617","host":"s3://npm-registry-packages"}},"5.0.0-canary.39df7e5df.0":{"name":"@material/button","version":"5.0.0-canary.39df7e5df.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"ab34ee32d1707c47985f9a04ff19db62657f087b","tarball":"https://registry.npmjs.org/@material/button/-/button-5.0.0-canary.39df7e5df.0.tgz","fileCount":11,"integrity":"sha512-IQ5xOeEE4blQWmJFnqmSGKwdGqSit6Mec1MA/QIPCT7p4FVpX5yrxpqCPvHVNRd0F5iSl4iijfj+1Aj1dMlBxA==","signatures":[{"sig":"MEYCIQCR8hVSvgZfveaholoJf6mlFwGz7F5y2KYM5ot35pdbtAIhANjyKKtEE0P4zQ3e+hu2GylMM6HLvGFsMQvWBU356X9M","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":201191,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeE9cRCRA9TVsSAnZWagAA9SIP/2tkUZi06Cp+9Kf3fVL/\ndRlz7kpnU0y4Gf/aKpgY4wz2wtwR8YbMbJMGmGCQ+PtGjfH9LzW249+vWkqp\nmk+9VAiAMzXcqq5H5aq6wsQNkT1UEIU5iiQwAUcuBE3n0c5ccZ8gRypVsWDF\nM0JeQJFknJtMKb8pOeNxAf1pI3awKNpup/1eZI8aTxXx8uC5A+ubYd5OTC4T\nj7V26rWUFeuEv1d/dXW+jGHC+qbngsqgrFTMDGdpnPGIEk8yqaqwUl2mZ46q\n8ImOPbHsRLARWbfdz6z3n5hdW1vnDk4/qZ5t6cNpp68ARdziQX95ZFtKic2i\nuKvOc7QOnC7zc53x338WljKMpagDDqNkoZyj84a8igWZ+D4hHCkhlz+ZwFV9\nldZ/KIS6bSYpwdANc2kB/vVN7/stLl5+vhDGfSt09RH+kOFA9Vfw7UJD+Y+8\nnQwH5b7SYd4fiQ9scHXMJW3Ro8XlurdxgOogR6dohPp+xwXqgUBGQgUW7DNo\nRP07hyVHEQ4AjfM7zj+QkSJEXETQ1dsV6DoY6TEmaeHB6YIwUW2QV/g9wZo0\nhlavtVdxn/q4wGdepJs8SV2S5RA4nMgIvmObZDqvWW6nXQQCDs1GsZZqxJhX\n9tQsnqfINboZFqbpwGZt6jwMbTqzr91WYcQAOAifkNChTrHbB4Bcj8/ULBLu\nT4tw\r\n=uPSm\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n\n\nButtons allow users to take actions, and make choices, with a single tap.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/button\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n```\n\n> _NOTE_: Examples here use the generic `\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n> _NOTE_: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Additional Information\n\n### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n\n> \\*_NOTE_: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n> buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n> directly within the `mdc-button` element.\n> However, the `mdc-button__label` class may become mandatory for all cases in the future, so it is recommended to\n> always include it to be future-proof.\n\n### Sass Mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass Mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`mdc-button-filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass Mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`mdc-button-container-fill-color($color)` | Sets the container fill color to the given color for an enabled button.\n`mdc-button-disabled-container-fill-color($color)` | Sets the container fill color to the given color for a disabled button.\n`mdc-button-icon-color($color)` | Sets the icon color to the given color for an enabled button.\n`mdc-button-disabled-icon-color($color)` | Sets the icon color to the given color for a disabled button.\n`mdc-button-ink-color($color)` | Sets the ink color to the given color for an enabled button, and sets the icon color to the given color unless `mdc-button-icon-color` is also used.\n`mdc-button-disabled-ink-color($color)` | Sets the ink color to the given color for a disabled button, and sets the icon color to the given color unless `mdc-button-icon-color` is also used.\n`mdc-button-density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`mdc-button-height($height)` | Sets custom height for button.\n`mdc-button-shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$mdc-button-density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`mdc-button-horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`mdc-button-outline-color($color)` | Sets the outline color to the given color for an enabled button.\n`mdc-button-disabled-outline-color($color)` | Sets the outline color to the given color for a disabled button.\n`mdc-button-outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `mdc-button-horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.14.1/node@v10.18.0+x64 (linux)","description":"The Material Components for the web 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/density":"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/button_5.0.0-canary.39df7e5df.0_1578358544717_0.21629395118158845","host":"s3://npm-registry-packages"}},"5.0.0-canary.f1a2581ab.0":{"name":"@material/button","version":"5.0.0-canary.f1a2581ab.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"6971da3b5e1b6928669f4be1075289b3bbcbf376","tarball":"https://registry.npmjs.org/@material/button/-/button-5.0.0-canary.f1a2581ab.0.tgz","fileCount":11,"integrity":"sha512-Fl7Vv2ZQThyMzNgKSZX0VooOI5uTuoV3ZHveH6/1e3JQxDZ+VNpnQRhwPrJFWiMbRnsINo8Q2esdl41PNj92xQ==","signatures":[{"sig":"MEUCIQCHgKVH2xX5FGrH+Gof1wwy5d6K9jY4wkBoRYjnAIvOVAIgDu89o3HZrk0BwuxoHqqOCObMpf2uQGDnPWw4aF4nDso=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":201191,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeFJzqCRA9TVsSAnZWagAAWF0P/0FSA1wbqNzqRPa4gjxr\nIf799mXbxfzSLRdenWozxJ736CIDnxazVmFgja4kKMVoJEpsl8P7E6+lPabe\nzmbvngGNqLxbx4Yb6gO1IU+3m6+qmiZprDM5tlLJ5X33vbxozwmWRP0kluaz\niN0QjqvDvGlAOUnL3ehJEttGGQTXrc8HxYAmr/qK5rnc13heLN2C2r674djS\nxTcKsLY0OoUhuS8TvmQWjD6OA1JqvfBtLS6zH/Hi1aLWxZZLCL6P3+pJmYnW\nkeCDBmzGhhnJkFHVQkbgalqPUPu3CwMmYCpCIQbUGJZL5Lcw2C6GbtcVFnpo\nOv0X0r1WNgn2Wqckchx1WY71yD13+v91+rV587pDXAYMrpRYAunFlVN6nvWe\nt69dujE4iQurdPciCsrWTPlNkQxmaS6cVnXQl0gLjvCZZiaPqNpSsogxeF0B\nqfcbnm55oiR02Iikp4cxlKm9YBA8A5o5ZMqijhpxBYPNbPCiRkQ3MvW1Uodd\nfjMDh/ewVpA2sylhSNWhPMmWGi8aNcqpNb+UL5p33osi0udiyhrpGf12eh8x\nh44Em+sYuKNz3pbTTj/PSJFrIbr/08QYUS/xXnr+0CBX5qc4vpH9e5m4tlh+\nuH116XGwoPXyXCDHHg1CAoGYQE/j+gOyqiRga7eunkP7F3+gckQLdyj67bPH\n43kZ\r\n=2RT8\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n\n\nButtons allow users to take actions, and make choices, with a single tap.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/button\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n```\n\n> _NOTE_: Examples here use the generic `\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n> _NOTE_: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Additional Information\n\n### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n\n> \\*_NOTE_: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n> buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n> directly within the `mdc-button` element.\n> However, the `mdc-button__label` class may become mandatory for all cases in the future, so it is recommended to\n> always include it to be future-proof.\n\n### Sass Mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass Mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`mdc-button-filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass Mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`mdc-button-container-fill-color($color)` | Sets the container fill color to the given color for an enabled button.\n`mdc-button-disabled-container-fill-color($color)` | Sets the container fill color to the given color for a disabled button.\n`mdc-button-icon-color($color)` | Sets the icon color to the given color for an enabled button.\n`mdc-button-disabled-icon-color($color)` | Sets the icon color to the given color for a disabled button.\n`mdc-button-ink-color($color)` | Sets the ink color to the given color for an enabled button, and sets the icon color to the given color unless `mdc-button-icon-color` is also used.\n`mdc-button-disabled-ink-color($color)` | Sets the ink color to the given color for a disabled button, and sets the icon color to the given color unless `mdc-button-icon-color` is also used.\n`mdc-button-density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`mdc-button-height($height)` | Sets custom height for button.\n`mdc-button-shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$mdc-button-density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`mdc-button-horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`mdc-button-outline-color($color)` | Sets the outline color to the given color for an enabled button.\n`mdc-button-disabled-outline-color($color)` | Sets the outline color to the given color for a disabled button.\n`mdc-button-outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `mdc-button-horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.14.1/node@v10.18.0+x64 (linux)","description":"The Material Components for the web 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/density":"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/button_5.0.0-canary.f1a2581ab.0_1578409194134_0.6862898884607245","host":"s3://npm-registry-packages"}},"5.0.0-canary.7c7ddf347.0":{"name":"@material/button","version":"5.0.0-canary.7c7ddf347.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"900744312a06038878d47f536d35f48319a2e8d3","tarball":"https://registry.npmjs.org/@material/button/-/button-5.0.0-canary.7c7ddf347.0.tgz","fileCount":11,"integrity":"sha512-mWgjUjqqJh/26BBF9MPkZIqc7hnjNC35Mr0+gLJXTSUKE51VAM9Z/oLYVsne+TiAqa7AxMiLT/lJ/k5mLp+sNQ==","signatures":[{"sig":"MEYCIQC3j4Gz1acWYiLxl8Lc+gD/6HGNYnQrSpCPmEgo53IDegIhAPwCqe37uqz1yIm16znexMwy0Np1iiA5y5VG7ipv82g/","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":201191,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeFKDFCRA9TVsSAnZWagAA0qIP/AmOkne7FwpHoIywa+H7\nPDQuLkLgVRUJCoIlx8V0LCJLTiJQnum8YKphz5XXa6gvrEqzt/3p4wciKlKX\nY+AXNl5Ia/gcxGYOuq907juuy/rQ0Gq5N4sfHu1ycqnyZOO5PWUkjrU/GaU+\nYk2vdYnhuPdrE15xRTsditx676Py5XxhDyUv4l9OCBNE4SxLIOQItkrq0xNm\n7P1afJgm6yn9Ebx839vjDL6WfkDxyDyyolsMnaxIR0ZbswEgt2TIEhOkkUMB\nmhdXze/XLVTrCoyVhEK6zfOdu0GFHAts+ZdHmTvjHYBCs2QOdM8oK7krF/7j\nXAXiZcOTIdB797aOUI61FNTw/nqXmWlP2DpN2WOyvrcZaFb/Hnn4KOXEKhAl\nSiEkiOaE49W715I6+S5xSw3yHaNItZAdVa+HnFbPwMG9IKofR+z2mi/vn37W\nTgcwm/FsN2VdJF5fB0tH2s/Wbiw3KKlRJtlX3x2ADiqFTIEnw7EO6xIiVNv9\n83UbqmZCSJtA5nUt64RP9NwdOch+OxNhVUvQbWB27mbrVVxSa+0zI1k75+XC\nAXCh8OeKql4yDND+sto9tx4Md6lPrqPB35i1Mu7l0jKr7vvFg2AFgY3Bkq1A\nLmUkhV8VvydRfVMOatZmMpxz3l3Z0MVgfJ+HSeBRQPF4SMDFzm1av/+xnwZo\n7O8D\r\n=iodB\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n\n\nButtons allow users to take actions, and make choices, with a single tap.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/button\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n```\n\n> _NOTE_: Examples here use the generic `\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n> _NOTE_: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Additional Information\n\n### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n\n> \\*_NOTE_: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n> buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n> directly within the `mdc-button` element.\n> However, the `mdc-button__label` class may become mandatory for all cases in the future, so it is recommended to\n> always include it to be future-proof.\n\n### Sass Mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass Mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`mdc-button-filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass Mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`mdc-button-container-fill-color($color)` | Sets the container fill color to the given color for an enabled button.\n`mdc-button-disabled-container-fill-color($color)` | Sets the container fill color to the given color for a disabled button.\n`mdc-button-icon-color($color)` | Sets the icon color to the given color for an enabled button.\n`mdc-button-disabled-icon-color($color)` | Sets the icon color to the given color for a disabled button.\n`mdc-button-ink-color($color)` | Sets the ink color to the given color for an enabled button, and sets the icon color to the given color unless `mdc-button-icon-color` is also used.\n`mdc-button-disabled-ink-color($color)` | Sets the ink color to the given color for a disabled button, and sets the icon color to the given color unless `mdc-button-icon-color` is also used.\n`mdc-button-density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`mdc-button-height($height)` | Sets custom height for button.\n`mdc-button-shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$mdc-button-density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`mdc-button-horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`mdc-button-outline-color($color)` | Sets the outline color to the given color for an enabled button.\n`mdc-button-disabled-outline-color($color)` | Sets the outline color to the given color for a disabled button.\n`mdc-button-outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `mdc-button-horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.14.1/node@v10.18.0+x64 (linux)","description":"The Material Components for the web 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/density":"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/button_5.0.0-canary.7c7ddf347.0_1578410181420_0.8469818279659502","host":"s3://npm-registry-packages"}},"5.0.0-canary.a1c84d4b5.0":{"name":"@material/button","version":"5.0.0-canary.a1c84d4b5.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"ff0c208777536456eed2678b9a4915450563b03c","tarball":"https://registry.npmjs.org/@material/button/-/button-5.0.0-canary.a1c84d4b5.0.tgz","fileCount":11,"integrity":"sha512-Nv59XuDVNMfrlVAkEk2/WD9y8DFENU7nxxsGwXUkMjF+JJufvoZfRCjRK0W1FIUXH1LEbIgqMAKb40RiijycGg==","signatures":[{"sig":"MEUCIQDDOelZVmL1kGuUC7Zxv8cdSsrcsm8z6ghJrxcKmkomBQIgJ1bIX3W373Sroilzdg4VrLFXSSQzUlwX2gD22h60/kE=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":201191,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeFMmhCRA9TVsSAnZWagAAAV0P/iwvp1OacQ++domFkkjS\n7DoFmlohWBZpRvLbv52y5yIv1HHBavTuufHLZAGIjYaV/f1iTJcSpFNgAojv\nIOP9QJEIeKiFtEicCiL1EBEtA9e4DVTVNzr2zw6o/v44Zo3WO/U+ySl/lUvt\n52eRcWW7k/EpYjLNqR+b9dv0iBSsQdbJvfy12yAoY6M5zm8nJWLCJ81f76GU\nY45x58nK/CKEmLpu8pkimiAEKI0e0QxdMM+gGmS1bFT8ruQJdDEUgDSwAVMD\napEhWhtBZ1cMtEnAjwYDYDW1zanisKdu+ZX7XRcTV0vug/U0BdabJU3FMbEU\nAl+wS3tPnGge+JjzTAiDEoM93pj3Yo/J8CyPyHEAf+st2Bvxz5CoHjRLUSBn\ngYVei6JgDCO/MUj7Q6cNe+GkYb/2qGs+kBRQdOdwnLt69/3HasGIQMCpDvLy\nTao8HyRNmtE5Nc4DmztJLk9UK5CbtuovGWKylWc3pdVWqzDAavFV/bVmkY4b\nV8phqluIU8w6/SUTt/7DD+XiLyrtwZ41rlbfmS3vlHkmg1soQg1jdXY96Wpq\nirP38lbDxBsnv/KLpu0QGJZm+11ouD4poVD35oaqQ5m8UfhCCRj3Ffq/mq0N\nr9thJ0Mu1187N4IxDm4bf7DN6NmW9ElCcagK2hWx4r3Y8d0mrP7V7VxKidNi\nLz+F\r\n=Sk13\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n\n\nButtons allow users to take actions, and make choices, with a single tap.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/button\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n```\n\n> _NOTE_: Examples here use the generic `\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n> _NOTE_: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Additional Information\n\n### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n\n> \\*_NOTE_: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n> buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n> directly within the `mdc-button` element.\n> However, the `mdc-button__label` class may become mandatory for all cases in the future, so it is recommended to\n> always include it to be future-proof.\n\n### Sass Mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass Mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`mdc-button-filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass Mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`mdc-button-container-fill-color($color)` | Sets the container fill color to the given color for an enabled button.\n`mdc-button-disabled-container-fill-color($color)` | Sets the container fill color to the given color for a disabled button.\n`mdc-button-icon-color($color)` | Sets the icon color to the given color for an enabled button.\n`mdc-button-disabled-icon-color($color)` | Sets the icon color to the given color for a disabled button.\n`mdc-button-ink-color($color)` | Sets the ink color to the given color for an enabled button, and sets the icon color to the given color unless `mdc-button-icon-color` is also used.\n`mdc-button-disabled-ink-color($color)` | Sets the ink color to the given color for a disabled button, and sets the icon color to the given color unless `mdc-button-icon-color` is also used.\n`mdc-button-density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`mdc-button-height($height)` | Sets custom height for button.\n`mdc-button-shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$mdc-button-density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`mdc-button-horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`mdc-button-outline-color($color)` | Sets the outline color to the given color for an enabled button.\n`mdc-button-disabled-outline-color($color)` | Sets the outline color to the given color for a disabled button.\n`mdc-button-outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `mdc-button-horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.14.1/node@v10.18.0+x64 (linux)","description":"The Material Components for the web 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/density":"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/button_5.0.0-canary.a1c84d4b5.0_1578420640635_0.25831418450036203","host":"s3://npm-registry-packages"}},"5.0.0-canary.ec9f16578.0":{"name":"@material/button","version":"5.0.0-canary.ec9f16578.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"d9341195221da0ea90e717b1cb81a30d74e0691c","tarball":"https://registry.npmjs.org/@material/button/-/button-5.0.0-canary.ec9f16578.0.tgz","fileCount":11,"integrity":"sha512-X94k7EaLx8gmM7XAo7oyVQsVZBvEq4qcoHtswpIElbSNv5VDnt8GZOejxJQoFFW7y1NYpcNeJ9sZHLRnuWRnVQ==","signatures":[{"sig":"MEYCIQD+6Tu5EQn2HdJjG27vz9YMTSUxHbqhaiVkqClthJO0VQIhAP8v53na8Wwo7r1aLcG3eSLIb+3m7IqIrwFL7paC3vVn","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":201191,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeFN58CRA9TVsSAnZWagAAiSYP/1KHStAHxEAu2OKBGsqD\n5JX27xtsnImavSJSiSbiCpcBDvprs2BOpwDndqP8tdn1W8+hCPmmgCQS8m5g\noRrykP/GGupySuGa+2RkjfEnKpxAMoZ6pYtOsRH/vMd020muq7nwLoyevFVR\ndQys3GCcbcYVPojXvM4BCM5FzIhb/33ToJeWi2lJocubhLuwIuGe0XXsVydg\nJawWBF7sBW/E3+M5rA0lNhRu13+QLM8+kZIbEc9YcnsqUyFc19nsXevXRiam\nvG2BDHOBKSckikFIjWb0pziAcduYM7vLoiqXW12xIlCkSP5GHFoIqjwcHqPq\npj5aZb7P0/8x9+bLMpRn6OxkUfMPM7pkA2UP0AgEVl8wPeL5YzFA7t7Iib0q\nCzBiJhbyA6IE9LB2MsIpswz+UMl9YAyBrFT3CzzZbEmPoX/VPhDIFn1TRemc\nNlBDm/anGtfVDicxsEe8V6KltaGFgIxtuK3KFptt0NfrfA/P9maMVu0HhDmb\njUAleElT28cqRCyk9Kmevmk+HhaP0Hh/Puk+VtMeZOEH3EdkSMWkFJeOWM6V\n3e+pSx8GP7tK0qEciTxLhY+8hzfpLQOYp8kIyVuOdGITsIOfSl7UJgZ6PZOI\ngKERt/uyOnV1O+fM460DjNfbecz+gU0U83/uqNpdkYvJs4e3g1+p84r1fNWF\nuNvP\r\n=XD7q\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n\n\nButtons allow users to take actions, and make choices, with a single tap.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/button\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n```\n\n> _NOTE_: Examples here use the generic `\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n> _NOTE_: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Additional Information\n\n### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n\n> \\*_NOTE_: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n> buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n> directly within the `mdc-button` element.\n> However, the `mdc-button__label` class may become mandatory for all cases in the future, so it is recommended to\n> always include it to be future-proof.\n\n### Sass Mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass Mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`mdc-button-filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass Mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`mdc-button-container-fill-color($color)` | Sets the container fill color to the given color for an enabled button.\n`mdc-button-disabled-container-fill-color($color)` | Sets the container fill color to the given color for a disabled button.\n`mdc-button-icon-color($color)` | Sets the icon color to the given color for an enabled button.\n`mdc-button-disabled-icon-color($color)` | Sets the icon color to the given color for a disabled button.\n`mdc-button-ink-color($color)` | Sets the ink color to the given color for an enabled button, and sets the icon color to the given color unless `mdc-button-icon-color` is also used.\n`mdc-button-disabled-ink-color($color)` | Sets the ink color to the given color for a disabled button, and sets the icon color to the given color unless `mdc-button-icon-color` is also used.\n`mdc-button-density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`mdc-button-height($height)` | Sets custom height for button.\n`mdc-button-shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$mdc-button-density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`mdc-button-horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`mdc-button-outline-color($color)` | Sets the outline color to the given color for an enabled button.\n`mdc-button-disabled-outline-color($color)` | Sets the outline color to the given color for a disabled button.\n`mdc-button-outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `mdc-button-horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.14.1/node@v10.18.0+x64 (linux)","description":"The Material Components for the web 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/density":"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/button_5.0.0-canary.ec9f16578.0_1578425979631_0.7613826733477895","host":"s3://npm-registry-packages"}},"5.0.0-canary.b602226ce.0":{"name":"@material/button","version":"5.0.0-canary.b602226ce.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"0e42f215c3bacdd5a168721b522717825313dfe1","tarball":"https://registry.npmjs.org/@material/button/-/button-5.0.0-canary.b602226ce.0.tgz","fileCount":11,"integrity":"sha512-YI8O2oV/cuZ2SRaWknLVVAuvgQ6kHcSsPEj7lanskkkOzW4/LLmHmc2/CHY6UeaVbUN0yLijDag+nEOITXTilQ==","signatures":[{"sig":"MEYCIQDvFc9TWR/0CLH+rhJ37hJj28TL9HKjk3vozekgXF6wUgIhAMD9uYLz9rPKHCUczLNNmU+W1UsX59fO3SbUauAjecWa","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":201191,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeFObcCRA9TVsSAnZWagAAgngP/0oP5wTOkR4C0zSgVo2H\nwTE/y9qXoFet9zOTrZgHxRrScA91mkZ/NNL0qPE0P4IAg7ERmIzwR1/ezLWn\nl0R39ssNHxKGe7LKKjV0HVknUHdiz9RSnxkQHbBA2EyCltIyy4WuqqGTqmgi\n2gosG7CSATzdktE7K1jGCScGcky5G0gSAHcUdB5SHaY7AATmbqB2LpBuiVM6\nhGqqv3qt8VLXBvBFIPohlPh1spbMi6Yt665tQ0uySTV0eFdWDr96qMEFzge7\nvq/7goRW7zh5G/sD6YzPAOKG/JpXtMno8Rg62LUPeyYJYvDTcDxFgIage6vR\nr8dCfpjr4tnnj+sR8C+EPGYGSlZktASdj46F8WY0uA6mE6GQN0T1gzC+VQhz\nHqmheXpAiz5jAfG7t9QPpgsY6XmIkr2FyoDT9b/4ND9ohREc3cMV1E9XTCoU\n1vhmuLY9qxiV58EnB9uMbdkrV8NS1rPahVelabWObtm8T/EXokeacrEKUH8E\nQvOjqAS0JQM7VHJXQrzGBCxNMeilRG9sLKdbhEbwKoUvWEgcof0pQ1f0n9Aq\nySpXzfq6YdIU3FL2SOxN5/qBDBq4jn6NTMt+jMqVskTAfcgSZEVbvIdyKpbL\nRJZuYrgVgiHs5pun1JfBY5A/YU3AFDn1mP5lTVe1qiy2Eos1pjNcQfLl2IGc\nUtPe\r\n=uhfg\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n\n\nButtons allow users to take actions, and make choices, with a single tap.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/button\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n```\n\n> _NOTE_: Examples here use the generic `\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n> _NOTE_: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Additional Information\n\n### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n\n> \\*_NOTE_: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n> buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n> directly within the `mdc-button` element.\n> However, the `mdc-button__label` class may become mandatory for all cases in the future, so it is recommended to\n> always include it to be future-proof.\n\n### Sass Mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass Mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`mdc-button-filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass Mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`mdc-button-container-fill-color($color)` | Sets the container fill color to the given color for an enabled button.\n`mdc-button-disabled-container-fill-color($color)` | Sets the container fill color to the given color for a disabled button.\n`mdc-button-icon-color($color)` | Sets the icon color to the given color for an enabled button.\n`mdc-button-disabled-icon-color($color)` | Sets the icon color to the given color for a disabled button.\n`mdc-button-ink-color($color)` | Sets the ink color to the given color for an enabled button, and sets the icon color to the given color unless `mdc-button-icon-color` is also used.\n`mdc-button-disabled-ink-color($color)` | Sets the ink color to the given color for a disabled button, and sets the icon color to the given color unless `mdc-button-icon-color` is also used.\n`mdc-button-density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`mdc-button-height($height)` | Sets custom height for button.\n`mdc-button-shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$mdc-button-density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`mdc-button-horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`mdc-button-outline-color($color)` | Sets the outline color to the given color for an enabled button.\n`mdc-button-disabled-outline-color($color)` | Sets the outline color to the given color for a disabled button.\n`mdc-button-outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `mdc-button-horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.14.1/node@v10.18.0+x64 (linux)","description":"The Material Components for the web 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/density":"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/button_5.0.0-canary.b602226ce.0_1578428124120_0.9782449086820573","host":"s3://npm-registry-packages"}},"5.0.0-canary.b2d2dc08c.0":{"name":"@material/button","version":"5.0.0-canary.b2d2dc08c.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"8e6aaabf9d82c8835d7bf10d78d8887acb7f40fd","tarball":"https://registry.npmjs.org/@material/button/-/button-5.0.0-canary.b2d2dc08c.0.tgz","fileCount":11,"integrity":"sha512-Av8LjF90vYjlnBL/ylrWuTp3NPOGKaOmcl7pn7MIBuuIWl7sE4jNL2Dy4OR75U0byWRU+3e3VBKAXqdt3BLklA==","signatures":[{"sig":"MEUCIQCi0fSmVxpLyDfl7lF7ia+kysTgLatyHVvCXuKIPRqSEgIgOLbUCrFNP22MMRbD0+oA3YCxdyLjUiIrBOKnu9O8vaA=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":201191,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeFPdyCRA9TVsSAnZWagAAAekP/RSB/Oc+Ns2v3WJDhyxE\nJRPtJfyF07/PEq/iBdrC2DGXxBCOIE9n3vhQO6jOXk6n4rGP/TZiO2fXfwS/\nMrAyXrgBqrkPf6VtlqHA4iO2SnwRD2IcUEVh6hOhXwMBYLB5VNwoQSAFi21R\nQgI/Rc6OyFhlFYDNh5aEE0q0m5SF6NosMrBZnzJnxTM/BGhgYfFq6oXCZ94Q\nk3A7nnEZwabtmzfhUDn8tejXXZ92P01nDaf1nd4wLZJPehjt3xk6B6/m8KLk\n8M+laImYuE+9EdbCS2Kj+7DQXnxcUjwSybL2tw2mFlNfi0pTd4kJRaTS00bo\n3MNmN01f0e1VdBGG3z7qjlsqM5Ijyur5MIsWE30KAOFnL/GFT+eJDLUnDv4M\n7B9yl6wgQ5df2h7pZ57Ct+ofy55eTenY+2t6QnzkKpUNj85xcmzsBYyR1DqZ\nSTkUblxejr1LIyje4C6IBsqOd6/bcKkUqXFmXCMflTdU2EpJZZZI1chfPV1o\nqHYHiOkTKlBAckAdkJ986Gz1NVfNO+wUWs6r72Zvz/heB7bkKDC9y2asPG8p\nA1atE3gcKXce3lZ4AOnAO7cyG/Es+jotytWedhGo5rz9XTxLQFNW96R5Mmb4\n372TBjCu0ZTavQxEQIIgQadX2QCa42LbYG6fNe59dSmr8S4D+qTdhWc5BR6K\nGJ/0\r\n=KEq2\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n\n\nButtons allow users to take actions, and make choices, with a single tap.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/button\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n```\n\n> _NOTE_: Examples here use the generic `\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n> _NOTE_: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Additional Information\n\n### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n\n> \\*_NOTE_: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n> buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n> directly within the `mdc-button` element.\n> However, the `mdc-button__label` class may become mandatory for all cases in the future, so it is recommended to\n> always include it to be future-proof.\n\n### Sass Mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass Mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`mdc-button-filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass Mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`mdc-button-container-fill-color($color)` | Sets the container fill color to the given color for an enabled button.\n`mdc-button-disabled-container-fill-color($color)` | Sets the container fill color to the given color for a disabled button.\n`mdc-button-icon-color($color)` | Sets the icon color to the given color for an enabled button.\n`mdc-button-disabled-icon-color($color)` | Sets the icon color to the given color for a disabled button.\n`mdc-button-ink-color($color)` | Sets the ink color to the given color for an enabled button, and sets the icon color to the given color unless `mdc-button-icon-color` is also used.\n`mdc-button-disabled-ink-color($color)` | Sets the ink color to the given color for a disabled button, and sets the icon color to the given color unless `mdc-button-icon-color` is also used.\n`mdc-button-density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`mdc-button-height($height)` | Sets custom height for button.\n`mdc-button-shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$mdc-button-density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`mdc-button-horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`mdc-button-outline-color($color)` | Sets the outline color to the given color for an enabled button.\n`mdc-button-disabled-outline-color($color)` | Sets the outline color to the given color for a disabled button.\n`mdc-button-outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `mdc-button-horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.14.1/node@v10.18.0+x64 (linux)","description":"The Material Components for the web 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/density":"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/button_5.0.0-canary.b2d2dc08c.0_1578432370327_0.9260435699797587","host":"s3://npm-registry-packages"}},"5.0.0-canary.61f2d7580.0":{"name":"@material/button","version":"5.0.0-canary.61f2d7580.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"84feea6a54e20eae0b3f958fa79bb8b48a21e889","tarball":"https://registry.npmjs.org/@material/button/-/button-5.0.0-canary.61f2d7580.0.tgz","fileCount":11,"integrity":"sha512-nYTHtz0G4PRyzf0XurjrWmlmg96uWjMOeGr6yxoN10tl3a6hOhPaag85tL0TGRQt4SQPgfOiPPk+uxjUtLV9iw==","signatures":[{"sig":"MEUCIBtr7wm/qnoYT6GHwsMA+KrflnmsUPsg33F9h5DWUc7yAiEA8rauzRYsyoHyRziF4Ub4giKwXQ1EEFKm4iQcxUM+Xws=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":201191,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeFPqlCRA9TVsSAnZWagAAL6IQAKLbxQTLGHjz/HIUoIt8\nOiKg+MaJkWSigd2hC2FVjcKjmSjz0ZAgPPYuY4nK13bPi0ZEdtvnm+rnKtuA\ny5FRiJ4DGBQqyYv3UxFjs4ch0i8vMmRRvfyULoiDe+TVl1/ZQrKByqA/mbKe\nIQgJJsdz5/hwRVZMhWQLb67nrHgSjbmQuo8Y3Y6H8FQud3D4dcdxyZg+JDof\nLEDMadSxIRvktayo9RWLb4nh1sA215bB737Xh57x6keu4QVHGMpOLAHL8Iud\nzgDQOolgeAdT0/B+n24phTaZLpp4l01M29DNt/GH8vItd6mhNPHfJweyVdJa\ngGniTCWk1iV+Advhe5qbQ2XdtWgzCuU9jmXLbM2ZFu+Qtdn+axkzwZycpWMP\nf6S+mMIRZ1d/kxcapw0BKUgh1uEV2j1qoUNaRL0gLU75rcLeZnvZCNCh2XfL\nVJy0ZUYcXnHzTAkDDGh8IO8aea81djjGua6MkHr+pI+mFHXQCjHbd2hrdXUl\nSxZc5XjYeEbzlSvmfSJ2dfOawSP5ql1H5604txkZ2fZsRroQjA1WAEQI7vzj\n55NoNs6OhlnZK3jTtywy3SfTTpjwyjwNHOCrYxP9vMg/DEyvH8kBYv59n64Y\nvgDT/oEvx/8HKsLWrIyXp232lfkHVRvKWjDsU47yovglnYuhNPx+20B/tAGX\nlBQw\r\n=/dWi\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n\n\nButtons allow users to take actions, and make choices, with a single tap.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/button\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n```\n\n> _NOTE_: Examples here use the generic `\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n> _NOTE_: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Additional Information\n\n### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n\n> \\*_NOTE_: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n> buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n> directly within the `mdc-button` element.\n> However, the `mdc-button__label` class may become mandatory for all cases in the future, so it is recommended to\n> always include it to be future-proof.\n\n### Sass Mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass Mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`mdc-button-filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass Mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`mdc-button-container-fill-color($color)` | Sets the container fill color to the given color for an enabled button.\n`mdc-button-disabled-container-fill-color($color)` | Sets the container fill color to the given color for a disabled button.\n`mdc-button-icon-color($color)` | Sets the icon color to the given color for an enabled button.\n`mdc-button-disabled-icon-color($color)` | Sets the icon color to the given color for a disabled button.\n`mdc-button-ink-color($color)` | Sets the ink color to the given color for an enabled button, and sets the icon color to the given color unless `mdc-button-icon-color` is also used.\n`mdc-button-disabled-ink-color($color)` | Sets the ink color to the given color for a disabled button, and sets the icon color to the given color unless `mdc-button-icon-color` is also used.\n`mdc-button-density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`mdc-button-height($height)` | Sets custom height for button.\n`mdc-button-shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$mdc-button-density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`mdc-button-horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`mdc-button-outline-color($color)` | Sets the outline color to the given color for an enabled button.\n`mdc-button-disabled-outline-color($color)` | Sets the outline color to the given color for a disabled button.\n`mdc-button-outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `mdc-button-horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.14.1/node@v10.18.0+x64 (linux)","description":"The Material Components for the web 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/density":"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/button_5.0.0-canary.61f2d7580.0_1578433189475_0.3909807594017798","host":"s3://npm-registry-packages"}},"5.0.0-canary.d1be53a2e.0":{"name":"@material/button","version":"5.0.0-canary.d1be53a2e.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"decb3ed2f5eefae98f7ba430bd0455d00a828426","tarball":"https://registry.npmjs.org/@material/button/-/button-5.0.0-canary.d1be53a2e.0.tgz","fileCount":11,"integrity":"sha512-ogN+O+NrPNERyN8Ye9rLDZu2uWQ2/oV11hBJjG06bUQE3vyi2M6yIAxGNM0ZuqN8Hw1RirTdGe5hvFEs37zT5A==","signatures":[{"sig":"MEQCIFAHF6Jpn8jj/9xRcDti1MSl7krjgjH5jt59KvPM46t+AiApI3jNI04g2UByFiRRazOSyKnXSM6m059JBOx5I8ofQA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":201191,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeFQNrCRA9TVsSAnZWagAAA3wP/RGPr5SmlC1oJ8dtFbVU\nnRlA2hkZfbUXnVeTFfOahPY8jIo8JgjyNSWCYIAeByjWp5CY/eNal4uLfGbI\nwuYaLDJvKzbNm2fbp7Rr/rEMmpYlx1P0qgg5quPi4265Yb5IiC3S6I+8maE/\nMY6OeFgPJ3B0MNKgoYY5wATC5wVm6Mx0NJONVr46qrglLh+PkuQNDBPB0E5m\nPQ5fbPT8uyV5x7/w+qAR3lGdaBkMtNbv2QIkWpJd489tdnk+qPqjHKLTxmjK\nCf3nniKvOO7v0JilKP39W43MEF9ObsW7KkLUN5ymYEgqWsmUnTzQd//lrjsC\nmu8uAzkDX/eb7C7l1cD02kc/mc0kTIVe9Sso2OLYIdZq3ERaU+bN/FUmkCCS\nHGqoIJFUG/i4xVGq9cihtCWo/DkjNUibVeIsWM+05szqLyo6aB7bhJIi2hiX\n9u6dniRHyL3GBfbHIHJGU60ovb2wkDZMmugDFjFI2h/ieLLaaSnYyAsPnhgu\nbmfgdDf45q6D08qytLyOhcnRTChZZzq+4ehSB7i5wk/WgGuwiBnyBYe15IrW\nnO0CpsXDVhol82vBtJw4bmV+xx0Xl4voxT6f+NpOx2/sLL8XwLV93H2mMyJM\nW2xnvY95jvJzAFzlcAeP9CebU6Uyjj3N4WWPrSSOHUMpDu0RDi6q3tE8iLZt\naQXW\r\n=Z9GP\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n\n\nButtons allow users to take actions, and make choices, with a single tap.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/button\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n```\n\n> _NOTE_: Examples here use the generic `\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n> _NOTE_: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Additional Information\n\n### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n\n> \\*_NOTE_: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n> buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n> directly within the `mdc-button` element.\n> However, the `mdc-button__label` class may become mandatory for all cases in the future, so it is recommended to\n> always include it to be future-proof.\n\n### Sass Mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass Mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`mdc-button-filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass Mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`mdc-button-container-fill-color($color)` | Sets the container fill color to the given color for an enabled button.\n`mdc-button-disabled-container-fill-color($color)` | Sets the container fill color to the given color for a disabled button.\n`mdc-button-icon-color($color)` | Sets the icon color to the given color for an enabled button.\n`mdc-button-disabled-icon-color($color)` | Sets the icon color to the given color for a disabled button.\n`mdc-button-ink-color($color)` | Sets the ink color to the given color for an enabled button, and sets the icon color to the given color unless `mdc-button-icon-color` is also used.\n`mdc-button-disabled-ink-color($color)` | Sets the ink color to the given color for a disabled button, and sets the icon color to the given color unless `mdc-button-icon-color` is also used.\n`mdc-button-density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`mdc-button-height($height)` | Sets custom height for button.\n`mdc-button-shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$mdc-button-density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`mdc-button-horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`mdc-button-outline-color($color)` | Sets the outline color to the given color for an enabled button.\n`mdc-button-disabled-outline-color($color)` | Sets the outline color to the given color for a disabled button.\n`mdc-button-outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `mdc-button-horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.14.1/node@v10.18.0+x64 (linux)","description":"The Material Components for the web 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/density":"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/button_5.0.0-canary.d1be53a2e.0_1578435435347_0.180557702411289","host":"s3://npm-registry-packages"}},"5.0.0-canary.9b0d06e32.0":{"name":"@material/button","version":"5.0.0-canary.9b0d06e32.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"e3ac0303319e6d92fa8ec8e259bee43ce27a339d","tarball":"https://registry.npmjs.org/@material/button/-/button-5.0.0-canary.9b0d06e32.0.tgz","fileCount":11,"integrity":"sha512-8+oCNL6b/KRgxLsEyiN6Iv9pHcjFmb4BowwuAd3rkb2/R+9x0cmqU03AEGZdFN60UoOBo5Rj5UqGMcvFQlPFqw==","signatures":[{"sig":"MEYCIQCpKQDv8jo6b26DafP8AiwZnV3eIuaymMQIfPn2nU2ZugIhAIA7QqlsqXzIO+GXAmFh08aus/C+DLXnIcBRDTHht3y6","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":201191,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeFQPvCRA9TVsSAnZWagAAlPgP/0wdoqtVq667TVLE7pXk\nvZ8zesTQBnVH6USG/rOwex10F6+CWiCc9WGT0DDlLLePnSmCC9VpB92nGxrX\nrgircxY6yNgDvKYVR0a9NzP58a73G4JpXbgf3yNAz/FV1fRdfthZ+ZY795MI\nkjT9rKzs1veWAawZlkJDOe/bNyBDXpm+2NEyxiZ47zONomM4+AIHSFODjgAS\nmxCUPB5z9aRpI7gXnHrjJFda0czfr0JHeg+6H3pjlSbTt7fAJccif5pnwyt5\nEJBK3dboApChnnxZQSaIK9+zyM1jvy/qQEOZzgwNTWQ+2gGcwVbhyildXxkE\nz2UQ+PQxXzfmqt0yF58qqp6TsClbtV1EMHKkzgMvEf8qR+ZtxjYZj38Q1aQj\nvJ5xuOZXU1PN0ZOGSY2Q3xiM/Vcg4EQuhVwz/RQPiXj62LdpwkrDZamoxYPz\nkHedAlKW1kBWPZGGLmmCgFwHG7oBd6nXQ4JeIGKzNyyeH6czqyoBKnVbfbdY\nTZVIw/fGcMEq35lInYnn0/WAotxZeJeFvooXuHpU8rqJW37cfktialLxyl3Y\nvgcwYxeoq8OGy5v4ffgQfLyCX6rVoNybgyGtSAi1+7CA4kw6gdqKDrncejSF\nxfJDENidYuFjHN5XwlIQncMY2xhE5Ug/tIJmLJ35CY42gp5uhHAw+BnRjPPf\n+Zyo\r\n=fXoX\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n\n\nButtons allow users to take actions, and make choices, with a single tap.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/button\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n```\n\n> _NOTE_: Examples here use the generic `\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n> _NOTE_: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Additional Information\n\n### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n\n> \\*_NOTE_: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n> buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n> directly within the `mdc-button` element.\n> However, the `mdc-button__label` class may become mandatory for all cases in the future, so it is recommended to\n> always include it to be future-proof.\n\n### Sass Mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass Mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`mdc-button-filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass Mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`mdc-button-container-fill-color($color)` | Sets the container fill color to the given color for an enabled button.\n`mdc-button-disabled-container-fill-color($color)` | Sets the container fill color to the given color for a disabled button.\n`mdc-button-icon-color($color)` | Sets the icon color to the given color for an enabled button.\n`mdc-button-disabled-icon-color($color)` | Sets the icon color to the given color for a disabled button.\n`mdc-button-ink-color($color)` | Sets the ink color to the given color for an enabled button, and sets the icon color to the given color unless `mdc-button-icon-color` is also used.\n`mdc-button-disabled-ink-color($color)` | Sets the ink color to the given color for a disabled button, and sets the icon color to the given color unless `mdc-button-icon-color` is also used.\n`mdc-button-density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`mdc-button-height($height)` | Sets custom height for button.\n`mdc-button-shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$mdc-button-density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`mdc-button-horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`mdc-button-outline-color($color)` | Sets the outline color to the given color for an enabled button.\n`mdc-button-disabled-outline-color($color)` | Sets the outline color to the given color for a disabled button.\n`mdc-button-outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `mdc-button-horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.14.1/node@v10.18.0+x64 (linux)","description":"The Material Components for the web 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/density":"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/button_5.0.0-canary.9b0d06e32.0_1578435567560_0.0872579181707851","host":"s3://npm-registry-packages"}},"5.0.0-canary.730c807a0.0":{"name":"@material/button","version":"5.0.0-canary.730c807a0.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"1b98f8969f9fa71d4f3ae60cc2ea3992d58f42e3","tarball":"https://registry.npmjs.org/@material/button/-/button-5.0.0-canary.730c807a0.0.tgz","fileCount":11,"integrity":"sha512-h7nbMhuNB8oIzTjrXAeUgnuF1Ym2xt5WW6SYviv8u5gxqGa5UR8asr5yx7M+7b3TUI3WfOFi4zV9Gzz7vDBvfA==","signatures":[{"sig":"MEUCIE8n6j+8N3lkFBKKCBcFOh0uTMh7wJEhn83RBtYg5byLAiEA3hKEOXhpO3iBfl6V28esF7hp7ratTXeXktzntEuyL7A=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":201191,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeFQROCRA9TVsSAnZWagAAlcwP/2Co1XgRg92w+c5ITa/y\nTM2DEWSFnn139/6qAZo0PLUqNcyc948XPGVbxh7u7Eb1RiLK8HUgURZ1sfay\nFg4XEBWLOlC4r6yRCp2WjxHqduRZsBBNU7e7H1Joy2oZnTHl/aXds/QM6eqX\njpb0DwlMj3UK0eRoVAbYBddrBfaSICi7SRexfYz5eQaGL34BilotsPQfCynZ\n2jTrEYBW+Ynhv/Rs1YfCCowtsnG1wb86hod7X9qugobBlGv6sP2XKBTBmcw5\n/MKm1stArWsI59VoI4a+WUAXX3hN9IsTkqSZpHE1J17bZrjpxybISB6cewMO\nLoryKmBMQrlCwLZ6BYzUOrt2xDSlY2NmH85exnmAY8cbitL7k14IZbzGYlCn\nPjOOZnOHAFvWjxZaVOLH0OslrW3twpfAo7VeSpolYQrEdopCRKZpJVzwoRw7\nLbgV5hCv1mXg+dQdTy42jZ8zCaqmTV3mAunfJwkr2Q0PHW5DEpQErFHR6n3P\nqkLGJWLcuCGQ2fXHhBE/Kc3Ek16lDBmO6rqmFVKc3tlYy63UoiBrmW2vLm0O\nolthRgur+jXlBCh15p8HgID1oGS39I7W3KXoA2i1iPcCSNgeXtArCS4A57/T\nyTSuGvRy4CANehe+2CzMRmUdzEyXCXSeC0X2YqOrxuPIRSj4K6gK5iQiN6si\nbV54\r\n=XX76\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n\n\nButtons allow users to take actions, and make choices, with a single tap.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/button\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n```\n\n> _NOTE_: Examples here use the generic `\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n> _NOTE_: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Additional Information\n\n### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n\n> \\*_NOTE_: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n> buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n> directly within the `mdc-button` element.\n> However, the `mdc-button__label` class may become mandatory for all cases in the future, so it is recommended to\n> always include it to be future-proof.\n\n### Sass Mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass Mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`mdc-button-filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass Mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`mdc-button-container-fill-color($color)` | Sets the container fill color to the given color for an enabled button.\n`mdc-button-disabled-container-fill-color($color)` | Sets the container fill color to the given color for a disabled button.\n`mdc-button-icon-color($color)` | Sets the icon color to the given color for an enabled button.\n`mdc-button-disabled-icon-color($color)` | Sets the icon color to the given color for a disabled button.\n`mdc-button-ink-color($color)` | Sets the ink color to the given color for an enabled button, and sets the icon color to the given color unless `mdc-button-icon-color` is also used.\n`mdc-button-disabled-ink-color($color)` | Sets the ink color to the given color for a disabled button, and sets the icon color to the given color unless `mdc-button-icon-color` is also used.\n`mdc-button-density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`mdc-button-height($height)` | Sets custom height for button.\n`mdc-button-shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$mdc-button-density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`mdc-button-horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`mdc-button-outline-color($color)` | Sets the outline color to the given color for an enabled button.\n`mdc-button-disabled-outline-color($color)` | Sets the outline color to the given color for a disabled button.\n`mdc-button-outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `mdc-button-horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.14.1/node@v10.18.0+x64 (linux)","description":"The Material Components for the web 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/density":"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/button_5.0.0-canary.730c807a0.0_1578435662189_0.22548290670209026","host":"s3://npm-registry-packages"}},"5.0.0-canary.2213152cd.0":{"name":"@material/button","version":"5.0.0-canary.2213152cd.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"8200a37244ce453cffb870c3fa5e15d719dcb0b1","tarball":"https://registry.npmjs.org/@material/button/-/button-5.0.0-canary.2213152cd.0.tgz","fileCount":11,"integrity":"sha512-Lr2DqO9ylwJzNrBlz3y2mYhb8heUJNkupVs82L+NCJylk9jqCt6xp1XTYWB+n0d/f7vrYBO6D01Jl6TfSEWD+g==","signatures":[{"sig":"MEUCIQD7vL3/iupbAR6ksAt+Isjo3WN6XzdMuiWurR5qvblyrQIgNe8+TYiYQXzi2sk1GOSK1OXD1mNZgqInFArxliQKhu4=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":201191,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeFg/NCRA9TVsSAnZWagAAq/kP/A5N/xVKYhcYD8XTt62a\nVFtUET4VkABmFAx62JC6rU5EDlWsv0++61Mwg82IYKJqm2nxRXmbpi3SYYq5\nsm7bg3z8wulVj5nDbt6D1W1WxDR5/OPxJQb0mmkyuq/upFlSUJ7dPPABUrtu\nRZ1edt6/rHhhJ/igqduc9TLjgkNCe1oQM6IBA1DdNzdXeoW0YWzOID19tVq7\npCQtAA42vvMO+Eq4YZXcljCE3ErNKo5Ao6IVnEg6GUlo1n3sAy0qhe4ab/pS\nzqRNGkCOHtPOP+vBIv0aSGIzpmY1nX63flSjVxOAomDce417t9JCAWMJNdVL\nYTsiueJWSv5rE42IC5q2SyBtAzDN94P+4uS5fwRYNQEzEtQw6XgeXpbi82Mo\niRLhhQYEWeOeHgSxcx6YiNzalDT65yFWUoyCAOglzolVSZoY7GNHxSR9KefR\n9uXKOGuhp3/8+NMeyCvoVjruH/JXXfAYf78PSMtDdmsBYTccXGGO1d4JQLwH\nch/7yNBtjV6p1cvMMWnreRD3ejGyNG9wmOVSKlIGsLrG5jkCeBuYwZRIjXlE\na6ybU05+VeAx5ZM9etDDzTUwHXm81yc6PrwntJodQEDDFeEhLRYS6WA0wBX/\nM815Ozrxx1qQoFIfdH9lGD9fO8aG76HFxTuedeGgexvrSJjDlTZM08XHcDj2\nyGI5\r\n=CM00\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n\n\nButtons allow users to take actions, and make choices, with a single tap.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/button\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n```\n\n> _NOTE_: Examples here use the generic `\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n> _NOTE_: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Additional Information\n\n### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n\n> \\*_NOTE_: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n> buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n> directly within the `mdc-button` element.\n> However, the `mdc-button__label` class may become mandatory for all cases in the future, so it is recommended to\n> always include it to be future-proof.\n\n### Sass Mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass Mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`mdc-button-filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass Mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`mdc-button-container-fill-color($color)` | Sets the container fill color to the given color for an enabled button.\n`mdc-button-disabled-container-fill-color($color)` | Sets the container fill color to the given color for a disabled button.\n`mdc-button-icon-color($color)` | Sets the icon color to the given color for an enabled button.\n`mdc-button-disabled-icon-color($color)` | Sets the icon color to the given color for a disabled button.\n`mdc-button-ink-color($color)` | Sets the ink color to the given color for an enabled button, and sets the icon color to the given color unless `mdc-button-icon-color` is also used.\n`mdc-button-disabled-ink-color($color)` | Sets the ink color to the given color for a disabled button, and sets the icon color to the given color unless `mdc-button-icon-color` is also used.\n`mdc-button-density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`mdc-button-height($height)` | Sets custom height for button.\n`mdc-button-shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$mdc-button-density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`mdc-button-horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`mdc-button-outline-color($color)` | Sets the outline color to the given color for an enabled button.\n`mdc-button-disabled-outline-color($color)` | Sets the outline color to the given color for a disabled button.\n`mdc-button-outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `mdc-button-horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.14.1/node@v10.18.0+x64 (linux)","description":"The Material Components for the web 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/density":"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/button_5.0.0-canary.2213152cd.0_1578504140920_0.9416725343513472","host":"s3://npm-registry-packages"}},"5.0.0-canary.5750f7169.0":{"name":"@material/button","version":"5.0.0-canary.5750f7169.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"12750db6a27415cc5685208992ce4f2ea369e3c2","tarball":"https://registry.npmjs.org/@material/button/-/button-5.0.0-canary.5750f7169.0.tgz","fileCount":11,"integrity":"sha512-1p9P/l0cZlyDJnC2Ln8YbgrzQOfL58x7vAEOcfLX3vWsqOkQYKfAg7rEcg8LSdLtxQtAOi0u8kMwwTaB/QQ/8w==","signatures":[{"sig":"MEUCIGG9NcoUnZWpQne5AgW64T2+HMiY9ABp3F/z3WfT6FWbAiEA+1uy3z37Z3VzSLYRA9BdM8S/ZFjjhwH9p5YeMtUmG6k=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":201191,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeFhfxCRA9TVsSAnZWagAAVSsP/08pqGt6TXh8KFlHGvF9\nXcNfucWvDyaGTlbvQZvvU3R4rDzzC6lxg+ou/2lPld2EQK+aETZUH+n5f19t\nhhazQWtR3cooqvgjV2ND2osxLbVyqhkd8E+fckXTvsJlIH1lLQofQPnbo6K7\nJ399tfYQCWixweGMM13io6f3agc/vqFGB/01eWBSWCTrsZqwzbEijNaVuYST\nhVPbuz/l44bErcpZinCWDPQPO1wD0JlINjq03xs+IzmuUNcit3I4dZ4uJL+z\n7ycXAuxKcty4/cQAv5gRXR1cLwD27+Ue6w7xHE7xQ6Yi5B3d8SxxcJSfTaas\ncbPg2rY0vBguXEDJ528tmdM3lSNvT8mt+OUSskuKlFkjMioP0eQYG78o2HjC\n2NdKpXBD4bHFafKluFyVDqPGxI1f7G3Xp6k98BZT59UKGxBSMEoNJ2qxNkzh\nmK7/ASnqI+pYDAW3ovQ8mTErDGqsOUx9OmX66gT1vTm4+sb6s5FIEp2BnFlt\nF87GPqT4YVxm2Ik/t4xwV3+9vr2BaQ5UD73rYQzP/C0Ub9YI+uR6gaZZtK0C\n/dO3x431CaS9W7dQvrhy90ewRvM6cHpLBKeTI3O5M8sxmHlnhb6aAVurfla6\nGJ/tqup//4mNvrkZY4fwWcj3txPmG3g1rDEmUqlLOpDhXO4JXzZCE2V0LmqP\nci7x\r\n=px26\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n\n\nButtons allow users to take actions, and make choices, with a single tap.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/button\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n```\n\n> _NOTE_: Examples here use the generic `\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n> _NOTE_: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Additional Information\n\n### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n\n> \\*_NOTE_: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n> buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n> directly within the `mdc-button` element.\n> However, the `mdc-button__label` class may become mandatory for all cases in the future, so it is recommended to\n> always include it to be future-proof.\n\n### Sass Mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass Mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`mdc-button-filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass Mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`mdc-button-container-fill-color($color)` | Sets the container fill color to the given color for an enabled button.\n`mdc-button-disabled-container-fill-color($color)` | Sets the container fill color to the given color for a disabled button.\n`mdc-button-icon-color($color)` | Sets the icon color to the given color for an enabled button.\n`mdc-button-disabled-icon-color($color)` | Sets the icon color to the given color for a disabled button.\n`mdc-button-ink-color($color)` | Sets the ink color to the given color for an enabled button, and sets the icon color to the given color unless `mdc-button-icon-color` is also used.\n`mdc-button-disabled-ink-color($color)` | Sets the ink color to the given color for a disabled button, and sets the icon color to the given color unless `mdc-button-icon-color` is also used.\n`mdc-button-density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`mdc-button-height($height)` | Sets custom height for button.\n`mdc-button-shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$mdc-button-density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`mdc-button-horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`mdc-button-outline-color($color)` | Sets the outline color to the given color for an enabled button.\n`mdc-button-disabled-outline-color($color)` | Sets the outline color to the given color for a disabled button.\n`mdc-button-outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `mdc-button-horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.14.1/node@v10.18.0+x64 (linux)","description":"The Material Components for the web 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/density":"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/button_5.0.0-canary.5750f7169.0_1578506224653_0.21357911552536746","host":"s3://npm-registry-packages"}},"5.0.0-canary.f7abc7a43.0":{"name":"@material/button","version":"5.0.0-canary.f7abc7a43.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"6705ab7328e74b3c407867d492e18b724d660918","tarball":"https://registry.npmjs.org/@material/button/-/button-5.0.0-canary.f7abc7a43.0.tgz","fileCount":11,"integrity":"sha512-zSM7He/7S4mRjyWIYsg/4OU4NAP8DKfIOmlnCsn7FwJ9aL0if2bCWzLCTjQ0QJJKRnENcNozmQW+R7XrW2m5eg==","signatures":[{"sig":"MEUCIQDVPUcDkhilHhtQ/sGgXeaw9HEfHEDuWMigthZPa/RCxQIgf3CJQxxct0RYXJa3voau4dtlwp6JNjVI2RGW9ZRehv0=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":201191,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeFh8rCRA9TVsSAnZWagAAWe0P/1u1dcN1pXZGK/VJMLOU\nqojCZw+fo+J1Ga5rl85ObkdA/tGBiWX2O/nCbkvg3QzwuCtTEe/oV7Cpzlp6\n7bUPEL6bVvJT6LqYZZ1JqRYTgwox4oip8UHiOodGpQMU65ULuHiJaTzegFnY\n9DT/Ts5JQs28VW0ofibvOOi0kEZnC5FOSmltiSQ889O+aoWVx3YKFGZKDmjN\nsZEI9keVKb4fqipokilF+HVpCQ0OIHVgeUWDoXbZT+ibdT8SbruL2jzsG01Q\nXKwTc8mgWe0YN2chY/KIDBpz/eBcxiwtXA3Hvb/Xx3afkW+zzuCoG9N32N7f\nEdCx5dUPc1Sx//PNFqn7AVBUb6efyyUkG6FFg7h4Y+IKuF1nz0wjPVfGGIvK\n1qm8JWQAdS0sNF4Qo+wHxbbM9XyGI5SzopPStXw26wJSaPr6iCwtv3juFANX\nl+8JfO/J2VJaEem7jHTQt2fhu8XfqQu1CpUKIYHEtIAm4129MPjoJSIeCUpc\n5edjVf5WO2nlEqgawVnOyvXx0sbrqX5pOQSrljTtXoYHztwR3qRiwnJb1em4\nzEMVXUIhwI6WK6O7H6/BNnw7aSaF+XFUll7mghHB1mameMDG/7dlGnFNXLfF\njclCTivoebFzaSYvFA9FUzQMpw/LoWL39mggkLxH1SVdg9oa7gop5FvTYxHy\nhlvw\r\n=HEZy\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n\n\nButtons allow users to take actions, and make choices, with a single tap.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/button\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n```\n\n> _NOTE_: Examples here use the generic `\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n> _NOTE_: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Additional Information\n\n### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n\n> \\*_NOTE_: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n> buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n> directly within the `mdc-button` element.\n> However, the `mdc-button__label` class may become mandatory for all cases in the future, so it is recommended to\n> always include it to be future-proof.\n\n### Sass Mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass Mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`mdc-button-filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass Mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`mdc-button-container-fill-color($color)` | Sets the container fill color to the given color for an enabled button.\n`mdc-button-disabled-container-fill-color($color)` | Sets the container fill color to the given color for a disabled button.\n`mdc-button-icon-color($color)` | Sets the icon color to the given color for an enabled button.\n`mdc-button-disabled-icon-color($color)` | Sets the icon color to the given color for a disabled button.\n`mdc-button-ink-color($color)` | Sets the ink color to the given color for an enabled button, and sets the icon color to the given color unless `mdc-button-icon-color` is also used.\n`mdc-button-disabled-ink-color($color)` | Sets the ink color to the given color for a disabled button, and sets the icon color to the given color unless `mdc-button-icon-color` is also used.\n`mdc-button-density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`mdc-button-height($height)` | Sets custom height for button.\n`mdc-button-shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$mdc-button-density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`mdc-button-horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`mdc-button-outline-color($color)` | Sets the outline color to the given color for an enabled button.\n`mdc-button-disabled-outline-color($color)` | Sets the outline color to the given color for a disabled button.\n`mdc-button-outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `mdc-button-horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.14.1/node@v10.18.0+x64 (linux)","description":"The Material Components for the web 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/density":"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/button_5.0.0-canary.f7abc7a43.0_1578508075208_0.5174953461795351","host":"s3://npm-registry-packages"}},"5.0.0-canary.bf7b4a061.0":{"name":"@material/button","version":"5.0.0-canary.bf7b4a061.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"efac6561b4da6b3b9fc9f9ba593577507742756c","tarball":"https://registry.npmjs.org/@material/button/-/button-5.0.0-canary.bf7b4a061.0.tgz","fileCount":11,"integrity":"sha512-WSYX5Tv25PVoeVyqnhkSkxxnJWFhEKhji7l5vgTVZ36gi0kHIJoQiLXa9WM34vrlcufg6UUTTKQ3X3b2b7RuIA==","signatures":[{"sig":"MEUCIHr0C6abx6Q/SWOkun1EDquGt5ZADWTyOi9dl0iV4IulAiEAu9HWhQqNxZA/pOhzZpozhkJQC4VeToGPBXfh6SEtILI=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":201191,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeFiJlCRA9TVsSAnZWagAAnHYP/j9lod8qEmaQc0KqOtgM\npv8F9iddPAlLsxHR2t2d6Ky150qzg0Zxyal/k44iYudxctPEFOsqyLdJ0PA6\nlkm0GdV/RUvk8WyH91gUpkMtwgUlPlgUBsFeRSehWZ5rSacKCnfQoirY5ePZ\nZwLt3ucrOWnrkbkJCTR6h6dVUkQoKch6wB9xhBfUKmN7LGUxB0qye/CpcZGU\nsHkjxqFUBIpAG0aOguwCM6trJ1aVmFQ1+a98w43pbDxydj4lgwICameh70Pd\n7xLejX3PDd4HuzMAdZvoXp7t6SeidZcPx67erzVe7Hlk4PljUm8vM9n3QAJp\nsjxPZQ1C1X9q+uWOBpb0BWoMrCplBoQYNvqH2Mz4lx17r6IWkGqOBg7zvx/j\nOmxt5FB5e6QgyPFy+RFhSk3AvF5gknqF5dgImbopDfEujtjuXQwba2Pk7K7u\n6FbV+IYRc5GBLrwewsLUZ/1TNoPDN9Hgz6aIPGTTUntBJ1nl8p12t+I1EnTo\nuWmJiUAl0LJtmjDz0dHNhlPtQYjuIh3hOLP2S80uXKrVgdjmiZBZf/2XSRuN\nf1dC131kJrLLCLzncntgmIoXKdLZOFgRlonlGl8AjUnMzkLLweI7u40NYLBI\nY7gvJY+Zov+gwGYP38WiIMMbkJ0g6kx+fRN3j0zEMyeFZpIcOR9X9/UQRPwj\nreH1\r\n=L8pW\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n\n\nButtons allow users to take actions, and make choices, with a single tap.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/button\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n```\n\n> _NOTE_: Examples here use the generic `\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n> _NOTE_: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Additional Information\n\n### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n\n> \\*_NOTE_: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n> buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n> directly within the `mdc-button` element.\n> However, the `mdc-button__label` class may become mandatory for all cases in the future, so it is recommended to\n> always include it to be future-proof.\n\n### Sass Mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass Mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`mdc-button-filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass Mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`mdc-button-container-fill-color($color)` | Sets the container fill color to the given color for an enabled button.\n`mdc-button-disabled-container-fill-color($color)` | Sets the container fill color to the given color for a disabled button.\n`mdc-button-icon-color($color)` | Sets the icon color to the given color for an enabled button.\n`mdc-button-disabled-icon-color($color)` | Sets the icon color to the given color for a disabled button.\n`mdc-button-ink-color($color)` | Sets the ink color to the given color for an enabled button, and sets the icon color to the given color unless `mdc-button-icon-color` is also used.\n`mdc-button-disabled-ink-color($color)` | Sets the ink color to the given color for a disabled button, and sets the icon color to the given color unless `mdc-button-icon-color` is also used.\n`mdc-button-density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`mdc-button-height($height)` | Sets custom height for button.\n`mdc-button-shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$mdc-button-density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`mdc-button-horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`mdc-button-outline-color($color)` | Sets the outline color to the given color for an enabled button.\n`mdc-button-disabled-outline-color($color)` | Sets the outline color to the given color for a disabled button.\n`mdc-button-outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `mdc-button-horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.14.1/node@v10.18.0+x64 (linux)","description":"The Material Components for the web 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/density":"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/button_5.0.0-canary.bf7b4a061.0_1578508901073_0.9098626897121964","host":"s3://npm-registry-packages"}},"5.0.0-canary.784fa7903.0":{"name":"@material/button","version":"5.0.0-canary.784fa7903.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"6e1001f0028d159e67bfdbfa5c9331c1490f7cd4","tarball":"https://registry.npmjs.org/@material/button/-/button-5.0.0-canary.784fa7903.0.tgz","fileCount":11,"integrity":"sha512-hqRJijWmsPBPWui7PpK1WC1KSimtzkqCsFw9+qnLDrfV98e897eEKZTqHmCXEvHiNt/OQwQfkmYrEXzqHbzYFQ==","signatures":[{"sig":"MEUCIQCXch3APFWWrK4Vw7FRoleNlwjp3dsbE5DtvK4QfQZArwIgPt60KqQoXfjSSn7/dapcavznGPrLyhHgxSuvMQ3TUjo=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":201191,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeFikkCRA9TVsSAnZWagAAALUP/Rvl5T6qU9Yy6O55vYZe\nVWElSlUhGCxXvOALDw5pPo2LyxynEF3YzKbZRUg8EUn1dm9wYjpU4uP3QkK1\nbBbC1hm8g9TOKR8hEy2STH4hThSYUNPR1vYYQj7rhQvOaNb/RYioNuXj98Ve\nttbe4BuBq3RVwCKFRJ9QakSn09csA5295BwaaYI7u5vwaXJMz4V5BwsJabva\nF4Ol5UIm6tSqeTN9jOLvI3BgKwDqowuEOgv+/DY12HfcuCFIqbVEOO2tG+tI\nNs4XPNPcWGDIQ8p3lehBRFZfJwVklhe3+1qqiu62wiyPsfMxZNdRt0Dj4Aeq\nU4y5qXUPTishaZxznmE3fjt73UrR8FcN6KOB1joTRwvsHzI4SPjSVcpkOFdq\nUC4US/+3ah3pPXUJObcKQOeJhGnSeZuj9CdeXjw+sKkqpGK74eJUYdSd7idM\nOIHo++3Z8UhydixCCCbgNZaWMQ2h8KvXEa7jGg6Ic1lr2CmChRJbL3eaOWlC\nc0m+ZT4+Sqz7yzIuapgS3VW1lPmXBse6E6ztY3/XTO4N4eAysXSSE8c/8C/f\nb2F4rObSWwgDWs1EtmZgiy0K+F+A7w8177Jh7UXrzztLo1AOXcfns6qD17fH\nqqdscNZ+ADJNt2LYrmWzgTDDBJbUnmn86Ge/FHq5n0JEiNXWCe1q2L1mhqzn\ngvmR\r\n=KocS\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n\n\nButtons allow users to take actions, and make choices, with a single tap.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/button\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n```\n\n> _NOTE_: Examples here use the generic `\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n> _NOTE_: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Additional Information\n\n### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n\n> \\*_NOTE_: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n> buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n> directly within the `mdc-button` element.\n> However, the `mdc-button__label` class may become mandatory for all cases in the future, so it is recommended to\n> always include it to be future-proof.\n\n### Sass Mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass Mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`mdc-button-filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass Mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`mdc-button-container-fill-color($color)` | Sets the container fill color to the given color for an enabled button.\n`mdc-button-disabled-container-fill-color($color)` | Sets the container fill color to the given color for a disabled button.\n`mdc-button-icon-color($color)` | Sets the icon color to the given color for an enabled button.\n`mdc-button-disabled-icon-color($color)` | Sets the icon color to the given color for a disabled button.\n`mdc-button-ink-color($color)` | Sets the ink color to the given color for an enabled button, and sets the icon color to the given color unless `mdc-button-icon-color` is also used.\n`mdc-button-disabled-ink-color($color)` | Sets the ink color to the given color for a disabled button, and sets the icon color to the given color unless `mdc-button-icon-color` is also used.\n`mdc-button-density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`mdc-button-height($height)` | Sets custom height for button.\n`mdc-button-shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$mdc-button-density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`mdc-button-horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`mdc-button-outline-color($color)` | Sets the outline color to the given color for an enabled button.\n`mdc-button-disabled-outline-color($color)` | Sets the outline color to the given color for a disabled button.\n`mdc-button-outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `mdc-button-horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.14.1/node@v10.18.0+x64 (linux)","description":"The Material Components for the web 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/density":"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/button_5.0.0-canary.784fa7903.0_1578510627819_0.2331320093460474","host":"s3://npm-registry-packages"}},"5.0.0-canary.823c050ba.0":{"name":"@material/button","version":"5.0.0-canary.823c050ba.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"c6f10c669cd1bd59117c24e949385103193a2cfe","tarball":"https://registry.npmjs.org/@material/button/-/button-5.0.0-canary.823c050ba.0.tgz","fileCount":11,"integrity":"sha512-61JaftuevR2tx4Xktud2fFqRJ8hxfuKEra/cIIiHjFr/8xcUb/j1c9ZqYdMSr289Uu4Jz0yFAfJV9sUAuXJ/wg==","signatures":[{"sig":"MEUCIQCxKJ4r8zwgF+8bIaFhS23zE/bbTGX8kBRrkND2xfCqsAIgOf7OhT7wxg/wjon8txIeZBPaN3kTwEw9KdinlenTU60=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":201191,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeFjdMCRA9TVsSAnZWagAAEVYP/3nbDWSDlYwMquO4Iozc\nfM8vEs5BhAhEoKItBNjp83N1aHeQ2QKH9MGrqwBLj/Sj2uKOMn78ox+m55WG\n25Ej6Buu/mmdx0bQhn8yLHFl2cV1F/uPJEUFbyHYYIt5bAQnUyF3OdiOtzKe\ndGkhekZi4AojpU4kVTorTwBszRCkEWNQ4svHW0xvcJy5LmuyN6srOAxiZiSc\nGNUeLJaVrqxMxTckYEXrk+aJC6zpQfhzxJpmdkpP1bKNM++ZHtkaF3NU4+Kl\n+6E8tRHOrPYfjly62SwuY/MGmuA6DxncTBfBysLQ8Yz+CmFlzBhPPzaYy45K\nvMnsMuL3f8OkHI2Lt+RSdDzFqXGrjXwSozAZH7yIXgHN5miKdBb480R87PCS\n1UMnL2gAU5sUf1tKebrLGZjO9YavokXSNyvOI3TRg0WPXTYfiOGoCAOT19M/\nWc3emRLaevQMISmx8h2gKlpPoWgYb/wUI220sYqUDXUIDAG4/Qlspji6KY54\nad9nwzWw6D/D5ckz1Ns7T9ZDbW9UzxOHnT4jYx7Rs+Q9HZKOVsvE84OfsywR\ngQZMSTz4Jwe8WfOwij7V3dZ9IUDbltZQJOgH3wOv3q1BuSqLrr0mbj52e0dx\nqUm7r2lxl8T798WOq1kwPQCFz8fo0H+L3Y4cm7sMoEYYK0UPq55OfrKqZtRj\np/fp\r\n=lYHM\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n\n\nButtons allow users to take actions, and make choices, with a single tap.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/button\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n```\n\n> _NOTE_: Examples here use the generic `\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n> _NOTE_: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Additional Information\n\n### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n\n> \\*_NOTE_: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n> buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n> directly within the `mdc-button` element.\n> However, the `mdc-button__label` class may become mandatory for all cases in the future, so it is recommended to\n> always include it to be future-proof.\n\n### Sass Mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass Mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`mdc-button-filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass Mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`mdc-button-container-fill-color($color)` | Sets the container fill color to the given color for an enabled button.\n`mdc-button-disabled-container-fill-color($color)` | Sets the container fill color to the given color for a disabled button.\n`mdc-button-icon-color($color)` | Sets the icon color to the given color for an enabled button.\n`mdc-button-disabled-icon-color($color)` | Sets the icon color to the given color for a disabled button.\n`mdc-button-ink-color($color)` | Sets the ink color to the given color for an enabled button, and sets the icon color to the given color unless `mdc-button-icon-color` is also used.\n`mdc-button-disabled-ink-color($color)` | Sets the ink color to the given color for a disabled button, and sets the icon color to the given color unless `mdc-button-icon-color` is also used.\n`mdc-button-density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`mdc-button-height($height)` | Sets custom height for button.\n`mdc-button-shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$mdc-button-density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`mdc-button-horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`mdc-button-outline-color($color)` | Sets the outline color to the given color for an enabled button.\n`mdc-button-disabled-outline-color($color)` | Sets the outline color to the given color for a disabled button.\n`mdc-button-outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `mdc-button-horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.14.1/node@v10.18.0+x64 (linux)","description":"The Material Components for the web 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/density":"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/button_5.0.0-canary.823c050ba.0_1578514252118_0.2280682267516263","host":"s3://npm-registry-packages"}},"5.0.0-canary.70c708dee.0":{"name":"@material/button","version":"5.0.0-canary.70c708dee.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"633d80ed53934309fda2a7f3e049a4c1bccd1e4a","tarball":"https://registry.npmjs.org/@material/button/-/button-5.0.0-canary.70c708dee.0.tgz","fileCount":11,"integrity":"sha512-nqJRafEC87i2M66dfZ530OPvbQ2tNqJSXUoLJBV8bj1YV6kGLxFAFryEYMvCi7VC8Aw491iaax8qa3ZklVd82Q==","signatures":[{"sig":"MEUCIAnpPUgvwjUthZJ6cA3CrzyXk2fo0xsMRyIfpa756kplAiEAhUHAdPNt6QEE5GeNbRxdBaLNqnrbakdGW+YqaQm7Ytg=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":201191,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeFjoECRA9TVsSAnZWagAAZ/4P/j75vlFfndxWOxF3wbUg\ncHIQQ2RBOLNLqC8U2g9JOmc7ZGH0sPFLeGqEQ8cqE8BMaD8w2+QJ7WLR6jvY\n457Fa0tXqLVG+/gOO0WyHIukBQbhNay7z38cVdzop1eawoAyF0AEkZ1mlg/0\nZ+eudVuKmIdU7IdnxP3k5UR5EmzyNt/f+D3+4SEsZuip7+THPx0SnEGeJ2XH\nnWEYly+Lha/SYo8M8n/ahQFbQq77/smUQy4O0fCQQngKTPwHauk5g4GtpVLh\nUZMy5OzYjNs9w2qQQEn592V/YcReIF8dM7NS84LX+xaHRWJw1KQ6CXfWgqi5\nNH+DM2LfOOpJ37XmU0BwM7Ae1QiA2/7glRJOofECR7hDILvPky/Xq8BlxF2c\nifWmAOAB2gnQj8dXGduIWjlcmVCCXaKGsi9mYVZnZbPlu+Bp7NnaShu6Vm3B\nDMXYxC3bohaO0ovXU9r46qEb9BMqSZL10shmq/O4B5jD0IWvC0Ky4d97/gNU\nvjqBM0kQv08gFIP7RAn6Oam/zrNNT5YaShtJzvZK9CM5AfFWce0TZZeSSF7A\nKPHxnm7gFa4JvOvIQabB56Iq9Vt47ud93i5BRhzksib3JFMoin/9jaSophVA\nv+EYgbrvY/+uPwg/88hlChbXMRBzqFYG0WVtT9TYZzbUi/D+BtIcQ4ed1RFr\n5uUF\r\n=S01v\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n\n\nButtons allow users to take actions, and make choices, with a single tap.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/button\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n```\n\n> _NOTE_: Examples here use the generic `\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n> _NOTE_: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Additional Information\n\n### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n\n> \\*_NOTE_: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n> buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n> directly within the `mdc-button` element.\n> However, the `mdc-button__label` class may become mandatory for all cases in the future, so it is recommended to\n> always include it to be future-proof.\n\n### Sass Mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass Mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`mdc-button-filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass Mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`mdc-button-container-fill-color($color)` | Sets the container fill color to the given color for an enabled button.\n`mdc-button-disabled-container-fill-color($color)` | Sets the container fill color to the given color for a disabled button.\n`mdc-button-icon-color($color)` | Sets the icon color to the given color for an enabled button.\n`mdc-button-disabled-icon-color($color)` | Sets the icon color to the given color for a disabled button.\n`mdc-button-ink-color($color)` | Sets the ink color to the given color for an enabled button, and sets the icon color to the given color unless `mdc-button-icon-color` is also used.\n`mdc-button-disabled-ink-color($color)` | Sets the ink color to the given color for a disabled button, and sets the icon color to the given color unless `mdc-button-icon-color` is also used.\n`mdc-button-density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`mdc-button-height($height)` | Sets custom height for button.\n`mdc-button-shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$mdc-button-density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`mdc-button-horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`mdc-button-outline-color($color)` | Sets the outline color to the given color for an enabled button.\n`mdc-button-disabled-outline-color($color)` | Sets the outline color to the given color for a disabled button.\n`mdc-button-outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `mdc-button-horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.14.1/node@v10.18.0+x64 (linux)","description":"The Material Components for the web 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/density":"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/button_5.0.0-canary.70c708dee.0_1578514947239_0.681453374639772","host":"s3://npm-registry-packages"}},"5.0.0-canary.5ed9d13d0.0":{"name":"@material/button","version":"5.0.0-canary.5ed9d13d0.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"fa404929f079b0d800ad3f2fc17189ff1acb65db","tarball":"https://registry.npmjs.org/@material/button/-/button-5.0.0-canary.5ed9d13d0.0.tgz","fileCount":11,"integrity":"sha512-dame5HAypEd69/DjuacyZIGnW+1nH7sT69dpCm7NTZeTh1gavWEZq5UIaODrthTULq/BH4vU4qcLn/yG4Ev+QA==","signatures":[{"sig":"MEUCIQC5z9+YG7UX4NYU47IHpEzzO6SYTcXfW6YhE4DevgUdBAIgXofo0M/Z8Ov9fBbix10CjL4qTtNxzzG+5UDbBdy1qmw=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":201191,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeFkzWCRA9TVsSAnZWagAAbBkP/3vFeqZTSTjpPILLPmFO\nbu+7lVEmBcIH4OC3Mw8LF/fWCUnk/2JTj5Wq7S6w4lbrXw3HtEI7ZcuPOogQ\nkAMPKlqJuNwDnOCbIKGG8iKrPWmY2cKUWiMEqNwI4A+32XzpiWTOQjdzaa9m\nFTJX5V0ZqytW7Wl0wlQ8k4llu54RsHRG2bdOGkTjpQCT2gTrQZ37+naiBTWa\nrQ7XT9e8avEKGp2HwD8MWMH7bYT56bzfz6v8z4P8oKc9o+06fWKl+Us9gkb0\ny1wDEDpgSYiXT5tzgoR134Ozgb4pquaRrPUd99boab1P+dCQkCdWrLLAOFXh\nNIFoLN4XRTSmLiNnn9EyZ7+jBGgkDl/HgLJarPv2BSKPqDI2oreo5kM3a1MJ\nvS3YdvrJbewX+2N2qx0XhKd8MI9LrMPM7a9KGYywdsXVU6XMwzb7QI2n1xs1\nEyOshDDo9X41KaAJ+5dEGu9LUD+GnVaWcG7lYq1yB1XpfwTNBT6S1cweWQCc\neS93Wv+dd/1T6hZL6sc31Rr7Zrc/R5nWy/H0p4r6WuKgQJ7EynPTC76axX1t\nXfzWu6JbaXC/mR/oAdaUa4KS1o6bxw/ANkb+MQJd5H8rF3YugBx7YA4y/ynf\n44Pmmlz0owMh3k/bn9IDi+IPpwjo4YrGvYKO1WOoKXTVamLp3K/952UNxnEH\nuRWY\r\n=Ri9z\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n\n\nButtons allow users to take actions, and make choices, with a single tap.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/button\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n```\n\n> _NOTE_: Examples here use the generic `\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n> _NOTE_: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Additional Information\n\n### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n\n> \\*_NOTE_: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n> buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n> directly within the `mdc-button` element.\n> However, the `mdc-button__label` class may become mandatory for all cases in the future, so it is recommended to\n> always include it to be future-proof.\n\n### Sass Mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass Mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`mdc-button-filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass Mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`mdc-button-container-fill-color($color)` | Sets the container fill color to the given color for an enabled button.\n`mdc-button-disabled-container-fill-color($color)` | Sets the container fill color to the given color for a disabled button.\n`mdc-button-icon-color($color)` | Sets the icon color to the given color for an enabled button.\n`mdc-button-disabled-icon-color($color)` | Sets the icon color to the given color for a disabled button.\n`mdc-button-ink-color($color)` | Sets the ink color to the given color for an enabled button, and sets the icon color to the given color unless `mdc-button-icon-color` is also used.\n`mdc-button-disabled-ink-color($color)` | Sets the ink color to the given color for a disabled button, and sets the icon color to the given color unless `mdc-button-icon-color` is also used.\n`mdc-button-density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`mdc-button-height($height)` | Sets custom height for button.\n`mdc-button-shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$mdc-button-density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`mdc-button-horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`mdc-button-outline-color($color)` | Sets the outline color to the given color for an enabled button.\n`mdc-button-disabled-outline-color($color)` | Sets the outline color to the given color for a disabled button.\n`mdc-button-outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `mdc-button-horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.14.1/node@v10.18.0+x64 (linux)","description":"The Material Components for the web 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/density":"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/button_5.0.0-canary.5ed9d13d0.0_1578519765773_0.26502068697304826","host":"s3://npm-registry-packages"}},"5.0.0-canary.4819cc7e5.0":{"name":"@material/button","version":"5.0.0-canary.4819cc7e5.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"867cde36d9bde436fab2442ecc399861db088740","tarball":"https://registry.npmjs.org/@material/button/-/button-5.0.0-canary.4819cc7e5.0.tgz","fileCount":11,"integrity":"sha512-+AX6zsdPknZ9da7wgHZc20s1cHm/SrKYghnBPaHkoqC42xQovVyOmv3M5WpdlrGb2/3jPto+iU/hzdCHB4nDSw==","signatures":[{"sig":"MEUCIC+g9TpOWbSyjFdRcj59c/qGpfRZUgKidj6nFnGwu6JnAiEA0v9emd+3ugdQik5mkglGny6xOl7vWUHnUUCGPmWIKSc=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":201191,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeFlCACRA9TVsSAnZWagAAt0oP/3F5jdVa33+j3WA34bS9\nXuSVsdrnmtKSCSvb41ue/nBbNgbxXpd+uherogrxbng3EcB/usMMbvn0OVGr\nds4H747c2A0ETtkmUIuuL59parW9oQsBphdhfPqSo167VpXOVATD3YvV6TX5\n2B1PVvaQWmDNgf/m7oM9nRDpkPtJmq7uzaXQueXDUyROsqRksrTI2kyd6vZy\nsIDfWXZJ/7GSX0rfxv4kMMBDcl741pCGdNqaGkfyuxsFsrThML5/tCBEiJy3\nuAxThHsxhjePZvhTaCGGIcvZo/sYhfu0YVHckYv2iFgAhqcuTb2GfG3d2ALC\nG5G9pI6wGZWEWbzPsnvKkN0ZhS0eRfSLUZfbG4U8IFXvzuJnRb1T4wg1YlzH\nGdVoRa6GQEIi6t3OOTqenE/xQKlmCaDgttLgApXSak3Wldcs63PtRrcPiCiK\nsv8mTG0vWNxbVOspJgrOEkDH/wGVopZ2Gh0x+OuGJGRkjvpZAIzbAR+qZF4t\nAMAFK/KhxNU1q2hswEkfKpwMmrd7zb++dn8H6DCYs5qz/pJ9o36X09LcASKa\nEjJ+05Ogcd7EDZnLjy4V0FBKKn9wCYAkLlUeuCE0723iYJILSdraHD7taXK7\ng3a6dhz533dlux0mLx517N3QFzBpdxm7IDwlZQT4TSB38qirBae9kIIbBa12\nwaSJ\r\n=JKab\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n\n\nButtons allow users to take actions, and make choices, with a single tap.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/button\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n```\n\n> _NOTE_: Examples here use the generic `\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n> _NOTE_: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Additional Information\n\n### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n\n> \\*_NOTE_: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n> buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n> directly within the `mdc-button` element.\n> However, the `mdc-button__label` class may become mandatory for all cases in the future, so it is recommended to\n> always include it to be future-proof.\n\n### Sass Mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass Mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`mdc-button-filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass Mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`mdc-button-container-fill-color($color)` | Sets the container fill color to the given color for an enabled button.\n`mdc-button-disabled-container-fill-color($color)` | Sets the container fill color to the given color for a disabled button.\n`mdc-button-icon-color($color)` | Sets the icon color to the given color for an enabled button.\n`mdc-button-disabled-icon-color($color)` | Sets the icon color to the given color for a disabled button.\n`mdc-button-ink-color($color)` | Sets the ink color to the given color for an enabled button, and sets the icon color to the given color unless `mdc-button-icon-color` is also used.\n`mdc-button-disabled-ink-color($color)` | Sets the ink color to the given color for a disabled button, and sets the icon color to the given color unless `mdc-button-icon-color` is also used.\n`mdc-button-density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`mdc-button-height($height)` | Sets custom height for button.\n`mdc-button-shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$mdc-button-density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`mdc-button-horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`mdc-button-outline-color($color)` | Sets the outline color to the given color for an enabled button.\n`mdc-button-disabled-outline-color($color)` | Sets the outline color to the given color for a disabled button.\n`mdc-button-outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `mdc-button-horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.14.1/node@v10.18.0+x64 (linux)","description":"The Material Components for the web 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/density":"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/button_5.0.0-canary.4819cc7e5.0_1578520704238_0.3523229364447249","host":"s3://npm-registry-packages"}},"5.0.0-canary.fe3ffd2c3.0":{"name":"@material/button","version":"5.0.0-canary.fe3ffd2c3.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"9f0cf039c428113ae49e6995ec82f21054b239d7","tarball":"https://registry.npmjs.org/@material/button/-/button-5.0.0-canary.fe3ffd2c3.0.tgz","fileCount":11,"integrity":"sha512-EuQ/u379hHOQ0afuzY4UpWEJkanrlmnEmkApAUNgVcm5rHaFzbML5mfMGq20frJ9xPq41UWjf2fMh05x1/yDiw==","signatures":[{"sig":"MEUCIAw3t7rnbb2IsZmAZJzMKKJTUxVdPiwR07rAP3nuQKgQAiEAlFb104EvSo5u2CEmGrxWRpnW+5vH++9Nul4wHfmVkKM=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":201191,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeFlS2CRA9TVsSAnZWagAAX2sP/j4z2xyIaQjlgiCLc/BK\nFOC1Rrt8sH6UaREmv4Ewh9ik8wSJs+IJZBxI6SM8jhT1zKO4Kbl7ysWVwoqw\nGXOQDadQSjwMjwbTxbyoxYE5sdOtUJwMs2OmvKrBmsKt69X3DeSW7DPCtaHY\n5sQuQ2sQADsrIj0q8Eb1juNXIhcC1n/xHWMIoV7J/S8/A/q4KqXlqU/FYTNU\npwJvp/7vbE/m0as4wB3eP2QYWUpKYHgRGagbgEggGRPLbeQywwQMVWr/WN1r\n68Nnpc2GKx0k9+TOqaX0CJHfvjSWiwAeCq88Kv1bSBzPgbgQ/zpZ98ZGmBxB\nOQ3LjnlcsrrWqM0+nfCqn374uvuqmuVxVi+WgXLgafRnPiYzMijQv/4p9+MA\n++hWg7AN15Uci5ca43JOSuTryBlC73MYbbazxcZsi9I1G/amoi5mh7phQ/kd\nceUt41XNOTpn/H/FCbVwZZMk5zbleWjWDDl16mTclln3Lu95k4GWSora7mEL\neKroTiBbeSC8ieQ6zg3NuZfu3t5/71/x3T6k3sG9EPPaOCUQpRUnK4i4NlMv\nRkKW56P5l9E7EN9j5e/fqLY5etvl6gVSG+zRbVjmX9p2NCGpZCNJlbmvc3px\n/ZgJKVehFC5KKeINMboWS7vS/mw9Fr+b8MxcHg2UDcVslUBlkkMnR8ArkJ5/\nyBPF\r\n=zlFa\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n\n\nButtons allow users to take actions, and make choices, with a single tap.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/button\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n```\n\n> _NOTE_: Examples here use the generic `\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n> _NOTE_: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Additional Information\n\n### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n\n> \\*_NOTE_: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n> buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n> directly within the `mdc-button` element.\n> However, the `mdc-button__label` class may become mandatory for all cases in the future, so it is recommended to\n> always include it to be future-proof.\n\n### Sass Mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass Mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`mdc-button-filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass Mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`mdc-button-container-fill-color($color)` | Sets the container fill color to the given color for an enabled button.\n`mdc-button-disabled-container-fill-color($color)` | Sets the container fill color to the given color for a disabled button.\n`mdc-button-icon-color($color)` | Sets the icon color to the given color for an enabled button.\n`mdc-button-disabled-icon-color($color)` | Sets the icon color to the given color for a disabled button.\n`mdc-button-ink-color($color)` | Sets the ink color to the given color for an enabled button, and sets the icon color to the given color unless `mdc-button-icon-color` is also used.\n`mdc-button-disabled-ink-color($color)` | Sets the ink color to the given color for a disabled button, and sets the icon color to the given color unless `mdc-button-icon-color` is also used.\n`mdc-button-density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`mdc-button-height($height)` | Sets custom height for button.\n`mdc-button-shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$mdc-button-density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`mdc-button-horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`mdc-button-outline-color($color)` | Sets the outline color to the given color for an enabled button.\n`mdc-button-disabled-outline-color($color)` | Sets the outline color to the given color for a disabled button.\n`mdc-button-outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `mdc-button-horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.14.1/node@v10.18.0+x64 (linux)","description":"The Material Components for the web 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/density":"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/button_5.0.0-canary.fe3ffd2c3.0_1578521781655_0.31000232766974656","host":"s3://npm-registry-packages"}},"5.0.0-canary.c0e850090.0":{"name":"@material/button","version":"5.0.0-canary.c0e850090.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"99a68197b823363f79037477a1c462b8479bb6c2","tarball":"https://registry.npmjs.org/@material/button/-/button-5.0.0-canary.c0e850090.0.tgz","fileCount":11,"integrity":"sha512-LBW8J1PHctqxghd45wEBG/PhfOvlSNy13iL9KEnDrUZxGy4tgkfq6Qc1MhXD9tnx9LYhdnHdvih3M/MgkEJsZA==","signatures":[{"sig":"MEUCIHygrOwo39XW5p6M1/yjDpanjRFR6qsDlqGN9b4y9y8FAiEA4wo7t5yOfHhcI1C0X0Bc4VlNmUlVf+g4YPh8/tWME4Q=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":201191,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeFlZYCRA9TVsSAnZWagAA8hQP/Rbpj6Lehs5lYJsP4ZQA\nDBzrGKtwp0QwNS7NVVTfTzD7SMLXWjhzywYx/Dry46Fgd4HlSmC6DpVk6+To\nxbdhOwpAPX3G+kg8Ia9/l761DtpwZJa72JgF4AKn8zKEZi5oBvLP8JbIH7ql\ngY5GHvRJ/8PVckTbHoy0A83NgjC4anGLQDrn7LtjJDL8+2DGOE1ecUFh2wqz\nR5rRRUbGFiVcL4uBefEUkp1/g4OnEhIWCiupqHwujCd7UzXkTGb3sBr8cxVW\nM4JNIwpXWEzKnbs031149niRr5cJL+11zkV2gYjWjc81BaCl3tCH2QSkhoSF\n11H2RdTNoX0xOpkpHwuPlpa6OdiwSbe95Ck7TlZp7iWYk6sCwufpLEoEgr1c\n4rJ7u9xHXGxmIJzympKq7C9VbRs95PIgP4KmGReNvUQctpq0Jrbjz1Cy+IPn\nj1E6YlkQnEuXAQ2Q9LQYiUfJtGLyofNp0nzbqLACxdY/u/d9mVJTwE1SXerI\n16s4OLAvMXMuD+SZS7oopr+Y0jBl6ij5MHwBktPgkl2d1kfc23WhHWtYKq+Y\nTA7QG3lLDDgPmOgUF+dUWYjDHyqOLIlXFsK28bHJ4EiQwqTN+dkninQZy4Hm\noWyP9MxZowF21ZHOig6IaWO6mDF85kEjj/qNgkaQCd6+OaOMN+PfJddja3ba\n2LAr\r\n=mQok\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n\n\nButtons allow users to take actions, and make choices, with a single tap.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/button\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n```\n\n> _NOTE_: Examples here use the generic `\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n> _NOTE_: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Additional Information\n\n### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n\n> \\*_NOTE_: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n> buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n> directly within the `mdc-button` element.\n> However, the `mdc-button__label` class may become mandatory for all cases in the future, so it is recommended to\n> always include it to be future-proof.\n\n### Sass Mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass Mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`mdc-button-filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass Mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`mdc-button-container-fill-color($color)` | Sets the container fill color to the given color for an enabled button.\n`mdc-button-disabled-container-fill-color($color)` | Sets the container fill color to the given color for a disabled button.\n`mdc-button-icon-color($color)` | Sets the icon color to the given color for an enabled button.\n`mdc-button-disabled-icon-color($color)` | Sets the icon color to the given color for a disabled button.\n`mdc-button-ink-color($color)` | Sets the ink color to the given color for an enabled button, and sets the icon color to the given color unless `mdc-button-icon-color` is also used.\n`mdc-button-disabled-ink-color($color)` | Sets the ink color to the given color for a disabled button, and sets the icon color to the given color unless `mdc-button-icon-color` is also used.\n`mdc-button-density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`mdc-button-height($height)` | Sets custom height for button.\n`mdc-button-shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$mdc-button-density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`mdc-button-horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`mdc-button-outline-color($color)` | Sets the outline color to the given color for an enabled button.\n`mdc-button-disabled-outline-color($color)` | Sets the outline color to the given color for a disabled button.\n`mdc-button-outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `mdc-button-horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.14.1/node@v10.18.0+x64 (linux)","description":"The Material Components for the web 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/density":"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/button_5.0.0-canary.c0e850090.0_1578522199973_0.7311598690358929","host":"s3://npm-registry-packages"}},"5.0.0-canary.615f86f38.0":{"name":"@material/button","version":"5.0.0-canary.615f86f38.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"f8283d0d8007add6aff5756c456372f22c219a38","tarball":"https://registry.npmjs.org/@material/button/-/button-5.0.0-canary.615f86f38.0.tgz","fileCount":11,"integrity":"sha512-vUuNizQko9IcDbOHMT0VmD3+S+K98P8N8SHePBg5C2K+432ez02m7SNZ2Sez4fTRpC2D0ySpB4AF+i561tGREQ==","signatures":[{"sig":"MEUCIBZ+FU3IC62/3aP/rJ8k2ISMGcF80Ex0Ayxhu/XlZdxKAiEAwnfjJJHMNkIqDaaa6MPf3E1jWfeRUCNvo+7BOiW/wmE=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":201191,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeFlpbCRA9TVsSAnZWagAASg0QAJeBuLj7S7wcXHKgTs7b\nIbo/wMZ0IglmxVELJOdRLHmdX02Ym+Wer5T/39KkoeUk41p3OD1XyGDV5UDd\na7RZ2yJXhTkdBG2tNbFxbWL909k7MafiV/ZdlpdwapBqOQmxPGgZvPPVF0u3\nIaJn+F8Fd/7m1u2KOj+FcF0p0Ac42UJUf9IVWgXtWaMIX1EqqqMpJB4C4TVl\neDL/GZ8FEGJKY1tcUuRrNYmiPATel3jTtIL7YHtuXr2jufuF8qWPRX/u2iH5\nsoTLLFTlLczwn8FhlRNKGhQTWNyMqyl56J2PuDK+GhR1Dfj9ChUhP8oEGEj8\n/OxhkzM3s+J0RNIJZhYyU4442oRft0LZzrBwLAfVk0+4i8Wsr7yCY8LbnE5h\n3FgOrts+8DTytRstSbpVx+c6xFWcjYea8AeTwSwkmeCw1aSy3/9RmEm4wflX\nsUpwKglzJ+RTOvWhrtMvA95a+aIUsvHLX9d0LEUEDksrRJaBWTQCbHv0Z6nm\n3r5pHU+5n4xNtGxXqZdF77NFrar03vWmhMwE70wRUUzx6a+0+9p4iJPm+vs2\nn8OO9mk0K5BqW1oR3Gc0x4PocUiVd94czIh49gvlF9VaK6TSdkGxOxX1rasP\nO3lanvbAsM/yFKLhcmUYIFn8UENSbW2TSWVhCA1gbkK/3BxRxIZTh/ZQ3Vk8\nEmbn\r\n=eCiE\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n\n\nButtons allow users to take actions, and make choices, with a single tap.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/button\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n```\n\n> _NOTE_: Examples here use the generic `\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n> _NOTE_: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Additional Information\n\n### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n\n> \\*_NOTE_: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n> buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n> directly within the `mdc-button` element.\n> However, the `mdc-button__label` class may become mandatory for all cases in the future, so it is recommended to\n> always include it to be future-proof.\n\n### Sass Mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass Mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`mdc-button-filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass Mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`mdc-button-container-fill-color($color)` | Sets the container fill color to the given color for an enabled button.\n`mdc-button-disabled-container-fill-color($color)` | Sets the container fill color to the given color for a disabled button.\n`mdc-button-icon-color($color)` | Sets the icon color to the given color for an enabled button.\n`mdc-button-disabled-icon-color($color)` | Sets the icon color to the given color for a disabled button.\n`mdc-button-ink-color($color)` | Sets the ink color to the given color for an enabled button, and sets the icon color to the given color unless `mdc-button-icon-color` is also used.\n`mdc-button-disabled-ink-color($color)` | Sets the ink color to the given color for a disabled button, and sets the icon color to the given color unless `mdc-button-icon-color` is also used.\n`mdc-button-density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`mdc-button-height($height)` | Sets custom height for button.\n`mdc-button-shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$mdc-button-density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`mdc-button-horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`mdc-button-outline-color($color)` | Sets the outline color to the given color for an enabled button.\n`mdc-button-disabled-outline-color($color)` | Sets the outline color to the given color for a disabled button.\n`mdc-button-outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `mdc-button-horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.14.1/node@v10.18.0+x64 (linux)","description":"The Material Components for the web 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/density":"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/button_5.0.0-canary.615f86f38.0_1578523226670_0.2690808129863056","host":"s3://npm-registry-packages"}},"5.0.0-canary.1eb032637.0":{"name":"@material/button","version":"5.0.0-canary.1eb032637.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"68b18fa7b260cba8ab35a786acf05651564242e0","tarball":"https://registry.npmjs.org/@material/button/-/button-5.0.0-canary.1eb032637.0.tgz","fileCount":11,"integrity":"sha512-Gr4aT4Ldms8Jo9E+/u/usF8/yE/7lOW9mTOB9IwLe2KZvPR9ph9grpOQmZb6VFBx2/Z4odDW6fNvnOv6WC/dWw==","signatures":[{"sig":"MEUCIQCB7bUqCIhsiTLDjHziGQDMsg5CwidFyUv0q8XNvcAvGgIgYil/0Sxd+1uRnP4DCDaxoECfPXe3wEd8EwulD31jBvg=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":201191,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeFl72CRA9TVsSAnZWagAAd+QP+gKitJkom3u+pyxQnteu\nc92LvX1GjE2LdxxsP85n5fLXVllB8PTAEz9AjjFx+jAVlJ2m/pFV89r7h5zT\nHnIBYNpOL37OfaOUoj2MixRQTlCrbDF/wWnxiDdIRz7WpJLHpC/2aSgQ+TRp\nQ9zI3Q6wqeBBLYunGOyp/mSDr28iUst5MdP+qiM7tOo8h7k+UE0zRGr6CABk\nyMJNYoDJcG6TyDjeljfL1IVvbj3mSw4063QMy94RLMSV+YJucyV8T7zZXchk\nMtTUPEqeJT65BB+csuSx6QadYSWk2+EXd9MlvYqQAlj4MPCHP4lVusy6NnYj\n9d8mX4x0udire5h5HwSVdka6QytBajvYxwkoIngBddGCgafEtINQXDEg/ScW\n9cJHcMekrsxE3J0KqfaQCmvQTnuXWB+kaE7CGQXIUpWiJBNcBumB/6zPukzj\nqupBWKxHwTd4znXAbQqa6z8Nl0Hvit5IlpdKAIj9qq4R5rusMRO5NhUcCFmG\nRz3iBgkQKWYpITKEnf6Ns1nzEyQa6K7IreCTBGPSkmsXlnZZIKb4CKZL1Jwc\nauQsO74OQ65zlTZW+z5jD0hLaQCdTsYw7MtblWLUd0Ca55V0ZNhz+yYLVUk7\n8zDKj8ZHGMeFGBDpRyhIY7phOtrHRX5zQ5/G3ilZwKMM6SPHZ1D3D2EmWvwZ\nZqOD\r\n=QtoR\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n\n\nButtons allow users to take actions, and make choices, with a single tap.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/button\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n```\n\n> _NOTE_: Examples here use the generic `\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n> _NOTE_: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Additional Information\n\n### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n\n> \\*_NOTE_: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n> buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n> directly within the `mdc-button` element.\n> However, the `mdc-button__label` class may become mandatory for all cases in the future, so it is recommended to\n> always include it to be future-proof.\n\n### Sass Mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass Mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`mdc-button-filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass Mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`mdc-button-container-fill-color($color)` | Sets the container fill color to the given color for an enabled button.\n`mdc-button-disabled-container-fill-color($color)` | Sets the container fill color to the given color for a disabled button.\n`mdc-button-icon-color($color)` | Sets the icon color to the given color for an enabled button.\n`mdc-button-disabled-icon-color($color)` | Sets the icon color to the given color for a disabled button.\n`mdc-button-ink-color($color)` | Sets the ink color to the given color for an enabled button, and sets the icon color to the given color unless `mdc-button-icon-color` is also used.\n`mdc-button-disabled-ink-color($color)` | Sets the ink color to the given color for a disabled button, and sets the icon color to the given color unless `mdc-button-icon-color` is also used.\n`mdc-button-density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`mdc-button-height($height)` | Sets custom height for button.\n`mdc-button-shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$mdc-button-density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`mdc-button-horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`mdc-button-outline-color($color)` | Sets the outline color to the given color for an enabled button.\n`mdc-button-disabled-outline-color($color)` | Sets the outline color to the given color for a disabled button.\n`mdc-button-outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `mdc-button-horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.14.1/node@v10.18.0+x64 (linux)","description":"The Material Components for the web 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/density":"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/button_5.0.0-canary.1eb032637.0_1578524406273_0.8096019730406838","host":"s3://npm-registry-packages"}},"5.0.0-canary.5bc5ebfea.0":{"name":"@material/button","version":"5.0.0-canary.5bc5ebfea.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"0bc67f7fac124d6cfd412e8d0b76cce78cdde700","tarball":"https://registry.npmjs.org/@material/button/-/button-5.0.0-canary.5bc5ebfea.0.tgz","fileCount":11,"integrity":"sha512-F9YIwrMH5EVnhoL105uLMzEcWkELynNirr4KzUqP3W9q4bvdfQnB90Vkt3NEmNNKW7H+xWM/PZV/CADhk5g4Hg==","signatures":[{"sig":"MEUCIQCRPe1F5UKjU19BbCrqfMBeyI9TBhOxmePqp1yQUzlHWwIgGfCw58y3uJsMflNYU+bWCU4PMrqUQyoeXLujrVDI2aQ=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":201191,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeFl8rCRA9TVsSAnZWagAAn/UP/242gw7tmswRozaM0EWo\n11TLKSVg1R3q21wW4j9wigWLPthzBJhv4cl0mNRyS77GKzHX7dXwpJLCiQun\nfH39TWmy975ik/gEBboG7QK1ECz4gxeFyK2tYGDrHoXrYCF83r3yA/uTmcIQ\nvoK4PiS3EKWYG47/X+CpIxlvPqoZ+nLU2IWhnK5KrQ39E+6TL7Uwqf/mnZ9w\nZS3PEic4Xk4X857eBzRLzFia46np+oDW2TdujRDUzn4IUIBmyNoVZkP1SQXV\nVy0n1IaJkoerT+Yk5aIGLKWcEzVYxQmadOUlh8YxShCZVTPMv14tAgjAuyDL\nu+YSw66LCmqBNhHfwNPtWBiAJR/c7oCCO7+NQicB5xt/nqy8l40YP8DABG45\ng82TnNS3RfVnu2Vgz3fs3QaD8Wl+a7AWWKe4Gcuq8MBRjcOLCWG6mA9S2YTK\n/b0tM7NN4AFmzX6DU56PaLzWQntQ04/n+J1yDWeFJQSbAb9WCx89IkGSRwMw\nuSiNph38pK3JOoqtA2dzkR7RlzFP6kAwviW5Rqij5BVOYZUHG+qSg3TLXF3m\nwmjQ9unotCOM8dGPy/nxlzC9cV5cd3bKIbh/EFsxoiMZ0r3oQmZGfDiaRZKb\nUQZ72X0ADrLIY3K/2POEn2v03JWJSs6UhY00eyqD2MhIWXEIV2vaJmqVb1ee\n+KXF\r\n=7SAb\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n\n\nButtons allow users to take actions, and make choices, with a single tap.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/button\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n```\n\n> _NOTE_: Examples here use the generic `\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n> _NOTE_: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Additional Information\n\n### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n\n> \\*_NOTE_: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n> buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n> directly within the `mdc-button` element.\n> However, the `mdc-button__label` class may become mandatory for all cases in the future, so it is recommended to\n> always include it to be future-proof.\n\n### Sass Mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass Mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`mdc-button-filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass Mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`mdc-button-container-fill-color($color)` | Sets the container fill color to the given color for an enabled button.\n`mdc-button-disabled-container-fill-color($color)` | Sets the container fill color to the given color for a disabled button.\n`mdc-button-icon-color($color)` | Sets the icon color to the given color for an enabled button.\n`mdc-button-disabled-icon-color($color)` | Sets the icon color to the given color for a disabled button.\n`mdc-button-ink-color($color)` | Sets the ink color to the given color for an enabled button, and sets the icon color to the given color unless `mdc-button-icon-color` is also used.\n`mdc-button-disabled-ink-color($color)` | Sets the ink color to the given color for a disabled button, and sets the icon color to the given color unless `mdc-button-icon-color` is also used.\n`mdc-button-density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`mdc-button-height($height)` | Sets custom height for button.\n`mdc-button-shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$mdc-button-density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`mdc-button-horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`mdc-button-outline-color($color)` | Sets the outline color to the given color for an enabled button.\n`mdc-button-disabled-outline-color($color)` | Sets the outline color to the given color for a disabled button.\n`mdc-button-outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `mdc-button-horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.14.1/node@v10.18.0+x64 (linux)","description":"The Material Components for the web 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/density":"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/button_5.0.0-canary.5bc5ebfea.0_1578524459277_0.7443380844643264","host":"s3://npm-registry-packages"}},"5.0.0-canary.1112b8def.0":{"name":"@material/button","version":"5.0.0-canary.1112b8def.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"6f6082ad4d22a026aea054dfd8588e47d51cbd1c","tarball":"https://registry.npmjs.org/@material/button/-/button-5.0.0-canary.1112b8def.0.tgz","fileCount":11,"integrity":"sha512-a+cD8zeZgDWqc3I63WADEVz/RiklCahz7vWswEdx3CDY2u3RHQVhsqcIa8hSEp2eU0OcMKg4CboEXN8e6GGt+Q==","signatures":[{"sig":"MEUCIQC5jNjLciBbMfsuCIF+R1T+2c0VE1XFSKneWFN/byuLdgIga8phA6XUDFLaVNUvF+dks921aTv5D2xo88l2048Ybvg=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":201191,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeF6TPCRA9TVsSAnZWagAA3oAP/RjVd0QdfBhCWJNj9FT2\n2kFKxWlf/VSwWzN7xuYoNBKt8xU67Y4KwCsOZROGDOfJYnmKTgREv7ckJ0WJ\ntlxKhAw4dyP98e79GjqK37cEqrr7kaHqdP7QPRoMwKERmCigXJ87saKRhptB\nDSOjpZ20JZgsF1U98vlOKMOmPHelZDLfVeoQ1uSgFd6WHeVLv6l2NNw0hInY\nUuXji3hj4qp/Dod65psN9+ZtmRUswdOYm0Gj2k5qb/xrREzO0mpwO+cTjtZd\npbsOs3ybOTSrT7KWBJbvpyvln2n7PGw59CO9F3OOezGv1KNhYB+K9zF/RjmD\nD0SXMrwAJ9yniBs9Qz15eVUdU+KBraz9I0RsFrlaJTlP5xCjyjoHWsECW+81\nZF/rjgb37RAqaUNL1CZ6BNfsdMh9PGELFSZonvEv/1A2vPMPcvMQTj6D7bsl\nNI+J0pPAE9ozLKk9OpfR45pyoDSvOfUfwEHoyPBH7w5vr2AAY8LP9hJfASWl\njJdkLIpdUKClwc7e1o/CZvW3w3z1HxxhhBO/CULR4o4BpCBkwXqC7M/M/m6/\n9vrJBqAma3yC7a4FvJ4cwnbWKHGobuMDwvnDYydDKgrZ1UKFIR6A682VzLFr\nL6P2an/mD0TWga7Ce0lzoQFlT1WONRxR1AqJBMw07NVEKlx4mFLkV3vonJ7T\nf6Po\r\n=694B\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n\n\nButtons allow users to take actions, and make choices, with a single tap.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/button\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n```\n\n> _NOTE_: Examples here use the generic `\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n> _NOTE_: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Additional Information\n\n### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n\n> \\*_NOTE_: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n> buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n> directly within the `mdc-button` element.\n> However, the `mdc-button__label` class may become mandatory for all cases in the future, so it is recommended to\n> always include it to be future-proof.\n\n### Sass Mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass Mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`mdc-button-filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass Mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`mdc-button-container-fill-color($color)` | Sets the container fill color to the given color for an enabled button.\n`mdc-button-disabled-container-fill-color($color)` | Sets the container fill color to the given color for a disabled button.\n`mdc-button-icon-color($color)` | Sets the icon color to the given color for an enabled button.\n`mdc-button-disabled-icon-color($color)` | Sets the icon color to the given color for a disabled button.\n`mdc-button-ink-color($color)` | Sets the ink color to the given color for an enabled button, and sets the icon color to the given color unless `mdc-button-icon-color` is also used.\n`mdc-button-disabled-ink-color($color)` | Sets the ink color to the given color for a disabled button, and sets the icon color to the given color unless `mdc-button-icon-color` is also used.\n`mdc-button-density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`mdc-button-height($height)` | Sets custom height for button.\n`mdc-button-shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$mdc-button-density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`mdc-button-horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`mdc-button-outline-color($color)` | Sets the outline color to the given color for an enabled button.\n`mdc-button-disabled-outline-color($color)` | Sets the outline color to the given color for a disabled button.\n`mdc-button-outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `mdc-button-horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"The Material Components for the web 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/density":"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/button_5.0.0-canary.1112b8def.0_1578607823200_0.2521425007650826","host":"s3://npm-registry-packages"}},"5.0.0-canary.aab102017.0":{"name":"@material/button","version":"5.0.0-canary.aab102017.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"100407d37f3f4785090270be09f50ebd53d18cdd","tarball":"https://registry.npmjs.org/@material/button/-/button-5.0.0-canary.aab102017.0.tgz","fileCount":11,"integrity":"sha512-sVTUaYLw8epnhXcKr414nwX4VtwH+8Xd/akZuRHjIH/HnsPfgqK/tECGQfSP+Wy/f6IpaqnWQHzgvVhsN55mAA==","signatures":[{"sig":"MEQCIELTvTQyYA0FX+b1oIIu23nfGllx9nrzBfsDlfmFdXNzAiAQPYE4FTs9Q/oszeUpUwInTk6MML2EzRwEocZERI8E2g==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":201191,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeF8FsCRA9TVsSAnZWagAAtP4P/jnJuoDM+94x2KAM/aME\ns5mPd+NPLOnPbrEVB5XLGCqdSB2NwMyLNSw0kh8riSXLc5Bq7d5+NbdFOBhx\nfehpbLFLKRpW2QZPO/Syw9e5A4/5ihW19m8yD06JoNWw/LXlkOqFeG1JAvRe\nxsyj8dxrykzno5aV2C2AiUYSRt99w8e2zKyLMOYaYaIw3gcsWqJ6Qg4QDWdh\n6hwgrN+dceGDGseBziSQHVpvMvCI5Y++lh5YHGt1ZwyQ/UOsd43gOEdYmyFj\nDzgMxS/4AQaPkEwmT+hXZ8guffiM94LSIa9xX48xaSxlJrYDMo6G2WUfg9lt\nu6jhD0Ht4VhNrAUj52E2uJvvgT3/0peSJnXlpSNqgvdPCdEF3LGfzFVCteLw\na3YHuV0HzF4/YsMmwMddQHz+nL7GQx/616TS0CWkkpP4sWDnNiwqOIJHCauK\nCEpjepRVHOH5BIv64aT8Zh104HfU8JQeeQTy8vvTJWE0UfQvpmo/MlBa2aMV\ns3DCzuDnjAeuVm1+ugjSme3uuNmB0GOJx9OX24mJVYdoujwm6vlz38pRuwcY\nvihT1NyXPwTPq+B5m+NLKwI8kqdI89ZbzQYHatG9WHAIAJ8nsT8BVhGxDm5r\nWeGBQk8OOg0ah9zPDYtD2oYbMnz5pCHn0MVbuWdIVT4vBaP4BAOOm1JapXfo\nzYMu\r\n=88Zu\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n\n\nButtons allow users to take actions, and make choices, with a single tap.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/button\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n```\n\n> _NOTE_: Examples here use the generic `\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n> _NOTE_: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Additional Information\n\n### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n\n> \\*_NOTE_: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n> buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n> directly within the `mdc-button` element.\n> However, the `mdc-button__label` class may become mandatory for all cases in the future, so it is recommended to\n> always include it to be future-proof.\n\n### Sass Mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass Mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`mdc-button-filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass Mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`mdc-button-container-fill-color($color)` | Sets the container fill color to the given color for an enabled button.\n`mdc-button-disabled-container-fill-color($color)` | Sets the container fill color to the given color for a disabled button.\n`mdc-button-icon-color($color)` | Sets the icon color to the given color for an enabled button.\n`mdc-button-disabled-icon-color($color)` | Sets the icon color to the given color for a disabled button.\n`mdc-button-ink-color($color)` | Sets the ink color to the given color for an enabled button, and sets the icon color to the given color unless `mdc-button-icon-color` is also used.\n`mdc-button-disabled-ink-color($color)` | Sets the ink color to the given color for a disabled button, and sets the icon color to the given color unless `mdc-button-icon-color` is also used.\n`mdc-button-density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`mdc-button-height($height)` | Sets custom height for button.\n`mdc-button-shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$mdc-button-density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`mdc-button-horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`mdc-button-outline-color($color)` | Sets the outline color to the given color for an enabled button.\n`mdc-button-disabled-outline-color($color)` | Sets the outline color to the given color for a disabled button.\n`mdc-button-outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `mdc-button-horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"The Material Components for the web 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/density":"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/button_5.0.0-canary.aab102017.0_1578615148043_0.6742387865441832","host":"s3://npm-registry-packages"}},"5.0.0-canary.426913342.0":{"name":"@material/button","version":"5.0.0-canary.426913342.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"bc7fd04195134b25ade0f7db99a687268056b189","tarball":"https://registry.npmjs.org/@material/button/-/button-5.0.0-canary.426913342.0.tgz","fileCount":11,"integrity":"sha512-8FlaFeVW38DWzUBj63d73R7qYxiIUM+YnOA4KnfesRNAdwNRdJrqpukurXsofudrvzKp5Moy4QIcN0ETND71jA==","signatures":[{"sig":"MEYCIQDWMLYy8CKoZU6NIcDu2czif6PxPwNLmhh0c630Yr1rmwIhAJvu5IR1+7B83tSG5K1j0znnnmkYY+V9M1/6tH425M3X","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":201191,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeF9cBCRA9TVsSAnZWagAAyJoQAKBH5OZ6aeqA0Da9NkIY\nEn1+NmC5gbrRezCCTgM8iXpKT7SHwuMyP/WENlhxLA4VZDs+Ct3EOhwnKaX/\nJs7wUrW4v7wGI+1cPjO6V52agmBfRzfSRPV11wK8YZ6Nh6WEB6JGIjHlYtOy\nNNwrWuFG4irpKSOQmf2eIYfSo66mIFJXwqFnr+m5G0UHYmYut5EeB3VyPF2h\nEYIfiKgN1m0NniQoHn6VJe3vKmq2Jd1xNpmN5pst/BnP4EUtyU8mIVz0kQtV\nu7QKKCdqbpfbZEMZXT8lSGwWwFgaL3lQ5RLrvSu4msueHMjzzAPKctpPfu1k\nzEd8u8B8MVFYmKhy6iefFPz+5+dpemjXF83Re3h9PdXgZbYkMfJxatrOD14B\njhUprVKzeOjWB+6CCsuN80OsgjA+3f4kwRCzYkXcY7D8+/bjd8DXRIVvmKYQ\n8XujyBpLNb/IyS1029r6ete3lL39qD3nae9BRfwY4khaNBIVy0WSs1Q1wKFc\ng20bsl5qFqOnx2pZeRktsNjnY1pirlYGFHfcsb8n366fQOefNjygqRhKSLus\nMp8KEoiz1BrNjvswLkObmyat9x+Gm64Exm8IQilT2NZBvbHu70jo0I/aEJRe\nbrgiEwHSfISVlB8H0Qh7vimsM4w47+rEOBZ4ERuNuX8TfmPSMeCQlIhwPskl\nDni3\r\n=oSfy\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n\n\nButtons allow users to take actions, and make choices, with a single tap.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/button\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n```\n\n> _NOTE_: Examples here use the generic `\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n> _NOTE_: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Additional Information\n\n### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n\n> \\*_NOTE_: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n> buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n> directly within the `mdc-button` element.\n> However, the `mdc-button__label` class may become mandatory for all cases in the future, so it is recommended to\n> always include it to be future-proof.\n\n### Sass Mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass Mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`mdc-button-filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass Mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`mdc-button-container-fill-color($color)` | Sets the container fill color to the given color for an enabled button.\n`mdc-button-disabled-container-fill-color($color)` | Sets the container fill color to the given color for a disabled button.\n`mdc-button-icon-color($color)` | Sets the icon color to the given color for an enabled button.\n`mdc-button-disabled-icon-color($color)` | Sets the icon color to the given color for a disabled button.\n`mdc-button-ink-color($color)` | Sets the ink color to the given color for an enabled button, and sets the icon color to the given color unless `mdc-button-icon-color` is also used.\n`mdc-button-disabled-ink-color($color)` | Sets the ink color to the given color for a disabled button, and sets the icon color to the given color unless `mdc-button-icon-color` is also used.\n`mdc-button-density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`mdc-button-height($height)` | Sets custom height for button.\n`mdc-button-shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$mdc-button-density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`mdc-button-horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`mdc-button-outline-color($color)` | Sets the outline color to the given color for an enabled button.\n`mdc-button-disabled-outline-color($color)` | Sets the outline color to the given color for a disabled button.\n`mdc-button-outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `mdc-button-horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"The Material Components for the web 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/density":"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/button_5.0.0-canary.426913342.0_1578620673431_0.4216164242547611","host":"s3://npm-registry-packages"}},"5.0.0-canary.d4ea9a706.0":{"name":"@material/button","version":"5.0.0-canary.d4ea9a706.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"c884bda24f38de719da7508f3909ef6c2feb7fb9","tarball":"https://registry.npmjs.org/@material/button/-/button-5.0.0-canary.d4ea9a706.0.tgz","fileCount":11,"integrity":"sha512-CfX+ZTYQ8B0KvUGwagHIK88S20XMrywGBTeuFBhDi/zhw7dls4If/wn6wAIYQ42Eha5L9W53Eo73+K10QDY0qA==","signatures":[{"sig":"MEUCIEYIXLjNGLw97BiENutNgkoQDuL0Hmm9O2Or7JOZc+8yAiEA0vc2WYCyamLxOJxDEKJR24/zem0Xdf/zeyugE0drALw=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":201143,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeGLOKCRA9TVsSAnZWagAArB4P/3FsCO+SbMG1nwuZd1/M\nfXAfZVy7OxeJzFThLr/KctBble8blMLF9ArW0D8Yd8OldIEzQ2ZpHdmQdb0y\nq6gC53rhRFdGgabHYBX0eHmnZxzXC3c80MViRSvxqbZgxSkmXFKWHI9ST6Qu\nDvSPYq5psZkO16sKwWGv115igrmGgMUgsrquM99jio1apOdzb+VoxVBr7BEu\n1ulzF3KkdqI0uPQ/axKtlMCyDWuZRjj0nBGmRAQ776N0CZw6TCmV5kRcoPZR\nbr8wV0YJGYzfdWhAheRSS3qQhzz7rKdw8OlrPMFNb78jwvhHRKbi//scUx9E\nPqs0UnwnBBEM4vFXbxMTni/kKWrV54wevf3IopvraouDQjOYL7d1CZlynPdE\nBWCzJG6CvqRTkBE3iJ5myz6qFX2v/0rf3Dr3O3q+hgA/IobGR2QS+kfP9KW7\npZgtrN0HloKXWrqBVcLqwg44KjWxjthdv2OLsIWllL7lmISrOHA+WOtt1VWW\nysllkz3usDbgaHlwKihPFe6lEgGi5KWim/QIKGvLPWuSOx4pZ0nXIb57Q539\nkVlnYgJBoXNRF+ICa8nZzJtAdQtsJ4Mt4Fuy8/N4LojHviSGf5IQdWxvgZ0y\nmUcmx3ZpAnxg5a8QHNbo0bd7ZtuVGZ5W7byY3rMDHyNRWq6ghHSQAcqtzB7V\nRERe\r\n=HNbC\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n\n\nButtons allow users to take actions, and make choices, with a single tap.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/button\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n```\n\n> _NOTE_: Examples here use the generic `\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n> _NOTE_: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Additional Information\n\n### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n\n> \\*_NOTE_: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n> buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n> directly within the `mdc-button` element.\n> However, the `mdc-button__label` class may become mandatory for all cases in the future, so it is recommended to\n> always include it to be future-proof.\n\n### Sass Mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass Mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`mdc-button-filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass Mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`mdc-button-container-fill-color($color)` | Sets the container fill color to the given color for an enabled button.\n`mdc-button-disabled-container-fill-color($color)` | Sets the container fill color to the given color for a disabled button.\n`mdc-button-icon-color($color)` | Sets the icon color to the given color for an enabled button.\n`mdc-button-disabled-icon-color($color)` | Sets the icon color to the given color for a disabled button.\n`mdc-button-ink-color($color)` | Sets the ink color to the given color for an enabled button, and sets the icon color to the given color unless `mdc-button-icon-color` is also used.\n`mdc-button-disabled-ink-color($color)` | Sets the ink color to the given color for a disabled button, and sets the icon color to the given color unless `mdc-button-icon-color` is also used.\n`mdc-button-density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`mdc-button-height($height)` | Sets custom height for button.\n`mdc-button-shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$mdc-button-density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`mdc-button-horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`mdc-button-outline-color($color)` | Sets the outline color to the given color for an enabled button.\n`mdc-button-disabled-outline-color($color)` | Sets the outline color to the given color for a disabled button.\n`mdc-button-outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `mdc-button-horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"The Material Components for the web 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/density":"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/button_5.0.0-canary.d4ea9a706.0_1578677130579_0.8595287088749783","host":"s3://npm-registry-packages"}},"5.0.0-canary.7d4ee2996.0":{"name":"@material/button","version":"5.0.0-canary.7d4ee2996.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"e7bf04a2b3f8e58ab7e27ad6a12fdd4c2653f927","tarball":"https://registry.npmjs.org/@material/button/-/button-5.0.0-canary.7d4ee2996.0.tgz","fileCount":11,"integrity":"sha512-CEOcfrsRy8W/HYSWGp9suO9C9eW3xx9++f7LU8aeWQWMQuL/xRfRuGm5DGj/7xrhvfH6tK/I21i+fs7Le/FEPA==","signatures":[{"sig":"MEYCIQDGdHQJ+mGRHA9sfuD1hsTrtloOHVlSuELc+eH6gt1fhQIhANUHL2PmMDXFTAgPWFv80wuY3WfHUoHXa6D2aMDOS14M","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":201143,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeGLrvCRA9TVsSAnZWagAAG0gP/RLrUZmDJ3ImhWGMLN4C\nEFQraQipICcLQ/gJK49U6gdXTnlJXI2Nc/bHzFiQiapHhfDlV09JBRabV65v\nihk+cG7ka75g6AkRNIGFOitKDEzYP1bYlx+tPqeM770wcUbEsH3luCF6/mT0\ngyauF7zjzEYOvkRjMousl6Qkr9XER2SKOgeWSUiewke9fUMBYG+/n51RYkmy\nGADwMhQd9/eRQ3qH4tB8wOoiFGPmefvbEj5cfZ/XQhmwfxfneS9kgusntyzU\npPmqJO+2l6yF56gl4XX34R0C44trt/J3e/HQAF9qiV0n5Vztggn5MqhD1Zdk\nQePqenFtvFK0MyRrEpbPhhVSnJNyugN5KNDL6K8Bp1pIhsxXJKIY5KwwoAd1\n3brBP2/zPKnB1wagxxBwF7blSD219gS79a3zAKXOEZhKp0BFAOpynaqkBb4U\nyEkdz37/xQcl0HaNM05Ie2BBya62eVxoXCL2Q128VOsAs6FDJR6lUfTnuC8Y\ngRKvpsgkdc6NoqU8K/qLS/LnNrvBHgxTjAOxQnpJgJ3rPKc8UNkzByLSEZlK\njsIVwyxclaH5Jiy1RX+vqqdO9O/CtuADPbDh0Sq2WvWEU+Qe8AUuhbUDctO6\nE8+X4wwzf43AK1FgzZqD9loHcRhSgHAUTvNioWJ3e8e2VqD4RuZQ57Jzrwfv\nDunQ\r\n=3m/8\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n\n\nButtons allow users to take actions, and make choices, with a single tap.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/button\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n```\n\n> _NOTE_: Examples here use the generic `\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n> _NOTE_: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Additional Information\n\n### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n\n> \\*_NOTE_: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n> buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n> directly within the `mdc-button` element.\n> However, the `mdc-button__label` class may become mandatory for all cases in the future, so it is recommended to\n> always include it to be future-proof.\n\n### Sass Mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass Mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`mdc-button-filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass Mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`mdc-button-container-fill-color($color)` | Sets the container fill color to the given color for an enabled button.\n`mdc-button-disabled-container-fill-color($color)` | Sets the container fill color to the given color for a disabled button.\n`mdc-button-icon-color($color)` | Sets the icon color to the given color for an enabled button.\n`mdc-button-disabled-icon-color($color)` | Sets the icon color to the given color for a disabled button.\n`mdc-button-ink-color($color)` | Sets the ink color to the given color for an enabled button, and sets the icon color to the given color unless `mdc-button-icon-color` is also used.\n`mdc-button-disabled-ink-color($color)` | Sets the ink color to the given color for a disabled button, and sets the icon color to the given color unless `mdc-button-icon-color` is also used.\n`mdc-button-density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`mdc-button-height($height)` | Sets custom height for button.\n`mdc-button-shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$mdc-button-density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`mdc-button-horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`mdc-button-outline-color($color)` | Sets the outline color to the given color for an enabled button.\n`mdc-button-disabled-outline-color($color)` | Sets the outline color to the given color for a disabled button.\n`mdc-button-outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `mdc-button-horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"The Material Components for the web 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/density":"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/button_5.0.0-canary.7d4ee2996.0_1578679023340_0.3790964494248432","host":"s3://npm-registry-packages"}},"5.0.0-canary.981ec9b6f.0":{"name":"@material/button","version":"5.0.0-canary.981ec9b6f.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"3d28025beeb34b299e8495b6719e3f803861c1f0","tarball":"https://registry.npmjs.org/@material/button/-/button-5.0.0-canary.981ec9b6f.0.tgz","fileCount":11,"integrity":"sha512-rEnUMf179qqoeC98qVZknkAg2+TJxEgodND1rDmefi6y5Z46DX9bJXtnGz3GTVDcoFPKaA9sji+f/cUw57uudw==","signatures":[{"sig":"MEYCIQDfjPsbP9ktrL1SJtKiFDpvMQ+nxrf+81L6DS6IkjvyZAIhAPdDACIVrKs6pSdG/sFgHiz5SNR0ChZ6qrRW8WYDDwXV","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":201143,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeGNACCRA9TVsSAnZWagAAWz0P+wUDt7nwdeFhrRQKnmnf\nmT8AuHHamx+ONFA1XnLh+rWJYJCUb9jsMNvS04TxEUeY+n9IHYp7WVM+uK25\nhebME2o3gPMr22LyIh525Lb7n6Gx4coJCYxvROCJq+knXfy51+4gK83/Ekwf\np9awXDr3lPrjGif32rUn9/cTYPcql54vJg7ThsCaG+MNexz/1YgENECpH+Ei\ng6qA15HfF7ZhjAFcTJasKl4Tr4fnQ/ZVqIHzU5lGmNKnaSjvLOP0iC/Dbc2I\nWC/upBLZyAb960KwtQW0yJ+N6NQm1lquo1F80WsUKnc+wvlQgIEPuG5d+HZb\npihRMHiGNYKaZtQoLX4RKL20gz/oxVUlS/go8z7XIA8LHpiEQXr2sZGj3mAl\nllAjGcokYHGCWRmYD6osxDwuuMLGnNr+PmxqM02dtEpYyQsd1yOVhpMYeDk7\nNt+p8Pz98fDyNpjlQM0Jt4r7S8Kezmm4WFMyqw7lhXeS2aks4TJPjkJIe3EL\nLHIu1N+6GEiI8tZCLtrgz0DpY2WwwJn+hc8pxu1SIUoR7WIFFyY56uTH0EVY\n1JJ7Z5nGrYlWNJh9H/JKYApUXkjjlbj5jB8e3jFqegSvZeIYN8/pRw+Naj+A\ncSKSEtbwj3VOJQjAxXrAtDpfWy3tZ3nI0mjmHcgQUr3KQ4KDOjt017h9oaJ1\nlmjJ\r\n=PCpp\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n\n\nButtons allow users to take actions, and make choices, with a single tap.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/button\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n```\n\n> _NOTE_: Examples here use the generic `\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n> _NOTE_: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Additional Information\n\n### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n\n> \\*_NOTE_: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n> buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n> directly within the `mdc-button` element.\n> However, the `mdc-button__label` class may become mandatory for all cases in the future, so it is recommended to\n> always include it to be future-proof.\n\n### Sass Mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass Mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`mdc-button-filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass Mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`mdc-button-container-fill-color($color)` | Sets the container fill color to the given color for an enabled button.\n`mdc-button-disabled-container-fill-color($color)` | Sets the container fill color to the given color for a disabled button.\n`mdc-button-icon-color($color)` | Sets the icon color to the given color for an enabled button.\n`mdc-button-disabled-icon-color($color)` | Sets the icon color to the given color for a disabled button.\n`mdc-button-ink-color($color)` | Sets the ink color to the given color for an enabled button, and sets the icon color to the given color unless `mdc-button-icon-color` is also used.\n`mdc-button-disabled-ink-color($color)` | Sets the ink color to the given color for a disabled button, and sets the icon color to the given color unless `mdc-button-icon-color` is also used.\n`mdc-button-density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`mdc-button-height($height)` | Sets custom height for button.\n`mdc-button-shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$mdc-button-density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`mdc-button-horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`mdc-button-outline-color($color)` | Sets the outline color to the given color for an enabled button.\n`mdc-button-disabled-outline-color($color)` | Sets the outline color to the given color for a disabled button.\n`mdc-button-outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `mdc-button-horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"The Material Components for the web 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/density":"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/button_5.0.0-canary.981ec9b6f.0_1578684418040_0.9654641234241792","host":"s3://npm-registry-packages"}},"5.0.0-canary.737da83fc.0":{"name":"@material/button","version":"5.0.0-canary.737da83fc.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"cf893e576abf921038c13e51d93bd0234bd5842c","tarball":"https://registry.npmjs.org/@material/button/-/button-5.0.0-canary.737da83fc.0.tgz","fileCount":11,"integrity":"sha512-qFLgzyOzpVZH3wXt+evDTm4wi8F51Szm9aGhhcfOsuL9S17R5TVmdVrWf9xu6zWF5o695tnuDdluk2vxJbqyjg==","signatures":[{"sig":"MEYCIQDKAK9Z3Wa9UInS3AvbbnrX0u/r+KlrJvqcFWmaIyxJywIhAIl1esYj4sc+pZHnxulPPv9usvQzRqj653/CbsffoJiY","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":201143,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeGOpCCRA9TVsSAnZWagAAw+UP/3Boh9XuVkOHtAQGWs2R\nfNlFmavj1ainEQBGY/ZwLmop01A4OtxMnnzDdHuP4C81MMSi89SI4+TQiEcU\nQkZ/jdZMl43S/mOPYFUlygMtOGH6JpAyXjwLgxVHb9tA5itBNYEsiwUUNht1\nXV2mjG2iHRWRi+hx89HYGGeooFtSEW4D3ILzBWwe6xdKk+SJ8zazHvu+Rx9J\nNjOeiNOFufrbNndlW6Zraqu1mHYR7zURrzLGoY0MKLerW7lL7Qmlou/GYSzA\n3MvYuIrldqxpY+7VaNRFzo6X8er6g0IbrWJi88dIwpHQKqr2wlHNs5fGZJU+\nAE2VsLnYdsh4FffTaJH2fL+HmDnsBd0GeGoIhQcto1oaXtp7QYNZ/Aiwd+zj\nLfmIvHFoBiIcN1PYmT/PfjMG0kK7FeeIedMRuCqotwHL9hqPe7QhCu0n36N9\nRqe6+4vuHiWg90A7HMWhTtsHnmS+9OgzPQlQbOTgNXG0h/SEeU2xTWBemxST\n0X0tTRcRb3R/dNrcf2So05F0o6DY7sEdaJZNf45hcygPiez7co6HJ15CCCUN\n6NELJaqliSqkBT/EG+yZRsrLGIjpucTT5SOXQGTN8bTmtbn8xyycZD3I7Jw6\npTQz6VCEM5e9t6UB44cQXDPzZF5N9TH6w0mV/WEdir+zgCVcXhldZy/M5gIq\nY8v0\r\n=mQEZ\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n\n\nButtons allow users to take actions, and make choices, with a single tap.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/button\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n```\n\n> _NOTE_: Examples here use the generic `\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n> _NOTE_: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Additional Information\n\n### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n\n> \\*_NOTE_: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n> buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n> directly within the `mdc-button` element.\n> However, the `mdc-button__label` class may become mandatory for all cases in the future, so it is recommended to\n> always include it to be future-proof.\n\n### Sass Mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass Mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`mdc-button-filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass Mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`mdc-button-container-fill-color($color)` | Sets the container fill color to the given color for an enabled button.\n`mdc-button-disabled-container-fill-color($color)` | Sets the container fill color to the given color for a disabled button.\n`mdc-button-icon-color($color)` | Sets the icon color to the given color for an enabled button.\n`mdc-button-disabled-icon-color($color)` | Sets the icon color to the given color for a disabled button.\n`mdc-button-ink-color($color)` | Sets the ink color to the given color for an enabled button, and sets the icon color to the given color unless `mdc-button-icon-color` is also used.\n`mdc-button-disabled-ink-color($color)` | Sets the ink color to the given color for a disabled button, and sets the icon color to the given color unless `mdc-button-icon-color` is also used.\n`mdc-button-density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`mdc-button-height($height)` | Sets custom height for button.\n`mdc-button-shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$mdc-button-density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`mdc-button-horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`mdc-button-outline-color($color)` | Sets the outline color to the given color for an enabled button.\n`mdc-button-disabled-outline-color($color)` | Sets the outline color to the given color for a disabled button.\n`mdc-button-outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `mdc-button-horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"The Material Components for the web 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/density":"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/button_5.0.0-canary.737da83fc.0_1578691138361_0.5969373117957222","host":"s3://npm-registry-packages"}},"5.0.0-canary.aca8e6c18.0":{"name":"@material/button","version":"5.0.0-canary.aca8e6c18.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"c3f93d2a1680c7c1945b127a6fcec2af68202d5e","tarball":"https://registry.npmjs.org/@material/button/-/button-5.0.0-canary.aca8e6c18.0.tgz","fileCount":11,"integrity":"sha512-5KCWk5yHPii6+V+sbIPvM77Cei6szFkYGBz7xqsPY15l0Dd/bOIjR5cz4jFfhcpVSafQtaijRWyCLaoXPlJwLQ==","signatures":[{"sig":"MEYCIQDEfyFMLdQjGgve9qlWLQBuc9tAmdmrX5osMDpnp8KXsAIhAK1Upi1usy1FNU/cyRkue9crcx9Z/ZNzRI5jR9vTDCN2","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":201143,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeHMXGCRA9TVsSAnZWagAAzJcQAJjXUjLV6bzR/rjwqXTS\niJU7nac9F1FdRVBODM1lHEl7QaUjmHdYJoizlRCE1nL//gcStRxPlGvluUH3\nVMNlwMVzbEZZa/dfD39nlo9PTNdy7ame4I4/S38qg5hv0yM1GEMWJr8NCIqW\nFwJT/7l50/I0xEzrcvQUjlXZ+Si0+QEvSytKgIdffM8R0S3w/Wmkbxt/eER/\n341fOzUMjZTGkDvyKwi+BzMwQ5HCQtGWzFvtUd9Y/GQLrpndPh+NaHdXGVAa\nr+74AUukJSaxVUzCRJ3N1+H3CG6dMSEB0NqaQxBhk2SuFNpYp+dCPwtbvwt9\nnWo749nmErRRIfVNhl2pHNbYFUFQCNOhex2fg0rQvxvK16rAwl4zM+oXZgFA\nhXUKLVMGc1xn1ExtHATwR8c6LF7wljhfSWe/iFsN42p7aJQJu7RKdkoy5lD8\nBSCETbz3AFjoqbpvBgKcyGUk893RBzNTRgYqJJAvrEx2CGV4B8dUs5hq69KX\nSlwncwUTm4nWItPEEgT93AS6sgRLoJwH6WkWL6YTxy6iUyhpbyo4hrnlOLBL\nIIFtBK1BFFssbkZS6KP8aVQGHKv2SnACY8OjyV9I7WLNpARUv4cw10PR+CMT\nY4We4KyVdzw+ZJxVz1PxpvIWcyhZ6GTMy415mxj5MXEiX35Rf9020QPHEUjk\nGWq4\r\n=Kgb9\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n\n\nButtons allow users to take actions, and make choices, with a single tap.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/button\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n```\n\n> _NOTE_: Examples here use the generic `\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n> _NOTE_: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Additional Information\n\n### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n\n> \\*_NOTE_: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n> buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n> directly within the `mdc-button` element.\n> However, the `mdc-button__label` class may become mandatory for all cases in the future, so it is recommended to\n> always include it to be future-proof.\n\n### Sass Mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass Mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`mdc-button-filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass Mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`mdc-button-container-fill-color($color)` | Sets the container fill color to the given color for an enabled button.\n`mdc-button-disabled-container-fill-color($color)` | Sets the container fill color to the given color for a disabled button.\n`mdc-button-icon-color($color)` | Sets the icon color to the given color for an enabled button.\n`mdc-button-disabled-icon-color($color)` | Sets the icon color to the given color for a disabled button.\n`mdc-button-ink-color($color)` | Sets the ink color to the given color for an enabled button, and sets the icon color to the given color unless `mdc-button-icon-color` is also used.\n`mdc-button-disabled-ink-color($color)` | Sets the ink color to the given color for a disabled button, and sets the icon color to the given color unless `mdc-button-icon-color` is also used.\n`mdc-button-density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`mdc-button-height($height)` | Sets custom height for button.\n`mdc-button-shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$mdc-button-density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`mdc-button-horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`mdc-button-outline-color($color)` | Sets the outline color to the given color for an enabled button.\n`mdc-button-disabled-outline-color($color)` | Sets the outline color to the given color for a disabled button.\n`mdc-button-outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `mdc-button-horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"The Material Components for the web 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/density":"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/button_5.0.0-canary.aca8e6c18.0_1578943941999_0.7824470811445339","host":"s3://npm-registry-packages"}},"5.0.0-canary.c38d84e21.0":{"name":"@material/button","version":"5.0.0-canary.c38d84e21.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"d52534b766dc2674c71018e6b069cf69613e9de5","tarball":"https://registry.npmjs.org/@material/button/-/button-5.0.0-canary.c38d84e21.0.tgz","fileCount":11,"integrity":"sha512-qY9qbv3mNyAXz5WYBCS4z2+q3T90zoKOjiDA7AmBmDmd3zxhyx5vamhLVrMaoGjCZHoKnVjfkYCxkx/ajXoJVQ==","signatures":[{"sig":"MEQCIGcZry5KAo//6qtLTMWjxloCBtjHCCj2zHlLsvbfpC76AiA4mBBFTCRKqMeuHr329M0C+t9C3Iiudo33jwkkZH33aA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":201143,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeHOuXCRA9TVsSAnZWagAAQVYP/jJR1dmvJmpoYRIg6D0N\nqlM2sKUo+xU8LnjLMvSp4uT3h3m5RVnrCo+MwTcM0sF5RPw6U8nY8RM7G/0H\n/JXBamEln8XUBWOGTghYnxd2iC5GgyKGaGwBvjtb5PIupygyYPocK4Du9eFp\nLkBtjIVJuQDbFPuDc1MKcHKYNbcRlflHTOmBJc7IzHAkSAA6rfYdmWbdeBSH\n/RzZB2jLwS6R+K/Ka/3gw5E+LC8c5MS9Zd2XvJiEXWfpV89l9cWbmitkNrph\natBSRs6Rj/FZZBaP7OJALssQqk1c2RBs14kIJDg+GKtp/asNGM5c1Sk7JdtJ\nG/StReN66u1ISXaskaHunJdIwpsIj2119oaaXAwbJkh+1NbMb/Zwf60l86I8\n51Fj+QT5PWaGlnr4vLcJREf9DgCDgRe9n93cnUcYGEuXx6v6+R+CFruKv9e9\n/v+NZhb3qmgebmLQG7fWvNdZw/Fn3kL2DMjeXE31RJSprNTK24vDPhs3CNey\nGA3xCGB6++uiiPHeYrnUT4Ll2+UmvnhbJfXAwFgGb2bMjfkwIPY//sFmLEYq\n3xIbqSbl0QZUKVmlX2sQn8nIMeltwhKL53X/3lQ4CYRSqj+O7XDyQZ2q1VeZ\nG6Ey488G8Zl5ULW1rgYguf4X3GFKnhr6man390RWLj3E6TdWI/7JGRUltfrN\no8pg\r\n=64DI\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n\n\nButtons allow users to take actions, and make choices, with a single tap.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/button\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n```\n\n> _NOTE_: Examples here use the generic `\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n> _NOTE_: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Additional Information\n\n### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n\n> \\*_NOTE_: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n> buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n> directly within the `mdc-button` element.\n> However, the `mdc-button__label` class may become mandatory for all cases in the future, so it is recommended to\n> always include it to be future-proof.\n\n### Sass Mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass Mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`mdc-button-filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass Mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`mdc-button-container-fill-color($color)` | Sets the container fill color to the given color for an enabled button.\n`mdc-button-disabled-container-fill-color($color)` | Sets the container fill color to the given color for a disabled button.\n`mdc-button-icon-color($color)` | Sets the icon color to the given color for an enabled button.\n`mdc-button-disabled-icon-color($color)` | Sets the icon color to the given color for a disabled button.\n`mdc-button-ink-color($color)` | Sets the ink color to the given color for an enabled button, and sets the icon color to the given color unless `mdc-button-icon-color` is also used.\n`mdc-button-disabled-ink-color($color)` | Sets the ink color to the given color for a disabled button, and sets the icon color to the given color unless `mdc-button-icon-color` is also used.\n`mdc-button-density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`mdc-button-height($height)` | Sets custom height for button.\n`mdc-button-shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$mdc-button-density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`mdc-button-horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`mdc-button-outline-color($color)` | Sets the outline color to the given color for an enabled button.\n`mdc-button-disabled-outline-color($color)` | Sets the outline color to the given color for a disabled button.\n`mdc-button-outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `mdc-button-horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"The Material Components for the web 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/density":"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/button_5.0.0-canary.c38d84e21.0_1578953622873_0.3171332318328699","host":"s3://npm-registry-packages"}},"5.0.0-canary.a4db5fbad.0":{"name":"@material/button","version":"5.0.0-canary.a4db5fbad.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"22c2c155671a0f37bd747f01b36ff8715736ab79","tarball":"https://registry.npmjs.org/@material/button/-/button-5.0.0-canary.a4db5fbad.0.tgz","fileCount":11,"integrity":"sha512-8ur8OOUTycytB2qyWWT+Y7SKGHXzJTnUumWA5EJVmPoeo4ZFOusLzDp2QaCNI9U5qydxzetGkT55uc/mFHeZog==","signatures":[{"sig":"MEUCIQDFSh4Ip28FOxVB/V52TAXLSPLJSURk4dx6jKhRn14k/wIgGDgjq+OQKyOprBj6YFuC3/Q5UGoGy91Er0Emxs+VjhU=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":201143,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeHSRDCRA9TVsSAnZWagAAuboP/A4ZL10l2Fqo2Q3eCB55\nlZ7zAjgdGwtvj5ZhxiFvHfI5ydZgwnyace/+9bh2m4NRv4smXs+nrAxZqGF8\nUKloLFX9vtNkgPT53x55hg7U92gvflqW554SsBTCI6ZLwWa0PoYy1FFBGjDE\nwszsbMKjkZxQDOboa6rPP3PYQRvxH8ZIcLpmHVRv/82jm7Gdnpu8KIWM/8As\nV3Lpp7F9yk2ETDL5owerWQuebFLvv4QpNWpypkpkBgKOK5pmw3EJWdBRpPpq\nUmsHvFmPEw2Hyi+/+OPkHyyzCgCzWA3eHf1dP5l7kVNXJ+qBV4qoy9IROlgy\nYM4Q31OS6ObfgPK1+uU2C3Ha7QVHP6d7zXyvwAayP0gI1nBAOVSgAnrlzDWM\n91e/qfes9UP22IvKOgftihdd9M2inMJy8ZkMI+BYbPevvb0ohU25TJnTM1y0\njHUCmnPNS5lYiFqZJdFBuUnJZ8oEi8fKSdPGfm7/5awOMd4/VqQiOyZVWdmj\ngSogo3K162btIHMJ9kFCpMRvw0hhvgboVfm5XUwyoAqTAyMXKAoJbzDejmAs\n/HpMXCUmkPivSpgvczyDG65TiPJ1OTmfWeZcYTNVDx5peblhOP3CYg024wgJ\ndvR4SJkkjaU/8htp/nwKxmWylVfIdrnOQC5W+Ev82Yw2ikBUxRIPhQsSBXdU\nCUGi\r\n=oOoa\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n\n\nButtons allow users to take actions, and make choices, with a single tap.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/button\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n```\n\n> _NOTE_: Examples here use the generic `\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n> _NOTE_: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Additional Information\n\n### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n\n> \\*_NOTE_: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n> buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n> directly within the `mdc-button` element.\n> However, the `mdc-button__label` class may become mandatory for all cases in the future, so it is recommended to\n> always include it to be future-proof.\n\n### Sass Mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass Mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`mdc-button-filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass Mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`mdc-button-container-fill-color($color)` | Sets the container fill color to the given color for an enabled button.\n`mdc-button-disabled-container-fill-color($color)` | Sets the container fill color to the given color for a disabled button.\n`mdc-button-icon-color($color)` | Sets the icon color to the given color for an enabled button.\n`mdc-button-disabled-icon-color($color)` | Sets the icon color to the given color for a disabled button.\n`mdc-button-ink-color($color)` | Sets the ink color to the given color for an enabled button, and sets the icon color to the given color unless `mdc-button-icon-color` is also used.\n`mdc-button-disabled-ink-color($color)` | Sets the ink color to the given color for a disabled button, and sets the icon color to the given color unless `mdc-button-icon-color` is also used.\n`mdc-button-density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`mdc-button-height($height)` | Sets custom height for button.\n`mdc-button-shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$mdc-button-density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`mdc-button-horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`mdc-button-outline-color($color)` | Sets the outline color to the given color for an enabled button.\n`mdc-button-disabled-outline-color($color)` | Sets the outline color to the given color for a disabled button.\n`mdc-button-outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `mdc-button-horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"The Material Components for the web 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/density":"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/button_5.0.0-canary.a4db5fbad.0_1578968131386_0.2613756403197933","host":"s3://npm-registry-packages"}},"5.0.0-canary.faa9af310.0":{"name":"@material/button","version":"5.0.0-canary.faa9af310.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"04ada351add3dba05366be962bdfec6d116aa439","tarball":"https://registry.npmjs.org/@material/button/-/button-5.0.0-canary.faa9af310.0.tgz","fileCount":14,"integrity":"sha512-oeIznfW9Hq97VRLMWnDF8rAFaBsPoltFzp7am0nRiJzXp7wiwGprspXAxBS3n2BK4bgkIKaFFnPbop0ZoaXB7A==","signatures":[{"sig":"MEUCIQCEiHzw4E4EY0xoPhLBE1NUe3NkdEknDbvsceFgBVwjMAIgMTDytemtpyebAMXbK5WqT7apfKsGwo9wECvdhfTsZPQ=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":211578,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeHfHtCRA9TVsSAnZWagAAXdAP/054ETsbO4B4az1ODNU7\nCkKc3mPpOUJYlyFrIDh5yDN0NOeEPxtH1ODCd+ALhjV+vMFGjph9kZpySsAc\nMDGTuQ/v8yyyuav1iSgnRr4s0hkTa+c/WkaK7LjUwyI6+/jB/0XIxxXbV7ok\ncs3vh/eeSxa5Hnx7khcbN9xuRckQFl/2q7KgrcoDTzWOVMbNjU+DpdvMQ10N\nZ+2cfa3DgzKhhuhr7A4AVTUCyVOo17O9vqlf1kKTN3mV0IKCG5e1Yu52z7SQ\noBkvSIlwqklsZARF4uI3cVoE1z6q2VZ78ULoKU1molqAIH+yoS/N9kph5KjC\nPmgan5xM2qU/jY/32uz79PnQ1Ciy9DQwwhzcnlBaP8Nwub8MByr1T9RQYkTl\nb23o72lwpjr/dzSJM3lgzsk4VNZARLFFawTk00XdhveRvID3k954Dw+Dhvul\nikgd2l5wwh6N4rLFy99CPq3bnTQQj5ccr4AI63EpOyUiQRd3EGbKfxh+TT/E\nJnRN6NK8gAMcmIfYPsj7Bo7onAGa2Ly3J73nsiden8XOkXQaK2ma65/4vsW3\n17/3Zzee2gMfctRdupm6xJ7am0l7/tc2mXIVgav6ziDkIkDCGDegkUz+LaKa\ni+KafowFyBYCF2B9VhUi8Wa6bQ2+o4IP0Ho48kyQ4SNlFb2rJeAWVux/3piT\nbb4n\r\n=Sd+7\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n\n\nButtons allow users to take actions, and make choices, with a single tap.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/button\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n```\n\n> _NOTE_: Examples here use the generic `\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n> _NOTE_: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Additional Information\n\n### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n\n> \\*_NOTE_: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n> buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n> directly within the `mdc-button` element.\n> However, the `mdc-button__label` class may become mandatory for all cases in the future, so it is recommended to\n> always include it to be future-proof.\n\n### Sass Mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass Mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`mdc-button-filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass Mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`mdc-button-container-fill-color($color)` | Sets the container fill color to the given color for an enabled button.\n`mdc-button-disabled-container-fill-color($color)` | Sets the container fill color to the given color for a disabled button.\n`mdc-button-icon-color($color)` | Sets the icon color to the given color for an enabled button.\n`mdc-button-disabled-icon-color($color)` | Sets the icon color to the given color for a disabled button.\n`mdc-button-ink-color($color)` | Sets the ink color to the given color for an enabled button, and sets the icon color to the given color unless `mdc-button-icon-color` is also used.\n`mdc-button-disabled-ink-color($color)` | Sets the ink color to the given color for a disabled button, and sets the icon color to the given color unless `mdc-button-icon-color` is also used.\n`mdc-button-density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`mdc-button-height($height)` | Sets custom height for button.\n`mdc-button-shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$mdc-button-density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`mdc-button-horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`mdc-button-outline-color($color)` | Sets the outline color to the given color for an enabled button.\n`mdc-button-disabled-outline-color($color)` | Sets the outline color to the given color for a disabled button.\n`mdc-button-outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `mdc-button-horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"The Material Components for the web 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/density":"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/button_5.0.0-canary.faa9af310.0_1579020780616_0.09269092790742128","host":"s3://npm-registry-packages"}},"5.0.0-canary.60354c577.0":{"name":"@material/button","version":"5.0.0-canary.60354c577.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"f362c9443f43defe8eb1c9a9be6d42b36e53148c","tarball":"https://registry.npmjs.org/@material/button/-/button-5.0.0-canary.60354c577.0.tgz","fileCount":14,"integrity":"sha512-Uvah2vGKxazXux5UXFQ+ucMQGlGybMI/oF96v9S2NqhG1zjodcX2zxlhd6GLTqCIBFIZJyaWzwsweP3GGzTccw==","signatures":[{"sig":"MEQCIFdb5Oat0VgiHrxLGAe0a9u7lQbTHAFyHQPMwQ9Up09AAiAbRBYPu79anCryxkCh7R4vI0pEN+LkdcWfbkDk0GTKzQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":211578,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeHkSsCRA9TVsSAnZWagAAYUAP/18sjwVfDbMQ1GF5p3hy\n6hS6Qxvs7bNDtGE64Q20ZyvFqM7WGTQKjGsghCr04ET1yqpk8PyIH5o84x8c\nECF2uRgeQSaagZWLIu/2zmAKE1v8YMuvM0Qdh0JeeJd4zac3ujlfDb2C1Yv9\nfrZ5yNPjkqMGvSsBQJPa6B/KOWY7tSY8krauNuK4YBmu4rd9Cw/5F2GcrY4K\nHon7Ki3LsKDz2WIx2THyFXxSmRiLPTlM1Iq9tVpJSjpuXvlyl1OyiKnEN5JI\nGcN2atYod/9nEH2YuzldXws2Z4mdWbYk58t67n760JFznKbhLlSIic+eeZhI\nLDucwHCpzErt7PNPd+xIyN32MSiTd4OJQ5G4hCSOxDyKdmnzb3qkjIsR+ppZ\nqwkOMFvgHTryRW1JrCsQKh7rhAKgpJifHy6ADhI7aPBmzllHjlnNCW6l9O91\n7Ma3GB3fbYXVCYOEmzUvdnodbV586Bc3BSiNzn4uq56N3VLvvuE3tKE9m/9U\nzRi5EpUlaOnvyMWjNkBk6rD5n+ZNEDS9ZSZgVNmiNLge+b5b/BEnqviUPtJL\nh+NRYBZadgsfL8OlOJyzx7Ufchx1F+zkH5FkPU1C7gHj2rNfTHW3nY3PzXSw\nuGH0Nhe+gEi27mzSxNubimDjHzrU/vhfCFEXKX/Oj3UjG1rbKJNP7GoHLD59\nxBG7\r\n=Q7L8\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n\n\nButtons allow users to take actions, and make choices, with a single tap.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/button\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n```\n\n> _NOTE_: Examples here use the generic `\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n> _NOTE_: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Additional Information\n\n### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n\n> \\*_NOTE_: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n> buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n> directly within the `mdc-button` element.\n> However, the `mdc-button__label` class may become mandatory for all cases in the future, so it is recommended to\n> always include it to be future-proof.\n\n### Sass Mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass Mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`mdc-button-filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass Mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`mdc-button-container-fill-color($color)` | Sets the container fill color to the given color for an enabled button.\n`mdc-button-disabled-container-fill-color($color)` | Sets the container fill color to the given color for a disabled button.\n`mdc-button-icon-color($color)` | Sets the icon color to the given color for an enabled button.\n`mdc-button-disabled-icon-color($color)` | Sets the icon color to the given color for a disabled button.\n`mdc-button-ink-color($color)` | Sets the ink color to the given color for an enabled button, and sets the icon color to the given color unless `mdc-button-icon-color` is also used.\n`mdc-button-disabled-ink-color($color)` | Sets the ink color to the given color for a disabled button, and sets the icon color to the given color unless `mdc-button-icon-color` is also used.\n`mdc-button-density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`mdc-button-height($height)` | Sets custom height for button.\n`mdc-button-shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$mdc-button-density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`mdc-button-horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`mdc-button-outline-color($color)` | Sets the outline color to the given color for an enabled button.\n`mdc-button-disabled-outline-color($color)` | Sets the outline color to the given color for a disabled button.\n`mdc-button-outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `mdc-button-horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"The Material Components for the web 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/density":"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/button_5.0.0-canary.60354c577.0_1579041964316_0.15033382876410828","host":"s3://npm-registry-packages"}},"5.0.0-canary.d07c78daa.0":{"name":"@material/button","version":"5.0.0-canary.d07c78daa.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"14729f7ecddc4882d8fb0a19d5f9ebbfc44f7f96","tarball":"https://registry.npmjs.org/@material/button/-/button-5.0.0-canary.d07c78daa.0.tgz","fileCount":14,"integrity":"sha512-XvEtC6uUDN8BYDoVAkDY02L+AA25X9RJyi/y7Iaj+lHWbcbJCALys8Zxz0cRFx7crm1AHCm3TBgiIqAj4JQE9A==","signatures":[{"sig":"MEQCICznm3ioXl0vjwbYyryevUBbOIxz6Whe30s6zuxlIB78AiApbe4fx2LJehCY6F7uSw1Fe/QGmRaXQWNDe+3BZH8XQg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":211578,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeHlEBCRA9TVsSAnZWagAAY1kP/j8ah3Oji38SvnzCiPuu\nlK/1XEtPRh1p8NHRTbhQ7uLqPf3dOjCYbda4xZkyZea/We16l1huzSead58Q\n+axMiFsh044FS0ndepNxlDwiLAkelPsNp2N7duwwvs6ZQLFlTIJM49do6F6W\nBLbX9/f/KqBabGxqzFegrU1ATBZ+Qb5CYWEjBKQ+TMfaG/fJ27lvDKvm3paJ\nKlKeFztxv/PTfIvaJqXf4KBaxtihuE8MOp89Y2/dzRmkuDkM3JOnSzoedGBs\n0c/jHDcvYvaqcLee5Le+yaUbRA7Snuy+psOldtk1Gxl2WcCvxSgQTwzJNtpP\nZIqm//Ij7x1H4ceYAGZ2p7g0cBgqRlN7zZSTZXPgmdWnpAL63g3Z4bCqYaph\nsqglrIBTBeaHk+GNUOLtdZMLNOTVrkiXkCKcLfDKPGS99SwAs1YxG9yEHpOO\nUymZXjDruiH/o2x2qPry60kgUkFxVhDmaa2KgJ0AAfxrLyBQfYq2MBsk4XjH\nzjA5is3TChNqO0PRTDba2WyJ5NEC2MNNSu7svw360FIWaLlOLumvPTGtThQb\nCiXHFFmdp4Tb49IYPWCIJXnV1CoYlXfj5FzFmVT/HYGHDycAHcyJakdlHpWN\nxX4SWkpkKmCFJV9hp12MMVt2U4ErG0Gpc1fSKzp177RJgUyXbXkBsAo052zW\ns1ET\r\n=/jJW\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n\n\nButtons allow users to take actions, and make choices, with a single tap.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/button\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n```\n\n> _NOTE_: Examples here use the generic `\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n> _NOTE_: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Additional Information\n\n### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n\n> \\*_NOTE_: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n> buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n> directly within the `mdc-button` element.\n> However, the `mdc-button__label` class may become mandatory for all cases in the future, so it is recommended to\n> always include it to be future-proof.\n\n### Sass Mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass Mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`mdc-button-filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass Mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`mdc-button-container-fill-color($color)` | Sets the container fill color to the given color for an enabled button.\n`mdc-button-disabled-container-fill-color($color)` | Sets the container fill color to the given color for a disabled button.\n`mdc-button-icon-color($color)` | Sets the icon color to the given color for an enabled button.\n`mdc-button-disabled-icon-color($color)` | Sets the icon color to the given color for a disabled button.\n`mdc-button-ink-color($color)` | Sets the ink color to the given color for an enabled button, and sets the icon color to the given color unless `mdc-button-icon-color` is also used.\n`mdc-button-disabled-ink-color($color)` | Sets the ink color to the given color for a disabled button, and sets the icon color to the given color unless `mdc-button-icon-color` is also used.\n`mdc-button-density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`mdc-button-height($height)` | Sets custom height for button.\n`mdc-button-shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$mdc-button-density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`mdc-button-horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`mdc-button-outline-color($color)` | Sets the outline color to the given color for an enabled button.\n`mdc-button-disabled-outline-color($color)` | Sets the outline color to the given color for a disabled button.\n`mdc-button-outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `mdc-button-horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"The Material Components for the web 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/density":"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/button_5.0.0-canary.d07c78daa.0_1579045120679_0.07260492436051691","host":"s3://npm-registry-packages"}},"5.0.0-canary.8ddd5c6dc.0":{"name":"@material/button","version":"5.0.0-canary.8ddd5c6dc.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"b5a2e13fe18ff5fca521f023a11dd62855b47cd9","tarball":"https://registry.npmjs.org/@material/button/-/button-5.0.0-canary.8ddd5c6dc.0.tgz","fileCount":14,"integrity":"sha512-GRP52omVDRmcqcLo3BXzcn4hZFmLxZzwv25gR232JDRg5sHeJJDAxOHK7g8W5bxNEc+pNlH3RQROBCj173/LZw==","signatures":[{"sig":"MEQCIERmb1+uR5HRqqaQk3i9RWi8x1v013hRgGjRT+l34uHUAiA85XG8aaOdFyAldyetpfoeVXinEGVpzym8yLUbimKLaQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":211578,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeHm4tCRA9TVsSAnZWagAARzAP/jajxr/g8rFHjPJLXHe9\nmw1MGwhhJ9855qUkd07e6pUdDdXQQ50K8+XYCan8wlZZr15H0z37h5pXIiUQ\nh87AC6enqFcotV1YswuK/rqjh8A+mZcVvlDsK3ypkLdflE54bWfgOVAqqD9m\nmtDuZ4r0Qm9rnsMZrgFZmZDdZca1PsynFpH3mF1ALP6RlHAmnpMI8LoKqABv\n97z0XmTaePMSe92O8axrziHWFu1+o5fxRT963n741oI2m/vpKrKNh8K0bpHr\nKKhm4B9pnrLhZ6jYkj6S/oyfcuiQxqOFU9dhwncPPDIsaCH3CzORCQpXV7ZD\nvxT3Pppvig8kyCensYKqohcxSXF3uPltgU5RjkZFrPDm0fu3pR/eQBdyfCcF\nwrbG8AqFKjerNYDup/ztp3uowdOHvA9LSqAuoVGNtz42zjeJG/B4RqFTbTE9\neECPD5o1EEskAf7uvBVGkzVCZWHikPvScyGRAQr3B71P2cM/oXjbBebuL5Ad\nnBgHvJn4CyX02bVkDaj515IxzuDOak+h1cSJmRqLeglNxgBEn71kl7Q8qJrd\nlAczEtpbphR4mechpT8b0hH0jMW35C4dm2YKUUyCXQxdA9zWpZQNI28QtTVN\n4kEJ+nBHhHIGFdATUVLd1eGUEudJEZdTeIWUQ/e0oeXS7BoRaK8B1EMchkZ4\ny9op\r\n=6bbG\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n\n\nButtons allow users to take actions, and make choices, with a single tap.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/button\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n```\n\n> _NOTE_: Examples here use the generic `\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n> _NOTE_: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Additional Information\n\n### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n\n> \\*_NOTE_: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n> buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n> directly within the `mdc-button` element.\n> However, the `mdc-button__label` class may become mandatory for all cases in the future, so it is recommended to\n> always include it to be future-proof.\n\n### Sass Mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass Mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`mdc-button-filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass Mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`mdc-button-container-fill-color($color)` | Sets the container fill color to the given color for an enabled button.\n`mdc-button-disabled-container-fill-color($color)` | Sets the container fill color to the given color for a disabled button.\n`mdc-button-icon-color($color)` | Sets the icon color to the given color for an enabled button.\n`mdc-button-disabled-icon-color($color)` | Sets the icon color to the given color for a disabled button.\n`mdc-button-ink-color($color)` | Sets the ink color to the given color for an enabled button, and sets the icon color to the given color unless `mdc-button-icon-color` is also used.\n`mdc-button-disabled-ink-color($color)` | Sets the ink color to the given color for a disabled button, and sets the icon color to the given color unless `mdc-button-icon-color` is also used.\n`mdc-button-density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`mdc-button-height($height)` | Sets custom height for button.\n`mdc-button-shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$mdc-button-density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`mdc-button-horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`mdc-button-outline-color($color)` | Sets the outline color to the given color for an enabled button.\n`mdc-button-disabled-outline-color($color)` | Sets the outline color to the given color for a disabled button.\n`mdc-button-outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `mdc-button-horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"The Material Components for the web 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/density":"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/button_5.0.0-canary.8ddd5c6dc.0_1579052588548_0.8251150187400751","host":"s3://npm-registry-packages"}},"5.0.0-canary.a9511d870.0":{"name":"@material/button","version":"5.0.0-canary.a9511d870.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"ce9a344dd3316eb0b5031411906624f8e0c248ce","tarball":"https://registry.npmjs.org/@material/button/-/button-5.0.0-canary.a9511d870.0.tgz","fileCount":14,"integrity":"sha512-ICD8LUUYEiF/iklmThmgnpI+imIuHcPz1KNOw6qJ7CAwcBRbpX+fP6ed55p9xfNC8OkDQGvR6L0B+xT6+DDljg==","signatures":[{"sig":"MEQCIB0BL0KprpO5Y/K+XFKvOENL/1t4Lh6tAJcIyGUsa9N4AiAC1ZDNt+gvFXXchxQsaCmwYN4ZSQ1NCpQu1Uqd2+xdZw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":211578,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeH2OjCRA9TVsSAnZWagAAt3EP/AhNuRSkT+biDrAD58qL\nZ7cm7L5daUoByjlT9X4bBtByV0HTHXVSopGTOYD4td1xm0A3egVdkEiZvY5C\nz0aCOqlU9/gu3L0M/j87WSbnHz/KmzrBq+tMzus85hSYZq2AGNEo4D1MBDuD\nyoc19H1yS4xSPTVLgxBMN9Abb10PxKYW6n+Y8p+VyQ1unCKQVFodTt3bqRQ6\nWUQ5/1bFv7QE5lX68fUQj+awL6bbBnrvDj9475TNsmgKuV4RB+6HOECqgs2u\n66oV16X8Hm4QJnFPesXkFD3YsSPDFqD7uSpGVSibE7kfmMOb9K5+zfwbnfg/\njiI5w8Ovy+XsW9CY3X7y8E13A7LoEXKMtPCFXuQx7PnWHNwthexKITHwGE7U\ndY5RucP0HE4uPGUjSIgwMZfXK9Nim6s9+1g60RudRdBt2w/JgDPO1HR1WSoX\natEfe/yL6hM6nHRKfwa+XwDOrx9dhU8r4mwDinGlofkEaffSX5rGJqDhsjKf\nSpT2T/6+0BMEYW6x5S1oyVFFOOQmSm1AgyQAJVKF9kDwNXqMLFcaYXkVOVXB\nuULVzvkBeALBymzWQLTCBJb+9aKvgA1hcvFP0kS5nwG2RGrX3x/tAWDzZbTb\nXqweAjIAcPsFvfygQkfg/bqWoywBMwOiSgh0FERoKZWj8R/9/ALlRYCBju5j\nXgY1\r\n=Mhvk\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n\n\nButtons allow users to take actions, and make choices, with a single tap.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/button\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n```\n\n> _NOTE_: Examples here use the generic `\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n> _NOTE_: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Additional Information\n\n### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n\n> \\*_NOTE_: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n> buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n> directly within the `mdc-button` element.\n> However, the `mdc-button__label` class may become mandatory for all cases in the future, so it is recommended to\n> always include it to be future-proof.\n\n### Sass Mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass Mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`mdc-button-filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass Mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`mdc-button-container-fill-color($color)` | Sets the container fill color to the given color for an enabled button.\n`mdc-button-disabled-container-fill-color($color)` | Sets the container fill color to the given color for a disabled button.\n`mdc-button-icon-color($color)` | Sets the icon color to the given color for an enabled button.\n`mdc-button-disabled-icon-color($color)` | Sets the icon color to the given color for a disabled button.\n`mdc-button-ink-color($color)` | Sets the ink color to the given color for an enabled button, and sets the icon color to the given color unless `mdc-button-icon-color` is also used.\n`mdc-button-disabled-ink-color($color)` | Sets the ink color to the given color for a disabled button, and sets the icon color to the given color unless `mdc-button-icon-color` is also used.\n`mdc-button-density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`mdc-button-height($height)` | Sets custom height for button.\n`mdc-button-shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$mdc-button-density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`mdc-button-horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`mdc-button-outline-color($color)` | Sets the outline color to the given color for an enabled button.\n`mdc-button-disabled-outline-color($color)` | Sets the outline color to the given color for a disabled button.\n`mdc-button-outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `mdc-button-horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"The Material Components for the web 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/density":"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/button_5.0.0-canary.a9511d870.0_1579115426665_0.61894699805944","host":"s3://npm-registry-packages"}},"5.0.0-canary.7c8583c4c.0":{"name":"@material/button","version":"5.0.0-canary.7c8583c4c.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"c3e0112c69f86d9eeec69fc194364ae28f96f9e9","tarball":"https://registry.npmjs.org/@material/button/-/button-5.0.0-canary.7c8583c4c.0.tgz","fileCount":14,"integrity":"sha512-CvZS6uobzj0rXTQ/rxipyd2lurOpFbzBGCgdZsE0FLTrRpv2SDk71RZPFPH5aQBCjaSODOAWgINK0bkzkU59IA==","signatures":[{"sig":"MEYCIQDv1KSt2E2+Qv6d+lVBDtY5QMGc4noRYwlOTga5srxFXgIhANQtLUaF/8X2K6v6KiAaQ1i5/UbJbi3w9U+Yc4viny4c","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":211578,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeH5apCRA9TVsSAnZWagAA290P/iBCxL5hNa8l5WHKWaxy\nFkR+ug1YJ0RQt45AewtXnIHj9dpVPrS45jcqyLanOErLmjED/UGoRlo2JKDW\nihUdsdd19VQeZ7iVNJLxhubAJNNV2ayWzxNEYdb3sjdFquL2kMG1Pj1m7WB5\n5HlK5vxbbLjayYPTGcXuIYvjsZcOFtk60yfU8qS4V7axOICbsr/lKrWUW2/b\nmLhXSeqfHMR6n6hezYPUn+z0zXbUClFGv5RCdW9dQy4M8KWzhE9fgElhH7Yr\nkcp/skDVsLZfeSFEYiCMwvY7L/GnsnD+5myH4oWw3oC9HvI0gwih62iA+RTS\n/Xj7gD07yQCaNBQpaPCtfiaFTOOqRVxUoqV2IfbBREfaIkZsNUYKI/fZuQFy\nn2xsQmu4LOm4TDeUdBpwpMAvmIatW4NRbm2gO2qxDBilsI2m8XFB41FiuFpS\neIxWJEK+JcdHH6oa3Pypjerzu2xNcx6nETQ8h4G7bYJmiQ8V78NLoHKpptzO\n/2leNiEWdJM5hQ0MBmvM/NbG9wyLBdY+AmJf0ydeuUtyYcPs9I3wGzdxFyW9\nP2Xd/Zesn5E4usl4vh8Ju2UG97VFhiBmD8lX3ciFRaPk/sgcAvHpPZ2lOCik\ns5GcxKB2NbXKcbkolRiZ7eA43IaVBydjOkvwceSNjJc2iKeltd4yB3uJyBsH\nG3OL\r\n=fhxV\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n\n\nButtons allow users to take actions, and make choices, with a single tap.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/button\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n```\n\n> _NOTE_: Examples here use the generic `\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n> _NOTE_: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Additional Information\n\n### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n\n> \\*_NOTE_: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n> buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n> directly within the `mdc-button` element.\n> However, the `mdc-button__label` class may become mandatory for all cases in the future, so it is recommended to\n> always include it to be future-proof.\n\n### Sass Mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass Mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`mdc-button-filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass Mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`mdc-button-container-fill-color($color)` | Sets the container fill color to the given color for an enabled button.\n`mdc-button-disabled-container-fill-color($color)` | Sets the container fill color to the given color for a disabled button.\n`mdc-button-icon-color($color)` | Sets the icon color to the given color for an enabled button.\n`mdc-button-disabled-icon-color($color)` | Sets the icon color to the given color for a disabled button.\n`mdc-button-ink-color($color)` | Sets the ink color to the given color for an enabled button, and sets the icon color to the given color unless `mdc-button-icon-color` is also used.\n`mdc-button-disabled-ink-color($color)` | Sets the ink color to the given color for a disabled button, and sets the icon color to the given color unless `mdc-button-icon-color` is also used.\n`mdc-button-density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`mdc-button-height($height)` | Sets custom height for button.\n`mdc-button-shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$mdc-button-density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`mdc-button-horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`mdc-button-outline-color($color)` | Sets the outline color to the given color for an enabled button.\n`mdc-button-disabled-outline-color($color)` | Sets the outline color to the given color for a disabled button.\n`mdc-button-outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `mdc-button-horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"The Material Components for the web 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/density":"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/button_5.0.0-canary.7c8583c4c.0_1579128489390_0.014421024492091261","host":"s3://npm-registry-packages"}},"5.0.0-canary.5d4b82bac.0":{"name":"@material/button","version":"5.0.0-canary.5d4b82bac.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"c13da1188579cab555de8cc09e8bde0b560bb472","tarball":"https://registry.npmjs.org/@material/button/-/button-5.0.0-canary.5d4b82bac.0.tgz","fileCount":14,"integrity":"sha512-91E20MIkLAhcvQBlclTn1Na+uqeWzbo+jdu7Zz4yvz8rYOyqM89VBtUcYLFnSg47H7q/Y/Nm3jX21xlxkHbjUA==","signatures":[{"sig":"MEYCIQCecJHlPVveFY1HgSOLZQrZwCoOPJpDBanyLViukVv6RQIhANObPS2wfzNYPn77FaQBhnaehE3NVZ5YTbMWE08WRniH","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":211578,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeH5a+CRA9TVsSAnZWagAAbLAP/2ViE2kwxMT69vURcShI\n12mY6t8Sv9bPb90o6HXXBQhwY1ns7LlMzFh33W2sfUYvHl2pPKKTMt2MtN49\nuyYMdkQL1bQUdu0KgGNgstLIsk4ef8020h7/ZK95fbiukBjl6DatR1m6Bcyc\nNiIjpA5crxHyPWRQE5Ru1TeskW+Se2IE+y29m3+2cwPzll1Ew5tNFs4MeLZj\nrxgRNColTwEJejsyrr55w/qxbIcGd6octAZK9ZBMOzyON/B5twFPGmvqAu16\nEYDLefkCswTiBdwB8yIsN2Ql4qoJC4k9MTbVQv7xJSl6pGcKTMkdVWsLK8RU\n4DIkhjIl80WJO9Cs3gChiXSKBgq4/nPKnj8d5LU/kcwqtLcc+CKxxgeLnMTx\nQOvWDeOxcWB524LQTyIRQptDY6EGNFDLkUgec8M4RU2d95bjxFot2vXE7rih\nF+Z3lbSeGI0D2FHqZOAjaL/gry1VwUlSoK03/fi0vur1/FC2DA48zdx2T1La\nJwRz1z/5pvz6gvXkXO295f6eCBhWCDdr3V9jxnNBG1+sPlZAvS0A3CDVFbdO\n6zIR0JJifTuccQVtktD5Aaf+h044eAjbNGUU9mrjSuXQiFE20uZh8NwdfxsP\nldOhA+jq/hCCn/+IwAh2em/9sMjucX1wdDXj9m8zLhhZ/HXKQs6tCBPhaltM\n/veB\r\n=iCiL\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n\n\nButtons allow users to take actions, and make choices, with a single tap.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/button\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n```\n\n> _NOTE_: Examples here use the generic `\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n> _NOTE_: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Additional Information\n\n### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n\n> \\*_NOTE_: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n> buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n> directly within the `mdc-button` element.\n> However, the `mdc-button__label` class may become mandatory for all cases in the future, so it is recommended to\n> always include it to be future-proof.\n\n### Sass Mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass Mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`mdc-button-filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass Mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`mdc-button-container-fill-color($color)` | Sets the container fill color to the given color for an enabled button.\n`mdc-button-disabled-container-fill-color($color)` | Sets the container fill color to the given color for a disabled button.\n`mdc-button-icon-color($color)` | Sets the icon color to the given color for an enabled button.\n`mdc-button-disabled-icon-color($color)` | Sets the icon color to the given color for a disabled button.\n`mdc-button-ink-color($color)` | Sets the ink color to the given color for an enabled button, and sets the icon color to the given color unless `mdc-button-icon-color` is also used.\n`mdc-button-disabled-ink-color($color)` | Sets the ink color to the given color for a disabled button, and sets the icon color to the given color unless `mdc-button-icon-color` is also used.\n`mdc-button-density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`mdc-button-height($height)` | Sets custom height for button.\n`mdc-button-shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$mdc-button-density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`mdc-button-horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`mdc-button-outline-color($color)` | Sets the outline color to the given color for an enabled button.\n`mdc-button-disabled-outline-color($color)` | Sets the outline color to the given color for a disabled button.\n`mdc-button-outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `mdc-button-horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"The Material Components for the web 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/density":"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/button_5.0.0-canary.5d4b82bac.0_1579128509896_0.31273179879910074","host":"s3://npm-registry-packages"}},"5.0.0-canary.57d0186e4.0":{"name":"@material/button","version":"5.0.0-canary.57d0186e4.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"29503ba110571b9e7d07394eded6751d8252d5fc","tarball":"https://registry.npmjs.org/@material/button/-/button-5.0.0-canary.57d0186e4.0.tgz","fileCount":14,"integrity":"sha512-83H7Q/+WxuM6/5risTkVxD1ka0nJJPSfsAnsDlHzYvbC/yceiutn2krkwHG5uI3jHR48prpY13lxugN6WBRbTw==","signatures":[{"sig":"MEYCIQCk+6SDPK0jf8Aioz7eaLQe+gVsQbBgRwAREMam/perHAIhAOZh12rc/BzLSxNm3KFj857WNvNMZRDFNUwwCFqtIf61","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":211578,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeIKjCCRA9TVsSAnZWagAAFMwP/1MI4cRNrI+vL6MWTPjx\ntQ5c18m61GN8vCQC2yp0EN9O+GDwCvjNvZVl7tVh/mkuLJdzC83muH78nms1\nw2QJKplZXla42Fk1CbCdrqricyMHlbrquNEQI19az3h14c+A5wgr0SSSeFqw\n5XnZQrWxrBxLNHor7uYPIo3zxQQ2LBasi42a3RTbsnNmAn3diPcG3yVbEejv\nB/4qfmq4rYsycCCd/hehNWoutCUThyMbNOkikY9gYGaV6XjR7VsU4/GhVExj\nFX+IcwBqdnxnOoKhFnbZEEgmujwHjjVxTobDFoDmwvxrI7PrF+1JtE/wuNzw\nXHxGXuMK3uEvcf14riDC1MGyTw6w9fr3+kl5D8GnMUjj5w5sxgTDLAtxlfo7\n0Np+byAUgpFgRSG3vXXwEqt8u00a4jemPIWkACxwP8eKXcegCNRItGnSnbnt\nvPTskSPOsydVDVxU9H2u+zBrbnkYUr9abF5AGgNH9AmAUTH3DJ1qZg37K19F\nJcKsgIV/yQ6meSqbbSAhklDMYhy6Ds0Wp3qTGxVXgG5ujspnBnNyy9giflPK\naAVorw+b/qrTKcwsq7sxLLQ+NCULF1512LwdXFmcoJY8UP49MUaZ9TV+byCZ\nByj3ee+DQtSFhL3APtVpRJVyf/EViCfmyfc7B4WasXx0fw9V1Ygjm5XrGbcc\nK6SU\r\n=5fUk\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n\n\nButtons allow users to take actions, and make choices, with a single tap.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/button\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n```\n\n> _NOTE_: Examples here use the generic `\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n> _NOTE_: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Additional Information\n\n### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n\n> \\*_NOTE_: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n> buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n> directly within the `mdc-button` element.\n> However, the `mdc-button__label` class may become mandatory for all cases in the future, so it is recommended to\n> always include it to be future-proof.\n\n### Sass Mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass Mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`mdc-button-filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass Mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`mdc-button-container-fill-color($color)` | Sets the container fill color to the given color for an enabled button.\n`mdc-button-disabled-container-fill-color($color)` | Sets the container fill color to the given color for a disabled button.\n`mdc-button-icon-color($color)` | Sets the icon color to the given color for an enabled button.\n`mdc-button-disabled-icon-color($color)` | Sets the icon color to the given color for a disabled button.\n`mdc-button-ink-color($color)` | Sets the ink color to the given color for an enabled button, and sets the icon color to the given color unless `mdc-button-icon-color` is also used.\n`mdc-button-disabled-ink-color($color)` | Sets the ink color to the given color for a disabled button, and sets the icon color to the given color unless `mdc-button-icon-color` is also used.\n`mdc-button-density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`mdc-button-height($height)` | Sets custom height for button.\n`mdc-button-shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$mdc-button-density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`mdc-button-horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`mdc-button-outline-color($color)` | Sets the outline color to the given color for an enabled button.\n`mdc-button-disabled-outline-color($color)` | Sets the outline color to the given color for a disabled button.\n`mdc-button-outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `mdc-button-horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"The Material Components for the web 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/density":"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/button_5.0.0-canary.57d0186e4.0_1579198658331_0.1959470534903638","host":"s3://npm-registry-packages"}},"5.0.0-canary.071a6ab70.0":{"name":"@material/button","version":"5.0.0-canary.071a6ab70.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"330ae7eb8894d76d156ce16c93433eef0d0a46b1","tarball":"https://registry.npmjs.org/@material/button/-/button-5.0.0-canary.071a6ab70.0.tgz","fileCount":14,"integrity":"sha512-UNarCFskVR/2nTmclJx0JVulxoiR16zwlsBwnRoTLJLSWQqVxXA9P9EpetQvXCLXR31OdDHa/Hm0h3S6nu8yQA==","signatures":[{"sig":"MEYCIQCpajXAH0nSnz28hBKwTtJBLgjGU2dOJq7cCyEib32zpgIhAN5U0xwOH7yL2p8tJeEMtVbc8EhdkUrzz2O5ftw43KpT","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":211578,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeIKpDCRA9TVsSAnZWagAA+gQQAKFN1YAW3BgEBDMPi0Vl\nBM1VgQg28Nit21crenFvPQutTjBYGz21W2/ZwERyXACklEuyZE3CCMEXIYm8\ng0/P1H2aPcbBDDgwAMJguk8BqzXKV9XINMZo+uoRZb1H7X3A524scQaimosR\nzkct8+Ap2UKFXkBWofc2O4MAEzqFRHtw45TIqkkB73cta8S3Ckm5thH68aYj\neuk3Zzhz+OAFMpXvzZ1EpRJ/V1FISjZIS00S8kN3WrrtLZmkNu1Trm0p2xCN\nW2gmcFXfYzR127f2wMlFaiMkayR6frbbIgsAw5zZVJkA8QY95t0TSlsMZGQ/\n6YBBejgBGgMyzNk4ZxF1bgbNK9SeMrUj7LS+NZtyjwsoxG8STzxjNB7mXfpR\njNLvjIMOq3k2vKJU+Ormyb7oI2KkfV4lNHpp5Cpc8eIEBnHxvISNeAhC8f7/\nFdQZ/B0qtv/ET2wycYvZkRMoMfOVFfOp7U6xHOwDu+9z5mOfwqLptqlCg0mv\nHFKRuNVn1U9YM8YMAg3fjAjWQpcTIx1U+Vt0btl7rY6YyLPxL2ffcUyJ+ciC\nkkGZ9QV7DmWhKup+sdeD8gT5p7boV83WhyRdHL9k1e6CDysIHPSQ7ZVbCguP\n3283i8eNP1LGXP05slLr+XK3ZSvhVqiXQ/sg8/zS1xijDbghfoOajdg3or3U\n9r3M\r\n=q2Xf\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n\n\nButtons allow users to take actions, and make choices, with a single tap.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/button\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n```\n\n> _NOTE_: Examples here use the generic `\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n> _NOTE_: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Additional Information\n\n### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n\n> \\*_NOTE_: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n> buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n> directly within the `mdc-button` element.\n> However, the `mdc-button__label` class may become mandatory for all cases in the future, so it is recommended to\n> always include it to be future-proof.\n\n### Sass Mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass Mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`mdc-button-filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass Mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`mdc-button-container-fill-color($color)` | Sets the container fill color to the given color for an enabled button.\n`mdc-button-disabled-container-fill-color($color)` | Sets the container fill color to the given color for a disabled button.\n`mdc-button-icon-color($color)` | Sets the icon color to the given color for an enabled button.\n`mdc-button-disabled-icon-color($color)` | Sets the icon color to the given color for a disabled button.\n`mdc-button-ink-color($color)` | Sets the ink color to the given color for an enabled button, and sets the icon color to the given color unless `mdc-button-icon-color` is also used.\n`mdc-button-disabled-ink-color($color)` | Sets the ink color to the given color for a disabled button, and sets the icon color to the given color unless `mdc-button-icon-color` is also used.\n`mdc-button-density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`mdc-button-height($height)` | Sets custom height for button.\n`mdc-button-shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$mdc-button-density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`mdc-button-horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`mdc-button-outline-color($color)` | Sets the outline color to the given color for an enabled button.\n`mdc-button-disabled-outline-color($color)` | Sets the outline color to the given color for a disabled button.\n`mdc-button-outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `mdc-button-horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"The Material Components for the web 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/density":"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/button_5.0.0-canary.071a6ab70.0_1579199043455_0.7816108372489567","host":"s3://npm-registry-packages"}},"5.0.0-canary.22e0cb618.0":{"name":"@material/button","version":"5.0.0-canary.22e0cb618.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"e6157cb63d58d7af6f846e297dfa2cbd86419900","tarball":"https://registry.npmjs.org/@material/button/-/button-5.0.0-canary.22e0cb618.0.tgz","fileCount":17,"integrity":"sha512-JJoMjd6euaBep3Cyr3zu8lZosn33n8A1KOMTxBpXPl7nBkFE9qWrRR9PmC1CZcuVMVvydx6890qIx+h/awqlHA==","signatures":[{"sig":"MEYCIQDKc71As8abZ2q1BR1La4zFsrhZw10hWWl9/ZjP0EUXFgIhAM79bR4JY0wR8X8DvFwF17/pMLpXU2KVYGTdbysbzsyk","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":214319,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeIK+rCRA9TVsSAnZWagAAIoMP/33UBuRjQ0ARlGJXeOYL\nq9OstRq/ttroa9FNWWTJAtvsrQ5ygNA5dI+NUH5v5GYqJnIVMXTTtTiG09ru\nkQaYXnNlTTtd8+CnwDzaBNEStujWpIOlwFGSX7f3/inw+UQqHU7jSVzUTWad\n6nRjPNxGrMNAOO9TC9CwiLsEx/Gq8JAPrcWuPsuxYIEAO0CkDjldt05M9LDG\ni6aqwJL/Q9OdfzonWMT6ME5CBrEDFdXGgn5LwncD3Kzar7A/J3I+2cN8IBv4\nS6R2DUV5L3ayg1OQT9Nh5CAlVYmIw+tFPEP+Q6vRwV7I362g6ErgG8dK2uLS\nRRLYkgFlQFgb3+SagVe2yY6GNAAOvDZ8xo70k9nfYrsgIqslRhbzGJiCiwZL\nvt4Jj5u5FyH3tgxK7TeO1uNhfR8yRW3D2QhZQaVbRLDOD1IAmqCapUQ8uNPe\nEjcQ+5QGJDBH+kfUjrLMhhUqC4PV0Bk1DtRLleVq1CoNUeuUGDD3p+QbYfhJ\n97E5F0g/6wr+1ljlA0qV8EmktBtYZGXnd+YuIrwd4kYzNSMef+5rOLTl3/Pv\nupNe6xOdhrVDd/npss+8St0QUk08yTuWNSoLSAlxw+bZI6F16lIpqlx8CfTE\n6RBbpmUWf5p20Z2YkTub6+PwKo8+F891krZdb59keTacAeCUnKBKcwdalPXX\nXHkS\r\n=/bb/\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n\n\nButtons allow users to take actions, and make choices, with a single tap.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/button\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n```\n\n> _NOTE_: Examples here use the generic `\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n> _NOTE_: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Additional Information\n\n### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n\n> \\*_NOTE_: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n> buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n> directly within the `mdc-button` element.\n> However, the `mdc-button__label` class may become mandatory for all cases in the future, so it is recommended to\n> always include it to be future-proof.\n\n### Sass Mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass Mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`mdc-button-filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass Mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`mdc-button-container-fill-color($color)` | Sets the container fill color to the given color for an enabled button.\n`mdc-button-disabled-container-fill-color($color)` | Sets the container fill color to the given color for a disabled button.\n`mdc-button-icon-color($color)` | Sets the icon color to the given color for an enabled button.\n`mdc-button-disabled-icon-color($color)` | Sets the icon color to the given color for a disabled button.\n`mdc-button-ink-color($color)` | Sets the ink color to the given color for an enabled button, and sets the icon color to the given color unless `mdc-button-icon-color` is also used.\n`mdc-button-disabled-ink-color($color)` | Sets the ink color to the given color for a disabled button, and sets the icon color to the given color unless `mdc-button-icon-color` is also used.\n`mdc-button-density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`mdc-button-height($height)` | Sets custom height for button.\n`mdc-button-shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$mdc-button-density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`mdc-button-horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`mdc-button-outline-color($color)` | Sets the outline color to the given color for an enabled button.\n`mdc-button-disabled-outline-color($color)` | Sets the outline color to the given color for a disabled button.\n`mdc-button-outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `mdc-button-horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"The Material Components for the web 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/density":"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/button_5.0.0-canary.22e0cb618.0_1579200426612_0.4931080448067924","host":"s3://npm-registry-packages"}},"5.0.0-canary.f16f15b8f.0":{"name":"@material/button","version":"5.0.0-canary.f16f15b8f.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"0aee11b64696350acfec23cc1361eba53990bab1","tarball":"https://registry.npmjs.org/@material/button/-/button-5.0.0-canary.f16f15b8f.0.tgz","fileCount":17,"integrity":"sha512-IFTN2zc4qMLNiU6HbJOZL6OS+n3fOQsXWiAbT6JgIBaAkiQZlr7nNO5ctE/zeclMYSSnEEaS+ZVYANeO5v4CGA==","signatures":[{"sig":"MEUCID8Hk505PWm7i1IzeAAiLw6wTiNxMweyj1m97pFZ0CLhAiEAl43GEMqyrNW4DlERb9hOrXKKCjPaoGQhVebLCPtSwc8=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":214319,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeIPqsCRA9TVsSAnZWagAA78EP/2gCPMFza1GlpHaY/hwq\niQjbV7IlJ9wmSXDi+lC8eQVO/FYDGMKlDru68AQYSbJa+ZcJjBvfY8ZJ0Zqw\nRezH55o/BdnbZ4Vk3Ql8NGCvRVxAro2WxPIn03TJOXoEkrs6xPyPuDv+JaM+\nRnO1350eFLyIYvEPOpRo9fKw1HnDr01DCgaVcmcHps2l2L587pxfknmler7+\nnPbOw4TRDeyangsSuzCuRNEIhC2mAnAGajSBwgbIpJ+bcTpUQuo3aOF98kbv\nqlxfDPC46I8zzAKXGLgKMsRwwzi5X4T5nEm9bpaeDROFohyZgIB2Zb4s21xv\nCJ/V7Q4vYcb2duVgNoRwhIVMARiv7zX6NfKY3/A9wmtGxzBzdhU1cvPKg08J\n6V4QHXCUSwuTkz+bJb9/LjtG3fdLDxjkNsd5T6OgUeDw0DekQV6ZLl/tX6mN\n7m6Ee0YYpOVTIC6qh9kaaoDZqEz4NL/ovT2y0EagZ3kkXpkeT6R2qiHHx5mh\nYAEXlm2xX/4pNTYFf+Cld9f69OLRGZ5NialAgsF/JpICtTNjneGHnEZkBwlW\nCSE013u1AkKl4DEkiXJNm5O65aP73ysJEX0EemyTs4uaK8BpNFX2te1MylZo\nuwxX9BE0PF/zOvZ+q9qTjrWKcNpM9dfhSey+Rbck8N6+KNdhCn3t2eYA5ag5\n/dmI\r\n=nZ2p\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n\n\nButtons allow users to take actions, and make choices, with a single tap.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/button\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n```\n\n> _NOTE_: Examples here use the generic `\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n> _NOTE_: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Additional Information\n\n### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n\n> \\*_NOTE_: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n> buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n> directly within the `mdc-button` element.\n> However, the `mdc-button__label` class may become mandatory for all cases in the future, so it is recommended to\n> always include it to be future-proof.\n\n### Sass Mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass Mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`mdc-button-filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass Mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`mdc-button-container-fill-color($color)` | Sets the container fill color to the given color for an enabled button.\n`mdc-button-disabled-container-fill-color($color)` | Sets the container fill color to the given color for a disabled button.\n`mdc-button-icon-color($color)` | Sets the icon color to the given color for an enabled button.\n`mdc-button-disabled-icon-color($color)` | Sets the icon color to the given color for a disabled button.\n`mdc-button-ink-color($color)` | Sets the ink color to the given color for an enabled button, and sets the icon color to the given color unless `mdc-button-icon-color` is also used.\n`mdc-button-disabled-ink-color($color)` | Sets the ink color to the given color for a disabled button, and sets the icon color to the given color unless `mdc-button-icon-color` is also used.\n`mdc-button-density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`mdc-button-height($height)` | Sets custom height for button.\n`mdc-button-shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$mdc-button-density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`mdc-button-horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`mdc-button-outline-color($color)` | Sets the outline color to the given color for an enabled button.\n`mdc-button-disabled-outline-color($color)` | Sets the outline color to the given color for a disabled button.\n`mdc-button-outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `mdc-button-horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"The Material Components for the web 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/density":"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/button_5.0.0-canary.f16f15b8f.0_1579219628037_0.27103243920012576","host":"s3://npm-registry-packages"}},"5.0.0-canary.aa8e43e9a.0":{"name":"@material/button","version":"5.0.0-canary.aa8e43e9a.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"52fa3b083b90940434b970f708a439ebce53e58b","tarball":"https://registry.npmjs.org/@material/button/-/button-5.0.0-canary.aa8e43e9a.0.tgz","fileCount":17,"integrity":"sha512-u2Ttrro5TyEe0VLr7hyHGt7uyKCf5mofv6tte+kVzKziMAhrcThILApYdAQ/3dnfjDnhXuNT0jCMN+OtymMD1g==","signatures":[{"sig":"MEQCIE2ZXV6jndy2oUg21ny/ctEf3S+R2z476plxMZ8gMR+NAiAlZC9T+H22JiGtkgHLTuf2CgvtCmbHTi2HdGIuEGLIpQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":214319,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeIQGgCRA9TVsSAnZWagAACAIP/06wzxcOE17Q3TjsW3hF\nDQUPTB10oO4BTvjKcaoj252E/Wh20q1NfxMiSkXD/Hn+ctK5OQ11s7Y34yk2\n5AyTuXrq7IFKpqGKCKzwVO28Lp4PLFdFUeQlYe1cGDMLIrHGCg8fGpsIpWiJ\nBcLLTrvg7qNiBmPt7l7HHgiiI6lkhynhOYkY9FLdohdKNcbaSVjuXHTZc9bv\n/Hqo7C8soELkGn26fllELdsi0ughXxhbiRSukb98lYL2mLNsenMoRpKBB03D\nLr6joohKK+74HUudcYUvxYC/WkV7znzTee1F/gtCeecUOvKHGnPBlMW5u80u\ndFeN+YsTsb4hKdFrmwt4oAp9V9HGHTbxrLfVObcAOVb25YthZf1DqQ+yxeYS\nDhA2p1dVwHq4N6WRnni8wTWyHHxrOw6/lBaD2VQ23YZ0ebnuDc2RsBws8RpI\ntUM7t5qSfLI0OhoilDq4U2KHJHebJgoByewWu89vR0CUD+rhGyoWv5470JCi\ncmZPbInCgokhAO112sAE1CEz/EcOF/h3RdHyM0xz98IEdGdxvyblYYwlG1ZC\nIHO/t6AspiJvJbcGv6doPH+5MX0jzMfoPAEZ328/UQOXoL7suW3qCzdJ7ips\nAhXrPuKwZtAp7OCKD/VZZBByTcgKEE+jLrvxvOgTweQ8tp0HYMMIIPfZIYpP\nVjE7\r\n=ubD3\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n\n\nButtons allow users to take actions, and make choices, with a single tap.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/button\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n```\n\n> _NOTE_: Examples here use the generic `\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n> _NOTE_: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Additional Information\n\n### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n\n> \\*_NOTE_: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n> buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n> directly within the `mdc-button` element.\n> However, the `mdc-button__label` class may become mandatory for all cases in the future, so it is recommended to\n> always include it to be future-proof.\n\n### Sass Mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass Mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`mdc-button-filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass Mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`mdc-button-container-fill-color($color)` | Sets the container fill color to the given color for an enabled button.\n`mdc-button-disabled-container-fill-color($color)` | Sets the container fill color to the given color for a disabled button.\n`mdc-button-icon-color($color)` | Sets the icon color to the given color for an enabled button.\n`mdc-button-disabled-icon-color($color)` | Sets the icon color to the given color for a disabled button.\n`mdc-button-ink-color($color)` | Sets the ink color to the given color for an enabled button, and sets the icon color to the given color unless `mdc-button-icon-color` is also used.\n`mdc-button-disabled-ink-color($color)` | Sets the ink color to the given color for a disabled button, and sets the icon color to the given color unless `mdc-button-icon-color` is also used.\n`mdc-button-density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`mdc-button-height($height)` | Sets custom height for button.\n`mdc-button-shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$mdc-button-density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`mdc-button-horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`mdc-button-outline-color($color)` | Sets the outline color to the given color for an enabled button.\n`mdc-button-disabled-outline-color($color)` | Sets the outline color to the given color for a disabled button.\n`mdc-button-outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `mdc-button-horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"The Material Components for the web 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/density":"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/button_5.0.0-canary.aa8e43e9a.0_1579221407925_0.5308710549916538","host":"s3://npm-registry-packages"}},"5.0.0-canary.fe1f3ca07.0":{"name":"@material/button","version":"5.0.0-canary.fe1f3ca07.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"28d9cb23b3cbf31b156e21efeea377fd701774df","tarball":"https://registry.npmjs.org/@material/button/-/button-5.0.0-canary.fe1f3ca07.0.tgz","fileCount":17,"integrity":"sha512-UT2uV9ehhmf2YJHBB2VysPBSiaVekhVQHVyEKhNKGKXfNmDlTb7UOwqu64a+P9ylXOJ6IrxQIwXBDb29VbDlXw==","signatures":[{"sig":"MEUCIQC1fZCR5n1xyzoFc/YpyiRX3iA2R9vuCTd9IFwWS7acmQIgXUjlgqQ1MGOoftMwEeSSoNkp+bRWKNJGMqobyosNfII=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":214319,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeIQc2CRA9TVsSAnZWagAAn5oP/1MPnWrL5W/AVydKHtkf\nn/96duuDR4rPckDrGZ5g0W4pl1Ll298pH38KVZ49Vk0nyvzXPJAkLf32xulq\nWUt6GvvAl+ZNFvPXE+vHCYMXZ7Yrd/4UZRtuBrc3w/1eYcvBQxjIX4eJ62HH\n1yCbeaQF+U7XC+5xQd/gMkDy8olFlV4HLSEJdDLm88ivNJh8kYCn6Dnw7e6p\nka7BbzMZwobf9j65047u23FnCsapAa9d0UC9vELqZ62Wp2HiM6WBgAIL+kO7\nUgO4D4EdHqYaN5QaAS7GC+cvJMy3+05LDC9Jb0PYZ1XGXRPbmJpFs6TMZTQK\nRFiFBRRPJVUbE0GNSYE9hfpaH0exNwhbuORqDApzDCjvgXCFV8Q4AWRlNC7z\nwXfYIdMGDXAI7HXg+ApFG7wiWEsGRyNVmC1EQMFd7XAs8iBdraqutUHieqUE\nK5zJDgpxNM+db/axBGUQ/H5ws6j8ngQBW1RmEIVYB1heF0bXoIjuKZppPW8N\ntDmrD6+TJ4V05jpe5UIsJ6mm/yjN9QGhyXLc2tG7WQs5+SGCEArNt2t17vRe\ngD9B3C7cIS6CmSXrO46kyr/yUTb2jnCh/6udsRKS6WeqCh+lmDYfBTjq9J+x\nKKZEbCJJmLCwkY34Nk8oHd8k4ux6nx0DWBG2pQ7p2IhKhLiZisRc9C/vlPpZ\niKBG\r\n=Apzm\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n\n\nButtons allow users to take actions, and make choices, with a single tap.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/button\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n```\n\n> _NOTE_: Examples here use the generic `\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n> _NOTE_: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Additional Information\n\n### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n\n> \\*_NOTE_: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n> buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n> directly within the `mdc-button` element.\n> However, the `mdc-button__label` class may become mandatory for all cases in the future, so it is recommended to\n> always include it to be future-proof.\n\n### Sass Mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass Mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`mdc-button-filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass Mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`mdc-button-container-fill-color($color)` | Sets the container fill color to the given color for an enabled button.\n`mdc-button-disabled-container-fill-color($color)` | Sets the container fill color to the given color for a disabled button.\n`mdc-button-icon-color($color)` | Sets the icon color to the given color for an enabled button.\n`mdc-button-disabled-icon-color($color)` | Sets the icon color to the given color for a disabled button.\n`mdc-button-ink-color($color)` | Sets the ink color to the given color for an enabled button, and sets the icon color to the given color unless `mdc-button-icon-color` is also used.\n`mdc-button-disabled-ink-color($color)` | Sets the ink color to the given color for a disabled button, and sets the icon color to the given color unless `mdc-button-icon-color` is also used.\n`mdc-button-density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`mdc-button-height($height)` | Sets custom height for button.\n`mdc-button-shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$mdc-button-density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`mdc-button-horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`mdc-button-outline-color($color)` | Sets the outline color to the given color for an enabled button.\n`mdc-button-disabled-outline-color($color)` | Sets the outline color to the given color for a disabled button.\n`mdc-button-outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `mdc-button-horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"The Material Components for the web 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/density":"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/button_5.0.0-canary.fe1f3ca07.0_1579222838043_0.2974584794833295","host":"s3://npm-registry-packages"}},"5.0.0-canary.d405af26b.0":{"name":"@material/button","version":"5.0.0-canary.d405af26b.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"015e4eff988e37333680d3491cb2ea39454f3e73","tarball":"https://registry.npmjs.org/@material/button/-/button-5.0.0-canary.d405af26b.0.tgz","fileCount":17,"integrity":"sha512-caWaVyZipU0a+dLeldkz6O4eQE04+X+dP7PZgv34t4WQfyEQNYgkNyifAAsELW9F/UxeCPbWHvGN3aadtg2xRw==","signatures":[{"sig":"MEUCIC5Bf4/LULtR8wVjTSuf5+3QrDWZ/ysdjPCIKTLg3s0GAiEAnhYTVsG9g8eAlKBhqECi61txXLgfO1Zs91N01ZH/fgE=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":214319,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeIfoyCRA9TVsSAnZWagAA4/EP+QAHZ/u8/YH8sKmnlRsi\nfGjEoQQPW5IuLawdq1s94e1Bkn0D3jwxihi0+pm/kUh+4uTyMx7WLQyDGUzz\nwADk+cR3Zu+u3Ce4Ea4/SkTnMZWAelw7aO51JTXNF93nTEuFsU0yLS8hdnRi\n5lnwpaiadaV+dsPG5MrScfK2MgvEYYyHn7thVliqhfkc3+4RbrKxTQJrwk20\nXFltXoc2C+STP0lM45sAV8bBadVqLr4sCs6OTVYKj4WwwloyZTE8/i9ggi5r\nnebO2Bth4mWEB/kegDAJN5iKFznPBhwKjFkrDcW7ruO6jJQp2SQg4engoCVx\nhZmx7dyLrlBIX+KsyFTri5Nv5ANosGnQzu4uwaiHlSW62qvLuoeIoWBz1CXh\nFvHnrggcbhAZ+7TJXHJEMb6+MuVwPmWOUwv4YfuMwYFRbvyQRHbgIPoEITXn\n6fytdiS2ZdYIYCzBjHWI/24PvUmVK/BErw/HpILiUQkQGvJHL1uNmbAixRXW\njSFzINtw8h0cok5OBj+XRGnuS8CtWnLRneR10ARIzX1r8Yu1MOnysUtZ/tAs\nr/ubwfr589DAui0eq1uwua+ITd4sq1a9rRXhRUwipjSyfhiyArLkx13puqw0\n+rJBEnfj42LKw0u2gXlDyLu6ELezEH0P0lf/1xb8r8qlmowo5urVYz/S16pC\nPmHR\r\n=XliR\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n\n\nButtons allow users to take actions, and make choices, with a single tap.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/button\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n```\n\n> _NOTE_: Examples here use the generic `\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n> _NOTE_: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Additional Information\n\n### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n\n> \\*_NOTE_: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n> buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n> directly within the `mdc-button` element.\n> However, the `mdc-button__label` class may become mandatory for all cases in the future, so it is recommended to\n> always include it to be future-proof.\n\n### Sass Mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass Mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`mdc-button-filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass Mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`mdc-button-container-fill-color($color)` | Sets the container fill color to the given color for an enabled button.\n`mdc-button-disabled-container-fill-color($color)` | Sets the container fill color to the given color for a disabled button.\n`mdc-button-icon-color($color)` | Sets the icon color to the given color for an enabled button.\n`mdc-button-disabled-icon-color($color)` | Sets the icon color to the given color for a disabled button.\n`mdc-button-ink-color($color)` | Sets the ink color to the given color for an enabled button, and sets the icon color to the given color unless `mdc-button-icon-color` is also used.\n`mdc-button-disabled-ink-color($color)` | Sets the ink color to the given color for a disabled button, and sets the icon color to the given color unless `mdc-button-icon-color` is also used.\n`mdc-button-density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`mdc-button-height($height)` | Sets custom height for button.\n`mdc-button-shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$mdc-button-density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`mdc-button-horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`mdc-button-outline-color($color)` | Sets the outline color to the given color for an enabled button.\n`mdc-button-disabled-outline-color($color)` | Sets the outline color to the given color for a disabled button.\n`mdc-button-outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `mdc-button-horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"The Material Components for the web 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/density":"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/button_5.0.0-canary.d405af26b.0_1579285042324_0.15150195831181312","host":"s3://npm-registry-packages"}},"5.0.0-canary.6e857aae2.0":{"name":"@material/button","version":"5.0.0-canary.6e857aae2.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"04e6fbbac2b285dfb26853f19fff3ced7aba0e6d","tarball":"https://registry.npmjs.org/@material/button/-/button-5.0.0-canary.6e857aae2.0.tgz","fileCount":17,"integrity":"sha512-NXiuyCF1+7o5lsP6JdtyAAJKPeNOI+niuEJHpBNfZngOgmWZseo96POqVCFp5LdeDRgMvCAb1CIUyjteHmPWFA==","signatures":[{"sig":"MEUCIQD5piLElQDUQsEWFN/OawH1WmHxYZwd7Z3n6akATbVr4QIgXqYG5o2FQDwR8tQQR1hpQqizh5BSyniFrLKDmk0ZITI=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":214224,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeIfsHCRA9TVsSAnZWagAA6TIP/2qqMGb+VqJTExo18xdK\nhtmKXgx22ZHGhjrmnSGc6eiaGL+/uty32PYvJXCt4Df/O4mWL4X/LJnoAHFC\nEFT56+aX2WLmXCznl2daZK5gKu3BO8EtgK5lioO3NknhN7zfTST1g/6AnMSH\nxl7GzrW/bDFfh/QVRW3XpTAEyFkOYPIv5UbU8YlvozVHaTXPSidx96TZC1FX\nh8XssFsI73Xg38FpGs5SbS4WL1HAMjlH5K0qZ9O22VMGpenDMsXx6dVceMVK\nN7TKrQn7GPl8OZ8JkbwRV7VkM0JNrtAHMd9kBV9XciCT8NQERKPJl7vVnjIp\nfYNKQmA8/boBt3VpD24dJ2SzT1HkB4Vk/sCJdsTK5YgzWaarF4vI93T4MDRE\nvlWkMEmy99Qn4R5sNF917VkzzpvUrHvuxcTsU13nCBGuttTSgcliPqDLGF7x\nXUj4BTxq9OwC61miLfyiN8yYqU03rzmcwwL4sxbTPUuBnmDTVYzwtMuEJNi0\n/MZB0jt+uSgg5ePINUg9PRruAAI/jWx0mkhhO2vx51toVdP6CixKu3HeY0cC\nwz0zDTpnXXTYqtFkEf+MiZ3zLw+S5trG6VOz6IQQyA1PDoKf1Ny0PE4HnP99\n1nUAOGlmTNCTjtm6lNIr/HDKwJnc0dTNtu8nIwrQIAMc8MXQci6Hq7fDW3If\nN7KG\r\n=ybwC\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n\n\nButtons allow users to take actions, and make choices, with a single tap.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/button\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n```\n\n> _NOTE_: Examples here use the generic `\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n> _NOTE_: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Additional Information\n\n### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n\n> \\*_NOTE_: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n> buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n> directly within the `mdc-button` element.\n> However, the `mdc-button__label` class may become mandatory for all cases in the future, so it is recommended to\n> always include it to be future-proof.\n\n### Sass Mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass Mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`mdc-button-filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass Mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`mdc-button-container-fill-color($color)` | Sets the container fill color to the given color for an enabled button.\n`mdc-button-disabled-container-fill-color($color)` | Sets the container fill color to the given color for a disabled button.\n`mdc-button-icon-color($color)` | Sets the icon color to the given color for an enabled button.\n`mdc-button-disabled-icon-color($color)` | Sets the icon color to the given color for a disabled button.\n`mdc-button-ink-color($color)` | Sets the ink color to the given color for an enabled button, and sets the icon color to the given color unless `mdc-button-icon-color` is also used.\n`mdc-button-disabled-ink-color($color)` | Sets the ink color to the given color for a disabled button, and sets the icon color to the given color unless `mdc-button-icon-color` is also used.\n`mdc-button-density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`mdc-button-height($height)` | Sets custom height for button.\n`mdc-button-shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$mdc-button-density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`mdc-button-horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`mdc-button-outline-color($color)` | Sets the outline color to the given color for an enabled button.\n`mdc-button-disabled-outline-color($color)` | Sets the outline color to the given color for a disabled button.\n`mdc-button-outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `mdc-button-horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"The Material Components for the web 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/density":"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/button_5.0.0-canary.6e857aae2.0_1579285255502_0.23516281824905594","host":"s3://npm-registry-packages"}},"5.0.0-canary.e2e764f7c.0":{"name":"@material/button","version":"5.0.0-canary.e2e764f7c.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"af0d06aeb0d0cfc951256d27405e049458a3e67a","tarball":"https://registry.npmjs.org/@material/button/-/button-5.0.0-canary.e2e764f7c.0.tgz","fileCount":17,"integrity":"sha512-1ypkJfSS8vDHUWWkfrgjR6JXcxm3nyJ1Ig0PNR5FjVp85MJYFlSuk59GNH9CqpPM30OqykUu0yupQhyxx7OtTg==","signatures":[{"sig":"MEUCIAt5Tk7sFt914XXhaI5sU6EPt/Zs1ZReUANLpblOaCmqAiEAt4QIU64T7JBztqdrE9oD/OZhQmlQfqu87ueGyG2Myqk=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":214224,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeIf6YCRA9TVsSAnZWagAAA84QAJNEmDv+QT78LkUFEzss\nkI2I3QpaGh8cncKnvZFaG9+n+gwIwfZKQRClJlAqNT8ZBZdAZ8Hsb61Dqcv+\npl/DVfT/Z+dFaPN35mvxLGItonghrztQfsMVp/Lp19SOkzxtdGKVqLjwPDy/\nV6cYz4riqqndfiX21cxUv+s7A1YwZXBfDgMfUMBrxkDAbt4UWuo8g+7m3xwJ\nPFDwmzAyYqQD/WmxlBvEsB6//5LztpR4VN2QPjRle155NvjM4cxJ75clJmUB\n/h9mqcs+8R6f/8NvA0U6dZ8OcGUNBZsUXPa3vD9mHBSD0W2lj7xOtx26TF5x\nGy1iKpognIYF4xomNtEgOOPtoDYQHbLDfEex7HvbtU3pYYx44AFHJ88dhyFJ\nWjLn08VEItERhNDPvfHqibQlR3t1Bc5kpHRRqocqJYSSZcriVOeP0dG3jGGI\nq2f3D9BZ4H1yZhgQU7Dg1WFo4bAetMhschjFgdbVA8tk5YYGiVxwaLFjPyb6\nHCXbubGarkuEkqbiqG9qMCoy+zo5xWbscKNIm81yP7oOIgzMTS2thfois6vx\nS38sHstwyU1lnul7ozkgWcR235QkOvTDqTMwZtFw34vPHo+G2CIP5/awMtmW\nFHjpERyqd8JZFiKBqyIIA8UUFbgGCsJ5iKZkwPFQ80tDksN9x+w/KvR4p3gc\nlBcv\r\n=q5R6\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n\n\nButtons allow users to take actions, and make choices, with a single tap.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/button\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n```\n\n> _NOTE_: Examples here use the generic `\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n> _NOTE_: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Additional Information\n\n### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n\n> \\*_NOTE_: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n> buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n> directly within the `mdc-button` element.\n> However, the `mdc-button__label` class may become mandatory for all cases in the future, so it is recommended to\n> always include it to be future-proof.\n\n### Sass Mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass Mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`mdc-button-filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass Mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`mdc-button-container-fill-color($color)` | Sets the container fill color to the given color for an enabled button.\n`mdc-button-disabled-container-fill-color($color)` | Sets the container fill color to the given color for a disabled button.\n`mdc-button-icon-color($color)` | Sets the icon color to the given color for an enabled button.\n`mdc-button-disabled-icon-color($color)` | Sets the icon color to the given color for a disabled button.\n`mdc-button-ink-color($color)` | Sets the ink color to the given color for an enabled button, and sets the icon color to the given color unless `mdc-button-icon-color` is also used.\n`mdc-button-disabled-ink-color($color)` | Sets the ink color to the given color for a disabled button, and sets the icon color to the given color unless `mdc-button-icon-color` is also used.\n`mdc-button-density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`mdc-button-height($height)` | Sets custom height for button.\n`mdc-button-shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$mdc-button-density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`mdc-button-horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`mdc-button-outline-color($color)` | Sets the outline color to the given color for an enabled button.\n`mdc-button-disabled-outline-color($color)` | Sets the outline color to the given color for a disabled button.\n`mdc-button-outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `mdc-button-horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"The Material Components for the web 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/density":"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/button_5.0.0-canary.e2e764f7c.0_1579286168247_0.7684665712227197","host":"s3://npm-registry-packages"}},"5.0.0-canary.7ef986a87.0":{"name":"@material/button","version":"5.0.0-canary.7ef986a87.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"03e3310073c8375d784cdb4eaae05ca097e2bf9a","tarball":"https://registry.npmjs.org/@material/button/-/button-5.0.0-canary.7ef986a87.0.tgz","fileCount":17,"integrity":"sha512-/OiiWvGcph8kQT0wvxzuyeVAAmTMDX8BgQul5E+VUTSlBTcX5Z6Bvb3ueng4I+mtnKI00tj4tUQupnSutHbvXw==","signatures":[{"sig":"MEQCIFcXJYyw2TlADEb0AlKzHScDgIjhfkpHXuh9oUkJKYSiAiBcdrVlzgts8HLXjd77ovCzNXQKRqa3UgZbksjaasjT1A==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":214224,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeIgt0CRA9TVsSAnZWagAAjd8P/2znoOA0vtrXjBwbJ2zF\nOhhblMY4wow6rAyOqV/E8u2qdx61+IGolvgZGwp3080ozVYlwj6B4ounMCcr\noAYDfguwWyrUveRHd3OfjqB/npOLBqX0cnTJHYwRdchuHzNifqASBaijJHPO\n4wTcQqeoy6T49jMdzFR2mWsofl3IvAShTp7UeuE6vC+2v4/1KdeDK2XXFiRI\nF2qLztzUB5DNB/Uk/BaQnb8hDo6WTG3wZPquOeXEakMON3GjKSSxHvbld8RG\ndwHDO53sQxP+NSez+/ATFWGTlZ2enGwyQkQ+ItoGrhdC6+ne+LA54XrzXpbh\nI95XI8LFQF6vD7KdsYhMwNehRttX+wzj9smAa61jPQ81p+fu78Q8kCjHS2ba\nBFTJmzIDQf6Yi1vByReAbWHfSv43vp4Yv2daLFDyBFTAm/TV0QTFmpj7R5zN\nnhNe2OEeLZ5e86+1rMEERfTx4xfMO8EYqO7k15lp8zrgcF6eLticL5FSKpFP\n6dm89JHZNmoUed+1GG6IAX73qel6O0bD+O20I5pMeEDWhIhbr00vjYwQ6kyc\n1Y6b87BRRQi8fYKLGHy54G5rlvI8CIr/NkciB/g0SPYwT5Ze5KrCCqramwMy\njBPYM0xtWgMaCSXzqfCFgo17yGimmVcFP+RLIOYaxsk2T4kIushR5H3RHwZj\nVm/D\r\n=ewrg\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n\n\nButtons allow users to take actions, and make choices, with a single tap.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/button\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n```\n\n> _NOTE_: Examples here use the generic `\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n> _NOTE_: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Additional Information\n\n### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n\n> \\*_NOTE_: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n> buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n> directly within the `mdc-button` element.\n> However, the `mdc-button__label` class may become mandatory for all cases in the future, so it is recommended to\n> always include it to be future-proof.\n\n### Sass Mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass Mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`mdc-button-filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass Mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`mdc-button-container-fill-color($color)` | Sets the container fill color to the given color for an enabled button.\n`mdc-button-disabled-container-fill-color($color)` | Sets the container fill color to the given color for a disabled button.\n`mdc-button-icon-color($color)` | Sets the icon color to the given color for an enabled button.\n`mdc-button-disabled-icon-color($color)` | Sets the icon color to the given color for a disabled button.\n`mdc-button-ink-color($color)` | Sets the ink color to the given color for an enabled button, and sets the icon color to the given color unless `mdc-button-icon-color` is also used.\n`mdc-button-disabled-ink-color($color)` | Sets the ink color to the given color for a disabled button, and sets the icon color to the given color unless `mdc-button-icon-color` is also used.\n`mdc-button-density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`mdc-button-height($height)` | Sets custom height for button.\n`mdc-button-shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$mdc-button-density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`mdc-button-horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`mdc-button-outline-color($color)` | Sets the outline color to the given color for an enabled button.\n`mdc-button-disabled-outline-color($color)` | Sets the outline color to the given color for a disabled button.\n`mdc-button-outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `mdc-button-horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"The Material Components for the web 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/density":"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/button_5.0.0-canary.7ef986a87.0_1579289459644_0.13552582756108067","host":"s3://npm-registry-packages"}},"5.0.0-canary.29402e2d4.0":{"name":"@material/button","version":"5.0.0-canary.29402e2d4.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"8a3cd092273881d6ff5ce9e4dede0e7ee40d1aea","tarball":"https://registry.npmjs.org/@material/button/-/button-5.0.0-canary.29402e2d4.0.tgz","fileCount":17,"integrity":"sha512-R3ki1rozgM6fipCP/gcwUrCzwEc7hXS3XFWFErVB0QljU26zRVqWwsgCkHgMLrbBB77lXp51CW6n1BpHagLo5Q==","signatures":[{"sig":"MEQCIEkhQkzxxSy+tHb4NKdHEF3e5bEeql1/5WhgV7HpCFHFAiBkcVtY6b7aIrovxtPJSqncIvF+6rKV/QlPNIeOqkgWUg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":214226,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeIhueCRA9TVsSAnZWagAA/PkP/3xw6CpxONmh6D0kiJeB\nUkBH1wSaRu0CnWDm1Am5JNfoBd5BZFbgEOz8H4oRNzaArac/9f4hNP+ORO+F\nG4sFfnb8ZWJFWfLtaw04KV1AeOxPP3DY5q0d4neSbiSarLjVIT/P3g9dh2Ye\ncBm+7zH32MjBQvDaKae07CkfLzA8S2KJj+A7MPC1XEQV71/A82vAUsWz5TZe\n0Xa0/mVip6lrLONT27i6Xj7Uhl7MXhJhwb51faWbyPLMCEX5xZMz13Sde3l6\nEozYLy4d2zBW390hkjQZZ3PsNtk11yV+CvoX2rc9NN5JfcYndCwSNjT+WnmN\nKLMJDt1/GjCEDOh2/B0Mb7Qo4OzaRF2PYyYAqq8CkwIsPiHDrte/X1KLrDW6\nmbf6syy3QMUPguey+hmdQlZtYnCjCI1bHbBp3toYHvckz2Dfk7r6vgL62IK+\nuligZzxT9CvGAWMzQM46wEvpsY1p1g+cPh8IeOr+x9xKvuiQ+JUWxs40ktyj\nuUxobgquNZdyUcGCGVQttWu8PbqZiGb9Yo6g35eIyIm9/Jf3NIx6Q/Bwpgw5\n8BUkDwHyW6qmlbBq1doKnMSimD3VzdcVf+OdKMf0Ch7twq0m+vPB/n2D3RWD\nkLx9tDKDKkCLpVgEhJXmraq+OjLHT6mLSoe20rW2DJpUDV1s/gnEXoQk7RWq\nZjsR\r\n=MCfs\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n\n\nButtons allow users to take actions, and make choices, with a single tap.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/button\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n```\n\n> _NOTE_: Examples here use the generic `\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n> _NOTE_: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Additional Information\n\n### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n\n> \\*_NOTE_: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n> buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n> directly within the `mdc-button` element.\n> However, the `mdc-button__label` class may become mandatory for all cases in the future, so it is recommended to\n> always include it to be future-proof.\n\n### Sass Mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass Mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`mdc-button-filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass Mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`mdc-button-container-fill-color($color)` | Sets the container fill color to the given color for an enabled button.\n`mdc-button-disabled-container-fill-color($color)` | Sets the container fill color to the given color for a disabled button.\n`mdc-button-icon-color($color)` | Sets the icon color to the given color for an enabled button.\n`mdc-button-disabled-icon-color($color)` | Sets the icon color to the given color for a disabled button.\n`mdc-button-ink-color($color)` | Sets the ink color to the given color for an enabled button, and sets the icon color to the given color unless `mdc-button-icon-color` is also used.\n`mdc-button-disabled-ink-color($color)` | Sets the ink color to the given color for a disabled button, and sets the icon color to the given color unless `mdc-button-icon-color` is also used.\n`mdc-button-density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`mdc-button-height($height)` | Sets custom height for button.\n`mdc-button-shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$mdc-button-density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`mdc-button-horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`mdc-button-outline-color($color)` | Sets the outline color to the given color for an enabled button.\n`mdc-button-disabled-outline-color($color)` | Sets the outline color to the given color for a disabled button.\n`mdc-button-outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `mdc-button-horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"The Material Components for the web 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/density":"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/button_5.0.0-canary.29402e2d4.0_1579293598006_0.4378928585046591","host":"s3://npm-registry-packages"}},"5.0.0-canary.2b3ec563c.0":{"name":"@material/button","version":"5.0.0-canary.2b3ec563c.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"f2d901d3a903e5dcd704a9544d2e46b5bf01fc82","tarball":"https://registry.npmjs.org/@material/button/-/button-5.0.0-canary.2b3ec563c.0.tgz","fileCount":17,"integrity":"sha512-M65yfIJMC2zPpzAULEtGWoPs5FznahgOJu/Yjs6AfZVzHf1yMNoCAZlwrsQzqrdjNH/4EPWcnj6hpttyAJHNHw==","signatures":[{"sig":"MEUCIBXbDQnsE18bwgDBEGTPJsvn6RTIGGifup+wAQZpt1ZgAiEA966LveUM6Trf9hJnr+s1oybkslVCKm2Op76NUwSo07k=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":214226,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeIj8sCRA9TVsSAnZWagAA6D4P/j4XJSy39y9ZtpCI8oZL\nAMvrJZ3vIlygjMdgnIAgqbSagygt5G+2gofJioE703pUBibIw5k+FSU4Kmqh\nu1M/8hwy9BO94qglnZP9TT/EKcWwX+5Qf/DKprF3xFi4Xc8GBJ171WUBJops\nsiwclcKf49ttYX5fm12A3DM9jIgCesFA3QCOhsR/2cQijtYH/XEFGeoobkhS\nOIKS01n1ubj3EbneKAS41sHaLQj1tVt2jVedcbyra8Hj4KKmEEOir6zRMxAb\nZ1GHuMZ9cD2ccoAiYM0ktCE7/pKSWHZxpU331fTJBmev4hW5x5Px/T6js3Sg\npJeZU6EsJtpyRDZ7kQKGcQLBr44y27Yw1uKBO6UMmSKBS+WxB2s5ZnmXrmIE\nwuK48cnHDloKpXW6V3dpFt/Eft2ZPOSEFu1ChxHq8mh71by5F/7cU16i9Bb7\ntWN+kBQKHkwsSM/W18gAg2K3RJ9gxJ+9kUFNHWpCZtV47B/nI3fDvfCzpo1I\nl/4R6SQD7gxKTu04Z0e9KigUsfdSBaZaKuDMm0VNQlIHLbMJQTvlit4yje/U\nAcKxBbolLjs0Hr3xEQV5Eh7RVHjZqOGIvcjnDbgb0uAojUpZC7Bn9b53iodO\nB0pIpijRERLOvG0P24owL8+5k26ltJlv6/rSX4GA40k67xCts96we64jzC72\nz0Cj\r\n=atym\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n\n\nButtons allow users to take actions, and make choices, with a single tap.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/button\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n```\n\n> _NOTE_: Examples here use the generic `\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n> _NOTE_: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Additional Information\n\n### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n\n> \\*_NOTE_: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n> buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n> directly within the `mdc-button` element.\n> However, the `mdc-button__label` class may become mandatory for all cases in the future, so it is recommended to\n> always include it to be future-proof.\n\n### Sass Mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass Mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`mdc-button-filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass Mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`mdc-button-container-fill-color($color)` | Sets the container fill color to the given color for an enabled button.\n`mdc-button-disabled-container-fill-color($color)` | Sets the container fill color to the given color for a disabled button.\n`mdc-button-icon-color($color)` | Sets the icon color to the given color for an enabled button.\n`mdc-button-disabled-icon-color($color)` | Sets the icon color to the given color for a disabled button.\n`mdc-button-ink-color($color)` | Sets the ink color to the given color for an enabled button, and sets the icon color to the given color unless `mdc-button-icon-color` is also used.\n`mdc-button-disabled-ink-color($color)` | Sets the ink color to the given color for a disabled button, and sets the icon color to the given color unless `mdc-button-icon-color` is also used.\n`mdc-button-density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`mdc-button-height($height)` | Sets custom height for button.\n`mdc-button-shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$mdc-button-density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`mdc-button-horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`mdc-button-outline-color($color)` | Sets the outline color to the given color for an enabled button.\n`mdc-button-disabled-outline-color($color)` | Sets the outline color to the given color for a disabled button.\n`mdc-button-outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `mdc-button-horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"The Material Components for the web 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/density":"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/button_5.0.0-canary.2b3ec563c.0_1579302699761_0.0617724082486355","host":"s3://npm-registry-packages"}},"5.0.0-canary.e8a993677.0":{"name":"@material/button","version":"5.0.0-canary.e8a993677.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"eae9505745897ddda1836bdac17a8b9894eaac84","tarball":"https://registry.npmjs.org/@material/button/-/button-5.0.0-canary.e8a993677.0.tgz","fileCount":17,"integrity":"sha512-2yCjCUuBkSa5Fi2ExwcFcznhEIJT+fEd44E9vgT5R6+EOkjbkSvA24kzE1m3tgBqfZ1ey54XECVyxpCVPoMrBw==","signatures":[{"sig":"MEUCICqnboxWV+t+c08zaNQDMkXQ4EdJNBQmjCLzlbdPWSnsAiEA0z843zoj+B38Pv6S9ElgXFdSp1TEBymqQ5YkOferlNA=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":214226,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeJyvACRA9TVsSAnZWagAAr3AP/2OWxDGQ6MPD/AbX87XS\nzZXXZd2ezBiFP9Dd4A3zILQx215RogkCZOqQcBLhrfSQNLHMCMg3GNse02z4\nBzAlcVFlWkwu0eB4jxkgz21nvZnTw9krMzlmR5hQ+tYyX/tlmel55y2gdkbf\nY1xSBoRUOOwgzT7bv/wN1jrCF4GHATwBkSAE+zaTneUDv3HcBgr4rBaGxgIh\ndvbNFCsuo3McgdOloXezeGuHwaLHSCpGIYq7HaJSRZf1nNSXaEnBRn6nXA1F\n2+qx9knRfB7qhtluBDb9W/ItrCLM75xjgyw3qz5suJBMTqqqzGL/1pKqT5Ht\nWGDhHKPs1W7ik0H8PaxJZFL0LxeJlDrChnls+9wYsgC6FicLesPH/U3G1GS/\njj+jfLhAFvglSCYLh+WLcZkrQ8zmwBP9yMIKdKiYoUrhOdKsf1Ehylok0cPf\nJs2srEPJZzafw+LrElndyXDoX2oyGvnsBkGo717ZVf/njWGhiu6ryUhYu5cX\nbObfQto+XFP10Y78GG9pvMc7FdA6+jIieltW6UUQHfopyFpG1/OGlSSiFqI2\nTV0sUc30VDnW2GYaCRqPNB+MsHkvVp7W8MpxEGKXUChIwGxaW9SP/+b/+PkU\ntqu2TAc+oXYK/VGIRj99+/PCxBoKtmDWXeIfJnYuhjDMbOBotzSc4/Wg5Rbi\nVI1W\r\n=g9MW\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n\n\nButtons allow users to take actions, and make choices, with a single tap.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/button\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n```\n\n> _NOTE_: Examples here use the generic `\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n> _NOTE_: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Additional Information\n\n### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n\n> \\*_NOTE_: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n> buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n> directly within the `mdc-button` element.\n> However, the `mdc-button__label` class may become mandatory for all cases in the future, so it is recommended to\n> always include it to be future-proof.\n\n### Sass Mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass Mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`mdc-button-filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass Mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`mdc-button-container-fill-color($color)` | Sets the container fill color to the given color for an enabled button.\n`mdc-button-disabled-container-fill-color($color)` | Sets the container fill color to the given color for a disabled button.\n`mdc-button-icon-color($color)` | Sets the icon color to the given color for an enabled button.\n`mdc-button-disabled-icon-color($color)` | Sets the icon color to the given color for a disabled button.\n`mdc-button-ink-color($color)` | Sets the ink color to the given color for an enabled button, and sets the icon color to the given color unless `mdc-button-icon-color` is also used.\n`mdc-button-disabled-ink-color($color)` | Sets the ink color to the given color for a disabled button, and sets the icon color to the given color unless `mdc-button-icon-color` is also used.\n`mdc-button-density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`mdc-button-height($height)` | Sets custom height for button.\n`mdc-button-shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$mdc-button-density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`mdc-button-horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`mdc-button-outline-color($color)` | Sets the outline color to the given color for an enabled button.\n`mdc-button-disabled-outline-color($color)` | Sets the outline color to the given color for a disabled button.\n`mdc-button-outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `mdc-button-horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"The Material Components for the web 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/density":"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/button_5.0.0-canary.e8a993677.0_1579625407796_0.5170432732200205","host":"s3://npm-registry-packages"}},"5.0.0-canary.cd4903304.0":{"name":"@material/button","version":"5.0.0-canary.cd4903304.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"f7fe7635ae84b0b581924fe5d07f9d9b25caa6ac","tarball":"https://registry.npmjs.org/@material/button/-/button-5.0.0-canary.cd4903304.0.tgz","fileCount":17,"integrity":"sha512-Xq7Ii2IYT3iGh26+u6xK2E7NxV4aNVFf63S56khWAWTCu5fvsz7dXR477OgAnY2RWHnOdsDQAmNZnmXwAV+7Uw==","signatures":[{"sig":"MEUCIQCSdJ7m7ElBVL/zeCVf6wJ6pLbuzYOLGesWsrbq0S1Q6AIgRU9+537byIgLLTIU72OpEfocIKwn53Xyn3OgeNI0vjE=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":214226,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeJ28YCRA9TVsSAnZWagAAE7QP/0vj6KeKJHqjMgrhXqU3\nHblbx2qPGzfIGesWSVsqOoIi5T9l70N4IEFYocWbITdYaIm3+kSeEM/mhQoA\naMA+YK5dXk/FYdjFy74SdEl7vilk4l7wtLkixopj7oKJvkTG8XIY/ySzxg45\nTM1BH2R7Pk3FWgpcIG+xA7G7PwIoo6RfEwut1e0zxrkwyCPUI/QtKSdrVAlg\nvqEKT4ZEa+3/qWjDYc3pt/9ppGGSUtBOfHoYtRAzyryDwwlX4z/PGiG2r1EF\nqM+Dy9jyfudJExQsSOo0/VyB29JwUkAzDy6oZ1CT/9VKh1AQgaUR9o57yphK\nggJXU/IXd74Xqmbmx5mHvpv9IM/rAurr4dIycwWOOPoUZxSgE06v3XsKNBlo\nOP91L60IA/0mAhtkz0HfHqYWD1wVtV2HliT+hduQ/mT0eU31tdcFqBzhhAua\ndKIJ0gmcYeHiU0XYa0XIhLVVryFjqcwFIsi5zOtg2JF8UtA0mziuhKXwiccU\n3Gfa6eCM+vE+ZZk5HiZkOXPxQ2zTwFUjTqK54eR0O1ykoNsiJ0JRCAd9Pl7e\nGZ9gsCnOfdp4i900VZD+TyA5fH9ybqQIc7+mAY7hB2xmplJE8cM+vKi0Zy4y\n8pLk7ysj7K12Ot+p9plXdhMuhyEkycN0DB20ZVdSbL35d1eyoiS1hD3aJr90\nRng2\r\n=N2e2\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n\n\nButtons allow users to take actions, and make choices, with a single tap.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/button\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n```\n\n> _NOTE_: Examples here use the generic `\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n> _NOTE_: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Additional Information\n\n### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n\n> \\*_NOTE_: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n> buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n> directly within the `mdc-button` element.\n> However, the `mdc-button__label` class may become mandatory for all cases in the future, so it is recommended to\n> always include it to be future-proof.\n\n### Sass Mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass Mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`mdc-button-filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass Mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`mdc-button-container-fill-color($color)` | Sets the container fill color to the given color for an enabled button.\n`mdc-button-disabled-container-fill-color($color)` | Sets the container fill color to the given color for a disabled button.\n`mdc-button-icon-color($color)` | Sets the icon color to the given color for an enabled button.\n`mdc-button-disabled-icon-color($color)` | Sets the icon color to the given color for a disabled button.\n`mdc-button-ink-color($color)` | Sets the ink color to the given color for an enabled button, and sets the icon color to the given color unless `mdc-button-icon-color` is also used.\n`mdc-button-disabled-ink-color($color)` | Sets the ink color to the given color for a disabled button, and sets the icon color to the given color unless `mdc-button-icon-color` is also used.\n`mdc-button-density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`mdc-button-height($height)` | Sets custom height for button.\n`mdc-button-shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$mdc-button-density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`mdc-button-horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`mdc-button-outline-color($color)` | Sets the outline color to the given color for an enabled button.\n`mdc-button-disabled-outline-color($color)` | Sets the outline color to the given color for a disabled button.\n`mdc-button-outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `mdc-button-horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"The Material Components for the web 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/density":"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/button_5.0.0-canary.cd4903304.0_1579642647609_0.0461736059693687","host":"s3://npm-registry-packages"}},"5.0.0-canary.7e4b04b25.0":{"name":"@material/button","version":"5.0.0-canary.7e4b04b25.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"02590aa993b5a1b6a2284d93abc9bba7127aa13a","tarball":"https://registry.npmjs.org/@material/button/-/button-5.0.0-canary.7e4b04b25.0.tgz","fileCount":17,"integrity":"sha512-6WJK6LN64Zuqk+antQgAWc65gQAJi8iE7e1CEv/LKFqPSP8WW8A9HuUeCKLrLGXq87L1GcIdsQUN6mnfLW1/jQ==","signatures":[{"sig":"MEUCIQCD5dZtUeV09SL/86eWAyFYtbgNWeCMabMD+m2qYHj+ngIgBzwfaZ4uQA9XLEvtc7yUABLvLcgVk7NmYk0cDk7i8CU=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":214226,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeJ39HCRA9TVsSAnZWagAANoQP/2jI+sd9JaCeuLUiUyyu\nIsQzA+NIEuMjVEWMGFn1195gNtDw5t02xIPhZjTALnMo+orZG/TjIzNHnM8g\nJiN4tCw/ZP+BASQsA0G+bf8UAnP8xJpsTExdqpBeawXn1dFPAjYl3YGjiKU7\nJD/7vYhkgNtX8m18dAYVCbAyEeqafiQY8Y7cj9w6r4nkfV60ax01mNe8gx84\nKz143nticByyCd/vE3PKOyAydjFM4gmApqY/tNKUGRoY+hG+KDtd8URcByw3\nMdHxCOgs1yoZA1rHxkd8yGLMU0SwElalTp0eGXFOc+VqNr1B178Y1LkSboB3\ngru8adYxJrTijTAaY53f3K4KeBRYXeya7e7C9K590HNG1WQgVuExrzPrVCyz\nz5l8mJFxlkmtV2YRv+aMZbWEjkimEYxbS0sR8M+K4SGARdHY5tEC7+oun0hI\nAw9Vruq+TSROvtuqOe+GgtEDkkq8sk3ZitezGbsgNmcoqRrnyXYf47NZy7EI\nZAwWlb7YTvYEzY5P+LFYN8iap8ywWhY9Yqw3xxAZOyo4PO4zBQm9xfh7kiKW\nimyk1LWh2pIXSuCszN9RI+VYrEyju9p5Ayp2Q6JewS5H7gLaPNrkjPzbCpD0\ndXz4PYgeRLRhA9iYAGsBi8ZEATZYD4cgy5l57KHWEgzmtrHkPQurp60/Uara\nxbbe\r\n=+L0E\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n\n\nButtons allow users to take actions, and make choices, with a single tap.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/button\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n```\n\n> _NOTE_: Examples here use the generic `\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n> _NOTE_: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Additional Information\n\n### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n\n> \\*_NOTE_: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n> buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n> directly within the `mdc-button` element.\n> However, the `mdc-button__label` class may become mandatory for all cases in the future, so it is recommended to\n> always include it to be future-proof.\n\n### Sass Mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass Mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`mdc-button-filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass Mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`mdc-button-container-fill-color($color)` | Sets the container fill color to the given color for an enabled button.\n`mdc-button-disabled-container-fill-color($color)` | Sets the container fill color to the given color for a disabled button.\n`mdc-button-icon-color($color)` | Sets the icon color to the given color for an enabled button.\n`mdc-button-disabled-icon-color($color)` | Sets the icon color to the given color for a disabled button.\n`mdc-button-ink-color($color)` | Sets the ink color to the given color for an enabled button, and sets the icon color to the given color unless `mdc-button-icon-color` is also used.\n`mdc-button-disabled-ink-color($color)` | Sets the ink color to the given color for a disabled button, and sets the icon color to the given color unless `mdc-button-icon-color` is also used.\n`mdc-button-density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`mdc-button-height($height)` | Sets custom height for button.\n`mdc-button-shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$mdc-button-density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`mdc-button-horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`mdc-button-outline-color($color)` | Sets the outline color to the given color for an enabled button.\n`mdc-button-disabled-outline-color($color)` | Sets the outline color to the given color for a disabled button.\n`mdc-button-outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `mdc-button-horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"The Material Components for the web 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/density":"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/button_5.0.0-canary.7e4b04b25.0_1579646790664_0.13719872379798548","host":"s3://npm-registry-packages"}},"5.0.0-canary.ebc296937.0":{"name":"@material/button","version":"5.0.0-canary.ebc296937.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"10a50f5715618231f218931a32c413c453145657","tarball":"https://registry.npmjs.org/@material/button/-/button-5.0.0-canary.ebc296937.0.tgz","fileCount":17,"integrity":"sha512-7kiuWHAy8Y/reLNecMWUK4rjF3jgu18Snw4Pew8nblCF5lZI7qvh/1D5FXbEeNW/xLs8X28lb14b9UppwDPPaA==","signatures":[{"sig":"MEQCIFjdGWGKFQJU5Jl6iTBU1483vLAP63ki4Qsd7JoboqjYAiBsleqHlH5FYJ1o2cyegLspEnWy9DDnNksr/4jrBvc81g==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":214226,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeJ40ECRA9TVsSAnZWagAA6OsP/3Tx23a4INS4vV5wQZPU\neQsP9J2QynX6S2Gp3f8IwdLrUz487LQIp/h8YtkJlLsTzS61UAseJYqwqRyk\nBTYVERGx9r896AFbUQ4jG7QoaBqR0wt35/W58XQ3BenWaGDogY4Y79KWeKis\nDE7w98gQCnuQMaWAG43KD/+TxxgQz1j1iJZg1glBlJhflVXG2tyiHuUWyoCq\nfM7rRTHRF4r8mz3EsnbfLHzCEwxba2rU7AsQqbN9xFFtuhclw8swPYRGlIBr\nXMnEYdEuuwL+QMjTOzgw0XllJ+n/pUmJ1jS1WpG2rKO18mvqc8kZKlCx5C+R\nPtVtMmW1Ih3wAa2VHEhaXvdlQqIkt5t9xQ07xRWJm+TGIxeBpU4YINNcComW\nmnQCF5saHxv7KEF9iek1YO1ryVzXwGV05qKK+bMKe/iV+HAK6m+EmKiiGwpC\nZWLQ+Fokq3oqzsemabIvYOSc7Swyh8godu+8fvQGOxrtnNE+Yzgw7heTeGEh\nQHbfgw8uentIHPl4G+9MK2FO7G4VbSy3YbYmBI0q9FGtpLjT9gqXFISxUK9+\nX1SaFhw920oloykdxR2e9xnyYxosbhmsbAGfG/gBKJEsVtinEDoacyLBE6B9\nyXNQZqeqAYekLylUoyXam/cErEbZ38BiJtQXBNm6Cokr9AfOoHA/HUYxIkKr\n2SQu\r\n=8r+w\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n\n\nButtons allow users to take actions, and make choices, with a single tap.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/button\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n```\n\n> _NOTE_: Examples here use the generic `\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n> _NOTE_: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Additional Information\n\n### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n\n> \\*_NOTE_: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n> buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n> directly within the `mdc-button` element.\n> However, the `mdc-button__label` class may become mandatory for all cases in the future, so it is recommended to\n> always include it to be future-proof.\n\n### Sass Mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass Mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`mdc-button-filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass Mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`mdc-button-container-fill-color($color)` | Sets the container fill color to the given color for an enabled button.\n`mdc-button-disabled-container-fill-color($color)` | Sets the container fill color to the given color for a disabled button.\n`mdc-button-icon-color($color)` | Sets the icon color to the given color for an enabled button.\n`mdc-button-disabled-icon-color($color)` | Sets the icon color to the given color for a disabled button.\n`mdc-button-ink-color($color)` | Sets the ink color to the given color for an enabled button, and sets the icon color to the given color unless `mdc-button-icon-color` is also used.\n`mdc-button-disabled-ink-color($color)` | Sets the ink color to the given color for a disabled button, and sets the icon color to the given color unless `mdc-button-icon-color` is also used.\n`mdc-button-density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`mdc-button-height($height)` | Sets custom height for button.\n`mdc-button-shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$mdc-button-density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`mdc-button-horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`mdc-button-outline-color($color)` | Sets the outline color to the given color for an enabled button.\n`mdc-button-disabled-outline-color($color)` | Sets the outline color to the given color for a disabled button.\n`mdc-button-outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `mdc-button-horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"The Material Components for the web 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/density":"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/button_5.0.0-canary.ebc296937.0_1579650308297_0.0651753226418672","host":"s3://npm-registry-packages"}},"5.0.0-canary.cf33f113d.0":{"name":"@material/button","version":"5.0.0-canary.cf33f113d.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"958d44e404bedf115dbf6a716e6c9682b047e698","tarball":"https://registry.npmjs.org/@material/button/-/button-5.0.0-canary.cf33f113d.0.tgz","fileCount":17,"integrity":"sha512-NsIOuXRyydWAuplsBY+3tEhHY9GKpUbRkTTwlnxa7FmaOfNoCrVAKHDIAGz1VgPQb4g34o1nYXTsBnshWH0g2g==","signatures":[{"sig":"MEQCIFKq7prlEAekaY2FxX3m9tRg6bZIDvmtgWWh+c++o7e6AiB7WZlpZDEXtMblqkTtpNfMJAyXGC51l+G+wH8/wIAXcw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":214226,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeJ6PQCRA9TVsSAnZWagAA7S0QAIn72MMBP6PjU0vyyhR/\n3qUOXPIV9yf7zg1Q3atsiQSexfMqBnYyBkUk4DdDqw8CqaJIw1dvncQp7khH\nbvOQpr+PWAx5DqmFzcqckEOC4CU1wV3N0j97OknaBJspvMjkPaedAftP7cMm\nxjRElnI1qwBPIoFYXWMms5/t8HnW1FF0apTpA/TW+cqqO0o5DuUwy1CLUFV/\nd8HWoNnqaZA4dK0Ja9XotLR4dcVR5fHWo+VUB2/goYjAlKIyHFIXAJuX9lTA\ntszlXjC+K8DWPFM+cD+Q8eIyT+XUY0ROmPwaapNbcsNNLsP0UqlPhVaAFfw7\nODUcifeaUHMtUys5vsapGsXfjD/xULoxZL34tUEBxirT/UqbJmuT384TSTOR\nw+WcDZrcnqV8j7/ke2hfSVuIo2/CxrcoNMyYNXHlgMrtxVp8l3U4uVvmutOa\nPBmgSg2zdVHqsrPBx1G74wZFUbTuo84piY0f8znDddgpPR9zY1ay4eaaBZbt\niS7u4iNE+mdeJR1RH0E3kZLz0I9VG6Q5WRJ9gibIljBLzi2NK9GHKyY+idh+\nSKHG1w9XqnhfGI9muSnUYob0xvXKZ0TCgAYDCcv0lHPCW5oq7sQ/Aruszrdk\nrNR8iHo+6M5InvXzON0b9DV6iVK5P1KsYdu4rLDURvNhqR4TBwTJUMUdXrhx\n53MH\r\n=7q6E\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n\n\nButtons allow users to take actions, and make choices, with a single tap.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/button\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n```\n\n> _NOTE_: Examples here use the generic `\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n> _NOTE_: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Additional Information\n\n### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n\n> \\*_NOTE_: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n> buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n> directly within the `mdc-button` element.\n> However, the `mdc-button__label` class may become mandatory for all cases in the future, so it is recommended to\n> always include it to be future-proof.\n\n### Sass Mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass Mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`mdc-button-filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass Mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`mdc-button-container-fill-color($color)` | Sets the container fill color to the given color for an enabled button.\n`mdc-button-disabled-container-fill-color($color)` | Sets the container fill color to the given color for a disabled button.\n`mdc-button-icon-color($color)` | Sets the icon color to the given color for an enabled button.\n`mdc-button-disabled-icon-color($color)` | Sets the icon color to the given color for a disabled button.\n`mdc-button-ink-color($color)` | Sets the ink color to the given color for an enabled button, and sets the icon color to the given color unless `mdc-button-icon-color` is also used.\n`mdc-button-disabled-ink-color($color)` | Sets the ink color to the given color for a disabled button, and sets the icon color to the given color unless `mdc-button-icon-color` is also used.\n`mdc-button-density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`mdc-button-height($height)` | Sets custom height for button.\n`mdc-button-shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$mdc-button-density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`mdc-button-horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`mdc-button-outline-color($color)` | Sets the outline color to the given color for an enabled button.\n`mdc-button-disabled-outline-color($color)` | Sets the outline color to the given color for a disabled button.\n`mdc-button-outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `mdc-button-horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"The Material Components for the web 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/density":"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/button_5.0.0-canary.cf33f113d.0_1579656143412_0.1733050700583847","host":"s3://npm-registry-packages"}},"5.0.0-canary.e1d5f1be5.0":{"name":"@material/button","version":"5.0.0-canary.e1d5f1be5.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"6edd0dd85935a70da33ca0799a08d1256b3ff5b5","tarball":"https://registry.npmjs.org/@material/button/-/button-5.0.0-canary.e1d5f1be5.0.tgz","fileCount":17,"integrity":"sha512-yj0/vFd5aNvSFsRw22L8Wd03gsimTTd8Rhv3fwG/n9yNcxJg4kB5asSxO1fOSZiW5xlcB7xMvZmQDKAPB01nbA==","signatures":[{"sig":"MEUCIEyxPnUR7dX54O7IMsF8s7ombWDqE2ok8RtrBpuyP0QYAiEA+5VhVWaBsNxGl1YlzFiqkuWTVf75cRh0dKxXeGO7IgU=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":214212,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeKH6LCRA9TVsSAnZWagAA7eMQAKT5KRmU3AsjClthXKVU\nHfwsbr2YwNoqUXbeADUlQlIA4dUW/py3PY1vpNkA4PsOUslvhQmHfF4YaCaw\nVrR+R4H8KvjY7XeONJNUwe44z+x/hDKUG6I9nltO3Rp5+9g8mv4CMbmbemWb\ncOIvXd2Ibv37eiNAtFTk7eYNsMsr09zMNkai3wvSkA5qUzPDnY+IgY0seQW3\nazTyxMWd37r3U8KWTDj8Y+yShpQt0UKszxs+kCkU0XYw/wTXhHLNhToOe3an\nMm7ZF50N6WOqJTrKw9YsMvIfu2gMV5DKfbq2o44/O68qPEjTC2RW8BYwvzqs\n/vNpuIVoAEc2jrOH/6pkIqvgJvQxC/hyFJnAQsJbtuHdIKU3xx/72KwnFEaw\nn7YMgvSU9uw0fiVQFSatmJiLMVnNRLBfymcUJmhhCWRUy5Xmlngiuwj2l2W/\naa+JJ+2hIAV1Isqb6Ue1nT4/W3yfxkgKT8aD+OVRQXpACqLJXV+NgYPhtte4\n83dAJzBLLNWMqlxYbrdFAm7FyoDzNeIcvf10K7hG6eGsf0XiArcLjA9bfUh3\nnpikCjORvuAm+8vIveVZ2CBPHgq44cgKrCq5sZOCr7+ZBsgG00aOO88E+KLL\nMvQ8ZBMVdOFFY7or0Zl2dz1JzitWHuYWE/J1Rsa4LNusEemzgOMBBQ7j8r4s\nV2qR\r\n=2+uM\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n\n\nButtons allow users to take actions, and make choices, with a single tap.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/button\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n```\n\n> _NOTE_: Examples here use the generic `\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n> _NOTE_: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Additional Information\n\n### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n\n> \\*_NOTE_: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n> buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n> directly within the `mdc-button` element.\n> However, the `mdc-button__label` class may become mandatory for all cases in the future, so it is recommended to\n> always include it to be future-proof.\n\n### Sass Mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass Mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`mdc-button-filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass Mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`mdc-button-container-fill-color($color)` | Sets the container fill color to the given color for an enabled button.\n`mdc-button-disabled-container-fill-color($color)` | Sets the container fill color to the given color for a disabled button.\n`mdc-button-icon-color($color)` | Sets the icon color to the given color for an enabled button.\n`mdc-button-disabled-icon-color($color)` | Sets the icon color to the given color for a disabled button.\n`mdc-button-ink-color($color)` | Sets the ink color to the given color for an enabled button, and sets the icon color to the given color unless `mdc-button-icon-color` is also used.\n`mdc-button-disabled-ink-color($color)` | Sets the ink color to the given color for a disabled button, and sets the icon color to the given color unless `mdc-button-icon-color` is also used.\n`mdc-button-density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`mdc-button-height($height)` | Sets custom height for button.\n`mdc-button-shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$mdc-button-density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`mdc-button-horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`mdc-button-outline-color($color)` | Sets the outline color to the given color for an enabled button.\n`mdc-button-disabled-outline-color($color)` | Sets the outline color to the given color for a disabled button.\n`mdc-button-outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `mdc-button-horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"The Material Components for the web 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/density":"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/button_5.0.0-canary.e1d5f1be5.0_1579712138850_0.40043804706892683","host":"s3://npm-registry-packages"}},"5.0.0-canary.6b6a4ff92.0":{"name":"@material/button","version":"5.0.0-canary.6b6a4ff92.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"1ca37709cbc400ebf12ffbcee295ec5f7640abbe","tarball":"https://registry.npmjs.org/@material/button/-/button-5.0.0-canary.6b6a4ff92.0.tgz","fileCount":17,"integrity":"sha512-f4rLNSOdc2Jvu1QcjCzZ6HM+l/xXMwBtrewT7djqMi02e4qQSrnFi2H3RQHBjCU0DNMGgYnPKtVpfCo7EqCmfg==","signatures":[{"sig":"MEQCIBk9768CjDVw0SqlmL9h7rUhIxsuFmrOz73xGqIK8s/JAiBOMfhRRYDJb9G0msSM7yrPXJvia06O628WcqH7k9ubWQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":214212,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeKI0fCRA9TVsSAnZWagAAR6MP/0xSwRosRs9FvgWbjm3f\nYK7+4xAHP99ae9qUDiEx2mgGISjIEvKWy5+MVf6RhyC3vnFRQImYJ4F9wFu3\n0DbQhMhQ6aQKE154NjYnaNrV9+7ZLhKsFKZWNq7KP4Q/hS2lS7OBjCREivrg\nhilVt28QyboYGOJEH/2hGkHw5lscQZMQj9O+XUyu3YoM3U7e+O523l5p9HdD\niOpdQN22vXThZdsc7DUyxeQlSWXG7T3FiElTy13doXmCz6HS91Cf9IaJx5Zh\nYGzN0zNxieQSwoKCwsuVKPHhoweMRklojUxRLYWpxTwanimJbjh+Vod2PaSR\nMsO6wszc36SEH++huKHVznbhCLmPwsIf9VHWHgB2vs8GTPkHWvj3LOHFfWH1\nLQxl1dWQw8JbzTS+fRcILfmlHU+2pKP7pxWok9qkICSC+NYv1Ul2zeYpHwzT\ny1ArjRyHLnGVV3wRf0Ee6q08kTVmsRnNUDlYCpdjwmv9Qlp7hkIUAw14oyQ3\ntLjAM1SM4KBR7tKw23RXX3LqoboVdCi9dcOg5mkQB17bFJ+Fx0y9uAfhVJWZ\nS67cT7GHfIZYCrPnFNnnslyUldA07Oqgx/NvBuV0ngaJ2NUpoF4jw6BEL3Bm\nRZDn66wQChO1lB6WAAjSjwygvn8L2v44IkHjf62EPhpjqoO5lhibEEyJPWHW\nE2Bt\r\n=IKNF\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n\n\nButtons allow users to take actions, and make choices, with a single tap.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/button\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n```\n\n> _NOTE_: Examples here use the generic `\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n> _NOTE_: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Additional Information\n\n### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n\n> \\*_NOTE_: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n> buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n> directly within the `mdc-button` element.\n> However, the `mdc-button__label` class may become mandatory for all cases in the future, so it is recommended to\n> always include it to be future-proof.\n\n### Sass Mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass Mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`mdc-button-filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass Mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`mdc-button-container-fill-color($color)` | Sets the container fill color to the given color for an enabled button.\n`mdc-button-disabled-container-fill-color($color)` | Sets the container fill color to the given color for a disabled button.\n`mdc-button-icon-color($color)` | Sets the icon color to the given color for an enabled button.\n`mdc-button-disabled-icon-color($color)` | Sets the icon color to the given color for a disabled button.\n`mdc-button-ink-color($color)` | Sets the ink color to the given color for an enabled button, and sets the icon color to the given color unless `mdc-button-icon-color` is also used.\n`mdc-button-disabled-ink-color($color)` | Sets the ink color to the given color for a disabled button, and sets the icon color to the given color unless `mdc-button-icon-color` is also used.\n`mdc-button-density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`mdc-button-height($height)` | Sets custom height for button.\n`mdc-button-shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$mdc-button-density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`mdc-button-horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`mdc-button-outline-color($color)` | Sets the outline color to the given color for an enabled button.\n`mdc-button-disabled-outline-color($color)` | Sets the outline color to the given color for a disabled button.\n`mdc-button-outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `mdc-button-horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"The Material Components for the web 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/density":"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/button_5.0.0-canary.6b6a4ff92.0_1579715870845_0.5398589891352052","host":"s3://npm-registry-packages"}},"5.0.0-canary.6092f71ee.0":{"name":"@material/button","version":"5.0.0-canary.6092f71ee.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"227c7eec073bcdf5af92adf8917285dd4bbe626c","tarball":"https://registry.npmjs.org/@material/button/-/button-5.0.0-canary.6092f71ee.0.tgz","fileCount":16,"integrity":"sha512-7qCdl1/wc3KoLwKjNwCcSoFoT0aw5vLGu/9bXSlgHm77scP6ZIBncGHQXI9x7vN+9iAQyGx95RXGjSwfouv1Jg==","signatures":[{"sig":"MEYCIQD+ItuBuQJh2V4Sp6gtjhmEbtx9zqH2nyhMSIby9yfomAIhAOWKQfokVNK7UEUDrqTPOqckLjGTuOQnOf/hU4gULacp","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":213975,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeKLvSCRA9TVsSAnZWagAALsYP/2u6bBqiGAjjMA2cdygX\nEfUgH8+smNkeIaLUKA2X5vWpb/iXFcDbQygtRJAiU+xmW9qVL3J40cFSUmtM\nmn0XU64Sj83mzAoS7V9tD1VqfohO7aNSq3z6rM/VSL5CzyihsKiAgIEpmToI\nYk3z6KFJ7/ZOy5zSTwdLbW7eo2m9i1ylfJ2UCNDS3MlEuPLhKX6lM41eOly2\nHC//71OD4U6K3+5bsdpGJfCO+qdIs38NfeuIUNfYok4gfwQjzWo5A2E/zSsW\njNpZtoLuSSzu/rBTa3gIKqGwSI6WSszbGA/1amupCYAaW6D2pziQgvw5uOlz\nvuWRO/EFz1f6k1xVN0ji88GusJg08DJBqIkBiLn25PZXf3Ib5SPRkxAS3iLY\nill1Nnk9TnJToyG4pNmptCdvhCgpiTZR4HW06v5lLeevnEQblIIksKgjKPlf\njvAbar67bQLMbdW9Pev8UpkDv/eo2MCutwKwj3/rVEQdPw5LvFE6AoiBbtGf\nXgOpdRxjuhGQ7r2SLPkjR7hF4GQUG5RpkXfsXds/mVL/pFsgBiiks7VdOcsz\nQ3pWoHEzKMbqjDCON593Qo+J2WO+4cUTPrb9YYQ9VCt7WZJ8mqYgZzboFVZE\nH2ZC7imIXf44Jxshr+VIFsgDtadzsNBnFJ/xuT9kQlnZCVpY2onLEa3qS1fR\nCgz2\r\n=ChKK\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n\n\nButtons allow users to take actions, and make choices, with a single tap.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/button\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n```\n\n> _NOTE_: Examples here use the generic `\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n> _NOTE_: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Additional Information\n\n### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n\n> \\*_NOTE_: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n> buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n> directly within the `mdc-button` element.\n> However, the `mdc-button__label` class may become mandatory for all cases in the future, so it is recommended to\n> always include it to be future-proof.\n\n### Sass Mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass Mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`mdc-button-filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass Mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`mdc-button-container-fill-color($color)` | Sets the container fill color to the given color for an enabled button.\n`mdc-button-disabled-container-fill-color($color)` | Sets the container fill color to the given color for a disabled button.\n`mdc-button-icon-color($color)` | Sets the icon color to the given color for an enabled button.\n`mdc-button-disabled-icon-color($color)` | Sets the icon color to the given color for a disabled button.\n`mdc-button-ink-color($color)` | Sets the ink color to the given color for an enabled button, and sets the icon color to the given color unless `mdc-button-icon-color` is also used.\n`mdc-button-disabled-ink-color($color)` | Sets the ink color to the given color for a disabled button, and sets the icon color to the given color unless `mdc-button-icon-color` is also used.\n`mdc-button-density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`mdc-button-height($height)` | Sets custom height for button.\n`mdc-button-shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$mdc-button-density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`mdc-button-horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`mdc-button-outline-color($color)` | Sets the outline color to the given color for an enabled button.\n`mdc-button-disabled-outline-color($color)` | Sets the outline color to the given color for a disabled button.\n`mdc-button-outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `mdc-button-horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"The Material Components for the web 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/density":"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/button_5.0.0-canary.6092f71ee.0_1579727825932_0.6867703566527736","host":"s3://npm-registry-packages"}},"5.0.0-canary.d8d95020f.0":{"name":"@material/button","version":"5.0.0-canary.d8d95020f.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"b6e33e9b49e4b673ebb6d55357a8c4c13fd5f97f","tarball":"https://registry.npmjs.org/@material/button/-/button-5.0.0-canary.d8d95020f.0.tgz","fileCount":16,"integrity":"sha512-+pPYh+Auxra7NPkYmGb2I9Rv3tLV1jyLbuYGZb0EjMBLoDiLxBoeOgTNeYRDeSJg0Ji4/CYINs2OrVE5xQ2mYw==","signatures":[{"sig":"MEQCIAGxW9duUzilhKWhUpyvVztC+GvVHLqCMEtKWdh3KgawAiAQSzAdxj1P7bSb5A1bjH+/V+jrZYogSI/9s6O3I3MJbA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":213975,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeKNYuCRA9TVsSAnZWagAATZsP/RLKZ0oMlbqeM2yDA+r5\ny8sU2fBfn/zjDrSoXnJWF2iEORBexKq2RbpU1SblM/QP1vNA+eD/+oWtYDSQ\n2g89X5x9L87ZVwcxFI0EWh+GHq5Nn9xDfClbpzsim6aCiFa5bqpvZ+S/fWOI\niqpGV5bnm3nsy0NxuDsQefLfYLwRCPpsDZ4xwUKTXizyuCBomHD/emN81G0o\nPswUgyk/KFnTJWRSAAcHNlVU2gQS3cx9IAbkeNmFe9W0QRYuplT96/Vc8aWu\ncrI1o7AZg9bIHlLsJj5luJ79MRYPHqCnbVXrt1PzScdeqgEiXRI0DqAtY5jh\nfySCqq8Ak66Og9ho5qARBRQQNq0eawNi0b5/sY4DcO9kTI8KBhVLmfOvbtWN\nJZNzKkH6Kf9MQtjni3eOrQMfEjaTvFB3ACqHxu9BYbA0xCGgZfhTO4//9G6J\nzRxCkNRoMaBQkaqmLO1IAe1eNDC0X+IFO6canyUtbbM6jqgUU+JfSPZrgucP\ngBKPxVA3ATAaC6WkiB6lM9NwgUr1glPf//jN0k8bU4oB6yNzvaGxdjm93L8S\nd9c0sxAzCL0f+a5VQz/klShZ+C+a+wsFMbsYjf129gNhXaJMUkLcNRx302IW\n1Kf5qwz/urUGm3nvM7db8pkCeukjILRbrjFApRhfmA8n9V1drZfeAQAW5njW\nQJ2i\r\n=L9rw\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n\n\nButtons allow users to take actions, and make choices, with a single tap.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/button\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n```\n\n> _NOTE_: Examples here use the generic `\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n> _NOTE_: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Additional Information\n\n### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n\n> \\*_NOTE_: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n> buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n> directly within the `mdc-button` element.\n> However, the `mdc-button__label` class may become mandatory for all cases in the future, so it is recommended to\n> always include it to be future-proof.\n\n### Sass Mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass Mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`mdc-button-filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass Mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`mdc-button-container-fill-color($color)` | Sets the container fill color to the given color for an enabled button.\n`mdc-button-disabled-container-fill-color($color)` | Sets the container fill color to the given color for a disabled button.\n`mdc-button-icon-color($color)` | Sets the icon color to the given color for an enabled button.\n`mdc-button-disabled-icon-color($color)` | Sets the icon color to the given color for a disabled button.\n`mdc-button-ink-color($color)` | Sets the ink color to the given color for an enabled button, and sets the icon color to the given color unless `mdc-button-icon-color` is also used.\n`mdc-button-disabled-ink-color($color)` | Sets the ink color to the given color for a disabled button, and sets the icon color to the given color unless `mdc-button-icon-color` is also used.\n`mdc-button-density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`mdc-button-height($height)` | Sets custom height for button.\n`mdc-button-shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$mdc-button-density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`mdc-button-horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`mdc-button-outline-color($color)` | Sets the outline color to the given color for an enabled button.\n`mdc-button-disabled-outline-color($color)` | Sets the outline color to the given color for a disabled button.\n`mdc-button-outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `mdc-button-horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"The Material Components for the web 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/density":"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/button_5.0.0-canary.d8d95020f.0_1579734574114_0.33687250523456713","host":"s3://npm-registry-packages"}},"5.0.0-canary.b7facc628.0":{"name":"@material/button","version":"5.0.0-canary.b7facc628.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"d9da36c336bf81543848da4060a168241655bae6","tarball":"https://registry.npmjs.org/@material/button/-/button-5.0.0-canary.b7facc628.0.tgz","fileCount":16,"integrity":"sha512-k2no0Yh5zLuKl6JtK1BUYyYNB/H99XrbaN0JXMuW8pr4HufESPZcU8xlZ8m/7cqECXESY9YRFCtzVHe7q9OtmQ==","signatures":[{"sig":"MEQCIHNnDpoy2Zpq++/E4kYUoaAc/V4zFXxh2tZkR9zpAKphAiBvTqiznOMUuoqvZSZ+JIEGeu/OGQ/VrxT1qX33MGDHeg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":213975,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeKeIeCRA9TVsSAnZWagAA+yYP/1s34Wvart7Ypm4u/joe\nq9Is/SUUumMmQSO5AYiwmhmG2A6dGIao/W2B90ohW9WcwwMGupMCJyj4Q93l\nWL6itxzMRItwbzFVqVxxPijMd2nukbrcfC4TCR1tO9/dnGitAo2D+0u49aQJ\njX9gGb7kA1xglCgdigya5X+YEL0zxxMynjwIMlTv3OTlDZpRmfE/zRcIa1Hl\nBx2/9igYsQna4+RC6usTAbJeEogAFVO0bYkRt8gU87txV6CLQ0SkHDB0C4d9\nM3Ns3uwvW0OBbJtY7OCOK3ht6/NXekCks4YT/t2ROjmP1Lvtf2H2YaXygpBc\nvvPNZGQnuAufLpfWbYNmWvbTMI5J7SZXAlQ09umssJanXbpjtywAjpocwxn9\n6WH9nfbZRojB4ls2PkjFFF3/IMV6sAhkv9tCF5QZmPFvhQhl4G1C75Mvn4T8\nn1mUPJIQl0cwRIo+y88RDmXgKpZ86xK6ve48uZY1lEk9IW+IaZjizmC6nyl8\nNUqM3CblbrWqZo9oxBFdpqfiiE4H4u8DVvVYoUzCrA5zgDXFtxjc7ixYoIkR\nausCGkfM/Ea0CiC6a8+lRMc8etTgp0rUevafKAeXmL52hZN0/qdjdHakuYdV\n+qL4hen/ZcTfc1XKPpU+Hz7n9Bjw8frMDlrfUIgfgW2OeTvxn8SbcJdcfSaQ\nImt8\r\n=sZ1y\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n\n\nButtons allow users to take actions, and make choices, with a single tap.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/button\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n```\n\n> _NOTE_: Examples here use the generic `\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n> _NOTE_: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Additional Information\n\n### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n\n> \\*_NOTE_: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n> buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n> directly within the `mdc-button` element.\n> However, the `mdc-button__label` class may become mandatory for all cases in the future, so it is recommended to\n> always include it to be future-proof.\n\n### Sass Mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass Mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`mdc-button-filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass Mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`mdc-button-container-fill-color($color)` | Sets the container fill color to the given color for an enabled button.\n`mdc-button-disabled-container-fill-color($color)` | Sets the container fill color to the given color for a disabled button.\n`mdc-button-icon-color($color)` | Sets the icon color to the given color for an enabled button.\n`mdc-button-disabled-icon-color($color)` | Sets the icon color to the given color for a disabled button.\n`mdc-button-ink-color($color)` | Sets the ink color to the given color for an enabled button, and sets the icon color to the given color unless `mdc-button-icon-color` is also used.\n`mdc-button-disabled-ink-color($color)` | Sets the ink color to the given color for a disabled button, and sets the icon color to the given color unless `mdc-button-icon-color` is also used.\n`mdc-button-density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`mdc-button-height($height)` | Sets custom height for button.\n`mdc-button-shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$mdc-button-density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`mdc-button-horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`mdc-button-outline-color($color)` | Sets the outline color to the given color for an enabled button.\n`mdc-button-disabled-outline-color($color)` | Sets the outline color to the given color for a disabled button.\n`mdc-button-outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `mdc-button-horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"The Material Components for the web 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/density":"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/button_5.0.0-canary.b7facc628.0_1579803166015_0.9512533752632037","host":"s3://npm-registry-packages"}},"5.0.0-canary.63f357dbf.0":{"name":"@material/button","version":"5.0.0-canary.63f357dbf.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"b1aa92b04ddadbd66247dcf9f783c6af0e7db3b1","tarball":"https://registry.npmjs.org/@material/button/-/button-5.0.0-canary.63f357dbf.0.tgz","fileCount":16,"integrity":"sha512-wuYmNkrRSH/noRBZ6NQOc6C3IwKmq24xF98l+gHUGW+msNmu7qxGsXEl7NF0gKAGmVyIaR1x+0msfIDqvG82dg==","signatures":[{"sig":"MEUCIEF6Ur6gU15jplM2p09W0UKU6HwHl4U0si3r214GPCZUAiEA04KCj9llwMo0Y4mSoM1mZqou3g3LWHB809deIGxUBic=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":213975,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeKhZMCRA9TVsSAnZWagAAWNsP/26vYcwdtCUcnD83zhjj\niq0VJe4QnISV2XSPFWc3rahNtTYG2QK+a3+ORFQjd0j7zduBVK7A71sJRh8N\nYxDzUJoHNUoNMMw0EfuDCOHmxIktQ6h+Awj40OCVUYYSnuLiAG4VIob5yVvz\nEH6FyJDJzhOBp8AC6yB4njYT4FaDpw0A+2Gc3Rjrui8RVf38MkE+/U1G2U61\nAVcr9/d4QXyau6h6smCV7UuZQnlAluWhfPTguzoAMOn+uYRYGQQynWs76+mZ\nOnscWgcEKUo06HccjkbZkaFMd5NdlvEkDllZIH9Cze4vX/iO2m8mK2XzUwcL\nnM+bBgdcARyY4qZvACLRmvD4yadwz/YeiKgMW35Jq1ouL2q9x0YPvJMSEStu\n0+k69r01zf8YA41CmtPiW08e+vWU1go/QSOj4SuKqB7jjdXEKv63JqeOl8/x\nqP4/gc6CY+ikGfFrI9YBQSeHyWBfyG5Mc4o7ZC9hFGQukMUufsR4k3O/UK7+\nJJNsa5EM3BGTsxjTEXWlwX80aw8EKDobcuED6UV62NcBmmbZJn4/LKrHLgRo\n2LeMzwxc0KLBzlW+XqCHdx7yoAzVQ4QDLQ6gnoj3XKnPy04bzq1dReGYyI5/\nnMepXpPRZGPx1s4w75V6pOB0SISg8DK7NtT5PZ4v4rx8ZhhdEnwo8ygEXCFt\nakyx\r\n=w4KF\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n\n\nButtons allow users to take actions, and make choices, with a single tap.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/button\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n```\n\n> _NOTE_: Examples here use the generic `\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n> _NOTE_: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Additional Information\n\n### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n\n> \\*_NOTE_: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n> buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n> directly within the `mdc-button` element.\n> However, the `mdc-button__label` class may become mandatory for all cases in the future, so it is recommended to\n> always include it to be future-proof.\n\n### Sass Mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass Mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`mdc-button-filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass Mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`mdc-button-container-fill-color($color)` | Sets the container fill color to the given color for an enabled button.\n`mdc-button-disabled-container-fill-color($color)` | Sets the container fill color to the given color for a disabled button.\n`mdc-button-icon-color($color)` | Sets the icon color to the given color for an enabled button.\n`mdc-button-disabled-icon-color($color)` | Sets the icon color to the given color for a disabled button.\n`mdc-button-ink-color($color)` | Sets the ink color to the given color for an enabled button, and sets the icon color to the given color unless `mdc-button-icon-color` is also used.\n`mdc-button-disabled-ink-color($color)` | Sets the ink color to the given color for a disabled button, and sets the icon color to the given color unless `mdc-button-icon-color` is also used.\n`mdc-button-density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`mdc-button-height($height)` | Sets custom height for button.\n`mdc-button-shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$mdc-button-density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`mdc-button-horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`mdc-button-outline-color($color)` | Sets the outline color to the given color for an enabled button.\n`mdc-button-disabled-outline-color($color)` | Sets the outline color to the given color for a disabled button.\n`mdc-button-outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `mdc-button-horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"The Material Components for the web 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/density":"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/button_5.0.0-canary.63f357dbf.0_1579816523921_0.7728993825852843","host":"s3://npm-registry-packages"}},"5.0.0-canary.f2426d26e.0":{"name":"@material/button","version":"5.0.0-canary.f2426d26e.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"25042452ae69eecd2799caa0ce20e4a3c087e9a5","tarball":"https://registry.npmjs.org/@material/button/-/button-5.0.0-canary.f2426d26e.0.tgz","fileCount":16,"integrity":"sha512-Rf0RBgDZF3bPuTIbNLJ0YZ/wJEHAmUkkKbSclt5K2CcoRyjIjW6R0Z/1GBhkl7v0h1oL9Fqw6jDhlLrIWZxRFA==","signatures":[{"sig":"MEQCICQZDT6ZI+zZO8H4VDchLSZXSfMURYDR84p5Lve6gR1xAiBdO8ox2kP660lO0gx/HWJnAJMc1rUbEejrJbZdh03reA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":213975,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeKjJoCRA9TVsSAnZWagAAtrIP/RS1e46Gc/cvT61fN3Uy\n5oYMql0DHMMJBlbt/8yVxo3okakyoPgm5WeD7y7TEb1/ORu0Ayy0Cu3hn/nZ\nteuwbvLoCpXHJMxPqOhelQZ1DYPCTAVRbeRA5SujxItDCrWH2uYgACEEg7Sv\ncU8QEzL1q9ZergMx7MFostNau+ZnFTvN2bgpzollSYRsfDfC6wLiFiPHSUWZ\nyoSK90fUXYec/+5eV5kUzPOg6YQr9IyMDBOCcBgn+EDBoE8yUhuMjw2WckxK\nyPQN7aDhRfjmTo3XuxMyh/PGhr35TKS+T0pkz/FVSnsuZ16p7NwXzj8DfPDb\nOquIJ7Ca6iBP/Q7yPbqGErkQxfelmKGko20HPFMn4VPJrDSO3QU8QlUTg5go\n4dGq7i10PcJ/kB+SPOOUzCyfsTOnv+nU5ZQBVCxMKrjewbWNEmfrHHpNZlnN\nksk4ZzXhLZgrvQyyPc3ddxZu1/icaBtY3r8R6ac9tgxQ/b3czp38djE1x4a/\n3I1JnCXP1EGh/ORHRd/FrWv19OdeOfgLlFS+wVcfLMouVa7G7Veee91UzBfW\nM7/HW6+rKWMIiklapDpC9RMJ+mSbdBIwbUkpJ+SJe9NFHTc3fBBesg/uJ4in\nYPTUe6IxyK4IJfiUUtabFj4Q1Zd5CrOF/9g47oiVRpUKMl0wY41OqN+ELavg\nl1ow\r\n=B6P+\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n\n\nButtons allow users to take actions, and make choices, with a single tap.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/button\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n```\n\n> _NOTE_: Examples here use the generic `\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n> _NOTE_: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Additional Information\n\n### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n\n> \\*_NOTE_: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n> buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n> directly within the `mdc-button` element.\n> However, the `mdc-button__label` class may become mandatory for all cases in the future, so it is recommended to\n> always include it to be future-proof.\n\n### Sass Mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass Mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`mdc-button-filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass Mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`mdc-button-container-fill-color($color)` | Sets the container fill color to the given color for an enabled button.\n`mdc-button-disabled-container-fill-color($color)` | Sets the container fill color to the given color for a disabled button.\n`mdc-button-icon-color($color)` | Sets the icon color to the given color for an enabled button.\n`mdc-button-disabled-icon-color($color)` | Sets the icon color to the given color for a disabled button.\n`mdc-button-ink-color($color)` | Sets the ink color to the given color for an enabled button, and sets the icon color to the given color unless `mdc-button-icon-color` is also used.\n`mdc-button-disabled-ink-color($color)` | Sets the ink color to the given color for a disabled button, and sets the icon color to the given color unless `mdc-button-icon-color` is also used.\n`mdc-button-density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`mdc-button-height($height)` | Sets custom height for button.\n`mdc-button-shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$mdc-button-density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`mdc-button-horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`mdc-button-outline-color($color)` | Sets the outline color to the given color for an enabled button.\n`mdc-button-disabled-outline-color($color)` | Sets the outline color to the given color for a disabled button.\n`mdc-button-outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `mdc-button-horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"The Material Components for the web 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/density":"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/button_5.0.0-canary.f2426d26e.0_1579823720241_0.6478297412856429","host":"s3://npm-registry-packages"}},"5.0.0-canary.7f5e0c23f.0":{"name":"@material/button","version":"5.0.0-canary.7f5e0c23f.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"ccb85d66e18d84375c2c33bf870f8065d6434baa","tarball":"https://registry.npmjs.org/@material/button/-/button-5.0.0-canary.7f5e0c23f.0.tgz","fileCount":16,"integrity":"sha512-dUPgVYff3nMl59ZcMEPdmBQCZOdfgwg9ssC7q4wmNfTzDHLA6/ThjbeiRbBsy1D0C1V33gISZPdDl5ZnDQeMrg==","signatures":[{"sig":"MEYCIQChmJNY8gxVsGlWi3TfGv6KBzna8qYlH9tE8OxwSQqYHAIhAPheif6NUm1QC8ARNXv2+5rGmczqbBsVOHYFcTx51ir8","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":213975,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeKx+yCRA9TVsSAnZWagAA4rgP/1guSNsTGayGQQ63h+kb\n/8lA14jpu99/2gnwInDrvcChQUFWdZtTAKkuwHkrFBLTLUhaR3u+joYDECQF\nAMdg1P7xZ3r1bux3Q6wGtG/Qvz+EgX+1yUH4UZaAW3jr7x1h9G4rA20lISsh\nPu/RIuY97Tlr6H8BX1y2zWWohZ1lWNXNwox0A8lr/6XDcbIfeQ35uJJZhIWO\nvY5w5dQs0kWViYuwsK5Dpnsi8DzHvzoxrwF6fGF++cuCPCn6VSdpSpBgx17M\nWmIklhw8ccUQ+wOFm2wCdG29rYZJLF/rwzcA0MXTP5o+5NMysEhuxVjmNcUN\nj/HZD/9wI163WWusCKcYn5fGMxDnFCf7WotmGuvFhO4vcKNqCKj71K4cdlcT\npnIKSvCkG8US+NSazA2Q0/ELtM0a4pv2lgtMRPQ0DZOTbBAph4E2R2UQXOSS\n6XkFRAsESbPx3zDr/KsEIRjbaM7EdnkvI7u0ZZv7/OjZGzHOdwGp2rCNycrw\nlGntBn9Ic4AfGneNNYxZb+MId9Y2h3/IuWn1k8ggHPMWBn2gb/ynog7Jke8L\nmsIfQM6MEebt/L8UTjCyqoq1rXkxbK5gdEaU6tzgB3RS2OH8IHxf4YoXafiM\nvw2aPgpLI5T/h+IPbsnfOoZd79XXEtJbzrsKkz6PZlHBS4gn8zBTPxhLcMbs\ntOLY\r\n=XuH1\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n\n\nButtons allow users to take actions, and make choices, with a single tap.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/button\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n```\n\n> _NOTE_: Examples here use the generic `\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n> _NOTE_: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Additional Information\n\n### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n\n> \\*_NOTE_: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n> buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n> directly within the `mdc-button` element.\n> However, the `mdc-button__label` class may become mandatory for all cases in the future, so it is recommended to\n> always include it to be future-proof.\n\n### Sass Mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass Mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`mdc-button-filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass Mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`mdc-button-container-fill-color($color)` | Sets the container fill color to the given color for an enabled button.\n`mdc-button-disabled-container-fill-color($color)` | Sets the container fill color to the given color for a disabled button.\n`mdc-button-icon-color($color)` | Sets the icon color to the given color for an enabled button.\n`mdc-button-disabled-icon-color($color)` | Sets the icon color to the given color for a disabled button.\n`mdc-button-ink-color($color)` | Sets the ink color to the given color for an enabled button, and sets the icon color to the given color unless `mdc-button-icon-color` is also used.\n`mdc-button-disabled-ink-color($color)` | Sets the ink color to the given color for a disabled button, and sets the icon color to the given color unless `mdc-button-icon-color` is also used.\n`mdc-button-density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`mdc-button-height($height)` | Sets custom height for button.\n`mdc-button-shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$mdc-button-density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`mdc-button-horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`mdc-button-outline-color($color)` | Sets the outline color to the given color for an enabled button.\n`mdc-button-disabled-outline-color($color)` | Sets the outline color to the given color for a disabled button.\n`mdc-button-outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `mdc-button-horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"The Material Components for the web 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/density":"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/button_5.0.0-canary.7f5e0c23f.0_1579884465877_0.9041434062561688","host":"s3://npm-registry-packages"}},"5.0.0-canary.3fc3ab520.0":{"name":"@material/button","version":"5.0.0-canary.3fc3ab520.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"ff22d55a3b24695013a410e98a9e7de6b16f5b0e","tarball":"https://registry.npmjs.org/@material/button/-/button-5.0.0-canary.3fc3ab520.0.tgz","fileCount":16,"integrity":"sha512-Brv3d7Ud8A8qLvUoKW9tFsb5q+/FmY3I/B9mzVjrtqbEibPk9h2uBwjrR89W9jmPLYFEVY/5LFkbUzO+Mcdu5w==","signatures":[{"sig":"MEQCID06HKUulctT8joV2R8jydKMVuJac/O6lsXuCDAASybkAiBxXz+sF28hTgAJn1s8N6AzEphjFGGP6K3OrGAoyZ5Teg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":213975,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeKyd7CRA9TVsSAnZWagAArJYP/0wH35/rW2hPWjAk4r0T\nt9bp/SrkDuhtsFeyObmK7b8EI/cDAGX0inCdQqKV+4GV/C4Yq+nfW+nDeNRp\nHwjUhwk50dDHSVkIChiUrDMP1mDCt2Bnsge/7mnjkcLaF24P/HSlAh6gAtY6\noTr3cP7waEfA7u7oeRCzGyB0/y6nvPvY9W/Hyduv48I724/oBpcALha3hc7u\nvAE/OcodLTU1BOMHXkKao7+0RPOHUb4paY8a+wjSZ/tPseup01wJLAgWApbt\ngCdZvL485XT6+yaN1AgPzrhMBjb1dxlv73P8W2IYEOZYVpWQ7KaRlI+0gyF8\nzXo0G+075wvKokajkiGj622C9UHbmCRUdXt6x7lPIc0SLvD0rO7JLVxU6I9d\niNhd4eUackPtRD/wxy1+L8zBKn3Nxo6+KMvpjseQ4Q9Ja51NLfCMI77f0zQ6\nUTaghRB3yjUL4BvvbjfYc8dUlL4KVGBd/4j7+vTA680DEGJeERPy2+Zzbtyv\nhVEIjk88iQJZQhZgCLWFRX5SAyNHYAGWrxOElrV2DkyX23QE8tYULUDPvScf\nLCvj2tcL0cTaWLeRsg+aKv0zFE1jKxoCgPCrAW97qohT7EsjVEbSC10PYP59\nPX6LpSZTAwQS6Onps3PPiCcOuyg3FftEMO22rgTr6Y7uE8djf/I27dVH6Uqh\nBc4h\r\n=jpl7\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n\n\nButtons allow users to take actions, and make choices, with a single tap.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/button\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n```\n\n> _NOTE_: Examples here use the generic `\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n> _NOTE_: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Additional Information\n\n### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n\n> \\*_NOTE_: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n> buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n> directly within the `mdc-button` element.\n> However, the `mdc-button__label` class may become mandatory for all cases in the future, so it is recommended to\n> always include it to be future-proof.\n\n### Sass Mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass Mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`mdc-button-filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass Mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`mdc-button-container-fill-color($color)` | Sets the container fill color to the given color for an enabled button.\n`mdc-button-disabled-container-fill-color($color)` | Sets the container fill color to the given color for a disabled button.\n`mdc-button-icon-color($color)` | Sets the icon color to the given color for an enabled button.\n`mdc-button-disabled-icon-color($color)` | Sets the icon color to the given color for a disabled button.\n`mdc-button-ink-color($color)` | Sets the ink color to the given color for an enabled button, and sets the icon color to the given color unless `mdc-button-icon-color` is also used.\n`mdc-button-disabled-ink-color($color)` | Sets the ink color to the given color for a disabled button, and sets the icon color to the given color unless `mdc-button-icon-color` is also used.\n`mdc-button-density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`mdc-button-height($height)` | Sets custom height for button.\n`mdc-button-shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$mdc-button-density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`mdc-button-horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`mdc-button-outline-color($color)` | Sets the outline color to the given color for an enabled button.\n`mdc-button-disabled-outline-color($color)` | Sets the outline color to the given color for a disabled button.\n`mdc-button-outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `mdc-button-horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"The Material Components for the web 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/density":"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/button_5.0.0-canary.3fc3ab520.0_1579886458440_0.06536235724809769","host":"s3://npm-registry-packages"}},"5.0.0-canary.80a4d326f.0":{"name":"@material/button","version":"5.0.0-canary.80a4d326f.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"205309f9824d185564f3ad5e412986811fe0b862","tarball":"https://registry.npmjs.org/@material/button/-/button-5.0.0-canary.80a4d326f.0.tgz","fileCount":16,"integrity":"sha512-w3ze+noNqjX00Qo8DQj4hNyDgjv0/wes+HV2k8Z0ezz5WAyplCTI00yDk3NAUw/iXTOBwFT2FaSwVVj6YyFlEg==","signatures":[{"sig":"MEYCIQCGaUJI95D9oKfESKN8bv4fdk3ydDFXeC4xKHboX5927gIhAKAr+lm9Xr3tjQeAbxarGlnjLc0UwwX5PpONhK6AWAqj","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":213975,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeK1eBCRA9TVsSAnZWagAAL+IP/2EIXAsdr51QgTR4NlQl\nGAbIPuKMIATDKka43IYCYVU0RcO7GXvcq3eMW/0FP4r49Cp+QC3jvtlkBkSz\nBXma5dO5OSEAnAanktxL0kwdx2eTXdP7OrwbP4JgiSXqdMH2K7xB8Ev7VmdF\nnPOql1gOqJsC9slEjvTBgDj4AvRV20OUMVFcqE//hYBI26jlUzTOzgGCPMkw\nRT0/Ej73NOZF7FYEiTby+//5DjhatQp6wP/UI9gf7aEQjRMPunxH4aA6vTJr\ncclV9JyjOzcbUot8p/8dkzbQ8kbiP5vhbxjczkS5WV0ScWpqx4icVwgraKyK\n/VXwvzPvAlIxf9GAAhWMWA+Vbo8lsJgTGwIbgNz8C0OwjPMQPx0SBwyy2VSC\n1Ul0j4GwRB3UelcINpLqLtrAiNpfiPRPIlKyXx2tU0witcOOBWAM2XZDLE2b\nE1Vrg0ccfL0LLkyIbSV++KLEq9TtgJf/Srsv+Kqdyfj0g8rd1FRCLXtTreQ4\nj+11DtB5fl8d98m2Az9CO93tF+uLGQhBMmj9oJTVaiFjOseNKahE57lWFVGH\nIAm3gA2dLd7MD6TG5FEKMQ/6nUvJBrKjS5kJLJmHyNUG1DWU88aOIN3YFVD4\nSGgr5EvxVmTE3t72LgMmsvqSfI+6z1TScVMNoETPBdkIUCGyaltAP1pH+ZEv\nLKmr\r\n=RGnx\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n\n\nButtons allow users to take actions, and make choices, with a single tap.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/button\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n```\n\n> _NOTE_: Examples here use the generic `\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n> _NOTE_: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Additional Information\n\n### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n\n> \\*_NOTE_: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n> buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n> directly within the `mdc-button` element.\n> However, the `mdc-button__label` class may become mandatory for all cases in the future, so it is recommended to\n> always include it to be future-proof.\n\n### Sass Mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass Mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`mdc-button-filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass Mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`mdc-button-container-fill-color($color)` | Sets the container fill color to the given color for an enabled button.\n`mdc-button-disabled-container-fill-color($color)` | Sets the container fill color to the given color for a disabled button.\n`mdc-button-icon-color($color)` | Sets the icon color to the given color for an enabled button.\n`mdc-button-disabled-icon-color($color)` | Sets the icon color to the given color for a disabled button.\n`mdc-button-ink-color($color)` | Sets the ink color to the given color for an enabled button, and sets the icon color to the given color unless `mdc-button-icon-color` is also used.\n`mdc-button-disabled-ink-color($color)` | Sets the ink color to the given color for a disabled button, and sets the icon color to the given color unless `mdc-button-icon-color` is also used.\n`mdc-button-density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`mdc-button-height($height)` | Sets custom height for button.\n`mdc-button-shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$mdc-button-density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`mdc-button-horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`mdc-button-outline-color($color)` | Sets the outline color to the given color for an enabled button.\n`mdc-button-disabled-outline-color($color)` | Sets the outline color to the given color for a disabled button.\n`mdc-button-outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `mdc-button-horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"The Material Components for the web 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/density":"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/button_5.0.0-canary.80a4d326f.0_1579898752655_0.09845683276547068","host":"s3://npm-registry-packages"}},"5.0.0-canary.ef7de4def.0":{"name":"@material/button","version":"5.0.0-canary.ef7de4def.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"f5d049b845785d2381f7d273f8e3cdf5a1c8f171","tarball":"https://registry.npmjs.org/@material/button/-/button-5.0.0-canary.ef7de4def.0.tgz","fileCount":16,"integrity":"sha512-iMU/osc1cQbG7Q3PqHGTe5CoRZ1L7KfoLxaMnjzoFgBZ0cPgR5ynJiqZRKXIsWPvLiuLUT/sj6PPj7M1qV5NTQ==","signatures":[{"sig":"MEYCIQC5bomXzdA7hW9dgE/Hk1Yy16tFc+m91MG+lL33UEBqIQIhAIP/WJmbJ8T6Pdwa1IfviFHDlIJf3lFh/JDdPtOniCO+","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":213975,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeK2JpCRA9TVsSAnZWagAAnwUP/RRHcdwta2ZsX7VBLbdj\nTNrr/Z3VRCcC+DBIfp6kJb9XMPiiKua6nNKCq5xVygSKaOk8Up4+DfXQ+vEB\nKd71FkOrbqdXD+/sbVRyKVY/42IphzbKgRAcEIc6uaEGLSRdR7FLtAR2lhdf\nnjM9q6f75Kqir75ZzYpqXW0PSBWveAFC5+7+rgaEqjD8up/hyQ4B6op+YKPY\nMuH0+ARo+cx8vq3Pvg6LUC6DhDQni4Z/vFNfZQu52g1/OmQIepqdwgvNettk\ns5RPZhwdPLD7pAmjLUQfD5MFKab+dcoTx1N3jbEmi+d578F5ScVEcjvhoP15\nJFMqrorAuCAZlRgyFgdiKElOdU1CrLx2wkNv/XLM4/HqJ4spceyKyKxGieFc\npe1wKaXLzF9Yd/3hspc748GqQ4PE7wHVjRnp/b1zcjdHBJoAd1vj9nEPMoYk\nCTK7vdHloYj/KNNmJbc0WE36iWfH5+LEzE4iaI0NeQMyWyjBpYjnuusGR8lO\nKxSlyWNuUk2L8QrZ0qVUdxobLrKYGpEOsDtVvaDxufxlN6BC4cNwik6Ds6zs\nza3wwkr4tf5fQjh7r+x519Q12gQ0mjn0zKTWjHQ0El02uNI25lNxIZEsUjq6\nf9VVgaQQl703sJEjp5GwYshUbrMpRJvKueMt9aAcy2EE84e76Ey1gnUXb2Il\nW+oM\r\n=pxz9\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n\n\nButtons allow users to take actions, and make choices, with a single tap.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/button\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n```\n\n> _NOTE_: Examples here use the generic `\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n> _NOTE_: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Additional Information\n\n### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n\n> \\*_NOTE_: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n> buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n> directly within the `mdc-button` element.\n> However, the `mdc-button__label` class may become mandatory for all cases in the future, so it is recommended to\n> always include it to be future-proof.\n\n### Sass Mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass Mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`mdc-button-filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass Mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`mdc-button-container-fill-color($color)` | Sets the container fill color to the given color for an enabled button.\n`mdc-button-disabled-container-fill-color($color)` | Sets the container fill color to the given color for a disabled button.\n`mdc-button-icon-color($color)` | Sets the icon color to the given color for an enabled button.\n`mdc-button-disabled-icon-color($color)` | Sets the icon color to the given color for a disabled button.\n`mdc-button-ink-color($color)` | Sets the ink color to the given color for an enabled button, and sets the icon color to the given color unless `mdc-button-icon-color` is also used.\n`mdc-button-disabled-ink-color($color)` | Sets the ink color to the given color for a disabled button, and sets the icon color to the given color unless `mdc-button-icon-color` is also used.\n`mdc-button-density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`mdc-button-height($height)` | Sets custom height for button.\n`mdc-button-shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$mdc-button-density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`mdc-button-horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`mdc-button-outline-color($color)` | Sets the outline color to the given color for an enabled button.\n`mdc-button-disabled-outline-color($color)` | Sets the outline color to the given color for a disabled button.\n`mdc-button-outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `mdc-button-horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"The Material Components for the web 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/density":"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/button_5.0.0-canary.ef7de4def.0_1579901545066_0.11666382513463902","host":"s3://npm-registry-packages"}},"5.0.0-canary.93e2288b6.0":{"name":"@material/button","version":"5.0.0-canary.93e2288b6.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"36040b374a382b9352948686edc72c8b4cd9132f","tarball":"https://registry.npmjs.org/@material/button/-/button-5.0.0-canary.93e2288b6.0.tgz","fileCount":16,"integrity":"sha512-ihNoUx+nVrgh9UnY/NjLSqFn8xI514pNKH1Tw96eLQbKtAlRZFqBS+Gi60tgv1iF1LOYmWuErm2yJ1W2zdUgjA==","signatures":[{"sig":"MEYCIQDQdHcDNVYFJ4KTxs4x0WYKIBoSU7OEIvuCO0DN9gDF+QIhAIvUhSWD6sdGBZ8hOCcXpWtOke+qBi7nu9wAjqhOax4F","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":213975,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeMGelCRA9TVsSAnZWagAAdkkP/0KQy+hwcq8wt9rE1zhg\ng27A2o6UipyHBITDQetNE0vctfvYKizbX75hi+jgoLoLHEYhkANA+GrLcf7u\nnANihTware8whkZ2VnRI0wMYNalPbev075pgQsXargvoCzo8roEdUuJGkTBq\nrWexIUpGE5FCjkxLS38qe6iMHGxLfuHT7YnPboTdBImgIS+GPHrCSfa15QW+\nl1zuMod0RHJ6vyq2arXwp+KHNSRIhNXFPEtzljnpC0hYO1FomHeOSOPT5bxv\n0uP4uYEmt77VEWXw/yIcXpLgebvCAiJptJAIlHSooDoAASdTwo65N51gAqqG\nb6Ee0Z52wis7kOfuKsn3IprkqpTPj+aiK7hEPQ8Q1/hs5hsExEkLpbDxZKqr\nWOBxV7PxaSRNlgz+E0g9OgdfWFLBgI14iPXDA6NioLq6ezIylsdwSCGYKEAQ\nVJscNVunf13B1RN99yq95QJEPlPFsK09+JDDEopIGKsswif5huC9myf9xG7Q\nj11IsESHBUp1Ksj6BtuGmPsBcLT6obJAEheeigxnfjUGLzFzbrHqlxiY+wLR\ncj4kFzTKGj42ET/RWG7L5XJeEAyZ5B4kyIO6YQwVVAmD1L4edSB7zCuZJGz6\nXt6UFjWw4v/q7OK+SR/5HzufYSPKLQWPT7ZClSFoWz6jn8AX43R5aJrA0BMK\noCGR\r\n=rrKE\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n\n\nButtons allow users to take actions, and make choices, with a single tap.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/button\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n```\n\n> _NOTE_: Examples here use the generic `\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n> _NOTE_: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Additional Information\n\n### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n\n> \\*_NOTE_: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n> buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n> directly within the `mdc-button` element.\n> However, the `mdc-button__label` class may become mandatory for all cases in the future, so it is recommended to\n> always include it to be future-proof.\n\n### Sass Mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass Mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`mdc-button-filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass Mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`mdc-button-container-fill-color($color)` | Sets the container fill color to the given color for an enabled button.\n`mdc-button-disabled-container-fill-color($color)` | Sets the container fill color to the given color for a disabled button.\n`mdc-button-icon-color($color)` | Sets the icon color to the given color for an enabled button.\n`mdc-button-disabled-icon-color($color)` | Sets the icon color to the given color for a disabled button.\n`mdc-button-ink-color($color)` | Sets the ink color to the given color for an enabled button, and sets the icon color to the given color unless `mdc-button-icon-color` is also used.\n`mdc-button-disabled-ink-color($color)` | Sets the ink color to the given color for a disabled button, and sets the icon color to the given color unless `mdc-button-icon-color` is also used.\n`mdc-button-density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`mdc-button-height($height)` | Sets custom height for button.\n`mdc-button-shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$mdc-button-density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`mdc-button-horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`mdc-button-outline-color($color)` | Sets the outline color to the given color for an enabled button.\n`mdc-button-disabled-outline-color($color)` | Sets the outline color to the given color for a disabled button.\n`mdc-button-outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `mdc-button-horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"The Material Components for the web 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/density":"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/button_5.0.0-canary.93e2288b6.0_1580230564810_0.6936377015432027","host":"s3://npm-registry-packages"}},"5.0.0-canary.34ef15f67.0":{"name":"@material/button","version":"5.0.0-canary.34ef15f67.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"7c60b9fedde5bd92c01572d31e00c0bd435424dd","tarball":"https://registry.npmjs.org/@material/button/-/button-5.0.0-canary.34ef15f67.0.tgz","fileCount":16,"integrity":"sha512-XmGKzg0iWkAQGlf0dPdZHENK6wiPw/6J1QVS8nHypLWAAS+7454M/HG+R8Q5VqaOutlKczJMc6+oakKvuUydXA==","signatures":[{"sig":"MEYCIQCdrsN88NHhQZQyigUqZ4WOjHtpwc7l41L2PMaSxJ6VdAIhAI450kHsWUlvUE8yjeD3XhplN7ARLOq1Aw9ccM5v19LT","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":213975,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeMG5DCRA9TVsSAnZWagAAumcP/i4tCX5L/1wu1M7S6ti7\n2ordnb7CCwsqGNPCo7LiL4tqDoVUpluMA4bdinV7wThSg13+aAxjK3Vc5DAT\n7Ar9y0rOLW+UlUSm1Gdk20WEUFylv4sKX7c7UP+TrVRgqfNT37TSemAySiXW\nmvj01OjwIV/pT30WY3XJy7Qw1TD9ww8//z6JG8/rimqEfb6Uagw5lv3Cnm8q\nUD8Td98AuylMNLh/FFNVTB9VmbWq0pc6ZHirFXgBqrR+ZXSU0W25bgVyMi4I\n5NusiU9amxslH1DqF5/GjIfmeqdzGGfg9JQtJtDjN3pC/Il1F8xulYCFgejx\n5F8//5ChyK2FjyYU2GXhH6ioglZ5+SKHAOcFM9HWfg/c4pFxB00uHnlqHoZn\npM0ztE6+oL0Fi5/YF02SpYWDwfw8AXyPwqhOLBDXeFEhEXBHIiI/KSMeZz/a\nwL7yfuBG+uF2jvn6nob8+8+M2LIRco0AAJ1wSZQL30PXjd8EVUfsJQU44CSk\nkfFxJqzvhJzx+wNTG2tDt8lq+hsPg4xninwq0cdg8kEmtUf6e3YKp/VgO9gN\n0QLLdlmfeKyGwZWXh91cfIiqgaEiXIBBCc9hY6KfUVrHKhtM6XRYs8xaDGux\nZHiRzrXHcw7yB8t5RyGiDIQlQ1vZ5eF9xCfzPBa1nFw36NizFf0ZuJRq8F++\n6QVV\r\n=3cFd\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n\n\nButtons allow users to take actions, and make choices, with a single tap.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/button\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n```\n\n> _NOTE_: Examples here use the generic `\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n> _NOTE_: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Additional Information\n\n### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n\n> \\*_NOTE_: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n> buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n> directly within the `mdc-button` element.\n> However, the `mdc-button__label` class may become mandatory for all cases in the future, so it is recommended to\n> always include it to be future-proof.\n\n### Sass Mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass Mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`mdc-button-filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass Mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`mdc-button-container-fill-color($color)` | Sets the container fill color to the given color for an enabled button.\n`mdc-button-disabled-container-fill-color($color)` | Sets the container fill color to the given color for a disabled button.\n`mdc-button-icon-color($color)` | Sets the icon color to the given color for an enabled button.\n`mdc-button-disabled-icon-color($color)` | Sets the icon color to the given color for a disabled button.\n`mdc-button-ink-color($color)` | Sets the ink color to the given color for an enabled button, and sets the icon color to the given color unless `mdc-button-icon-color` is also used.\n`mdc-button-disabled-ink-color($color)` | Sets the ink color to the given color for a disabled button, and sets the icon color to the given color unless `mdc-button-icon-color` is also used.\n`mdc-button-density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`mdc-button-height($height)` | Sets custom height for button.\n`mdc-button-shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$mdc-button-density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`mdc-button-horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`mdc-button-outline-color($color)` | Sets the outline color to the given color for an enabled button.\n`mdc-button-disabled-outline-color($color)` | Sets the outline color to the given color for a disabled button.\n`mdc-button-outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `mdc-button-horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"The Material Components for the web 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/density":"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/button_5.0.0-canary.34ef15f67.0_1580232258625_0.06279773911640008","host":"s3://npm-registry-packages"}},"5.0.0-canary.d3d176ba5.0":{"name":"@material/button","version":"5.0.0-canary.d3d176ba5.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"1519375e14d174596666ee33fda2740cc923409c","tarball":"https://registry.npmjs.org/@material/button/-/button-5.0.0-canary.d3d176ba5.0.tgz","fileCount":16,"integrity":"sha512-VKkLFSAVnHvtluZVsD8z8OocLhYZY20P8vEPV5Vh05JIYVvYJLktRZncDxk+lfEa2z+jLN+aLScYNGapiDv8ZQ==","signatures":[{"sig":"MEQCIGU5Z52Y2rSNREmMo9bSgHwsmuUZyE54XbsFW+hJh/+LAiBii63tcp4ZUN7oq5PfJGqDdfJ5QCU+P/DbTvS/QlL3Vg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":213975,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeMG99CRA9TVsSAnZWagAASSsQAI59GpIWnmzRSqWW0HWS\nuzilFgAhrVRmYCMLTrtGWKzTx/DAVMhERPu4GhF4YEPTZm9usTWXZ5M/nv5p\njp2rdep5uHOxpak4GAPywhDOL6dou86/c/0wUpUQmJrPlDZ+Vc+YpCs0emHr\ngCkSc25R+oteBiBDft3tgo7hZYvrvPg72iHtKYldSYIEdJR8gJ0Q80/taAWO\n6d6zJ+2tEcUwKrjijPwTOEJTcl8QhlwWMFO6lsh5skv1b8SsxWy1Q8uYZRIG\nek+SNMbzJymGaX1U5ymi1Y+hn/Kv2Ikqh2EWCcQhCT5m7Ywq0n0wiTy2CQGg\np74gal0daytZGDGzErWsvyoKppw0i9Brtpg1ZukLLr8WPoXIwxR5qNndJ3N0\nHPVTJVKa/XB1lNHYIy2SyaEvJhD85vUApzJp1lAWmLRj31C+DgVqxyVSXtY+\ngJB50HoiTEhmBfyEySDJMczQjZgepYxtCu/0jer9/MjAVjxfsbbr/BBqDo+x\ncCHrXsvFYkcbP0PMBWzlcVjYanQQQPuqIIlw2rRphvQS/t51+eDyrFzSLMTY\nAMqYeRvDwQ9sWOFSw7xfXnRAYGQfxT3dNsY57UzLqBlvEggMdUzjrs1XVzCo\n1/a/9EOe41SBhH2DdPZsq/jKTAHyOxfJCby+WVdKxnLleiUUTQiiSMiFRT1N\n6PGW\r\n=htrz\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n\n\nButtons allow users to take actions, and make choices, with a single tap.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/button\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n```\n\n> _NOTE_: Examples here use the generic `\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n> _NOTE_: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Additional Information\n\n### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n\n> \\*_NOTE_: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n> buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n> directly within the `mdc-button` element.\n> However, the `mdc-button__label` class may become mandatory for all cases in the future, so it is recommended to\n> always include it to be future-proof.\n\n### Sass Mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass Mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`mdc-button-filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass Mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`mdc-button-container-fill-color($color)` | Sets the container fill color to the given color for an enabled button.\n`mdc-button-disabled-container-fill-color($color)` | Sets the container fill color to the given color for a disabled button.\n`mdc-button-icon-color($color)` | Sets the icon color to the given color for an enabled button.\n`mdc-button-disabled-icon-color($color)` | Sets the icon color to the given color for a disabled button.\n`mdc-button-ink-color($color)` | Sets the ink color to the given color for an enabled button, and sets the icon color to the given color unless `mdc-button-icon-color` is also used.\n`mdc-button-disabled-ink-color($color)` | Sets the ink color to the given color for a disabled button, and sets the icon color to the given color unless `mdc-button-icon-color` is also used.\n`mdc-button-density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`mdc-button-height($height)` | Sets custom height for button.\n`mdc-button-shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$mdc-button-density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`mdc-button-horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`mdc-button-outline-color($color)` | Sets the outline color to the given color for an enabled button.\n`mdc-button-disabled-outline-color($color)` | Sets the outline color to the given color for a disabled button.\n`mdc-button-outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `mdc-button-horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"The Material Components for the web 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/density":"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/button_5.0.0-canary.d3d176ba5.0_1580232572683_0.040501705594929494","host":"s3://npm-registry-packages"}},"5.0.0-canary.32c1df133.0":{"name":"@material/button","version":"5.0.0-canary.32c1df133.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"746afc9c370ecc5697fa73a526b2fa9b6434d371","tarball":"https://registry.npmjs.org/@material/button/-/button-5.0.0-canary.32c1df133.0.tgz","fileCount":16,"integrity":"sha512-G8VZdupMD3d5KshE3XvXDikpiMAcyPSIneeO0woUoPEgNNyvlLnHo2xhHEc44aGhzs8sDOEoAswsoclDyzHrvw==","signatures":[{"sig":"MEUCIQCUtQVL36cjsdyZhhQ5BWOe1zlyzy3VkV3Y9+57Frk4nQIgB3k81+U+xTRfBLxaw5tWUmqQE9z6dY1XJ62EzhDbHuw=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":213975,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeMI7hCRA9TVsSAnZWagAAXO0P/R1FG40ESdyT7t8i9cZo\nuy6VTOCYlWjG28XnNwhptrCSyYzbV0/0C8mtZ1OjAEzmF849XDkklMyowZgX\nN6IBEGzlEThbnH2rPzqz4haRzvhYVU1zZmkyjRgELGaG0WO33A03JA8qcNbT\nJZ+9upo1jDIX+Dvxmj4iavC5B6RlsNXvc7XRyUYpwJKxTeIp9/6RyiwX9nnk\njC5rcLJU6FNyzwPo6G9ftv7dyZWD+Gze0CseLiLEDdFdVTSS6k6prB0w162k\nFS16QavBazm3Wz0My6Wm+dLZ0CT8IVNiMb4DK96+kV3lNzmKUxfAEdCZhmNL\nXy+MMctLyf+QsbpB3oB+NBu8p2EOVavlITft3tgUQWUmQaF2Eb5VBc4kpI0b\nuPmI169CgECoXptrvcbbu0Ubxm96/hdTYjzLYj5cnyOxIEvcq6p8sKHItMsD\nLjWlptZ2hLdh7fvNDAnES8c6PW4Wc+JbA/7EGKVdghB7RIim9gBuenbpxLBP\nty2h/mApMRLyFshCShfXb9USJOd8lFWnvYhtYu7rJdenTvekVJ1orCv3zh8C\nq0SbB5UEn8BkXCfJX4jHTyGVQby9ppuz3OvjgfePSTP0JA+h3cUiUIDBxPn0\nwOMU37jhiBENZdihVORiTYf1jU1smOshTWl5aDgufKrcuyV7/e9kTq+z5gIS\nIlXj\r\n=vBfy\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n\n\nButtons allow users to take actions, and make choices, with a single tap.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/button\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n```\n\n> _NOTE_: Examples here use the generic `\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n> _NOTE_: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Additional Information\n\n### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n\n> \\*_NOTE_: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n> buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n> directly within the `mdc-button` element.\n> However, the `mdc-button__label` class may become mandatory for all cases in the future, so it is recommended to\n> always include it to be future-proof.\n\n### Sass Mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass Mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`mdc-button-filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass Mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`mdc-button-container-fill-color($color)` | Sets the container fill color to the given color for an enabled button.\n`mdc-button-disabled-container-fill-color($color)` | Sets the container fill color to the given color for a disabled button.\n`mdc-button-icon-color($color)` | Sets the icon color to the given color for an enabled button.\n`mdc-button-disabled-icon-color($color)` | Sets the icon color to the given color for a disabled button.\n`mdc-button-ink-color($color)` | Sets the ink color to the given color for an enabled button, and sets the icon color to the given color unless `mdc-button-icon-color` is also used.\n`mdc-button-disabled-ink-color($color)` | Sets the ink color to the given color for a disabled button, and sets the icon color to the given color unless `mdc-button-icon-color` is also used.\n`mdc-button-density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`mdc-button-height($height)` | Sets custom height for button.\n`mdc-button-shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$mdc-button-density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`mdc-button-horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`mdc-button-outline-color($color)` | Sets the outline color to the given color for an enabled button.\n`mdc-button-disabled-outline-color($color)` | Sets the outline color to the given color for a disabled button.\n`mdc-button-outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `mdc-button-horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"The Material Components for the web 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/density":"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/button_5.0.0-canary.32c1df133.0_1580240608773_0.5573707099048053","host":"s3://npm-registry-packages"}},"5.0.0-canary.f3adce86f.0":{"name":"@material/button","version":"5.0.0-canary.f3adce86f.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"5d6ee76741076180c04a881187d95e7559806f5f","tarball":"https://registry.npmjs.org/@material/button/-/button-5.0.0-canary.f3adce86f.0.tgz","fileCount":16,"integrity":"sha512-1/NTOpbZlSERXkxQ6u42dweq/iKrinPansqpM1lHx077DXYN6C73GQuOlOsaqlhMFPKRATqz9R12ky9ElOMJKw==","signatures":[{"sig":"MEUCICzKdalwjL0rbHCBaziF64SdCynkaEzwMXBLB7cqy630AiEAsk2OQ/4Vj4FTWB+Gq0bGoYlTo79BSfKkFX8kZiUwu1E=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":213975,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeMKxSCRA9TVsSAnZWagAA2AsP/iu2ost7wyT/yvQWfrQe\n05D+Z53DREcnqjO6xmz2SJdcD5sCxwj95y82iEqQGBqUV7MJb2dJi5NoPYeM\nwacSiYujnIWTdeoO55KuTe+y71u16DL8l6ZL1XwRpLJWDmmlQwVJau6QqMvR\ncniOjv9HcquqVzLB4HEVT6gBUYJLcxzTuRtlqYCRNoO33Y9a6bCnLB350VlC\n81dqz0haTZZ5gUkDFPLRrfv/UpRmOXJs19nE2aWvP67QmbMY8yB8bkSulUUn\nGuCxFKJmV/SXc+IkP9nYzujSMtOHQygpI0WUrMR8k87Yts4tfl5+aIuFyANM\nTa2SddFqugNhaVv0YLkGRY/y8JxZpISJ/zpkprjjKsx9B6/Xmf4fYa+HmjiJ\n2/AVNd8xwNYULLYWeHxN6YgqwBWQtDA4/8B6MTw+/eOxvt0buFCa7sEC2YON\nwdfXLLeQ/iJjBRi75YP3o0UiAzKa52Y4DiNBaHbi3++TJG4vqb2W2N+EFgFb\nkSEx6S0ajPSpqmpNL894lHKTN/lz4IGp52F1ZKbPQfra4gee6u0Jij/4rPwK\no/XcctZZrScsCXTBWu/hlZ+U1DNetgr+gNVFFrHbC8lHftB7qXPj4cwY8b01\ndgSynr7LfzrPYlBG/4nR/2AlHi1H3deURDR2MglnDDMqGDw2w3b1pOjWvuIe\nfmpc\r\n=3AoY\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n\n\nButtons allow users to take actions, and make choices, with a single tap.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/button\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n```\n\n> _NOTE_: Examples here use the generic `\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n> _NOTE_: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Additional Information\n\n### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n\n> \\*_NOTE_: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n> buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n> directly within the `mdc-button` element.\n> However, the `mdc-button__label` class may become mandatory for all cases in the future, so it is recommended to\n> always include it to be future-proof.\n\n### Sass Mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass Mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`mdc-button-filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass Mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`mdc-button-container-fill-color($color)` | Sets the container fill color to the given color for an enabled button.\n`mdc-button-disabled-container-fill-color($color)` | Sets the container fill color to the given color for a disabled button.\n`mdc-button-icon-color($color)` | Sets the icon color to the given color for an enabled button.\n`mdc-button-disabled-icon-color($color)` | Sets the icon color to the given color for a disabled button.\n`mdc-button-ink-color($color)` | Sets the ink color to the given color for an enabled button, and sets the icon color to the given color unless `mdc-button-icon-color` is also used.\n`mdc-button-disabled-ink-color($color)` | Sets the ink color to the given color for a disabled button, and sets the icon color to the given color unless `mdc-button-icon-color` is also used.\n`mdc-button-density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`mdc-button-height($height)` | Sets custom height for button.\n`mdc-button-shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$mdc-button-density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`mdc-button-horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`mdc-button-outline-color($color)` | Sets the outline color to the given color for an enabled button.\n`mdc-button-disabled-outline-color($color)` | Sets the outline color to the given color for a disabled button.\n`mdc-button-outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `mdc-button-horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"The Material Components for the web 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/density":"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/button_5.0.0-canary.f3adce86f.0_1580248145586_0.20395283810453102","host":"s3://npm-registry-packages"}},"5.0.0-canary.a4423f890.0":{"name":"@material/button","version":"5.0.0-canary.a4423f890.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"28c1de5a9e59f9c858453ccfeeed7b48be40c762","tarball":"https://registry.npmjs.org/@material/button/-/button-5.0.0-canary.a4423f890.0.tgz","fileCount":16,"integrity":"sha512-VVPbC79FYdFtiAFO7N6zQQ9mQ1EyuJzQKlTOyQ3wmJDMSI9zuLub2ezbY0LZjVVu7S4a1u4pXFkCVdolqUENoQ==","signatures":[{"sig":"MEYCIQCH+0ug+cHBl9bMs1Oe0DR9yYCyJVlTdxxJU//tel2v5gIhAN/KGTMO9n7X4OGyYWyw5IzxmNrqTlqyqcrv09bW7QDd","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":213975,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeMfSVCRA9TVsSAnZWagAA1ZQP/0KCwdWNzXqtigoPq2Qv\nka1BODtnmXSPl/VIxkSMjubJdZFz01x0tsr1MPzuIl75HvLILLjdEpF0odp6\nCTspW8Ohn7HV6BNsCc8LXH5Rtm/3naS0J+hSDAIamyBqLoEPC1+5wvH6L9DI\nTqQjlcoQqsClI3q+9lZRKOaf5xrHipxB4evVQlJcDjiaP1YDQSvOi3w0K0D1\nH4DtrP4Fksr5QSIv2mNBVfMrQ77pCDITGkkLiuDCAId0dFG0MSZhN+L23oQE\nyBSGKkSU6QHKuxq5j2+SUIVKMgpdJUb+QUBuViOgJfXZ3ykfncA6+J1QbL68\nRfrXdFohGfODBC8p2xU8Ee4iJPd4C3uPXaKwtKTazHWbbzzC83VFgEbmHSdc\nC3SN1jCmiQTplvKoh/fWpqQaCZBveEiyvWgVFl4Fwt+jcxbpOjBlbQWt8pU5\nFk3Hb7SGrm3jFdKLp2SrtRdWnBQBiVSQ0m+RPhx8t2dhWD2Onb9819aYQzD3\nsuMur2yUiDHSqrw2K5Thg39cMjTxpJGAeV5RgjRUgQ9k+qIaLcMlfLmLda/+\nepfBNJKQbE8de4oy1Np5bbmQx5BcaRA16LI2K6JjHLuEB3CpdGxWQVf8mTic\ne8sSiL37FOYzU3XeEjNKnrIHpMAhaHs1lhm1cgB/Li//3rF6X7CpKN38KA4+\nPnhS\r\n=Y8xu\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n\n\nButtons allow users to take actions, and make choices, with a single tap.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/button\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n```\n\n> _NOTE_: Examples here use the generic `\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n> _NOTE_: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Additional Information\n\n### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n\n> \\*_NOTE_: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n> buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n> directly within the `mdc-button` element.\n> However, the `mdc-button__label` class may become mandatory for all cases in the future, so it is recommended to\n> always include it to be future-proof.\n\n### Sass Mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass Mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`mdc-button-filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass Mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`mdc-button-container-fill-color($color)` | Sets the container fill color to the given color for an enabled button.\n`mdc-button-disabled-container-fill-color($color)` | Sets the container fill color to the given color for a disabled button.\n`mdc-button-icon-color($color)` | Sets the icon color to the given color for an enabled button.\n`mdc-button-disabled-icon-color($color)` | Sets the icon color to the given color for a disabled button.\n`mdc-button-ink-color($color)` | Sets the ink color to the given color for an enabled button, and sets the icon color to the given color unless `mdc-button-icon-color` is also used.\n`mdc-button-disabled-ink-color($color)` | Sets the ink color to the given color for a disabled button, and sets the icon color to the given color unless `mdc-button-icon-color` is also used.\n`mdc-button-density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`mdc-button-height($height)` | Sets custom height for button.\n`mdc-button-shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$mdc-button-density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`mdc-button-horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`mdc-button-outline-color($color)` | Sets the outline color to the given color for an enabled button.\n`mdc-button-disabled-outline-color($color)` | Sets the outline color to the given color for a disabled button.\n`mdc-button-outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `mdc-button-horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"The Material Components for the web 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/density":"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/button_5.0.0-canary.a4423f890.0_1580332180950_0.3531582973762586","host":"s3://npm-registry-packages"}},"5.0.0-canary.9351f167d.0":{"name":"@material/button","version":"5.0.0-canary.9351f167d.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"20e45bbf018c355225b8631f277f6b26c9affb3f","tarball":"https://registry.npmjs.org/@material/button/-/button-5.0.0-canary.9351f167d.0.tgz","fileCount":16,"integrity":"sha512-ZiGSfyq+v9VHzKNOflDvYivDlYYKCZOjRHvmXVozpgkQrl7nvpQo//ab7zAPbQwVb69nzmuXSv+qgxe8gfxgkw==","signatures":[{"sig":"MEUCICcCCUC5TSskhiukiQWd8l+4whgCAaQlihGqU51eDcNSAiEAiyte9SnKHBVS0btzxrvhfsBEvekXTROE7+Kc3O6O+G4=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":213975,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeMf9hCRA9TVsSAnZWagAA4iUP/3lMX0rZ4Rh3XgaNrMkY\noSv8E+9rYh4fDZVM57vfiXjhrF3c7+Gt59vQi/mLagl2rjk3YwfklRpzL/Hu\nSGTuE+ZxFC1TVw8Yild5jBfCDYZZ1/6l+fSyIY2WQcZhZe8xatMAOJ7Nbtz5\nAORc3VGzTOgWDXLbopN5gju2kANWZa13EQ4QA1KneS2PTu2HecqUlPpy27yZ\nUGCaJh/Yxy2aMG57kY3aL8E+ypUJz/PQ7xrnFuV41JrCW+rdBZ9Lg9vH8TEa\ny2BiusjsiVBcQMn5NVEr/ysWrhy9L1r87FOYdimxLMFXHYEHVo9Kcc11c/2Y\nwlfMH7CfaT4yf7Zla7MovGfm+zueJvhBF9Jh/sgr3P2Ko1B6KU+wFjEnyg7c\nfMcV0CiyZFsGDdSfbR+R7W+b/7Z8ZDiy0qQ932E98vJ5lEDBD43zHg8wl+J/\nWeqtepslMK0UIBipbopV2LS5WFbcPtXxIfMZxtF8AwCYKJKSd9aPRCcfebSh\nytQyD5Nfmpa5XkcYSpTbo71fRcTXMGWtM9YQ5Wgj66ptIukw1HX5YnyKBR9y\naCCUZ/Iny+oUi1n/0KtLJ+LLOP0zfBWKsRpXS14Vz4Zx6DhF6HxmkVX3Cx+p\nEoB7DnzkJnKuRxXYZyStiWabcOQEKbgVanXbxgiSnZ8cG6gUGy9rd5O2sns7\ntLDZ\r\n=2kJb\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n\n\nButtons allow users to take actions, and make choices, with a single tap.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/button\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n```\n\n> _NOTE_: Examples here use the generic `\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n> _NOTE_: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Additional Information\n\n### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n\n> \\*_NOTE_: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n> buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n> directly within the `mdc-button` element.\n> However, the `mdc-button__label` class may become mandatory for all cases in the future, so it is recommended to\n> always include it to be future-proof.\n\n### Sass Mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass Mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`mdc-button-filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass Mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`mdc-button-container-fill-color($color)` | Sets the container fill color to the given color for an enabled button.\n`mdc-button-disabled-container-fill-color($color)` | Sets the container fill color to the given color for a disabled button.\n`mdc-button-icon-color($color)` | Sets the icon color to the given color for an enabled button.\n`mdc-button-disabled-icon-color($color)` | Sets the icon color to the given color for a disabled button.\n`mdc-button-ink-color($color)` | Sets the ink color to the given color for an enabled button, and sets the icon color to the given color unless `mdc-button-icon-color` is also used.\n`mdc-button-disabled-ink-color($color)` | Sets the ink color to the given color for a disabled button, and sets the icon color to the given color unless `mdc-button-icon-color` is also used.\n`mdc-button-density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`mdc-button-height($height)` | Sets custom height for button.\n`mdc-button-shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$mdc-button-density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`mdc-button-horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`mdc-button-outline-color($color)` | Sets the outline color to the given color for an enabled button.\n`mdc-button-disabled-outline-color($color)` | Sets the outline color to the given color for a disabled button.\n`mdc-button-outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `mdc-button-horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"The Material Components for the web 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/density":"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/button_5.0.0-canary.9351f167d.0_1580334944723_0.2661933322391219","host":"s3://npm-registry-packages"}},"5.0.0-canary.29b89dbc1.0":{"name":"@material/button","version":"5.0.0-canary.29b89dbc1.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"59d455fc9d0e231111c13b97574ce3e3e2a3c791","tarball":"https://registry.npmjs.org/@material/button/-/button-5.0.0-canary.29b89dbc1.0.tgz","fileCount":16,"integrity":"sha512-h+chg8biOq2Bk7xB9PdqPp7WX5/sFoWjuMkt4iFBiNQMqc4/nclQIuaSNJoO6KaXDk52HXzKJSUg5KqlepQE0w==","signatures":[{"sig":"MEUCICqy0ilJ7/zjVFtuduWIi3xeUO/DVm0R2hNIfqxkfMvVAiEAmbsiy7Rv7w9+sw2IdhWB/DaicDSPDsl3/ynTFju6IjI=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":213975,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeMgRWCRA9TVsSAnZWagAAP0EP/2uxdfZCJhsQgJPAGxgz\n0ocGGCfAxdKnf8odOT0R7dSMKHFDz45QqtWokB/m4W5hQUAZFcnZ9FqrxJ9W\ngcE+2BQqh+rxJ0KQBxXJgXvY+z3bIZdDq4vBVYUUvDKnuQfPJCOU9Qw+cmS+\n/XAuL09KbI0l+vuZ59UTDcd3DfwYQJRjPrMUR8EQr1wprtc0CWaXp0AU9JWR\nE0r7efAv38jwBUs8RYU2a70pumT4T4B+CEPbqNVxQqoKOY1hSd5NaMFSZyw3\n0Znb3bE/DD6la4N8gf/SFit7COkaLm/DHkbaqYk9azrA6tkivt/egiTJQBWN\n76dxTL4rfO0rivZCNxhvudlTzRqPKDC7fo3v6tlIL05RkXH+IU+WxbZcj+/H\nOu1ilphLpQWjiHdGidKLUWfxzWNHS7ICtDOBzeVi4SlY/oJGphL93qVDUCUB\ngR2jU5cbYISRQQrEebKhL7q2+sXe4bnAAhrUtTVhTnl3ZxLS1k09mP5q3eAE\n0V1f950lo6Sm7qr5rQ7zJbW8fkfdTycTpq32XSpmz8mLkopD/0w1Rt+PUx5C\nuKZ/wOZmVw30nT8YJLXaN3qNux5CSbyCyQAfCS/OVBHFsVaJokiDKUT55bFU\nRtIwjLuDAcUfYGqsJ9U0iNUIjEfSuzoYBeDMBV0M8Aaizxg+Pf60WZKZTdJI\ncl+v\r\n=Lnyf\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n\n\nButtons allow users to take actions, and make choices, with a single tap.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/button\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n```\n\n> _NOTE_: Examples here use the generic `\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n> _NOTE_: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Additional Information\n\n### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n\n> \\*_NOTE_: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n> buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n> directly within the `mdc-button` element.\n> However, the `mdc-button__label` class may become mandatory for all cases in the future, so it is recommended to\n> always include it to be future-proof.\n\n### Sass Mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass Mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`mdc-button-filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass Mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`mdc-button-container-fill-color($color)` | Sets the container fill color to the given color for an enabled button.\n`mdc-button-disabled-container-fill-color($color)` | Sets the container fill color to the given color for a disabled button.\n`mdc-button-icon-color($color)` | Sets the icon color to the given color for an enabled button.\n`mdc-button-disabled-icon-color($color)` | Sets the icon color to the given color for a disabled button.\n`mdc-button-ink-color($color)` | Sets the ink color to the given color for an enabled button, and sets the icon color to the given color unless `mdc-button-icon-color` is also used.\n`mdc-button-disabled-ink-color($color)` | Sets the ink color to the given color for a disabled button, and sets the icon color to the given color unless `mdc-button-icon-color` is also used.\n`mdc-button-density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`mdc-button-height($height)` | Sets custom height for button.\n`mdc-button-shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$mdc-button-density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`mdc-button-horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`mdc-button-outline-color($color)` | Sets the outline color to the given color for an enabled button.\n`mdc-button-disabled-outline-color($color)` | Sets the outline color to the given color for a disabled button.\n`mdc-button-outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `mdc-button-horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.14.1/node@v10.16.3+x64 (darwin)","description":"The Material Components for the web 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/density":"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/button_5.0.0-canary.29b89dbc1.0_1580336213855_0.8477287222094003","host":"s3://npm-registry-packages"}},"5.0.0-canary.45985457b.0":{"name":"@material/button","version":"5.0.0-canary.45985457b.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"07c99d94de9a6dca62f1f20b54e2cbd5ed3672a5","tarball":"https://registry.npmjs.org/@material/button/-/button-5.0.0-canary.45985457b.0.tgz","fileCount":16,"integrity":"sha512-PdIA60+us0yUygTuK0RitGx6CsBcv7iNfNYb749LIUPoXER4HF16t7GGr6PsxQl4uxcO1Gnc04HKmLNBfWRaPA==","signatures":[{"sig":"MEQCIDdIkFauLMNLCpSIQNV5tK11JIFJvwtX/jMvJsX3cLP+AiAJ+sIHdUj21YLH+ivBN9GNdU+gyUD6jojdIqjQUYTlAg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":213975,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeMhYvCRA9TVsSAnZWagAA7DkP/37t3ByRoUuZ0JMHQGTv\nns1JMEG5TyFiRVmMzMF7I9pVx9twIhqW51ajYN0HpEomsjNjvRrZ1W88uXq2\nCCbKLMEdX4GaJL/siNlrlfdJT5wfTGketr+xGboUudodqr2Kmoq8K2HJFPdh\nIfkN3QMwYkwTzpdyJTkZGgF3eP+BY6A4I7tiiM6xDsREVNMsDCeGKxJatGXE\nfoHeHAeWx3S2myCIPaL9xJ0whLj/h4zqGD3+bDCfMNf91pfO6SkbGmJRdx8u\nl3A6owmjyc/Drx/BTZ+1DMbOdKYYWuwu4kiocvDhgUnmGZFhHfmaaz6kDB/U\nbpeEcfjgBx/z1cwiLntxvH4Dj8dL2une5V4QNwpMl//WLSrtlE9KXnugB4vB\nYwM4dkVWJMxZLWxsNnNuTQAEqeCz/AL4MOAObiDb2NcUvSXR/he1psjOhvB2\n6PbpXhF13gByjfy4hpRlTHDAAe5mfJx/037IkWPCFxTaxe5a2J97+II5eFiX\nZlMFvkYBdQLDnEkyo5HjeqvtxjBjM1IR93P8ltbQ6em+hPs0JyWJOL+orV3K\nFJHKND22yGriSvrrYFN7tVp37aQfhAMcRMttrgVwEmQexfIaEYu5eCPBgqFY\nrZAUOWQJkJHJfngDViceV2EaX4B7uCFx+E7H1ojYJeKnP/LgSHKRygDozAQw\nx4RJ\r\n=CmNQ\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n\n\nButtons allow users to take actions, and make choices, with a single tap.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/button\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n```\n\n> _NOTE_: Examples here use the generic `\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n> _NOTE_: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Additional Information\n\n### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n\n> \\*_NOTE_: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n> buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n> directly within the `mdc-button` element.\n> However, the `mdc-button__label` class may become mandatory for all cases in the future, so it is recommended to\n> always include it to be future-proof.\n\n### Sass Mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass Mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`mdc-button-filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass Mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`mdc-button-container-fill-color($color)` | Sets the container fill color to the given color for an enabled button.\n`mdc-button-disabled-container-fill-color($color)` | Sets the container fill color to the given color for a disabled button.\n`mdc-button-icon-color($color)` | Sets the icon color to the given color for an enabled button.\n`mdc-button-disabled-icon-color($color)` | Sets the icon color to the given color for a disabled button.\n`mdc-button-ink-color($color)` | Sets the ink color to the given color for an enabled button, and sets the icon color to the given color unless `mdc-button-icon-color` is also used.\n`mdc-button-disabled-ink-color($color)` | Sets the ink color to the given color for a disabled button, and sets the icon color to the given color unless `mdc-button-icon-color` is also used.\n`mdc-button-density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`mdc-button-height($height)` | Sets custom height for button.\n`mdc-button-shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$mdc-button-density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`mdc-button-horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`mdc-button-outline-color($color)` | Sets the outline color to the given color for an enabled button.\n`mdc-button-disabled-outline-color($color)` | Sets the outline color to the given color for a disabled button.\n`mdc-button-outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `mdc-button-horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"The Material Components for the web 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/density":"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/button_5.0.0-canary.45985457b.0_1580340783123_0.579174385557157","host":"s3://npm-registry-packages"}},"5.0.0-canary.a1a0deb3e.0":{"name":"@material/button","version":"5.0.0-canary.a1a0deb3e.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"b588ddd57be5afa407a9966da049719d4ff560ba","tarball":"https://registry.npmjs.org/@material/button/-/button-5.0.0-canary.a1a0deb3e.0.tgz","fileCount":16,"integrity":"sha512-3KSfbc1N5zBI8IJrjB6WOIe82xXTWEr5lnKZz0gpY3yiemlY9PrIyCnN3GBRfCnhlAtM6Z+T4ipMyt5QpxvPZQ==","signatures":[{"sig":"MEUCIHeWePqV53YUhMZBHxb5hkSAXR+sZiiEX8eFLWXNV4/5AiEApkoPvswhzQS9ISUyIWVkVQs+CVm4xlFrW6sm1RfpRnc=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":213975,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeMxRYCRA9TVsSAnZWagAA/DMQAJZUqobRDUrJlNXmREVJ\nzMRQ+pw/q8H7f2Ipm1Wvo7zx80h+9otR4bZ3pl7o1MKh242jp2/DMvB35dwC\nO5DD6xuB86WiI8RwOU1e0mmv3gbNBcY2KYsmBltVA0EPwAIWF0gLUO4OpP3q\nGygnvHhm9YqqjQ2Szq/AqjoTloEgVWDjhtTEpUA2MLRmeaKyEDSp8sDIp/Fd\nVYS6qD1mw7tYvzYz7d/xCrRdcD0EUR4oZCzZ6t43eGYm7JrJbq4PYuFI6lvx\nY7bE87CurGPtJXCHeNomM8NIQd5uOqVyFzOYk007du+2EWUFChtEGPeRv+6j\ndsEqnoFXDabWj9vCw3A4njrVyWu1CLRAabUiscUwaC7jbVGjLn4eMuoZXbKw\njQTNcEcmADNAysBGfMWJ29EOBHiqVVjHn1iGb6FcvFTmVg1yYOVFCo59x0SA\nyRotncvbtydwPIH9ghJX1Jc1aB3wEQUKolT1fGYTtufzopxQ34pLEMSMmFB4\nON+DpcyJ8ycJKq4BWwtowiaw7uSaqae6EY4328JZ9rxDQHkzHconAZG2LdF2\n5v8ntulRdR31wMWncrxtdNHbib+9j3l9C2OUgEbN93qmGhPdTBl5sPITxwAv\ncjdoYmyvOG8I4NOS0r63QfvIA4X0hs1gRZtihLKFrORHHcDBEvXuadQuJfKh\nf390\r\n=1Kuo\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n\n\nButtons allow users to take actions, and make choices, with a single tap.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/button\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n```\n\n> _NOTE_: Examples here use the generic `\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n> _NOTE_: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Additional Information\n\n### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n\n> \\*_NOTE_: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n> buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n> directly within the `mdc-button` element.\n> However, the `mdc-button__label` class may become mandatory for all cases in the future, so it is recommended to\n> always include it to be future-proof.\n\n### Sass Mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass Mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`mdc-button-filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass Mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`mdc-button-container-fill-color($color)` | Sets the container fill color to the given color for an enabled button.\n`mdc-button-disabled-container-fill-color($color)` | Sets the container fill color to the given color for a disabled button.\n`mdc-button-icon-color($color)` | Sets the icon color to the given color for an enabled button.\n`mdc-button-disabled-icon-color($color)` | Sets the icon color to the given color for a disabled button.\n`mdc-button-ink-color($color)` | Sets the ink color to the given color for an enabled button, and sets the icon color to the given color unless `mdc-button-icon-color` is also used.\n`mdc-button-disabled-ink-color($color)` | Sets the ink color to the given color for a disabled button, and sets the icon color to the given color unless `mdc-button-icon-color` is also used.\n`mdc-button-density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`mdc-button-height($height)` | Sets custom height for button.\n`mdc-button-shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$mdc-button-density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`mdc-button-horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`mdc-button-outline-color($color)` | Sets the outline color to the given color for an enabled button.\n`mdc-button-disabled-outline-color($color)` | Sets the outline color to the given color for a disabled button.\n`mdc-button-outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `mdc-button-horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"The Material Components for the web 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/density":"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/button_5.0.0-canary.a1a0deb3e.0_1580405848191_0.5880584623025473","host":"s3://npm-registry-packages"}},"5.0.0-canary.181486643.0":{"name":"@material/button","version":"5.0.0-canary.181486643.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"018ead5d0e48c8cf2fa796cdded591f8fb261426","tarball":"https://registry.npmjs.org/@material/button/-/button-5.0.0-canary.181486643.0.tgz","fileCount":17,"integrity":"sha512-cD0lcRXdnEYYbMoy6yo9RtDOephrq9M+Mjuz91YvVAyzPpDM6DBcNnUn/K8NWyjLgFtyB15ramzuPF1SKjJm9A==","signatures":[{"sig":"MEUCIQDEtEUGdTeOib0Pzu7qSw87ROCRF1idwKQjP7wEDb5wJQIgLWVNAZX/0Q6aVQnHaK/hf/KAKsKC2kMW8GmYHuMYSOU=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":225931,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeM0L0CRA9TVsSAnZWagAAiowP/2q1fXwm7xL/ieet9pzj\nAVjvfEDosUpOuGQPew0GhfPKvgq0oKAijrzfT6Dq/eIA9liHOm8LKHpiOFVm\nLzRmNhoVdgPjdHld9yt1XTBxr9VuDl7R3Rq2EwK4HA4xcpd3Kdfly4sMO2oQ\nR2Lr3NrOyqoyE5fUh3EEAyUsTdmi5luPkyNj+dv+8DH0OLBy3i73m4bwlgH+\nxnKIP/qiP3b8YRjVupTXt5KcsNaglWtpwa5x+BAFn54rZPZNB+jhvFAJ1rJK\nQxr88CAlKy6xzZXUpfRx1wEYFhRUCend9E7Jsvd2ADGf20pdtTBSOwJNGmwz\nNSXNXkvaxWdE43rIF8zE6Y+IQ/xEbvTTrNvX2H4fkmQKavDDksq+nu4k/hMo\nDqEZceIRuxJg5XDdXOYQwwr6gfP/ISf8inFvVuFuVD1eq/ZDDLFi0jCLFyvk\nDMWulZxY30PpFV8Yak6Euf79sqW+x/qDaqdq+a48GloYHLdC1+jqvy/YUjTR\niX8/NcBpf6Wttfh0Dn+Yc7fgNeQmf4932QeO7L8+mi/3OBlAnvFGk5VxcPkh\nZaavQWRytsjxHPGgJ0s9X+u2veZjxRvFLqtB5irw+3gBv7uS97j+gC5UYOV1\nFQvAVni1R6nClz9T15nYaMg2n8bFqqNOreCYADVB0cxbzpl4ew0lM8Vo15RI\nqsH9\r\n=nqAJ\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n\n\nButtons allow users to take actions, and make choices, with a single tap.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/button\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n```\n\n> _NOTE_: Examples here use the generic `\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n> _NOTE_: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Additional Information\n\n### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n\n> \\*_NOTE_: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n> buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n> directly within the `mdc-button` element.\n> However, the `mdc-button__label` class may become mandatory for all cases in the future, so it is recommended to\n> always include it to be future-proof.\n\n### Sass Mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass Mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`mdc-button-filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass Mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`mdc-button-container-fill-color($color)` | Sets the container fill color to the given color for an enabled button.\n`mdc-button-disabled-container-fill-color($color)` | Sets the container fill color to the given color for a disabled button.\n`mdc-button-icon-color($color)` | Sets the icon color to the given color for an enabled button.\n`mdc-button-disabled-icon-color($color)` | Sets the icon color to the given color for a disabled button.\n`mdc-button-ink-color($color)` | Sets the ink color to the given color for an enabled button, and sets the icon color to the given color unless `mdc-button-icon-color` is also used.\n`mdc-button-disabled-ink-color($color)` | Sets the ink color to the given color for a disabled button, and sets the icon color to the given color unless `mdc-button-icon-color` is also used.\n`mdc-button-density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`mdc-button-height($height)` | Sets custom height for button.\n`mdc-button-shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$mdc-button-density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`mdc-button-horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`mdc-button-outline-color($color)` | Sets the outline color to the given color for an enabled button.\n`mdc-button-disabled-outline-color($color)` | Sets the outline color to the given color for a disabled button.\n`mdc-button-outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `mdc-button-horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"The Material Components for the web 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/density":"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/button_5.0.0-canary.181486643.0_1580417779724_0.6070388315338473","host":"s3://npm-registry-packages"}},"5.0.0-canary.3a85313ac.0":{"name":"@material/button","version":"5.0.0-canary.3a85313ac.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"6121973925cb1cdb36a4b5e9fa7e6e7122dd53e3","tarball":"https://registry.npmjs.org/@material/button/-/button-5.0.0-canary.3a85313ac.0.tgz","fileCount":17,"integrity":"sha512-cwVItjdm1lQMkl0zmTx4ufctCHAlCHd+NtzPlKPsv0bCWpOJaJjlVWToJ0c6C1TbZoV7NEdAnU/fSEVynhtBQg==","signatures":[{"sig":"MEUCIC5N5Zy1zvza5ulOW9DNGEHj3SifaAVRGMWh9X3foW6yAiEA26kaF02dsXnuiecuyAHew/FpdI1w7n/kQgL7Glitm7Y=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":225931,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeNFR6CRA9TVsSAnZWagAAbVoP/RgSzYtLKeIFGTxUhSf0\nmJW6sMxHYd3bHQg+JYUQdyGqkGxwlxMXncT64dWedRDqVSKz50SkgB1f8fnM\nBfvliWR9tHhSwFdnR007Er9iJWfkGPXAyDcG1EHfyizvQ4A9xkd3PQnwZ7Kf\nkXY10rPXNPPNvcGSgREMYRJ0X0bKnYI/LeApUncS+3YhCcRbET41/PFC5OJ8\nwOgvm8CPuCmgJxZo/v4A3QB2qCQnQuxylIKIXHP9c4+Kp1el66sNaIIJf2ry\nulkZH9zuA9oKpihuzC4aRUNqn1RiPFTmWDcoK8VvtthrMSAanbpjmrooCOH9\nqD73ayijVfIbf+LTyuTzTZmH52drndtptRyDcqdcc3GQjbbU/SnwwYdEFLKm\nOJu8XqjXyCf2+tyiSK6ddLv+QfQo9OjwU9Fc5ZNUD+in9BdEKMl7hVW7vYfo\np+0KhCvH+bLNzij4hcvh1aGA/3jssDDN6UnjLuAy+eGNN92wuL8Ch9IUzr+5\nfSc4d4QPop5RQw/uXs5N2od7FiQHkIJomqnM6dUrZkSwZ8wgdcmR4hn78Zqw\n7qLGags5MLB3OV1bovZs8//2qHmaAzJdKYCEckIRTjRkGOPGU9VppB95idUz\nSmNoqQ0hjI/MxQH9Fh7h8Tdl6tmQgbiKTrx7Mf5IHQ8ZaaqxLhRTBzSkNtFr\nR25s\r\n=pgdo\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n\n\nButtons allow users to take actions, and make choices, with a single tap.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/button\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n```\n\n> _NOTE_: Examples here use the generic `\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n> _NOTE_: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Additional Information\n\n### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n\n> \\*_NOTE_: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n> buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n> directly within the `mdc-button` element.\n> However, the `mdc-button__label` class may become mandatory for all cases in the future, so it is recommended to\n> always include it to be future-proof.\n\n### Sass Mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass Mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`mdc-button-filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass Mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`mdc-button-container-fill-color($color)` | Sets the container fill color to the given color for an enabled button.\n`mdc-button-disabled-container-fill-color($color)` | Sets the container fill color to the given color for a disabled button.\n`mdc-button-icon-color($color)` | Sets the icon color to the given color for an enabled button.\n`mdc-button-disabled-icon-color($color)` | Sets the icon color to the given color for a disabled button.\n`mdc-button-ink-color($color)` | Sets the ink color to the given color for an enabled button, and sets the icon color to the given color unless `mdc-button-icon-color` is also used.\n`mdc-button-disabled-ink-color($color)` | Sets the ink color to the given color for a disabled button, and sets the icon color to the given color unless `mdc-button-icon-color` is also used.\n`mdc-button-density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`mdc-button-height($height)` | Sets custom height for button.\n`mdc-button-shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$mdc-button-density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`mdc-button-horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`mdc-button-outline-color($color)` | Sets the outline color to the given color for an enabled button.\n`mdc-button-disabled-outline-color($color)` | Sets the outline color to the given color for a disabled button.\n`mdc-button-outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `mdc-button-horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"The Material Components for the web 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/density":"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/button_5.0.0-canary.3a85313ac.0_1580487800363_0.6657712657187682","host":"s3://npm-registry-packages"}},"5.0.0-canary.b6c7f624b.0":{"name":"@material/button","version":"5.0.0-canary.b6c7f624b.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"86d39750d15160168cf3229c1512b2944b1a31eb","tarball":"https://registry.npmjs.org/@material/button/-/button-5.0.0-canary.b6c7f624b.0.tgz","fileCount":17,"integrity":"sha512-DeURmuDqy8LsAvxNaBNQP3HCtYQd95EsgAxip+qM8Etf9FyhTumv9/j9/nV1ITD6TG6e3l3mRf5tzAyC4dtxKw==","signatures":[{"sig":"MEUCIQCBYwKj3xT22cmxfIvtaOt4ClOp4mBQabeFf4XsM7Y6KQIgAXxO5vECIAyif/NVz+XX3TyotYzSlBcJWBv6AKrdTkM=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":225931,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeNF3JCRA9TVsSAnZWagAAxL4QAJ+9Ug9xdlFCl1U3Akux\nCeGQP3t425Nyk2XFimLODvWipCb7+ijr91wmrMkNRJRCZkG/lIHGPOr+tIDt\n+s09/DzRseO+1/4IyiytU5iF6GXvaY2uPP8tRUg/jqZRgpMhZbJT8i1zDV9F\nZDcvsyw+GuIGAkFDnES90zypz3lPl45qnB2wLE1vdFug7ybDa/5anix14Pho\nxkcGuB/Prcuo+fFgqro2yJjJGWuZ1j+pIXeXtF+mRzQz5noCfnKqI9ZQDBL0\n30UjsCOgq5SVkhf/bEkrR/KnRXk4hD8gFHhNottOOmzwj89tl8QFalRb/ffd\npJYDPJcdMHtHbVAD+Uj2MmI274RwNMKn2mTIZNavHPWrRWY4Y9Mf1eJiYIgg\noAz67zXym+rPfZNc455Ww+O9oKxY0jX6gVHQnkKpMDpTHjDs30NwrO32MG8J\ntGxUQIiyYpIudRNa4XvOJem8WsxFKl01dooEN8/4xphtPuYBP5LwjL5mO/Cw\n+JSNTWzbn6aJ0eItzsGrB01GZ9jmP2VexAVHjih4cIST9e6I7O2qUYXzXT3v\nZIHnqZcyQNcS3pa2cn1ijKEaCOiFGZ2KSqq72RkOOU/zwJxjNHwxJAQCBObG\nU0zK2vGfv4oc+8LUXmXmMslLewZXMYLcgqFFLEayMPopp03gyjUOceGW9fF1\nnoEK\r\n=6oU+\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n\n\nButtons allow users to take actions, and make choices, with a single tap.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/button\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n```\n\n> _NOTE_: Examples here use the generic `\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n> _NOTE_: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Additional Information\n\n### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n\n> \\*_NOTE_: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n> buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n> directly within the `mdc-button` element.\n> However, the `mdc-button__label` class may become mandatory for all cases in the future, so it is recommended to\n> always include it to be future-proof.\n\n### Sass Mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass Mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`mdc-button-filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass Mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`mdc-button-container-fill-color($color)` | Sets the container fill color to the given color for an enabled button.\n`mdc-button-disabled-container-fill-color($color)` | Sets the container fill color to the given color for a disabled button.\n`mdc-button-icon-color($color)` | Sets the icon color to the given color for an enabled button.\n`mdc-button-disabled-icon-color($color)` | Sets the icon color to the given color for a disabled button.\n`mdc-button-ink-color($color)` | Sets the ink color to the given color for an enabled button, and sets the icon color to the given color unless `mdc-button-icon-color` is also used.\n`mdc-button-disabled-ink-color($color)` | Sets the ink color to the given color for a disabled button, and sets the icon color to the given color unless `mdc-button-icon-color` is also used.\n`mdc-button-density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`mdc-button-height($height)` | Sets custom height for button.\n`mdc-button-shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$mdc-button-density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`mdc-button-horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`mdc-button-outline-color($color)` | Sets the outline color to the given color for an enabled button.\n`mdc-button-disabled-outline-color($color)` | Sets the outline color to the given color for a disabled button.\n`mdc-button-outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `mdc-button-horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"The Material Components for the web 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/density":"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/button_5.0.0-canary.b6c7f624b.0_1580490185491_0.9416940787840118","host":"s3://npm-registry-packages"}},"5.0.0-canary.b3f70ebde.0":{"name":"@material/button","version":"5.0.0-canary.b3f70ebde.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"7da19063f01b0b8ccaa92ca8010f93a00ef7d3a1","tarball":"https://registry.npmjs.org/@material/button/-/button-5.0.0-canary.b3f70ebde.0.tgz","fileCount":17,"integrity":"sha512-K0AhKuIslyaMQARdQydweyf8B+hVPKlhsxFQ5UFBmHo8J72f+qWOc5hPQ+f1Lb4TLH5fQFR5Xrf2udHC8Mw1cQ==","signatures":[{"sig":"MEUCICMv79se0TPaqMtxLuIU7OZBYBVzSk99uPE7Ho23l2ivAiEAuNsFy/BcFayfNMTo6XhvH/NrcWvpog8+4beaDDfK/og=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":225931,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeNImsCRA9TVsSAnZWagAA6EwQAJUZGxcBS0fkxGuze8OR\n68lIs3lS46TB1LMmIxZ1ke/7pOSr8zL6E4ba8O6yDndYS922b9H0mRjkLbK4\n6qh92gWTbE2rQdtICXapa7c7XbXI3OglJSUVs0oHCAg9txvy+QMANUk9bTmZ\nKDZu+gN06HltWGcTl0n50m3Oj9GlnAnHGexj0pvUc5Q3SrvTzWLBoa/L3QrM\nN0h+07bfqfsJQosq8Gb1Nng7Q1g/7gRr+Wg3MGDljEnJNsJexHkaCl/Mm46K\ntcrQ/nh7edt1zOsFOL2ubaAhKWgvaiiiLjh9yv56Q8oHBf2UJWX4E/9HvnYi\n1kQVIlxc716WU9wZOjPkP1RpnzxQmDyrkBBvKej7RxyG91HayEvsx9Z/SC2C\nIxWkhELNATn5Q8cW8ur1m8Ww5je45Gd5H+0FwgmiqZjXoOzy9jHWSC6ffqJx\nBNX8JZGcRGohFjPuoHWAMWvx8KrZu+qAO2IIaFp0lppcoj4o7U7cLiu9R4Or\nBovU+4PNP/etqhafY7gLmSlYxFWW9LN9Rmuhb7XRgwM7GfnxiTtfDhgB1YlG\n3IGyRsxVB9xyUGn6cucN/LmOoYhyOCrxMTsklpNEoM6/JOMenYr/9Sv881If\ndDWeZPSveP+nTHY6WECTk1aHcsSJMmxBsfBdlIMH6gTdTdeFPkrapySD0gcS\n+tlH\r\n=+XYc\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n\n\nButtons allow users to take actions, and make choices, with a single tap.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/button\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n```\n\n> _NOTE_: Examples here use the generic `\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n> _NOTE_: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Additional Information\n\n### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n\n> \\*_NOTE_: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n> buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n> directly within the `mdc-button` element.\n> However, the `mdc-button__label` class may become mandatory for all cases in the future, so it is recommended to\n> always include it to be future-proof.\n\n### Sass Mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass Mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`mdc-button-filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass Mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`mdc-button-container-fill-color($color)` | Sets the container fill color to the given color for an enabled button.\n`mdc-button-disabled-container-fill-color($color)` | Sets the container fill color to the given color for a disabled button.\n`mdc-button-icon-color($color)` | Sets the icon color to the given color for an enabled button.\n`mdc-button-disabled-icon-color($color)` | Sets the icon color to the given color for a disabled button.\n`mdc-button-ink-color($color)` | Sets the ink color to the given color for an enabled button, and sets the icon color to the given color unless `mdc-button-icon-color` is also used.\n`mdc-button-disabled-ink-color($color)` | Sets the ink color to the given color for a disabled button, and sets the icon color to the given color unless `mdc-button-icon-color` is also used.\n`mdc-button-density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`mdc-button-height($height)` | Sets custom height for button.\n`mdc-button-shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$mdc-button-density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`mdc-button-horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`mdc-button-outline-color($color)` | Sets the outline color to the given color for an enabled button.\n`mdc-button-disabled-outline-color($color)` | Sets the outline color to the given color for a disabled button.\n`mdc-button-outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `mdc-button-horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"The Material Components for the web 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/density":"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/button_5.0.0-canary.b3f70ebde.0_1580501420222_0.22998502378748387","host":"s3://npm-registry-packages"}},"5.0.0-canary.3e782d8f8.0":{"name":"@material/button","version":"5.0.0-canary.3e782d8f8.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"51c51a1cda8aa672cc338d54d9a9547b09ae4cd1","tarball":"https://registry.npmjs.org/@material/button/-/button-5.0.0-canary.3e782d8f8.0.tgz","fileCount":17,"integrity":"sha512-EWaYUx1cOURGVfnaCNgPkRBCTE1sPipR13jPBuiCLuPfW+AgTuj4qghkoE/jOYK6z0fGE2Y0aVjiKu8uLV1+JA==","signatures":[{"sig":"MEQCIG3r3GVNpgHJ6IfbJ+6hL6KxfVf1bQeFeX2HV689GxxzAiACVF3/hTxUrCLBClsGnlPS1dsYYckKEsj0NCP0OgINiQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":225931,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeNiIOCRA9TVsSAnZWagAAJs8QAJi2yfb1WcRv1X2o68qc\nYNhDWeufQQZnEn10YEvhC6Rr6C3l4vLtR82Bve6V23FPdgE+6apd7scwpjdA\np0ym+N5oaiopLuYaL/TpRKMcSPpgGmkMzSuIirql+6Vp3IClB2bhBV1o9QuJ\nHNHL/3OFhgIyiNNk6r09NWdOtMz4SUDke/vDFvPgH/HVybL3xiw4mIPaVXqI\nqrrKGgZUsTq1fuopKExucx88106SmmsXLf8aRh/BW5kaZSc1wZreubp9F67Z\n00Ynyg2HgHIOBiMfj3MdkC6J/wncqS6DoLBJoGn+7J3/MWTXZtblgPTCUyz0\n6c1yNfu8h+gSLnFcrUjd/AAFlaq5rvFrxwVx4x6RrBhD1tXeQYnAn9eOlMGe\n2BUzGouB9dgmUURSxtonTRsGqdveZ3VC4nUwHwwSjh8jvE17p83U7C0rXycR\noC419vEs3M2Wom4j0RCNF03FE3OXonxwFtocMv7fo7DOKVM8Dog1SEZoI17S\nF5CHSqVYm/zg3okJADEdtb3CvjHIddMbklId1JBmIVJvdm0RkcaBCHpIaMkz\nu7sns1Lx0pFkvPVrXYkbN6KopYZuYyGrejHWOrcB2wCVBrpFrSO2e7KNq4it\nlWRO/HxgEDn1fLcYkIX3lXdcXTbBVBKG5iKfYbYzjOuz8rp8/Qu1CFow5j+8\nEpUj\r\n=hhDZ\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n\n\nButtons allow users to take actions, and make choices, with a single tap.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/button\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n```\n\n> _NOTE_: Examples here use the generic `\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n> _NOTE_: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Additional Information\n\n### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n\n> \\*_NOTE_: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n> buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n> directly within the `mdc-button` element.\n> However, the `mdc-button__label` class may become mandatory for all cases in the future, so it is recommended to\n> always include it to be future-proof.\n\n### Sass Mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass Mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`mdc-button-filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass Mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`mdc-button-container-fill-color($color)` | Sets the container fill color to the given color for an enabled button.\n`mdc-button-disabled-container-fill-color($color)` | Sets the container fill color to the given color for a disabled button.\n`mdc-button-icon-color($color)` | Sets the icon color to the given color for an enabled button.\n`mdc-button-disabled-icon-color($color)` | Sets the icon color to the given color for a disabled button.\n`mdc-button-ink-color($color)` | Sets the ink color to the given color for an enabled button, and sets the icon color to the given color unless `mdc-button-icon-color` is also used.\n`mdc-button-disabled-ink-color($color)` | Sets the ink color to the given color for a disabled button, and sets the icon color to the given color unless `mdc-button-icon-color` is also used.\n`mdc-button-density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`mdc-button-height($height)` | Sets custom height for button.\n`mdc-button-shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$mdc-button-density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`mdc-button-horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`mdc-button-outline-color($color)` | Sets the outline color to the given color for an enabled button.\n`mdc-button-disabled-outline-color($color)` | Sets the outline color to the given color for a disabled button.\n`mdc-button-outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `mdc-button-horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"The Material Components for the web 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/density":"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/button_5.0.0-canary.3e782d8f8.0_1580605965570_0.35345392768785944","host":"s3://npm-registry-packages"}},"5.0.0-canary.535398572.0":{"name":"@material/button","version":"5.0.0-canary.535398572.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"ec1ce17e00c1ba0d929d8379649ae80591a3f694","tarball":"https://registry.npmjs.org/@material/button/-/button-5.0.0-canary.535398572.0.tgz","fileCount":17,"integrity":"sha512-2JiiSU+7Dh26Noy9Tl+WpGYhHnZdtlltt86Y3mVv+J0j5MkpSsYbtrz5YrkilaZWjZdFLQC7CWy/yrUxLqrDNg==","signatures":[{"sig":"MEUCIBOWy5BbbmVQYn1lppCPhVlpzH5Gx9W+d4yOFfqJ3uqqAiEAj46o2guf+RozjtZv5dCZfNelgAPw2cvSNrB/rA9L9V4=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":225931,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeOGKICRA9TVsSAnZWagAAZKAP/1yl7KSenZf4epvlYWPB\nEH8LzfT9mPvPTLxPS5uBWlSsnt2AyE0r6MpR+uvwixracD/18U3WUd/nTX+8\nfdCqsx3UuD7wyQwzSNM33XqyA6lDrQBBHJ0wsZmoIFlO8LDmTUlA6L1l0h4/\nKgX+X6PYP4+e1PpylpqPW8ozaw1kkyvj7UcTIqHquXDZai4meRyXeQNxnRtO\nW8tn6vZFzcNUHKQ4yMeHVBY0MKAWaC0TRkfRCYR3LiyflQOWUuJHq5fWGDRB\nNgpxCEplT/o+eOTXZxMMn0mhV8R4l7/pEcRoDu0xBWlIuWdIQERGZ7X0VKAy\nthTIlJqZiZRdR6KgVPgKQqSJwsf7uoiH+ec6vD/Gt/dFyMyqxJZNJfrM5ddg\nS1sqzPNlwoAewrZuFanHqaChsCSq0efNtiK6gGZrzBDvZWzuSJ2PsLBzpqiD\nTM2qrSOIM2fz1Ef4TjkEcrjpROAdY6d04wM7kAd4Ek2lQiiVqn9dr+H0sMrD\nqJ//4d/94yebNrE51w1ZjL1sDL7Qm3liAeWce6VAfeFp3otCRQWCFtSieVYe\naWMud8ncdTtBckUAnxOcXelXyKupM8krb4AK43deqxLzd2WNMKM0aJqZxayV\nfDMrW68e8OXyo4OmvdB9ArZGPQPC+3zFefzag71QHudzDZxDtwsfgBWteEWJ\naKl7\r\n=+hfG\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n\n\nButtons allow users to take actions, and make choices, with a single tap.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/button\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n```\n\n> _NOTE_: Examples here use the generic `\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n> _NOTE_: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Additional Information\n\n### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n\n> \\*_NOTE_: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n> buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n> directly within the `mdc-button` element.\n> However, the `mdc-button__label` class may become mandatory for all cases in the future, so it is recommended to\n> always include it to be future-proof.\n\n### Sass Mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass Mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`mdc-button-filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass Mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`mdc-button-container-fill-color($color)` | Sets the container fill color to the given color for an enabled button.\n`mdc-button-disabled-container-fill-color($color)` | Sets the container fill color to the given color for a disabled button.\n`mdc-button-icon-color($color)` | Sets the icon color to the given color for an enabled button.\n`mdc-button-disabled-icon-color($color)` | Sets the icon color to the given color for a disabled button.\n`mdc-button-ink-color($color)` | Sets the ink color to the given color for an enabled button, and sets the icon color to the given color unless `mdc-button-icon-color` is also used.\n`mdc-button-disabled-ink-color($color)` | Sets the ink color to the given color for a disabled button, and sets the icon color to the given color unless `mdc-button-icon-color` is also used.\n`mdc-button-density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`mdc-button-height($height)` | Sets custom height for button.\n`mdc-button-shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$mdc-button-density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`mdc-button-horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`mdc-button-outline-color($color)` | Sets the outline color to the given color for an enabled button.\n`mdc-button-disabled-outline-color($color)` | Sets the outline color to the given color for a disabled button.\n`mdc-button-outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `mdc-button-horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"The Material Components for the web 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/density":"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/button_5.0.0-canary.535398572.0_1580753543922_0.13673409020102478","host":"s3://npm-registry-packages"}},"5.0.0-canary.5ff33802c.0":{"name":"@material/button","version":"5.0.0-canary.5ff33802c.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"ff012239738bf256cb1d53c92f16c2db4bf3bb2f","tarball":"https://registry.npmjs.org/@material/button/-/button-5.0.0-canary.5ff33802c.0.tgz","fileCount":17,"integrity":"sha512-IhEZACMofkEFsLeIdQ6yczn1oprbYZ/hDy4V+Eyus52mxfkbjWWMjHSoqKOQWCJIdyfzUPG9JNiINknpB6ZdKg==","signatures":[{"sig":"MEUCIQDunFB3ymZ5c+1dB32SgnJH/x0yvoilypu8shSKw+fC9wIgeD/n0g9Hp9rzkB9lVATOSI8kqiVqoyhJq9LTp1Ko6N8=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":225931,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeObIJCRA9TVsSAnZWagAA7Z0P/A55/WaOlzuU5bxxKzmY\nWIHy8tpRD41GewVwBPVGbdttsMIWbsNQp4a3+vRD3OfvMtGMZ4Wh0RdjDo+T\n4M+TMV7RLvakxWs/PgkbigTL2/GxN0yiB7y6nRN7dWuqbTvnbf2YKT7H7TzN\nnFXnstJt396KyAoDRiibHYryYTU4wqk9ogaINdaJ7C0FVjwqGnU1J5StYhks\nJAD8RMMJYIY2yBS5nqviWwwwwxUtdR2sJm09VlLr3B3y4j+kqISdSldW3BvG\nOlwxCGP5A/JUBPx7vvIABCerbe08ZLNBFcoySK8HIF0ttBRqYwYWZh2QebTH\n5dXsHNrAdAIMed8PHJlmmy7vqDlRajhtJipnltcRLffRyvaJcmfhVMqIlQSL\nBVYKVM/azQSc7MNdR1Ra3kUdnO5rrAxXNXKDVIIO8fAMZY0ZNyFA7SVbzjdn\nvYBrU/96O6YiPR7AGTVuQZZ8XIqNjzxCZVCx36OEIJws3Ql12rCYx03zDGhW\nYFwQ4iPqp4A0YESmWR+U6DeSLshMC3mT6k4Vsc4uIBOrkMIr/8h7Ny/MJsrP\nXVyaAaZDA8PEeH8H7bJEJj1n3VBa8N1V5OmGjQb40BeaUQfA+f3eiuh2bw1W\n4d2UTV9sld5ANmA5rae+6eZmfeqN+okFfm4yxrVDQhrQpg7UTeAImwOZfbR/\nFz/e\r\n=XoLK\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n\n\nButtons allow users to take actions, and make choices, with a single tap.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/button\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n```\n\n> _NOTE_: Examples here use the generic `\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n> _NOTE_: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Additional Information\n\n### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n\n> \\*_NOTE_: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n> buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n> directly within the `mdc-button` element.\n> However, the `mdc-button__label` class may become mandatory for all cases in the future, so it is recommended to\n> always include it to be future-proof.\n\n### Sass Mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass Mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`mdc-button-filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass Mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`mdc-button-container-fill-color($color)` | Sets the container fill color to the given color for an enabled button.\n`mdc-button-disabled-container-fill-color($color)` | Sets the container fill color to the given color for a disabled button.\n`mdc-button-icon-color($color)` | Sets the icon color to the given color for an enabled button.\n`mdc-button-disabled-icon-color($color)` | Sets the icon color to the given color for a disabled button.\n`mdc-button-ink-color($color)` | Sets the ink color to the given color for an enabled button, and sets the icon color to the given color unless `mdc-button-icon-color` is also used.\n`mdc-button-disabled-ink-color($color)` | Sets the ink color to the given color for a disabled button, and sets the icon color to the given color unless `mdc-button-icon-color` is also used.\n`mdc-button-density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`mdc-button-height($height)` | Sets custom height for button.\n`mdc-button-shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$mdc-button-density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`mdc-button-horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`mdc-button-outline-color($color)` | Sets the outline color to the given color for an enabled button.\n`mdc-button-disabled-outline-color($color)` | Sets the outline color to the given color for a disabled button.\n`mdc-button-outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `mdc-button-horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"The Material Components for the web 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/density":"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/button_5.0.0-canary.5ff33802c.0_1580839433409_0.2814142674014901","host":"s3://npm-registry-packages"}},"5.0.0-canary.1eb29491c.0":{"name":"@material/button","version":"5.0.0-canary.1eb29491c.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"44d43ac5e3658be32d8795ec46ce11cc5eafa840","tarball":"https://registry.npmjs.org/@material/button/-/button-5.0.0-canary.1eb29491c.0.tgz","fileCount":17,"integrity":"sha512-dT+MOBCrQ+EmSipNVJJdncMOUHSY5yM4dcZu4ERVrMh0sKeaonwNn8gzkMTf+RZAQdXQLWO2hXgpmnb+Witvkg==","signatures":[{"sig":"MEYCIQDJSGPbqjYv8UFWwLxi9FIA3PQiRxLevZwnJyl9aAbxIwIhAJ3ttRPEplB2hmOO+YxZ+nvTJSdkfVrd6Ar5QNA5ERJX","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":225931,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeOdt2CRA9TVsSAnZWagAAUsIP/1cC53IAlSlaKidpWy9r\nCQZvYDs7GeIID+XUWdDb87sfRFJT5fZDZ2Qa5hdfqLmoCuWq6t/7wuomhqTX\nh2KdCYKvSiDRTmxfmoaxrrIrRzhPbMXUnTBPEY1vwYbGVUQvUzTNvolsWrjk\nHJ6bmbeP0ce1kCGo70QRmpqYjmlB/xkV47sVeUiqGTjRG/eVOlmH6DwlHdb7\n/WfrW1+LCZ4gJiVFrFZqlMOOOVgJEltgILXP30guYObZSZ85vxZfnAkUqhvy\nkFlrnCSnhPJaPZmcq5sBLI9yWX409g5jlzmQn9idRg8nc0O5FO2EDLu53x9D\nJnJH4LBm632jJqQOjWdpXVoi5LFx2G9pVBUJDVSAwbQGcE8LBwYzc3/fhXQ1\n6c0JYCybC3wpq8wPtzBs1y06vPmSq/aZwLaMYOQ0Qy6jzzvcGTvlpQdUyoQO\nZg4w0IqIdd+9zZSwMmy37/iw6KElxcZ4MhxYIPJwx5YjC264EPHf4pbidJq0\nXgQL8vInlveKzsCKeVS+tt9J77wrjON5OxOLIxypqRWaTLWpcIPC9BZH+Xw2\nfXzu9QW5yHZnCjvAWY8DQDZKs8eIZkdYtb7M5rY8MMwDk38V6t+/d1VS9XM/\nU2SPjRcIVyuPKN00axqLVM59DNeNyl0pdvQIzWUh5oSxIs33pW7ViJ0uxUB/\n2Tmg\r\n=bo0j\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n\n\nButtons allow users to take actions, and make choices, with a single tap.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/button\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n```\n\n> _NOTE_: Examples here use the generic `\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n> _NOTE_: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Additional Information\n\n### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n\n> \\*_NOTE_: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n> buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n> directly within the `mdc-button` element.\n> However, the `mdc-button__label` class may become mandatory for all cases in the future, so it is recommended to\n> always include it to be future-proof.\n\n### Sass Mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass Mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`mdc-button-filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass Mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`mdc-button-container-fill-color($color)` | Sets the container fill color to the given color for an enabled button.\n`mdc-button-disabled-container-fill-color($color)` | Sets the container fill color to the given color for a disabled button.\n`mdc-button-icon-color($color)` | Sets the icon color to the given color for an enabled button.\n`mdc-button-disabled-icon-color($color)` | Sets the icon color to the given color for a disabled button.\n`mdc-button-ink-color($color)` | Sets the ink color to the given color for an enabled button, and sets the icon color to the given color unless `mdc-button-icon-color` is also used.\n`mdc-button-disabled-ink-color($color)` | Sets the ink color to the given color for a disabled button, and sets the icon color to the given color unless `mdc-button-icon-color` is also used.\n`mdc-button-density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`mdc-button-height($height)` | Sets custom height for button.\n`mdc-button-shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$mdc-button-density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`mdc-button-horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`mdc-button-outline-color($color)` | Sets the outline color to the given color for an enabled button.\n`mdc-button-disabled-outline-color($color)` | Sets the outline color to the given color for a disabled button.\n`mdc-button-outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `mdc-button-horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"The Material Components for the web 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/density":"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/button_5.0.0-canary.1eb29491c.0_1580850037951_0.2997254315534419","host":"s3://npm-registry-packages"}},"5.0.0-canary.4c7154b26.0":{"name":"@material/button","version":"5.0.0-canary.4c7154b26.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"d7f2e7117cbd69f8afbcffb8f8f15fa44880ac47","tarball":"https://registry.npmjs.org/@material/button/-/button-5.0.0-canary.4c7154b26.0.tgz","fileCount":17,"integrity":"sha512-Gj4w+YMHwS+9Itsz34bUoootE+kJS8ov9RYQl5AggWmaD0xOOpNaqqNOCQwCNX+BK2xflRBsVNG3sZNGF84h6Q==","signatures":[{"sig":"MEUCIDc8PZ5riISYvRJLPsOZIHkyio+hEIpCoqEp7q0TCgLWAiEAhXaqHG9YHb5N83UuFKnpMdom7iyelqpT7o55aY0JPzo=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":225931,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeOudDCRA9TVsSAnZWagAA5OkP/2jiLky+eAL8z5ossy5U\n+rTffIjywq5L6Tic0+VLPNZYPiSDhSd67CpYmKT3Ct/5Ar2u/QIP8jvK5HH/\n1YXMvCwGfOxO19z4n+tExQqGkdU4L/raZLUvRzDskUu2eiGKNz5hFHzOKZJw\njlh1nBBxtK7IclNlnuRKfxUgljzgnn1t3KAdC+CchKFbEIwpcMMShoPF/6HC\nh6iTsMs2OPcKbw9xI8nskhSylPy7BJZhOsdOErI0l1LHW+lVpUn1C0aAzsDO\nYVRsJmX2odBKLKXoYKmqT8fug3Qx8S0w57t9oV60Rici3wyBgOX9ZzK5wYK3\nttH9oKFFJ+FIV7bwd6WobTGXNnUsh4Y2Mu4Msfj0ytgnZ0DtH7Lnse3GGlu6\nbzKSH27CbgeuElDWP0P3SdtQ9tLnVVKDwQ+hNOmYaDsFjprInDcHN3IdNpy4\nxpQEiTANgwzqKLV7i2wy7KZFNnVlGCDQWri3QHq6DfsABo8XwK/KeaUBimFI\ncaqaLSS1hn7X7HjxlxpoRL+3/RFBaoGp67+L37uUbZ9G1QHJ5LeDa5Dve+RY\nOLn2FOpPq/vN/kr3YfPCoLUrlhj6h44s+Ky2yO7D1SN52Yeijis1URyZ19fG\nSNMpVEkXKv9Zf/Vol9tQ0LjMevF1adUkoYL3h7LMgv3Z+LJsHN9k+DT41mX4\nCX6P\r\n=/1W+\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n\n\nButtons allow users to take actions, and make choices, with a single tap.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/button\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n```\n\n> _NOTE_: Examples here use the generic `\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n> _NOTE_: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Additional Information\n\n### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n\n> \\*_NOTE_: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n> buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n> directly within the `mdc-button` element.\n> However, the `mdc-button__label` class may become mandatory for all cases in the future, so it is recommended to\n> always include it to be future-proof.\n\n### Sass Mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass Mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`mdc-button-filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass Mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`mdc-button-container-fill-color($color)` | Sets the container fill color to the given color for an enabled button.\n`mdc-button-disabled-container-fill-color($color)` | Sets the container fill color to the given color for a disabled button.\n`mdc-button-icon-color($color)` | Sets the icon color to the given color for an enabled button.\n`mdc-button-disabled-icon-color($color)` | Sets the icon color to the given color for a disabled button.\n`mdc-button-ink-color($color)` | Sets the ink color to the given color for an enabled button, and sets the icon color to the given color unless `mdc-button-icon-color` is also used.\n`mdc-button-disabled-ink-color($color)` | Sets the ink color to the given color for a disabled button, and sets the icon color to the given color unless `mdc-button-icon-color` is also used.\n`mdc-button-density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`mdc-button-height($height)` | Sets custom height for button.\n`mdc-button-shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$mdc-button-density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`mdc-button-horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`mdc-button-outline-color($color)` | Sets the outline color to the given color for an enabled button.\n`mdc-button-disabled-outline-color($color)` | Sets the outline color to the given color for a disabled button.\n`mdc-button-outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `mdc-button-horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"The Material Components for the web 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/density":"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/button_5.0.0-canary.4c7154b26.0_1580918586424_0.7466227278522801","host":"s3://npm-registry-packages"}},"5.0.0-canary.ab5f49a2c.0":{"name":"@material/button","version":"5.0.0-canary.ab5f49a2c.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"30e3517df4973598b3a3ed3e5519d2a010896696","tarball":"https://registry.npmjs.org/@material/button/-/button-5.0.0-canary.ab5f49a2c.0.tgz","fileCount":17,"integrity":"sha512-eKqUzWgxRFLnj7lApV0LnPD3RuJAe2lzJt0M5ADYlvh/WGMEYwyVmxedPtmugasy05DAHXPnYiicaTMMOSUbWw==","signatures":[{"sig":"MEUCIClEAeEgiwum1XYl+OBIAGxZpR3BPdq/Xw8ci+6ASc0DAiEAtgwon6HRHqHQ9BE/n+R+UmSPXBC/Hn/nQCK/raCsbkM=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":225931,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeO1C9CRA9TVsSAnZWagAAYa0P/RE3qGcR4jV0k1vIIDCC\nT4dR0X+lGVLdOMBPEBQSPByXQP3ADAk5x7kkopEQFwqI+WkomYXVsqTveuzH\nsKkk+G+qXNmKEA2RpOwrJ3NwwV9+zgscZv0EGR5kejUq3rOqd+bsh9I+cL8k\nDHX0dQR6AFfXwPsvnIEkT0QdNZqtZH6WhmaE+YvmpaSUFKWvWf0bph9UTyi1\nTa2yyQD7iFmRfH24JevtyjkSZ79nKqg04MOGa5IgsEM4TaendISS8076cXYp\nRVEA/ipO4iYjjEg90gYsxF4oCAe8RmApxND65PE8KdIS5CxLCSkAU/nUBrgn\nvt51C3FC0zsTuJ8Cb7MO0MShI+xTP1kdR9IHcepxiRvP4B6J4brtsOnZRWF5\nxEuAnp4wrtmtXJ7bUmk6s7nA1bkI0E9z2vbjCfHxRUZZdmTpkYM09IzIfrSZ\nQYUUDmQwWQYOUQy736eVGvfqcc9b1KnAD1dEX7F7pTrha5v2U9SYkBsUJ0Os\n0JAQ2Ue5QTtK1V3i4ZvU8QRgYWfN26hTdUqN0lmjzSnZ3oe4wVivtEX+YHLG\ng6Irg496V0QAdfvjs0vm96GcAL07peTd9OdPe+qPTys1+siVI7rbTmHNuPWh\nBX11pZ9XbZN6I1h/SLHzQR3RLQD/ucAx5zOMdSSXXoGx4g/nVcgZooLEO5gn\nTZ9x\r\n=Reod\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n\n\nButtons allow users to take actions, and make choices, with a single tap.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/button\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n```\n\n> _NOTE_: Examples here use the generic `\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n> _NOTE_: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Additional Information\n\n### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n\n> \\*_NOTE_: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n> buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n> directly within the `mdc-button` element.\n> However, the `mdc-button__label` class may become mandatory for all cases in the future, so it is recommended to\n> always include it to be future-proof.\n\n### Sass Mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass Mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`mdc-button-filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass Mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`mdc-button-container-fill-color($color)` | Sets the container fill color to the given color for an enabled button.\n`mdc-button-disabled-container-fill-color($color)` | Sets the container fill color to the given color for a disabled button.\n`mdc-button-icon-color($color)` | Sets the icon color to the given color for an enabled button.\n`mdc-button-disabled-icon-color($color)` | Sets the icon color to the given color for a disabled button.\n`mdc-button-ink-color($color)` | Sets the ink color to the given color for an enabled button, and sets the icon color to the given color unless `mdc-button-icon-color` is also used.\n`mdc-button-disabled-ink-color($color)` | Sets the ink color to the given color for a disabled button, and sets the icon color to the given color unless `mdc-button-icon-color` is also used.\n`mdc-button-density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`mdc-button-height($height)` | Sets custom height for button.\n`mdc-button-shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$mdc-button-density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`mdc-button-horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`mdc-button-outline-color($color)` | Sets the outline color to the given color for an enabled button.\n`mdc-button-disabled-outline-color($color)` | Sets the outline color to the given color for a disabled button.\n`mdc-button-outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `mdc-button-horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"The Material Components for the web 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/density":"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/button_5.0.0-canary.ab5f49a2c.0_1580945597208_0.04335007522272427","host":"s3://npm-registry-packages"}},"5.0.0-canary.c541ebe15.0":{"name":"@material/button","version":"5.0.0-canary.c541ebe15.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"6283f4c148706da46d8999054b606f24c8a0f1cf","tarball":"https://registry.npmjs.org/@material/button/-/button-5.0.0-canary.c541ebe15.0.tgz","fileCount":17,"integrity":"sha512-FhGZx80D5wGh41iQO/cpT8gJgAO/aKTBdadcKSU0MCtDEa+NkH99WgdPkuJoHrR/wV+9vOywLmk1zoOxx9SMUg==","signatures":[{"sig":"MEUCIGW8sWDPZ0mt2RAZab4P7ABbHFp9fqDjdhZC9FB+wwOcAiEAytxRjPYVZoxZXHGCTbZfi8YDWH2QZQcrKHoZwUYp7PQ=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":225931,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJePJNmCRA9TVsSAnZWagAAzhsP+gJcx9Svnam3mvYWaSHs\nd1d0CzHvF4WTdnpce9tyHpObKUHlurTXFRWQ+AL7Vs6VmInp9Sd9a9ZdV0Vo\nvyBOnsKNdXjraHXgbNGTBEGY5ZLXzz1UmbeLtTyLZYk2wPgV75VR7e9pc0xF\nphTlu++KvHWn9Rl8Zvz2c7h2p3/tgsZkewgZFOMdER3criH1Kw5KKfmGPbVA\ni9qp/0mJH/t5tAErdvN/oGKeLqXyHGYUBF/A9sAiz+cmf30YE88CxxlDaqBG\nBnTXAnAOQwx8bnGwHWuno3sg7/tJaEMwLVSWiAILl3gqy2QBWph+rPMfH8RG\n3H6JXDXn0OxkjINvVZvLy5YEutlF1HjqbaZ1oax82QCiE5xfeiF12YfPwWop\n99theK0Ka6IX8BakSNYwyiO6+BfQ7WLZ4M6B9McLy7+GkMCIdyKoNdEAr2e8\nW4lnrpfX1kdhqfk+lzgfKYxVapAo468gF6o2qQ1p/6BBExkuXJYK1vaX666e\nd+I9n396OWAJIa1T9vA/48acNAKfnA5R0lmwlwnvaqGPtdt1Lpee+QZ+LgOp\n9gpUek9HnOzDlM6YeHPQTgFt0uyqqLM92uW2pVKsnotQ4RJe2PKrYpP80sga\nYNW2z9Fj0CM66L3NcYLc0Me+9wbav5Hwj8zcT+kmF8EK3HTP5w8c/Ay+ozok\nZ1uX\r\n=ojy/\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n\n\nButtons allow users to take actions, and make choices, with a single tap.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/button\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n```\n\n> _NOTE_: Examples here use the generic `\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n> _NOTE_: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Additional Information\n\n### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n\n> \\*_NOTE_: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n> buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n> directly within the `mdc-button` element.\n> However, the `mdc-button__label` class may become mandatory for all cases in the future, so it is recommended to\n> always include it to be future-proof.\n\n### Sass Mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass Mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`mdc-button-filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass Mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`mdc-button-container-fill-color($color)` | Sets the container fill color to the given color for an enabled button.\n`mdc-button-disabled-container-fill-color($color)` | Sets the container fill color to the given color for a disabled button.\n`mdc-button-icon-color($color)` | Sets the icon color to the given color for an enabled button.\n`mdc-button-disabled-icon-color($color)` | Sets the icon color to the given color for a disabled button.\n`mdc-button-ink-color($color)` | Sets the ink color to the given color for an enabled button, and sets the icon color to the given color unless `mdc-button-icon-color` is also used.\n`mdc-button-disabled-ink-color($color)` | Sets the ink color to the given color for a disabled button, and sets the icon color to the given color unless `mdc-button-icon-color` is also used.\n`mdc-button-density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`mdc-button-height($height)` | Sets custom height for button.\n`mdc-button-shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$mdc-button-density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`mdc-button-horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`mdc-button-outline-color($color)` | Sets the outline color to the given color for an enabled button.\n`mdc-button-disabled-outline-color($color)` | Sets the outline color to the given color for a disabled button.\n`mdc-button-outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `mdc-button-horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.14.1/node@v10.19.0+x64 (linux)","description":"The Material Components for the web 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/density":"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/button_5.0.0-canary.c541ebe15.0_1581028198196_0.7391260533158606","host":"s3://npm-registry-packages"}},"5.0.0-canary.98f7faa05.0":{"name":"@material/button","version":"5.0.0-canary.98f7faa05.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"e11b4721890dbe687bfeff84d88f62e746c98f08","tarball":"https://registry.npmjs.org/@material/button/-/button-5.0.0-canary.98f7faa05.0.tgz","fileCount":17,"integrity":"sha512-us3mSCum8gCEveO+t3C1rP3u4ZY5tZRXodN6vUT2xuMqlhbQoRGkJj3JymMBUcWb2iqs3ElID5Pmzwv0nU9AXQ==","signatures":[{"sig":"MEUCIQCWMfzokEf2sp4bQeqMiB/savaP2dZ0akdTxqRbQqIdXgIgUC1BwKdPQrvb0dI/fVPT3lP61tRZJiYeojBeegwKSic=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":225730,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJePbiuCRA9TVsSAnZWagAAlRsP/0B36VjMh3ClVfFMpjrE\nzfWS01CLN17R/J3hAmrGCJzvGl0p37TL4xzj6O+8awmrvA7m81/HTqp9jJ2J\nxCCPsyA0NwTOfoB33ukEn8RbG391ISZOBhLgiSWsKUa1osSOl12sgDDYV+U1\nMz83BZHhwe4DENJidZQZfw18oG8vdX+NER/YkOmCfpsjWQ8PFlpyTYNKW4aI\n6ZDk+gM9oge5m8QAYlKWxbE7Vny29E0/IbZtvDUeWJ78iAyOiQnbqNgRACpI\nqpYJhccWRQH/q1TlALksLs7fV1XhE7Moxx9jXibwWmCGCJ/7i1ZXpoydj9qg\nY/izV8N/NNH90vf6QXZu0wS8gQHzgP9uKkzPwxihn30Y/ULt6Ka0SkZp157x\navhP/VBT4U9tKtgh1xLe0Grexp8DZNa/sA8NPFn/oal7Enls4CfrGSs28Ijh\nSMhxvRK/AsqjecmVTiiQOa+QvN1e/IZu00izVEwkr4RtsW+2p/WpfqZQ/hL9\nQLw30JutBr0Phwx5gNJTGMAzmQh1BLUcyVY4ofFd072ppFd6Fod2lItKoxBM\na1mqKiKbSaEZUrydv5zgaa1D8iTYPCMDAEYJWR9Vz2KcwoAHbYQgnw/xSKkp\nxauYg1iIIQwtajd6VbC48vyOa2X/5Go6cSnQwz4waH17GWCGXDhhcC77i1Mu\n8VLR\r\n=wiG3\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n\n\nButtons allow users to take actions, and make choices, with a single tap.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/button\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n```\n\n> _NOTE_: Examples here use the generic `\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n> _NOTE_: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Additional Information\n\n### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n\n> \\*_NOTE_: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n> buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n> directly within the `mdc-button` element.\n> However, the `mdc-button__label` class may become mandatory for all cases in the future, so it is recommended to\n> always include it to be future-proof.\n\n### Sass Mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass Mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass Mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color)` | Sets the container fill color to the given color for an enabled button.\n`disabled-container-fill-color($color)` | Sets the container fill color to the given color for a disabled button.\n`icon-color($color)` | Sets the icon color to the given color for an enabled button.\n`disabled-icon-color($color)` | Sets the icon color to the given color for a disabled button.\n`ink-color($color)` | Sets the ink color to the given color for an enabled button, and sets the icon color to the given color unless `icon-color` is also used.\n`disabled-ink-color($color)` | Sets the ink color to the given color for a disabled button, and sets the icon color to the given color unless `icon-color` is also used.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color)` | Sets the outline color to the given color for an enabled button.\n`disabled-outline-color($color)` | Sets the outline color to the given color for a disabled button.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.14.1/node@v10.19.0+x64 (linux)","description":"The Material Components for the web 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/density":"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/button_5.0.0-canary.98f7faa05.0_1581103278498_0.8252753136315678","host":"s3://npm-registry-packages"}},"5.0.0-canary.b4727e43a.0":{"name":"@material/button","version":"5.0.0-canary.b4727e43a.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"a8af9661d2fde131c5f0cf596b5b61970c791005","tarball":"https://registry.npmjs.org/@material/button/-/button-5.0.0-canary.b4727e43a.0.tgz","fileCount":17,"integrity":"sha512-Lqs1DniY5h5DAwDxZJdVXIqrvg4gOcJ1938DAU4x5gJieDtB5D54fxYvomwQm7sNFc3BjKdGB5W0F8bHoL7BFA==","signatures":[{"sig":"MEUCIQDhWixWOcjq+uv3taTx84IPcmPOYVWDNehZj8Pb8lAnHQIgDHr26ZqaZJ/YdEbPBAhEeT9NvbUELyiO2AddSgci4Sw=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":225730,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJePcC0CRA9TVsSAnZWagAASgEP/2xZETbOYxvju9X3TbAR\nj+1v61OKxig5pTj3gKkrun7u69Fk5mGrm5libyXSGnS1kAuJwBRoJerNG3Qd\nUGz9y/UvMdBTCL1awTROTEYFm9kulSq/O2AhdPZVdlJjFLOrFtDR41zCg3DV\n1Ri7wRYb5w/BNSYEpL5r2eHH/zNgy5hh1L3offPCg5rAYIImGTDsV8LSrxjg\nLwEqYaFjKAysR8/GMBhkZSO5sAMsFAP/IP44HotuKW+hRUqmBT3hgXhqgFoc\n0VYjnl08zMmJBM0Sa6Q9xZW2PT2L6Kb6hPDoksyaAoqD0BHekJdmHNTThjyX\nzthjuh36ltKVkAvh7BKZ2hPvB0p4bqTCS2Bx+A1p/jU9U+dXaBhFivp5nS6A\nwcinpHlnXgACEF4d+0uTOUKOWmRcOliRsxGSsAlQkVsJzWfWDr5y9waxFB8B\nRnzFjiKl9GR84BsLPxMgyPI8rg50EcX/zqySOqJbueLBa+GaJdvvNvl/92nk\n469ZBdl9oAH3j81qhRiZ1xhY3Fka3QTRvzScCU6F2tBcSHvxc4aKuJlAV2zf\n0AyXoulE1lx0emrQFtVfvcVxrlsXkTLJMqi+yPx2uie7AdVYyBvKDWT2m40h\n2E1ilFDpsAA85zZDeByAPUY8U5Qd2ScywYZ4x7z1IXVeNSPtn+BX22ujov8E\nC0PS\r\n=6ipm\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n\n\nButtons allow users to take actions, and make choices, with a single tap.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/button\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n```\n\n> _NOTE_: Examples here use the generic `\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n> _NOTE_: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Additional Information\n\n### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n\n> \\*_NOTE_: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n> buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n> directly within the `mdc-button` element.\n> However, the `mdc-button__label` class may become mandatory for all cases in the future, so it is recommended to\n> always include it to be future-proof.\n\n### Sass Mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass Mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass Mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color)` | Sets the container fill color to the given color for an enabled button.\n`disabled-container-fill-color($color)` | Sets the container fill color to the given color for a disabled button.\n`icon-color($color)` | Sets the icon color to the given color for an enabled button.\n`disabled-icon-color($color)` | Sets the icon color to the given color for a disabled button.\n`ink-color($color)` | Sets the ink color to the given color for an enabled button, and sets the icon color to the given color unless `icon-color` is also used.\n`disabled-ink-color($color)` | Sets the ink color to the given color for a disabled button, and sets the icon color to the given color unless `icon-color` is also used.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color)` | Sets the outline color to the given color for an enabled button.\n`disabled-outline-color($color)` | Sets the outline color to the given color for a disabled button.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.14.1/node@v10.19.0+x64 (linux)","description":"The Material Components for the web 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/density":"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/button_5.0.0-canary.b4727e43a.0_1581105332253_0.6044991603020471","host":"s3://npm-registry-packages"}},"5.0.0-canary.91d9d5a65.0":{"name":"@material/button","version":"5.0.0-canary.91d9d5a65.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"aff243eb3abdb0137917237ebc1efc811dc65821","tarball":"https://registry.npmjs.org/@material/button/-/button-5.0.0-canary.91d9d5a65.0.tgz","fileCount":17,"integrity":"sha512-kTWQlHw6f3wMEA+U5n5K4U3pjhOyl8zGVU4UH65LEuHHySwTIU01Ps2HWSWuAOOyuKBGidklKd+GDrAzmjSMlg==","signatures":[{"sig":"MEYCIQDxBuHZuKFyzSXeVfpQB7Qhy98ywRQRag/qsQ0Pvwo9/QIhAL6oFHt20uKYtMfzWupitMki/PiEPwC1H0+JWJcw7qWy","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":225730,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJePevSCRA9TVsSAnZWagAAzikP+wXpGR7qK1KcncO0smYJ\nFEkzdf4aJfVbjWXXgR0v0Njx5wmGMMTloqWBFmq/lVizVFdMAuUSA4bbg+wb\n2E+M4BIbtUXRfMoDO39uknnGMav4Egyooe/DMop5Ri5APRAMdTtCMeuQMj5o\nVr9SCzDY2sLthNq9ITK97Bh694vr2uMQpKgMhs5n8MqN6dEghrxp8SpdQM/C\nLb4O4OorvdE4EpoELUHrhHucczZZaO5M7rTLudUdUuzF1Jm4S87wyisYFVvn\n3jKrBjUwzNhPTgd0lcb0+nWPXX0R1htKBtnlPBtuAbrwU21AUnrI0TsPMs/v\nt+IQame2uwHRG8sIfQMoI0ezQ35baAUD+AsM0grRxQk1ni1EUJnYy7nkY5sS\n1kIN4cpmwMQC5tAoJBbuS7aZCTHXy72lexpUM5dUWB85LG/DKVnQhumKqiWn\nQgOAjZ92mm45/Vs7tPiQJAo7Hr55mQ6AOjm2aWLI6j9xv8SyMiQPbAW2fiu+\n1jdcmCL09Prs+xXyzs1rzE2YbaOr7n4qIp2EaNyPS0KCwBiw+pacgZsOiWtk\nnaf+kQ9yG77Gl5RTM+mNLYiRvPzV0XFfuApAADJlxNAFB7tut5TXUCAOq07A\nmo2Rzo7af1awUFjrJ/QaWDQNOhH+E3Pnz11wt7hr26K6vl+sdHuNgIFvf1j/\nrr2y\r\n=175h\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n\n\nButtons allow users to take actions, and make choices, with a single tap.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/button\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n```\n\n> _NOTE_: Examples here use the generic `\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n> _NOTE_: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Additional Information\n\n### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n\n> \\*_NOTE_: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n> buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n> directly within the `mdc-button` element.\n> However, the `mdc-button__label` class may become mandatory for all cases in the future, so it is recommended to\n> always include it to be future-proof.\n\n### Sass Mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass Mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass Mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color)` | Sets the container fill color to the given color for an enabled button.\n`disabled-container-fill-color($color)` | Sets the container fill color to the given color for a disabled button.\n`icon-color($color)` | Sets the icon color to the given color for an enabled button.\n`disabled-icon-color($color)` | Sets the icon color to the given color for a disabled button.\n`ink-color($color)` | Sets the ink color to the given color for an enabled button, and sets the icon color to the given color unless `icon-color` is also used.\n`disabled-ink-color($color)` | Sets the ink color to the given color for a disabled button, and sets the icon color to the given color unless `icon-color` is also used.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color)` | Sets the outline color to the given color for an enabled button.\n`disabled-outline-color($color)` | Sets the outline color to the given color for a disabled button.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.14.1/node@v10.19.0+x64 (linux)","description":"The Material Components for the web 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/density":"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/button_5.0.0-canary.91d9d5a65.0_1581116370192_0.8553311660679188","host":"s3://npm-registry-packages"}},"5.0.0-canary.d5c006ed1.0":{"name":"@material/button","version":"5.0.0-canary.d5c006ed1.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"970c4030e12123ed69eb83dc6fb25494ea29d2b2","tarball":"https://registry.npmjs.org/@material/button/-/button-5.0.0-canary.d5c006ed1.0.tgz","fileCount":17,"integrity":"sha512-1xEIqUyXtP9fRMuRcDR+ru+GPsHM4qCw5IF4Myba+UqY0wV3s1L4D22mBIXxI4zS1bder/6r4yZOW74qBqa34g==","signatures":[{"sig":"MEQCIHlciRH5eJP7rFiktRhH5WzaU9l/PDnhwhcSo+t4N2xqAiAB5KzyicK+PGwMSW8hCiLIbzDNSTp1LXyfGMYkAMocWw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":225730,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeQYlsCRA9TVsSAnZWagAAgKUP/RDBlfolRoTBWRUwS08f\nQeAXJEQ+MfoA+M4TFE7Bfl9YOlEfngrClGPMbuwqezkHR0kn9fpNcT+PiYOr\n84yAt4gSP+o2irgwwKjLBuXhCIHaMg4uByZFIcJzLCJyT9QHwkQlFP8+ZYNH\nhWyjPkmOp9/1AS5BUYqDJ84mb03NAcbGRBe08OxX52OmX5fBxHY4u5w6OVs0\n/tki3Rx5jHkPWbMMx1jLrVPRlRd7k3M5QTqUH5Jj+8JD8PmpOK7wIGMYDdzW\nybXVIW7qpqfax0HDxPUfkdgzZxHT9TpSZglVA7wLiN3i5zBUJ1tp8TJc+6rr\nyLSGRdAOa1VK1DvwIh4LJSFbksh7BUiluKGKE5Yo8oW/JoG7gP7JGXQzMNTw\ndOkBXqeyjqSKnal5UjUOTIXTNjY1DZxOZq0Qi3qJ4kd4uiCb9PFPhS9Ydm5v\ndmooVaU1MkADBLPLJsXejl+2PN1OGoy95bFybG1577nq3kbOxxz0oJ72jhBT\nT/ehLBdFYubFA6a4wfHOWanpdJSFXy1H7+4eUnIrXv9/7G6G2nvd3bZKC8He\n4LWGKbM27nBLSKp5td9boroxGH7WQwUHLqf1uQLIirI/8HxgwyV+t8vXXdHq\n4aO3nIYk0tBpG4PerjlY324NjASh3uIfreVlMJb/ELMLJFWQ/orC425carhX\nuZ2A\r\n=Xjyk\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n\n\nButtons allow users to take actions, and make choices, with a single tap.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/button\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n```\n\n> _NOTE_: Examples here use the generic `\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n> _NOTE_: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Additional Information\n\n### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n\n> \\*_NOTE_: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n> buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n> directly within the `mdc-button` element.\n> However, the `mdc-button__label` class may become mandatory for all cases in the future, so it is recommended to\n> always include it to be future-proof.\n\n### Sass Mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass Mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass Mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color)` | Sets the container fill color to the given color for an enabled button.\n`disabled-container-fill-color($color)` | Sets the container fill color to the given color for a disabled button.\n`icon-color($color)` | Sets the icon color to the given color for an enabled button.\n`disabled-icon-color($color)` | Sets the icon color to the given color for a disabled button.\n`ink-color($color)` | Sets the ink color to the given color for an enabled button, and sets the icon color to the given color unless `icon-color` is also used.\n`disabled-ink-color($color)` | Sets the ink color to the given color for a disabled button, and sets the icon color to the given color unless `icon-color` is also used.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color)` | Sets the outline color to the given color for an enabled button.\n`disabled-outline-color($color)` | Sets the outline color to the given color for a disabled button.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.14.1/node@v10.19.0+x64 (linux)","description":"The Material Components for the web 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/density":"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/button_5.0.0-canary.d5c006ed1.0_1581353323868_0.3628326239924937","host":"s3://npm-registry-packages"}},"5.0.0-canary.559f1a570.0":{"name":"@material/button","version":"5.0.0-canary.559f1a570.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"7bfe488ca16b7f9222d3ee5f156bb89dddac856a","tarball":"https://registry.npmjs.org/@material/button/-/button-5.0.0-canary.559f1a570.0.tgz","fileCount":17,"integrity":"sha512-z8ooeiniZ7SLD+mS1rjhwa7C7JfELrXXs2RLgvBfM/iwsSKWGI2kYJRV7dHxl3VA94HLRAwK0B26i0G3oubsrQ==","signatures":[{"sig":"MEYCIQDQZIbeq1JxmHz2/+1eMgTRm0p+hUG6PsfAR5yg0GCkYAIhAMQAO5a5JUwzor4YwvZs9zP7NM0OWogEuie9uGerEyoW","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":225730,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeQZHsCRA9TVsSAnZWagAAQ/IP/isD9WzAkrVyEqlRebi8\nmK3AZE/oGmWjciM+yNLMZ2l+BJVBIoqHaDZe02a29jGUWv5xSIZfN/it7xpx\nV5CC0bQ/nRN69aKA+PugHpIjxXpWf0CpcKcYtJF7DT+uzVYttyWyath6iJK6\n9duKUGpm4AQ8MyEnGj1Ok62yghPXok8aQG9zLM3xbLqx4FIH1Ki2dGIKbdSE\nsWhZT5mXxYq0fpBKjJRzlLBUztFx8pf6uky5YneJrp28L0VnBXHcdvW2orZF\nq/6Ng33QNZzj9Avk29n6G33bOqAHi+FWSzwqgbIK5wM/5Ah1w0M3gH/LCcwN\nbLG8n8uIfPLLxbDsc/RDj3mlusWppdfqGD1hLcQe8RFpqGsdeAIpUyM/8elY\nh3sWwXYFKD1R/gwkbD4xy2wLiuimhddM/ENDVBirWa0ZkaUYBKf9oh0jl2es\n617o7GkzaTyxDRxdQ7D1fjE3uE07N7xGElkFnVOY4KnL41kRlpSEykGM92KM\nuKcuwFcxNJpmSO53S9n2RbTi1YdiCwN4/7wapja3hYIDVavBbHQbgwp3Suop\nxqAL4QOXczJr6UoRZfU1PdENOAUvkwQ+zi1pzT/hmbKq+9MCwcfmB5y/KdCY\nnC3503c86lXiJyfl8yY8sbMwFUCkC0mNwncED1EopXC/Bt1QlJsbCdbWH3Gl\nClql\r\n=RAwl\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n\n\nButtons allow users to take actions, and make choices, with a single tap.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/button\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n```\n\n> _NOTE_: Examples here use the generic `\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n> _NOTE_: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Additional Information\n\n### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n\n> \\*_NOTE_: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n> buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n> directly within the `mdc-button` element.\n> However, the `mdc-button__label` class may become mandatory for all cases in the future, so it is recommended to\n> always include it to be future-proof.\n\n### Sass Mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass Mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass Mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color)` | Sets the container fill color to the given color for an enabled button.\n`disabled-container-fill-color($color)` | Sets the container fill color to the given color for a disabled button.\n`icon-color($color)` | Sets the icon color to the given color for an enabled button.\n`disabled-icon-color($color)` | Sets the icon color to the given color for a disabled button.\n`ink-color($color)` | Sets the ink color to the given color for an enabled button, and sets the icon color to the given color unless `icon-color` is also used.\n`disabled-ink-color($color)` | Sets the ink color to the given color for a disabled button, and sets the icon color to the given color unless `icon-color` is also used.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color)` | Sets the outline color to the given color for an enabled button.\n`disabled-outline-color($color)` | Sets the outline color to the given color for a disabled button.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.14.1/node@v10.19.0+x64 (linux)","description":"The Material Components for the web 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/density":"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/button_5.0.0-canary.559f1a570.0_1581355500572_0.7490845998908382","host":"s3://npm-registry-packages"}},"5.0.0-canary.ad3bbf782.0":{"name":"@material/button","version":"5.0.0-canary.ad3bbf782.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"939d98ca7321b5a6c960406f0c95b102e6d76eff","tarball":"https://registry.npmjs.org/@material/button/-/button-5.0.0-canary.ad3bbf782.0.tgz","fileCount":17,"integrity":"sha512-FnkINagQuWmhJxzfyg4vXyzT51cPuk1M4oeaBcuPgzcmvvgaSAJiS3qAFOlEcK7VIgrPszOHqwXdKaSLqoqcGg==","signatures":[{"sig":"MEYCIQDU+qt2/SPCD+yHJ5Afn5DU9+YEmX9nD1I2ooOmAUZOnAIhAPxcYqLY1T3J1SdgYiWU8kdUvPxlH/sWUw53OUeHcvQj","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":225730,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeQarwCRA9TVsSAnZWagAAffoP/186L/XPGsId5j0XRKE8\nrYSReiJlicLhJv68MF2yXdxV8O8kjpBhLO3NJDN9bSiPLTJKKH7IdHgYfjnH\nRVCno/Px7RQzytxp+RdoHMt/Fi3o/P2hX2h7tLZtqBJQB7WbOSEo12eaVsJ9\nixj4PWkDgM0OOnAbnwTaSoqhOfaZ7hgbeO8qSuhGO8AVJ0ykNr+72c76K4c4\nH8qGXW118ywLugr389tJ6rYRNu00zvdF7eOZDjaE/8qcUkIfr0VvB3pyKYOv\nsh7kdyF+UmYTqdsg/F8Q+P886oWb5I9ZsT0DLaMNJ+YUqO49WiBaXNtfivHi\nOSFIq0ExpLZGzpGbykjIyw91y+Dcd0qUwFDx8OJT3WyvLOJkAeL8Hq0Qp0Uv\ndat3PxeUMrJdSDmVhDss83JlxMWkjXLD2VreAoDMsdEy8c0CDydiU82vskfT\n1j3CIRHqx5HZnyRcrmZaOV7rdjEwCN/HQNXrK9XRxnHU7KVO+t0UXVVgmkUE\n1rrsaF7jZxkERmIxwDb5uGqlYiCWtvziu/jFuqUmZDuDK++3Ydz02AMGqTGC\n4Q4aRyJKlfAmFPkPODdLccnNUypB3ObVaTtEU7T+kwSCL3dXZBSMtclQRgc6\naQXuQwZ2TVgo7D5iDlWIn793FlaAV1KrrVPIm6h9IliXSix/hbZsU8Flx118\nj2bU\r\n=/QBa\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n\n\nButtons allow users to take actions, and make choices, with a single tap.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/button\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n```\n\n> _NOTE_: Examples here use the generic `\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n> _NOTE_: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Additional Information\n\n### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n\n> \\*_NOTE_: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n> buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n> directly within the `mdc-button` element.\n> However, the `mdc-button__label` class may become mandatory for all cases in the future, so it is recommended to\n> always include it to be future-proof.\n\n### Sass Mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass Mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass Mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color)` | Sets the container fill color to the given color for an enabled button.\n`disabled-container-fill-color($color)` | Sets the container fill color to the given color for a disabled button.\n`icon-color($color)` | Sets the icon color to the given color for an enabled button.\n`disabled-icon-color($color)` | Sets the icon color to the given color for a disabled button.\n`ink-color($color)` | Sets the ink color to the given color for an enabled button, and sets the icon color to the given color unless `icon-color` is also used.\n`disabled-ink-color($color)` | Sets the ink color to the given color for a disabled button, and sets the icon color to the given color unless `icon-color` is also used.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color)` | Sets the outline color to the given color for an enabled button.\n`disabled-outline-color($color)` | Sets the outline color to the given color for a disabled button.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.14.1/node@v10.19.0+x64 (linux)","description":"The Material Components for the web 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/density":"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/button_5.0.0-canary.ad3bbf782.0_1581361903885_0.11637402996534418","host":"s3://npm-registry-packages"}},"5.0.0-canary.570d8e49c.0":{"name":"@material/button","version":"5.0.0-canary.570d8e49c.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"9a4f594d76a3251a1770f269cf01559889a95902","tarball":"https://registry.npmjs.org/@material/button/-/button-5.0.0-canary.570d8e49c.0.tgz","fileCount":17,"integrity":"sha512-d9FOj4AY6YWrMnAuxU+cp8t9KllwBopwOP6QGQyKfQQhTNyaaOUdPKxgeY+s1Z1WKinaoaYCT+Y0Ttqydt40cQ==","signatures":[{"sig":"MEUCIQDzTbiUxm9TQxEzXB8v5yf3+bNpuLa3pSbbEbn5MtqcxQIgJnPfc5VLiDtmMN85OrU9HaCxw39veAp5mr3+MdX4yQ8=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":225996,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeQcByCRA9TVsSAnZWagAATfEP/0TnNpHCGd0lEH48sLXf\nnAE2WCS9yz7WooWip9qBQq0QCnewbTerAvCn5Z85n2s6VVEvGo02uxTTDejc\nTh5hPWuTFwcnF/TffFB69Dm2U0AeJiiLk0NsFu2EXyQ5ERSMmf1tS2oPElxX\nqZmZ8W30YUI5qet6wdx80WmYJvFaldhpgM+9xgC+TDOZZ7SZFDZ5v+n4CKD4\nRCoxf1xk8T0GzGh1+UV0xf/TZmti+htRFpYQLC943xMl4K7RE84YtSlbIz1g\nL951bahUA8cvloSLiiMa7clGXNjZPNoshILEmVEihvurN2vCiNzt/lCzXm30\n5BaHNNO6F/O5JP9Xaa67gB3DVZR56xOzDacliLirtGJzqHRbSrCxZHRpMovs\nMa3u0lc7GGUgT7NQURhHqyHicyYWbqebqZKhbHGKKv2dM2L2yvntr1bfXC71\n9XYfWbf6/nuztQVuwHd+CCgerAHahs5NS7y8V0+iJ0zaCcnK8u2sCATobKHm\n3xY+xHcR3Ohh7F2VQb/OHIl+BOBymig1NeSPrIt1VMsuwvktXmNwc9PshOiO\nNJxdNIki2YtBXypxxAbUesdWK/2lafPfSIBa6ankblKNZWDl2Nz1mJclacaX\ntzk+gF6sstmBkgOcF3isTyZmobyO2SET5XtvZdhrYOaffG/Z/fKix8jqsX7e\nQcq9\r\n=rCOn\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n\n\nButtons allow users to take actions, and make choices, with a single tap.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/button\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n```\n\n> _NOTE_: Examples here use the generic `\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n> _NOTE_: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Additional Information\n\n### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n\n> \\*_NOTE_: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n> buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n> directly within the `mdc-button` element.\n> However, the `mdc-button__label` class may become mandatory for all cases in the future, so it is recommended to\n> always include it to be future-proof.\n\n### Sass Mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass Mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass Mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color)` | Sets the container fill color to the given color for an enabled button.\n`disabled-container-fill-color($color)` | Sets the container fill color to the given color for a disabled button.\n`icon-color($color)` | Sets the icon color to the given color for an enabled button.\n`disabled-icon-color($color)` | Sets the icon color to the given color for a disabled button.\n`ink-color($color)` | Sets the ink color to the given color for an enabled button, and sets the icon color to the given color unless `icon-color` is also used.\n`disabled-ink-color($color)` | Sets the ink color to the given color for a disabled button, and sets the icon color to the given color unless `icon-color` is also used.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color)` | Sets the outline color to the given color for an enabled button.\n`disabled-outline-color($color)` | Sets the outline color to the given color for a disabled button.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.14.1/node@v10.19.0+x64 (linux)","description":"The Material Components for the web 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/density":"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/button_5.0.0-canary.570d8e49c.0_1581367409670_0.8652410463396358","host":"s3://npm-registry-packages"}},"5.0.0-canary.48b06b89a.0":{"name":"@material/button","version":"5.0.0-canary.48b06b89a.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"84b15fae88979d6ca8eae5e53963de2e10baa093","tarball":"https://registry.npmjs.org/@material/button/-/button-5.0.0-canary.48b06b89a.0.tgz","fileCount":17,"integrity":"sha512-uAh/488FOZxixR3Uk8+ylX+0R5o7tVvizo4e3ph6JgIZyN7ocvSXsxz2RLKVkZwiB2iFTt2vDv1xxoZICL1J7A==","signatures":[{"sig":"MEUCIHXx3fBqsM0R6KwOS+Ow2Axk4w4Qu4YvUSbc4imnqp+GAiEA38Fwm5cHsTsBJbKw/fIFIadoTmKskZZpsQ8PusReu5w=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":225996,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeQvXDCRA9TVsSAnZWagAAXukP/12aO/a9IwHRGj1WgZ19\nJD3SZ51s7CLZ2MfHAivZAIKiQNDjQPej4uzmFDq8wv7KCQuDpcZPy2Qqe52c\nBV/Lbrs38J8CF3ZTGBSeZu+xePnIBPMgJERYp9+67seK3mrj6vo8VKlo2hCp\n7UrSFnZkOSMAHZnkSTNIW9PWms+KCicihCtkLvQoP4RSz//oH9rcG2vxoFsu\nVXuvRLZZPdkS1j97fIPLXyCHWbFONt1UCMOvYeI7zQFHh3m8m0NraZuhPqPY\nmRJqBmn2EUTJdZNKUUK0LLF2w69rg0hNr/AKnqWfMj2WY+5WMd/jAIFevw6T\nfkLcvobaCN5KoULSwc9YAr4j213Skw43T+Zxksy3UgGeJiwNNLPGsFVsWAkP\nhe5dck4t5CiVn+nQWigxdlKJQ5S4KW75V/y4nrTZTEMrg5Lkp9UhePY2lgyV\nsdvpUQlRa8f2vxjHOqAp7HfGcpQ3eAUJW36P13P6mOVbyY8VtM+IicLou4hm\nr58U3YWDUfX0jZBMYn517iPK4Xv0zp4VO9RHSr2gqpjcX7q74O7PhAezeC+t\n9+gGry+EXI4h9HOWfGSgL7E18P4Lmb2PkFGMnnzSWGSSmBQTqiXewgEwwVtO\nO+0G3vTx9PnfU7eyDxweFSZKy5ax+K7EfWif1Vi1I1SjxKEuAG5832RXVGxv\nk57o\r\n=yRGY\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n\n\nButtons allow users to take actions, and make choices, with a single tap.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/button\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n```\n\n> _NOTE_: Examples here use the generic `\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n> _NOTE_: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Additional Information\n\n### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n\n> \\*_NOTE_: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n> buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n> directly within the `mdc-button` element.\n> However, the `mdc-button__label` class may become mandatory for all cases in the future, so it is recommended to\n> always include it to be future-proof.\n\n### Sass Mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass Mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass Mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color)` | Sets the container fill color to the given color for an enabled button.\n`disabled-container-fill-color($color)` | Sets the container fill color to the given color for a disabled button.\n`icon-color($color)` | Sets the icon color to the given color for an enabled button.\n`disabled-icon-color($color)` | Sets the icon color to the given color for a disabled button.\n`ink-color($color)` | Sets the ink color to the given color for an enabled button, and sets the icon color to the given color unless `icon-color` is also used.\n`disabled-ink-color($color)` | Sets the ink color to the given color for a disabled button, and sets the icon color to the given color unless `icon-color` is also used.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color)` | Sets the outline color to the given color for an enabled button.\n`disabled-outline-color($color)` | Sets the outline color to the given color for a disabled button.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.14.1/node@v10.19.0+x64 (linux)","description":"The Material Components for the web 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/density":"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/button_5.0.0-canary.48b06b89a.0_1581446595076_0.5717011229732714","host":"s3://npm-registry-packages"}},"5.0.0-canary.612443dfb.0":{"name":"@material/button","version":"5.0.0-canary.612443dfb.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@5.0.0-canary.612443dfb.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"a71b48e480bbc79b050616d6a582fa7f372df630","tarball":"https://registry.npmjs.org/@material/button/-/button-5.0.0-canary.612443dfb.0.tgz","fileCount":17,"integrity":"sha512-PlXwqZdRRw4Uk42wjOnKcss1aWmlOkooZl3BRxKj654qqHN4oRGrvUpxENJBDHP3q4A3Ep19/tGXHVh/7T9YBA==","signatures":[{"sig":"MEUCIAJteoPQ7O7qfqufUYm7XGHo1cPTYcqZQ/TBlQiaWMv7AiEA/BqeXdZKMFWcXl/IJjvsSTbvKSAkY5+4DeObWUQ44NU=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":225996,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeQwU0CRA9TVsSAnZWagAAROoP/2gSGKzPDiLRfAR8bS/1\n7gaEJIulNxB1uzP/DcKd7/csnA0JyDSnnZvRL0cXNoAwFSwtbnct3Mm+Trkn\n0UQt9bsiHxL8RmrHNt++TtvZiO3rbr6z3ty/dln0O4TMzuVmB8veYNOdrfdX\nQAwW6GosMkjisK86nZ9kXsY88UL4NaOv4d66w4tsf8cCAxK2UqYBjszLsHFj\nPghOYIaxsQDz2EYdCTVABNUXmULfGIcUwAf1u0Ada+wmVGKeMsE7f6p3Z58R\nnoqm1m4s2jcklrpWDtO8Dsuy3S+WyLJgliuqyi4V38Ul05ysFurhiW9um/En\ntm/VTRYuuIAF26FJPfW/9qnvi9ti0cbtJW3xiWFe/cgLLE98C0RlRg9jX8UM\nAJNcRm210RChqYCz+LzzmiYk0v9nzWhlf5mh0n1ol7S2L0X6M53k9KjrRf32\n8NkWuNQAGBFXFyCRlRGr3pb4a2ttV5Z6i9+eIc9YLld+i8Ne2TIsm1lSHjmv\ne9/1DJyF2IlKhQURqNuZ5zxbOBwFKyDUGEklKdzMRelloDMF4YpJKWgLpeMd\nlUc+jIozoaj+x/Y1UKdqEbsNIRirjKWX0V7Y0qohb724JjaDFOVnxAC8RhwG\nWxM1Bn5bvmBREzhMbsgX5XtDnYTotqniTH8MLWFUA+NJ7CSHBFqJ9yTyqGfD\nTKgu\r\n=Uqa2\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n\n\nButtons allow users to take actions, and make choices, with a single tap.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/button\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n```\n\n> _NOTE_: Examples here use the generic `\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n> _NOTE_: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Additional Information\n\n### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n\n> \\*_NOTE_: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n> buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n> directly within the `mdc-button` element.\n> However, the `mdc-button__label` class may become mandatory for all cases in the future, so it is recommended to\n> always include it to be future-proof.\n\n### Sass Mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass Mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass Mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color)` | Sets the container fill color to the given color for an enabled button.\n`disabled-container-fill-color($color)` | Sets the container fill color to the given color for a disabled button.\n`icon-color($color)` | Sets the icon color to the given color for an enabled button.\n`disabled-icon-color($color)` | Sets the icon color to the given color for a disabled button.\n`ink-color($color)` | Sets the ink color to the given color for an enabled button, and sets the icon color to the given color unless `icon-color` is also used.\n`disabled-ink-color($color)` | Sets the ink color to the given color for a disabled button, and sets the icon color to the given color unless `icon-color` is also used.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color)` | Sets the outline color to the given color for an enabled button.\n`disabled-outline-color($color)` | Sets the outline color to the given color for a disabled button.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `horizontal-padding` is also included with a custom value.\n","gitHead":"622585006b9702fc93bdf0ae416f6c58e398243a","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-button"},"_npmVersion":"lerna/3.14.1/node@v10.19.0+x64 (linux)","description":"The Material Components for the web button component","directories":{},"_nodeVersion":"10.19.0","dependencies":{"@material/rtl":"5.0.0-canary.612443dfb.0","@material/shape":"5.0.0-canary.612443dfb.0","@material/theme":"5.0.0-canary.612443dfb.0","@material/ripple":"5.0.0-canary.612443dfb.0","@material/density":"5.0.0-canary.612443dfb.0","@material/elevation":"5.0.0-canary.612443dfb.0","@material/typography":"5.0.0-canary.612443dfb.0","@material/touch-target":"5.0.0-canary.612443dfb.0","@material/feature-targeting":"5.0.0-canary.612443dfb.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/button_5.0.0-canary.612443dfb.0_1581450548233_0.679763255471562","host":"s3://npm-registry-packages"}},"5.0.0-canary.8c11ea2a3.0":{"name":"@material/button","version":"5.0.0-canary.8c11ea2a3.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"8641c46a9966b6b7457c47ab6edbe58a2ef007cd","tarball":"https://registry.npmjs.org/@material/button/-/button-5.0.0-canary.8c11ea2a3.0.tgz","fileCount":17,"integrity":"sha512-at1oAiIJtUqIs73edqdFA+YYjNymh4gZkA6ocIbayzlG+pWlmpq6GvZjUxPVwbRUQGH+D6mCjBfTgfq4TxKm1A==","signatures":[{"sig":"MEYCIQCjrXpxjX7TKpFmxFTVgEHsvj4zixxMNyrAZhdklDyp+gIhAKN3Awz7z5EZRh7ACfcsjoagrEtKneE6bo/Wl65sUNxY","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":225996,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeQ7yXCRA9TVsSAnZWagAA0Z4P/02VOdD1j6AAm4H6stGW\neDudtyM9SZPtL8jtrCfieiE0vlXLsKUW5HhVsZup4R/I0d0i9VZ+QmTVcYNE\nvwMTnwYuNlR0hU5Wb50uS/lVPcfIURLVoCnNDd7THns8yWHbKVdHkMdHqY5X\nCaQBR9db1iUUrazJBitGMDi1XT58ePMPtowsaD+rkgn+yyvwNDkTsU/Rxi73\n72jG3/DrTxr+/qvjhTBUhs4m+REibO391N/726F331bupBSHGoywkIQ8pZx+\naZaowhpPGYP0Q6jMORFpJpLaYWTlKCVXRSRUIiYZMMu2kT02BMRjquyj3i/x\n8dm+5pCFDy+g386xbk1lHzPyRdDlqa2RHm0m5NOVG0pNq538TtnFetaxmrir\nPDz7zNvvdjWdnXOGp+H8p2SlmGJRdxGxFH+dXEG0XM8BEqB+9jW0hmrGvtk7\noGlLPO/SXCJaMado2PeoxVvN0qRyDpRvMD/rn2qBSY/G00Jzi7xNPslPhfZC\n5VOkIH9mJzirc8EqsmE1MR5bY5Mwtai5DBVFUX8ygiJwAbzUnu2dk7ZudjVH\nOH/+PXvKwUzLatzLAyGxAbsWgHHf3A86aWi1E32Mv+Q7kEmTwCVfW8wJzUiK\nDlg8VPwkEfKqekZ2Lxqfwn1Hu1QWxb9CMXSqe02XbQFJxMhCltHjAHh/teHW\n3Shq\r\n=Dt/a\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n\n\nButtons allow users to take actions, and make choices, with a single tap.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/button\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n```\n\n> _NOTE_: Examples here use the generic `\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n> _NOTE_: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Additional Information\n\n### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n\n> \\*_NOTE_: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n> buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n> directly within the `mdc-button` element.\n> However, the `mdc-button__label` class may become mandatory for all cases in the future, so it is recommended to\n> always include it to be future-proof.\n\n### Sass Mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass Mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass Mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color)` | Sets the container fill color to the given color for an enabled button.\n`disabled-container-fill-color($color)` | Sets the container fill color to the given color for a disabled button.\n`icon-color($color)` | Sets the icon color to the given color for an enabled button.\n`disabled-icon-color($color)` | Sets the icon color to the given color for a disabled button.\n`ink-color($color)` | Sets the ink color to the given color for an enabled button, and sets the icon color to the given color unless `icon-color` is also used.\n`disabled-ink-color($color)` | Sets the ink color to the given color for a disabled button, and sets the icon color to the given color unless `icon-color` is also used.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color)` | Sets the outline color to the given color for an enabled button.\n`disabled-outline-color($color)` | Sets the outline color to the given color for a disabled button.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.14.1/node@v10.19.0+x64 (linux)","description":"The Material Components for the web 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/density":"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/button_5.0.0-canary.8c11ea2a3.0_1581497495362_0.554834935101906","host":"s3://npm-registry-packages"}},"5.0.0-canary.b2f3d311e.0":{"name":"@material/button","version":"5.0.0-canary.b2f3d311e.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"331c34449fa620c3d0922da4c579401114286da6","tarball":"https://registry.npmjs.org/@material/button/-/button-5.0.0-canary.b2f3d311e.0.tgz","fileCount":17,"integrity":"sha512-SIG7Aw0d5tCn4I6quph1Moxm5/qKaTD3cu3/U01U7g3GeJuCd4QjbJU7TNPVVPo1ATqiEsTAmc2HDrWmL9AT8w==","signatures":[{"sig":"MEYCIQDXRv7ZquyYbjAAHgPAxVhIxWdwgDPtWqa+M1T15rVtiQIhAOetKFt2oPETQYrQ2oui8IdBgQzjCxF2kNEMjsrZAe9t","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":225996,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeRcMqCRA9TVsSAnZWagAAivUP/1/VPV6mtrZ7Y3IlY9Yt\nteBGZ8vTykxFQIlkwHnM5ygxVoBx4f976uUcjG1x4xOuh9aHhxN9aFJa61CD\naJZyQzzi5sn3Q8qHQn5+PJngyFFfSmy0W8jMSaK+M2mEDRrmf6fVYEuwT5pO\n26Qy175GO9JccWcbBxIi8XaqT4++CnNXKA6UUh28y4oysAxPmlvGvVfOd+Sv\nN++U+VkAkaIgV6ga77Lbolii/0uEdcOmprI/kIXyDYopD80yw3+XZkttBbxa\n/oW8lP0WOOqmiqcHZj/EcqFgqNp9rQJ62CFKbsPO5HX4zJ6zZ1xfW0KUjI2p\nV7HLqGF2Cn+iTOVpXibjdO57BoDu2wkC4qZWuKofxBjZLHVPDEki3eNrujpX\n126krlcblipiMK0hsHnt0dcL6JC/PV8MU7In2RqXiIq8wPldfImeR2rOExAU\nKCmLf2Dv4pi50CkC1qBpryckK4OTdb0sTGL2DUUN7j2uVF85paxBz0x6i8JL\nCMsXD8DyvjZiUk9vp79D2bNjHH2XOqbEp34kKtByPQ+NmHvEnQ009PWHtSbE\n3ccNUWEIydcKhGoOCmBc1hK9fxJ/fZ52mhO5i1bl6BnT23Cs9BGUj+fCjD1V\nrkoQcNux75G+BizZ8XvED1dhVzXAzTj/rHzbvmvn/3NErnwuiqBlKPxGxgro\nSd0b\r\n=AoxU\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n\n\nButtons allow users to take actions, and make choices, with a single tap.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/button\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n```\n\n> _NOTE_: Examples here use the generic `\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n> _NOTE_: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Additional Information\n\n### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n\n> \\*_NOTE_: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n> buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n> directly within the `mdc-button` element.\n> However, the `mdc-button__label` class may become mandatory for all cases in the future, so it is recommended to\n> always include it to be future-proof.\n\n### Sass Mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass Mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass Mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color)` | Sets the container fill color to the given color for an enabled button.\n`disabled-container-fill-color($color)` | Sets the container fill color to the given color for a disabled button.\n`icon-color($color)` | Sets the icon color to the given color for an enabled button.\n`disabled-icon-color($color)` | Sets the icon color to the given color for a disabled button.\n`ink-color($color)` | Sets the ink color to the given color for an enabled button, and sets the icon color to the given color unless `icon-color` is also used.\n`disabled-ink-color($color)` | Sets the ink color to the given color for a disabled button, and sets the icon color to the given color unless `icon-color` is also used.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color)` | Sets the outline color to the given color for an enabled button.\n`disabled-outline-color($color)` | Sets the outline color to the given color for a disabled button.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.14.1/node@v10.19.0+x64 (linux)","description":"The Material Components for the web 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/density":"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/button_5.0.0-canary.b2f3d311e.0_1581630249790_0.20057274307720596","host":"s3://npm-registry-packages"}},"5.0.0-canary.4f488d0ee.0":{"name":"@material/button","version":"5.0.0-canary.4f488d0ee.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"be48256400641deb400669a0b2e6f3b683b748b6","tarball":"https://registry.npmjs.org/@material/button/-/button-5.0.0-canary.4f488d0ee.0.tgz","fileCount":17,"integrity":"sha512-IrfNGjlcMPmoMhhRXmNRBeQ3I6hgezxz0BUQJncYCCSR4NMNwgXTKTrUinL4kKjQm6Ml1lQKEgqYiMi2p22Miw==","signatures":[{"sig":"MEQCIAfDVIyGB8XtHpocaolV9azdb38dj+XzgCKIRrdCAuEcAiBTFuveSnb2clXZHPNxqNd40jTZbKGbpKf92O0m0n2Aiw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":225996,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeRdZpCRA9TVsSAnZWagAAyAwP/3fjgDhymoRjZumwZ00G\nmyfTyH6rthMsEdKs6YT5aXeTtPdunxMZ/RlCLsw+AFc0sOOrr3DzCxdxTWHr\nqExQ9laoZyyV9vus7ttIJgwvgJLscWjPCWUoR6gsovdjcjH0ReaOHKrFmsev\nadSapzlOwUqYCsfkSXRaa1ntI2J6cera07+Xhu406JLkeMmF5GQvJJgziXWF\nZI3L/agNfw88WQnELtQshJolMvd+JdnQq6rvXQbDgg0pTBcA4ISVnAEA5y6r\na+loxSQKpQISL0zKN42tr+SusL07ad4sDk5ZRY6cbQuvMrm6L6sBR0hLv5D6\ntvBdiKgwIHziQOyE0fZzBMPYe2vzfwI9tq3+mjCeDjrijvE2/qnOsHZd5Qvr\n6bC8JYLFuOCm2gHFgdspUZJHoxIxmNB5Cz+2EJ8zMkzjAaa117bKccn7wtq6\nCLK4+V3vAi8dwjxQsbeGMyKCxJ6jHvk5WfxF4nGDo9JGtszfmVHXB337xGmb\nPVF9p874NRacu9ITk4rCpHoT2ktR8hihVpIZhN0TRn6LDPpvJS3qDUy6NLSs\nNJzCy0OOBJzgUSTIz13kVkE/lxoB6ulAE6EINkbWe+aMQcdDQ1Xvf6d36MIk\nqMCLsV+yaSeB8XJn9MkZc76k4rs24F7D+zHc8wtg3gwE0jWf+N389BL+b6Pt\ncDgF\r\n=JAPq\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n\n\nButtons allow users to take actions, and make choices, with a single tap.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/button\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n```\n\n> _NOTE_: Examples here use the generic `\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n> _NOTE_: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Additional Information\n\n### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n\n> \\*_NOTE_: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n> buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n> directly within the `mdc-button` element.\n> However, the `mdc-button__label` class may become mandatory for all cases in the future, so it is recommended to\n> always include it to be future-proof.\n\n### Sass Mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass Mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass Mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color)` | Sets the container fill color to the given color for an enabled button.\n`disabled-container-fill-color($color)` | Sets the container fill color to the given color for a disabled button.\n`icon-color($color)` | Sets the icon color to the given color for an enabled button.\n`disabled-icon-color($color)` | Sets the icon color to the given color for a disabled button.\n`ink-color($color)` | Sets the ink color to the given color for an enabled button, and sets the icon color to the given color unless `icon-color` is also used.\n`disabled-ink-color($color)` | Sets the ink color to the given color for a disabled button, and sets the icon color to the given color unless `icon-color` is also used.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color)` | Sets the outline color to the given color for an enabled button.\n`disabled-outline-color($color)` | Sets the outline color to the given color for a disabled button.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.14.1/node@v10.19.0+x64 (linux)","description":"The Material Components for the web 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/density":"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/button_5.0.0-canary.4f488d0ee.0_1581635177226_0.05765734036191539","host":"s3://npm-registry-packages"}},"6.0.0-canary.fe79de07d.0":{"name":"@material/button","version":"6.0.0-canary.fe79de07d.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"fa6b38483e932233f74db0ff30464c43c17cba6e","tarball":"https://registry.npmjs.org/@material/button/-/button-6.0.0-canary.fe79de07d.0.tgz","fileCount":17,"integrity":"sha512-0twbuqALhwtg0ulXFtl8Yn3kPdy/U2rRu5bFE0l9Uo0rHgbn6FWiQJGz3pH2EQZGkknwxAlSgrLLa5GPurH5ow==","signatures":[{"sig":"MEYCIQDN4yEjM7f0UB69XW/Xb2F7yZvVcXBTlpB0A3lnBaUnqgIhAKbw5M+QUpHtWK5Hd0TaxTcS+06N0PN+gofwgTOoxweV","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":225996,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeRdp8CRA9TVsSAnZWagAAuo0P/j3OZ3YmdAx8k5IOoWfO\n8hKT4SuGfwKRuDWLoh/R3NwGDa2h8OoeELADmZ6uZeTGmwXG82avVG+NWQpC\nw73SmUgbmTznBPVawzpu4sowno8IRxMFY0+iWhRvtIjBrZ2IRH9ZVI9iBXML\nhL1KckX56aVuVOUd6ceq2zn466BTosRGAypHLm0hZnadVmvwskncEOzUP1XJ\n+CjGxXjou7I5NO7G+3kFm6TmgQpW8+itdV6C/LsP7CgRmfSTWbYiYu1uOks7\nbyZZm/VijqSAzwqGa/O0DJFkJI6R5m96xowCF7wyrFFPmO/Q96/mm7J2PJkk\nDFQhFexIRWuorGrb6W6wYsrak1KqZpJnqhCk2HrlEqIvxmARIomGAI/WhMJz\nq3if0zJ0sW1NE5gUdsdHzr+rXUQKG426Pbv9SiueJ8kb3mXAHd5ykx+PS/aw\nYg+xLfTpjofwakk8tezNc2gUO3WEDKenjEj2hnmB5QzDh+b2a3mr/i5OfmlG\nyquiiQceyiDhZo2W8lQgips2AcaUTzT5nnmiN1fVvhW8fnoZEhpiy/x0Uhdz\nsfezvHUeYz+KBWWcXOEMf3kRVsuPSDjsS09P9Gqv8DMo75Y+OyWGQRe1hdO/\nVb5To+17bOwikJ+BqztJ/c/lwBoeUUJKbo9+fMcNQggOAaQIi1qNPoKJvjbo\nmjVi\r\n=IrkD\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n\n\nButtons allow users to take actions, and make choices, with a single tap.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/button\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n```\n\n> _NOTE_: Examples here use the generic `\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n> _NOTE_: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Additional Information\n\n### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n\n> \\*_NOTE_: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n> buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n> directly within the `mdc-button` element.\n> However, the `mdc-button__label` class may become mandatory for all cases in the future, so it is recommended to\n> always include it to be future-proof.\n\n### Sass Mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass Mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass Mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color)` | Sets the container fill color to the given color for an enabled button.\n`disabled-container-fill-color($color)` | Sets the container fill color to the given color for a disabled button.\n`icon-color($color)` | Sets the icon color to the given color for an enabled button.\n`disabled-icon-color($color)` | Sets the icon color to the given color for a disabled button.\n`ink-color($color)` | Sets the ink color to the given color for an enabled button, and sets the icon color to the given color unless `icon-color` is also used.\n`disabled-ink-color($color)` | Sets the ink color to the given color for a disabled button, and sets the icon color to the given color unless `icon-color` is also used.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color)` | Sets the outline color to the given color for an enabled button.\n`disabled-outline-color($color)` | Sets the outline color to the given color for a disabled button.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.14.1/node@v10.19.0+x64 (linux)","description":"The Material Components for the web 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/density":"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/button_6.0.0-canary.fe79de07d.0_1581636219576_0.8348544197406109","host":"s3://npm-registry-packages"}},"5.0.0":{"name":"@material/button","version":"5.0.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"ac9341a42e9b4bf893ec57ff7ceaa270c1c179f5","tarball":"https://registry.npmjs.org/@material/button/-/button-5.0.0.tgz","fileCount":16,"integrity":"sha512-ttKafOMIeFgDvEoOjMxENQg8y9uvtvY4z6FxEfDjZrGkyfQj2p6U5Z5IXCfhH+GIZDmxq4mMG9I9YuZNoRv5bg==","signatures":[{"sig":"MEUCIANRrRcfFE3XpH+M58lO4Osx3xDkVR/WIeIyFLeokh2KAiEAgLiocf4K7qvHFTy95O4Wy9qujoE1N0Djo+zee1h5O3A=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":222439,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeReUaCRA9TVsSAnZWagAAf68P/3ATD6XHlmTvv22Xzwvp\nenZNqdpp1EVmebpn5bJA5qfdrlyZT5MeNtRUYIoqNhOeQ/ZQWtrW0EVwYuTy\nmNZldv/y3fb+XmGFaDOrBIevOkv+LK8sw98qbEXElZW/9NlLmMSQcRt7bHaP\ngy7RqLNcdUTJAAWTJ0oZNKRBwUjrWTb78zeWH9KK98RYw/ZDrJx/AIAFML/0\nodWLfYa8VdnApSGVK86+qq91+gbNp9/+zw67vWhefQlZOH2xgTVhRFB265xY\nmVIX6LlgHiuVshTm6/UgTHekZTvscwT86pYSDs6kyBUdMoguRhvyjCJsOWKd\n/nXGGJI5TZNZGVFLTcRc6KiiQ0aE2oxZ1YIMaBi8bkiqd7f7MX5ibOVURQqn\ncdhRKSEsxXa2Zhuzt1JZha8JOtkuVRDBa6kAi1SQVGWKPZaha9hELABqY14e\nM9uiZaTjaDCCzxIQqe9nvztSRNJRVPGhEHmN4v+f1lX8Jcy+gPU1Kug/Z+6M\n2y292w4ZTtt8Fyz1E5M0MD9OTcUVe5sk1/dqcA5/qzK60fZ8J8VYVH/R0Dwc\niil4HNy/QnjHBikyl2ZIfDWfZ/UIMCZbm85Vcr3F7FjI1kNy3NMHk2IfzBYc\n1JuYiHhTcz3qMCqTic4W9Z+hu8RPFVvmTcG/X24/RG5O5Gm8FPON3ExGi4Zq\ngenV\r\n=IEkJ\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-button"},"_npmVersion":"lerna/3.14.1/node@v10.19.0+x64 (linux)","description":"The Material Components for the web 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/density":"^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/button_5.0.0_1581638937694_0.4532442955364058","host":"s3://npm-registry-packages"}},"6.0.0-canary.5e313b1f2.0":{"name":"@material/button","version":"6.0.0-canary.5e313b1f2.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"7fe233cb4a02ea2159538cf41daac8a716d3bf2c","tarball":"https://registry.npmjs.org/@material/button/-/button-6.0.0-canary.5e313b1f2.0.tgz","fileCount":17,"integrity":"sha512-DhYwlyc4I+r3Ymk14J1LQlfpWUzgKNrwACQN7+WslobDxH0mi5/phEbkgGs/f41iE8eSXsOGUVq44w36Da2d7A==","signatures":[{"sig":"MEYCIQCJYKnd6jEEGPO/ERKQSrqZtOWetmSEeEvu+2FglHV9swIhAJQZsV68xdpHKmTRFVgDcswc8HODvu9lAO7it9U59Vdb","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":222994,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeRzG/CRA9TVsSAnZWagAAkvoP/RTBVGpwoUQfRUk1FCfA\nZNPUpAuD/fF3D1rcXsiMf7xGSzjAoQs/54opc0GBCI8RKJV9k1LOBDkyK6Az\nLmUIt8vx/YqwjJc6JuxHquqtROh/URcTD66vlm7o3sFlNrMx+QeKzcV4NCSm\nuTZ6Buhya7yLflo3lMUJDOaXRy29W21jiouUeoORB6orA9bx9WqRtbodU5ww\nGd/KkhugG88dgZdlIZN2jR5XpwR6DXAC6cB6HZ/vNNafMs+TDJS///VIc9Qy\nD/H2Pw+dMGsS1fGS5/BfXfyZ88RVTCCufpTdqyhKXYPyQZCpJ/B/a3Gp+29F\nw+3BsMN9mkazKGaKo8p3P+Z2pCWYvFvR4Q/HSqOPUf5qG7FFbQlwoTaa3R7Z\n9qiQdkwxhejmELc/IC7MA0tTGCP+SgrWhwTUWV1oSS8d+d3xSalskD1lesz6\nRwm3d2JrwuvaGlxh6GSdiiM1iQ29PDG4XmAbduMXkZOFZ6mW56q27nqxDsxf\nNSuFggRIGfLshDYchRuzNqYhaPhedD/JGwjMBnTeV/DD0ZOAJ2EB4j5DmkmL\nSUoOaHKEdNI+d3BjHmQMPJSeRmqYP4w1iYhUqtgKSzpqKIe6mzAwK7d3eOzl\ng6iTr+/YooU0UEfzxsZLFFNxwWXDpwW6rwDuq8cbpfs5f8MOLMUjNH7O1VMu\nhbPD\r\n=1Olw\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n\n\nButtons allow users to take actions, and make choices, with a single tap.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/button\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n```\n\n> _NOTE_: Examples here use the generic `\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n> _NOTE_: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Additional Information\n\n### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n\n> \\*_NOTE_: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n> buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n> directly within the `mdc-button` element.\n> However, the `mdc-button__label` class may become mandatory for all cases in the future, so it is recommended to\n> always include it to be future-proof.\n\n### Sass Mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass Mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass Mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color)` | Sets the container fill color to the given color for an enabled button.\n`disabled-container-fill-color($color)` | Sets the container fill color to the given color for a disabled button.\n`icon-color($color)` | Sets the icon color to the given color for an enabled button.\n`disabled-icon-color($color)` | Sets the icon color to the given color for a disabled button.\n`ink-color($color)` | Sets the ink color to the given color for an enabled button, and sets the icon color to the given color unless `icon-color` is also used.\n`disabled-ink-color($color)` | Sets the ink color to the given color for a disabled button, and sets the icon color to the given color unless `icon-color` is also used.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color)` | Sets the outline color to the given color for an enabled button.\n`disabled-outline-color($color)` | Sets the outline color to the given color for a disabled button.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.14.1/node@v10.19.0+x64 (linux)","description":"The Material Components for the web 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/density":"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/button_6.0.0-canary.5e313b1f2.0_1581724095283_0.3887999611753692","host":"s3://npm-registry-packages"}},"6.0.0-canary.6a56f387c.0":{"name":"@material/button","version":"6.0.0-canary.6a56f387c.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"89f66063804d59d12df062539edc20e3ab64f15f","tarball":"https://registry.npmjs.org/@material/button/-/button-6.0.0-canary.6a56f387c.0.tgz","fileCount":17,"integrity":"sha512-otsHP5+00bTnsIXAepjwv64MX17NooAV3eUBadp7ekBIZRz/V/diaTZw3iRMRJ3tKgBxawnsV9kmCmfCtbzdqQ==","signatures":[{"sig":"MEQCIG2dTB5AdibSAhimFj0yd5pTDeYB2EPlZG3QSMY3CLldAiBcOUiX2lAt0pecbra2tjxfs8XeMIzD+dcB61wzPtMR5g==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":226864,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeTD55CRA9TVsSAnZWagAAo9kP/0c4B250Yk5k95I8kUxA\nbueRCkSUVks2/Sv3hIHgoeG/pOU1q5CLwgD87WTeu4vopLuHm/1D6eeegX0p\nJyxD91kf0DhY7MJGExS7vCIdcGgWk5taseZ0bATsCkU/QatDCAxGnfi99f4a\nueaLrRuDxjYcjdECts0PP0J6Yg2dp/crykdk4JG7PM+8urV38n8mv76TtRzG\nrgjk3MMSkXWv/dQR37GpZqlG5BxhIBgCbtrzyJ1TZ3CO1Ch7gzPKEDbNFy/N\n6I/fSVxyWKfQCA3WVmU15GX7ub5ZZ4Y+DSKFHh9Zmxg6dP5q/c4WbS9NzgiC\nFV6XFtWTErBySiF6UNJoB4FjPym+FsPrgnuUz/C2Ms8xuk0br10N8Qpz6N5n\nqUHBXyUYFotBTTJ/CVGNy4BXGqUK/leQob6XlfYyecRRTmMRlBJuWGWz71ux\n5InNqQQvrn7F+osa+fXzRiksU3pkbA2lWafQPTQcpGFUpi1UR2uGonzCHmJB\noM/l+KdUitr2zfSFKsSaoe+13OFFKXAo8LK5+BiGJRVdZT3ykV7gaW6TvqCu\nL6R53sI39WQxorKFje3nwe7E4qme+qZEL7hhAXvYgWHXj4UrctXMATtSuPmI\nq6Qh4CzGF/x6c4YXXepomsMnTzCtZwyJhgpdYIVyBapDQ1b46q7DkZFIpzZ9\nnrgk\r\n=mxnc\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n\n\nButtons allow users to take actions, and make choices, with a single tap.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/button\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n```\n\n> _NOTE_: Examples here use the generic `\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n> _NOTE_: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Additional Information\n\n### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n\n> \\*_NOTE_: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n> buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n> directly within the `mdc-button` element.\n> However, the `mdc-button__label` class may become mandatory for all cases in the future, so it is recommended to\n> always include it to be future-proof.\n\n### Sass Mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass Mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass Mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color)` | Sets the container fill color to the given color for an enabled button.\n`disabled-container-fill-color($color)` | Sets the container fill color to the given color for a disabled button.\n`icon-color($color)` | Sets the icon color to the given color for an enabled button.\n`disabled-icon-color($color)` | Sets the icon color to the given color for a disabled button.\n`ink-color($color)` | Sets the ink color to the given color for an enabled button, and sets the icon color to the given color unless `icon-color` is also used.\n`disabled-ink-color($color)` | Sets the ink color to the given color for a disabled button, and sets the icon color to the given color unless `icon-color` is also used.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color)` | Sets the outline color to the given color for an enabled button.\n`disabled-outline-color($color)` | Sets the outline color to the given color for a disabled button.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.14.1/node@v10.19.0+x64 (linux)","description":"The Material Components for the web 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/density":"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/button_6.0.0-canary.6a56f387c.0_1582055033126_0.7927202891786913","host":"s3://npm-registry-packages"}},"6.0.0-canary.bdfd52632.0":{"name":"@material/button","version":"6.0.0-canary.bdfd52632.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"82b6928019093ba515983ece90c39ed4a8849a98","tarball":"https://registry.npmjs.org/@material/button/-/button-6.0.0-canary.bdfd52632.0.tgz","fileCount":17,"integrity":"sha512-9GHMkNuF6h+oNJjy94j/LIa0sVOHPLOvKaZ5IH72i3pV624qGq4dlTCmwrClkKARQCIqT5gqCr0pXcoePH62Vg==","signatures":[{"sig":"MEUCIQDHMP1r8z45cGvvwEf+5t4WnkJqGJ9wmF9u2W32/BBjWwIgB4R9ZY/J8vBiS/zHFFFYjM6YKoz1/4zptaTeQIP792g=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":226864,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeTZkRCRA9TVsSAnZWagAAfBUQAJbYkTITDcvRXLCrCoKv\nePresQkaR+rxwHm1gS/d0OZdH76b8V1F6aOxO9cBy6TyroVn4bocs3BvVFJd\nEpfH2exNax8fDwPCu2b5neMVEa4m0XCVDOye8Qt4PrbCIV2fsLDKbHcW0oHT\n+qx7XqarmtTtnmMj6mKOYo4IA1b+d8Q95Lk1NCLQd4Z7rP6fLzsfnoy3QbvF\n9KXNRDBXLCDbHne9dt9YU4r9laLDNNBWEhFeiZGR7K8knvyMAofrdxz5NJ6B\nWHiEubFEv8rFtV/6OTE3NCboYWkjX4joA2fjhgM3Rjk5JZskQfhptWVVYp44\nfKIus7hAZeeYbvYEpUEM8C52kJ4/73goN565VJ0E4a4XRKV2+AVPo/2N/PAQ\nuiucUnA/cD7ttkMuxxQF4rC3N2ymjC8FhspRpa9mHHadiN6Q9YgUSeZwtwZ1\nKVwD+vvJeVMp8WU1Oj+mtJflva+KqtmNmIzmLm/Lar82z6jUTUmoDP5J0ZR6\nbRRJWIWAxMsVrhXN9zMCdC+oS+sD5FMtwive/x8qwaHmgAQnQYYeHaPIXxvt\nI2e6OewJ0MSJO+N6NfZUN/NfX975BpvsJXJh7a4O+27JUMZZfqWhNugVZAQ0\n3B1S7q8taIb74QQPwSElNv7Hhf93KZb7KMOJYPPt91kf5HNbqnn8NqEkz9n/\nbnBY\r\n=w5Sv\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n\n\nButtons allow users to take actions, and make choices, with a single tap.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/button\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n```\n\n> _NOTE_: Examples here use the generic `\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n> _NOTE_: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Additional Information\n\n### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n\n> \\*_NOTE_: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n> buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n> directly within the `mdc-button` element.\n> However, the `mdc-button__label` class may become mandatory for all cases in the future, so it is recommended to\n> always include it to be future-proof.\n\n### Sass Mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass Mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass Mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color)` | Sets the container fill color to the given color for an enabled button.\n`disabled-container-fill-color($color)` | Sets the container fill color to the given color for a disabled button.\n`icon-color($color)` | Sets the icon color to the given color for an enabled button.\n`disabled-icon-color($color)` | Sets the icon color to the given color for a disabled button.\n`ink-color($color)` | Sets the ink color to the given color for an enabled button, and sets the icon color to the given color unless `icon-color` is also used.\n`disabled-ink-color($color)` | Sets the ink color to the given color for a disabled button, and sets the icon color to the given color unless `icon-color` is also used.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color)` | Sets the outline color to the given color for an enabled button.\n`disabled-outline-color($color)` | Sets the outline color to the given color for a disabled button.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.14.1/node@v10.19.0+x64 (linux)","description":"The Material Components for the web 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/density":"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/button_6.0.0-canary.bdfd52632.0_1582143760936_0.936935006420035","host":"s3://npm-registry-packages"}},"6.0.0-canary.ad2e4376a.0":{"name":"@material/button","version":"6.0.0-canary.ad2e4376a.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"568fec52cd0f5516ef25379e4d9b56c19bcae74d","tarball":"https://registry.npmjs.org/@material/button/-/button-6.0.0-canary.ad2e4376a.0.tgz","fileCount":17,"integrity":"sha512-quarFF1wzlurfh5AQ1RUeO4lzqOiS1p3SOn1l4reuDC8h9NG1f5p5wovsz2cYUyaupVyJ03DDlCH2SUMCLSnRw==","signatures":[{"sig":"MEQCIDtqAmjzJeRY9lo5HYZs5hrhhCy6TxnDOR1JilabiddZAiARgWyI8GLFqjYkp/+sH1DaktW1cGG8qsE3wZERlw243w==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":227498,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeTxNDCRA9TVsSAnZWagAAngEP/jyeRAEvm8Uh7Qlq/kwP\n/XYknXgjWFHUUJmgvAXqKs7oIPwjSLbczwmQSWCiqf4MqQffpKpopsLr8SNs\nn+ho7RoFe4a5kKal0TfhLU0Gn0Dk77MSMocV6WI0v49q6sue1NO0c3f40R3C\nm1VLgDQa3BR/APyJiwdCxBRtQUSf8rTQrHRStI2tj4tFtR2oSqsiMF6MPH0q\ncPe3QdYRcY1vnmJMIUV3Om1Ns83h3ZRCmIhFGyB2FxOTltLIkgXwptD73wUT\nqgG5IDxrvTLoc31BoFJk+WU4GhqKE+Z40Bkm+QNCWs1wxc935JCXPr+7ev5B\nVoKtLc0C4uXLJwnqlR+d0X+mHaniCwXNCe0Ym4x2NOg7LlS3O/0opG33VBT/\nq6iSA6MdK/GbHZ+ijWUldQvDVCUswHXRDN+OZiCimQZkC/zwVH6a8OQEBT53\n9JVPXdRtUd+0OM6NCy8+0NPAxazrlWKfu7YwUSMcmtnL342JueSHVn/BLwvj\nk5GvqtYqKSqQ8+sUbjFZdtk/DQzaNBD40QVLfU3P0nHrebK1BqpKo/7WzaAx\n0PhI8/F/5G6NrOWqY12J4M5VZtnT1HE4VZMX/JU3o9pTovUD5iKvZYeepGvj\nuUHh+EPiCRXARkz3jKv5i/TyWsWQY6iI8k2ubeGsYw1FV7jWBkXB0b/YHKk4\nb6m3\r\n=C3IA\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n\n\nButtons allow users to take actions, and make choices, with a single tap.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/button\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n```\n\n> _NOTE_: Examples here use the generic `\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n> _NOTE_: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Additional Information\n\n### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n\n> \\*_NOTE_: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n> buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n> directly within the `mdc-button` element.\n> However, the `mdc-button__label` class may become mandatory for all cases in the future, so it is recommended to\n> always include it to be future-proof.\n\n### Sass Mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass Mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass Mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color)` | Sets the container fill color to the given color for an enabled button.\n`disabled-container-fill-color($color)` | Sets the container fill color to the given color for a disabled button.\n`icon-color($color)` | Sets the icon color to the given color for an enabled button.\n`disabled-icon-color($color)` | Sets the icon color to the given color for a disabled button.\n`ink-color($color)` | Sets the ink color to the given color for an enabled button, and sets the icon color to the given color unless `icon-color` is also used.\n`disabled-ink-color($color)` | Sets the ink color to the given color for a disabled button, and sets the icon color to the given color unless `icon-color` is also used.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color)` | Sets the outline color to the given color for an enabled button.\n`disabled-outline-color($color)` | Sets the outline color to the given color for a disabled button.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.14.1/node@v10.19.0+x64 (linux)","description":"The Material Components for the web 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/density":"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/button_6.0.0-canary.ad2e4376a.0_1582240578800_0.23384252009607476","host":"s3://npm-registry-packages"}},"6.0.0-canary.765caef18.0":{"name":"@material/button","version":"6.0.0-canary.765caef18.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"7831577fd3ac99ab7b77c30e819cf581653d648f","tarball":"https://registry.npmjs.org/@material/button/-/button-6.0.0-canary.765caef18.0.tgz","fileCount":17,"integrity":"sha512-L4XRkZSpQg6E+/TBZNOdkihhyoMpHPm76qTOfM7bMN0Wl/wFnQV2bWvIv4hgys/bSRxHarvnHXXipAwYKpCQJg==","signatures":[{"sig":"MEUCIEUGI0krmV1lgtDIpGjXRpn80O6XnpZonN3L4H3DL1Q8AiEA5Bu63vPmeT0xiSiuZ/+qU4XiykQrNmsTQvwPDLVWDG0=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":227498,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeUBRaCRA9TVsSAnZWagAASU8P/0dSa7RnKzstIOgMOfQW\nZvzOTOZlFf3/jTbAXJajRuz7aaH3QhSYtP0WzvxyzU88M4ZpH/PHGFSpAaGO\nusyrXVL5zoZMBUBLbOcVp43W1fkouHD2B7J+oyA+FV0Gdv696vM5h5lfUHAm\n6DiE43nOsPZMQ80tDhjglNkBzQ6XUcqXLOF9vnOx/GITXeUx/ZDxCnMK87cX\neb03NldX9Y4wX/dLQGFYZZ2RTkUQeHahmKE6GTZrLXwc42lS4X1FYezpDhfT\nAAXc60Ll06QVItJMMUFdW80DCbRbIz8mhLhaRFBnZ65+n4iGSwKwnmwozI7G\nvqRwQ3bDNSkzjKKe+TrF+y0WIZG84SiYt4c3X2hZSMqW4W7rvkwJoNJJiivR\nid3q0j/z7LtY56wxpAlWadJzRHSnhlxII2E6sVnh+zWVltMH1m/IP2Qb72BL\n/sqfSYrCvHBFaHBYBXocZJFkcgzlxnBOknCVO88Pg/H7SLDlbfdvd7pfvyha\nUPDdYx4TOUcG4l+SjQc6pR0Ln4R7JOJWNXVw62l5UJSCVAA27JsuRYaspPKI\nHxnmUgiVmQwqIkGZA0aCUJVUEfcCSE/aw1/suX21zV9IVacObfAd8qUOTEDh\ndJp/0BfdIXdypNQCZCl01cgZelJxRWZTRznHZOXYjP/0xU31rTBVYbVKWYPD\nB8Sw\r\n=V2ff\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n\n\nButtons allow users to take actions, and make choices, with a single tap.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/button\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n```\n\n> _NOTE_: Examples here use the generic `\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n> _NOTE_: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Additional Information\n\n### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n\n> \\*_NOTE_: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n> buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n> directly within the `mdc-button` element.\n> However, the `mdc-button__label` class may become mandatory for all cases in the future, so it is recommended to\n> always include it to be future-proof.\n\n### Sass Mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass Mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass Mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color)` | Sets the container fill color to the given color for an enabled button.\n`disabled-container-fill-color($color)` | Sets the container fill color to the given color for a disabled button.\n`icon-color($color)` | Sets the icon color to the given color for an enabled button.\n`disabled-icon-color($color)` | Sets the icon color to the given color for a disabled button.\n`ink-color($color)` | Sets the ink color to the given color for an enabled button, and sets the icon color to the given color unless `icon-color` is also used.\n`disabled-ink-color($color)` | Sets the ink color to the given color for a disabled button, and sets the icon color to the given color unless `icon-color` is also used.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color)` | Sets the outline color to the given color for an enabled button.\n`disabled-outline-color($color)` | Sets the outline color to the given color for a disabled button.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.14.1/node@v10.19.0+x64 (linux)","description":"The Material Components for the web 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/density":"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/button_6.0.0-canary.765caef18.0_1582306393838_0.543650557222026","host":"s3://npm-registry-packages"}},"6.0.0-canary.949562303.0":{"name":"@material/button","version":"6.0.0-canary.949562303.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"9d96abdd03d2c33a353482ad941daa1a7b56f60e","tarball":"https://registry.npmjs.org/@material/button/-/button-6.0.0-canary.949562303.0.tgz","fileCount":17,"integrity":"sha512-d+SflMIfkD0lPmHyOJ2kRHwiuJqzJ35JcXtJDgF9OG+7jL/Q7x9IAZXGyIhp4Y24Y/pQ4nxgYemwlxv+2L1vUQ==","signatures":[{"sig":"MEQCIFgcG7VK0KI7ly4F7e/8/XZxTzYP5CCFrAuLWtxFgyCtAiAzSVcfd6z9ABgR9VDbESmPSwODrcp3BiqnMLVFvgTNZA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":227498,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeUD+iCRA9TVsSAnZWagAAEMUQAIbf77MMK4WRrvEkM7/l\nsctfQJjzAvxG/9kgmbKy1KJ1Tx+D0dNR2wD7zDdSeZKBOATVNIfPE3u2GIZi\nWX8w4qZwhQmGjIFZMZU88i2BNOap6zZcF+lHJplBkdUWU4bED6Zb5jYKvRV7\nxVnCVViOJr5lGqbhwdYrddMuuZxJQ+6irHTHsDmD2u43bfwNsKtpNiUUfV/9\n/LdohrKgPRwRx2DnDgPf91RkwNCGxQbOpcqD9oyKXvXhXpol5U7D7HxJX0vz\nBXwGrRCWJ5qzgFDwTL/50vGzTjYsnttGjkhgjfOyfB23HQwez7riWBuYI3c9\nJ8WQedMXcMW6YeO2dEdTxmnLcwPf99fngxbFolsdYQZZMzzsu6q08rY/KiYG\nOVBCGbmeoe+3mAD8NMYmvZDQ6XuEkROFPbHXQTXjwaS5jhmFqHBrQ4N241iY\nABOOj8ysvNsvO8ICUQXE4ZJNKTqMXWrPhfpftsTI1LSDXxhRBhw2ieb70Y0R\nnRtQOqK97sZLtstF3ou8dKvTk2ek+DIwkQdNkjH66jLR00e47wjD0f9G0E8D\nQ5e7DY1sDURA7EyNgt44a0Oag033RkHDMgzCLMh2HLszFHNYxEp83wZYjPMs\ntZEIZJ/YqWqM6kWUb5iRadzF200gs3YDFkIWCYC9BPzdQA9Msfe4UyIK9fGA\ndjjj\r\n=03pI\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n\n\nButtons allow users to take actions, and make choices, with a single tap.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/button\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n```\n\n> _NOTE_: Examples here use the generic `\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n> _NOTE_: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Additional Information\n\n### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n\n> \\*_NOTE_: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n> buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n> directly within the `mdc-button` element.\n> However, the `mdc-button__label` class may become mandatory for all cases in the future, so it is recommended to\n> always include it to be future-proof.\n\n### Sass Mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass Mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass Mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color)` | Sets the container fill color to the given color for an enabled button.\n`disabled-container-fill-color($color)` | Sets the container fill color to the given color for a disabled button.\n`icon-color($color)` | Sets the icon color to the given color for an enabled button.\n`disabled-icon-color($color)` | Sets the icon color to the given color for a disabled button.\n`ink-color($color)` | Sets the ink color to the given color for an enabled button, and sets the icon color to the given color unless `icon-color` is also used.\n`disabled-ink-color($color)` | Sets the ink color to the given color for a disabled button, and sets the icon color to the given color unless `icon-color` is also used.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color)` | Sets the outline color to the given color for an enabled button.\n`disabled-outline-color($color)` | Sets the outline color to the given color for a disabled button.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.14.1/node@v10.19.0+x64 (linux)","description":"The Material Components for the web 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/density":"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/button_6.0.0-canary.949562303.0_1582317474465_0.0032073580778102517","host":"s3://npm-registry-packages"}},"6.0.0-canary.7ec96974e.0":{"name":"@material/button","version":"6.0.0-canary.7ec96974e.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"e7244d7b97ea35f03090be72c649c864995fa94b","tarball":"https://registry.npmjs.org/@material/button/-/button-6.0.0-canary.7ec96974e.0.tgz","fileCount":17,"integrity":"sha512-F0rRYHxcEqRG2guhI208xN5QrBsE5/75puXfhXbA/SFhtKj+3r9iBHbvLCjzfNee3NdbLNcKSal8ql/aY6bXeA==","signatures":[{"sig":"MEQCIH65dUaXU0iMkuhhl501occ36Ae+8NxwTM1ebb6nsdIZAiAaxaksnRC+n8jKouc+ZK3psdAaVxYnkZbRVHjw3FfeQQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":227498,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeVBzECRA9TVsSAnZWagAAvCYP/1M5Z3N+GN/SSZjujTMp\nA480+xA8ofmSKxf9yo5yquBUOet1e0Ya5sQpaldhcg9cLctPaQIzS0pUZLPH\nFxqOxqvl0aYgWZL1SS/aOICmub1KO9My/CD2XlsVut3uj/zMSRNVJYxQ+krb\n84+Bzpi9hnLFW0PGdiQTY9sRh/91Ya2YPyX0V8HhdQDoad2RQ0DHY46H8KEc\ned+fTcvptA/7f5lypiXZBhcx+kXLBrBKP4e+rjZ4xGaKyoNOFFh49JXVj7LM\nSJJC7y1638LQ656rffuK0SBpxOlTyK7S12KMUWBwqWY1T8EDZ4PiKnD5fUV6\nzEe7/uoePsIOiW9N4+xKx1e3+Y7fw3RkkaGbw7+HW2nPGXQ8yxx/Mmd+InJN\n9VdhhsT1TrlZt7dYRHPvKyf8mwkmWcRzeLj3467K2djFLZDBeRS45v+Z8HwD\nPQWiRqcvMnExptkpPCiIAZbj5nKIXltDz36bV1GRH86UXH05Qimowa61ejzW\nTuZhQIjmrL6VftiEe8u/e5Aed6/O6BuGXU9ketwCrOPOXfNsck2rrtpWttz6\nZ9BH7jnvk4EDPECNc3i8SUf/TlHyJOnQEtQEUELLxX32g6r5Q2lVX8PEwRJY\nlhy9kuZM+Z5oBWGOumgTaT2LvUjUp/t4j/6dvXJqG4JXgJ3KYckGmKBQrQJi\ncDRu\r\n=KS+5\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n\n\nButtons allow users to take actions, and make choices, with a single tap.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/button\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n```\n\n> _NOTE_: Examples here use the generic `\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n> _NOTE_: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Additional Information\n\n### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n\n> \\*_NOTE_: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n> buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n> directly within the `mdc-button` element.\n> However, the `mdc-button__label` class may become mandatory for all cases in the future, so it is recommended to\n> always include it to be future-proof.\n\n### Sass Mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass Mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass Mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color)` | Sets the container fill color to the given color for an enabled button.\n`disabled-container-fill-color($color)` | Sets the container fill color to the given color for a disabled button.\n`icon-color($color)` | Sets the icon color to the given color for an enabled button.\n`disabled-icon-color($color)` | Sets the icon color to the given color for a disabled button.\n`ink-color($color)` | Sets the ink color to the given color for an enabled button, and sets the icon color to the given color unless `icon-color` is also used.\n`disabled-ink-color($color)` | Sets the ink color to the given color for a disabled button, and sets the icon color to the given color unless `icon-color` is also used.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color)` | Sets the outline color to the given color for an enabled button.\n`disabled-outline-color($color)` | Sets the outline color to the given color for a disabled button.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.14.1/node@v10.19.0+x64 (linux)","description":"The Material Components for the web 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/density":"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/button_6.0.0-canary.7ec96974e.0_1582570692287_0.8594886111897764","host":"s3://npm-registry-packages"}},"6.0.0-canary.265ecbad5.0":{"name":"@material/button","version":"6.0.0-canary.265ecbad5.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"1983c05d0cff1909bffa47661b45fcff65374cbb","tarball":"https://registry.npmjs.org/@material/button/-/button-6.0.0-canary.265ecbad5.0.tgz","fileCount":17,"integrity":"sha512-OI1njrnpkkDAUSeU1Td37fpg+OGJ39gQN7Fki2lvG7BQ68PevTouoh3rRGMqu8IYeSGL7Kymfok9HcuI75SwHQ==","signatures":[{"sig":"MEQCIAOREdNoLS1YJ/yQUHQTyIFaFWteQQzcwcSgoon3fJJvAiAtkKvk778Ate3zc0lfEh00fXRhbWwawpwo8A3s4dWBgQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":227498,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeVYsGCRA9TVsSAnZWagAAqs8QAJFMAalfjAxNE4+BCGxN\n3XxEE98LYp3tUcZX/+ePW6cOjriXVdSckMhrrOxyWKYGtV9Wo2s7MNaZf7AG\nutsxYcBGUZ4aQLaAdiT1pztBCTwCnUacgzPVOEGJN9v8zUVAiFt2cKSl7rzO\n8RCjSaQ6jMaSLpEDtL7FDLyohvwaKg9sR5VhBKezecFPsLZMpJ0vsynod0fI\nAkxdD6Ce7thXKboBbXoKGjJHMrHmO+bsvG35HBcb+48O7V+n/+WY5tW+a1mr\nv+2uZVPz/0nD91VNZAhRvmQwVJXXpGRFiAfNZIE/zdFEC2GHrznVU53ZF8yk\nwaDZnMhfLw2nt8lofD3e02vClAN4uB9/XDw3T9KptnbzgX9EYqh2hQ7Z/Yni\nUtto/PZj4+eSmkG37Hu1WjU/rnWHu9v6dm3kJT3mOBXdTeV/mzPY51QXH5eF\nOxZoD8p5SVnPsk1YJAPHt28FmHjxCC14WBphi4G4gxlk2QHmCz6yFPx0JBcm\nEigVheDmCnqz4brcJPWEDVXOulWrGxKmMuvUAYuINvJrOJYky67z9doa6ycA\nCD/5FookWaC89wak++XNcnIzCV4T+rpGAGye1b7QMxS9xz+zZBMpSlh4Dmjv\nqGi94p6F/UuOT7zGcTfkttfO8x3Gs/irlZhwo9WK4sYE3OVCFOviDuP2shfr\nqEsj\r\n=WapB\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n\n\nButtons allow users to take actions, and make choices, with a single tap.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/button\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n```\n\n> _NOTE_: Examples here use the generic `\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n> _NOTE_: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Additional Information\n\n### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n\n> \\*_NOTE_: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n> buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n> directly within the `mdc-button` element.\n> However, the `mdc-button__label` class may become mandatory for all cases in the future, so it is recommended to\n> always include it to be future-proof.\n\n### Sass Mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass Mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass Mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color)` | Sets the container fill color to the given color for an enabled button.\n`disabled-container-fill-color($color)` | Sets the container fill color to the given color for a disabled button.\n`icon-color($color)` | Sets the icon color to the given color for an enabled button.\n`disabled-icon-color($color)` | Sets the icon color to the given color for a disabled button.\n`ink-color($color)` | Sets the ink color to the given color for an enabled button, and sets the icon color to the given color unless `icon-color` is also used.\n`disabled-ink-color($color)` | Sets the ink color to the given color for a disabled button, and sets the icon color to the given color unless `icon-color` is also used.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color)` | Sets the outline color to the given color for an enabled button.\n`disabled-outline-color($color)` | Sets the outline color to the given color for a disabled button.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.14.1/node@v10.19.0+x64 (linux)","description":"The Material Components for the web 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/density":"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/button_6.0.0-canary.265ecbad5.0_1582664453995_0.6629817207926127","host":"s3://npm-registry-packages"}},"5.1.0":{"name":"@material/button","version":"5.1.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"22986368ce12faad142ba01c4aeb42f6a380dffb","tarball":"https://registry.npmjs.org/@material/button/-/button-5.1.0.tgz","fileCount":16,"integrity":"sha512-umeuIEbeRRd0cY+5axhrBoM0dvJ4YfoTsUbKgz4ctFxHLBsgthFUIXSa3Ot15s284UP6kjslK0LCMqzhirZxeQ==","signatures":[{"sig":"MEQCIC4+viNSNqCWgchPnadXVIMSBCA7ufbaFULPVBjda6x3AiA0ossRaVcQ7nQn4KZksfGWnj8R22Hk4jcYSf1ib28WMw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":226943,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeVZPGCRA9TVsSAnZWagAADewQAJplJ81F4q5iTnDVmUeE\nym+a/Gq5Ah1do2H+/k7JZiZqyVRgr1/Sm8MqlkG3q79ETnzboFDgM1jQ0ZT+\nENxru10MlNjDTMnD5MzDNE/bt+nTJR7ZurztIa68/KvTyckItPYhbK5/qxV8\nxlW90/ZkV+LFOnqIaIEAcCfs9SbwirwXKFghjcDmNjP/35SJAj9jOnJF5ML6\nSbYnBtUfeumYnQb2hswLSLjWhsNj1Vq3f40wpl4b5pnLuIBFTpxQY2efNS08\nWtF3MZ9urL/Znk0VslWZQ1Jo7Bsz3UPLnmQaYSxlprCL0c+ElxFOHoiKZ9lW\nMjDQ+UnIi7ahfR908BtAJDWvHA27kfSZ+KuBxEgXd501qBXw8SfYK6Il7PZh\naOPY6Fr4USRJfakgvhyvueW/4sciITFLk4FQ3c6eoMQjRKy2l9WKpu0PACbO\ngTNICOlRt+Cqm6OYE0454V7HKfuwzR2BwZpyT1zMmICrXjl5pLNTbCSzDu/k\noQ9kuexyC0Xawisesx0LLRiIoIHObDrBGRHg33vfsGtutzp/e+MBCpDcJvKO\ni1ogBPiKbk+NYFFcfuLCXp0yEtintaCOGO0gcfeSEiKTXzPF6qHTp3MAiyVs\nOueChSmQMx72lsA0NtdioDWmP1qEJKoczZYoL6RcHhbFN+XjFg+zBECb5EF0\nUXNH\r\n=Yyj7\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-button"},"_npmVersion":"lerna/3.14.1/node@v10.19.0+x64 (linux)","description":"The Material Components for the web 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/density":"^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/button_5.1.0_1582666693803_0.2944704382108696","host":"s3://npm-registry-packages"}},"6.0.0-canary.2cf87456f.0":{"name":"@material/button","version":"6.0.0-canary.2cf87456f.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"ce7112ccc9e0dec53f9ed6cda4ff200f3012d4bb","tarball":"https://registry.npmjs.org/@material/button/-/button-6.0.0-canary.2cf87456f.0.tgz","fileCount":17,"integrity":"sha512-NoAEsX+T7+ZDrD/UO0nm9NghJ0SG656nhbIIYNnphvF71WaAQxsBwgE0PHNlk2yQPtWyCVbyhUKqWv89LEu8Lw==","signatures":[{"sig":"MEYCIQCtzmK++8Dx08rBNywDJDP5fH0iDwYzMo1L9oxYOwlcTwIhALMx2XgoOsp+X3kFfXOAPWD9Fb6pzHbN5GFE9R7Pzy0A","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":227498,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeVZPvCRA9TVsSAnZWagAAvIwP/AqPQOsGAXL5iWTT/YqP\nJiZoVu59ztPXdnrD9kSckNyPutdSTYeDakUK1GJFrBxs7ftfJVibtqa+ee6y\nn8y6N4M/qhlawMGOg3lP6qJ+8rBQ+gm3CrF3NVeplc6beIR/sO8fxD9yRP9+\nZpy2SBMjd44YdD4u9myLpTFtIOvfAN83OYvWfLb/sWNngHjaFTOAvl9npBJq\nmPcpwSAIrBcmPuyUX08UdU+03Fz32CRdSuBY6VaiM4EBvZvh/mw3/hyx2oPW\n9uLNJON60Mef1E5BIHqOZXDgu4bSbvNh2HatYNFKAPmBdupHtRPIocmP+v0q\noDK8RsuJQa+X9Rqxd084PAHyopySI4QVo29fife0CVcuSN5sqiG/Egb6WaKn\njzBXsKUqpNGIL5Dz7ydBGfVShNGg9x2oOYTV5LyUgq4z8MmS9h26E/joUPEL\nkCfVNMwZl10V4TyzqdehUhpx4+MLqhFEfml/Qm/BILspJ8Qr6l33n7cRf+Lz\nQVnQLPq5xiB7f2IGnzj+jRhPg18pwjI0lNFoeveHK7ecVtYe5J4Jme0gxXtG\nNFwOoZyRjAIvnF9ROsNl5K4v9mMVb5MrVibPjXUJmxSA9SZIknLw7D/Kd2d+\nmIP1ey1zsDsd7kdUzsTRLgwXgIqED2h8xn61tm9snJ8G4dvhfFJlnBIrRtAd\nRTto\r\n=xc5K\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n\n\nButtons allow users to take actions, and make choices, with a single tap.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/button\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n```\n\n> _NOTE_: Examples here use the generic `\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n> _NOTE_: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Additional Information\n\n### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n\n> \\*_NOTE_: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n> buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n> directly within the `mdc-button` element.\n> However, the `mdc-button__label` class may become mandatory for all cases in the future, so it is recommended to\n> always include it to be future-proof.\n\n### Sass Mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass Mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass Mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color)` | Sets the container fill color to the given color for an enabled button.\n`disabled-container-fill-color($color)` | Sets the container fill color to the given color for a disabled button.\n`icon-color($color)` | Sets the icon color to the given color for an enabled button.\n`disabled-icon-color($color)` | Sets the icon color to the given color for a disabled button.\n`ink-color($color)` | Sets the ink color to the given color for an enabled button, and sets the icon color to the given color unless `icon-color` is also used.\n`disabled-ink-color($color)` | Sets the ink color to the given color for a disabled button, and sets the icon color to the given color unless `icon-color` is also used.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color)` | Sets the outline color to the given color for an enabled button.\n`disabled-outline-color($color)` | Sets the outline color to the given color for a disabled button.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.14.1/node@v10.19.0+x64 (linux)","description":"The Material Components for the web 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/density":"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/button_6.0.0-canary.2cf87456f.0_1582666734912_0.36438195223994807","host":"s3://npm-registry-packages"}},"6.0.0-canary.781434a92.0":{"name":"@material/button","version":"6.0.0-canary.781434a92.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"201ef6659bcd222f5064da6d65d03a6616614019","tarball":"https://registry.npmjs.org/@material/button/-/button-6.0.0-canary.781434a92.0.tgz","fileCount":17,"integrity":"sha512-85vixhBa/YBrEEPvpbqoE+MDFL2XyveDXCeHaE34IU+mTvmtgFb8CPg7/sEy/b2ak1MFZopm5lio/XpRPOWUlA==","signatures":[{"sig":"MEYCIQDdlrgdI+oQeGvAiTCDezhf5N8YMH+8uQ4EW5nTVMLpAgIhAP0fYtCKoOHJwf+WTkF8sgZkbRkCYXNopids0HRLzzYK","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":227498,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeVa2GCRA9TVsSAnZWagAAndMP/2XLalwaTCjA3nbl9zmi\nUBmDL2YXErPsZBxHwq3h8HxvRoSbM4SAvBQ7L/cFy6IsiNXOWNOSBfzEgW/6\n1wBNHuFmRTZ3432xnKIdFHqrtxYwP48G0gPCcu9IqfepHdD7n6L3BonwzFT0\n2zkPAdE4ldu5xOXde7EaZ9HdtF4GbBSOIV2ujgi2AFIFmtJOMO/PKAnvWTs8\nWX5tvbh4OCkqTHotjzDFc6zmz32llklQJV0SZ1Z2bgYnSAANGVhimSG6p7U8\nMQRq/q2gMENgQ5WhWcJE53xFazngNVmJ11G2yzfi5rZGA3RY/1NsTX1rDaKY\njnxD1GaLcYfNPHWX5WZVSdrPSZb+mkNuXtlmzYR7CLq3UQVz2/rJzt9yHxuf\nQ66sU3lTBdAviVqW48tGZV3u1NPIFB2GHDMnwTkz2yp3MMLpfMXqJ1MwIAmo\nj5KIoJ4p0MxjVy3Hxz0YDeRAotQ++yRwX1pn/rBFrer7xHoDFHpRzUVZnQJ3\naKsoyYXziOXJ5dSogDdrvCrzAheAcQIXhDUW/pU6txlbXpzi5Fue+GZ5RpIZ\n/ui4WLiDL4JrjeXn/tke8h63VOQz/d2MyKceg8flHHoaLRkHYVHx2LOkmU28\nMEDS5aP3+b4DJMNcugjFUYP6n1ffdWYOJYJ2qorgmhooNJjHT5j5mUUzqbqW\nWuKX\r\n=8SqF\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n\n\nButtons allow users to take actions, and make choices, with a single tap.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/button\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n```\n\n> _NOTE_: Examples here use the generic `\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n> _NOTE_: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Additional Information\n\n### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n\n> \\*_NOTE_: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n> buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n> directly within the `mdc-button` element.\n> However, the `mdc-button__label` class may become mandatory for all cases in the future, so it is recommended to\n> always include it to be future-proof.\n\n### Sass Mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass Mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass Mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color)` | Sets the container fill color to the given color for an enabled button.\n`disabled-container-fill-color($color)` | Sets the container fill color to the given color for a disabled button.\n`icon-color($color)` | Sets the icon color to the given color for an enabled button.\n`disabled-icon-color($color)` | Sets the icon color to the given color for a disabled button.\n`ink-color($color)` | Sets the ink color to the given color for an enabled button, and sets the icon color to the given color unless `icon-color` is also used.\n`disabled-ink-color($color)` | Sets the ink color to the given color for a disabled button, and sets the icon color to the given color unless `icon-color` is also used.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color)` | Sets the outline color to the given color for an enabled button.\n`disabled-outline-color($color)` | Sets the outline color to the given color for a disabled button.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.14.1/node@v10.19.0+x64 (linux)","description":"The Material Components for the web 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/density":"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/button_6.0.0-canary.781434a92.0_1582673285917_0.8629317666008511","host":"s3://npm-registry-packages"}},"6.0.0-canary.d6f60c98b.0":{"name":"@material/button","version":"6.0.0-canary.d6f60c98b.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"fd615a6afcb744b78fafa626603a8a307b1cc875","tarball":"https://registry.npmjs.org/@material/button/-/button-6.0.0-canary.d6f60c98b.0.tgz","fileCount":17,"integrity":"sha512-zFO0P4vGjAbqum98otMmZXp+nLmCmoGPmBPLHXu9V4iIwdBHwllULAKl6s+wLXx8OznYjuVpR/1YUZDLRAXgYA==","signatures":[{"sig":"MEUCIBUNcEXraSvsmK5wzNr+hWYHfcWSOUZIfaFgxMSdipstAiEA7uH1krksAgmSUZbkjF+UUOpE3dtX2e0FcZtRP6JHxck=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":227498,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeWY44CRA9TVsSAnZWagAAujMP+wapMcFoVmunHXPAm6es\nEyq6iskIn8h1ey7poZtFle1LZcvpZX1Xng3y3jDwh6Gzx6zfht3lqSbIuyUN\nR5DKFGiQVGMSGhTaZc42GpM0Zoy2yq+khfaCHYdLEgAdkqQmdafQuxLwvTja\nUZ/USqIoeVPBT9EVgDEYSG0WZJ7yU2UeC1YVKX8XWcy8bep5yOpR6+xJbUcu\n+RCjNCYNeiIbFcfZge1PkHLqZGxs4R35dYF0v4ndEwxIaBbRQxbpNees1zsi\n++vP1tySv/SO7INBGoPug7zDUnP543yu0oE0ksFiMBcs5E50TtCDuLPnyCW6\nCHceFcs1cs0/ag5Al5KERQuK5hVGGeokw4ZLeten7TvKl50HIGwiHJT4JA1q\nmPdp6PAAcz4WlI1izhpPi8T9umtBQUGNZEtVhYO3gYMD1LS/YJzZoA+QuVNr\nngg/9AC8GA1XUoDRjDLxWljwK0wffk9wwxlOa8JnKAHjLi5f3ntEqGykPR4w\nyFWadqgsCA1YOIiQTdSnvIyv0WpJYuOc2ydmuyyNwKfQ4/y8ME+uTL+JfB8O\nqQJkHCW1YjFvxqhXrs0MiHdhKUZPnsXAISw0/bdoql4m8wriJsUzQmoXTT/X\nia01MyJEK0R8l4Ey5MopY3YCLLTE/e3gRF2Zugiyg++0F+x8T5JMT+vL5f3C\nd+CW\r\n=uQHx\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n\n\nButtons allow users to take actions, and make choices, with a single tap.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/button\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n```\n\n> _NOTE_: Examples here use the generic `\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n> _NOTE_: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Additional Information\n\n### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n\n> \\*_NOTE_: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n> buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n> directly within the `mdc-button` element.\n> However, the `mdc-button__label` class may become mandatory for all cases in the future, so it is recommended to\n> always include it to be future-proof.\n\n### Sass Mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass Mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass Mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color)` | Sets the container fill color to the given color for an enabled button.\n`disabled-container-fill-color($color)` | Sets the container fill color to the given color for a disabled button.\n`icon-color($color)` | Sets the icon color to the given color for an enabled button.\n`disabled-icon-color($color)` | Sets the icon color to the given color for a disabled button.\n`ink-color($color)` | Sets the ink color to the given color for an enabled button, and sets the icon color to the given color unless `icon-color` is also used.\n`disabled-ink-color($color)` | Sets the ink color to the given color for a disabled button, and sets the icon color to the given color unless `icon-color` is also used.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color)` | Sets the outline color to the given color for an enabled button.\n`disabled-outline-color($color)` | Sets the outline color to the given color for a disabled button.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.14.1/node@v10.19.0+x64 (linux)","description":"The Material Components for the web 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/density":"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/button_6.0.0-canary.d6f60c98b.0_1582927415963_0.40964984631456236","host":"s3://npm-registry-packages"}},"6.0.0-canary.69edc6e28.0":{"name":"@material/button","version":"6.0.0-canary.69edc6e28.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"0c69fd5c61d485c5e86ee9388ba255858bb869b6","tarball":"https://registry.npmjs.org/@material/button/-/button-6.0.0-canary.69edc6e28.0.tgz","fileCount":17,"integrity":"sha512-f5u88be3MMI3AV3v9YzYziiJDCQOSPUj1uutG8momt+ifIKW8Y+TYmKxxldmvDN4ACH6gApI5WJtY6YZvmC0hA==","signatures":[{"sig":"MEUCICcEZ2lgijD6abN9YGHKp1TsBguAdii+wirVINbnqqH6AiEAplyCNrJasS3Ls7B3RFv7qliVCH8VmXiKoThf+bpTOsY=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":233816,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeWZBBCRA9TVsSAnZWagAAIg4P/0zN8MMHdkw3QwaPX/oS\ncLZCmRqg9Hl5WPQIXtzDEoce7/ZDc4BMJyGwQw4l0t/f5E9sLpdQT3N9O2Vr\nUmm9ERbyLLgvEYT0tGzgieCJVx3l94RvxIKUgMnYXN+vpH0bUnLjNqwRS8qh\nSTHFwy+GGr5qNmwQ0N1cFVcbkfAz3XG8mBecaRurJ4F44r4bd592Pb0c78eU\nwj7W3q44Tu8ROlql2d5U5HaTG1NxIbxRqpGvnG1JUZVgg1H8Xb6QcYorpUSV\nDRZ5NSd/lCzF1TXm/AK8VhYi2y4CYENGcPmDOpH7bg9jf8fzlMl8CMqA2fqm\nKG0J420XgLmGX98SQemkyrHoFKfxq+sftXEVNw4FQdb3CKWjSEj90X6eA00w\n8SpsaKfPwxlF31/KhAUqZI+ODsU4Dmj9txp3ZBl74uysAjFFyDLZI1vL/nk9\nAYf0bvlylLDEwaP2lRZL4kg0nz+Zd0+m83D08YMaZAs3sMm7iSuoo95MvtQR\nFjydm1ccx3fbr30yZa3oLVatA8rx896PyDzNBwf/dL+EWuZOopMQsWW/pdh5\nFVCjO7taECCpVVvs+nknp7PnQ0mpRZr/t+i6wwawZjdciHNLVYXICTQkreEL\nsBoScEukk6xgwViHebR/15IUjGcTWeKLai0ws+fRtl5NxISKWrOjNZ7J98UM\nusIw\r\n=+/Rz\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n\n\nButtons allow users to take actions, and make choices, with a single tap.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/button\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n```\n\n> _NOTE_: Examples here use the generic `\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n> _NOTE_: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Additional Information\n\n### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n\n> \\*_NOTE_: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n> buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n> directly within the `mdc-button` element.\n> However, the `mdc-button__label` class may become mandatory for all cases in the future, so it is recommended to\n> always include it to be future-proof.\n\n### Sass Mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass Mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass Mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color)` | Sets the container fill color to the given color for an enabled button.\n`disabled-container-fill-color($color)` | Sets the container fill color to the given color for a disabled button.\n`icon-color($color)` | Sets the icon color to the given color for an enabled button.\n`disabled-icon-color($color)` | Sets the icon color to the given color for a disabled button.\n`ink-color($color)` | Sets the ink color to the given color for an enabled button, and sets the icon color to the given color unless `icon-color` is also used.\n`disabled-ink-color($color)` | Sets the ink color to the given color for a disabled button, and sets the icon color to the given color unless `icon-color` is also used.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color)` | Sets the outline color to the given color for an enabled button.\n`disabled-outline-color($color)` | Sets the outline color to the given color for a disabled button.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.14.1/node@v10.19.0+x64 (linux)","description":"The Material Components for the web 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/density":"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/button_6.0.0-canary.69edc6e28.0_1582927936503_0.7502956576769872","host":"s3://npm-registry-packages"}},"6.0.0-canary.9372e4939.0":{"name":"@material/button","version":"6.0.0-canary.9372e4939.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"4a15498badf0a623825a3defb5c4260bb72c2355","tarball":"https://registry.npmjs.org/@material/button/-/button-6.0.0-canary.9372e4939.0.tgz","fileCount":17,"integrity":"sha512-XCf0Kowe8rcibhI/i8CjAge6ip8O07MFpU5RW7X/Hn0AYsrzp5fNvLsgm3+ELwfGflZHWENpuZsVeZVPYApWZg==","signatures":[{"sig":"MEUCIFEbaRZHPqLOvd/47zI/IbYQ8N9+t3YnjjI4TuSyk1usAiEAtbTh5pANLz+w+0HI/0k08jRwQ8rYO+JNXQuBuzOv1ac=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":233816,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeXqumCRA9TVsSAnZWagAASlgP/iQC1/5NvZLNv5jK+UaB\nfPDVOZ+7FElwwXb+H7psx+Lu+gqimKpWiJCqOEkn4ZFbiIze56wwrvVR4A+H\nGBxuGyVJoqP5oUJNWSAShtMCnW8VFSxm6PIy53Q8nfWliPmRo5BzprF8uuhE\nI+cmpMttTV44g9qc5uFamI7MzV5LqzZ4d75Mk/LSCbv5lm/n9beOTVJXc611\nECSY7ClwvW6ap9KfQiQ2bProiCUiGZkImML1L6tyMDosTUTc06WCz7SFkN0n\n7LzjD6PJKgVBMSKjearhYxcgWtaPYfoa7Gp9MX8cKUh397/TuH/PtPG+zAGQ\n1zSNAIG5QuhyAryKbKodtddTDBdN4VtiIV4Oh2caaW5ZyAKP9It6pBvuU2UL\nAkrFkqd6W+n1+ZyBpjaW1yKASs0Qt8qEQ2KzEMxhLEkQwxUt9upDPFgLBfwJ\nfHiEOpLTLT641YpXxJy6aPjTo9NwfAVad4xh77yPlg/V1aViy8BCkU21p2uv\n+kij4xkG3O0LEgQjvxJXpkgif9GVj/G8ajRxiVGIT5eme4GXWP2KYz22j9M1\nMYrWSnyBx9SCtR//4gdClYaAfTugRcS8Ytq/t46y+0n7VdoSPPTk0ipyMN+l\n7IiC1ocfB2NEB2kPi5SV2JIx4NtYjgBlXG8X5B/QvKKjEXIupMAN9RkEn7YY\nGRvN\r\n=BCSZ\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n\n\nButtons allow users to take actions, and make choices, with a single tap.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/button\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n```\n\n> _NOTE_: Examples here use the generic `\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n> _NOTE_: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Additional Information\n\n### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n\n> \\*_NOTE_: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n> buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n> directly within the `mdc-button` element.\n> However, the `mdc-button__label` class may become mandatory for all cases in the future, so it is recommended to\n> always include it to be future-proof.\n\n### Sass Mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass Mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass Mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color)` | Sets the container fill color to the given color for an enabled button.\n`disabled-container-fill-color($color)` | Sets the container fill color to the given color for a disabled button.\n`icon-color($color)` | Sets the icon color to the given color for an enabled button.\n`disabled-icon-color($color)` | Sets the icon color to the given color for a disabled button.\n`ink-color($color)` | Sets the ink color to the given color for an enabled button, and sets the icon color to the given color unless `icon-color` is also used.\n`disabled-ink-color($color)` | Sets the ink color to the given color for a disabled button, and sets the icon color to the given color unless `icon-color` is also used.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color)` | Sets the outline color to the given color for an enabled button.\n`disabled-outline-color($color)` | Sets the outline color to the given color for a disabled button.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.14.1/node@v10.19.0+x64 (linux)","description":"The Material Components for the web 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/density":"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/button_6.0.0-canary.9372e4939.0_1583262630010_0.5269379072755349","host":"s3://npm-registry-packages"}},"6.0.0-canary.9cf5e9842.0":{"name":"@material/button","version":"6.0.0-canary.9cf5e9842.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"5b6910b4738932fa7a30a9655cd506ac74e8d535","tarball":"https://registry.npmjs.org/@material/button/-/button-6.0.0-canary.9cf5e9842.0.tgz","fileCount":17,"integrity":"sha512-F5VA21Sb2Vlka/ifWo3aASwV8AbSBygsNQvcAHJAxac++D0H94tPJSZiUTnDRgEZHC2/5JQCj3ejrONNN8LFaA==","signatures":[{"sig":"MEUCIGxImzDBYp4k/DTFVHnr4xlOjP3/EieRp5vLXTokz6iFAiEA7MUjDg7gieJ7BlxJwG4s4KoRmd5AG8aMh3qK2fH/8k4=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":233816,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeXueDCRA9TVsSAnZWagAACL8P/00YA200YNu+UzbjYttK\nubsdnFdGLW0eUj+51tc9ssoyORRyqb3GIMhvK73X7S3tPfdq5tA60XXcbAGs\n1gGmwiBEBh4A8ftAdDqyVZZOxK9+hwy2MKPc/H4QSqKITB0cpleFqDPMU/8m\nQay1R71uzdh2DHN2gTYdVN+5SbTxcWAqk/dhwsGuKzRMQAffhaLNOF39BHIp\nVEjXPb24Wa4BiSD/2FWxodWe34LWpT0+G9GylzEk7uSj2SS1rV/wlSS7eanQ\nhTzfjJw5eXUcwdJFAWKofTvCMXUrTu5b5YRpQc6v9PsxxZi7DRfpC0LRAepg\nSmpHlAsIPgTl7cjIJcqGfa6mhLXd32WpZsIYgiMJ7SfFy2Rwygg/ORCySvHn\nIW5YHby5RZr2aX/1kre1dubTibzZNf8O2llRsbGpoO25n+dApiiZQKzUijch\nqpleBQMuG5e2ebi1GElHbxmyDeHt9x3VJHMD5K7jzNK+Pr19+71KR92OvR1/\nWfNfLiwcnJos9irZvRLP/vidun1FUBnFVQ8+VOGaZK1hffYALwVgp4Ef4qYu\n4xzKSITTa7ToL+0vnfSG6tgtJ6vrsszPvGImPJyeOJ5PEA8qETn31Rp9Lgfn\nkp77AouF/MpL3JGqzCAqNNDyOJqMgAr8qMkr8w3NESnv51XLMAaJlHYwtNEi\n2/dy\r\n=ECe7\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n\n\nButtons allow users to take actions, and make choices, with a single tap.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/button\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n```\n\n> _NOTE_: Examples here use the generic `\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n> _NOTE_: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Additional Information\n\n### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n\n> \\*_NOTE_: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n> buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n> directly within the `mdc-button` element.\n> However, the `mdc-button__label` class may become mandatory for all cases in the future, so it is recommended to\n> always include it to be future-proof.\n\n### Sass Mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass Mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass Mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color)` | Sets the container fill color to the given color for an enabled button.\n`disabled-container-fill-color($color)` | Sets the container fill color to the given color for a disabled button.\n`icon-color($color)` | Sets the icon color to the given color for an enabled button.\n`disabled-icon-color($color)` | Sets the icon color to the given color for a disabled button.\n`ink-color($color)` | Sets the ink color to the given color for an enabled button, and sets the icon color to the given color unless `icon-color` is also used.\n`disabled-ink-color($color)` | Sets the ink color to the given color for a disabled button, and sets the icon color to the given color unless `icon-color` is also used.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color)` | Sets the outline color to the given color for an enabled button.\n`disabled-outline-color($color)` | Sets the outline color to the given color for a disabled button.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.14.1/node@v10.19.0+x64 (linux)","description":"The Material Components for the web 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/density":"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/button_6.0.0-canary.9cf5e9842.0_1583277954795_0.009751859758624581","host":"s3://npm-registry-packages"}},"6.0.0-canary.3657f8863.0":{"name":"@material/button","version":"6.0.0-canary.3657f8863.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"37961b23e8d161b01c267742aae9c59c1c6788d1","tarball":"https://registry.npmjs.org/@material/button/-/button-6.0.0-canary.3657f8863.0.tgz","fileCount":17,"integrity":"sha512-9eEp4EGV4KsGAQPg7qxWVRoGn+ejGDHcmPHoicBxjTpJPTGvamfTio5FU6dPKaiJTOe5br70G2qEJ5SFpQfI3w==","signatures":[{"sig":"MEYCIQDpmj9Ethue998q2M2HWEOgBqwR188pPFH/8Shr3fwAhQIhALpmMjvw3QqU/xTsEYDYXiYqUK23Trjzhx+pMFzbndvL","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":233816,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeX+jxCRA9TVsSAnZWagAACU0QAIDLboDSP38Rc+Uk6Wlg\nWF/u2reAFIc72waNMgE4dsLRcLwHIvYUrTe1PgKUsz13JiLMJ0vAEaeEPeEa\n2Nph0h/sK3mVeuXYsAMlWl9mue+EUa4r/QiqzG86wrXoXi5FBUFHnCQTRiYT\n9fFqHYT7568O9DTFmCyMgpXxCBoukrdO6Cewzgjn/rLieQ1cmav8ENp2dN+3\naTnDtRZeouMyWRwAVuNSRi1GDRXifXrk3drzGz8LJPIZxFCb2zaKTgQ6oyIc\nViEkYAdPyIsTG/0FnufzvpBqfMHZxNChG/t/AVuCHfwYst9Sfthi6vdYcg9Z\nVlUkYfmcLz1XWv2J19OafrRZk2HXCzNbxPFAEvJrl34udBszmWlPxXZTI4SV\n++5eJ9wA8Nl1aQDObyZ/tLKKmYVQFWhfau1QwDxnnaM7PayriZm5AdNwWrh1\nJeW8L8ApudyP6R0M2XNaxudu1PEBa4vd7uNnlJ/t+WkE8EkvGb2AmlQZ42UL\nD45L5NAL+kUBtJDwARXs8NSikr2j6rIihKyQeOHg5OAVo/FCMJGtH2znD5cg\nndZAmXaKsrX7/WlkXKS6dkXP/UqgiB8f/ivS79fQY7HALmApyHzrxGThWyPr\ncgJTepAJxiaNkY0pMnkr/EX038CGkNN/YoIgwUz6tChlipiTk9RB/A6iaqnX\nuTGo\r\n=xO/d\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n\n\nButtons allow users to take actions, and make choices, with a single tap.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/button\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n```\n\n> _NOTE_: Examples here use the generic `\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n> _NOTE_: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Additional Information\n\n### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n\n> \\*_NOTE_: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n> buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n> directly within the `mdc-button` element.\n> However, the `mdc-button__label` class may become mandatory for all cases in the future, so it is recommended to\n> always include it to be future-proof.\n\n### Sass Mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass Mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass Mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color)` | Sets the container fill color to the given color for an enabled button.\n`disabled-container-fill-color($color)` | Sets the container fill color to the given color for a disabled button.\n`icon-color($color)` | Sets the icon color to the given color for an enabled button.\n`disabled-icon-color($color)` | Sets the icon color to the given color for a disabled button.\n`ink-color($color)` | Sets the ink color to the given color for an enabled button, and sets the icon color to the given color unless `icon-color` is also used.\n`disabled-ink-color($color)` | Sets the ink color to the given color for a disabled button, and sets the icon color to the given color unless `icon-color` is also used.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color)` | Sets the outline color to the given color for an enabled button.\n`disabled-outline-color($color)` | Sets the outline color to the given color for a disabled button.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.14.1/node@v10.19.0+x64 (linux)","description":"The Material Components for the web 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/density":"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/button_6.0.0-canary.3657f8863.0_1583343856816_0.11892460050228637","host":"s3://npm-registry-packages"}},"6.0.0-canary.98b843417.0":{"name":"@material/button","version":"6.0.0-canary.98b843417.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"04e0cbd5b49e93f91dee4dcb1eaef383ffc28737","tarball":"https://registry.npmjs.org/@material/button/-/button-6.0.0-canary.98b843417.0.tgz","fileCount":17,"integrity":"sha512-1qXIt1sZ0sT1nI02D7CS2emnNRtLOSp1MlaQUr1o1LsH8ZLtu+ltd+5pjI3V1W0jOREm5Zu37Ghp6nXf+BHbrA==","signatures":[{"sig":"MEUCIQCKyqR2JjuQvPOF2wXHL0hHug8KN1MExOkNJTxeFZE2hgIgZsdrK5I44SmKLB3SBSE0iDZrqsSKhUyxWE8GXObj6ss=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":233816,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeYUVtCRA9TVsSAnZWagAA0pYP/2+se2Je4REKwm86MpJ2\n3vhSdVhtkLnNKYUYNtE3OlXp5oHKH9w7bCUnm4C5HEAkPyJJjWg6ipJmidnH\n8OQHh+gTclTMcI04+cVDOQrCaEDb0nSiWxTy0IZ/xPZlYbY+/t5FT0IxPHZf\nvt7GGfzvH3dOpq18avrEnq7HYeUupjGNZz1MugeSS0Vcph9glXCRtkRje2FT\nehGThdN8HgVCNtYlTbif9m14MyHzmm30wKD2t9vKS0y6idwkyC8g2LLSfB8q\nMlAbc8V/K1evuhqXDeXcJ7BEE7TUoNr28Zk27ZyHUCVzraRvUsVfXesGZeBZ\nrlPTFQ+nwf7vxnzGpRdFVVODGU9H0YB0LcDya7qQ7vuKzvcFfnPkaJRoVq4X\nHG6pjijcmOY7gFN5Vf9J7ONgA/fQrHev+8NQJ7rVSwA2jhd2nvyk8YabUSyC\n2dWH3r2CTozbOw1gqSupLrbQdJTndp7grnv9cWARVJxtVOfe0Ca153xuQZFG\nag6L1n3oLyLJzkjvO+dQQ9qGE7JTCseqhYVsRjdE4L26planMrR2NBok5HQD\nK6JrThKKVG+zvxcBSaznXbPfXX52lZt+Bx4lnMV2ClyFNiqseA/3a6vsu919\n94YpSgtlU/Y9wVs8EoMDbuRWFTNV7pW+IfW1PJEVAiJoKA/7qiVkCVGmSE4o\nFGYy\r\n=jiqN\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n\n\nButtons allow users to take actions, and make choices, with a single tap.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/button\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n```\n\n> _NOTE_: Examples here use the generic `\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n> _NOTE_: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Additional Information\n\n### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n\n> \\*_NOTE_: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n> buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n> directly within the `mdc-button` element.\n> However, the `mdc-button__label` class may become mandatory for all cases in the future, so it is recommended to\n> always include it to be future-proof.\n\n### Sass Mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass Mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass Mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color)` | Sets the container fill color to the given color for an enabled button.\n`disabled-container-fill-color($color)` | Sets the container fill color to the given color for a disabled button.\n`icon-color($color)` | Sets the icon color to the given color for an enabled button.\n`disabled-icon-color($color)` | Sets the icon color to the given color for a disabled button.\n`ink-color($color)` | Sets the ink color to the given color for an enabled button, and sets the icon color to the given color unless `icon-color` is also used.\n`disabled-ink-color($color)` | Sets the ink color to the given color for a disabled button, and sets the icon color to the given color unless `icon-color` is also used.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color)` | Sets the outline color to the given color for an enabled button.\n`disabled-outline-color($color)` | Sets the outline color to the given color for a disabled button.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.14.1/node@v10.19.0+x64 (linux)","description":"The Material Components for the web 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/density":"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/button_6.0.0-canary.98b843417.0_1583433069174_0.4977824827456794","host":"s3://npm-registry-packages"}},"6.0.0-canary.17b9699c4.0":{"name":"@material/button","version":"6.0.0-canary.17b9699c4.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"d9ac639c212f7206af4e791d429ed213629ed23d","tarball":"https://registry.npmjs.org/@material/button/-/button-6.0.0-canary.17b9699c4.0.tgz","fileCount":17,"integrity":"sha512-cNl7DKhlZQDwFTih6Kpzmymx2R3NCQx3GnR48fh74eXHM18f9aS30Ogeea9jQsG58aHnTn9jA0mwVBeoiJmsoQ==","signatures":[{"sig":"MEYCIQCM/lxaRy2LmvKF6L7alSYVL5izrcTFBtKH9wDTFqe78QIhAK4Un0jVSLA/thpp3rlMaNacy22p847NGB8mxfAEsH0I","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":233816,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeYVFxCRA9TVsSAnZWagAAAgcQAIWyLE/JREpHdUt0x88+\n6HWxizU0J/m1aGiVjBm+damrMuYusbGljlmLOyIPyIF6axVxVBlYnXMJf/op\nKETfTvKTtIA4+oBLvBDufnz4sVMgxzc2KlRqxb/Q4Aozwn1WGOSm4+v7sXFr\nz0pf6tvBDnyAvaSfBl7L4k2ci81nrexxZmyrD3eUh05Sxb/c17zIgN+8hYf5\nr9vhKdRzCwunK1kTgUB1+l6S8+Bs1eggzHvKFahJ1O826caG2xrYvpWVhQ8w\nbqjX7DuvRo67NnSzXzUIlfG4u1HlLA1MYz1uCvsn6QZB3ENenspmu181RjSq\nn1/07bo9F6ug5TKjJAHFncLDPyGpbl6NWuoGZ7i3lPZvSkMnw/BnxPc+cjRT\nB9kbEeAS7JTnMhnPxkO2L3sJ3xcIJoUAf5evxZbnM6aCPjLsPHwsf+eDLffq\nHf8+vbap9vWE0ZdE3nbydH0aXMThLQehObATsKmc/jsoed5Kz2fXbPDydLjw\nvNF1v2828OjVka/iHbfdmfudv4TmTQxr0fh5gS8heS+RvyBMm57Xu7VOyH9Z\nkkDiF9iKv9ALHd4WQTeCvAJFM7A5zXYZDwafGg6Gv29PTyrDsCyTguatDBaU\nvXAfVuexVtKMLABVn7O1yGdQyG67LZMsNSWjS49O9+k7W+b0KL1LqaFDcvQM\n+oyR\r\n=+6TM\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n\n\nButtons allow users to take actions, and make choices, with a single tap.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/button\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n```\n\n> _NOTE_: Examples here use the generic `\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n> _NOTE_: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Additional Information\n\n### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n\n> \\*_NOTE_: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n> buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n> directly within the `mdc-button` element.\n> However, the `mdc-button__label` class may become mandatory for all cases in the future, so it is recommended to\n> always include it to be future-proof.\n\n### Sass Mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass Mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass Mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color)` | Sets the container fill color to the given color for an enabled button.\n`disabled-container-fill-color($color)` | Sets the container fill color to the given color for a disabled button.\n`icon-color($color)` | Sets the icon color to the given color for an enabled button.\n`disabled-icon-color($color)` | Sets the icon color to the given color for a disabled button.\n`ink-color($color)` | Sets the ink color to the given color for an enabled button, and sets the icon color to the given color unless `icon-color` is also used.\n`disabled-ink-color($color)` | Sets the ink color to the given color for a disabled button, and sets the icon color to the given color unless `icon-color` is also used.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color)` | Sets the outline color to the given color for an enabled button.\n`disabled-outline-color($color)` | Sets the outline color to the given color for a disabled button.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.14.1/node@v10.19.0+x64 (linux)","description":"The Material Components for the web 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/density":"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/button_6.0.0-canary.17b9699c4.0_1583436144950_0.04406896404381477","host":"s3://npm-registry-packages"}},"6.0.0-canary.6ee035572.0":{"name":"@material/button","version":"6.0.0-canary.6ee035572.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"c377c90021300dbe1ee2ad37a1049c1ea1eab646","tarball":"https://registry.npmjs.org/@material/button/-/button-6.0.0-canary.6ee035572.0.tgz","fileCount":17,"integrity":"sha512-GQabu+K7hKi6xXs3KXnQ6qX3E704+IZZ2N377fmtoGwIvztkSLxDH8wU6vzGD3Mu+ZMPtmlCLMZIjA4hWQ0lZw==","signatures":[{"sig":"MEYCIQD2rllV2AC9M15csVv6TIp760Czudz6PFw4lRSN/yffDAIhAKSAP9cvc9ABLL5TvcbQithS3IoHG0MYNtQZGq050UW5","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":233816,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeZnMCCRA9TVsSAnZWagAA4yIQAJufWeg8Mub5BLjO04oA\ndu3T2gpdksECMOXADtu/q3zVcqp/IbfQu4kM+gBEVrj/+TNxYOpftk28YcvI\n6DKMZO8X6LzjxGFDDEKluJ275yI3T8b8xm4ZFLy6PxTUeGjifj9Af3jPgmPf\ntvQ2MbrJapyFVPoKh2hjbJPLGKIJCw2u9SCRezhrDb6hz0Qvyalk+6yG0HlJ\ntXkBFpIMpte82nAd7bbPxPIhiYkgUqnGqDhtQZ74Oi768LNIhKVAKDVsSxs9\naISum3vO6mnG3GYbkgy3/olKWOvXe3ZiyjqWyjP932ou0fnEOqts6CDYoG1l\n3wWaSngbUzzpuEGy4U4Qvhh0gYmd3pv0tX5+jcpznPIgYQrx08bA3qB9bVZc\n2GsbSiOEYxgOkfJlXkm+yuKYVJUfKli31SQIHczfkCpsFrkC8+qt16EkQtqP\nWHjHX4wmHOTdCCdrRHuiVvEvdIEU1c+5NiG0B3qGjpYJIl7So6SMNnece6ja\nOTZEP3eguL6hVpKwuMPFrfHdhJBdZrp0mrGcyT0vqUCw0fLq4mfCrMZN7vjl\nGwpW0Wj7oxWbQb4Atcnbsh00kmDdzMaGE+NhHihmENt9MnPab8nB7iyWuYoD\n+Hmkit7Vk2jNn8mN2RVdhRCPztwwNL9IlmWlndyAczdjv7VWGuQop9VE1ihd\nydHV\r\n=VBXL\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n\n\nButtons allow users to take actions, and make choices, with a single tap.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/button\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n```\n\n> _NOTE_: Examples here use the generic `\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n> _NOTE_: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Additional Information\n\n### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n\n> \\*_NOTE_: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n> buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n> directly within the `mdc-button` element.\n> However, the `mdc-button__label` class may become mandatory for all cases in the future, so it is recommended to\n> always include it to be future-proof.\n\n### Sass Mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass Mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass Mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color)` | Sets the container fill color to the given color for an enabled button.\n`disabled-container-fill-color($color)` | Sets the container fill color to the given color for a disabled button.\n`icon-color($color)` | Sets the icon color to the given color for an enabled button.\n`disabled-icon-color($color)` | Sets the icon color to the given color for a disabled button.\n`ink-color($color)` | Sets the ink color to the given color for an enabled button, and sets the icon color to the given color unless `icon-color` is also used.\n`disabled-ink-color($color)` | Sets the ink color to the given color for a disabled button, and sets the icon color to the given color unless `icon-color` is also used.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color)` | Sets the outline color to the given color for an enabled button.\n`disabled-outline-color($color)` | Sets the outline color to the given color for a disabled button.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.14.1/node@v10.19.0+x64 (linux)","description":"The Material Components for the web 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/density":"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/button_6.0.0-canary.6ee035572.0_1583772415785_0.1262769590640107","host":"s3://npm-registry-packages"}},"6.0.0-canary.bd33cb56b.0":{"name":"@material/button","version":"6.0.0-canary.bd33cb56b.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"69bb15b831db806049ba23c23e68c66502f25653","tarball":"https://registry.npmjs.org/@material/button/-/button-6.0.0-canary.bd33cb56b.0.tgz","fileCount":17,"integrity":"sha512-/AoHJwiwlpoXGN+y/J/6MrxgmQ8rf83sWUo77AJsfGy3wMZ8jl5A9oVd+szzGK8lKl7yL27JBESiZj3uxBrFEg==","signatures":[{"sig":"MEUCICZWenFAL1CxYmLz0G8SX2nRQ7A4Tww3J9pysWTuuBnJAiEA0k5gcnaSgIzdpAFPHRFiG/6KI/NP39UHzccGJK6344U=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":233816,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeZntFCRA9TVsSAnZWagAAi/wP/RUFjkTC7HX+jVz9QL35\nmxMkhMs+COrur9a64bCOnGUex7gyapKQfL4vQuCKYKSIKgBDvMHnuZdJzg/k\nPEchcNR8AgnbcKQJIo9qT37IE57lT2u8of+UJTMfLyfqqqWr+P7Y6xFdge00\nvOIVHKqhUlWoKkZAALFeJ+0MjrcKivzUpBytj5pyf3x/BxliJZ4jD2ZQXVQG\nH2DiYOiZEd7oD2YXVGmx2XgL7yusv/Sd6M4FEgWhds7xK4hFPWHNfHdv5gbs\nj0vIIDOihWeDe2LLOxJIanQyVWkyPzRco8iASzt1IqKZfdmYiU+XGXEPfhmY\nhKrXHNybtLPSEwJn/8qUT0PlznyypSBYTBj9A1T8Q4nYSz4w6gDppNeIvRzb\nd+cx//w3SA4X2JFCoBVIfOqHXzmkpD/NAtqVnvcVF315q915XFmwZuxudw03\naXW0N2LEBgs5BRfG4zzj++PAlWpnb3LcKxPIZDgjfeAJAeM17+o7tJqa69LC\nIWIeivRsCz+NEs9ik5bFXWiCICuscOuteL14EhyCElvpIMx8wn3jQG0t90y2\n2iOn7FzEGmNwJH+KTjpFK8zfnaHcrfXYPUDDw45OY/ilpx90H3A6etxkyJL+\nhtYW3TLNHczYJ+teoTtxW1k01QTI4pbKaYsGBE+i30IVnNNk1FEauXzAlFwC\nKN9J\r\n=Ay80\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n\n\nButtons allow users to take actions, and make choices, with a single tap.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/button\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n```\n\n> _NOTE_: Examples here use the generic `\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n> _NOTE_: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Additional Information\n\n### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n\n> \\*_NOTE_: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n> buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n> directly within the `mdc-button` element.\n> However, the `mdc-button__label` class may become mandatory for all cases in the future, so it is recommended to\n> always include it to be future-proof.\n\n### Sass Mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass Mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass Mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color)` | Sets the container fill color to the given color for an enabled button.\n`disabled-container-fill-color($color)` | Sets the container fill color to the given color for a disabled button.\n`icon-color($color)` | Sets the icon color to the given color for an enabled button.\n`disabled-icon-color($color)` | Sets the icon color to the given color for a disabled button.\n`ink-color($color)` | Sets the ink color to the given color for an enabled button, and sets the icon color to the given color unless `icon-color` is also used.\n`disabled-ink-color($color)` | Sets the ink color to the given color for a disabled button, and sets the icon color to the given color unless `icon-color` is also used.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color)` | Sets the outline color to the given color for an enabled button.\n`disabled-outline-color($color)` | Sets the outline color to the given color for a disabled button.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.14.1/node@v10.19.0+x64 (linux)","description":"The Material Components for the web 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/density":"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/button_6.0.0-canary.bd33cb56b.0_1583774533155_0.7818022137260103","host":"s3://npm-registry-packages"}},"6.0.0-canary.26c049afa.0":{"name":"@material/button","version":"6.0.0-canary.26c049afa.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"1146409f51e22e8510637b14a2a5464ea3bfc721","tarball":"https://registry.npmjs.org/@material/button/-/button-6.0.0-canary.26c049afa.0.tgz","fileCount":17,"integrity":"sha512-PEHEY7b2KZKtcX+ImffPO4d91wT4t4k/W5X9mYMLwL7sBMV/OvPHWc1pqczIl4VRqsJECIMCkisa4sp5pyohmA==","signatures":[{"sig":"MEYCIQCJldwQ3XzIUdsQHIZJX3dEHXngtVPxI37I1kSmChkTkAIhAIgpfw6QsBRLZB+6pF7vOR8nZ0UGfQ2cceeGzOfXVuz0","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":233816,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeZ8gqCRA9TVsSAnZWagAAC4kP/jHpJTHEGA8aCDRs02pn\n9tZIxntAIHESpJjt50b7mZ5Moqgm5ZyrRI39I/EVGMLMk0tI01M/z13fty+E\nHRk7Ga5DxI8+Vr2+Akg7IJHugngen5zyILcbeCYATUqXvXWWRHjVdc3dqB7e\nQrJAyVy2A8hVI8ZYzWV7SlUk9I9/R2s7pJYsTwbMPduYXqlCRh5VUmSknk8g\nZBvH+/Gr5F3Ka0Px1l33pMc3rTpOrcqKBH67HBPH1SEYrLrJMRCslPa7fxfn\nE+hfB2cMsqXdcps9UwBZEGPSiFGjfPkf7qcUcmD/xhM5ghcpoJemDcO/67oj\nIoxfAzv3ondMwHZeLOISGBsXizHcyPXsOE4ROp7DCzP8BUfPYXjUsGaodOxx\nLeNXfkr67h/MAibtRrwm/cahHyRv8n90/DS5vG+nqiLmwonw0LTVzUpDYAKe\nAh+p0e26Rsu4/NTUAlJSa3dwhhbMjIzB/Fzk1cgTctyeLyTuMKj805inMHOV\n4H2sUU9Hq6Ko05njZe/2INw7LVJsmXYDKJkhMYoDOrOUS+c/fZ6bO5sa9Mfr\ngOSBpC5G6MuYMB+ltfWI0bIrhjFo9ikRy/Zd3hlt0/FObjfkvhW/K8ZifG/m\n/RvmiUBXxyOF0ql1U1K5FZnb49kZdJdBDyl948VHqP4Zqhu+L67WPW+crc4R\nOXqI\r\n=PMI/\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n\n\nButtons allow users to take actions, and make choices, with a single tap.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/button\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n```\n\n> _NOTE_: Examples here use the generic `\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n> _NOTE_: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Additional Information\n\n### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n\n> \\*_NOTE_: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n> buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n> directly within the `mdc-button` element.\n> However, the `mdc-button__label` class may become mandatory for all cases in the future, so it is recommended to\n> always include it to be future-proof.\n\n### Sass Mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass Mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass Mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color)` | Sets the container fill color to the given color for an enabled button.\n`disabled-container-fill-color($color)` | Sets the container fill color to the given color for a disabled button.\n`icon-color($color)` | Sets the icon color to the given color for an enabled button.\n`disabled-icon-color($color)` | Sets the icon color to the given color for a disabled button.\n`ink-color($color)` | Sets the ink color to the given color for an enabled button, and sets the icon color to the given color unless `icon-color` is also used.\n`disabled-ink-color($color)` | Sets the ink color to the given color for a disabled button, and sets the icon color to the given color unless `icon-color` is also used.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color)` | Sets the outline color to the given color for an enabled button.\n`disabled-outline-color($color)` | Sets the outline color to the given color for a disabled button.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.14.1/node@v10.19.0+x64 (linux)","description":"The Material Components for the web 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/density":"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/button_6.0.0-canary.26c049afa.0_1583859753685_0.09370838803210302","host":"s3://npm-registry-packages"}},"6.0.0-canary.1db5c9fc8.0":{"name":"@material/button","version":"6.0.0-canary.1db5c9fc8.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"3e1dddf5042441b3772e9dc5d651f6d5eda5a0e6","tarball":"https://registry.npmjs.org/@material/button/-/button-6.0.0-canary.1db5c9fc8.0.tgz","fileCount":17,"integrity":"sha512-wjnaAQWrN1yPr2ZXbZYXyiM4dTyZBlh2rITud3R+62xbU+KA6m7tibLmdqSgzvO7/3XfUr9K7DAyZ/l19hiiOA==","signatures":[{"sig":"MEQCICHX/bxaUalUCjaLKCcxG7u5WD90yjld82NCtYQxxJGNAiBZbrpQdu1180eZU3lfBTc8d22hPq6eLZWBYKOuImkMqg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":233816,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeZ/p/CRA9TVsSAnZWagAAcfcP/2+gBFn9l9BBxR0kayk0\nKG0a4YAX1MIIOTHYhpOgUbJBy9l8gOiI9Pu37jeJvgkhpn+Mow3TFdVW5OfT\nal2qpCirLql8xIyctuQ648geUU07FEe3hx9R/fgUkXwqhI6tu+nu8nhPzi6d\n+aLDlaFoh8499yiXcWhomsxjrsbn5Y8e9iSCdeCYjTkoYr+ko/GtoAKuVaio\niZnJWftrr2tO77fLn/7nbgo/C1vxlolmeh8BsZ3ekxnFyJ7DwpcYyxndzVjR\nyhRzjQJMnho3q014Hq6ffm0ZXCMczF1saW6PkasnxywOw9hF5BytTD50lVEp\nPDA9C5dI5RygPzLVp36VMc6Q7gfCIQU/kSajG0XNF+VYDDbw8Etsa5jQQL8c\nGol/2jopQkeYqEwZhewZf9KbYIVdJ0IbLmWXMzMFnLIrbrk3JWqm1mgBpvfp\nu2BNTrJkff/p0csKkPMvHkp+k0cby8Yyd/NKEw1pR1WXj57x0tm5ZwzymrC7\nuBZ3wsEitmUPFg5YNYG8jK+cuv02nSuU5RSyaR24q9HG6Ibm8ogJdNximLou\nfwZ0X9WHpXH5F4ybMwLJW20xbYcPaNDYzbDUDZhAMbPBD2gHUgVDZfvTG7qS\nNA5Syhh8gC0cVbQTVgRKHD5XVfqgwI8+Mw58mZr8qzT5M9ciWVKXfwcMpNJi\nj0cy\r\n=90ab\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n\n\nButtons allow users to take actions, and make choices, with a single tap.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/button\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n```\n\n> _NOTE_: Examples here use the generic `\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n> _NOTE_: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Additional Information\n\n### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n\n> \\*_NOTE_: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n> buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n> directly within the `mdc-button` element.\n> However, the `mdc-button__label` class may become mandatory for all cases in the future, so it is recommended to\n> always include it to be future-proof.\n\n### Sass Mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass Mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass Mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color)` | Sets the container fill color to the given color for an enabled button.\n`disabled-container-fill-color($color)` | Sets the container fill color to the given color for a disabled button.\n`icon-color($color)` | Sets the icon color to the given color for an enabled button.\n`disabled-icon-color($color)` | Sets the icon color to the given color for a disabled button.\n`ink-color($color)` | Sets the ink color to the given color for an enabled button, and sets the icon color to the given color unless `icon-color` is also used.\n`disabled-ink-color($color)` | Sets the ink color to the given color for a disabled button, and sets the icon color to the given color unless `icon-color` is also used.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color)` | Sets the outline color to the given color for an enabled button.\n`disabled-outline-color($color)` | Sets the outline color to the given color for a disabled button.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.14.1/node@v10.19.0+x64 (linux)","description":"The Material Components for the web 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/density":"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/button_6.0.0-canary.1db5c9fc8.0_1583872639131_0.22936864029245752","host":"s3://npm-registry-packages"}},"6.0.0-canary.4971637f4.0":{"name":"@material/button","version":"6.0.0-canary.4971637f4.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"1ea210f223eec4468802010ec9e2f2a924dd7b29","tarball":"https://registry.npmjs.org/@material/button/-/button-6.0.0-canary.4971637f4.0.tgz","fileCount":17,"integrity":"sha512-5/iKUKqyFbJbjVyCZ++a36vMAQVF+b5pImlx1b23u+RmeQlZMD9ArTrBwM0+ljWbVEdpYhIIXWocFoUo0PuNVQ==","signatures":[{"sig":"MEQCIBLj8B7uzPwcNlAmeIl5fuRlkq/nqA4M9O3wywxEVcmFAiBDTBD0kvb7l/d4vINOnRDlKRQGjobd+Sb9u/a0soHv0g==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":233816,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeaBuXCRA9TVsSAnZWagAA6mYP/iK/a2Ybae/H9lo1DpNN\nWSESfIfe02VCsac0LfTb0lgyfvIzkrjkkAsttW1DBj2hHvW+8mo9URnrvri4\nmzbxqHas74huasDv/P1D7Sjn4sLURdeojywfl/oar6bzrUlWfp0snp4CZO81\n6oeAH6uT3E78wjEx11jiREmicBBMqLkNMzLGRPqhYE1V4p1qGqU1yGTcghMg\nic3JmPhZLoK2IUsBriucD4UkWMo+ePPROjRdhvoSWD/6js69oyVnNGs6Cy7r\nv02I12hz7XuFnRkOyF26asKOCMKuRonMWojCPYySCcf5Z6/RQ0/7B/fZXWfk\naow7GzeTgC6bwQtDTIMX4nssWPkKk+W7xTtskQJFs73wpRg8D4tqeyq8o7IO\ni3P3z9U47io3Smmr4mcM2J3Hd7FzKbdD3rCW1RVb6/0bfu7mK2/SfoTYdiZh\nvjaLCQuXap15w6V5+o6VIEHoKm/U3hP3CIH4dYmkxAV9xO99rL85FDe3ZcCQ\nQy0WV6+SqvioPF8m+v2TmzKMmDQbemBqTsE42jW/FWtw6sJ1kxl2X31APmMs\nZkRYjJujmlZQFVuG/H/EMRp8+MOD7dPHEnIp82vU/2i8BNbiCl5/WzMfQAvu\nkiT2r2Gl0K39ajdXHLKK1R9xCB03ejCUaltAIbkM6powIMr++cFVs0MzUmah\nHo95\r\n=y2Fr\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n\n\nButtons allow users to take actions, and make choices, with a single tap.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/button\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n```\n\n> _NOTE_: Examples here use the generic `\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n> _NOTE_: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Additional Information\n\n### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n\n> \\*_NOTE_: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n> buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n> directly within the `mdc-button` element.\n> However, the `mdc-button__label` class may become mandatory for all cases in the future, so it is recommended to\n> always include it to be future-proof.\n\n### Sass Mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass Mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass Mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color)` | Sets the container fill color to the given color for an enabled button.\n`disabled-container-fill-color($color)` | Sets the container fill color to the given color for a disabled button.\n`icon-color($color)` | Sets the icon color to the given color for an enabled button.\n`disabled-icon-color($color)` | Sets the icon color to the given color for a disabled button.\n`ink-color($color)` | Sets the ink color to the given color for an enabled button, and sets the icon color to the given color unless `icon-color` is also used.\n`disabled-ink-color($color)` | Sets the ink color to the given color for a disabled button, and sets the icon color to the given color unless `icon-color` is also used.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color)` | Sets the outline color to the given color for an enabled button.\n`disabled-outline-color($color)` | Sets the outline color to the given color for a disabled button.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.14.1/node@v10.19.0+x64 (linux)","description":"The Material Components for the web 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/density":"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/button_6.0.0-canary.4971637f4.0_1583881111154_0.9956686461671169","host":"s3://npm-registry-packages"}},"6.0.0-canary.1ae8130ce.0":{"name":"@material/button","version":"6.0.0-canary.1ae8130ce.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"9cca3c8034f3e6eb1b8d3300e345472c014bfe68","tarball":"https://registry.npmjs.org/@material/button/-/button-6.0.0-canary.1ae8130ce.0.tgz","fileCount":17,"integrity":"sha512-m8EvLQf1jccCtOX6z+JqoeT4p+OjpBlgFqyXJE9PdbleE3EIakVq+ABCT/ZKc63MSk/8XlFoK4KpWnTNIXxlnQ==","signatures":[{"sig":"MEQCICSib3YLwWgpR+0magDFx05YSZ5lAOilJInCE13Tl3+1AiB4UF+LgnVduG6h7y6a8vApt+j4WHnDJmS4Xo4yOyufrw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":233816,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeaB0+CRA9TVsSAnZWagAAYpYP/j3e44svG45fGHEcJpPY\nwX8QBp/h5iM+kz/CTYyB5FvYwMXqE1GNY9gM50ZqLNcN/Z7bWcT8yHOe2Pzb\n4VNycwKRKFue+O0fbyTGz+RWDgpPFue1KpXF5jGCmpHrnFXh3WxTkO6/TWJ5\ni8TGSUy9BZVhm17bNTTO+fWuKrODVxN72tUl8xIg7x1aGNDUzJh80A/fRQGo\nTWR00P0Kq94qsSX01eLLJHpnhayg+yceukcncXNjUynq40ZbpT7HJHKGQiGb\nQCtcmkmKs4HzgUDUkTRf0BaaP0n16oPuD8G0cGTdIi6BgQ12z6D6912HvS+a\nHTAQe/KS8HNiWVTphOlaGhAKxThFrBZ+ynb7cWeUzMFp8GMSEPNNdR2c/WZZ\nG7XRAbsKyJpxtrYFmxX5D18ObNF+xX4faS4j3gTbdFcWCABd54Qvbc0k/DB5\nxZTLKbGeL/vY4QwJXqSikhON5NM2mX0LKp2/zFNwZCr613B91B5esFO7LQym\ndoYqHe/ju1/qzzHR/W9pSMwe3R/Q8MEhJv7fg0a+uvdWjXEcfVqP2juwzEz9\njms34xclPuTzrYO6bq5oUzxcioXlZ1Y8iqU0Fh3SP5vGsDrmYvwkZGAh4jbN\nuUpPyqo1/+wN9Gvwve2iNNZNiy8w5QEFNwcN0FIQytZgYBAYGR6/53j/kE5B\nxFX7\r\n=xeGr\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n\n\nButtons allow users to take actions, and make choices, with a single tap.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/button\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n```\n\n> _NOTE_: Examples here use the generic `\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n> _NOTE_: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Additional Information\n\n### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n\n> \\*_NOTE_: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n> buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n> directly within the `mdc-button` element.\n> However, the `mdc-button__label` class may become mandatory for all cases in the future, so it is recommended to\n> always include it to be future-proof.\n\n### Sass Mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass Mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass Mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color)` | Sets the container fill color to the given color for an enabled button.\n`disabled-container-fill-color($color)` | Sets the container fill color to the given color for a disabled button.\n`icon-color($color)` | Sets the icon color to the given color for an enabled button.\n`disabled-icon-color($color)` | Sets the icon color to the given color for a disabled button.\n`ink-color($color)` | Sets the ink color to the given color for an enabled button, and sets the icon color to the given color unless `icon-color` is also used.\n`disabled-ink-color($color)` | Sets the ink color to the given color for a disabled button, and sets the icon color to the given color unless `icon-color` is also used.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color)` | Sets the outline color to the given color for an enabled button.\n`disabled-outline-color($color)` | Sets the outline color to the given color for a disabled button.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.14.1/node@v10.19.0+x64 (linux)","description":"The Material Components for the web 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/density":"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/button_6.0.0-canary.1ae8130ce.0_1583881533759_0.9891703613354152","host":"s3://npm-registry-packages"}},"6.0.0-canary.8639c2690.0":{"name":"@material/button","version":"6.0.0-canary.8639c2690.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"1365878ffeeb637abc6313a90260ddd1cfd941f3","tarball":"https://registry.npmjs.org/@material/button/-/button-6.0.0-canary.8639c2690.0.tgz","fileCount":17,"integrity":"sha512-A4kKxdm68Lyvr3F4Fs6Kdw3KIsOSAO7UAAmqE9MDHPhVex4xrZ4FipBeatnw5NHPRlwJlkNhgYZsSi54EjnQiw==","signatures":[{"sig":"MEYCIQDBSWKtAzAz8Oc7QGDvAF9jQfGGjsZx378JBPdQVMI0pwIhAKkv2gaRN/40/ptbwASXHxlugmsq/9veeFaCS2EThwGv","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":233816,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeaIY2CRA9TVsSAnZWagAATiIP/R4LJGqwOvzBaVfESRhg\nWRYxM2SU/SreQJYGNmTAG0B0HXky0iW/8PGk090xYf1131bIP1FVpDTgT/Jy\nsZLgXKKiJGyw7lD17V5CGOxoZFtc84p1gYuCjeFj0jhR6Ulvlk0wNUrUdBMg\nFsw4H2ALmBJLHQAUL+CB/CgjMOZTIhrB6yqj2b1ia2EUL0vWqtXAC7Q8sWBE\nrBRpEe/Ax9VqRVzZRnXAmXU38a0foTj09l3ASIYMFgjIM+Q2wsGKFVGS/Ytn\ny1WFm5MLq2OkhI4Qzy23+1BriFprSOnJPW3YdpjG2K6K714nMCPi/gDfVSif\nI+lYNgHmNTXR6awS5Wh5NlfKm3a16Xo3+Cv6uye7yZ+DmtFuKqiTaDgznyvA\nf0lf0flsxBISi6DnvjeFRTW2PAc9srPa4uTRDNYwor5nFXUufjMF2pHnrnnJ\nUaOujgIhWbQoIs9oheYXYf3WFK8vaziXOlOMAEGBRySbvxawoqy0QREBCDAO\nP7HwxZ81kxFs0HVd90p5lIAye4wUwQmx4o9Y+iMo1/lT2/j4rNwm5x3+qlL0\nA/SYEk65CLVFj0HRxuYN+ymWRVG0lEVxFxJLBQyekQd4im08pq1L+r5bOpgu\nSmml2cYh/VY/fF2hTx32yI6SMd1QzIIMvO6dOjreQbarRy8MXOLgvA2KAPwx\ndOZX\r\n=tOL4\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n\n\nButtons allow users to take actions, and make choices, with a single tap.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/button\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n```\n\n> _NOTE_: Examples here use the generic `\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n> _NOTE_: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Additional Information\n\n### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n\n> \\*_NOTE_: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n> buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n> directly within the `mdc-button` element.\n> However, the `mdc-button__label` class may become mandatory for all cases in the future, so it is recommended to\n> always include it to be future-proof.\n\n### Sass Mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass Mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass Mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color)` | Sets the container fill color to the given color for an enabled button.\n`disabled-container-fill-color($color)` | Sets the container fill color to the given color for a disabled button.\n`icon-color($color)` | Sets the icon color to the given color for an enabled button.\n`disabled-icon-color($color)` | Sets the icon color to the given color for a disabled button.\n`ink-color($color)` | Sets the ink color to the given color for an enabled button, and sets the icon color to the given color unless `icon-color` is also used.\n`disabled-ink-color($color)` | Sets the ink color to the given color for a disabled button, and sets the icon color to the given color unless `icon-color` is also used.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color)` | Sets the outline color to the given color for an enabled button.\n`disabled-outline-color($color)` | Sets the outline color to the given color for a disabled button.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.14.1/node@v10.19.0+x64 (linux)","description":"The Material Components for the web 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/density":"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/button_6.0.0-canary.8639c2690.0_1583908405529_0.4240459353589183","host":"s3://npm-registry-packages"}},"6.0.0-canary.d5808057f.0":{"name":"@material/button","version":"6.0.0-canary.d5808057f.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"527def9a22c66d9ff07ebd0138a7a32501036cef","tarball":"https://registry.npmjs.org/@material/button/-/button-6.0.0-canary.d5808057f.0.tgz","fileCount":17,"integrity":"sha512-H+6nTOgP8l38Z2OGzySlzWaOqPXE6KsyBp6n//iL7BxloOcOMfqEruqOKlu1QLkz/MipM6BW3L5cfLls/HgVuA==","signatures":[{"sig":"MEUCIE3PyHZTihStHfeuFY4FPCBFWWJAU+iGr+TYxqFRFwJcAiEAvu8G8dpCdFU4ZmDtRnizlcVj4lzrE1Hez6bizjaPAFc=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":233816,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeaREDCRA9TVsSAnZWagAA6QYP/jmcJO4q6x1EUI0D5n1u\n1JYlWVV7f9/70lVfR9ieQNtHvWAKUqCEUOWKpJzEcsTdeACuM11fpCxnpCab\nBYLpJJ60sTq+v3dnPzzaN0HdASHlcjzfegdu+gE7IxCXi8c+jqopv/3zuJeK\n33LiBFBdqOuALjExx5cDSP39QttnXkAabks11yQKLp7wVpGaD86qcVsUAqDb\nHVOgZ5xb5ssBIZ0DeiPSRio498QbFcHn20LgLzPJjnNUn73clYtG1MZRSZ7i\nLMviS+X8Kzxl9NyF+XZtjf6Iq4q/QMx0pEBe+gmLYErHhN1Yvin7xffEYY6+\nlBjkOI0yQo5SOFgUgWAGOXs7dNxRu/H9t2WegBfuAhXB6mEam+Ll/X2zubNU\nmXeoWunho6SAjHnGsoNB3UldOVBJ+lUXQUX+7XGwcem50eZWgC9rXOQdAOJK\nOVSVZwWmn2UBDoYRlUwL9D10KzMl/FeHV44LIkwPVvz6KpHegBWC8v0pWs8b\ntwcwKoBRL1F0mtSf7r8SmS2jYhw9b2q4LV7JAL7a1TI6Up1RljcQooC3XXzk\nNnrqPCCtEpv164om4CZ6woVIzxpl98TbtUxJY23j6w2uOC4u3fXkBPSQVevV\nPhViG8t1Te9DOcpaIVhYoMngUN8bkjrnWTjV5alWRIne/AocPmkuJzGSwnYo\n4Kw+\r\n=KMlj\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n\n\nButtons allow users to take actions, and make choices, with a single tap.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/button\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n```\n\n> _NOTE_: Examples here use the generic `\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n> _NOTE_: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Additional Information\n\n### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n\n> \\*_NOTE_: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n> buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n> directly within the `mdc-button` element.\n> However, the `mdc-button__label` class may become mandatory for all cases in the future, so it is recommended to\n> always include it to be future-proof.\n\n### Sass Mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass Mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass Mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color)` | Sets the container fill color to the given color for an enabled button.\n`disabled-container-fill-color($color)` | Sets the container fill color to the given color for a disabled button.\n`icon-color($color)` | Sets the icon color to the given color for an enabled button.\n`disabled-icon-color($color)` | Sets the icon color to the given color for a disabled button.\n`ink-color($color)` | Sets the ink color to the given color for an enabled button, and sets the icon color to the given color unless `icon-color` is also used.\n`disabled-ink-color($color)` | Sets the ink color to the given color for a disabled button, and sets the icon color to the given color unless `icon-color` is also used.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color)` | Sets the outline color to the given color for an enabled button.\n`disabled-outline-color($color)` | Sets the outline color to the given color for a disabled button.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.14.1/node@v10.19.0+x64 (linux)","description":"The Material Components for the web 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/density":"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/button_6.0.0-canary.d5808057f.0_1583943939291_0.9410496942331421","host":"s3://npm-registry-packages"}},"6.0.0-canary.b3f58203d.0":{"name":"@material/button","version":"6.0.0-canary.b3f58203d.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"f6a5bc2e952ac54ffc5eaa0bde76984fb2c18dd1","tarball":"https://registry.npmjs.org/@material/button/-/button-6.0.0-canary.b3f58203d.0.tgz","fileCount":17,"integrity":"sha512-eADsLzojAStWHSOQ2NkuR5HGiLLjk3EMUMOuH+Y5xsqTo76jit5/kAu9OAsC9cORhvn3KvwxdrntBCULCMY61g==","signatures":[{"sig":"MEUCIQCkZjplUFoT6Gh5rpvoaoPEXo7CJz1ytc+39Osut6YlsgIgHCkBbec5QlXUuk/m13Tjb/JvSoeYNVoSQEIPwjgKm0U=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":233816,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeaT4mCRA9TVsSAnZWagAAy3wP/2mLqJFx4bZfB5czRlOt\nXx8ADyt/wyyvJcOBDBQfLLd6JD1VJn92c7VuENTvgAgIEYy0P9sy3v2ft7hr\nxJxtMCONunavY8BK/jOfK7GuML6i2LVE7I4+TldPvyTF6KHNqBKnkSgVo8Kl\nr0A2uK/SBrayQKHZOaPQii0/mYedvxhuw5ld35XQblkQDJnSsjbCaeefso5l\nUX6/kKzalkhcgNbEgwnw5xpFEz37he0NC+86FEgjUmgGSaE2de3odkpFui/j\n2JBF3W8I+PhuChtsO1+AY3duc2N3gvBmE6JI803sB27SsD4LkN3UDCckK6pz\nTlVsNleKQ+LvnQ8C/y7tTo4896X2fReHVP1j1/ppAZehqKmCxZ2u/CoKtSe4\nqTLT8HiVHNwLDB1YZgFxPCxY9T3tpf5QYSeMNdx+PY8Rwp3N79ytfzzDM6k2\n6uXvX9adzkeTUaTPCQW9S5meP5IPhc1Tw5AGJkwaCN+0B/kuxyxzQRyfpJry\nNS2nDqRawfGCl0TC4awXOfvKHcSuCaCEvGd0Xi441TuKEYns4TO6QaDmWUis\nNpMIgs+rwbdUGmQGA08zEy9WcagI2Q/N2LfGuIEjdMfBEAUx0atckQe689VZ\nuaNrEMbs9yN2uPoLVtawBi6lS7QbPFn2jYU8JVHlFCuW5DJp/bJlH/W45VB2\nqMxo\r\n=Mrkc\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n\n\nButtons allow users to take actions, and make choices, with a single tap.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/button\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n```\n\n> _NOTE_: Examples here use the generic `\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n> _NOTE_: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Additional Information\n\n### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n\n> \\*_NOTE_: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n> buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n> directly within the `mdc-button` element.\n> However, the `mdc-button__label` class may become mandatory for all cases in the future, so it is recommended to\n> always include it to be future-proof.\n\n### Sass Mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass Mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass Mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color)` | Sets the container fill color to the given color for an enabled button.\n`disabled-container-fill-color($color)` | Sets the container fill color to the given color for a disabled button.\n`icon-color($color)` | Sets the icon color to the given color for an enabled button.\n`disabled-icon-color($color)` | Sets the icon color to the given color for a disabled button.\n`ink-color($color)` | Sets the ink color to the given color for an enabled button, and sets the icon color to the given color unless `icon-color` is also used.\n`disabled-ink-color($color)` | Sets the ink color to the given color for a disabled button, and sets the icon color to the given color unless `icon-color` is also used.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color)` | Sets the outline color to the given color for an enabled button.\n`disabled-outline-color($color)` | Sets the outline color to the given color for a disabled button.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.14.1/node@v10.19.0+x64 (linux)","description":"The Material Components for the web 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/density":"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/button_6.0.0-canary.b3f58203d.0_1583955492985_0.27267388330024733","host":"s3://npm-registry-packages"}},"6.0.0-canary.bec065920.0":{"name":"@material/button","version":"6.0.0-canary.bec065920.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"472011d4ef230cfd45f691468025402f4adb38a6","tarball":"https://registry.npmjs.org/@material/button/-/button-6.0.0-canary.bec065920.0.tgz","fileCount":17,"integrity":"sha512-P7WfZWOlBNs3nbtG+dH/0J0GNBV8MKDYed0blXGFW2EfbyxEXYp21KT7xNCJPTlMowUqTOjhf+wJYVBileliwQ==","signatures":[{"sig":"MEUCIGRRZ/Xom5hkWPd0hRL7N1iBljhg5hNowKU9jTGZUoriAiEAxmmd7KgwdAH7xPZos6poaqdPLEz9l67RYd+xgvSu64E=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":233816,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeapmTCRA9TVsSAnZWagAAIkUQAIKyoM/AQTLkR00tt3Xb\n+TUj1+9dzHsvD8/O+2EKJRupubS9l1xWVwZtk2NKHemf6fYilCfusKm1FI0u\nGFVNbNwp/PDaMRwpQfjsvz11O8eeP6owimPprKbLLSVx4QGo0ERXESddTv25\nCT0rRkqb/eL7SKyO52fx3EK0vBHgwAlJxNhx0gL9IXbuNiHH+3w224P/Qmx2\n63A5el8eb+9Zk1DwdFETjr8IoUEyP4r08ShY+sfUvRBOppB7NfdizRqeVAnf\nHiDcI5uQwnTe8WiM2lYiU2JEg0X2JDjB1Ur7MaDx4/mUSmN9AAYuKeWlKYqO\nxwZWdE22tnoZGNEQqvFcy6dHpWGTOCE26R3xMAl4m4ep/FG0zbA+cPOBypdu\nZ2n6N4pYrY1HYCGzsd29zcDj7+h3Y9Df7JaXeu4t67I5/v3zFYuGpWwdoXG6\nP++mw5QufZy1Q/RBoEogWaRvycKfuGlvGPs4L6pE6WZ4JoLv53YXcccw2Qsh\nUsFlUYlCkLe/dg+RNhv7Zb7LT7Tg6av0amIZNwNecJ7j8g7tErVeN1jUVxF6\ne/7OFjWsuX3lhaLEajt9dt/c93AY+8tG4ArGgfwx7byB8wonPP1ilSzWCJzh\ngItPD6Gvm4sxW6LADGDyqrkibzH8xNATj7oGN5FSnriae539CPx0cS2VISmN\ndUM8\r\n=OC5Q\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n\n\nButtons allow users to take actions, and make choices, with a single tap.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/button\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n```\n\n> _NOTE_: Examples here use the generic `\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n> _NOTE_: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Additional Information\n\n### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n\n> \\*_NOTE_: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n> buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n> directly within the `mdc-button` element.\n> However, the `mdc-button__label` class may become mandatory for all cases in the future, so it is recommended to\n> always include it to be future-proof.\n\n### Sass Mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass Mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass Mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color)` | Sets the container fill color to the given color for an enabled button.\n`disabled-container-fill-color($color)` | Sets the container fill color to the given color for a disabled button.\n`icon-color($color)` | Sets the icon color to the given color for an enabled button.\n`disabled-icon-color($color)` | Sets the icon color to the given color for a disabled button.\n`ink-color($color)` | Sets the ink color to the given color for an enabled button, and sets the icon color to the given color unless `icon-color` is also used.\n`disabled-ink-color($color)` | Sets the ink color to the given color for a disabled button, and sets the icon color to the given color unless `icon-color` is also used.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color)` | Sets the outline color to the given color for an enabled button.\n`disabled-outline-color($color)` | Sets the outline color to the given color for a disabled button.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.14.1/node@v10.19.0+x64 (linux)","description":"The Material Components for the web 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/density":"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/button_6.0.0-canary.bec065920.0_1584044434741_0.9155261602259186","host":"s3://npm-registry-packages"}},"6.0.0-canary.776291ef0.0":{"name":"@material/button","version":"6.0.0-canary.776291ef0.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"83877301ed4cc0f5d33069626c985269f05acebb","tarball":"https://registry.npmjs.org/@material/button/-/button-6.0.0-canary.776291ef0.0.tgz","fileCount":17,"integrity":"sha512-z0K3wKCE2WsFYLpIxLI+V8Kqtjee1zToYwZuP4ic0PoMDVpA/v31dR1M/flv4LvbAHYOc1E7Lz4RwosPuUA9Cg==","signatures":[{"sig":"MEUCIQC5R9FAek0BOpNlSrh6roGpaTn/QN7i8/qtIqOeKz0vAAIgePE5su/jPV2GcdCqi1CjUExB8Ao7+acJ7dYG/GSr6NU=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":233816,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJecSMWCRA9TVsSAnZWagAA6lkQAINcTd229OuoM422xrhd\nt7RkmIS+NiUrmrqdlyxKos/Wvck8JEXgOOCKCcKFme05kHnxHU5rqia0eygg\nxCTkykKirUQ8jI5AJzw91RM9txV7HYUsrb5uI7LCHD0VdtyUoEuGg55vjbB4\nLNwIz0gKZB+fpv3ixOXPMmT2kqRp6350B0yQ2WPe/FNn8MNXleLGAKEPgVrs\nTgMSLplt8SgdfhUfcX1ObDhEPtJZmQhuTFhcmGpRlMs7Huftsf7s2JAjGfYv\nEqX/NFmu4ELew5oMKz4ufnvCgmeeLEvR51KoIvLrpAJRzzn2wHvonmkeiT/N\nLgUwzjBkLfD4/nlqjgCzTdnyuJ6KhVDzIANdkE9QTeBcREnBAlz6PWIaNZCT\ntzUGs8h36u3+wOc6dKYxyLeHekUfw5fIeONC+yRY2+pukjqS6TDZyLLT/m1/\nsHVWF8t/eJCxMeyjk7JjTbXyXDX9ZBZYSQdOJohtdPNmi8whHeKTYx2k7pI7\nXMIvGET28hg2oAlX+Ede+HU9Lt+6QgKpD2fOHVQ4J7l/TJdDCU7+YfWzTE7N\nrXyzlb0bNTv/z3ZrVNtxHrsCofkHFfld1xfm36EkqU0F6vEi58VmvNBXNeqv\n7y+zyWB4uOPhAh24Bxsu/OUui/MkSSMhA+ztBLDKt/9t2xW6WUkOm9x9ncB+\n2rC5\r\n=iDzH\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n\n\nButtons allow users to take actions, and make choices, with a single tap.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/button\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n```\n\n> _NOTE_: Examples here use the generic `\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n> _NOTE_: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Additional Information\n\n### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n\n> \\*_NOTE_: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n> buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n> directly within the `mdc-button` element.\n> However, the `mdc-button__label` class may become mandatory for all cases in the future, so it is recommended to\n> always include it to be future-proof.\n\n### Sass Mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass Mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass Mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color)` | Sets the container fill color to the given color for an enabled button.\n`disabled-container-fill-color($color)` | Sets the container fill color to the given color for a disabled button.\n`icon-color($color)` | Sets the icon color to the given color for an enabled button.\n`disabled-icon-color($color)` | Sets the icon color to the given color for a disabled button.\n`ink-color($color)` | Sets the ink color to the given color for an enabled button, and sets the icon color to the given color unless `icon-color` is also used.\n`disabled-ink-color($color)` | Sets the ink color to the given color for a disabled button, and sets the icon color to the given color unless `icon-color` is also used.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color)` | Sets the outline color to the given color for an enabled button.\n`disabled-outline-color($color)` | Sets the outline color to the given color for a disabled button.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.14.1/node@v10.19.0+x64 (linux)","description":"The Material Components for the web 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/density":"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/button_6.0.0-canary.776291ef0.0_1584472853872_0.8019346729206864","host":"s3://npm-registry-packages"}},"6.0.0-canary.ece19f3dd.0":{"name":"@material/button","version":"6.0.0-canary.ece19f3dd.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"c172d258866d62cbe93e5fe754d9268226ea7150","tarball":"https://registry.npmjs.org/@material/button/-/button-6.0.0-canary.ece19f3dd.0.tgz","fileCount":17,"integrity":"sha512-O/uzWlG9P/OWurTAirhDRA8Sp438Y44jTAfAVtoKCYx1m4VJeg16DMUlsHlBq3NqZcEDi0mSzt/cj91oghTdLA==","signatures":[{"sig":"MEUCIQCaMcmOO+0WCB6+Rcb8Qyf2qcDH3DMJMWFSbo7aLGogEwIgCuemNyC1blG9EY6/KlqyvYGsIixBNSFfg+PamF9Gp8w=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":233816,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJecUiyCRA9TVsSAnZWagAA0DwQAJUIl51Cjeez+ZY4dbuB\nTtmATwf9wme7kM9MuOcbbC8kvQEPxgiTyefwvVP2kGPF8471dS5foMDFk0Y9\nZFPT8ro2L+X4lWVssmDZ1TfexvKFlej7i7mcBM1Sy1RNOO/s0xY9pC8cKgFF\nomVyRNeFJGLyvdz2VfmXS54sqEtgAYQGc77hQ2LIIBuuvA3cfgPXDyQ/yC/a\nKqCBAPzXTjSNiwzNWSw5qZL5AeC9U+sEq3UbvDhEHh62ASE2jhr6lrS3Of2Y\nmieTE/t6JnBRBwS9NSWKBpeEyFF0dHqdiizqUJJui1zQYTVeQLLCmyZxIyLG\nsLPTHXqZehnC6pDJtM7j+eNdUmy7oD08TQxgFEMgexe+8P+WapUZMVwbxLK5\nyQzB1AklWgxZfxEJxGfr++jjpa08tcxVLCztPAJM5GLW5UGpNvuu0FBTcY12\n9cXkeftC/vFGy0f3Yiez2AajZE0R56+xu7DlrN9t/VvPvhkSxLV15HAKAxGR\n4QFUSZldfJGmVskPNoi3prPQQUInF9CuoevZG9yYDU4lXjDofLzv0hYHYqYI\nL0vXVpno3eGNNWkB21o1Y54i8ZgrpT0Uovwh1ik80d7jOEG31ciYCMk/8gl5\n0y02QfslXOcBcPoIgpxPakBUPeT/wpmJR6cjhuas5E5Sc/gmova78C+mQa6n\nc4c/\r\n=Vgsm\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n\n\nButtons allow users to take actions, and make choices, with a single tap.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/button\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n```\n\n> _NOTE_: Examples here use the generic `\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n> _NOTE_: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Additional Information\n\n### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n\n> \\*_NOTE_: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n> buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n> directly within the `mdc-button` element.\n> However, the `mdc-button__label` class may become mandatory for all cases in the future, so it is recommended to\n> always include it to be future-proof.\n\n### Sass Mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass Mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass Mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color)` | Sets the container fill color to the given color for an enabled button.\n`disabled-container-fill-color($color)` | Sets the container fill color to the given color for a disabled button.\n`icon-color($color)` | Sets the icon color to the given color for an enabled button.\n`disabled-icon-color($color)` | Sets the icon color to the given color for a disabled button.\n`ink-color($color)` | Sets the ink color to the given color for an enabled button, and sets the icon color to the given color unless `icon-color` is also used.\n`disabled-ink-color($color)` | Sets the ink color to the given color for a disabled button, and sets the icon color to the given color unless `icon-color` is also used.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color)` | Sets the outline color to the given color for an enabled button.\n`disabled-outline-color($color)` | Sets the outline color to the given color for a disabled button.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.14.1/node@v10.19.0+x64 (linux)","description":"The Material Components for the web 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/density":"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/button_6.0.0-canary.ece19f3dd.0_1584482482260_0.1446932258203748","host":"s3://npm-registry-packages"}},"6.0.0-canary.4dc45af6c.0":{"name":"@material/button","version":"6.0.0-canary.4dc45af6c.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"75261954c2bae8517a49f2b3014b7e4dc7d3f620","tarball":"https://registry.npmjs.org/@material/button/-/button-6.0.0-canary.4dc45af6c.0.tgz","fileCount":17,"integrity":"sha512-POjwMJHpn4qMm7BDb5KC7orQnrluoNk83oAjF0GhEq9SAJX4iw4iodfgPNYvdNarl/nJTPePZy55jemIGXoJcg==","signatures":[{"sig":"MEYCIQC95BxloX8BYU2cZX4ZUTN6o4SMOV2cDDmBBwcniudjxwIhALLz8R1fbJ8TcgDGiIXSdG2SlEBC+chz/2A2KJ3uuZOR","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":233816,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJecX3WCRA9TVsSAnZWagAAvDoQAJEaj+bP9dzWwqU6Nha9\nzBAsAvdd3sxGnW7XSmClhSgs9HVYzExHdd/hl/5/Sz1RKW4YEw4Y0ERgM1xH\nqjpva7H2UYQrBBQ3VRUvQpwYlsYpP2+fVzxaAqda5qBK0Mmo4lJvsiJJ/EV4\n4tphNKwTz6ulfOeyEXWPKfwhRRB2fJSV7vo81m7Cfg/Lruth9vPEBGpmQUC9\nM3zySi4V2lfHbU8B6rWGFL3SOliW0cnWpyqjKP2QpTNfAhlM6xNknHgmbTmg\n8FsRpKKla6y6ZbeUn3M3FeZrhuHh8NDdHuBmZoWyIbpGyzQZhnQEX1wxyuW/\nWWG40bycwfv7mnr3vFrLsXEwL6DQopaQZHabwzVZTavnunvdQ+orFCk0ac+W\nA5fCSmd4nETQjtRwbhvZkv1wBIGtvBI+N7sFA27MaSjFS/rQHsYy/UUpWdPs\nXozpVgcjM+k4884M55Ymqelx8fUbdRSnTvvK+IqwRGyTewx3C79+43UBMRyj\ngWlDW6SysC6vDmwCWRIUsYijYpBjrUJPwpDnyjidjLxKLEpqpBzScfFV9AUz\n1X9q5t+viVFN1Bcckurwru8ZXGG7LILYuV+grsw9x+64NpHJP5LaIK8TfwiW\nYmItgf2tIdBCtaKaVAD6oTMScHFXW860K8c4dF/IsBRBr6uBqM8e/r8FCHiN\noHYx\r\n=rJ8L\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n\n\nButtons allow users to take actions, and make choices, with a single tap.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/button\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n```\n\n> _NOTE_: Examples here use the generic `\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n> _NOTE_: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Additional Information\n\n### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n\n> \\*_NOTE_: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n> buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n> directly within the `mdc-button` element.\n> However, the `mdc-button__label` class may become mandatory for all cases in the future, so it is recommended to\n> always include it to be future-proof.\n\n### Sass Mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass Mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass Mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color)` | Sets the container fill color to the given color for an enabled button.\n`disabled-container-fill-color($color)` | Sets the container fill color to the given color for a disabled button.\n`icon-color($color)` | Sets the icon color to the given color for an enabled button.\n`disabled-icon-color($color)` | Sets the icon color to the given color for a disabled button.\n`ink-color($color)` | Sets the ink color to the given color for an enabled button, and sets the icon color to the given color unless `icon-color` is also used.\n`disabled-ink-color($color)` | Sets the ink color to the given color for a disabled button, and sets the icon color to the given color unless `icon-color` is also used.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color)` | Sets the outline color to the given color for an enabled button.\n`disabled-outline-color($color)` | Sets the outline color to the given color for a disabled button.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.14.1/node@v10.19.0+x64 (linux)","description":"The Material Components for the web 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/density":"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/button_6.0.0-canary.4dc45af6c.0_1584496085114_0.4510647388598741","host":"s3://npm-registry-packages"}},"6.0.0-canary.6b48781bf.0":{"name":"@material/button","version":"6.0.0-canary.6b48781bf.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"ed96512f915d2fadd87c201345bf5804d095bb63","tarball":"https://registry.npmjs.org/@material/button/-/button-6.0.0-canary.6b48781bf.0.tgz","fileCount":17,"integrity":"sha512-emTdCDtAG2iCaN5M59wng2xLfSWY+Pq8A2NyvFL/w0kz6iNsXOfHqtacSU0cr7ZPCNqP55QQQEsDZZASzCUPRQ==","signatures":[{"sig":"MEQCIGCGD1x/9Cae5QbWKmDa75e2A9uGqrtaAhTdrk54JKlBAiAc3V3mLXgmUSyZlKV5EiF/8xrM5bTMS9LA1eWa3dKYUQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":233816,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJecj+fCRA9TVsSAnZWagAA0SgP/3ESqvpExSCL1kv2NCvA\nWLLAbENiAO3fik8WAkT3WvMIDYs51DHdwsF/cHWSTw7B5RpK6TcmcSLNUoXJ\nVLy8EvC53cMGM/unkQTrZMKTTuwiD4X6YJ4yzDqojGC4XNeLOXwAoTImiBYf\nu8lnEXLQSmMFP38R81+vtEHr4CYzU0Biw3sB7J2RdPS2vwTjXoem75MUB0xY\n446BnoWzIlseEC/f2OIW45SxkRTsQ9f2RsJ1HJ8mFtZAqblvS0ar3V5F4f2h\nWU6zYeaDAfBCqQ0+bvR+GB9kykGaOV3RZ0S7W1iB33EWd/fc6uLaQnWawalR\neryP2mqX5Ihs+oMKtJS8qZvuqFxU1rpNs0sQXlgSYDx0SMjqbHypXNMSGqdM\nbFbUz9iiNC6cwm2H1cXOc7/iPKtS2BzsKjcR9G+iX7fXbk+q8El64Ms8AWto\nwuI504lT45NxUQ1VROgGeTxaugNlpZBaMTOAG/5nQQvUf1Tf1uvDwK80kYhV\na7Wvhxdt0uDD9sveRgZJQQ5AZpe0fTreygJinY8Q6IwwHUVZzICly0omBClH\n3MhMtuGJgA5yDIjZLkKMSx9dZT3jQ+iTIinoddzxLnHnjAjBb2iQ7g6oGXHB\nvPAsZjDntH3WOmRrkxB/OAtgsypgeOlB2OXEjtN3QFywBTx2dNT8OKoIsG/5\nNTN0\r\n=RH6+\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n\n\nButtons allow users to take actions, and make choices, with a single tap.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/button\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n```\n\n> _NOTE_: Examples here use the generic `\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n> _NOTE_: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Additional Information\n\n### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n\n> \\*_NOTE_: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n> buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n> directly within the `mdc-button` element.\n> However, the `mdc-button__label` class may become mandatory for all cases in the future, so it is recommended to\n> always include it to be future-proof.\n\n### Sass Mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass Mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass Mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color)` | Sets the container fill color to the given color for an enabled button.\n`disabled-container-fill-color($color)` | Sets the container fill color to the given color for a disabled button.\n`icon-color($color)` | Sets the icon color to the given color for an enabled button.\n`disabled-icon-color($color)` | Sets the icon color to the given color for a disabled button.\n`ink-color($color)` | Sets the ink color to the given color for an enabled button, and sets the icon color to the given color unless `icon-color` is also used.\n`disabled-ink-color($color)` | Sets the ink color to the given color for a disabled button, and sets the icon color to the given color unless `icon-color` is also used.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color)` | Sets the outline color to the given color for an enabled button.\n`disabled-outline-color($color)` | Sets the outline color to the given color for a disabled button.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.14.1/node@v10.19.0+x64 (linux)","description":"The Material Components for the web 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/density":"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/button_6.0.0-canary.6b48781bf.0_1584545695307_0.8834839169483883","host":"s3://npm-registry-packages"}},"6.0.0-canary.a88c8e4dc.0":{"name":"@material/button","version":"6.0.0-canary.a88c8e4dc.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"03d62ac0f62598906f8fe964c07c1b08bc033556","tarball":"https://registry.npmjs.org/@material/button/-/button-6.0.0-canary.a88c8e4dc.0.tgz","fileCount":17,"integrity":"sha512-BROjLvnrM3Hl7fmUAV1oTS6yzGGQI+iUIv4V9DGNdpqrcxSqU/2fT8Iej1Pvls+qdniR2rG0ldh5iu/svoA5cQ==","signatures":[{"sig":"MEYCIQDqgyOBbUzM1kLnAwUdajyfmhBAfr2UfE+BjQEnu0UpbAIhAJ+cHUZqgy+f4w8Y2V4v96R5+djGqA8b/Tukxd7eukxh","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":233816,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJec62CCRA9TVsSAnZWagAAEw4QAKQfXieGbAp6k9oZB67L\nfSRyhmaY3VE/mGyH0tJncdGXffPef9MUb9byVGT+c5arc5mIw88PAcUJCjuZ\n6AG5Icp4oDItS7p6jZ0CUpWU2vMp+1lV+X1dYiYxZxzH1lsMvi1y2VeMKHhD\nsc5iOCn+rFOcR1MCyb0/vUDhbEJH/QW6GZMTegk9GBlRl8R7g5Du1iSNEahW\naALJLGlJ41KDv1JqOxnmC5G/SKQr9eOaEK0isW37zO00u2A1hIkoN58mJcx2\ne3uK2xzHBS7tp4nUS03w93ih5Sd6YTKialSAwLJ2pU64QQKt4mQSuIn8kUrr\nVJX92rDyZJLylbNWYQT8Srk9SU66EWaw4AF1jNJKGfemjMhwa9uT/reGEysF\nXmVcZqj0FbwbcR64NnK3AygRybCD7S0L5O2sPphFPRJfC5g/cXsrOAULsKO6\nNaVwrHktpkofMPwYpCVokXbc2Cgo7NvOrk5k+ZrvuNRKc0A+MojsxfMZBVDz\nGHeq202fqRze8or0CTXxwp65CJadfmXEXo8arxa3uXmEQ3l9UEcJTH+xSpTT\nXd/2VxvcB11yBS1dqoK9agPmb5XGwPz19U1J1Fi3ex/FIPXvb9Rrfpk0NJ4Y\nAIaXf7I3GAQH8sQSSpiEsCgGgjl8FI+CvU+Ahu2qgJgnu9lFNbXn17oVMJfV\nQk5Q\r\n=R7uk\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n\n\nButtons allow users to take actions, and make choices, with a single tap.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/button\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n```\n\n> _NOTE_: Examples here use the generic `\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n> _NOTE_: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Additional Information\n\n### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n\n> \\*_NOTE_: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n> buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n> directly within the `mdc-button` element.\n> However, the `mdc-button__label` class may become mandatory for all cases in the future, so it is recommended to\n> always include it to be future-proof.\n\n### Sass Mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass Mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass Mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color)` | Sets the container fill color to the given color for an enabled button.\n`disabled-container-fill-color($color)` | Sets the container fill color to the given color for a disabled button.\n`icon-color($color)` | Sets the icon color to the given color for an enabled button.\n`disabled-icon-color($color)` | Sets the icon color to the given color for a disabled button.\n`ink-color($color)` | Sets the ink color to the given color for an enabled button, and sets the icon color to the given color unless `icon-color` is also used.\n`disabled-ink-color($color)` | Sets the ink color to the given color for a disabled button, and sets the icon color to the given color unless `icon-color` is also used.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color)` | Sets the outline color to the given color for an enabled button.\n`disabled-outline-color($color)` | Sets the outline color to the given color for a disabled button.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.14.1/node@v10.19.0+x64 (linux)","description":"The Material Components for the web 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/density":"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/button_6.0.0-canary.a88c8e4dc.0_1584639362359_0.15973686309559576","host":"s3://npm-registry-packages"}},"6.0.0-canary.cafe18860.0":{"name":"@material/button","version":"6.0.0-canary.cafe18860.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"31e221a7677db43624b51074c4dbd46ebde386cb","tarball":"https://registry.npmjs.org/@material/button/-/button-6.0.0-canary.cafe18860.0.tgz","fileCount":17,"integrity":"sha512-RzQQWLe/GYokIJ+5qDy/deW+4qGCPom/YlTgkJpIaYYbTIPgpQLQvu4EuIbg0+mgN8sSJ48DCTWWd5sq/wznSg==","signatures":[{"sig":"MEYCIQC/DUon0aTtA/Gv0rnp5TlLP3CeGvAxUl5fxgINdx70MwIhAJ8Vhs/y0W34+WhDIwqRGPN0luzVhtdc0O0LgtYEbMFh","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":233816,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJedNj0CRA9TVsSAnZWagAAaBsQAI7+KJpxtBTQqq0Lbobx\nZ+CJ+vCqn8d7GnZPNf6+/dhl3bKT0S5FGclalG//qow/OwnS1bfDqFQHwwaL\neC68XC1+3EL4tezZzylSAntSklCEy60pyGUPg4AA7TJCg7abSMeu41w6s/XW\n3kUYSbRalXXgZC4E0i6y69Gtarue7uWpiIx9oigK+sIX3I/MB3PPLbc5A5dl\nzXJhgRRfWPmzDte+zpQCohcgPfUU4QdavOL0Sr+LYUXSA1NGiX9g6B/VMhHU\n90sk+AGdVZMrssI6UTs8oUTDq/K1a3kpTndRebEIYCSRxACviunnL0i+CsS+\nHzTSrQGYK1l4vQXmhaIIbDb+JNTqqVUX3MHOtgjHTGJ9s+/11HjNKiM14eq6\nUFdRQO3CsaIjg1Sb6v3eab1yJuGI3KThiqansO7+B+uEyAy3wywC06zPehun\nrnsEiR/9dLAj02OsJ8SC8a1cXmtY9T/IjzWL5RCye+ZpV4BxDfg1DtDsM/x5\nauKMOmSgYlEYeDBR1Wyubo4SFspCXnqdsfCt9JK1OF3GTI6nHD+TXazkCF9m\ntvoOj5444gt0nkWHa+4GOFzFEeEBno9kugt5JujNM/z2S6R3FdcahsEwOR+9\ncdFLH21gFXD2GzdQUZEzL53XpBr3MFC0h+R3xzeoCxj8J6krLN2oqLM1RcfT\niaJF\r\n=ZV99\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n\n\nButtons allow users to take actions, and make choices, with a single tap.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/button\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n```\n\n> _NOTE_: Examples here use the generic `\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n> _NOTE_: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Additional Information\n\n### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n\n> \\*_NOTE_: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n> buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n> directly within the `mdc-button` element.\n> However, the `mdc-button__label` class may become mandatory for all cases in the future, so it is recommended to\n> always include it to be future-proof.\n\n### Sass Mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass Mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass Mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color)` | Sets the container fill color to the given color for an enabled button.\n`disabled-container-fill-color($color)` | Sets the container fill color to the given color for a disabled button.\n`icon-color($color)` | Sets the icon color to the given color for an enabled button.\n`disabled-icon-color($color)` | Sets the icon color to the given color for a disabled button.\n`ink-color($color)` | Sets the ink color to the given color for an enabled button, and sets the icon color to the given color unless `icon-color` is also used.\n`disabled-ink-color($color)` | Sets the ink color to the given color for a disabled button, and sets the icon color to the given color unless `icon-color` is also used.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color)` | Sets the outline color to the given color for an enabled button.\n`disabled-outline-color($color)` | Sets the outline color to the given color for a disabled button.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","description":"The Material Components for the web 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/density":"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/button_6.0.0-canary.cafe18860.0_1584716019327_0.31832195029593535","host":"s3://npm-registry-packages"}},"6.0.0-canary.35a32aaea.0":{"name":"@material/button","version":"6.0.0-canary.35a32aaea.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"bc47f32f98516353400eca03108a9d1a812d5e90","tarball":"https://registry.npmjs.org/@material/button/-/button-6.0.0-canary.35a32aaea.0.tgz","fileCount":17,"integrity":"sha512-iPQlUT+ku4q2KWeMp+IQEp+ejVQY1dKubblLwi6yfOdhlTkPvnf983LD+Iols3OeFELzEYsPOiV8/Iv9O09ZaA==","signatures":[{"sig":"MEYCIQC/0c7s1DrRApk9vCHofn7bp+LFrKKurg0yrsZyUQfdnAIhAI6pDH0L39vIZAZk7gDssf+Pn5sqMOFlR4rLH0omluof","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":233816,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJedSCcCRA9TVsSAnZWagAASSwP/jnkJhQD8LPqNLfMbRDD\nDZGq2yeCXUhZ3XBfMxz3E3ILpKy+87+rgP8rwsTfAwSeHIrpAr7gn4UE/TOb\nLC4SgMesht9MjpQ+maEhDlqQHdUSTPX8P/17A4c9Otj/Or9uDJkQRz6bDDuB\nqfF/k6ICwzDHqrBgyGpHgm0YyrMMsfxjLnNjDw+vL9PUZzi2mwEamQPPhLJe\ndr3rN+EiUrcJLPb6qCwKalY/KGM9u5hrLCcYI2E9mhYH94Pcsj0H7a2kMxAw\nrHuFJaGD+goysLTWBcmAsbsn8y2fY9gIYeTYiJvdm1X2HONKoVMDHd7j6SeQ\nHJa0kVDO7Y1KrKyfppSaTb6bVGIsYwJq7T2nfrckHNeJnmYGqoJhj2oQC9pC\ngOmHSxtANKoGqFL9iO3Eg+pBG2HfjzVA3cbDyGEhamrvV8medvLA3ygfzIL4\n/XIYwNMBk+/OvJWe4KnToTl4Wc3jLv6h4RcRmH2S3gK9hcRaowvV9m5Brrmn\nzBqVjNMiTOhcrPxfNvHkyVBoJV9ZxHxUkOMaC2yhm+FucG9zgsjcl6SPFuLs\no1kt7q+UV4si2gYCsK4e7Fken+iW2NOjqras4HUtP/JBGadym8fbU06XO+NI\n62fhcq0AtW5vhPYWHjgSXgQlliMv73B4y3JUIK+MNYm22IwsY/2hAgqZV4Co\nDbiE\r\n=qThr\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n\n\nButtons allow users to take actions, and make choices, with a single tap.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/button\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n```\n\n> _NOTE_: Examples here use the generic `\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n> _NOTE_: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Additional Information\n\n### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n\n> \\*_NOTE_: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n> buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n> directly within the `mdc-button` element.\n> However, the `mdc-button__label` class may become mandatory for all cases in the future, so it is recommended to\n> always include it to be future-proof.\n\n### Sass Mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass Mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass Mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color)` | Sets the container fill color to the given color for an enabled button.\n`disabled-container-fill-color($color)` | Sets the container fill color to the given color for a disabled button.\n`icon-color($color)` | Sets the icon color to the given color for an enabled button.\n`disabled-icon-color($color)` | Sets the icon color to the given color for a disabled button.\n`ink-color($color)` | Sets the ink color to the given color for an enabled button, and sets the icon color to the given color unless `icon-color` is also used.\n`disabled-ink-color($color)` | Sets the ink color to the given color for a disabled button, and sets the icon color to the given color unless `icon-color` is also used.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color)` | Sets the outline color to the given color for an enabled button.\n`disabled-outline-color($color)` | Sets the outline color to the given color for a disabled button.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","description":"The Material Components for the web 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/density":"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/button_6.0.0-canary.35a32aaea.0_1584734363819_0.9251254393167725","host":"s3://npm-registry-packages"}},"6.0.0-canary.e75deb854.0":{"name":"@material/button","version":"6.0.0-canary.e75deb854.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"baaf3853ad5450d31cac2f81569b89e957d87b99","tarball":"https://registry.npmjs.org/@material/button/-/button-6.0.0-canary.e75deb854.0.tgz","fileCount":17,"integrity":"sha512-3TTIs4YojzfY4S7Zjh47JTcHabFK7GXKLB9v1o0SlDj2gJjjs2bVSIKtoJV406Em2qX+hBzl38T129T2dJ1Jqg==","signatures":[{"sig":"MEUCIQCO8Bkj3JIxfcu2o3GSsGRRqKplxlreyKb+87pYo7XMXgIgIZvZxvHLwlvyZk4BF/iod/8TFX6y3tLcDagHaoSctPo=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":233816,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJedUB9CRA9TVsSAnZWagAAlosQAIssFHbMKloa6veQuA5B\n1kIEKBdD2H5AtkG57wht54bewzrT7x3eiQ4RW9uDONaOOMLjXXZC1Ha9hJxO\nA8+E4nxSaPnakV9tVw9LPk/kKgM8aRyAooII4GLqTr4KMVW/1ecNuvn0pv7Y\nEScz9wfPRIr42ISu3kQgyKpxwfVJaC7fCJq9fkoMM0G2vbm5//vBtx+MQ14d\nk3GMHnWBefuB1Tu1H6IbZ08lO/kS/JjLO87kd70p459nbmmeb+igfAWW611v\nWfBaFIUOy0QFaJoJJiensKlMMJGBqtm8ZIrCB52TeJ1SKhqBfMh4h9QYJneC\nE0Qp6h4e50+9H/+KG2s2NLTCrONlEKKnnbbjfNB31beVBfAJM0hUwRXVx+Io\n42aQlF12Y+YCmLIyyIH8LgQYfC4sSCURs1tiC58YQvPn7urbDkjwE7PwsPWS\neOr3utwQg00HGpq0TmBz5Gn45rsXB4pZ9TNmDJMtpimjEX+Lc5IkOq16N/Si\nClh5R6cV5ENUQg4IfFCGCP3SVTqRl6p5aO1Fn3TPDOb8II84dIZtVKWV4Gdx\nWi0IeQBBQPg45Bs86I5IvJ6agToGvMk1w+i4tYjDywFMQJ1O4RG0V9ghXYm/\nIY/evbLLP0kzyVapo+0UTSskDukG6Hc9fvdyyiYju0R/WA7r2fthIfXHOZg1\nOIOK\r\n=oj8f\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n\n\nButtons allow users to take actions, and make choices, with a single tap.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/button\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n```\n\n> _NOTE_: Examples here use the generic `\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n> _NOTE_: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Additional Information\n\n### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n\n> \\*_NOTE_: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n> buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n> directly within the `mdc-button` element.\n> However, the `mdc-button__label` class may become mandatory for all cases in the future, so it is recommended to\n> always include it to be future-proof.\n\n### Sass Mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass Mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass Mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color)` | Sets the container fill color to the given color for an enabled button.\n`disabled-container-fill-color($color)` | Sets the container fill color to the given color for a disabled button.\n`icon-color($color)` | Sets the icon color to the given color for an enabled button.\n`disabled-icon-color($color)` | Sets the icon color to the given color for a disabled button.\n`ink-color($color)` | Sets the ink color to the given color for an enabled button, and sets the icon color to the given color unless `icon-color` is also used.\n`disabled-ink-color($color)` | Sets the ink color to the given color for a disabled button, and sets the icon color to the given color unless `icon-color` is also used.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color)` | Sets the outline color to the given color for an enabled button.\n`disabled-outline-color($color)` | Sets the outline color to the given color for a disabled button.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","description":"The Material Components for the web 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/density":"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/button_6.0.0-canary.e75deb854.0_1584742525072_0.1435131471899873","host":"s3://npm-registry-packages"}},"6.0.0-canary.2cc6966f6.0":{"name":"@material/button","version":"6.0.0-canary.2cc6966f6.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"d88b230ca1202889dbcd262d020ea19af82f4fc4","tarball":"https://registry.npmjs.org/@material/button/-/button-6.0.0-canary.2cc6966f6.0.tgz","fileCount":17,"integrity":"sha512-Lh1cZgeeJAaPox5eVBd8B9VBycbpuBAU6Dg1HYeXzYIH+AqNzKbkpTkp6J96kpjI7TJYn2BXXp91rMrj2VU29g==","signatures":[{"sig":"MEUCIQDKelsIdvJwNYqu2OZ2C1lZrsC+yl+thCjcJMOUx1ZirAIgXZAgAkEVciz4M7E/KOIw9///EhrzxQurw3hBcSGd3DI=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":233816,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeelTcCRA9TVsSAnZWagAAOFMP/i+ZGDb6bQumSK+lrWue\nRT8ZsILqklf0jTYe2Hlj3gEH+sz0NWuc/tj0olCJFEvcmQH8CK6HK8UrqcBF\nRu1uk0XTyTaqs8uUJRPJp7hMRbjxurV4KxSbX+VXRyHTe3AJ31JMBe/dfE3b\n5iGtoFTsuYaPgttasR1JwtQnuuEp9kU2KrCqlNrMRA9jqBZfl/PinPEez6hO\nYbXv0hmr6sfYjBlzftEXoHOzKtKaZ0M7mR1MIRzDcHvvIHvXx6BP5gELrz1/\nlqR1FrDINNk3RipRnJSU+8u+N8dcbJxlASoovy3u3FHhFYL3tScwPztQ5j5h\ntUYW0HBd4La8nwuA01m8rTX0DDEt5L3dhy+kb+tEYg3jrBhzBZMu4cKq1g0e\nC50W4HvW//iHR0LIU/8BN3s0KrSUzClYaEq7HR8jze/GmcMjGKvzygEA5d1z\nR9JlqI3uYlcC9eCpUbpRoEQyxhd/PawG8gYyICTO8Zd5pI+GykROdNtDwGF7\ncqRqMNypCWFlx46GIXc8LKxASXKzzGlhb5hrjQuC4YfrG5Vh+wXQjZ81viW8\nqpM8tzw0y9IadlTzV3oxbUEOxivePEJRnZSRnRmq5VXPleQViQ0j6OJOyBeI\nbKhwl0mZBfoOMm12ITsB6sxb4vYYXyuDz5c2XEOnSvrbVd+V631VILVWbu7M\nRQaa\r\n=gMH5\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n\n\nButtons allow users to take actions, and make choices, with a single tap.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/button\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n```\n\n> _NOTE_: Examples here use the generic `\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n> _NOTE_: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Additional Information\n\n### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n\n> \\*_NOTE_: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n> buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n> directly within the `mdc-button` element.\n> However, the `mdc-button__label` class may become mandatory for all cases in the future, so it is recommended to\n> always include it to be future-proof.\n\n### Sass Mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass Mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass Mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color)` | Sets the container fill color to the given color for an enabled button.\n`disabled-container-fill-color($color)` | Sets the container fill color to the given color for a disabled button.\n`icon-color($color)` | Sets the icon color to the given color for an enabled button.\n`disabled-icon-color($color)` | Sets the icon color to the given color for a disabled button.\n`ink-color($color)` | Sets the ink color to the given color for an enabled button, and sets the icon color to the given color unless `icon-color` is also used.\n`disabled-ink-color($color)` | Sets the ink color to the given color for a disabled button, and sets the icon color to the given color unless `icon-color` is also used.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color)` | Sets the outline color to the given color for an enabled button.\n`disabled-outline-color($color)` | Sets the outline color to the given color for a disabled button.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","description":"The Material Components for the web 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/density":"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/button_6.0.0-canary.2cc6966f6.0_1585075419849_0.3325797087093034","host":"s3://npm-registry-packages"}},"6.0.0-canary.8707953b6.0":{"name":"@material/button","version":"6.0.0-canary.8707953b6.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"0f700da018f313b7e2d41968ede232ede7f2ef05","tarball":"https://registry.npmjs.org/@material/button/-/button-6.0.0-canary.8707953b6.0.tgz","fileCount":17,"integrity":"sha512-3kdbwhp1v49sLhbjCfP+8XqjQSAjFZtqa8lD8pbgwuUm6shQxSWtGbdzx4uUIbZG+ZkdmsxSZPK78SmPxJxjNA==","signatures":[{"sig":"MEUCIE3WGhmKMNtQccAmyhBr14BXCbooNo/uwL9IqUy9ONPYAiEAj4l5fCt1KmWCdpNrKgcyASHfK34nLNEpFtTjueC4cXo=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":233816,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeelW1CRA9TVsSAnZWagAAGdwP/A+QcyLOqDvjd1FbWHb2\nebBmBx3sfNeYAmAUvU9oKFewg67+74PWZOVoCdLttasoKk8cw+bEDJa3NTiK\n4Kr+qa2xPcRg5e/CEFoG0jkjUF/5OJc+4FiC/OKcRXIqTA3tn7g5rf4KUbmn\n9s+gqLjWD85iSjyy2vYg701M6ZYV50razheEJRfxvaj2lrn1BucCGDo1VIo4\nN4VAF2l6McTtmushZnbSMbllmmwnR4mWEAhop+mpWKR4xTfcYZkmrh3yzLvq\n1cXSa++mXBeY+JW8DdtZMOLcsN6PZHu8qJ8aPdFpx0ipKUqj+MN9+LEVmp86\nvljmgsDfSo589pPjpOjduMEwVWBINKpaziST3iyqI2BQ3YtJvl2AXWhMsIYg\nTfg2wSShWu2wouzt8QBZGFFarwirMGpzH/KjOHxe9DvSL668ZP4RkSxhzv2E\npVSbJ+kgEkCFkqk4qe26sxfjtn9n8Ro/PWIxRkf8ZTdvtIYW5EqDWVYryxEj\ny5xTYZFospZ1cIgOgSiXa+ehEwOdWYoO2eTNQoBulB+M6Q3kskm70ftJ1Jnw\nbZx5HwsJx/LLUaPZ88g4jm+SdQHVQYrGlAMkK7Su3VDGKeS1cqlFHmDYNh/7\nbCSwqkmHsQ6yrO8gqn8cl/uXHJvAGBrm3jCXa5qgnELX7byLtschl5U4Vlbx\n6ytP\r\n=FwA7\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n\n\nButtons allow users to take actions, and make choices, with a single tap.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/button\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n```\n\n> _NOTE_: Examples here use the generic `\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n> _NOTE_: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Additional Information\n\n### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n\n> \\*_NOTE_: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n> buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n> directly within the `mdc-button` element.\n> However, the `mdc-button__label` class may become mandatory for all cases in the future, so it is recommended to\n> always include it to be future-proof.\n\n### Sass Mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass Mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass Mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color)` | Sets the container fill color to the given color for an enabled button.\n`disabled-container-fill-color($color)` | Sets the container fill color to the given color for a disabled button.\n`icon-color($color)` | Sets the icon color to the given color for an enabled button.\n`disabled-icon-color($color)` | Sets the icon color to the given color for a disabled button.\n`ink-color($color)` | Sets the ink color to the given color for an enabled button, and sets the icon color to the given color unless `icon-color` is also used.\n`disabled-ink-color($color)` | Sets the ink color to the given color for a disabled button, and sets the icon color to the given color unless `icon-color` is also used.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color)` | Sets the outline color to the given color for an enabled button.\n`disabled-outline-color($color)` | Sets the outline color to the given color for a disabled button.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","description":"The Material Components for the web 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/density":"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/button_6.0.0-canary.8707953b6.0_1585075636651_0.34038579443888906","host":"s3://npm-registry-packages"}},"6.0.0-canary.10af6cf39.0":{"name":"@material/button","version":"6.0.0-canary.10af6cf39.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"415840c27746034e7690ddf1f02a2fb34f4a1b50","tarball":"https://registry.npmjs.org/@material/button/-/button-6.0.0-canary.10af6cf39.0.tgz","fileCount":17,"integrity":"sha512-F3xqADBsLoi0ke1Dzsv8BBOFJCj72DXJo1C+wS+7nAyIg3bYmhzYY15F40nNnfeREDPj+chdL7b+Pgj/n+ZIAQ==","signatures":[{"sig":"MEUCIQCsUiX6bPAAenlJ5A2jXcPAwCUCqU6OBJs7Wii1SreOXAIgeUtKBONvRtPCfbGI4TyBFl/0DtkSJIb/NIB6GVeauaQ=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":233816,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJee6B6CRA9TVsSAnZWagAAuvMP/2TY+y+s+1WTb8g+vD9b\nilFXho++mFrkjs4qjA46uPfveJw0mQ8mKbjOb6WwjgXMIi6uRIMUZ8pvZClD\navP1iKGYJ8/2kHQ17It+JdvIdbHD5oXU4izsZu0EM8Xg1mnCTpNa8jqHzWAf\nrwBlNgB2F04NEbpBE6wPrPsTimFps1dvsQgmUAn4PN4/4lsEPMXmvzMXYVuE\n0Ai3WooWtL/oiOFNhjfi+looNTtViaKb0Y4YZUh/B8Il2kCo5MQhSLkPY860\nVoP1y3xy/oqy0F17Li0/XiuLybKkLfaC4aZHhiVW2SYY1H+HkP8Hf5/YglXs\n4Q/WHfMfN7s37QL6mL8tgG7V7hvLmsGKcq/spSRC/D06ngjQkpBRnDNtGLsP\n6tyENJQ8MJF/GX90iTORKX4clI2TOhHQ9GOJoguaTF8459jxcqpwm/5Dgcyr\nRZEdejBqC1ox9x6CGP/skBKQphFnmQLc8WZ6B24K687XSqFxoYbTBVf33IyW\ncJCVlUc02u583iagcCmzwDEQtJuAbZnB6shNGRLJMVGhK2J4vty4fnJExPYw\nE+eDUKBGhePu1to/YC97QKVSn0rw2VoUQ11BkdSVSZK9vhkGbgMRgPE2WYts\n8telVvejmoUc2cDUndaRiuIAIGg92WBCBMRxwkN3636H1ewD+qGTiWsmXhoY\ntlNZ\r\n=PsTh\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n\n\nButtons allow users to take actions, and make choices, with a single tap.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/button\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n```\n\n> _NOTE_: Examples here use the generic `\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n> _NOTE_: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Additional Information\n\n### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n\n> \\*_NOTE_: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n> buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n> directly within the `mdc-button` element.\n> However, the `mdc-button__label` class may become mandatory for all cases in the future, so it is recommended to\n> always include it to be future-proof.\n\n### Sass Mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass Mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass Mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color)` | Sets the container fill color to the given color for an enabled button.\n`disabled-container-fill-color($color)` | Sets the container fill color to the given color for a disabled button.\n`icon-color($color)` | Sets the icon color to the given color for an enabled button.\n`disabled-icon-color($color)` | Sets the icon color to the given color for a disabled button.\n`ink-color($color)` | Sets the ink color to the given color for an enabled button, and sets the icon color to the given color unless `icon-color` is also used.\n`disabled-ink-color($color)` | Sets the ink color to the given color for a disabled button, and sets the icon color to the given color unless `icon-color` is also used.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color)` | Sets the outline color to the given color for an enabled button.\n`disabled-outline-color($color)` | Sets the outline color to the given color for a disabled button.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","description":"The Material Components for the web 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/density":"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/button_6.0.0-canary.10af6cf39.0_1585160313611_0.7865695442611083","host":"s3://npm-registry-packages"}},"6.0.0-canary.7d8f9c8d7.0":{"name":"@material/button","version":"6.0.0-canary.7d8f9c8d7.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"323ba4b8769246e4df921a6b8244c4ee6a811601","tarball":"https://registry.npmjs.org/@material/button/-/button-6.0.0-canary.7d8f9c8d7.0.tgz","fileCount":17,"integrity":"sha512-u3P/oo3zVgTo2z8M97K3LU72/Eb+N5zCU2IEIWuPUvYTG1eVBL3z8wx0KgHo6yK+TGqg6qX/NarP+IURplJ5QA==","signatures":[{"sig":"MEQCICWgyZhO6sXeUwXCHYxEHcYsy0TU3y4icHapy0FRpjG5AiAPhuBCa55AzqZOcOI2GHnVjbnUWUAeeHOGGwuneJF71g==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":233832,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJefkBTCRA9TVsSAnZWagAAz00QAJ7+pDyDuKeT3eUtog87\nuegBSW0hHq/wxNmBB6fpbs07Cmj417zvgFslZc5z0jsNB++GGM03AaIPvh3L\nnXu+j5CtnhphAufnwBebu4rK80F2+CEON9Z/2St9vEpq5vuIoRnDYTTKdtVI\nPUSvfbJPhM1NSMQITi9bRi/H4CCPuHl/lC8Gt7DNwut5xnU89hIu98cRIKxb\nFuteYAXaKdpboB/gKN6bNgSlBPaIWkQ+6GUbswnpUAYP9ch8g/V8XiWyg6qT\ndY1yR+/xUngp/vqVid+GNYjFPyRrL64f5oA5gWeotjl12GpqnYGBvFAIa9xN\nRIf2rPjgwVqcwmj268Pq4jFVsYHI0BYlbBC8fHiO09mIOuGh7Kyd40gZEcjx\nMYztHcKwGntPX8chg+byIIsgK3eAW+iQnxpwVA7dIkgLM5MCnn/FeZgl+nMP\nBfkOtOVbvTAXNP5sMGRnuVopeXZiqVgfWndOvUbJUQ+m2oWU6XUkqdsv3cSC\nQu+BLxmkClV+MPki8uhl6ULK+2AqUMsyJzG+33YKpcHdVInhPqhdn+Xn7ohn\nua+0utV+2FOVfSq91520rsHWpcmriQzETPfCwwO9jEaMv9ntinpEXBdB7uUL\nIFFS6NVWXyPim5DSOK++oeRvf0wIQ27TR8lgr7fjKqw9ACMJLu0WcW5gZStR\nKfXG\r\n=UhTZ\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n\n\nButtons allow users to take actions, and make choices, with a single tap.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/button\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n```\n\n> _NOTE_: Examples here use the generic `\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n> _NOTE_: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Additional Information\n\n### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n\n> \\*_NOTE_: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n> buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n> directly within the `mdc-button` element.\n> However, the `mdc-button__label` class may become mandatory for all cases in the future, so it is recommended to\n> always include it to be future-proof.\n\n### Sass Mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass Mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass Mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color)` | Sets the container fill color to the given color for an enabled button.\n`disabled-container-fill-color($color)` | Sets the container fill color to the given color for a disabled button.\n`icon-color($color)` | Sets the icon color to the given color for an enabled button.\n`disabled-icon-color($color)` | Sets the icon color to the given color for a disabled button.\n`ink-color($color)` | Sets the ink color to the given color for an enabled button, and sets the icon color to the given color unless `icon-color` is also used.\n`disabled-ink-color($color)` | Sets the ink color to the given color for a disabled button, and sets the icon color to the given color unless `icon-color` is also used.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color)` | Sets the outline color to the given color for an enabled button.\n`disabled-outline-color($color)` | Sets the outline color to the given color for a disabled button.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","description":"The Material Components for the web 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/density":"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/button_6.0.0-canary.7d8f9c8d7.0_1585332306594_0.8658899641197926","host":"s3://npm-registry-packages"}},"6.0.0-canary.d6315efe2.0":{"name":"@material/button","version":"6.0.0-canary.d6315efe2.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"8f50619ba2fee53d833896b17a1115c93c68b747","tarball":"https://registry.npmjs.org/@material/button/-/button-6.0.0-canary.d6315efe2.0.tgz","fileCount":17,"integrity":"sha512-PNh/32i1+YVKMOtXbvGpHzhji/MTKhEhyBzvJzmwrUh8gtx1lriO+rSXqJhGbPvchMEqql7J/vRjhQjQj7jNiw==","signatures":[{"sig":"MEYCIQC6nhgCyeinxOc2dEqU8HWy3bLgP0o6sl5YlXYpZXELlgIhANLEASo2q+UxVE+wuCpCXd6dEqhFu5ZGhjtofnwr5jJW","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":233832,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeflp1CRA9TVsSAnZWagAAsmoQAIORRvITiswBongvEbEe\nUwlCw2SUERmIeZUAm3eQigFTGqIQ8EGLgEMuccYzLtTlMKvEKxVnR9nac3AF\nhoy0MpZVx5KOMxRtv0PU6HguxpWxIbba2dUZQ8hB2zWyoMjZbsXJhJEP9iwW\nVYOJixO+U49uoONiQKkoJhGaF53gtNNWQdPjg7lRIGcZhl9xeXq00THVX5+l\nZMIaAAXaUK4P12HU2nD0TxkBltOsJS5GKZl4f/DW1yMF1UE/4iUtEOJBfaZx\n3aJLvqryUs87UfYc3AF6u5nesgNu1w2QyfNb1cWfkLrtQsx4UX2DBtqGkxCr\nwnGRqKnWko2cRmtmuZnrWRuzgpJwSFFM795VqItQ0tLFJWx5AwyMrC6oHR+u\n+tQSpMFxFBB7BWD78l74otef6/9Vxlqh/PcWwH6FrifzFbyedvcdXCkXigKI\nlDgE1zn+/hVi5ili4Kq8F3j4rd8XbgfiWVAF2y92QlwYRsBLI5LE6f9N/kXT\nYmaoserW7/MSgxmypOB1Sb/woxUAY2qa0jwwGR8yjW/PcL7IvkYbtiV2hpxG\npCDeh1SlvrLPetg1KFwK9+o0iWdXAcpB6UpDPrLEFRCZxH++E4LzFY+ve6cR\nw0WPgxPx5jEVsCcDnFMiZhHtCq/+QGaHnifnlOQ+6lThXrwgtkXlh7o8on7/\njlea\r\n=JvbT\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n\n\nButtons allow users to take actions, and make choices, with a single tap.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/button\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n```\n\n> _NOTE_: Examples here use the generic `\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n> _NOTE_: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Additional Information\n\n### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n\n> \\*_NOTE_: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n> buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n> directly within the `mdc-button` element.\n> However, the `mdc-button__label` class may become mandatory for all cases in the future, so it is recommended to\n> always include it to be future-proof.\n\n### Sass Mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass Mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass Mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color)` | Sets the container fill color to the given color for an enabled button.\n`disabled-container-fill-color($color)` | Sets the container fill color to the given color for a disabled button.\n`icon-color($color)` | Sets the icon color to the given color for an enabled button.\n`disabled-icon-color($color)` | Sets the icon color to the given color for a disabled button.\n`ink-color($color)` | Sets the ink color to the given color for an enabled button, and sets the icon color to the given color unless `icon-color` is also used.\n`disabled-ink-color($color)` | Sets the ink color to the given color for a disabled button, and sets the icon color to the given color unless `icon-color` is also used.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color)` | Sets the outline color to the given color for an enabled button.\n`disabled-outline-color($color)` | Sets the outline color to the given color for a disabled button.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","description":"The Material Components for the web 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/density":"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/button_6.0.0-canary.d6315efe2.0_1585338997335_0.5121784174147785","host":"s3://npm-registry-packages"}},"6.0.0-canary.a3016368d.0":{"name":"@material/button","version":"6.0.0-canary.a3016368d.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"75dd9702016fc32cb852eb14a0f7b16deabf5a85","tarball":"https://registry.npmjs.org/@material/button/-/button-6.0.0-canary.a3016368d.0.tgz","fileCount":17,"integrity":"sha512-fY/1J3IuCUGKnPEx32eEiM9dhu/6pocv/moTNGatNcrxuQsHgvJzeHtbphJbncc0ZfawUxqzhJ+wb4rmqk6zzA==","signatures":[{"sig":"MEUCIAkB9i+1/dPdv78qqvYY7C/ZpM73xZv4rInbTJ3/Y6IvAiEAqUyJ74T0VO6msbAl9HEcNTK5j+KnJ+fRBmAUndOLTok=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":233832,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJefm3xCRA9TVsSAnZWagAAmakP/AgvbVIdp1zR6NyKej80\ncuHaCeVw1224RA8jlGO/txbN+3sPHULABQbza65Uk4BLkf0WfMUlcqxSqZzm\nMmQB70zVzfceZSHpS8D7WPY00SF0/MfAx+yBdmFro/vCyRRQqXn1iePZvPS8\nNb1Slj9JsdLrgBEiu3bVDQvcEOKEr3p678bNAstcT4Q/q9ARWZYT5wcmKPtN\nQDT5P09I2KgjISjqZr2H+Fh939nZnn3XquqHWkoiw6RcZDKRWEwIRwXxA9j/\nXoSOHQ2Qzx8d1cAiUH1sKysVbXKhDZoGMrzZLxslL/qj5o/w2Y2w87Xc2fkD\nvcBNSiiJ91Mi+mgKIKKlP3FGJRdMSGl5l2lyDpbIYNeiMukM866kTUkBnnjU\n1+4W/7sXkVs2eY81frZZBsKTXWrxk/Hjhpc1wrjE8s1KRfwh1RMTGsyjyT/4\nu9E/LvrNmFI6EMUw8veF/HLRCFwCP1Htd97C3YIWI0PuzS0olo/OzOg5HRKY\noUJKzIhYc6GGWMS6ucVnCsa++QbTiowqWXx2no1qZliqEAT/pkz8PDjeZLfg\ngbUCyZWrmsdTfoceO9PXRrf6zSNnsLNf5oA9wuPEq2kfhWXPrPcLUETOyWX7\nxiXE3eCCIy49L1XBPtyIX4kMkzn5bXNPwPshBhfO0caMy1vMJH8G6tQZgXW0\nzBJ8\r\n=OY5a\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n\n\nButtons allow users to take actions, and make choices, with a single tap.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/button\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n```\n\n> _NOTE_: Examples here use the generic `\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n> _NOTE_: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Additional Information\n\n### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n\n> \\*_NOTE_: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n> buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n> directly within the `mdc-button` element.\n> However, the `mdc-button__label` class may become mandatory for all cases in the future, so it is recommended to\n> always include it to be future-proof.\n\n### Sass Mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass Mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass Mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color)` | Sets the container fill color to the given color for an enabled button.\n`disabled-container-fill-color($color)` | Sets the container fill color to the given color for a disabled button.\n`icon-color($color)` | Sets the icon color to the given color for an enabled button.\n`disabled-icon-color($color)` | Sets the icon color to the given color for a disabled button.\n`ink-color($color)` | Sets the ink color to the given color for an enabled button, and sets the icon color to the given color unless `icon-color` is also used.\n`disabled-ink-color($color)` | Sets the ink color to the given color for a disabled button, and sets the icon color to the given color unless `icon-color` is also used.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color)` | Sets the outline color to the given color for an enabled button.\n`disabled-outline-color($color)` | Sets the outline color to the given color for a disabled button.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","description":"The Material Components for the web 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/density":"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/button_6.0.0-canary.a3016368d.0_1585343985089_0.6879950329054483","host":"s3://npm-registry-packages"}},"6.0.0-canary.4b45b6620.0":{"name":"@material/button","version":"6.0.0-canary.4b45b6620.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"f24dc53e8fd48d87f856dcb09ac0a0e41f50406d","tarball":"https://registry.npmjs.org/@material/button/-/button-6.0.0-canary.4b45b6620.0.tgz","fileCount":17,"integrity":"sha512-DTyvUb94aYtzpXgVdxnfsBR/4AGlmhk/Itj8VqHDyIsMnVWE9/SFi5CA9Xn8UyQzrVfUUTHawP0dRqTG22lCYg==","signatures":[{"sig":"MEYCIQDuM0+U8ncW1iFylRsjQoAG5PzSh86WjG4+/aOAHjfK0gIhAMDXOi6KFZ87g6202sxBDULY0+peqcb1hE2I5pTb6SIN","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":233832,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeg2gwCRA9TVsSAnZWagAA38AP/2ZuBObFIbR2Xq7DH4zl\nm5zhvjZdsSQBe+Ugjjncnw2Osviv0JaWW6jXWsbfN68zO6+zSb3GVqcBoymz\n9OpGgrlXVaZAvdY0SmMNXYTRI34109obQeQrmKr+W6BysV9b4n3Ojm7X5fEB\nc79aq+rOXud323ZHSi85mXG/AfRsEx/W0xB+M5Ae/rg2/7GzMQNMO75QiJ1M\nqwbNWO1+Qd7+m0A0HrjSAEV1GT01wYQUrKCWkaoZumOHk9obwE4pYgz/fWpi\n93Ww6SEsY1b8K1Z7IYjqduq2KTENWJa66mU28g/PnzV8lAUUBerVIXqqbbRZ\n7zOpGDgcQCxpW1kFd9gYRvmIEq+CgQXMl3E69S41IKaK76IHEB0hP6dd6c1v\nSqPbWj4AvSHB/p60My/hfBJbjBrNnWrXqbmJLTYnCzEflrBCUGUKjgfgMBH1\n7HcCcfMnKrRZnFVH4iHVIP/p4TU/v4pHbX/PKihPpXJRNH1d7bkxE9j/waUn\nRys0o5woWPgunWlI1IlKLluUC8HGwfK0qPvwSO+bAtC2SpKwPHu0sd1F05fJ\ncTkBeODRZR0kEGhTxtaXljaxR2Ik9wvnWXdhlS6dXz3FDcYl5F2ypNLTLhIq\nIYG8LPjVg0SBJ8/FKUAd60iMxbBR6izJBCtHcUy8a7iRJ0yXZ9rZsoPmTkfr\n2Z9m\r\n=Qqoy\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n\n\nButtons allow users to take actions, and make choices, with a single tap.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/button\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n```\n\n> _NOTE_: Examples here use the generic `\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n> _NOTE_: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Additional Information\n\n### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n\n> \\*_NOTE_: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n> buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n> directly within the `mdc-button` element.\n> However, the `mdc-button__label` class may become mandatory for all cases in the future, so it is recommended to\n> always include it to be future-proof.\n\n### Sass Mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass Mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass Mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color)` | Sets the container fill color to the given color for an enabled button.\n`disabled-container-fill-color($color)` | Sets the container fill color to the given color for a disabled button.\n`icon-color($color)` | Sets the icon color to the given color for an enabled button.\n`disabled-icon-color($color)` | Sets the icon color to the given color for a disabled button.\n`ink-color($color)` | Sets the ink color to the given color for an enabled button, and sets the icon color to the given color unless `icon-color` is also used.\n`disabled-ink-color($color)` | Sets the ink color to the given color for a disabled button, and sets the icon color to the given color unless `icon-color` is also used.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color)` | Sets the outline color to the given color for an enabled button.\n`disabled-outline-color($color)` | Sets the outline color to the given color for a disabled button.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","description":"The Material Components for the web 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/density":"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/button_6.0.0-canary.4b45b6620.0_1585670191584_0.21210674141683095","host":"s3://npm-registry-packages"}},"6.0.0-canary.e84b9c8.0":{"name":"@material/button","version":"6.0.0-canary.e84b9c8.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"a48fdcf496d52755496d56e09395fab250e8470e","tarball":"https://registry.npmjs.org/@material/button/-/button-6.0.0-canary.e84b9c8.0.tgz","fileCount":26,"integrity":"sha512-zZXgISIj63AkZb9p75SB5knJPB+Y/NVLbGmifSTz4cRJ0XImrDAAVnXjrMQAmprOko5B67Wbkr2Ggy/FVjHJ+Q==","signatures":[{"sig":"MEUCIQCsJcLkRg1Zzb9w6BMKmqdEvA1cAvMs8bWTIf0tDTY5FgIgS2LwJXgfx2N+Z0iMEuEvp1/voDib1s5JTrACnwHKmmQ=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":368925,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJehMenCRA9TVsSAnZWagAAULcQAJDvZ5zeIpQ+eso6oOiE\nW+q0ITp8uQk2cK4dJHgE9Gm+0fYvH6A8ZIswQo3UHjCNeSqh3brQve89XcEf\nCnjgpFbD7sjKGVVIzmEhgrgMxQLbhTYj3cuKE05cuNSmnjcxbhfnb5zbUtgE\ns6j9ZRCxkMMoUIdBw6V9E+CG5/KWoQiaUtnxyiVEIfqTCNVNCvD7wQtaLtsz\np/4I+joipc5OqxCct8NI91QWTR11hY9uUTVgR+bnWh3rbOkQysQWgISN9kZz\nsYCOPNzWD7Nss6mh5FaJTHF8nfZs+TXSitJYX3Avjs0El3XgkTNjymhwwXj9\nbeYBGZpMYxL8PIRua2X0WP52jEjMVb7Phiugj5u1BW4XEACDncNzk52CiSML\no+/dfCVKK5IuPhdCRnT38JpjbD7PihV3MIAzoQM1XFiD00Rr6tU9yISZRKUE\nbsNENx3afe331UEvIoAwhKFVjxjg+FcdFTb2v6PMuCx8qYMBzV1ImNN9kY6k\nCYWk9IUubPfsZXMSuHkL3dHWoVCyYNxRT2KYDqKnG1AVE9FsTK4amOmtmhDT\n3TvNASvg/IGFvRSVZtUJoi6RET0VCLKhB/nLS1/sYiOgCLelkMJm6cKbuGta\nNYLcQFMdfk+3pcJgkEbatyt2TjfWSroaSBdxVHcSeuZ8vPsQj/qEwHIpy+eO\nNSWz\r\n=L6Bf\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n#### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note**: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n> _NOTE_: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n\n **_NOTE_: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommended to\n always include it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color)` | Sets the container fill color to the given color for an enabled button.\n`disabled-container-fill-color($color)` | Sets the container fill color to the given color for a disabled button.\n`icon-color($color)` | Sets the icon color to the given color for an enabled button.\n`disabled-icon-color($color)` | Sets the icon color to the given color for a disabled button.\n`ink-color($color)` | Sets the ink color to the given color for an enabled button, and sets the icon color to the given color unless `icon-color` is also used.\n`disabled-ink-color($color)` | Sets the ink color to the given color for a disabled button, and sets the icon color to the given color unless `icon-color` is also used.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color)` | Sets the outline color to the given color for an enabled button.\n`disabled-outline-color($color)` | Sets the outline color to the given color for a disabled button.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","description":"The Material Components for the web 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/density":"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/button_6.0.0-canary.e84b9c8.0_1585760167139_0.13158174766278719","host":"s3://npm-registry-packages"}},"6.0.0-canary.e33c49e.0":{"name":"@material/button","version":"6.0.0-canary.e33c49e.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"1cd8838e6ba664ecf6c3020cd6863ddc68292362","tarball":"https://registry.npmjs.org/@material/button/-/button-6.0.0-canary.e33c49e.0.tgz","fileCount":26,"integrity":"sha512-cQcc9OwCKcWai300TbAOOIYwL8thNksbaRuMYBnkd/YL/CDPhQexULQg1bVbE+0Qo389CFotdcikopLvN1geLQ==","signatures":[{"sig":"MEYCIQDpc/hJH6XZlCOEUo4I71UT0zUZJST69u8O5fbRhwYQwAIhAOdl1QTYjhdwGn0o6NYhS4SPxHJaB2laSFE3PRO8+041","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":368864,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJehS1GCRA9TVsSAnZWagAAL9kP/i1hV/zRkaAN/zurUPh5\n7oaInfF7C2H+QJuS7jVHhnIs0NIZ5W0JZ51SrFgo8WvPSEaJJHmwQheXjEO/\nyT2vIKq31njtIsU9P1t7g8AgiGk1RQezC2Y93Dbu/JK9L+/KetrteyngEcPh\nTsOlMMLozx13CmFRZ2Gtm/ei1ml+C8k0kbkLOtE1NW5ABF6Lw7QIQD14iUvL\nQW1kiYs4etpxVo/8FDCrl6JMPFTPhlfKdbCpOmYNTPaYAn+58LFat/9ljSQE\nYKPiCoGf/mEyJ3+RyATQDSM4/PqsgdoVwxOvHTxzOwlbqRsvw8MKNC4F7M0g\n4sjeuZ8O0fquWltJ2qb4pCzVvnatHuFjN6DCdK2YL715W6GDicvx2zy9bWy7\n61m/fEzGdum5iGzFt/OFXmYIrdvIY0WmsZuW0csWm9BEA9nirngpjI4k45pz\nK7r1c6404KmomHmJcJPk0bwMRavst1+6wWm+FoDd9aiAi1lp0r1Spma2DFRR\nF8e2EdsivqvadD8ZEcurMhLU6XM1DDGpZtmoyBC2OWR/a61FiOiNizibkRD6\nuEQWynCMlRG/xq4Xz79T/cYW16BRivxCnTSxNBJ9UYFDxQA46CN1KlM8sPyL\nDRlAuO3PiRnzCp8xp/PfaumP5v0peXV9GqPumdthvYn8rvBY5Ei691LpjMS6\n2oy1\r\n=JlHl\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n#### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note**: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n> _NOTE_: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n\n **_NOTE_: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommended to\n always include it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color)` | Sets the container fill color to the given color for an enabled button.\n`disabled-container-fill-color($color)` | Sets the container fill color to the given color for a disabled button.\n`icon-color($color)` | Sets the icon color to the given color for an enabled button.\n`disabled-icon-color($color)` | Sets the icon color to the given color for a disabled button.\n`ink-color($color)` | Sets the ink color to the given color for an enabled button, and sets the icon color to the given color unless `icon-color` is also used.\n`disabled-ink-color($color)` | Sets the ink color to the given color for a disabled button, and sets the icon color to the given color unless `icon-color` is also used.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color)` | Sets the outline color to the given color for an enabled button.\n`disabled-outline-color($color)` | Sets the outline color to the given color for a disabled button.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","description":"The Material Components for the web 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/density":"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/button_6.0.0-canary.e33c49e.0_1585786182200_0.7623915266124992","host":"s3://npm-registry-packages"}},"6.0.0-canary.f1f8e60.0":{"name":"@material/button","version":"6.0.0-canary.f1f8e60.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"bc27394c239467025206730a99c2962871f5a09e","tarball":"https://registry.npmjs.org/@material/button/-/button-6.0.0-canary.f1f8e60.0.tgz","fileCount":26,"integrity":"sha512-WpzcJyEvDEoHrkomEW8j9W2ZDgS3Od8url8eDkYxa/JtgXtvkQWZSKn02NeoASiTuMN+OWmkT0I1zeaJQLgsUQ==","signatures":[{"sig":"MEUCIBNsFzy5the+t9OaPPvJjUkSr1WMhWsf1ohzIH6ImL5wAiEAkIjwot3by7JB9xG9jkSlz8iEiuK35lM9skbRIgQzoHI=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":368703,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJehjl+CRA9TVsSAnZWagAAbcwQAIWi1mxSecyk6rWdowjc\n9jRaH9GnoMjx0bKKXWMvYfnw0E40bwiOK/V1sYa6mLXKtAWbLhOvWgTbduma\nHmBchGYvFagey+xL2joEte5iZCeT1Icd8WYEDng7rJCGKJ/yA1Vhij9CxMQZ\nlsjSdDOsDbUrm2Jdc/oao/Kcmzb2JpHc41vOpLHtSqcTFYrvf0EcH1usMh5C\noEh6O3yCGb0SUVFM+3eekNsLPx3o4VZVxJ+mZJPaFOObsYi0NkQt6y7tJzHH\n3d45vcsDD0x+M31CSy3otGAEQMqOOiL4OKUcDALNwqxbpVgflfNAIXNqUJ7W\nOlR86ESgfzCUbI3DTEX2+qmWmR4KUae9eOthPQeOYdACK3rpO+seug0/r6bd\nauAaHRJH5+aHb/heE8d472OoZuwU210PkCSvM6Ei/KJAldiBmnh0IW3rzcwN\nP+7XdF177xF4DIaZNDSU3RugQQlMITlbIehrJ0DOmR65yvjVsO4KQFfmeIQJ\nqY9xMwLaMm2Lw/2rEFiIbx4HS9ADn2JzccusFJom91Gmomrosv8ntWyIo+ON\nRz8zHQ1E72BrwHaFexGacavdjvToww4ClVPpezsfgmCxWroa2/Epbx/EeAJC\nKURn60TNwfzhBBLl+RB78XWtiAm705r9Xvrh4gMTd+u5lXzL15/az15K0nQL\nIbbR\r\n=qhLd\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n#### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note**: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n> _NOTE_: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n\n **_NOTE_: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommended to\n always include it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color)` | Sets the container fill color to the given color for an enabled button.\n`disabled-container-fill-color($color)` | Sets the container fill color to the given color for a disabled button.\n`icon-color($color)` | Sets the icon color to the given color for an enabled button.\n`disabled-icon-color($color)` | Sets the icon color to the given color for a disabled button.\n`ink-color($color)` | Sets the ink color to the given color for an enabled button, and sets the icon color to the given color unless `icon-color` is also used.\n`disabled-ink-color($color)` | Sets the ink color to the given color for a disabled button, and sets the icon color to the given color unless `icon-color` is also used.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color)` | Sets the outline color to the given color for an enabled button.\n`disabled-outline-color($color)` | Sets the outline color to the given color for a disabled button.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","description":"The Material Components for the web 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/density":"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/button_6.0.0-canary.f1f8e60.0_1585854845588_0.6107711842384329","host":"s3://npm-registry-packages"}},"6.0.0-canary.1e17c49b3.0":{"name":"@material/button","version":"6.0.0-canary.1e17c49b3.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"fa3d8dcc1307ace04cf7568f6791ccf519b9ada9","tarball":"https://registry.npmjs.org/@material/button/-/button-6.0.0-canary.1e17c49b3.0.tgz","fileCount":26,"integrity":"sha512-qb9Ik1ChvdnnUtv8MbtGZR/FGq6ZG+eHipu8IiWwu9Nm3qRjy8Ok0rkkzyntSaGXWGN6b39n0qaEDOBKubaRaw==","signatures":[{"sig":"MEUCIAU77XJdSGCWSVjz+geJvvieKJXgcdw2XO7SKCBz9hldAiEAvULSqFqpTU1M7xrB5G+j8yhHtIf967HlWBPQvr42zgU=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":368834,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeh3qfCRA9TVsSAnZWagAA5NQQAI0tJtvKHWt/xlnmGQdf\nLX/3At9IOAbX4u1Ba3QXw7z8RmSjtzZzsDUVZqTKJOkwq0pk5VKAyNbn6Wt9\nP9NraITlL+nEnw5AEJ49sFpCkST93YVsvIMADm/ReF/ftwJUThnoeIv/tuDP\nWQrFpghf5OgmRoh1ssb+wZbHHJ8DJyZYYlJCUZwYxpiTrLOha6QEa3XZ+dXh\nU92KtpvPWLwa2BAVbZs99gNXZ7ZQrohqECLZ0zPC/pIUogEpUdcCM44qZqg3\nuE4G7DGMBYN7j+jc22pIMrJc2tzeZvdUNhoc0bfJo6B7MCvedRT0HRMRZgYp\nXb3+zu6Xs6ASJOjAJkA1sJoeVez/TF+zF3Su9RRSra8RsUDbvWXQ46ecAdLb\n1XZPfHYOvUNb3LlsLVmZ6ZRMcCkMcQZ8TQ1hxjEydns7BzKSO9KA5kYcsv7a\nxML/HlqwJOl6gioRRjKS5cDv/KAiUI1UYA6IMNQsdtCoWTBKMqBQrOMFQ1p6\nTKdXv/jdgRoJxvNVrWP3vkYX9Pc1GV4rZrjgUQC8tRCxGKZP/QguShIdlK93\nFKtOSG5RaQtlHDlh3uCelUpirDcfoNh2iY9buOT9jTReE1LhTVLA3i+kxAxg\n9NwmpsBev32jzzmGTXFkzk3d2sn06pnIYgZhozZ9jW4kGZD0TWUeZIkMa1Bs\ndil6\r\n=E+fI\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n#### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note**: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n> _NOTE_: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n\n **_NOTE_: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommended to\n always include it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color)` | Sets the container fill color to the given color for an enabled button.\n`disabled-container-fill-color($color)` | Sets the container fill color to the given color for a disabled button.\n`icon-color($color)` | Sets the icon color to the given color for an enabled button.\n`disabled-icon-color($color)` | Sets the icon color to the given color for a disabled button.\n`ink-color($color)` | Sets the ink color to the given color for an enabled button, and sets the icon color to the given color unless `icon-color` is also used.\n`disabled-ink-color($color)` | Sets the ink color to the given color for a disabled button, and sets the icon color to the given color unless `icon-color` is also used.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color)` | Sets the outline color to the given color for an enabled button.\n`disabled-outline-color($color)` | Sets the outline color to the given color for a disabled button.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","description":"The Material Components for the web 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/density":"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/button_6.0.0-canary.1e17c49b3.0_1585937054590_0.30607904664647045","host":"s3://npm-registry-packages"}},"6.0.0-canary.6a40ef217.0":{"name":"@material/button","version":"6.0.0-canary.6a40ef217.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"4439e7c8f1ba4d742be778d3269701fcf0990569","tarball":"https://registry.npmjs.org/@material/button/-/button-6.0.0-canary.6a40ef217.0.tgz","fileCount":26,"integrity":"sha512-AfCVY3a8bwdrbWe70pAxnKfPQ7qANqR63C/nLYeVk6/bH+8Xg3R0JAAk2h1lj0ksYj2ye5J3ziLn6qOrMg7GsQ==","signatures":[{"sig":"MEUCIFedTBKqaLYUwOU+SJtgmTgMvbb4tJR1mA1Mdfig8RqGAiEA+D1GBpz5r3Grw2z3k4plrtCTMWiRolK0ZZ4g/I+1lF0=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":368834,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeh42ECRA9TVsSAnZWagAAlKAQAIPooFYB0xiXNyaiHLqK\nGgoBkD2XcELTvhM1zMwx9GFOY1pYL6b/1Go93JNape7kClLZ9hZTe7+9uh2O\n/dsHyBlKlA/pMAED5Gg+46IOgoRcpBKCpL5rFPcFIRJYv6bJVyf3jDq/Hmt+\nBv5JDgOW7FKwXntK7mAf65RuziB1ACN9TLeKqU6fthUxYy8/hgdQR9cBAty8\nhqHrdpKOqkSP/obiom6x39FNfnsoCzUqknnzkXxC3zfRhXiJ61jc+VQzXEGv\ncOtNhMqVpmjsV7heerQqr0/LGTHB+5hj2uBYgSeVtR7vFxJtcbKF1xfXnfXZ\nSzHza8OSQqqkE3pHxup+LoystQuP0H7E91GtDlLLRIAuZnp4anjyFlnHkSIi\nqgEHQ+JHgCTGeKy7tJiWdVV5/WXDAWbKO7/yy1ORWJOoZaVqlhdCzG4Y15/C\ng9CQwEI83cQoFaAJ5PSEUcozy72ne11ZnvNVatZ5iOXHVS9F0YyCpReJrYMO\ne2kQNM4Un561PFjL8GDiVDXvAtMbJcJV+CHkj+n3dv/2PofLeXw9yUyhads9\nrEcWGCGfEacyE58/mBnGbwsw/FKPzlvlejFicQoKRD0GeE7NZuJvJPr0gOPM\n1ozw7AWmAXQUH8K46fF5TuD4jw32chmkOxPqAXU3j7fJE8KI8ctkuJccHdDR\nEdwZ\r\n=QMl5\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n#### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note**: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n> _NOTE_: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n\n **_NOTE_: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommended to\n always include it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color)` | Sets the container fill color to the given color for an enabled button.\n`disabled-container-fill-color($color)` | Sets the container fill color to the given color for a disabled button.\n`icon-color($color)` | Sets the icon color to the given color for an enabled button.\n`disabled-icon-color($color)` | Sets the icon color to the given color for a disabled button.\n`ink-color($color)` | Sets the ink color to the given color for an enabled button, and sets the icon color to the given color unless `icon-color` is also used.\n`disabled-ink-color($color)` | Sets the ink color to the given color for a disabled button, and sets the icon color to the given color unless `icon-color` is also used.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color)` | Sets the outline color to the given color for an enabled button.\n`disabled-outline-color($color)` | Sets the outline color to the given color for a disabled button.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","description":"The Material Components for the web 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/density":"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/button_6.0.0-canary.6a40ef217.0_1585941892123_0.8945974769703635","host":"s3://npm-registry-packages"}},"6.0.0-canary.5f24faacb.0":{"name":"@material/button","version":"6.0.0-canary.5f24faacb.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"d2873600f4d5dd5c00d7c7257b3cd9f7ddc500bd","tarball":"https://registry.npmjs.org/@material/button/-/button-6.0.0-canary.5f24faacb.0.tgz","fileCount":26,"integrity":"sha512-u/3l8BB1W2CE1g5dM6ZOmX+FyhfoxAVOTP7fBjzyrPjMoajkWppxz7dx97UC599bjlWGxQ9CEW5PBQEST7I0Vw==","signatures":[{"sig":"MEUCIDR1v/EpkKdn6wwn5TSjz7AKQ2t9qMl1dBY7dPXWbjqUAiEArIk/Qjnl+qIEi7sBktLp/mEMt/HEoSOEiXuUI0nAYaI=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":368834,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeje+NCRA9TVsSAnZWagAAV2gP/AwIE8f7KcUPqlYbHrRn\nouO5iNvkMlP1OXDOUL7HxuUE1KoJi6hZ28DAztne3kciFiBJtLFbIXdfXuv4\n7TcPhHU74AdecAc+4yP2o4NzlDx8Jmyndw9ILbAMNwX4Vv2kOGAi0rLRYmeW\n6jVX1tm3Y3Odf5YZCf+0iy5w3PwBzkSU4b9EjFFTNNF1Ih63fsDEtKwfqXwp\nmQBKp/BZzC627hYW/iBepq8Tn+vTx1eNtIKV8fFpPbIHaqIYU8MZGqItmMGk\n0geIN1mMIwtk7RYpOSPtdoXqXBi6+uWPEFKWkw4zngQFOPs+JCFca62/q9sY\n+Y3aOhgoF8M4Rgout96hvAnMg96wzmq8dAYtyDlVhKgsZxsRsYGEKkpF+wj4\nDdhQzKoP0RdQWcavpUSVdH7w2Au4XyxvQICbSVJ46sK5vpvfQVZj262qxGem\nJN04uf7z8midbg9iTpvwURJLHCOe7y1xOpkfeWQwFRw2uCx+JyDGRQejvYpN\nOnCSgGX0kPuiIZYYGk+pEK9CQg22D/vOQfZosDUDRigYElLfK5A4n3w35/jT\n5AkntO8bdbqDb3HfPJkWT6MlvnzaanAKm/RtpVhNxaOIegNpRY9iHMtavkLS\nJTMgtMiD+otQ3tA9s6qFEPkxxQAF5GqfxOUOAElC4CdVnmvkaZsMZgE7LXhH\nzDqe\r\n=zwcc\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n#### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note**: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n> _NOTE_: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n\n **_NOTE_: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommended to\n always include it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color)` | Sets the container fill color to the given color for an enabled button.\n`disabled-container-fill-color($color)` | Sets the container fill color to the given color for a disabled button.\n`icon-color($color)` | Sets the icon color to the given color for an enabled button.\n`disabled-icon-color($color)` | Sets the icon color to the given color for a disabled button.\n`ink-color($color)` | Sets the ink color to the given color for an enabled button, and sets the icon color to the given color unless `icon-color` is also used.\n`disabled-ink-color($color)` | Sets the ink color to the given color for a disabled button, and sets the icon color to the given color unless `icon-color` is also used.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color)` | Sets the outline color to the given color for an enabled button.\n`disabled-outline-color($color)` | Sets the outline color to the given color for a disabled button.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","description":"The Material Components for the web 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/density":"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/button_6.0.0-canary.5f24faacb.0_1586360204830_0.3068931316746448","host":"s3://npm-registry-packages"}},"6.0.0-canary.82fa986b9.0":{"name":"@material/button","version":"6.0.0-canary.82fa986b9.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"af1f118c0adbb8e8b647d6cd56f90e4e9f8e8abd","tarball":"https://registry.npmjs.org/@material/button/-/button-6.0.0-canary.82fa986b9.0.tgz","fileCount":26,"integrity":"sha512-71P7itxIlGI70aCWP94SdnMVrHQHV4VY+kxeSP8VeuDHz/vfAjsDCz77n/5xGloMH6uhJC0iqmIELkb1SrVXOA==","signatures":[{"sig":"MEYCIQCv9nzivGlnZK8gCrQWXWOihXaG/hJoK2qlsbWkHP3mfgIhAJ9UCGw91Bhu9WwJlmL3WEKHHhbeu+w5jC5Pw8p1VIIC","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":368834,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJejfDBCRA9TVsSAnZWagAAL1oP/R/fmt9S7lg+O10cmgI7\nZrSAjkYkgl9XJhntaBAoCRVheNQ6qHRdjoO1EeO+5yj/PTWZDPippeAVv9Wt\n+yvybzJ8W30pGfnoS3b9Hd2/zJbBSWVKF7q344h0vIc64lMqY3KWKRiKEDI4\nT0ye053vPOIUgPiA/iRp+J5ftz6UdZN3fL7/yoXWR3kxth+v4rVo3B1azCPU\nHqh5dF3av6aTHezB/IZOLLAMOV6rLujtlmqxaOWYbkwwqRlRZpaVvBWlgioT\nVXxB0qlZL7xT80F5vCy8fZwA4wEsoEjydXjl68mGd95n4+UxrVhRNiDVRq+L\nXfzPsNyJxtxQBKeROJCQ/WxtY6NBtkKXdppjL+4YQGLVflaqgZOVz6VU/l9+\nP2naZ7t4b2i3c5L5U51zO+uiMXy8y1sE8OjlZrhKCVbUaEH6SLrs70yB5dlq\nyvOqkFcXfx0nss/5ESIgn+1KQUM9Z2ub3s22MsvycswEx/pkTIg1WBbSAoMD\nWtUzBU0o8GU7vrFL7PPl0gT1W3Gsuu/MzMpGeOdeuXnmFrazQK/BRNAMoenL\n0pNiUf5FJoP1VrvQ4FtXBpoCwa4yTHfhJziQwCeBHdQFcO/Pkri1GXU1i7SO\ncm4jb2eg5WYQ5tCYXMyOo16BYVexkidrj3rsnnZKVeu0q/iFk7bFHlprhX5p\npWr0\r\n=YmCh\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n#### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note**: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n> _NOTE_: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n\n **_NOTE_: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommended to\n always include it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color)` | Sets the container fill color to the given color for an enabled button.\n`disabled-container-fill-color($color)` | Sets the container fill color to the given color for a disabled button.\n`icon-color($color)` | Sets the icon color to the given color for an enabled button.\n`disabled-icon-color($color)` | Sets the icon color to the given color for a disabled button.\n`ink-color($color)` | Sets the ink color to the given color for an enabled button, and sets the icon color to the given color unless `icon-color` is also used.\n`disabled-ink-color($color)` | Sets the ink color to the given color for a disabled button, and sets the icon color to the given color unless `icon-color` is also used.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color)` | Sets the outline color to the given color for an enabled button.\n`disabled-outline-color($color)` | Sets the outline color to the given color for a disabled button.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","description":"The Material Components for the web 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/density":"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/button_6.0.0-canary.82fa986b9.0_1586360513038_0.5658275833709916","host":"s3://npm-registry-packages"}},"6.0.0-canary.9930d9cc5.0":{"name":"@material/button","version":"6.0.0-canary.9930d9cc5.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"60fc37740a321b18dfdb9f85e4e99bb313fa4d61","tarball":"https://registry.npmjs.org/@material/button/-/button-6.0.0-canary.9930d9cc5.0.tgz","fileCount":26,"integrity":"sha512-m36ihBckF/pBn+4LdfKUO7WdTmSw9M+Q6Ijkx2Mu6crCv+Uve3GLAYaxx336UhAlQPUEA4QZ6G92Tb+DqZoGSg==","signatures":[{"sig":"MEQCIHkV7QTgxDAhKcXXNtjRJFmzzVPumni6Mrf6Dg/Mj5OnAiA3OcydGzhQjkSGz41+YO4ZLpF43RgBhDWt5kihwzNhIQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":368834,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJejibZCRA9TVsSAnZWagAAz7EP/i9V957H0PHiEZWbA6vp\nvxJYVNnPV4lHDvBLa1NQ4rBWJ77ptE8okphs9XTnieGyVYvBPDHiLKgjrKE5\nR5fT1BQf0xyxZ6enhYzs4WmU8bF9oNR4XrOWD+y1d7sX42C1hlC3t9ddrT+Q\nj/KRJYS+Re/CV6jHPaB/SMWctEL8dL9gdQC8aLKM7U5k4ycBtzE7j+y4zSzJ\nqLhX37MmJc91hfEvWQsoYSAIaaxg2VNEk8JvWg9wG3OmYFXQS/rJZ3IptA/h\nzi8GZ5jIMS7vrBMBSclJnV7Dupxo5wgsz1kRmBaxul7sGOnZJw+2X251zw8X\n9SbWPytR5m5GpDG168fxdXcxf5rLnV2owScLW9eChiw66yllq1BYn+TxC62c\nacxbZTY6yo06ZjGa5JIgO4omXtLT0mqpLr3eOVe3ZOxaDBdJQg65eu5vw9n/\nFr8l+Oal8U0LEO05gm/sK13xc1u5BzZ68sgYBQzTaaRM5E4gv3YnkEysKR3A\nG8oc1yWqc7F7BqCvUXa4SM8paEiEvDfO1JGBvEo9tw7ryg2+3hRBx8K94EHB\nj71VCWg+iyGsyvw68zh2ZSqrnbWMc4cPAgYXKakXbvvK51F2nQsHIa0qeZw0\nHWNMQBXdbtfQy8JF3NOyVCYRyqIiPASXWwdaiL75tQJt8kKCkaoXNv/f8bR0\nC6jW\r\n=lyB2\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n#### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note**: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n> _NOTE_: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n\n **_NOTE_: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommended to\n always include it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color)` | Sets the container fill color to the given color for an enabled button.\n`disabled-container-fill-color($color)` | Sets the container fill color to the given color for a disabled button.\n`icon-color($color)` | Sets the icon color to the given color for an enabled button.\n`disabled-icon-color($color)` | Sets the icon color to the given color for a disabled button.\n`ink-color($color)` | Sets the ink color to the given color for an enabled button, and sets the icon color to the given color unless `icon-color` is also used.\n`disabled-ink-color($color)` | Sets the ink color to the given color for a disabled button, and sets the icon color to the given color unless `icon-color` is also used.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color)` | Sets the outline color to the given color for an enabled button.\n`disabled-outline-color($color)` | Sets the outline color to the given color for a disabled button.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v10.20.0+x64 (linux)","description":"The Material Components for the web 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/density":"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/button_6.0.0-canary.9930d9cc5.0_1586374360696_0.7069782875293642","host":"s3://npm-registry-packages"}},"6.0.0-canary.6601d24af.0":{"name":"@material/button","version":"6.0.0-canary.6601d24af.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"721efd5a06c4718ec2afd9d7dcdda2d49f1b4bbc","tarball":"https://registry.npmjs.org/@material/button/-/button-6.0.0-canary.6601d24af.0.tgz","fileCount":26,"integrity":"sha512-xSkPywBXzm//HBMYFYxPZRy6nWPoqXCSNIaRgZzlpWoc+N0mX71qO+6vqkyyw7VI/TWlLGdZh7W2+hQhoyKSnA==","signatures":[{"sig":"MEUCIEuAnUjAXCzOY3GiWYRpKRbQ9lw7xPnv3NU4/AjQ7uROAiEAqRz4Sf6yMN6FkNe8baLe+JB/sUpKLqR6q6anCV6bSqw=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":368834,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJejmyPCRA9TVsSAnZWagAA2woQAIg9Yvs35RHKbB+nKqDJ\n8S+d4wmLtTUNxVC2ejqfI2JhZ0OIh4tU9tqDM9cz4TqNJ9UoBc2vjtDJ8aLW\n8jgxZNymIxxdYHAY7rSRxJXyAqKknPB4cDx2AD56FNrgQmlieo0QiTi38FuT\ntU50sQYrQ4ZeBRGom9CarUmcj9ytUJ3BVhc2myuh5EoIz5zoM1Sjr2YJeVfv\nPgqDY2/X3HEhTM4ZP1TjntsGW+3oyuPiUyZhrG6rbu92lccm2n8LFkSbUtx+\nyBUdFP67+hJEMlsh9nHIU9Fw/tC9YOWCyR6U3UcTdJl5ZdwCRyeNaZ5BkMZq\n/wGierpeiGKd0wzimXjVKDMPv9az9CrL8IIfja6k/F6T+cxtStP4Mezs2Im3\n0FMON4/9UeUFeQew+KNVH1qG5RP1xKnmsQaTH4fbCeNY0/QeYlgSLGShx9MS\nK5yNPDh8FlId3TKShWt+qkhIKso+R0dhVRnwMry0SeD08Up9I71SisSB6Y1o\n08IuSTSSudSSloRVQZd/CbwSVZ1+iTUSCrKGMLVRF8EFJoxzFDrNpsi4mjJx\nG0sCYoDYPbQJB32Nfna9DuWe5uScHIPSCtHJnFkeLfzYg2z/ZJ4EpcfMpJRO\nWwEF33WKxQfKIb2ligG+Pea0p+q4LffkCNnKX+7r/rAB61vGRP4Oj7Q21VC5\n0wdX\r\n=HyI6\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n#### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note**: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n> _NOTE_: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n\n **_NOTE_: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommended to\n always include it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color)` | Sets the container fill color to the given color for an enabled button.\n`disabled-container-fill-color($color)` | Sets the container fill color to the given color for a disabled button.\n`icon-color($color)` | Sets the icon color to the given color for an enabled button.\n`disabled-icon-color($color)` | Sets the icon color to the given color for a disabled button.\n`ink-color($color)` | Sets the ink color to the given color for an enabled button, and sets the icon color to the given color unless `icon-color` is also used.\n`disabled-ink-color($color)` | Sets the ink color to the given color for a disabled button, and sets the icon color to the given color unless `icon-color` is also used.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color)` | Sets the outline color to the given color for an enabled button.\n`disabled-outline-color($color)` | Sets the outline color to the given color for a disabled button.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v10.20.0+x64 (linux)","description":"The Material Components for the web 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/density":"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/button_6.0.0-canary.6601d24af.0_1586392206667_0.81081049047889","host":"s3://npm-registry-packages"}},"6.0.0-canary.05f5e1583.0":{"name":"@material/button","version":"6.0.0-canary.05f5e1583.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"ee24ba39896b4d9c73fd62aed28c279aef412b9e","tarball":"https://registry.npmjs.org/@material/button/-/button-6.0.0-canary.05f5e1583.0.tgz","fileCount":26,"integrity":"sha512-qG9ZVgYyeQKPB/AmgL9Zh7fUjl6TPjwpuEf0nFRRlY1uh9nDdkm9WTZ5UypEhT1q0cJsvnQT5PL5qgP5Z5rTQA==","signatures":[{"sig":"MEUCIQCX7tOXwo8NvGb4AB1KBBTkroJ6V6l2fNL1S8V6C0ooEQIgYMVbebjwtje0D0n7PrN4pmXI1GfmF7BoamvmP3CQ1IA=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":368834,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJejnCkCRA9TVsSAnZWagAA/bEP/3ojSRCw63jgo5IkTxlh\nt2Rjd0Xpb8V2wSltLKAqjaAFWootfjW1DWQra2e/7IP3+jDBQhoo+AsmMUt/\niSMvpb3wSfcJ/qZPr5JE/hUepEhEU9wOM0GsLD1mn3wVRPRBKbz7CyMLwbol\ngI27MAsWnoc3A+lAbaDaxhYOZnxrU37HGRHNO/aqP3u4ZWGnUDuqiGx4oyVc\nlXr9Wk6U4Egyn4cp+XfIahHBtUfmjQk1BVtmodC87lam7+e5pgJbI9RoHXZm\nX31YATOeCgIkr6mbcmYZT/TYkJjp2+WEIZpKB/17xJ5kmM+AqWgdIq5HO4Ao\nfM9AJbJNNQavs4MHwGKJWCwEHRu7lh+XBrMNyr69QeF/OGLNBTBHvWonVt02\njE3qv5CfK8lZmh6nwdQOd2PlTykeDIEBRerPEGNr2LH14ws5zy0XCi+91HFM\nku7G4jOpa4W1TtJQseXCehtGx9y6yth8Qf2ltJXvjM8t3E/PNWabV3Xigi6o\nLN1wyfXHqTuQGeHaQykZlbWLCR9lL9snL64hDtpLTgBA505ICe9f2aXRJZMP\nbT32PfF7o6GOvWdhJgd0glyxdBRIBHQLV+l3cXRvtrsO4Ln+nwt/8lKYR9sA\n9WGD30j3ivagBLwVKDBUW00dLfqUIkwTwEkUjaEkILpuHbQd1a7HA3uejPvb\ntIRP\r\n=CzJS\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n#### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note**: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n> _NOTE_: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n\n **_NOTE_: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommended to\n always include it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color)` | Sets the container fill color to the given color for an enabled button.\n`disabled-container-fill-color($color)` | Sets the container fill color to the given color for a disabled button.\n`icon-color($color)` | Sets the icon color to the given color for an enabled button.\n`disabled-icon-color($color)` | Sets the icon color to the given color for a disabled button.\n`ink-color($color)` | Sets the ink color to the given color for an enabled button, and sets the icon color to the given color unless `icon-color` is also used.\n`disabled-ink-color($color)` | Sets the ink color to the given color for a disabled button, and sets the icon color to the given color unless `icon-color` is also used.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color)` | Sets the outline color to the given color for an enabled button.\n`disabled-outline-color($color)` | Sets the outline color to the given color for a disabled button.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v10.20.0+x64 (linux)","description":"The Material Components for the web 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/density":"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/button_6.0.0-canary.05f5e1583.0_1586393251484_0.5320864389170634","host":"s3://npm-registry-packages"}},"6.0.0-canary.bce00e186.0":{"name":"@material/button","version":"6.0.0-canary.bce00e186.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"14c576026d6cd5b80178e82163738cfc1705c35c","tarball":"https://registry.npmjs.org/@material/button/-/button-6.0.0-canary.bce00e186.0.tgz","fileCount":26,"integrity":"sha512-6HnD+5BMtH9G6chON0rSONhKH2+w96KZVsCrtSI9ITqCGaPyUuTS+7u+pImkX1VfhlwXGKqErHQItDSFWgRWVw==","signatures":[{"sig":"MEUCIBgUls9Yot1ISIWJ+7t1L9TLE7dCTBliCIgVsTTcvD6vAiEA3Mu+iYkIlQZr3NU96XzvjGkIyriim1mCgt2ydP58L2M=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":368834,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJejz3ZCRA9TVsSAnZWagAA6vgP/jWhlBAAEaskcUPtHilY\naCh49jVH9y+kYVv0klKc6beEOVcG7QjEa3SldmCaIgYKt6rmbF9e3pEbqNpF\nJDu5ZM5GIJCKj0LL+GE1xvrQ0xvWFDL2Le7CfVvBkK6xlQgmrOYDc4f4Yizw\nOOR+7gS6bR9Lr+afyJ4qrIYrzeMYbKYVl7nsSu2DbJmfYjISGPtkSSl8wyTd\nOAVA4FiqxAdkUgr5gXShhQZmPJtq/fxuNSNBMR95mKwboEuWgIFMCHFtzxVt\nNNMwIDL+YYuhTX2tqWzLrGLkonnLgAnQAnjA11Rv6GOrrJBj6i1Xy/lsZ2Ty\nh5HJf4vHXeKPd90Pyp3yTVsDGH7BMX07NDlkjlvkRBIOBkVqkn9k1TI3HS1l\naE9a955hvhmhuEWL+4nFA91Sn3yYlZ/mcCk+/iYDxH2/6JrL0h4RPumLRZjR\nIr5TTLwk2srLViGVhkpHlW9hEqL4fg/5lXGaM2o79G+dX2zMyyFNGqu2qj4n\nULvVywE6MTvRGXfRs+u/iiRama4T3tHPlUUMkOgNF0PAUHRwqCwJ7dYoafg+\n8NNoi+RhwvaaWAkHCIa+PUY6vmAbDoSHzOKPDCSPnsNPeuq5bcGJ4ZIgSWzs\nd8yr7LcuH86dgkUKMjA9Soh+Z2eOSEXnANlok9f/aqDTBoYy8IMoJiZofaGe\nqw+p\r\n=/wuE\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n#### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note**: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n> _NOTE_: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n\n **_NOTE_: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommended to\n always include it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color)` | Sets the container fill color to the given color for an enabled button.\n`disabled-container-fill-color($color)` | Sets the container fill color to the given color for a disabled button.\n`icon-color($color)` | Sets the icon color to the given color for an enabled button.\n`disabled-icon-color($color)` | Sets the icon color to the given color for a disabled button.\n`ink-color($color)` | Sets the ink color to the given color for an enabled button, and sets the icon color to the given color unless `icon-color` is also used.\n`disabled-ink-color($color)` | Sets the ink color to the given color for a disabled button, and sets the icon color to the given color unless `icon-color` is also used.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color)` | Sets the outline color to the given color for an enabled button.\n`disabled-outline-color($color)` | Sets the outline color to the given color for a disabled button.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v10.20.0+x64 (linux)","description":"The Material Components for the web 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/density":"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/button_6.0.0-canary.bce00e186.0_1586445785035_0.5271530266381985","host":"s3://npm-registry-packages"}},"6.0.0-canary.927fa902c.0":{"name":"@material/button","version":"6.0.0-canary.927fa902c.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"6f1f060c62ca75d514dad6befcd2405d591c7d43","tarball":"https://registry.npmjs.org/@material/button/-/button-6.0.0-canary.927fa902c.0.tgz","fileCount":26,"integrity":"sha512-pOeq61yrFEkBb8oEUfCUQCbgw8WeMMOZ4X+4gTwBklFW/8ONDXuCBU821B5n4UXTW3C0muxO8oZE44NhjhSY0w==","signatures":[{"sig":"MEYCIQCmD60U4OSCmVRTKMNN7zq0cLTh68GgEI5lHQlWbetVjQIhAO4jFzrePI1PcsVCc2nctj/LH5Tnzaf3sP9+cBOtQ4xo","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":368834,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJej22UCRA9TVsSAnZWagAAJ4kP/RYdUjwXV/p669fc7wz/\nuSad2/0IPmJt+QQMNVTzbNkag7bd+ut+BUf+Wyqo9jaaf/0u5GpQmseyL974\n6LPTlf6LRebExGHzbwc1RFVqiV/6OuKU4ADlcBVh3pDduzdu+rKXqTsr6wA8\nbUAyv1ESHUUdmxdjQRupNj4mOWpfj3XHvC6vWOkAamtTq+ChGZzUBK5VvvWD\nPMVe1IMc/xg7q/ATqvOflT04fFuV+5Q4uo7gfo2SmunO2nXEtVnSqarg6+86\ne1+v+9fMHzRyhFbViTNpVHreQSgkcw0SWKGQnkWmlkXvmWGlWPUTujXRKzWC\nbhR9Jaur6IwM8G5Uo9GsCCXNea52y2P+wlFvmna1Y4IfY1AZxpRaKKudXbxB\ndUoioA5iKFhb0seGlR08mR3U4Xfsd13piRU4iThOAz+iqyQEVqK4ITI7dKT6\nUOh4rTl8I7ZwXjLT457jx9Vzlz472k4+axNsmY7+CFvrqG7urxBgeXb8BXpf\nzkSFhkAfS/aBx3+kXnV6u4qL6kl15PCrnHPBpV3Wp2PN76GfDOLaWEouZQo2\n6HsplSCmasmdCIcVocLw2Yfqcdfka95yAzJ+dvRy60dFUK2USPzGhpTAWduD\njrI+7zVIyGegGQk9qKfjcKzMHYHkilc1GfUXEa1QC3KYjg429pUjnI221BnA\n+7iu\r\n=2I9q\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n#### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note**: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n> _NOTE_: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n\n **_NOTE_: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommended to\n always include it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color)` | Sets the container fill color to the given color for an enabled button.\n`disabled-container-fill-color($color)` | Sets the container fill color to the given color for a disabled button.\n`icon-color($color)` | Sets the icon color to the given color for an enabled button.\n`disabled-icon-color($color)` | Sets the icon color to the given color for a disabled button.\n`ink-color($color)` | Sets the ink color to the given color for an enabled button, and sets the icon color to the given color unless `icon-color` is also used.\n`disabled-ink-color($color)` | Sets the ink color to the given color for a disabled button, and sets the icon color to the given color unless `icon-color` is also used.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color)` | Sets the outline color to the given color for an enabled button.\n`disabled-outline-color($color)` | Sets the outline color to the given color for a disabled button.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v10.20.0+x64 (linux)","description":"The Material Components for the web 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/density":"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/button_6.0.0-canary.927fa902c.0_1586458003524_0.44107698309577237","host":"s3://npm-registry-packages"}},"6.0.0-canary.eb28b6ecc.0":{"name":"@material/button","version":"6.0.0-canary.eb28b6ecc.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"787f0fce4db63892ce2adfd12b007d34accc8ddd","tarball":"https://registry.npmjs.org/@material/button/-/button-6.0.0-canary.eb28b6ecc.0.tgz","fileCount":26,"integrity":"sha512-S5XEdv/NVff/b4Lu5iGkyEQ0NSAv8HCtGecSLQR1PSjTjgMQzcd2C50iZcv6Us1saWd4lCER/MQkAWFvFrtXig==","signatures":[{"sig":"MEYCIQDhmjc31J8/hjSqxymqEnGA1bNqnhNc1oHnHmO8GjggXwIhAKofDLZplwSQAmawvom/IdYb4yC+OlFCIa8tp4eJsfX/","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":368834,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJekMl/CRA9TVsSAnZWagAA8n4P/0lbZg00Q5IFuUNm5EqG\nG7MJkSm8L4MMSRSg94ns0lWIqEOtKGcmQ0NGeWLkgsgUaHq27xlw5ygmjw5t\naniffmUdbfv/Il5Nqf/bo0fg3x+E4etDakg+p/7WJnroGTipzdq7nhFTBVJw\ne8GUhGCHv4UhwGCmmC/cFazpsOTRD9qzbJTt6sDtPsmSZr5Ekb4kbnhxOIln\nMmEBkTrW8A8A6ubUoRemZ0yC2EFuh6uWMQl5wVClKsENDMAlkfM0Uivi2tdv\nW/w3uqANVF23PmNrUE1iyk51IjB/FryB4FMErrVzBwuSrwilNB4yxhTCUudn\naz2S69rrNPYdyEwnc6/dt1pN5e6Lty74qDiduhB3i32JXN5zaT94ETF0ZYI+\nLnNr+21L82ZA6EP2xXGqtQUpiSGaDteSK3XBc46tSfiZId/ieIfVliaQR0Hg\nh3g8o0mhDE7jAleBYsTumBe0HBCtSBDXaYnLrLCVsSnfvgdjpnj8mzLhK20P\nCMJwNCYA5G22urBTyyyklJKaaIi4DdBOBqlTz3Bm9EVkwUEbx9FuSHt9DKOt\njueUrglDy1K8aXtaO1+Rfho2ElznFXaj779Pg+FcEEtaR4JyQrhPP/tNSHCc\n6pNQQG9Xlw4NV2QXAsndlt+5DbMZCtaPTwOZhFG3S5o5ycSOW5wPT4ygtjjH\nV3Gd\r\n=yZZs\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n#### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note**: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n> _NOTE_: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n\n **_NOTE_: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommended to\n always include it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color)` | Sets the container fill color to the given color for an enabled button.\n`disabled-container-fill-color($color)` | Sets the container fill color to the given color for a disabled button.\n`icon-color($color)` | Sets the icon color to the given color for an enabled button.\n`disabled-icon-color($color)` | Sets the icon color to the given color for a disabled button.\n`ink-color($color)` | Sets the ink color to the given color for an enabled button, and sets the icon color to the given color unless `icon-color` is also used.\n`disabled-ink-color($color)` | Sets the ink color to the given color for a disabled button, and sets the icon color to the given color unless `icon-color` is also used.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color)` | Sets the outline color to the given color for an enabled button.\n`disabled-outline-color($color)` | Sets the outline color to the given color for a disabled button.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v10.20.0+x64 (linux)","description":"The Material Components for the web 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/density":"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/button_6.0.0-canary.eb28b6ecc.0_1586547071101_0.9365775550460227","host":"s3://npm-registry-packages"}},"6.0.0-canary.816a43b42.0":{"name":"@material/button","version":"6.0.0-canary.816a43b42.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"7a3be22e1d5ea2df607a5591ced2aa90935ae549","tarball":"https://registry.npmjs.org/@material/button/-/button-6.0.0-canary.816a43b42.0.tgz","fileCount":26,"integrity":"sha512-9CSbGAEanW0KhV74KQEFwPZxWn0IIpuWi5bRYhU4fDomtOXWc5LVE6+qsieLArokMi7lNSSPYoDk7daFYwJw2A==","signatures":[{"sig":"MEQCICcjFTwHJffiHjEpuiYu9CXp61s4VYGhtrI1MiZ6vju6AiAIq52ScbBjpbSEqJcCL/HH2ogmj03tWvlAaW2igxd3rw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":368834,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJekNyoCRA9TVsSAnZWagAAMosP/iNF8BTxyyNcDCe7uoMY\nqJ7f8Chpt4cYuto4Ljd838Q+PR9CkKZZ/4/tQclQOKEM/yI3BliT1ivOjcud\nm/BXEd7TsitHo1m9PamfkFHuOgmSbqnceBz4lgr31y6DOFei0YTFmWVBI8hd\n4CTq69k8bbk2Va29bYXsVTl/55Z8rgaI/HNpjAZYd2YBkoX2cMsANE/x2yTD\nbS5O59N1SX2hcZdYGY6UOA/sUe+DjfKbBFCRrpmnqMga48Vu/EutOyKK99oU\nFiuve3mOYB945hpcTdGIRBTH42RR8YsPLJS+/QDQh/iGErP94BfaFme9Ro57\nMx038Si26AQ7J4EfSBfuDpyj5F3OM1Mwh1eO2DxXkluL3UWrTRJIusks/1D+\nWiD3+dFkqCiUeEInCBliBlqSTUHPhvGcVcLU7SEyYcymY5zhaQVklFOwgeDh\n4sCZAlTioTwr8Kdv8lBVVT5zQd94A8cF8Zq0UZOSUoxPwYkZp7DsIFDZgrnu\nl9Wjvhsv/B49bwOac1K6frJgbwUiHs1a8ykTRIzMMUKPBuV6FufqtvJ/BeN0\n07deLOy69KDZ39BLlN2IIf2RGqDjtOM9uJBZspbHWuntMexcTGFVyUdSeVbb\nAxSHgNfebMBvnigiSy29K1Ub/lWSyjYSMwGZXsjyD6Xhcyf1Ajf+mndcv0gl\nN4Yz\r\n=QqFu\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n#### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note**: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n> _NOTE_: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n\n **_NOTE_: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommended to\n always include it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color)` | Sets the container fill color to the given color for an enabled button.\n`disabled-container-fill-color($color)` | Sets the container fill color to the given color for a disabled button.\n`icon-color($color)` | Sets the icon color to the given color for an enabled button.\n`disabled-icon-color($color)` | Sets the icon color to the given color for a disabled button.\n`ink-color($color)` | Sets the ink color to the given color for an enabled button, and sets the icon color to the given color unless `icon-color` is also used.\n`disabled-ink-color($color)` | Sets the ink color to the given color for a disabled button, and sets the icon color to the given color unless `icon-color` is also used.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color)` | Sets the outline color to the given color for an enabled button.\n`disabled-outline-color($color)` | Sets the outline color to the given color for a disabled button.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v10.20.0+x64 (linux)","description":"The Material Components for the web 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/density":"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/button_6.0.0-canary.816a43b42.0_1586551976194_0.1333974336875987","host":"s3://npm-registry-packages"}},"6.0.0-canary.008c4d319.0":{"name":"@material/button","version":"6.0.0-canary.008c4d319.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"52e79a3f71f08dfd1c1bbcbb672c33d4caa1d417","tarball":"https://registry.npmjs.org/@material/button/-/button-6.0.0-canary.008c4d319.0.tgz","fileCount":26,"integrity":"sha512-Mw/BfDwroWKom3BiXD9R8D2vzJH3iIYFYrnoAFQ/Okx5pIotOrAbCdCrpayz53OO6zQKVJ0k6hgZ9Di05Fqufg==","signatures":[{"sig":"MEQCIEquw4YGUg78uNE92XU54tfT3cWvDB/yo+ha0kNLdOb3AiANcKgOkKAUGJHJ7E0JFgkblVQ9ngyCYKSbDmbDWJJAMQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":368966,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJelJSECRA9TVsSAnZWagAAiHEP/3yx48D0V2k/0UgvbMq7\nb6SEl8vIi46+kePSYsh8WXHyXEuogpVMeZmu954DKmhhWV8f3H+mRjZ0DqyX\niOJnZeGPst5VYeJ/1+TV2q6EEWIpfqWJH9OKtMT166ogny70RqW0O7KZfUA9\nbazxEGAcEVcOqfebbKYC7FkrhVdoBPGBeMuqCDA3dqZtdONWeGzCW4XcUzH8\nEdDsapKK/2QSSOY3JYesE6jzO2EzY0YZ4pdH7u+F+jviCMLjLFvDhiZm+0i7\nO+HtTZVzzBev+JChnO7xhrJv37FwUrKOuf9EfGVIYkHiBtdXtd2Tcgp7EcZ/\n6T6tYsUkLl/KIJeNrOhxKSx8rxWwt/UdpSswq1+LcGZjqTpA87KFGZT0c+nj\n8I6f9AtyyKXbjWAWZj6+TgdVj7LyfsAOfICVhxlr4smUq4YJaJywbK/zek1D\nTb0sLIvzCV9HC/1V/IO+0iEVqVtxvsE48TpoYbLBV9AIF//dN1/UZTRQhJQP\nxJH5dor8e742wn0TlYdXYxZvNN+NLCAfs3PtTbxt99ZdDpydOS/e5e5Hxd05\nN5zTTYOZRYk3ktLLSZB21Br0GW3heuerwaBy1e6cZndUgj4lzkdoqfLluDHi\n2LIUou4iU+aIU1ZtFofNMw/wpSAJiMEZ1a1/oYXFLKxGe0ABwa9i9b2H6G0a\nXO4y\r\n=Z89v\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n#### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note**: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n> _NOTE_: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n\n **_NOTE_: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommended to\n always include it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color)` | Sets the container fill color to the given color for an enabled button.\n`disabled-container-fill-color($color)` | Sets the container fill color to the given color for a disabled button.\n`icon-color($color)` | Sets the icon color to the given color for an enabled button.\n`disabled-icon-color($color)` | Sets the icon color to the given color for a disabled button.\n`ink-color($color)` | Sets the ink color to the given color for an enabled button, and sets the icon color to the given color unless `icon-color` is also used.\n`disabled-ink-color($color)` | Sets the ink color to the given color for a disabled button, and sets the icon color to the given color unless `icon-color` is also used.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color)` | Sets the outline color to the given color for an enabled button.\n`disabled-outline-color($color)` | Sets the outline color to the given color for a disabled button.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web 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/density":"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/button_6.0.0-canary.008c4d319.0_1586795651840_0.22057866353235323","host":"s3://npm-registry-packages"}},"6.0.0-canary.cbb3f28ca.0":{"name":"@material/button","version":"6.0.0-canary.cbb3f28ca.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"5e62037b1f4887fa459e69390d71f5589eb0f72a","tarball":"https://registry.npmjs.org/@material/button/-/button-6.0.0-canary.cbb3f28ca.0.tgz","fileCount":26,"integrity":"sha512-ccbkoGyV2pFb0d3kgJFQKvCz93nC/PgKDOxqB5QDizdpLHD0L4K5y6AQoXmwoMskT0BRmV46TjxcjLui1FuZYA==","signatures":[{"sig":"MEUCIQCGJJIKuzHHONDnk7B8EHL/q3mJdLcXu3wJnfYmD1zJ5gIgSidm6YeDg7PYEw8PvwV2not0qDjO1oqkmak3K+Ywh3Y=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":368966,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJelUTDCRA9TVsSAnZWagAAmeEP/0JUsyWI7Baip3Fq3XZA\nNvAUETOc92nQ3ZK5/reyZvBGh4OivO/sXr4218zscigVphmd//HsWAH748Jv\nNxnx+P62FtHBPKXGRvmGr+82GgU4BHxQ6t5BAbehbgdMJXWjOaNq/Dwg4g2p\nY/qe51o4WkT1+toyEsT36P8QZMoqfgZ/BEn6R5YDLQQbLxUql+huEmbNkrTK\nhXxiQ6oorOyRhyRLiwdLn9aJdXVyflbPtL4wtbEiBJTUc/IZIbDS+ltkLid3\nAE4KPFGQEFhU2tmMRuWxksg3GfiveMHZy9Xe/8LbUOmO8rZ52RMqKJrNrjvN\nX8Il8o3JwVwGRyDP1ypxL1pR7THRGsGJU4oSyrUw3oVnc+4yH6x+h331cbGt\n+0KaTl5gR5kzFH0J5A6ax2A5HgOKfiovkZPchZq/2Rbvcus+X3tQ7nrSTepP\nIfXiH1VMMpyPRaqSybeatB2QJlMfFBglsBuJo+r2E2ZzsoGqHo3GVMyd9KXi\nqIQ7HB+ovonA6g30MVWlHKS1mInWgZSuS8DJkdYrBTnVq8KCLeyvVEZzzDd2\nem96J874j6ebSc1MJDcRTNSlocoGBI8z4w8Nj0fFgOC77rUGiq8kTPVcgv9D\nmKQ1p85vl+AX1CUeb62BNLk+zsqQVbJZTp+1IIkJz3dMOSpyHxZuuAqVUXE4\n04v1\r\n=PU9j\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n#### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note**: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n> _NOTE_: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n\n **_NOTE_: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommended to\n always include it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color)` | Sets the container fill color to the given color for an enabled button.\n`disabled-container-fill-color($color)` | Sets the container fill color to the given color for a disabled button.\n`icon-color($color)` | Sets the icon color to the given color for an enabled button.\n`disabled-icon-color($color)` | Sets the icon color to the given color for a disabled button.\n`ink-color($color)` | Sets the ink color to the given color for an enabled button, and sets the icon color to the given color unless `icon-color` is also used.\n`disabled-ink-color($color)` | Sets the ink color to the given color for a disabled button, and sets the icon color to the given color unless `icon-color` is also used.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color)` | Sets the outline color to the given color for an enabled button.\n`disabled-outline-color($color)` | Sets the outline color to the given color for a disabled button.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web 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/density":"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/button_6.0.0-canary.cbb3f28ca.0_1586840771248_0.7938602395219843","host":"s3://npm-registry-packages"}},"6.0.0-canary.f172b0f90.0":{"name":"@material/button","version":"6.0.0-canary.f172b0f90.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"f2178e4053ca2c02f447abd036deac7be36a57f1","tarball":"https://registry.npmjs.org/@material/button/-/button-6.0.0-canary.f172b0f90.0.tgz","fileCount":26,"integrity":"sha512-7PR+ItXM9v54H2/XUhDE/Qs7WdmHeZ+VTWGHhZwgMAYUAk+o3/BJ+IYiNRlq1h5RjcmyaOvWhFT/1ohn9deCZg==","signatures":[{"sig":"MEUCIQCCZL80Odz9zdyc6tTKj0lCHKHCbSAjcPzeIz/vagzq4QIgNN3lVLWXgMTSzvxTrl7Nj8xUIWr6C8iphYHJ+HCVCqs=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":368966,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJelkLtCRA9TVsSAnZWagAA80oQAJmXn7CtV+GhQwGUHetU\nDdoiwo/OrK3SJH2+FM5S5EyptO+UIaeddkBjcIm1RqNfOtX6nvzEQ57QlJoC\nyz1ffCpNrtwE5keOdjauCmrFGWw4PV8sQ4/k2QsoKDJqia8SzydrPQVU+d6S\n7P6GSwIQsvmcWk170P0mpY7vA0Bw5GUe5nuVnshESwhr1gAbAcyD16FrfZGj\nJfYB48xfDmc5n/I1zSvjIDfDg4CwGpIMIN+p2XKcwsBuIrNGvMzdKavcljpl\nX++kKmn2l+Yh8bQkwhWTmj/EYgcx1yhNR3YIMC0+s8WcBrrVvXVbTIw21Z01\nTfJH6kDm+MqSpMX2PkniJFjrBYhoIr4OLfp0qRuAYgEse+qYl/oTn0bV56LS\nw14WxqO5jPhRIuhtkS2bJhEQ8fJDtGLqFnw/DtPiaq79tX/v0lb6QcpeVruz\nj5qe9WBQuPZ3alLsd7aogFhrj3sttepX5lxLed6j9OWC+SlWfg4Opc9Q92RE\nXag18D8aeObF5zq+LT63fbqQVbR5TxNeYQkFPHu9qQjoxviFVKdPPzh9kojT\n8tARxHBXPj6Y2XRll8pIx+KvJ9+hKq5Oz1xzkuJV8YBSeEbnYRvINSvk3M+i\nnqq3lNXdBeIJD75WzDC4G9om5JEz/nyOTQ6WMVsjIUbcb99YoYJR0dIFHCbR\n3pZo\r\n=NhF0\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n#### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note**: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n> _NOTE_: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n\n **_NOTE_: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommended to\n always include it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color)` | Sets the container fill color to the given color for an enabled button.\n`disabled-container-fill-color($color)` | Sets the container fill color to the given color for a disabled button.\n`icon-color($color)` | Sets the icon color to the given color for an enabled button.\n`disabled-icon-color($color)` | Sets the icon color to the given color for a disabled button.\n`ink-color($color)` | Sets the ink color to the given color for an enabled button, and sets the icon color to the given color unless `icon-color` is also used.\n`disabled-ink-color($color)` | Sets the ink color to the given color for a disabled button, and sets the icon color to the given color unless `icon-color` is also used.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color)` | Sets the outline color to the given color for an enabled button.\n`disabled-outline-color($color)` | Sets the outline color to the given color for a disabled button.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web 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/density":"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/button_6.0.0-canary.f172b0f90.0_1586905837201_0.3352422650912461","host":"s3://npm-registry-packages"}},"6.0.0-canary.c02642273.0":{"name":"@material/button","version":"6.0.0-canary.c02642273.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"96a5db4fed80f7feb5b47d1ca080ab863a8d6dce","tarball":"https://registry.npmjs.org/@material/button/-/button-6.0.0-canary.c02642273.0.tgz","fileCount":26,"integrity":"sha512-WCvcZC4g0CCGTE27i3/CAzdndUYJqoPXHLNpEoCC1u0MZ0pN0SytfteH2KxEzam2YZ3IzgRPG5u7LGPAbf/vsw==","signatures":[{"sig":"MEUCIHkf/LLg42JFIA4dBHbTAUbQOCAWORkmw5UU0ckiDCL5AiEA8Hh203qQg1avlofaJnH5weDXyiJfFXZOst2GEEwtdng=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":368966,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJelzOjCRA9TVsSAnZWagAAp9cQAJbzRqlhA8QfGm9D0m7/\nqBu6GatGOS0Bk+nFBl4Ie2UfxtBRs+yhnoNCetVHGsuOoa0qvKJ4hpPdEmzt\nYrepxgK8eIZF8OwlbdVGnwd5OrcbKS75sa2u4kgDIoSiUlgs7G9tO6Bvue8w\nG4Q2QT51M0+jEjc7yD/fgKCDKShQQq0G2kMR2n3kHJW2u1NHpDPizidPLdI2\ns3e3+XNE7V3EWAnStI2u/bS+YY4TXYGO/p3LFGMvjOXYWgND9yjNqruJqXg9\n1LsVPPG1wKiv0uPQoGLCh4wuxvc3vXa49gtAjTUN5G3zdl2eaQ0b2UGR7b+q\n9mvOpfnN24Y0O+RSLf+B3sWj/s9haEnzkNLJ1U9zFr1DlgVGQkwFtT1q0SnS\nkmEQE0NBJKfI7tuPtejHsHTlCetjWEhyE5jiitloTEZNZRxv7C5hi6b6tl7S\nylN1Vddqz7ACNTVrEIHuvbDhtEjfmyyX4NWK5+M9rWllEzwq3SJL6Aoq29wK\nn6lMCSP2MIpIG4k9nIEwd+Zg31hGlTEdhA4+fBMIGPrdNzQ0p1N/MZ60uuzR\nFXoRJ5+27Yrl8OVZYXGGj2egZHSpxcQwi4JRhyKIlfKPb12t7rbOwJ0rRLI/\nEKEbp8u76Uk1pCY6EMvItvA0MOSWbNcGLejZzgcox52pZU6LgfdPePcmAr5u\nr+ID\r\n=p/pS\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n#### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note**: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n> _NOTE_: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n\n **_NOTE_: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommended to\n always include it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color)` | Sets the container fill color to the given color for an enabled button.\n`disabled-container-fill-color($color)` | Sets the container fill color to the given color for a disabled button.\n`icon-color($color)` | Sets the icon color to the given color for an enabled button.\n`disabled-icon-color($color)` | Sets the icon color to the given color for a disabled button.\n`ink-color($color)` | Sets the ink color to the given color for an enabled button, and sets the icon color to the given color unless `icon-color` is also used.\n`disabled-ink-color($color)` | Sets the ink color to the given color for a disabled button, and sets the icon color to the given color unless `icon-color` is also used.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color)` | Sets the outline color to the given color for an enabled button.\n`disabled-outline-color($color)` | Sets the outline color to the given color for a disabled button.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web 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/density":"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/button_6.0.0-canary.c02642273.0_1586967458928_0.3670696781679632","host":"s3://npm-registry-packages"}},"6.0.0-canary.8a299b568.0":{"name":"@material/button","version":"6.0.0-canary.8a299b568.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"2a7d806be9578eac68a80550aa719f62f8a9c9b1","tarball":"https://registry.npmjs.org/@material/button/-/button-6.0.0-canary.8a299b568.0.tgz","fileCount":26,"integrity":"sha512-8JZBjXAmy31ojPUPIJzoFNE89/TLf1qNp8VYP0TpCL8T/DRgEsydc5WAmI4+huez+Eo4EYjQEVmOPdRB3MwGTA==","signatures":[{"sig":"MEQCID5/CjYme7BBepI9MsW/zrFFf9miAEF71bWzg++xcpU/AiAA5JxNPpMNW1gd1CQwlifbPywOiXmBmUaGlTKhLL5Gow==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":368966,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJel44TCRA9TVsSAnZWagAAGlYQAJiOvVNQjpToEJ0gMuyl\n+5L8X4sIB/naF58LvWw/MMwjo44997LE71qBdpF4+mmB56n8ZrPXLFIB0q/N\nvrL6KRp8VUxXUh9ZIv+nZr6t8x/fHsBz6yXXI79+1P+tJi9axwQSm9uT8PQ9\nLuWP5QBQTTXYPGvMheEu4ijfb5u4XfzU4+ZszYlDAk851qguBRL35tIDlUts\nQyvfSTEIqSDACZ+YdL/b7d8kQ6Z7zIAgsMCuUMOnyVtjpUxW6z5SJsgCD94/\ngx8clMmBucjNfX3+3f4V8WvwcnK9gdfowQcUtJIwMXzNI7xfGzIJAYisBWBp\n6wrT2RSBKY89sN5q1HR+hUVKZa5sWALTjrSBm7qJ5u1CIjUW3aQGfnkLX4WZ\nDGyEAx6aOoxRl++GmKQE/nUESB5pcqVT6LJLJHqK2HcN5b8sYOlWGFwUZm7H\nZfIk7dGk7eawSFnQIx/LGpjCAEUqlaUbo3Wxr/LgexRLSeOJwioIdMy4MCIA\nRa/caSZzTdPf/89s4F1pOQpft1LXHoWd9CPjeslNs9FkYWC1s1Yt7JzfIpK8\nHT+8bpr2hpG44e4Zg7BfsS+SBrUoQ706XG8eOy6aJDxlB37ZLTjN6IrqfPs3\nEEnKfoyMoIXkgsmbipxaOwNt2pJAPnzriEKb9luy/2A3RS1YgezLqnEg0EQ8\nxxJF\r\n=mevE\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n#### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note**: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n> _NOTE_: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n\n **_NOTE_: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommended to\n always include it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color)` | Sets the container fill color to the given color for an enabled button.\n`disabled-container-fill-color($color)` | Sets the container fill color to the given color for a disabled button.\n`icon-color($color)` | Sets the icon color to the given color for an enabled button.\n`disabled-icon-color($color)` | Sets the icon color to the given color for a disabled button.\n`ink-color($color)` | Sets the ink color to the given color for an enabled button, and sets the icon color to the given color unless `icon-color` is also used.\n`disabled-ink-color($color)` | Sets the ink color to the given color for a disabled button, and sets the icon color to the given color unless `icon-color` is also used.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color)` | Sets the outline color to the given color for an enabled button.\n`disabled-outline-color($color)` | Sets the outline color to the given color for a disabled button.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web 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/density":"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/button_6.0.0-canary.8a299b568.0_1586990611446_0.7281368607830399","host":"s3://npm-registry-packages"}},"6.0.0-canary.490fbdc09.0":{"name":"@material/button","version":"6.0.0-canary.490fbdc09.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"396c88beca39534ea12e6a0f2d28c7cc2a307cf2","tarball":"https://registry.npmjs.org/@material/button/-/button-6.0.0-canary.490fbdc09.0.tgz","fileCount":26,"integrity":"sha512-NdrPUGxNm8TMwKJAdnoJ8EflWT4P5V4KXFxhDBhTP170ooR3nwMnjTAp3ss2OWQAeflDfX24PXgcYDdR6z7IGw==","signatures":[{"sig":"MEUCIQCzrslSq1PSwP8JB8FsdXmJHzMao7N40ctfRjUrjgiKJgIgelxUhZg4OIE7wve/e491pdY7tpFaIaRwNT3Rj3TM3p8=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":368966,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJel/RdCRA9TVsSAnZWagAAtyAP/1mrj0gEaLzYg/U7XReF\nXWnWpI3UO67UiH9MTgta1cNgpkjPeBvYggMcJjiTCSDroIAne8G4Tp0pZeKK\nc+dWhE0CzU6QJ0fWs9wj8bq8sa6wvRgu+vYqQ9QNjwRuBD3Avx8CEMEE/cdn\nWNliEe1gWq1aP5zLLiHzZn+dKJNcJCgl/movJo+lV7m7GyE5W6EiEulBnxAF\njxKvlcWL66KxYoJQPVel6eCSB2cGsVqlAQAwd4eLxDDqUUCmKSUJZuiYWEJR\npS/KNpNKFIw/BWwB7WM2Z/2rsaJdMg+tee0V7cJeZ3rQpSG75YF/VCP3uqPi\nLr39W6XptiwvjKD9MScsMKXCZVhM2nmf1U6GdorCqcREU8NOyvYunQVYtRDJ\nlRqmbI9AFEKEGS0oBde6JLuaLUAJhxV8syJz4lFxxP1iKJhsDCTLq/xhAaS9\n+OxKrMB2a47vR/qbgMoCIOmnCqE5/Q9MALIlVj0vkeo4Opdp1jRV5+nAaQ2r\nbcJz+3Q/OF3tuB8aoU1aG0qzC+ab49zfm7Ofskk11QWv14i7abh4KVCg75k4\n3/mJMlMIvF32ZtjhPl0sfMrGpDtyEkVdo8p14ca7/zpiTlkCge+ieqWIjF1X\niTmgpxLQClYBDvrMkXe6XcBKazsTxVmkVcxGutuLqcFJlp8zFuHhVrS4TRSR\njh1j\r\n=LIsC\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n#### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note**: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n> _NOTE_: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n\n **_NOTE_: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommended to\n always include it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color)` | Sets the container fill color to the given color for an enabled button.\n`disabled-container-fill-color($color)` | Sets the container fill color to the given color for a disabled button.\n`icon-color($color)` | Sets the icon color to the given color for an enabled button.\n`disabled-icon-color($color)` | Sets the icon color to the given color for a disabled button.\n`ink-color($color)` | Sets the ink color to the given color for an enabled button, and sets the icon color to the given color unless `icon-color` is also used.\n`disabled-ink-color($color)` | Sets the ink color to the given color for a disabled button, and sets the icon color to the given color unless `icon-color` is also used.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color)` | Sets the outline color to the given color for an enabled button.\n`disabled-outline-color($color)` | Sets the outline color to the given color for a disabled button.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web 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/density":"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/button_6.0.0-canary.490fbdc09.0_1587016796995_0.23086999817348186","host":"s3://npm-registry-packages"}},"6.0.0-canary.f838c6e55.0":{"name":"@material/button","version":"6.0.0-canary.f838c6e55.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"49d2d4cbffa2477ad114cec19c036aa6fbda4aba","tarball":"https://registry.npmjs.org/@material/button/-/button-6.0.0-canary.f838c6e55.0.tgz","fileCount":26,"integrity":"sha512-nqnNLDm8f0o6h0GJgDlx/l3d0UjJ3l6yMWhKOTEsaB63mmyBWyaXVISvAkH/uR7Ne9kRgapG9YmxbTBB8+46tA==","signatures":[{"sig":"MEYCIQCwZYjfknl4et9UgxoclmmeF7W0Lduh/BUwSIHILWrwvgIhANcQF7LKwLH3ljJdUz3qTc31wOmRsrOUdXr9IFumZbv+","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":368966,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJemGsxCRA9TVsSAnZWagAAhDgP/2NiG0dsnr7QJ+W0ifGj\n35OQiCerthUqHyKymvpZbkoO4SyV60MYhUSDItSCwFMTybixEumqlOQhpbAG\nSDR+gsZgQV7Qd5Ex1cuEZf2t78AaihBnNtuL6mdTzztMsxnygRoKCaKaU9IS\nyMxYlj1B66IpO2lCaY7E8xMUQYScRG2+0+fhTVegsaJLqHwM8S19MyN1wm+2\nyvBeEFwGPDTAz5LVa+nHwo1lzux/nbAYvQovFBo09zyZkDVvKOX1KqNAa05n\nrde/eNmQDhWkSBDGKF9qOHIGfa+I/HixeEpjiW8T5xBEXoNDG6L0OS9aihoJ\ndm8tiiD7p0zx2IpiL63n+0BPLvQz+KzK5DLwCk79jviHiqK8Pf2Eu/cmkQHk\nIbYOzXEBaEKy91WfSm8Ehjf84yEHnKrC6Q7eh014483AJUUJOWZt0eCvrgL+\nD+j3oFrsX9LW2qXNYvY6RkHQ1dm5T7VYr3B/hXbM24d/fNuNd6cdo2FJUNWD\nBB7Tz6uTu+5clsjaHcvakRubRB/it9wGHiKoiFdlWFM3WUJeYjUrnW5RjTm9\nl3RPVQ5570tz3Fym04i5Npit5ScHh8D22T911pWIBYxs+E7pr2SrcrL/IX3u\njJUNv2/ep5huIi765x8zt+LAqZ7c2wPrzRyVe+4c0lZnYM37+R0dXdpgTh4+\n+wBV\r\n=G9lp\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n#### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note**: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n> _NOTE_: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n\n **_NOTE_: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommended to\n always include it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color)` | Sets the container fill color to the given color for an enabled button.\n`disabled-container-fill-color($color)` | Sets the container fill color to the given color for a disabled button.\n`icon-color($color)` | Sets the icon color to the given color for an enabled button.\n`disabled-icon-color($color)` | Sets the icon color to the given color for a disabled button.\n`ink-color($color)` | Sets the ink color to the given color for an enabled button, and sets the icon color to the given color unless `icon-color` is also used.\n`disabled-ink-color($color)` | Sets the ink color to the given color for a disabled button, and sets the icon color to the given color unless `icon-color` is also used.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color)` | Sets the outline color to the given color for an enabled button.\n`disabled-outline-color($color)` | Sets the outline color to the given color for a disabled button.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web 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/density":"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/button_6.0.0-canary.f838c6e55.0_1587047216962_0.5747216822064287","host":"s3://npm-registry-packages"}},"6.0.0-canary.ce6cb7024.0":{"name":"@material/button","version":"6.0.0-canary.ce6cb7024.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"1ab08c9e157774aad0e8d67b43ab9e571794f45f","tarball":"https://registry.npmjs.org/@material/button/-/button-6.0.0-canary.ce6cb7024.0.tgz","fileCount":26,"integrity":"sha512-MC1HvJa+zGTXJAt2tq4HBFtcB6QiTXYI6HMSUFn9JIwEVRuyNMlnRNYP1TzeCERfQ9Mu+uCs9VxG0pOTLeTnyQ==","signatures":[{"sig":"MEUCIGKt4yBSszzRaw+V+vtrx/f4QaL7hRd0HEK2dvOV8fLGAiEA0IfDSWCTkKEvHZ5Q85VI/tj7sANLR7QnGLHlUO5//78=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":369553,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJemJOdCRA9TVsSAnZWagAAgRcQAIkSr3SDnwU7mNSQKtwE\nvalnKgsgr1jAb3TNDk3Q04StLpQMsNNjvJ+EMu8UPhd2d3g6GgHsolIKvaZ8\nmwexXXe6cHVIC5pfsbFoRFv/xqFLxRp6ke3/zd183x5LdevWnoShcyT3TSSr\n5mGPLRC8bLOC7Pc+W1V6e4OfdR0Q9CTg8lAfzYt4aqafHRnFsZnSLWbA48f0\nDE5ek8zgDJiD0C0ymrPMm85elwmxxZ2rtOQfYZPGYMeTy9U/shTZ6exZXSo1\ny0E6h0AEBCabdlJksfnm344hb+CpcNnhtfJvT0weDo+PTSAye0bh824eWuR3\nAqhDgF9lmuek3VJkBhcXaQTUwQOble6Rcj+uBVGMztbcAr4r3l9leU07OkEW\nOfU6fnhyCEVxzQxA6ZRsZ7Hs5qPWgs5hxeYBXjoD/ml9fEI9ijTDvuVvtZDf\nXD43ndgZmztvDWAASqx8HzMEGW759KA2C/wYWYZP5mE0waP4oTEQqDZg4BsY\nVljWPx8de8yi2QxnAPx3UBq6SOMCU/8DTm8xaPunEKQoYcVaoxGdEaup9ATr\nbydR3mTzL0QQVw1r5iUj3V61JwgwZtpyUlhO4efWS1AYUHKgXdXz+9ymSXOd\nvgnwjg/xgN22hRnCIQ3Z4cBZHEqBZYy2iNQbopGE0KriOG/9ASTP6mZS0GBY\ndMU2\r\n=vrHA\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n#### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note**: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n> _NOTE_: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n\n **_NOTE_: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommended to\n always include it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color)` | Sets the container fill color to the given color for an enabled button.\n`disabled-container-fill-color($color)` | Sets the container fill color to the given color for a disabled button.\n`icon-color($color)` | Sets the icon color to the given color for an enabled button.\n`disabled-icon-color($color)` | Sets the icon color to the given color for a disabled button.\n`ink-color($color)` | Sets the ink color to the given color for an enabled button, and sets the icon color to the given color unless `icon-color` is also used.\n`disabled-ink-color($color)` | Sets the ink color to the given color for a disabled button, and sets the icon color to the given color unless `icon-color` is also used.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color)` | Sets the outline color to the given color for an enabled button.\n`disabled-outline-color($color)` | Sets the outline color to the given color for a disabled button.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web 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/density":"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/button_6.0.0-canary.ce6cb7024.0_1587057564405_0.9368527541450291","host":"s3://npm-registry-packages"}},"6.0.0-canary.0ab62a65b.0":{"name":"@material/button","version":"6.0.0-canary.0ab62a65b.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"1e86b777512f4c727b08a94764c3ee3b4b3d40e5","tarball":"https://registry.npmjs.org/@material/button/-/button-6.0.0-canary.0ab62a65b.0.tgz","fileCount":26,"integrity":"sha512-0aZ+cAhBzQ5aSk4w/fSaCzZFQ0vyOoGQczGNaeo5zYM+qGJCFl1YYI3rz20eczX9dlCIoot97tIEZZyLGfLvyA==","signatures":[{"sig":"MEYCIQD4IWgmq7XXfGyzIqG3epjrFoOxQfmGLNBOmeFEIjqosQIhAN2emyu9zCUVeTuJr0p3C7QK+X94EFjAJCW7df25bBAJ","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":369553,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJemKnzCRA9TVsSAnZWagAAYboP/jVBi8Se650PickBZwCb\ncqUtP66UeKH2QFRdvh8xmfpyUEeOvCPIGzwraWyb6LtW0gEC4yxnoaCv4U1a\npaNSVF+yEOGq1w6nu82WUNYX/rqwyWL/kiGp8wEb/ZpSbn/FI2NvT9mEaJpR\nQG5O4M78vh+/W/i2a5+656OZLX1/H6YHqbMlB7h1eAl6GvIhUCpqvLuP9OKY\np3tTNFGAbYKeyksx1gXCHgivuJQ6y6GuHzEZO4dBfpGwHn/grIVIX1QHFJCf\nyrWqapHOpF/Glc3b1vLzF96Cn1OHDsezTuJlspEoV+xIgcWOBw+yNqUbaj2B\nziuOCeoOHwbfZy6sA/hPFaX96rZvG5+u9PZZHPKgFnMv6svHStQUniCO2PKK\nzjWWbW8TP1RYJdg+UkSzhqlsRM+vuHRfrOwoxiQsRxrrS1g4s96z8PWR1WF0\n3gZOtf1h9q1swJerebSZpKvKRvxDQ/fwP7FbnXr0sIqpdDiggTIa1nrBr6LB\nlpJ36ArFt4XND5VynxTWUrEYLwRlOXIPkgydYYZZYkQ60w/SfXz6+MgXFN8d\nrt2prhDI0CzBgv46LzsBEaG9J52KicA54wPVIsLUQl3we6sP7MgE3DYPBvET\nq0pARcqcjDtaSoiI2vIro41z3bs70xO5fowMb7bLSV4QRph0KuTZhStO19ed\nKgNR\r\n=8vn7\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n#### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note**: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n> _NOTE_: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n\n **_NOTE_: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommended to\n always include it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color)` | Sets the container fill color to the given color for an enabled button.\n`disabled-container-fill-color($color)` | Sets the container fill color to the given color for a disabled button.\n`icon-color($color)` | Sets the icon color to the given color for an enabled button.\n`disabled-icon-color($color)` | Sets the icon color to the given color for a disabled button.\n`ink-color($color)` | Sets the ink color to the given color for an enabled button, and sets the icon color to the given color unless `icon-color` is also used.\n`disabled-ink-color($color)` | Sets the ink color to the given color for a disabled button, and sets the icon color to the given color unless `icon-color` is also used.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color)` | Sets the outline color to the given color for an enabled button.\n`disabled-outline-color($color)` | Sets the outline color to the given color for a disabled button.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web 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/density":"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/button_6.0.0-canary.0ab62a65b.0_1587063282454_0.36627665486622485","host":"s3://npm-registry-packages"}},"6.0.0-canary.ca61b656f.0":{"name":"@material/button","version":"6.0.0-canary.ca61b656f.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"eb7de0548c8b91a074bb12c22b707c36e4564d0a","tarball":"https://registry.npmjs.org/@material/button/-/button-6.0.0-canary.ca61b656f.0.tgz","fileCount":26,"integrity":"sha512-ytMuSlwv0hby/4FUwujE5c6SyWxTCFvV8yxu1r8X8+4UrRapgL8SxdzdpNtx5Wqw8Q43loMrwIJJLwzWBXbVXA==","signatures":[{"sig":"MEQCIDUGEc1eHXSiwNTr/5sYvnNMFYMYnE0quaUdiPMBx9ZLAiA5kQNjblXGK3vh6FC8W8VhZjobmhJqzM6sqRZyTbXDzQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":369553,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJemLlQCRA9TVsSAnZWagAAgMEP/jYTYPOXx9N3qzHPr83B\nKrrRl/dTOoRtrrYlpp8N+Hhsc98vkbMJrUK7tvIjnn3lUeLM3l3XXlK03k3m\nv/icAm2f0KthAFvRfwf9rtYOva096NrzUFcv6hLmNaIPnqgXOpyIaszz1HN3\nPilMJR1nUB+7a9BJ2MdRj285NhGV4+wPtOz/RoLA8VDfM+Bk1TqN/njixM63\n95npvKPlnk5+ZhO7H6jQ4EBQk1Z2og5zTnI1suQq4xT2DZRRXtEAuAvJnZgq\nDcEtW0EVwIbtHdc1SV45DLIj3ZQmqagDYPBBqWQ8iiFf3zkwGmJ6+B9mUwuB\nYt3IWWGis/LhgHNVC7UjQNsUi2P2nC/KD2ZaEa4K51q85cz3PfxCxusv+Mn4\nTNxUtAQdMyJ3GGOHFVwqd/p+vKH9HTML+CVHd+NkwupSsIhy+C8n5vqYu8vW\nnJRlm7Kbi93gXXPhLkpFtCYmkVytO/67R2qztMe9JoFIfKNITSjrG3GnTvKc\nAeMSeTPUUjzYCNo+VFe6QtwgyY/3NxuSUaaQkxucKH0jFSRjHSHGV8uHOsvG\nxHZ1X47Gm4ZXsnV/pP2k44Hb3vqXl7fJlcLFTObu5RInNUsp3DrvDPbq5Hom\nTIA3SOXeaRo+43QOtHBcCHkSqZJ3pHWCCsob6m+RUv3iUvXNeKatrwZvPS7X\nTcGQ\r\n=/8xG\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n#### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note**: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n> _NOTE_: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n\n **_NOTE_: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommended to\n always include it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color)` | Sets the container fill color to the given color for an enabled button.\n`disabled-container-fill-color($color)` | Sets the container fill color to the given color for a disabled button.\n`icon-color($color)` | Sets the icon color to the given color for an enabled button.\n`disabled-icon-color($color)` | Sets the icon color to the given color for a disabled button.\n`ink-color($color)` | Sets the ink color to the given color for an enabled button, and sets the icon color to the given color unless `icon-color` is also used.\n`disabled-ink-color($color)` | Sets the ink color to the given color for a disabled button, and sets the icon color to the given color unless `icon-color` is also used.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color)` | Sets the outline color to the given color for an enabled button.\n`disabled-outline-color($color)` | Sets the outline color to the given color for a disabled button.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web 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/density":"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/button_6.0.0-canary.ca61b656f.0_1587067215547_0.9664644793448323","host":"s3://npm-registry-packages"}},"6.0.0-canary.45a6615e3.0":{"name":"@material/button","version":"6.0.0-canary.45a6615e3.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"7f7a67236e1e54a72535fc114a8e81b7312eedfc","tarball":"https://registry.npmjs.org/@material/button/-/button-6.0.0-canary.45a6615e3.0.tgz","fileCount":26,"integrity":"sha512-yLdMy/OOXoJBvuKQWi7a20R7a75+tCcc73e4be1+eAqcLFJSr51rGxpDJ9LobX+2/fwh0/vRTLDcX/XH865nQA==","signatures":[{"sig":"MEQCIA41tFwl21MpI6b4YOqJcO6V89Z1mG5W+wNHS38g8GztAiAwKrFYuUw6UG3+9mZU2njewzz7PMTRgujvv4cJs8OdIg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":369553,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJemMEFCRA9TVsSAnZWagAApEwP/2rPQR9iwqyYTz7505pP\n+21sBuM6VnCE4EssTCv97bLLbBgryZr6hsp4UiWmZNjVi/uSIrTLmLosMTKp\n6kzjWKlqxoMmnINnFx39zavX4nRNbuUSSloOsywrIn9jK7AjI1bUPi15z9Dp\nlFtCl13zAMcJXh+hiWYM0V3SyDu9FRN52LE7lNUL99PDDbFoqg3F1DTk7nY/\nOPdtPx1IPTzj6SWhZ0tk/16mdWQe6kqGWZN+cnYMRHkSqEFd2zVfZfKT/Een\nCQa+lfwdhbZz+PsOeYq63Se5+U5oiKC4R/W5An5xdkiusEOGXZSqvLVF4tjY\nO2ETRvUe+I2A2wdl0ZwzSolQuitVmH+/hbjdjL/jXWe2dOBlL60XoCkLXuIW\nPwAT7pzupTAzBYfz8ZN0eDEdzZs4n0CoXSk9rUoZlDt9Kv5mOsB55Ota6lah\nNSU7YKu35hQg2daN0x7FV3gssNaTh4VAz/OZk/0umh8iwJxeuHPRGv8VcDFv\nSac+/XDzMhpXv6h21ljlq5OaoZKxwkIAK1BRiDu1Mp+abL5vNHX2ig+w3369\n7eT3XlIZ+hrRLVqaKL654m6n0/dlbyPMkm3F8QrKHa+C0cXRy30D0oQe5cvs\nzcixZ8OZud3kmUgxHIDLzh5JfqDtNhBBn+FmDU6KZ2dI8WQf0uYWCm9et4Bb\nu44/\r\n=ToKa\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n#### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note**: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n> _NOTE_: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n\n **_NOTE_: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommended to\n always include it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color)` | Sets the container fill color to the given color for an enabled button.\n`disabled-container-fill-color($color)` | Sets the container fill color to the given color for a disabled button.\n`icon-color($color)` | Sets the icon color to the given color for an enabled button.\n`disabled-icon-color($color)` | Sets the icon color to the given color for a disabled button.\n`ink-color($color)` | Sets the ink color to the given color for an enabled button, and sets the icon color to the given color unless `icon-color` is also used.\n`disabled-ink-color($color)` | Sets the ink color to the given color for a disabled button, and sets the icon color to the given color unless `icon-color` is also used.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color)` | Sets the outline color to the given color for an enabled button.\n`disabled-outline-color($color)` | Sets the outline color to the given color for a disabled button.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web 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/density":"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/button_6.0.0-canary.45a6615e3.0_1587069188939_0.9009641999363054","host":"s3://npm-registry-packages"}},"6.0.0-canary.4b04cdb0f.0":{"name":"@material/button","version":"6.0.0-canary.4b04cdb0f.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"2e3e9a4e19986dec8c48a0bcef6911446dcf7676","tarball":"https://registry.npmjs.org/@material/button/-/button-6.0.0-canary.4b04cdb0f.0.tgz","fileCount":26,"integrity":"sha512-eJCTX++STqOsSCinT8oCFrXBEzzDF1CD9ln7VG/PmmUQdrcClqk1rlL3m1PuEOTmXaZxwXpADIpA4gDoyuJjuQ==","signatures":[{"sig":"MEUCIQCZNenT5aOxAl8KvIyco/tmVFoolRlMDnrsCxbkgwsHIgIgC1eZ/ty2PoYrijO+hEQdZJ9nEbjz8ums1bU/jLgM3Us=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":369553,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJemeo/CRA9TVsSAnZWagAAcBwQAItmd6rN+Lpw2XlpfW4u\n3HQY3UH/WxFJT/TX5fmpxDAziSkPUbC1hp6GgKX2Kh4KFO9x+8WpE9ppT4vS\nDbH17IhmWivKM/5KQ6DoYA8aDWIdF+L0R1PjGZtodSWADI8jQwLSZK/iL8y8\nadvB/cqooyh0s1qAPP2NTKjTFffFv2eNYOVzGwifPT+6XT3/f/RryIKf6UWT\n70G0bBgl5aTEmPsnrBkztpMYUikWJ/AHKK89e9HWI2EivA41Bns6M+B3awOX\nJdQtu3VJlLWNHFrFIhxJ+UN2LpLakNRyG2Syzzj3n5EV64Kep3wSKjXEn7es\nkwhi2HZWxjW1IB2+5rsEY6o3wsP/WEAyjvq02w1Ok8WXyt/Tgnhbc0+iDPju\nW1v/Mdyc22iuPGE0qSJ8inTMUUOI1Fp44Tgy+Ph5jTSG3UqM8x42YWZm5zJi\nvN9zTGEJ/yLpeLpVBUL1bMxR7PQ1d5+XLM2VPFURdmEBDf3cf7/zAOpZcS54\nQ2RsRI1CcTG/E/phh8DSRUBf1jSbaAi2duaWftNEuj2A7JApcxSrYyPuDCpC\nYqAhDoFgMAufqybm0z2ib2DAcuBcdVjomSlcPaXfb8NuFOiJMeatqWjJP7zv\npke7KePFuhuA773EHV+EmByixJFZJOqcOH3LHqezEaxwyZAVx0X3nwAiwoxA\nz/Tf\r\n=h89g\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n#### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note**: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n> _NOTE_: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n\n **_NOTE_: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommended to\n always include it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color)` | Sets the container fill color to the given color for an enabled button.\n`disabled-container-fill-color($color)` | Sets the container fill color to the given color for a disabled button.\n`icon-color($color)` | Sets the icon color to the given color for an enabled button.\n`disabled-icon-color($color)` | Sets the icon color to the given color for a disabled button.\n`ink-color($color)` | Sets the ink color to the given color for an enabled button, and sets the icon color to the given color unless `icon-color` is also used.\n`disabled-ink-color($color)` | Sets the ink color to the given color for a disabled button, and sets the icon color to the given color unless `icon-color` is also used.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color)` | Sets the outline color to the given color for an enabled button.\n`disabled-outline-color($color)` | Sets the outline color to the given color for a disabled button.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web 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/density":"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/button_6.0.0-canary.4b04cdb0f.0_1587145279123_0.9600873051226395","host":"s3://npm-registry-packages"}},"6.0.0-canary.b273afa93.0":{"name":"@material/button","version":"6.0.0-canary.b273afa93.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"3a29ec6c00403b8c67a2ff793920fb779841f9dd","tarball":"https://registry.npmjs.org/@material/button/-/button-6.0.0-canary.b273afa93.0.tgz","fileCount":26,"integrity":"sha512-RUYaMjdtdwViZvZHCKoO8e7u7oMV8QrAYfYZmW1UNDD9aSaBhIEJBX3YHUaZ7JIAfGL77uoG8/9gkKLoKIdEtw==","signatures":[{"sig":"MEUCIAmEP7inzKbyHVUaKVRN0LlhLi/aalNlZuxpy1Js3uGgAiEAyXvN9HHRahe+SvPFIeiDy9ZWtS2yo4JGD4QHq/IIBN4=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":369553,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJemjWuCRA9TVsSAnZWagAA5TAQAKOcjwWGxcuIUzjEwvEc\nnM9l7dI7SwCHPhETLodzqH/uj7Ec73pHEMqvgAkVTnutNEXSeMZzZu9SDhea\nEHoLsLDR0AyRj6d0YXiP8Ckht6kCvSwLxiXOEurMaLD5l4fsHwJtmKUJRpSc\nMHU6DJbrEFp4nv84z+IwYcIG2fbYj1c7ZCqOZj4Th11FDaRXeYYOI87mLxxp\nePVYMHqk9cDsN/YezOnZEKNVccFBGGJInOHT2xGqMuKKyEp798ujUWLVxbRU\ni+bROU49elahmaIZSSPCN/UdZ8RW6fqH83IY8hg0CoFwIiLPYdvNlQoZwwSO\n/eMzhf0ltiBKOwpvHh/xTGRYbCfzjXO9vUbxptqy6yPXNWkLN7r828KTT7+A\ncY19stu5DIIPiQoa54jQNaHDivRgYrcOWFd4foTowDAu2D/DFCsFK+xdxQ1a\nZKNw4HuOcZj1lMsBI5ReKE8MpVn5F26ItIEY7goYm64L0T597B8D3N5SboPM\nWrFM7M0kbgK+2C+Umk6Sr8x+jRooXtBiEfvvKkPHeL5yxTdYayYo57dVRkQX\ni+M7MudpXm5TO3ItPP3JByBLuCG0HK3H3NTENcVZLOb560ex5csbXjbC53Vh\nPQS7UuRTKSZ9TdOJytZq13QOz690z0e0sTfPQ7jyqWvWPTXNbAiIUSkb55Jz\nfSfG\r\n=tMXM\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n#### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note**: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n> _NOTE_: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n\n **_NOTE_: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommended to\n always include it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color)` | Sets the container fill color to the given color for an enabled button.\n`disabled-container-fill-color($color)` | Sets the container fill color to the given color for a disabled button.\n`icon-color($color)` | Sets the icon color to the given color for an enabled button.\n`disabled-icon-color($color)` | Sets the icon color to the given color for a disabled button.\n`ink-color($color)` | Sets the ink color to the given color for an enabled button, and sets the icon color to the given color unless `icon-color` is also used.\n`disabled-ink-color($color)` | Sets the ink color to the given color for a disabled button, and sets the icon color to the given color unless `icon-color` is also used.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color)` | Sets the outline color to the given color for an enabled button.\n`disabled-outline-color($color)` | Sets the outline color to the given color for a disabled button.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web 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/density":"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/button_6.0.0-canary.b273afa93.0_1587164589903_0.07984662004526677","host":"s3://npm-registry-packages"}},"6.0.0-canary.b70bc601e.0":{"name":"@material/button","version":"6.0.0-canary.b70bc601e.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"4e1708e6d2b31f312c9bfe2923e51598680800d7","tarball":"https://registry.npmjs.org/@material/button/-/button-6.0.0-canary.b70bc601e.0.tgz","fileCount":26,"integrity":"sha512-bWBsrI254fp4qXyKR59SYBHaOrVVihXJX8l2F1VHh+2M4DmD4fZbT7ynKbbjqGVHtq4R3/p8GQr4GwsyCnmPIA==","signatures":[{"sig":"MEUCIQCODhdlBS2fMaomd/Ci/nlVhkyDwWMBo9mS2z2MPn8KBAIgM4LJpBlWn8GWzvJh7yQeMZilJN41rNLZOf6sZDL+i4A=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":370521,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJemjoICRA9TVsSAnZWagAAaowP/3jmDLpQLR0ee5gnGdh5\nbkIur+9BLoZh52L9BxMvkx6Oxo5/TxpPEdsaLOMXc/t2RkIUSqOtrXX3UDCR\ntLVBIvr0aFPt13wlnmPREaPNmbBuqjvG2+oPhZUKhcIHUVWT21TyQVOG4CQJ\n7IqU+WZdAS4q40wdHDi6nw4bqKu3cl/l8JIVeRduWlNdNj5Ddiy7FAC1EU3z\nhGBvo0vu1FZibkeHi+LfzkDg6PW2WIXC/YQEnD3b8cWgxlzvdp+HYYn5pJpk\ndefJc38hs41xrAAmqWErVrQdzHBvZQtmta0sJwoG6L/QVumQpfIsyfrvoYaz\nz1SjiDyk0NnoEI1dvXVlQbl5ywGQ2j8dcEzpm9RqfJBefEauDzTDTDitqfig\nphjDd+tpCm92ZYbJKX1aiISOewMEmbYK3UXJl4itfuEHBQT1kzsrCc32tvoO\nMdg/D4VhajvOBYKa+hQvntKNiWnf/5k2xrznbY5ZIvASzp4ADUnmyy5LZ9nY\nH9ul/BPhMEmmH6MhWmJ3lZGcDbwNIeVbkX/pdoAFLzUofz29Ad1fjlA0lri+\nNQqW/TTf/CbFkgY3M9oJAZsbduI9SX3ybK2vXeI6fgm1YqI1OQl66z7KcH5l\nXqi/ymSLqEoB1KUem6etAyBEus0Kqq5NsO86erHvji2mOwJpMbJRG/JJkXi3\n1XeJ\r\n=bO48\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n#### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note**: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n> _NOTE_: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n\n **_NOTE_: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommended to\n always include it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color)` | Sets the container fill color to the given color for an enabled button.\n`disabled-container-fill-color($color)` | Sets the container fill color to the given color for a disabled button.\n`icon-color($color)` | Sets the icon color to the given color for an enabled button.\n`disabled-icon-color($color)` | Sets the icon color to the given color for a disabled button.\n`ink-color($color)` | Sets the ink color to the given color for an enabled button, and sets the icon color to the given color unless `icon-color` is also used.\n`disabled-ink-color($color)` | Sets the ink color to the given color for a disabled button, and sets the icon color to the given color unless `icon-color` is also used.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color)` | Sets the outline color to the given color for an enabled button.\n`disabled-outline-color($color)` | Sets the outline color to the given color for a disabled button.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web 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/density":"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/button_6.0.0-canary.b70bc601e.0_1587165704282_0.9604906323004452","host":"s3://npm-registry-packages"}},"6.0.0-canary.c4b4bba96.0":{"name":"@material/button","version":"6.0.0-canary.c4b4bba96.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"ca733834c2cf39be65718008138d1b463ef37db9","tarball":"https://registry.npmjs.org/@material/button/-/button-6.0.0-canary.c4b4bba96.0.tgz","fileCount":26,"integrity":"sha512-NI0K3MJl+OP9rHMjFEVQlqy4/0/6qKyISFZ0qHzbxcCUnTL8K04nZqWYsZgJLK9gfp07k60/xUrbZ0Zn5dppoA==","signatures":[{"sig":"MEUCIQCMzwYhqHsam+5sFmCURhIlPXk7GrTNQ4rS4xi9XeZziQIgemfSOnTtVxfyDzTs8YQJr2Y9E/9QoGb9dlM2GZZKOmM=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":370521,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJemkdECRA9TVsSAnZWagAAKsEP/jGfRFSqJMm2DS7NIAQg\nFkXvYuWHAA6zk16LKRlBqkd67K1uC5LbPCeaVpt4zEjskjoZcFV+ZE+YVK+z\nbu18V7Wk+DgZ92VThn/6GwNz5EMU2ofQY0riHTCTKN0DH9PI8R95BHOInaSU\ns5CPzR+t+SBalGrqrTvkUfzfoIhPTu59B/mfODSRp4hiwWm8KY87VTyQ2Ndm\nSs/pzMO1UjoJJ08i51WwLYGmpT8Ptt92HwPaBx1B0NucUzYMzLJL0kVhvZxS\nn+3yQiN0DS/Q+7bif+XAJctPjAKVbqqhab+OUbv1sArTc05W5vJ2m+nKZ4SP\nqATLG7yvgDV7prglKfbc3kdJZE32/t45/qe0j/pHE5tK2steYcLnEnOzU6I2\nFGC5Bntm86ySOr/PLN2Kq99lqlfPa+0X60138iap6zd2N6OU/LTwGxiahtFA\neCkO2JT+VF0dUBWEmkTN4H5AjJ0PH7IFuvLH26jCVnfpML1Ajei9+mNFNtHH\njKmnd2rMwckRegS6uxhnLA6AtyQPpaqko1zIzXZPEcTjq8n5o8m3ZJvkQB5+\nSNH4sx07edIU02JO7Vpo28ILmzaHqPpIkrbXbkj1O6Mb2O3l1HpC6xqLd0cL\nkYAFhty6aNmTKp5zeD/t8jA54XLh4SoqvCutYNQDaAMGxXcDft4QXVmWgo7J\nAAWY\r\n=ElYC\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n#### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note**: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n> _NOTE_: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n\n **_NOTE_: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommended to\n always include it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color)` | Sets the container fill color to the given color for an enabled button.\n`disabled-container-fill-color($color)` | Sets the container fill color to the given color for a disabled button.\n`icon-color($color)` | Sets the icon color to the given color for an enabled button.\n`disabled-icon-color($color)` | Sets the icon color to the given color for a disabled button.\n`ink-color($color)` | Sets the ink color to the given color for an enabled button, and sets the icon color to the given color unless `icon-color` is also used.\n`disabled-ink-color($color)` | Sets the ink color to the given color for a disabled button, and sets the icon color to the given color unless `icon-color` is also used.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color)` | Sets the outline color to the given color for an enabled button.\n`disabled-outline-color($color)` | Sets the outline color to the given color for a disabled button.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web 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/density":"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/button_6.0.0-canary.c4b4bba96.0_1587169092091_0.826971644649874","host":"s3://npm-registry-packages"}},"6.0.0-canary.6c1ebc721.0":{"name":"@material/button","version":"6.0.0-canary.6c1ebc721.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"c9355eef3083a6539352ab9c036ea35b1291b3fe","tarball":"https://registry.npmjs.org/@material/button/-/button-6.0.0-canary.6c1ebc721.0.tgz","fileCount":26,"integrity":"sha512-f3uN+mI4rbGp4RdG2OTCavoRgAQGH+tvQrUjbNQy9Kp9ln9k/HTEawl2HcHG1NbpbpWB1uFmfO1toulGjAEI1w==","signatures":[{"sig":"MEUCIQDw/gknN6Z2HiatNduTUtMIR94mDcGYV+kbWG7cZsOHGgIgWZzV2OuJAiXfazZbF+Pa6FFOzP5g0mgkzCEncWCijrM=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":370521,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJenf7uCRA9TVsSAnZWagAAAiQQAIbvXoa82SygBKmxq081\n5uh+d6DKTZUMun1B6zRztIETKDVPpNuRwTmpaOa1672lxt6i9/jPcpaaYV7A\nh88uGUDZy/kilEKAHQ7x5hRvCsEEyF6TfMQbpe3GSMbY7dDe9+pgzwUBK4jH\n03Y/3ulImK6d2I4+6cG6MqH/t8iCmJuNKK0W2wnQuUd3SSDDo0HZpsp6Z3x2\n9ykwE6zt/sVG24XqZ/lfTlehSTUnJxkvg1J0kUEHyZ95CJVjrDIVkA/JWNCj\n1OdMHOChTOD0hIDbWav1UuMt6r/XSO467WaXfgVYQe7OHG9GkerO31BMUPq/\nRpA4EnBXGPdWxVfuP7+xRwpJDddIxbNMXE4if5w62x4Er/EO/MiRPPROd3lg\nkD2VeFdXvzwcxdU1klKfkI409ecYx3O729Ux2JXkU6ynnYDt43TADube4R8P\neT1ytORFaE4/9Guj34OMle5L94/NAF0exBkPJkWGSrDyVn4SwWTyp7W+O+cG\nZZTJaoHVGe5ASaXmp6k/AWn+EhgbnuSACwQGFkGvsKsh6GezhJQfZ8eiwzGC\nVLvh3DJA72ONtKAjypJxdSzVU4/WlQGUxVWmmc4wwfZS21wLXIU6voH0Gwen\nUq/TvXjOD4PF27XZlBdVSv27AA4Q2cibVPq5KbVXUems+ZUhLNPHnpNImpSp\ncVxx\r\n=H1ND\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n#### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note**: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n> _NOTE_: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n\n **_NOTE_: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommended to\n always include it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color)` | Sets the container fill color to the given color for an enabled button.\n`disabled-container-fill-color($color)` | Sets the container fill color to the given color for a disabled button.\n`icon-color($color)` | Sets the icon color to the given color for an enabled button.\n`disabled-icon-color($color)` | Sets the icon color to the given color for a disabled button.\n`ink-color($color)` | Sets the ink color to the given color for an enabled button, and sets the icon color to the given color unless `icon-color` is also used.\n`disabled-ink-color($color)` | Sets the ink color to the given color for a disabled button, and sets the icon color to the given color unless `icon-color` is also used.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color)` | Sets the outline color to the given color for an enabled button.\n`disabled-outline-color($color)` | Sets the outline color to the given color for a disabled button.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web 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/density":"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/button_6.0.0-canary.6c1ebc721.0_1587412717539_0.2857809791639947","host":"s3://npm-registry-packages"}},"6.0.0-canary.9cff4318f.0":{"name":"@material/button","version":"6.0.0-canary.9cff4318f.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"8d7aed27838c541456fc39fcaa5bdf3ef36256b8","tarball":"https://registry.npmjs.org/@material/button/-/button-6.0.0-canary.9cff4318f.0.tgz","fileCount":26,"integrity":"sha512-7WKtWAe95CosjcE8PboZo2R6iVJeaoeks27jFytwooxVTzT5CjptkIVH4jp34Vn/WMOZFGq+ZgEwLv0VKujcZQ==","signatures":[{"sig":"MEUCIQDpJ8JVgUsrFI3QZfkOqbUOvB7RaP/JvyQ4Hb2hc4XJBgIgV26tn0lcCKr/JA120r0z5true5P1gJ0wIr5pDAAq0W0=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":370521,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJengxuCRA9TVsSAnZWagAAi18P/0PG4Rpd39x7BNIEN+5l\nyj1VJhSugXof671WcqFTWnhFhIxHpBBSMIdlZae/R70xZqtv/nVfJne5xPLk\ns15nj82TqDwhfMaat/3lXh3/pYcA00z6MaDPvRbg9EXOchAxIT9mQ4nLPc/K\n8RkCVaFPXUq4mBoblD4Fq3jjoJVPPw1YfhezYd2UcGFFo30HbaPfewxHbGMg\nhKYC8+NI0H0hSuo0E0EJysKHG3d7AxubKcVjRTFqNrfzP6kG1UmcQ47BgZIH\n3nFHvhMGAAfJSik4C/hOcHT8SJYCXn3qLOySoa/rLLrvZMc003FxvQSo9bcz\nOvUq0TVBr5e5OTY8R5a5A/w3t62wztbk/63LxPPs9LVU5nSM+1X9MpaIfjJA\nGXOr1fQ3pjTdXXgz7zophzpaXZejUaws62xs9/vv6iYk4IagalswELur30Ha\nz4Lb2JKXfDQXg+g3wErH+P7Xi8Af9Oy1TaMcVF7Hu5Z2Iiq1FrB82jdAvi2e\nnRP4E/FKTO5tkG0vAPZSCBNWp7noT7sZwlOtV4mlJwbMirymA9WhuknCr+M8\nAQ0CKkX7tXeGBZS3KmV9WxGYbihhbK/+HaEFsnJ9edzCdjxTJ6P3J8nCoziJ\nzupphxgP4pT3CemmJOXP/5iWKfMq/55PKSmsuSNae4g6GwJxqwUnvdftN784\nQx4e\r\n=/JTy\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n#### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note**: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n> _NOTE_: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n\n **_NOTE_: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommended to\n always include it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color)` | Sets the container fill color to the given color for an enabled button.\n`disabled-container-fill-color($color)` | Sets the container fill color to the given color for a disabled button.\n`icon-color($color)` | Sets the icon color to the given color for an enabled button.\n`disabled-icon-color($color)` | Sets the icon color to the given color for a disabled button.\n`ink-color($color)` | Sets the ink color to the given color for an enabled button, and sets the icon color to the given color unless `icon-color` is also used.\n`disabled-ink-color($color)` | Sets the ink color to the given color for a disabled button, and sets the icon color to the given color unless `icon-color` is also used.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color)` | Sets the outline color to the given color for an enabled button.\n`disabled-outline-color($color)` | Sets the outline color to the given color for a disabled button.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web 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/density":"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/button_6.0.0-canary.9cff4318f.0_1587416174155_0.7390690888262579","host":"s3://npm-registry-packages"}},"6.0.0-canary.7b4482402.0":{"name":"@material/button","version":"6.0.0-canary.7b4482402.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"c9f82a7747317773e767e657c20eb424835c896f","tarball":"https://registry.npmjs.org/@material/button/-/button-6.0.0-canary.7b4482402.0.tgz","fileCount":26,"integrity":"sha512-UajItJMzZbCDIYiDmarXNiIMQLZFESQe5goomLt5UwS4STJIi4YVEzL6JySjfRFMUMy/OS2iM63Ec3gGRoOUDg==","signatures":[{"sig":"MEQCIEdz1HkiCcI38x/lyUaYUBjYq1oJ7esrAgF8ASfb8oWlAiB6CW7okjudbWvj/BMlz86fbVD7R4FJlSJo2+1siHnMEA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":370521,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeniAxCRA9TVsSAnZWagAAyZIP/jwRiLKMJT7e7c0/Kxoy\nR/O3w81ZEXbT4DwDhnitU1C195Y1Pa/k2UfuG7av3P1J1p0TJmO3wzdA86nf\n78SjIpYBB3pl7V61jyEqzFent9IHR1+o7uZNVtQWmsWbJr+kin95q60g2COO\nez8xqH3iyNkgYpnHJ9nHR+QaF8ifiaPr+BGcLGntJ2JkUnWVINcAO2n7IIAQ\nVz6D50CuEuXa4lHhRchnuhJHhxQf8I+CqtMpmzgFv9ca7VWraBQLnXVPYz+O\nDtNYIagn47ddFq9OhyMUT4phJEVfALpw9BwGM1Oov3u/srPMV/sviIs0sFxB\nRkFz1+jbS1pHst+/OaqyEt/aQRPoa2wKHQaRZ8kl2prndibggTaVRrDEw4Ve\nKj+8TSFk+D2FjbEwXB+wd6iuMIer0yBCt+NVatC/Px/6rF9KHP2XCLWIIGof\nvK5bmbtPpqjK/oB8rcuYKxOFtjKXZUlW0ykLQ0CV0A2vCBDS2iXw9o7alHD9\n5VLsDRf22vVhHnKcQhdU8OTlA4UU0Rne7CupNJt2/mbbkHaWGq2xQqf8vhFj\nxlJSJ8CS3PgNCqMJc3m3ZGPSU4zkB48UUM3+aYbM392lUDoWaC4wATs0tvX0\nUCrjKygrOEiBGdoa0w5TuD/9qKW3cD67jc0Qpx9k9gS+QZvaNpkOw/3wLk2X\nQP+U\r\n=qEiO\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n#### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note**: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n> _NOTE_: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n\n **_NOTE_: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommended to\n always include it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color)` | Sets the container fill color to the given color for an enabled button.\n`disabled-container-fill-color($color)` | Sets the container fill color to the given color for a disabled button.\n`icon-color($color)` | Sets the icon color to the given color for an enabled button.\n`disabled-icon-color($color)` | Sets the icon color to the given color for a disabled button.\n`ink-color($color)` | Sets the ink color to the given color for an enabled button, and sets the icon color to the given color unless `icon-color` is also used.\n`disabled-ink-color($color)` | Sets the ink color to the given color for a disabled button, and sets the icon color to the given color unless `icon-color` is also used.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color)` | Sets the outline color to the given color for an enabled button.\n`disabled-outline-color($color)` | Sets the outline color to the given color for a disabled button.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web 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/density":"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/button_6.0.0-canary.7b4482402.0_1587421232899_0.3158412081756081","host":"s3://npm-registry-packages"}},"6.0.0-canary.deda86d8c.0":{"name":"@material/button","version":"6.0.0-canary.deda86d8c.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"f8c07e0c8e53a7aedbe0a8269aadb31e3beab74b","tarball":"https://registry.npmjs.org/@material/button/-/button-6.0.0-canary.deda86d8c.0.tgz","fileCount":26,"integrity":"sha512-n8g1BQsWCdhc7lc415miDAKR/O8W19QnYhT/dHg0nQuWvFhae7KiOriB/jj1tba0zsWwmNOkbCMNA/zxZgSJ+g==","signatures":[{"sig":"MEYCIQCOtiPTBurh6FLnCL8/e/yd86C0S2VGqcxPaztEuMxVUQIhANLAU6YYCnWJX5lAcODWCqJKjqKzwJQBZeCBtofk7CNv","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":370521,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJenkkeCRA9TVsSAnZWagAAQ04QAJxuiAmb2YXjJxdLZcqH\n4RER3HEpMQNeYpiLsW3bx64UASfhN4mFkyl6tgwMHpdm6b8ukmcc/23vE27k\n5acijxdlyjknvf/3d9OwGFVr5SGY7yC6aaIFtFtlzOxFVSFwy1AwZDxi8T4I\nGfDN0vU8u00LGAQEnMZZTZNmAAdFtgL/NnGK+PHJzA4fePlx9a0c/9Ek3uek\nWTvT51dRznufkS6/EMP71/0anXhnPtUl4z9NzO/aFez6XqeIDAliHnnQBapr\ngMWXC/0veZXhgJKLihWwxXGm+SbkAwKVlbjd852ELbM5RoXzKcnmAdQuaE/a\n+tsGAnPNDwje836J4eEERQ4f4LkG+efQf0wnsAx0OY1Hk/0L6EdO6LGDiJS0\nBoASKc9BwsZO/LlJFxHZ7WLlPBpVpyM4/udjsnT6sASD0+tnwFQ4bH49mNmA\n8WZZC0SgmEgVMvu7BRlvEdWqNt6c+hUM0i5/FyHpr53rrKcjD5xX+9hagrfs\nTYLz9a2jPyAd58RF5zp41ldVAG2RDF5viZJ2vi4OLxuxEZB0Q4pDJSZlhJN8\nrKNjOMnT63PxdsOuNKwpvWKuXGQCAfyMjC89Obd8FMDqhKACtaJ7TCHiwCCo\nKLwgENz2ZnB7Bbr5uiqjuUmeB2lgz9JFqFAiz91/U5GOrcchQ7YajQY6hyMf\nbTvD\r\n=Y0ZO\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n#### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note**: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n> _NOTE_: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n\n **_NOTE_: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommended to\n always include it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color)` | Sets the container fill color to the given color for an enabled button.\n`disabled-container-fill-color($color)` | Sets the container fill color to the given color for a disabled button.\n`icon-color($color)` | Sets the icon color to the given color for an enabled button.\n`disabled-icon-color($color)` | Sets the icon color to the given color for a disabled button.\n`ink-color($color)` | Sets the ink color to the given color for an enabled button, and sets the icon color to the given color unless `icon-color` is also used.\n`disabled-ink-color($color)` | Sets the ink color to the given color for a disabled button, and sets the icon color to the given color unless `icon-color` is also used.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color)` | Sets the outline color to the given color for an enabled button.\n`disabled-outline-color($color)` | Sets the outline color to the given color for a disabled button.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web button component","directories":{},"_nodeVersion":"10.20.1","dependencies":{"@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/density":"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/button_6.0.0-canary.deda86d8c.0_1587431710401_0.9244761378715229","host":"s3://npm-registry-packages"}},"6.0.0-canary.d10412cb2.0":{"name":"@material/button","version":"6.0.0-canary.d10412cb2.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"70647b34d8d59f7d400cccc2672ef2549026cfde","tarball":"https://registry.npmjs.org/@material/button/-/button-6.0.0-canary.d10412cb2.0.tgz","fileCount":26,"integrity":"sha512-DTbLtWYdxfx7tRwNaHu98Tjhs6jQb9snfcLGgZ3D2VIOoPnPeXydAKo6gkZpWtUkj1d2WRnUUS3fUXKN7aeMKg==","signatures":[{"sig":"MEUCIECr1wI+mKX8UdKJXIkw1t/tWiku0NPwQMQeovFPqYb6AiEA1vjBxEIwPK7gGMsZp7jj1Vy2DklfxB/ulubiNvXIJ0U=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":370521,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJenzkECRA9TVsSAnZWagAAUaYP/AjxnT4QTJk/Uv2ufm2+\nvGlovmBVVNJA4zu79BkWlY+dEG4iUrSUBQQvRj+NYGDXU+6OoEbaR9/dfIC+\nA/iPTthhK/Xj3kku1tnPP4hz783oZSdLZKgSyVsEGWDX8c+rX+nKBMAzniFm\nvpLHfPfG6bisDz3dgwOUjVvSFuRMv37MK9DvgTQkItiRMZmuQe6slpFa43Eq\nry0BrKz2XpuC2J0eeMblG3O/XReN9ajFSKNK4lvrEQnCSPdvmleP5KD+VPpF\nJ/N2BHzhVT7C6/BIlaIhbUehBa+OnI/CuscBPjP5CfigrAVszISsjQZL16zd\nD/H3RfFSVcU66UwdsBLmpVLQRSUs9NUyIDTM8OwYCG1RBiTBCl9VZh3B/zMG\nr35/C14Iwy944zpD70P3Ca85xp8Hf5+/6/BqeCKKHB/XFYUy04roRg2Orh6M\npj16yEVG/xZB3CyILgnMmh0sANadE9PG/In7eMWsN5iaGVvnZW/nd9d0XiXm\nO7oSy5fICfCiLGG5YJIG0oj0rhVn4Kv8JMnBjXZFsKieoeJciAFt8Kvuycbx\nXsC0GXh1pn8bWeqz7myBzY4yB/ejsR1RIfA0c6vKb9agOENtYnt3ic+hN0PS\nKopzNB0iWcDjZwxMWs95eLtS6nHrPP7lv3+G4hz6B+e9rb7olGcQnuxiiqzs\nJvj6\r\n=YVd8\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n#### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note**: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n> _NOTE_: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n\n **_NOTE_: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommended to\n always include it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color)` | Sets the container fill color to the given color for an enabled button.\n`disabled-container-fill-color($color)` | Sets the container fill color to the given color for a disabled button.\n`icon-color($color)` | Sets the icon color to the given color for an enabled button.\n`disabled-icon-color($color)` | Sets the icon color to the given color for a disabled button.\n`ink-color($color)` | Sets the ink color to the given color for an enabled button, and sets the icon color to the given color unless `icon-color` is also used.\n`disabled-ink-color($color)` | Sets the ink color to the given color for a disabled button, and sets the icon color to the given color unless `icon-color` is also used.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color)` | Sets the outline color to the given color for an enabled button.\n`disabled-outline-color($color)` | Sets the outline color to the given color for a disabled button.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web button component","directories":{},"_nodeVersion":"10.20.1","dependencies":{"@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/density":"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/button_6.0.0-canary.d10412cb2.0_1587493123757_0.4163873920356571","host":"s3://npm-registry-packages"}},"6.0.0-canary.c141801d5.0":{"name":"@material/button","version":"6.0.0-canary.c141801d5.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"90fc0387c0756d612b170d4a2faa5845b57ce750","tarball":"https://registry.npmjs.org/@material/button/-/button-6.0.0-canary.c141801d5.0.tgz","fileCount":26,"integrity":"sha512-yY4ik01osYqnHDXxHEt2dUswFOg3Gw4V8e/k/RAv5BL0D+I54Nq1EDQ4E+jpK6p2HRzeGRXVL18AdXJaTlidXQ==","signatures":[{"sig":"MEUCIQDm4eIqSr3sY3Kp83TvJiIXSBpu4ZTz9h2/uBAsN3y11wIgBSYjny5vvMvUoyVYujEFk2UCdo1HglT3qV2LjXWD7zk=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":370521,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJen0yWCRA9TVsSAnZWagAASncP/2VXRSb4wHnV2p2PeCbc\nm9OWdjRrSXUEeDNrTFzp96p2blhZY835JYT2sCbW3ntRCjeiRVK9pQrrUiSs\nn7z35PHmED5EelcQpdx6etnHEE1pHbtggHFZxrdPErcDN07ob+DAt9y4dfh3\nLAtWTTr5xi7bMHzoGveYribMl3Q5CLiIxuygANVIkDLq69EkqnP+q7ecoZ6Z\nvZ8pmwk5V/YFt1oGSXGjbnmRL0PAtgypNRhftQXR4Y2DpadwG0ZyGdhnCX7v\nrotS+HIja3qydd+3VoYpgF9+zFow/2VfhYJT+3jFNUzHvZkzGha6b3tEwyKQ\nyqPOuCgA20IK7FnNoFDCee3vR81wzidjicIcIEAywO8CMNTzPkUtTLgIBpkv\nZsMTaaxP8gO493RyncDHHIeIVEFGFHshAX31jtM2rW22XY9IY7TGnpzbjo/a\nQsuSNIvFbIuLYU/zk/8FMcB0p2J5c+URuKfCY1tLkXmvBYYG7lVL1CWeA9ZD\n1/5jIXfbOcizuTrOC9VPRkCzqtxZBsj81khLxB9VjrL+GBJVZJpmXUK1yLLA\nh2tmxjm6oQQcbJmqRQi2wPuDe6hwfe89Doypb0Jbgpzl3W6rcpCBGXX95qEk\nl2cQRh/COzncf3VX81qLuVUADIuX9bbZ7vYTKMnVRe9atrbHmDEnZM7QaxkK\nU+X3\r\n=FS4K\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n#### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note**: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n> _NOTE_: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n\n **_NOTE_: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommended to\n always include it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color)` | Sets the container fill color to the given color for an enabled button.\n`disabled-container-fill-color($color)` | Sets the container fill color to the given color for a disabled button.\n`icon-color($color)` | Sets the icon color to the given color for an enabled button.\n`disabled-icon-color($color)` | Sets the icon color to the given color for a disabled button.\n`ink-color($color)` | Sets the ink color to the given color for an enabled button, and sets the icon color to the given color unless `icon-color` is also used.\n`disabled-ink-color($color)` | Sets the ink color to the given color for a disabled button, and sets the icon color to the given color unless `icon-color` is also used.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color)` | Sets the outline color to the given color for an enabled button.\n`disabled-outline-color($color)` | Sets the outline color to the given color for a disabled button.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web button component","directories":{},"_nodeVersion":"10.20.1","dependencies":{"@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/density":"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/button_6.0.0-canary.c141801d5.0_1587498133694_0.43007362895022005","host":"s3://npm-registry-packages"}},"6.0.0-canary.28d10a96e.0":{"name":"@material/button","version":"6.0.0-canary.28d10a96e.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"29edd747e38ee47615a528f44c5e75d0895ae040","tarball":"https://registry.npmjs.org/@material/button/-/button-6.0.0-canary.28d10a96e.0.tgz","fileCount":26,"integrity":"sha512-RR/MgUdJ6L3OwGlqzujD6sp4oA68d/VvPeJXS2itY9u4rEGHjF1tghIFQGwo/6aHI13lst9I+8Kqe+MRnS0Jvg==","signatures":[{"sig":"MEUCIQC3cE//dJpUL6/31Etj0Vg3owu6/qGK8PRYU3/dfxWOJgIgQaJUKXj5jkkkSCDZz5LEXlHGxvtISZItLBl23ZSlLEg=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":370521,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeoMAfCRA9TVsSAnZWagAAJkoP/RqrypAbRida3O8ik54O\nnc8DqEa8Tv4gHA3EqNG1f3KKT1PeABb7y3pqBAfHrjvPKmP0cjjgLVhGO8OJ\neGsVW5nrgN5VbdOrowQDyESaMI2GoRpLJQRfCg3L735deGrPFpmoW+kavIeq\n5yRub1UaUhL6sZx8BGC96qx+PVWYVkaX4uRFMKmXTUrf1+xrw3mLopXLIkKX\nWlY8TNLqg/iPB3NOjwblWhAOAyE4wmU3LpTGTCJPYRd2oE1WyZyZOkbVuJma\nZq90uQF08Y0S8JJsuZm2by/jU2QV++VaMT1YTQU09uuFMA2zL2zcCH36o/bd\nkY8LJL8bpFuNoqovVY72YpKK99bjTry5v482hLtzM8o/oVzD8d9hGMjilru2\nhlMOh71sZHDfpRwlcA9l+iEotBrrv/KHqq/npM0UqnWb5PW+SB0M5KFWTA4l\nT7n47NjAf/29P6H4f7Vb7XLcvLQwIupIn0B3SAjuhX2QQf1hlRZZx3j0uGgv\nU6+HyBYeAiMsWc09LJ6WEm5u4Bn829y8LnFilxK/3jb97opNYeH2nylRO4HE\nkAe/pX6Mbt1LfaLrvHrPpeNd2Qi8AQSc0bKskuIqZfT/uNmfesRkWli3oyL9\nPh3SB5BRrQDGYkpqH8eAjlyws8bHm1qoP9UOUp5wPbzhX4nbghxXRgD4iVOF\nWTvh\r\n=DvY9\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n#### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note**: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n> _NOTE_: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n\n **_NOTE_: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommended to\n always include it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color)` | Sets the container fill color to the given color for an enabled button.\n`disabled-container-fill-color($color)` | Sets the container fill color to the given color for a disabled button.\n`icon-color($color)` | Sets the icon color to the given color for an enabled button.\n`disabled-icon-color($color)` | Sets the icon color to the given color for a disabled button.\n`ink-color($color)` | Sets the ink color to the given color for an enabled button, and sets the icon color to the given color unless `icon-color` is also used.\n`disabled-ink-color($color)` | Sets the ink color to the given color for a disabled button, and sets the icon color to the given color unless `icon-color` is also used.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color)` | Sets the outline color to the given color for an enabled button.\n`disabled-outline-color($color)` | Sets the outline color to the given color for a disabled button.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web button component","directories":{},"_nodeVersion":"10.20.1","dependencies":{"@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/density":"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/button_6.0.0-canary.28d10a96e.0_1587593247300_0.556840529264089","host":"s3://npm-registry-packages"}},"7.0.0-canary.8540808be.0":{"name":"@material/button","version":"7.0.0-canary.8540808be.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"a80df552527cf59d21fcc619873ee67b245948bf","tarball":"https://registry.npmjs.org/@material/button/-/button-7.0.0-canary.8540808be.0.tgz","fileCount":26,"integrity":"sha512-HDuPVrPcYRl3Q1LKXAfBRuBNMWx8929F3GH91kKiOlkXD9tF+LXLy9Z8sM32EdMYr+Wd/Qm7Q6gJuSqP99//cA==","signatures":[{"sig":"MEUCIQDu9CPXJsYlr9CS/xPPyM23BlHc7/qWVB+kMtC3oBrkMAIgTDYFovZ9a3jFrW1eV4cTh2P4hgixAN5rgWG6qAr8q70=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":370521,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeoc+6CRA9TVsSAnZWagAAq1QP/2AXMKLylU1rWogIJe6B\nSUvFzImVrRA1UPcFbknj6tVEB5PAGofh3luS9GS0xY0qZZ0RBF2gGcFhOL44\nLRhhf266wc96OjDUtfWSgsxv1ngWZCBbc2/78IG2FsT3TfQaYxEo8pl3TQy0\n+PbmdppoImVhFqPBrqOwO7TYYzeGSwwtbZA/jRXGIHwaUnJWaOJxKM/PvdMP\n/MrAy6dVieBYc7OslE4bv2n89UGsQcVEOr0gzIgLl+ihALjuUFlkLT6yxQvo\nxmbcqsaLQNszo6R7fKmwFFpjhJPjihkl5yn3KqjsSBPOte0wcFwXYoUb6yff\nKF1wmPeQ1R7iRZcenwwcjh0jokR89fLPhyQWD6/AkKk6klj/B4xYGuS6wW/+\nArT8sVfpVVWCjOUzSAa9ARC3LPVhp/mkraYCovgr+Dq4NQdUMGdVGYehE3Me\nM7rxXpyi4F0SdCm9lL3L93l0NjKET0Vbyk1AAAmFr3iL+GfHXTEsuAcP7ajV\nWDDpozQHeiILmYJMAeHD4yMmWmAMQLWhFq1pmR7mztKfuHMrw4Y0RUt/wdaA\nNV853WRjxF03R9p6mVKjiPbcmyme6/GbYzEv9ATFTDTOMtTWl37QOJpQMVoF\ni5TqLdGBX+R2zEHk3wnRJwd14etmduybrlmHUvJo8Fj589rlmxLx6gI2XYL5\np+mL\r\n=9IAp\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n#### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note**: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n> _NOTE_: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n\n **_NOTE_: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommended to\n always include it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color)` | Sets the container fill color to the given color for an enabled button.\n`disabled-container-fill-color($color)` | Sets the container fill color to the given color for a disabled button.\n`icon-color($color)` | Sets the icon color to the given color for an enabled button.\n`disabled-icon-color($color)` | Sets the icon color to the given color for a disabled button.\n`ink-color($color)` | Sets the ink color to the given color for an enabled button, and sets the icon color to the given color unless `icon-color` is also used.\n`disabled-ink-color($color)` | Sets the ink color to the given color for a disabled button, and sets the icon color to the given color unless `icon-color` is also used.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color)` | Sets the outline color to the given color for an enabled button.\n`disabled-outline-color($color)` | Sets the outline color to the given color for a disabled button.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web button component","directories":{},"_nodeVersion":"10.20.1","dependencies":{"@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/density":"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/button_7.0.0-canary.8540808be.0_1587662777339_0.6331359358171533","host":"s3://npm-registry-packages"}},"6.0.0":{"name":"@material/button","version":"6.0.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"3dd641336030896c407ef30f1a855adccb26cd01","tarball":"https://registry.npmjs.org/@material/button/-/button-6.0.0.tgz","fileCount":25,"integrity":"sha512-Xv83A5dL5l8hQHM1gOeD/0DpjsbzPeZtrXBWvf2q0d1uN0LE52ocrTHXJnJw9zNudoaBTopTQDsFQEdWqVYlFA==","signatures":[{"sig":"MEYCIQCGrwBHJOrJ9uOPQRxNB+GeRBy2jmFUyW2tDDHJVJmhZgIhAK5LfOJgspvdVWcSWt4hcnBjEdI9d2DhZabqaalMWBmB","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":369817,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeoc/YCRA9TVsSAnZWagAA5VsP/2hWs00GcZEG5OIsgglx\ns0YMdx3ioT84tfTls5v8EI3O1tP88TYvKl9+KQlaKMvdOQB5tGlcgx0JwDYc\n3BifZkA8jYZIekWPkVLGRHy6/F7ylOCij0X20Cf98CiLpGQpQhGf6e7Bbekr\nK71kRNOIvZLfbkYZdA2nZV2XAi3SUzL36XvLPOxAOSO5fUJSSQ4Apbp0Z8Xz\nlKqH2zFkE5l2zXBUoupdrTH10FJcdhEvSbgyPrH/+ITHnSKmaySRqhb/40qK\nbFu1huqzWVULjgdPHnCE59xxOcrq+cVAdpZF/WzrormBrU6aVrFbJd1X89c7\n8D86vtzhR7x6wGK5UjEhDXm9mwn6lS046ScLTP7CS8i/HwKKdK9qqXet21AO\nExiM8PfXtmYuOC1A7niB9KSnkLDxewRd4BLgRFuS+BeeXyO78SsufDRFWN/v\noD5gb9AYbShgqk2s/J4XdDSks7taCnff846YlUe8h5dsWGdA5KT6hoi1Cbc4\n6Ygb2p0c1zgrkFyCYunHBtf4NpEoPb19npayBS9ThCGD+aW3M/PNhAHgJ/x/\nVg99S0AaiSRuHG7CAwmtpNYEoyxES29IJPDXibs+r0D3FpvACd2b5rRAaaun\nkhSpf7beNAh25Xoct7uyRHmy5lnmHPa3L6mXbZF26sGNLzDHPcOnIcRrG3jJ\nWJ2O\r\n=sq+D\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-button"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web button component","directories":{},"_nodeVersion":"10.20.1","dependencies":{"@material/rtl":"^6.0.0","@material/shape":"^6.0.0","@material/theme":"^6.0.0","@material/ripple":"^6.0.0","@material/density":"^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/button_6.0.0_1587662808018_0.6121816239042839","host":"s3://npm-registry-packages"}},"7.0.0-canary.2673adb74.0":{"name":"@material/button","version":"7.0.0-canary.2673adb74.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"3cc60aaa5acaa084165cbe85e5db00054f3c3dd3","tarball":"https://registry.npmjs.org/@material/button/-/button-7.0.0-canary.2673adb74.0.tgz","fileCount":26,"integrity":"sha512-FfeoCxKuTrsrwrApUk0mZ9TSKN7bQkZS9NPVmy3Ue/JLvJa3tbh/it7Zf8dkM9X8n8mt3GKtGo93wggAdVj8Uw==","signatures":[{"sig":"MEYCIQD8Eo2Z2s9ElRakyebVESy5WTinKYOxhzWpAnXwuIjXLwIhAPupJa2Y0EtO434ppqs9vWd0UmfRgGNvjGPhil+j+6F6","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":370372,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeohqjCRA9TVsSAnZWagAAqOkQAJPJ0TC6vdA8x4UqDs1V\n79WtuR+/gI95d2c55jmkMbhsXvn2bB5OcaEEulUuaDJnlL1Ndrh8uIxDrzj3\nSkDPiqFqhy7t2BMhjCHjSsQwUaLibZaP9Jn2+0mwf1W7eCAYBMHpohms7nmT\nfssPx8kSTHtLMOUmdaskkQ1gUwX3iuNbc5sg3URcZ/8huQAwiP3b8rY4C4/B\nDVUjxv2Zns2TaAGxIdFrzNENen2IPzru2wS/9OQNBLJUxgVaAWg2zETDXKXa\nDQYTX+IpKw7FfWyMTGlxEEGJx4uFrHfqelfuTyHNuzGqgZlpF45aiX+zaAZb\noi4eEPVFt7prKMuH/eI5QXw4e7r5wDla755UlQ4p9v++vue+uIoC6jRK5Teq\nPqQouZmCbDRXoJNwuhwELRmGEinnvXhCO2IUa0Mti5LcnXhfiOxdgDOKOHE9\nvWKSQpaT7/DqnbwiTbGDlSeqmoCQ1PwykQi8DFqURtHrixMB4oztcA4OmqP/\nNFBpMwZxhDJDpxVla4oROYyW4oVbj+/Lv1/1W7Gnxg5Oz5KLEc82vSg2oIRC\nNoCldW1ok+ZNtFUgVVEhjLS/XDDVCTmbMUVlrjtplXsWB8x0CgCVmXOlNZJv\nzGOV07cWXPhAtsKZuMtViMA5SnCsG1uRbGvAKbtSpfN69lc3Cnoy7J9XJl9z\nuIhP\r\n=zSLt\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n#### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note**: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n> _NOTE_: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n\n **_NOTE_: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommended to\n always include it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color)` | Sets the container fill color to the given color for an enabled button.\n`disabled-container-fill-color($color)` | Sets the container fill color to the given color for a disabled button.\n`icon-color($color)` | Sets the icon color to the given color for an enabled button.\n`disabled-icon-color($color)` | Sets the icon color to the given color for a disabled button.\n`ink-color($color)` | Sets the ink color to the given color for an enabled button, and sets the icon color to the given color unless `icon-color` is also used.\n`disabled-ink-color($color)` | Sets the ink color to the given color for a disabled button, and sets the icon color to the given color unless `icon-color` is also used.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color)` | Sets the outline color to the given color for an enabled button.\n`disabled-outline-color($color)` | Sets the outline color to the given color for a disabled button.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web button component","directories":{},"_nodeVersion":"10.20.1","dependencies":{"@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/density":"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/button_7.0.0-canary.2673adb74.0_1587681955337_0.7956537500511813","host":"s3://npm-registry-packages"}},"7.0.0-canary.b10d0d7f1.0":{"name":"@material/button","version":"7.0.0-canary.b10d0d7f1.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"f795f4ca39aa6933becff2761c453a613e479c90","tarball":"https://registry.npmjs.org/@material/button/-/button-7.0.0-canary.b10d0d7f1.0.tgz","fileCount":26,"integrity":"sha512-UdpgbpypMLD4nzXRCdxf7f8+iTCX29s7fhdUDYuRvntylD9IB1I0ZETJoEY3nH6I5/OhuqaMXXhCbMafxYgwqQ==","signatures":[{"sig":"MEYCIQDVFzNXHYp/3AWXfa2T5FSRyioTzTAC85UacBX+Wi0vTgIhAJiTLDd01KTHE3YcfeU1KJMuGMlz5WNJRdMMMku0TjmB","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":370372,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeojEECRA9TVsSAnZWagAADGEP/RnOUgRen9/c6KSZrAvk\nXf54pbOmq92Zx72oG3hPr1snrBhojdafUPGJ8Gcs4/qcuHTMdEZh5zjMHLea\nMwqFsJOquHDnySeiAyqC1/ZOp0F+emkvWfbMdF0zmnb7OhdHAxJjGMWD2wOS\nMhfHU88z/fGEOa1jFnteNz3dedbhODpyUP9nGTPHaVbLGdYDHUext2mg3mqg\nJOFueBJAp2tiMWoO2QimSE927j7qrWml3+X7umQZ3biGusxoorYCEOGsrcaO\nqxU7Y4B+8TaqOi3lcMsoOeNG2Hn/b02YZUhvoThC/bh8zvY+3PUCWy8SKZk1\nFtFoX/kzWdLGfxRVKe66GGiUJLUSz5tWKLGOp6L+NUQ05pfMMGgTzQOjXxg4\nt8ElofYoc7QM4dCoNFHaD/d2r6LVyDcJLZtsC6eK9zrQMLzoyDY5Er+AkZmq\nFzCnYnRbd3EisUM28tfqVzBiQC68+hgCm+w8fe95mRjfsai0FYn7haunYPPJ\nkUM0O56in08Lb6tsz7RHTDXlLUy4P3yct1CC8A47sArbU3FxkJNaAIdtfDcM\nFVG6gaJQb1bNks95aEE6+Fqth5hlMAEBl3/p1JH/mYBdjTl6aI0yRGvkOONR\nNalsLpg50/ADiFRW9HxRpeaJYM3+g4WJHCxF/V5beM174sbiCDea7fqyIh+E\nnsOY\r\n=eVDn\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n#### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note**: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n> _NOTE_: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n\n **_NOTE_: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommended to\n always include it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color)` | Sets the container fill color to the given color for an enabled button.\n`disabled-container-fill-color($color)` | Sets the container fill color to the given color for a disabled button.\n`icon-color($color)` | Sets the icon color to the given color for an enabled button.\n`disabled-icon-color($color)` | Sets the icon color to the given color for a disabled button.\n`ink-color($color)` | Sets the ink color to the given color for an enabled button, and sets the icon color to the given color unless `icon-color` is also used.\n`disabled-ink-color($color)` | Sets the ink color to the given color for a disabled button, and sets the icon color to the given color unless `icon-color` is also used.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color)` | Sets the outline color to the given color for an enabled button.\n`disabled-outline-color($color)` | Sets the outline color to the given color for a disabled button.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web button component","directories":{},"_nodeVersion":"10.20.1","dependencies":{"@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/density":"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/button_7.0.0-canary.b10d0d7f1.0_1587687683473_0.9152544227777384","host":"s3://npm-registry-packages"}},"7.0.0-canary.3bd8c1bac.0":{"name":"@material/button","version":"7.0.0-canary.3bd8c1bac.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"5024bb13233fd990da1278cb7397454f0a70bfe0","tarball":"https://registry.npmjs.org/@material/button/-/button-7.0.0-canary.3bd8c1bac.0.tgz","fileCount":26,"integrity":"sha512-Qw0uAnOCY2i39/mnIODaNcJ0bS+kyet2Wr4wPC+GPSzdjeqar0AfyoVw7QhT2zrFN24GMUM8PtUi4GuqfEWvaQ==","signatures":[{"sig":"MEQCIBxBdjLpgHGXqRiSFTW/CvC2XeUlGCtGVbvGNqvC6cUSAiAZ5bTl7tcYgLMuROtcFausy4EtD/O5/3larcNEfDGZyA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":370372,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeo1TKCRA9TVsSAnZWagAAvo8QAJsG9Vq1Tas3lLWjDEg0\n5KepJPgmqWA9fNHAk2Dm+5AC0Z3T9Y33wfoszoVE73GANpAbsYqRFYZJYJz5\nLq1K6K3Cr6PieuMA6fqkH6KiyI3uuqgKOOmfH7xm30A1YcACxGqNWA0uTM3u\nVuDzfF4uEq6U8C98FO4GTlXS4CdlydNr2n7MGZQBFfHjxmUZpGzDoTndf+Bo\nPbuA2trMCC9Gz/xDA28RHojano8V4/OqJkwEkLLeALzKcSQDFJc2mZI4JJ4U\nNF8q31a46+JQG768ImDnkFgjltU1S2byapcW4iXR9luK0caT/Ei+U3LhoyKY\nXixKKJnYD6a+BZHKBoY1LVtZqTqxH/EGoK08Qvq1t/XL7qq9AGrxF2am/SSc\nAYKmY/fWYU5YK68wq6xt+LsJyYB1nr8jCqZUgwGVfRU9A7LGjLWMFRkIo1s5\nJ5U12VZfNiPioZSEFo/TGFtak/qhW6uP6YXudDmnZdLFcsc443efCWzY75yG\naoAeSfzpn/6WjuAPhjWfa/y+cNyEDzlARZjSbNMlHRc2Bwa4SF+mJYLFOwmu\nsoQqLdXINZUNvvtwe0voI98VQWmqcD/p5ZYCzQTYHKTBySy9c1ZnvX3yGzdI\ngLthF4MuCuXsGbYoqtBz6VSaw4v9fGtn72kufA0oXxvNL2hmUYeKVC8y9+zQ\nv9mo\r\n=mPtH\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n#### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note**: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n> _NOTE_: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n\n **_NOTE_: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommended to\n always include it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color)` | Sets the container fill color to the given color for an enabled button.\n`disabled-container-fill-color($color)` | Sets the container fill color to the given color for a disabled button.\n`icon-color($color)` | Sets the icon color to the given color for an enabled button.\n`disabled-icon-color($color)` | Sets the icon color to the given color for a disabled button.\n`ink-color($color)` | Sets the ink color to the given color for an enabled button, and sets the icon color to the given color unless `icon-color` is also used.\n`disabled-ink-color($color)` | Sets the ink color to the given color for a disabled button, and sets the icon color to the given color unless `icon-color` is also used.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color)` | Sets the outline color to the given color for an enabled button.\n`disabled-outline-color($color)` | Sets the outline color to the given color for a disabled button.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web button component","directories":{},"_nodeVersion":"10.20.1","dependencies":{"@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/density":"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/button_7.0.0-canary.3bd8c1bac.0_1587762378032_0.08428761373250704","host":"s3://npm-registry-packages"}},"7.0.0-canary.b83c8dc22.0":{"name":"@material/button","version":"7.0.0-canary.b83c8dc22.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"9609ed7b850ffa72d10fb0367ca1aeda4121b7e4","tarball":"https://registry.npmjs.org/@material/button/-/button-7.0.0-canary.b83c8dc22.0.tgz","fileCount":26,"integrity":"sha512-UScmT87UvSABGHveDYbT38GQ4EtDKbFrqLV5JW2p04hcTpFDW3Hy6spd/l7F+x0h9hf9H3b02AwovAEajfxabg==","signatures":[{"sig":"MEUCIByf1tkrNAPmugh0Hz/zgnwjQTOeJdATJ5LkTtAgCtgRAiEAtYYcyNHVnL5PUFp6Kl/akYvuQnrE+O/6WR7oblUF/3E=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":370372,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeo1fJCRA9TVsSAnZWagAAKcIP/31O8w39vNPTXINukiCM\n989+EuOAmZSyhv9JW4ZBX7QkSwoRjwO/SLdwePXcDSn1jcg1ojtgpWlYNsU9\nPRZUuOMEaO/swfO+8O+6uogMi4fKF/ASgZRr4aJuBIA9G2SrSsgH92IpWUCQ\nnPE0BT5hi70Hxh9TyJ7SCIMwBI/5idLgvZStCgrcMH+H7KtTd6hDC0ygcz7p\nxvhBdu/lUQTBNp6ggrsyGFZCHDwx/4Q8jb8QVtFh/8LCLwyZy8CXe/ck072w\nPewReVSPx71dyDNxLN7u7tUSDj9v9bSUM6L0iYRB+Ys6yEIDxWsqwsXfdI2D\nHjZHhSs+L1bxt8Y4skzb7J+2YT0Kh8pxp2pYBtD4xTXN4OzTM4PaKAsCU//F\nE0boEzsqMn0CQZrRpr02OSWY3ixL47Dbl0AJO+9np7Y9x9RCVnObF3QIA8GP\neplSY3Myg7TQ8oH4DD30AUiTuoHXcMF0BpUtqIkfBjB927okKo2eTGv00PF7\nUi6oLwcihU2ZxrOJV4iWn5zZcoUbekZsNIfZKUWlwL+xpvehOqapf+2v+nyF\nzE+65OFiNEswvjQQ+pJnjjWI+RFn5JDep0Ix8WlGnUTydU0ggbAmGrTuOqK8\nX4SYLjfzXPAPj1iyNm5AhuOF8JdxdgCm+H/QocmlrRjGg/jPNDXUSusluJ22\nxfWA\r\n=GRha\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n#### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note**: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n> _NOTE_: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n\n **_NOTE_: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommended to\n always include it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color)` | Sets the container fill color to the given color for an enabled button.\n`disabled-container-fill-color($color)` | Sets the container fill color to the given color for a disabled button.\n`icon-color($color)` | Sets the icon color to the given color for an enabled button.\n`disabled-icon-color($color)` | Sets the icon color to the given color for a disabled button.\n`ink-color($color)` | Sets the ink color to the given color for an enabled button, and sets the icon color to the given color unless `icon-color` is also used.\n`disabled-ink-color($color)` | Sets the ink color to the given color for a disabled button, and sets the icon color to the given color unless `icon-color` is also used.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color)` | Sets the outline color to the given color for an enabled button.\n`disabled-outline-color($color)` | Sets the outline color to the given color for a disabled button.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web button component","directories":{},"_nodeVersion":"10.20.1","dependencies":{"@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/density":"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/button_7.0.0-canary.b83c8dc22.0_1587763144998_0.5064912725030655","host":"s3://npm-registry-packages"}},"7.0.0-canary.1b3dd846d.0":{"name":"@material/button","version":"7.0.0-canary.1b3dd846d.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"5791399889011a261d4b33055b850fcb63c141e8","tarball":"https://registry.npmjs.org/@material/button/-/button-7.0.0-canary.1b3dd846d.0.tgz","fileCount":26,"integrity":"sha512-dw/R48VHQn/TP0HK6jVcJer9Z56cTLeH8+w0vJhYDAtPX4trPHq2jgjM2LlB/wGMxDVV6UAP5iW0T9HUb74gZg==","signatures":[{"sig":"MEUCIQC2jedFDrT1UqAAeMfCUbw4vfVvAyPC1RiCUKPnItTeHwIgQ+Exg/Xin5dqBZ1ibS1Ras291ddRC4ZSW1iz+F4NIH8=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":370372,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeo4faCRA9TVsSAnZWagAAJxsP/19Npz63ReXGL6XH28SU\n3dF4MhxAHuH5HvRi45JT4d1KOwJGh3Wi+m1RHDXjln6JlRlRHKkieESmQyDb\nCt7oGkvrY6tbKKaroKFCL7mU1vm8O+TyDJx0bfAxHOLX1gDwcjeeWjSYyyxu\nK+Al46SXUTAlJVZ8nflvSOKwUY1zKRdm8rqobozitE8EWfgqYk3UFXyopkFC\n6S8kFjnJ9Ex04kFo1SYDYMfOIJJdChw04LsfF3ZiDc2Gh0rJ5jArhUi6XUGh\nALA1xUMlqg0sRx7m1BKOdQG+tCsbyaDAYQ2HD2tw2wRZZ2WqvbrHNTo6B/gd\nvedQfjRO4oDCeqAyv7RU9nO6Bml92IJ8CmhJuJKveetUpPKHig+JldHUcRDM\n2uLU5dBBoYwPO+9AjJe8cxTXp3SRuKq7kkoXWsRBrtAY9qB+4OI4JuBzRHXG\nUuzB0zNdaHalR9gAZQPx6rOIInh5hTY8AbjNutU1DQVro/4oSE0zJouuj/39\nQMREUiaQNdolEE2o7MuShTbRcVdy9J443Cjbwnr8VFu+/QKPoLRRXGcHef2J\nIJjxsVzCitYcCHnYw12akR31kfoSdElkq2Azl0a/2REbIqE34N+i3XSUclGa\nY53qs0sI7Gcc0HIcgvlzdM/rB++o8kr25OKl0Bexw5e7FpB66snbG5OTcOd6\n9F9w\r\n=KvFP\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n#### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note**: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n> _NOTE_: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n\n **_NOTE_: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommended to\n always include it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color)` | Sets the container fill color to the given color for an enabled button.\n`disabled-container-fill-color($color)` | Sets the container fill color to the given color for a disabled button.\n`icon-color($color)` | Sets the icon color to the given color for an enabled button.\n`disabled-icon-color($color)` | Sets the icon color to the given color for a disabled button.\n`ink-color($color)` | Sets the ink color to the given color for an enabled button, and sets the icon color to the given color unless `icon-color` is also used.\n`disabled-ink-color($color)` | Sets the ink color to the given color for a disabled button, and sets the icon color to the given color unless `icon-color` is also used.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color)` | Sets the outline color to the given color for an enabled button.\n`disabled-outline-color($color)` | Sets the outline color to the given color for a disabled button.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web button component","directories":{},"_nodeVersion":"10.20.1","dependencies":{"@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/density":"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/button_7.0.0-canary.1b3dd846d.0_1587775449753_0.9772077831604915","host":"s3://npm-registry-packages"}},"7.0.0-canary.29debfea7.0":{"name":"@material/button","version":"7.0.0-canary.29debfea7.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"a13f7ff5e008b5839077351371b83913f0f10632","tarball":"https://registry.npmjs.org/@material/button/-/button-7.0.0-canary.29debfea7.0.tgz","fileCount":26,"integrity":"sha512-/QIfHMoY4Q9k0dxo/FXIzn3eppL6EUPgzfMp1tN2UmQPsfxjK+Ex7bxOXeAvr6nHGeuWb5q8rJ+IySBPPqqATw==","signatures":[{"sig":"MEYCIQD1iY3RsuJ5dwig2eMpk1LWd3oJSaPPLel157rfXGWNJwIhAKc9rU3Ry6lFOYnTaIpnz7qB/e9BildDdN5PAGgMMmcB","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":370649,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeptDhCRA9TVsSAnZWagAA6IYP/0rM/LERf2FYER5BeOOH\nenq3M6KBK9269wkd3RSitXEJxzvlSlOUuM2XFRqdiWsX5zl1ywmV387f1EnC\nm4sQUiVzyFkx8Ju7+8tOQat00bx8y7H7w++YB532WOvDc32OzhZm7yamYpoy\nE+VB4+xMnBGXhpKPvAelO9Zs4phhMmWHpavWnq+vlVJXSa0gY8t9d6P5vYYt\nh3vMtsFQrEtssBWqh2uvIz0uM41RAPMmo5AqSvFY26ZCAQxh+g4QBE3vuqxw\ny2UaXzqrQFhxYwdr+0weXPeL8KAhyHBRDTV2qNq2ExNjMXC4OrGza/mJQ4KF\nXFOCNKdJjwhm/g/dKtrT5C/akU20IOf4JMqmdJ5IBG0+SBGH2jm06BEYliBv\ngk5T66xd/ku5ElVbg7FVMf7fyZWVk685ObvnqmT2B5oJIm0tuJxjJK2LTVF9\nnn5QCMLE5q652GvMf2CBjYEy5x1UcQqXGbWsOtYu3kenn94DIB3prUMespyf\nDD18cVqVu+R7SpVRc2VuBqqbFe8fqkcQ/PKCdPjlzCno3GL4zMheJf6Z3mNE\nIxVzO8LgAkS/2EtENXb9ksiWVHqFjoVHmc6sz4uPG+fk8aqxAiVL4JukhkvB\nDkHkbBEdYcVi1jjeE12rGSPi8Pk7SQNAX8/3kwrOBM4uCCSyM4ZwwWkDHvFp\n16vO\r\n=D5Ch\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n#### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note**: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n> _NOTE_: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n\n **_NOTE_: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommended to\n always include it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color)` | Sets the container fill color to the given color for an enabled button.\n`disabled-container-fill-color($color)` | Sets the container fill color to the given color for a disabled button.\n`icon-color($color)` | Sets the icon color to the given color for an enabled button.\n`disabled-icon-color($color)` | Sets the icon color to the given color for a disabled button.\n`ink-color($color)` | Sets the ink color to the given color for an enabled button, and sets the icon color to the given color unless `icon-color` is also used.\n`disabled-ink-color($color)` | Sets the ink color to the given color for a disabled button, and sets the icon color to the given color unless `icon-color` is also used.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color)` | Sets the outline color to the given color for an enabled button.\n`disabled-outline-color($color)` | Sets the outline color to the given color for a disabled button.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web button component","directories":{},"_nodeVersion":"10.20.1","dependencies":{"@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/density":"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/button_7.0.0-canary.29debfea7.0_1587990752991_0.32824534157850094","host":"s3://npm-registry-packages"}},"7.0.0-canary.28d32f8e0.0":{"name":"@material/button","version":"7.0.0-canary.28d32f8e0.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"d7f42f684fb15f0265a6b26b4bdb63afc7c8bc90","tarball":"https://registry.npmjs.org/@material/button/-/button-7.0.0-canary.28d32f8e0.0.tgz","fileCount":26,"integrity":"sha512-6jDMmvtFLKfblvJ+wR//Mqvj5EL4lg+P+u4sx5JnIUhPETPPFQsGbVnsziZ+hsOHP8XU+jCrpRnLC+cM85FOdQ==","signatures":[{"sig":"MEUCIQDX8aV2cFAHIRa31Mnscn/JXrcie2woJTmupl82A+LFYgIgXYUREmgffdQDNuJ9Pe9MLXnLX9EcBoUUXTijXfYNbcI=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":370933,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJepucSCRA9TVsSAnZWagAAsVcQAJAxnY9QE/E3SZf/5cw1\nADoDwyyyaTZYp5W13FsieX82GrfQeUnA8G0b0gXE4vh61YLBTDUzqPYvfcpW\n2ift3HWSokrXM+FOWrrQiU5bM3Wtc8cG1mmfxGXNOuV7VncV3CSSDVFYaXfM\ngygLZ+W5ZqIA5RpwNnvm4lk6ucIyC/kumb+Gj+1H1ah4XNyZcd4jzV7NL52E\nRakKycTzXlJyO7NFkhRxgKJfFPZZv8d7i8AAJseXR2nHW7nJhWP2M27sTLO+\nvTbQm72YjeDaOX9mIrGflv2JCbo70elNrN0gxPglDiQ3W7BWfffPDOnLJ0hr\ncRw6YoqkKtCivQfIS5eulSB+3qM0a0K8qBhrR7RHOsqfKuD3/cXZKLdo8nyo\ne87oQPpoLkvQ6f6z2IAxtaC7Tft4d7LMV64NcCJLkZ8jjUVpzrN0pH7Md6cb\n9k/ikrdahGhq5k0y2LgIYuISMXjutw0Y9hQPJ2wpbdlBv3L5XqmdbuXhqxIk\nn4KtyBh3wUNxsfvjrovlKWqgc5aetlxtk2V9TpkfnP5zJIVxKH+vQP2gS91T\ny4G3qPnttLzaY7uyqUvjtUmuFywQWVwZW9RR42Lm3LsEz1y0xSX84QTb4UHg\nfh5JEJ0foNZ5Y/W0H+AbdaMMkVcjPDviPwRMzBff86zcP1JmU5tZtzcfIWc4\nJUkG\r\n=zskj\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n#### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note**: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n> _NOTE_: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n\n **_NOTE_: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommended to\n always include it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color)` | Sets the container fill color to the given color for an enabled button.\n`disabled-container-fill-color($color)` | Sets the container fill color to the given color for a disabled button.\n`icon-color($color)` | Sets the icon color to the given color for an enabled button.\n`disabled-icon-color($color)` | Sets the icon color to the given color for a disabled button.\n`ink-color($color)` | Sets the ink color to the given color for an enabled button, and sets the icon color to the given color unless `icon-color` is also used.\n`disabled-ink-color($color)` | Sets the ink color to the given color for a disabled button, and sets the icon color to the given color unless `icon-color` is also used.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color)` | Sets the outline color to the given color for an enabled button.\n`disabled-outline-color($color)` | Sets the outline color to the given color for a disabled button.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web button component","directories":{},"_nodeVersion":"10.20.1","dependencies":{"@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/density":"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/button_7.0.0-canary.28d32f8e0.0_1587996433691_0.40104970941274565","host":"s3://npm-registry-packages"}},"7.0.0-canary.af71cfdd6.0":{"name":"@material/button","version":"7.0.0-canary.af71cfdd6.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"a7f9b30a1d7537a58ab92eb1e57095928917b5d3","tarball":"https://registry.npmjs.org/@material/button/-/button-7.0.0-canary.af71cfdd6.0.tgz","fileCount":26,"integrity":"sha512-yXdprSmk3E/THPjn7pO+/5WFQ/rJUdWT6IODqshO3ptr7BRWrN8di0aqMhmH8z7skQ0T8F+WcGnwOs6LgEwfIw==","signatures":[{"sig":"MEUCIQC+sOzznTrpdIXdnn/MNy2946ABdnn2knrVCCR5qaoffwIgU8b10o0lheYBLnDAPC4PZHzcVGBS5jaAAYyBs8FHGvs=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":370933,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeqLmVCRA9TVsSAnZWagAASdAP/1lxZb2DiSWW3lZIbIui\nNGbipTStgin+f+s9RUyoTKFMWJ78Og5/1AVHNaCV+XleZuGmsv16sl+A1aYL\n7IOjdb5ycIKRrBH9WOFNtgjMEW97qgei+uh5zCrHrWQSz4OXWf9kbEAAlBYB\n70FBs6W/x2S93jjn7R2ZYZXtsiy/ioFCSYzXH9pKoVMnNxC0RKSlOlDupI2F\n25eMI59TbCbMNG4dRQvhJi+hDNznkAW8pHsZVN3ASvdg33ruCSlAxFTMrdoC\nWohqzQxfGUpIpJmfQMP8EdnJ+Us8MCn+Z+rjR9jT5LDYUa0UBF097w+SmGi9\nKDOTZ+5xJTrdSPs7aKHA+tMDqfp5QLIiRtjV8n1VwKXi+E11tK3cUN+w+l6m\nDOvBEJe6tED5uQit9iKqDIhE7tI9v7GaFHaQq0nTh0iqFORPgfnHzGQHNBGN\n/QO7hpvGq36YMBjV8Whu6j+BNjqZRiJ3A8kTolhYOMVITnXzizNJmVBqaL08\nbdDOFo/U9hDVNPnn5/Jbmb3RcqVYgiI8L+iOGrJ5AZ2/mZX38j1/dyxjW6zi\nFotmIXzgBLXYYxA5sUuNHG4ZykzFO/JCJU2OzjIiDXfRdO+4bXv8vqQBHWpd\nZF4J2wJQVUROIqZZa43tlMF0zlTQ8bx1Q/lRlSn5dwbQSuZ8bWGOL11Xl/U0\nVz/6\r\n=1JyF\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n#### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note**: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n> _NOTE_: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n\n **_NOTE_: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommended to\n always include it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color)` | Sets the container fill color to the given color for an enabled button.\n`disabled-container-fill-color($color)` | Sets the container fill color to the given color for a disabled button.\n`icon-color($color)` | Sets the icon color to the given color for an enabled button.\n`disabled-icon-color($color)` | Sets the icon color to the given color for a disabled button.\n`ink-color($color)` | Sets the ink color to the given color for an enabled button, and sets the icon color to the given color unless `icon-color` is also used.\n`disabled-ink-color($color)` | Sets the ink color to the given color for a disabled button, and sets the icon color to the given color unless `icon-color` is also used.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color)` | Sets the outline color to the given color for an enabled button.\n`disabled-outline-color($color)` | Sets the outline color to the given color for a disabled button.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web button component","directories":{},"_nodeVersion":"10.20.1","dependencies":{"@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/density":"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/button_7.0.0-canary.af71cfdd6.0_1588115861364_0.08657715066206406","host":"s3://npm-registry-packages"}},"7.0.0-canary.99d2fc961.0":{"name":"@material/button","version":"7.0.0-canary.99d2fc961.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"e0732b75b4c0f70e21b8d51aef1e1393003a12b7","tarball":"https://registry.npmjs.org/@material/button/-/button-7.0.0-canary.99d2fc961.0.tgz","fileCount":26,"integrity":"sha512-MpUIjXBOSlaPbnC0Gq2bmh5+JoA8uFIybreRXpNwDl/Xx9jyRZbnMzA7ZM8kiJ/siDgS54wYcwF6Ua+6WgyLvg==","signatures":[{"sig":"MEUCIDFQ0UeuP1E6a7SbxI/vQ6Fi0TXZUTsZg53hPVKjQKcnAiEAkE2t8XeJgrjxdSQPQqGxM/InzBUhPG837tm+KpFbfhk=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":372204,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeqVqBCRA9TVsSAnZWagAAzVcQAINF06b59KtBIDs93YPQ\nqZbWzOgQR02CIBrF47HHZdyI47ANpafZzDT8f1KEHZGQ64AsNhFzUgb3sy1n\nDp+CCsXsX+qpwrws4F6NxrX2+qrO2RZyXqH1Tu8rzJZ2GctTjhNRaxDfwYkt\nzxLqnp5VL5f9ccIBEYa9ZCheOZOZ77OMK72b57xgPp4OHSmRK10zG+FbfE0k\nR4O5IWy1cCgO+OATMgYIET+OrPZGhEyFdSXftZhKZRzj66gc3sj4nDU/pP9p\nRJZzpIN+gs6ifHOQEF/G26+yR8yUAmIxQta0aIERBsepMgFTsKzHPzc8Az0z\nErNm5+RpPdkjTBh3G0FXmPDseOu9RyKkBF53oL+2383EK1jm2mlATj59ymr3\n5JtUwI4eQ+nd7hM3DDVjZCFSofzX2u8unwJvUKZ0E7OMwXCbDROizn0idQwj\nLROEdoJMysP3qGIPwdOw8BN8bun+yYuJtXm+7LWUAyT9QCf0ixC1TQxipyU9\nUoYdr+FthNsuzrQYBR7i4nCg2lt7i8w9pYb1tDkWnJoyMerVUN84kn6OIhkh\n/VnZBPZxdkmlonkkqKcqdre1iO3SDSBD3T6f37Eoz2aS0MFU/65TQ9Cnwag2\nQHHpXlY41+ozJ/aP18zTwQqY9BqPJ1jpYw/2tXoizuwLpowwrs33y3MUYQKD\nqSBl\r\n=R4Om\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n#### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note**: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n> _NOTE_: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n\n **_NOTE_: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommended to\n always include it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color)` | Sets the container fill color to the given color for an enabled button.\n`disabled-container-fill-color($color)` | Sets the container fill color to the given color for a disabled button.\n`icon-color($color)` | Sets the icon color to the given color for an enabled button.\n`disabled-icon-color($color)` | Sets the icon color to the given color for a disabled button.\n`ink-color($color)` | Sets the ink color to the given color for an enabled button, and sets the icon color to the given color unless `icon-color` is also used.\n`disabled-ink-color($color)` | Sets the ink color to the given color for a disabled button, and sets the icon color to the given color unless `icon-color` is also used.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color)` | Sets the outline color to the given color for an enabled button.\n`disabled-outline-color($color)` | Sets the outline color to the given color for a disabled button.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web button component","directories":{},"_nodeVersion":"10.20.1","dependencies":{"@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/density":"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/button_7.0.0-canary.99d2fc961.0_1588157056567_0.7608833870434419","host":"s3://npm-registry-packages"}},"7.0.0-canary.0e052b24f.0":{"name":"@material/button","version":"7.0.0-canary.0e052b24f.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"eec81fec79cd96cf0e09381746232dc3a0bce084","tarball":"https://registry.npmjs.org/@material/button/-/button-7.0.0-canary.0e052b24f.0.tgz","fileCount":26,"integrity":"sha512-tyEgTGIlt8dM9ZvlNXrW4OaO3jQkcu9m7eWg3OqtEXCgeSvgkU+ceF26Q+VeRsYtmi+R0wGxFh6uuonQ7CeFpg==","signatures":[{"sig":"MEUCIBdY77f29wjxaS6IXKpiFHIx8G+10Dx38AkjqUVv1azSAiEAgOMG1WDQPD/ejLsnD/KgBn/K2AH2av1PPlUchgqrQrk=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":372204,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeqioPCRA9TVsSAnZWagAAscgP/0cDzx0vxOG94mLSDzmG\nkTWxkT+LVfJYkvfZtbzNxqr/PqPg7BKBZrti0maixod3wAl15JIJB2UpMyMl\njx70HVa6xUdEAaSB+PD04Z1TcblJx0MCl1YHD7lkiZEeyv7DoxIsUwM2Dczq\nTyOBXeF2MaZTvhtO6SXSYufrSEZVCIXwcFhLR38veZcbwxUgL8tpWlY/GkTZ\ni7z0N+8WZvq/u4pjrL08cl5S8UeBsmIIxL5d38iC3Q6cnWCiABd2pctATJrt\nZyLT9O92ZklAy1/CHynOBa7V/HtsOZrSrlJClHtPZcZCiL9wArgLb6MXQVwP\nz9/mm4jax+zh/EcqVKhJinh/F4GKHu4GVynrWAGuhqyadI7xrDGLIJn2BGUF\nujJ7FcUG3S7ikzJciCWW6dKLQCCbPSNJOJciAxpSRVUZ5nLaBk45Q2VkXh0x\nxftsGGrt1IZ/MHi81U4pA3ZoLDjudqOYejIsrUBnyPL65VYCCkw5kVFYvUlP\nVI9FupyldIhd/ewtO+tynCgqce02XoDpFFu5RpWkJ6gr3L17JkWu2H4hfgf0\nWzWvq/CC6nMrMGIlkbkAo7fC0RjSrko6wG51z5OaDWYQ76hHl6B0I/ANUDoo\nBqSckOXzIcRgYO5RxHgJ40KcA67qC2D+wCkTuNAticmKob+99LimmRB2Zgou\nKYrY\r\n=h5Ke\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n#### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note**: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n> _NOTE_: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n\n **_NOTE_: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommended to\n always include it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color)` | Sets the container fill color to the given color for an enabled button.\n`disabled-container-fill-color($color)` | Sets the container fill color to the given color for a disabled button.\n`icon-color($color)` | Sets the icon color to the given color for an enabled button.\n`disabled-icon-color($color)` | Sets the icon color to the given color for a disabled button.\n`ink-color($color)` | Sets the ink color to the given color for an enabled button, and sets the icon color to the given color unless `icon-color` is also used.\n`disabled-ink-color($color)` | Sets the ink color to the given color for a disabled button, and sets the icon color to the given color unless `icon-color` is also used.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color)` | Sets the outline color to the given color for an enabled button.\n`disabled-outline-color($color)` | Sets the outline color to the given color for a disabled button.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web button component","directories":{},"_nodeVersion":"10.20.1","dependencies":{"@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/density":"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/button_7.0.0-canary.0e052b24f.0_1588210190946_0.9529288730747103","host":"s3://npm-registry-packages"}},"7.0.0-canary.ff4bc632a.0":{"name":"@material/button","version":"7.0.0-canary.ff4bc632a.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"a73dd1aac60e6a5293f6032e0d417c845219bea5","tarball":"https://registry.npmjs.org/@material/button/-/button-7.0.0-canary.ff4bc632a.0.tgz","fileCount":26,"integrity":"sha512-iuD449Wnw3nGkNn+GmRq3W/uAjD3yFHEufFEmtcTGshk/AlqwxlnrwvP82sA+Hslx3zkOJKND8dxWKBLUnobxw==","signatures":[{"sig":"MEUCIQDTisnqLY6W5atk78wk1OzkSQbvH1uo6cIolKbAelp2sQIgGAxYWtzU3A+MOFw6U3qaVxBPIkhZ3E+8IkfGUV4ZTWg=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":372204,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeqowVCRA9TVsSAnZWagAA754P/i1ZU0733gjCuYzlOe7d\niMs+PMmctPbAh01OUZ+v0yTP3UHxSrJjegSYaf0VJvZSEPi8MegB6XxoyvXd\nUESqq9np6cFrS4BjvgpGxxwxkgXxNm03pA+Kaa/6uSGOyLSORs55+R8zXk9S\nDgaM76aAEbI1hqHEahNy7jL+rOrXk8ZJSG3MdAxm8OZrXLlaNxPOVS4GvewA\nOAFqDOGWfDt98jeaLLD5jpuCz0ZUSyAip4VP42/a+1F8hKekRdGrQneLeJX9\nAGkTx5EmP0+uHIi+PjZ4ynrQdAOyXFMZL0bKct4MoEkTYhWOl2LbEXlXbEMn\nKI/WRvx8HqPzl8y5beJjX4tF50O7peaJe24/5Hmi0LmbqqkmJ6dkk7zOP/tx\nFkGn85lhktB66ZMlo7qvhDesFcclUUVV0xoocuVNUxv723nBfXr46NlOZhh2\nkGijeAoyLXDM2sss9bfpdSEygiVhEiFgZ0Pa0Ai26T6shfm+cY1Od6F5eS0P\nI7NKv3XOT7k0zgojHcB1KmqzbYcVbVA+qj2TtCrWTnaPzS0WHucefEZDULM/\nIGKR9F00+MWuRmvhfPyQ44WhswrzubGghJPuxiptO8sDMfwnNYeK7YX0PAGC\nXUtn2n8bi8azQkyjVQ7CD7IH2C62wVVcez29VP9MR1/j5LgyrwMlQ4I/+OeB\nY0AA\r\n=mnfU\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n#### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note**: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n> _NOTE_: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n\n **_NOTE_: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommended to\n always include it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color)` | Sets the container fill color to the given color for an enabled button.\n`disabled-container-fill-color($color)` | Sets the container fill color to the given color for a disabled button.\n`icon-color($color)` | Sets the icon color to the given color for an enabled button.\n`disabled-icon-color($color)` | Sets the icon color to the given color for a disabled button.\n`ink-color($color)` | Sets the ink color to the given color for an enabled button, and sets the icon color to the given color unless `icon-color` is also used.\n`disabled-ink-color($color)` | Sets the ink color to the given color for a disabled button, and sets the icon color to the given color unless `icon-color` is also used.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color)` | Sets the outline color to the given color for an enabled button.\n`disabled-outline-color($color)` | Sets the outline color to the given color for a disabled button.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web button component","directories":{},"_nodeVersion":"10.20.1","dependencies":{"@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/density":"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/button_7.0.0-canary.ff4bc632a.0_1588235284692_0.7945872818295927","host":"s3://npm-registry-packages"}},"7.0.0-canary.b0f83d2fd.0":{"name":"@material/button","version":"7.0.0-canary.b0f83d2fd.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"f4c0ef3058d23c06bf748808f00ff26f7fc3a135","tarball":"https://registry.npmjs.org/@material/button/-/button-7.0.0-canary.b0f83d2fd.0.tgz","fileCount":26,"integrity":"sha512-f2twQZ4rpjZM56X6E7Vuze77Wcj+snzmnXp6VevQPd1OQxGSnAQAaZMqrBaEXkjYgqN+XoSfmEvBhU81yC6psg==","signatures":[{"sig":"MEQCIHqtOtq4bOnRFC/WEVx5v9P0iAyAauuUuP8SFGxJlRRcAiAYUQZ4ZKgLLrmeO94mrFWUr2Zn0zUkyu0TSpLQ6G1lPA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":372204,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJequGeCRA9TVsSAnZWagAA0i0P/3JwTxreXMZoMTHSgENc\no9B075WlKMF3lvuWeP47X5OR3osZAcqZjtkgV78FRiZCiBrFxIqP02MgDUEQ\nQlyKT6bRsCrtPR4d1t09ga1Qfsoo+cPLPbSxhw8BCe/sAZAwC/Dw/VT+nThM\nsoGqp8cJyVwxNcykvh05OXY7TvILmk2vGIPLkPQccJJf6xXKO8KiHe2dxI7U\nle3i2u9/TDLiOc4GneT+ktDfWVb2VOelOOsZIyUffvW/LH00truGiBTB0miw\n+Ag8ygES//n/3IOEFj2Ujz2q25ATnLd7OMvSBmg18tWoSk5RDYYqmQQh3gRU\nkQ6uoRx0zpvhWYdJs59mxzhVCW0gj9hKJLJf1be12WNCWQGTZyxRBObALbBY\nRy3QDFnCFHlw85KEx/Sj0ZVQf6i5uzsTGUf0XH6szt8SwnUTQH0DekPOVsiT\nTyToyUOkD3InWCAD0K9nCuSg+yghNnGMhUOXefg8g3/T9qCqUnP13Bzhzxp3\nKc1yTuJ/iPCeBfhG6dVZ1h9tAhyQsHMno0WDO0MoWQe6Zcft9CyWxqhiOjqU\n3TnNwEhLR/wiR9hLdhS6BnHHRQYugEgsUs0rHKIVvmvnzSv2tvTiVw5JKezw\nA4jVYAmbb3tTc/6CP6ppKcAOQE/HVCWbd5521LeBLA89rklTtScfMpe8CoKk\nL5yV\r\n=TU0t\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n#### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note**: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n> _NOTE_: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n\n **_NOTE_: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommended to\n always include it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color)` | Sets the container fill color to the given color for an enabled button.\n`disabled-container-fill-color($color)` | Sets the container fill color to the given color for a disabled button.\n`icon-color($color)` | Sets the icon color to the given color for an enabled button.\n`disabled-icon-color($color)` | Sets the icon color to the given color for a disabled button.\n`ink-color($color)` | Sets the ink color to the given color for an enabled button, and sets the icon color to the given color unless `icon-color` is also used.\n`disabled-ink-color($color)` | Sets the ink color to the given color for a disabled button, and sets the icon color to the given color unless `icon-color` is also used.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color)` | Sets the outline color to the given color for an enabled button.\n`disabled-outline-color($color)` | Sets the outline color to the given color for a disabled button.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web button component","directories":{},"_nodeVersion":"10.20.1","dependencies":{"@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/density":"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/button_7.0.0-canary.b0f83d2fd.0_1588257182161_0.9011412091096345","host":"s3://npm-registry-packages"}},"7.0.0-canary.e59906a57.0":{"name":"@material/button","version":"7.0.0-canary.e59906a57.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"3eb7882c2054113a0327978ff377aff68e090be6","tarball":"https://registry.npmjs.org/@material/button/-/button-7.0.0-canary.e59906a57.0.tgz","fileCount":26,"integrity":"sha512-Tphr0G3gpD6WALcjHYMVzkpOJEpiI2cSZs/Zb0yMgpG2CbIdRuyx+gfFgBZiMDgX0lhVWUL/7gtNYN8pOsyTkQ==","signatures":[{"sig":"MEQCID/herNl2UDyapJ9gvMGXQBAt472KBrg9e+dJ9676q6XAiAjXBgF6lNuKdtrQuJ7AhyZDZRxZV9nX8v1/h4QNaj6AQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":371287,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJerENnCRA9TVsSAnZWagAAU7kQAKAdqmNPcZAz4Zhz1Fco\n8u0vTAqNCRxlqsoq9VJ8UORgAYLu5EN+2sdjLn8BwNuDXrSdl+8uTZdaeoUT\nXPyrtb08wxx8dblfxY13rlCK4bfHylzC3L+ddxK+VnUbFT6K3y8KejduC00Y\nSzJgNKOoUiNYq9H7JYDULfuFx/0yRCDPio1PfdoA6XYzMnsUPYbyVQAWUFcR\nQe1yRxN96j118TN+2LYj3LJQnBWn3q6W3AotqdpmR1ATm6x0I9p1ecMx+wH2\nI/HFfPyyJ3xQmKE16Jni9PmNRWzWqsHQMUN33dU6/Kj2JR+8RtpwrToGMoxE\nstLG1QvtvrYbxys6kCOO9bdVTEf9m+EYkboNEoLpW+kRXgs4lvOGZKnqmpWj\nuFRkt0JEbsiN9jTEj6al1olzXmT1seINLnkXXCiFdgovXL6qRZSc/hSaKUp7\n1F7UfjcGjyxV+YxAQnxjKDA/3x7nJN6V8ec5GWhTFtw94cGlzubE+4wIxmBy\nkeeVdx9devLrOPhXjNDYx5XuvgcxJyiEGRQlD6gND953jfK5NkBCcSZCmlJR\nLTvyNYfIeUAHy/aV8dPOYOXO97Hr5XTouw3jExbDdbP/HZgF1Ahqn9I8v3h5\n4u047xTT7Duq0J90Jd6gHLINP398LKJRv6qIRgJTHaEw5yr7mIb/sqO4lNma\nRZaQ\r\n=4EPL\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n#### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note**: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n> _NOTE_: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n\n **_NOTE_: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommended to\n always include it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color)` | Sets the container fill color to the given color for an enabled button.\n`disabled-container-fill-color($color)` | Sets the container fill color to the given color for a disabled button.\n`icon-color($color)` | Sets the icon color to the given color for an enabled button.\n`disabled-icon-color($color)` | Sets the icon color to the given color for a disabled button.\n`ink-color($color)` | Sets the ink color to the given color for an enabled button, and sets the icon color to the given color unless `icon-color` is also used.\n`disabled-ink-color($color)` | Sets the ink color to the given color for a disabled button, and sets the icon color to the given color unless `icon-color` is also used.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color)` | Sets the outline color to the given color for an enabled button.\n`disabled-outline-color($color)` | Sets the outline color to the given color for a disabled button.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web button component","directories":{},"_nodeVersion":"10.20.1","dependencies":{"@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/density":"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/button_7.0.0-canary.e59906a57.0_1588347751364_0.9046460846838158","host":"s3://npm-registry-packages"}},"7.0.0-canary.c02712b59.0":{"name":"@material/button","version":"7.0.0-canary.c02712b59.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"929c5a228c4775e45416f46430257ae264b43976","tarball":"https://registry.npmjs.org/@material/button/-/button-7.0.0-canary.c02712b59.0.tgz","fileCount":26,"integrity":"sha512-Gvjuf0sGFH6tqzx6cbcV3PyTi0VmGZPKEvgeIxlOMFZhfIAhPp9j/gBNRl4UknMI3j6el4P4oFY9GPl3zYAQeg==","signatures":[{"sig":"MEYCIQDrEfZ6Qv72vDImiGbAA3s3ljfdqbVgcIdMK7GrMZ3mLAIhAJmg9nCQDu7gRceQ7dslfpBwwR1b3k3UMWkwctO3ZBJy","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":371287,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJerGm7CRA9TVsSAnZWagAAn4QP/jorVy+NjE2j8S2+XgBq\na3s8w6KWXTGR6WpT3QicyWcUCt97m7C18GnYGtsANMZKJPInrOQkXoF6Iv6H\ndJEOxgRQM6JGaiRLopyxt6+zp65VUwajuHTlFdkyyOm+IJuoEjgJIW0C8jV1\ncspOdLNxrJZIbS7S5r4y7tY/rZWTv7kpF5KkUxdA8VzRsyAoWbgQvyD+xwGy\n+L7LfZhyf4jB66K79DSjM4mUM9ciopAY/7Qp6UfU8fEybdVB8U8nFKl6A+eK\nNpso1nTuqDy7CRB78Ea9yCHMbP/TdF3HJAQrBy1o4695b4CRmzm6/5LVRhpA\n1lkhNtEsEgK45YXCmbdMO9eEiiD2jpHzFuOH423cefyIvs2ChHgSybj8sgPg\ndWJWL56if0TlUc2nFvkyseDM8G1zXMwg1d0Zqk3nuyhO7r07PeN09jSTNwvh\nrZ4q7rSCh5XLIP5oKkHLJibyXFF2F7sSFwH0FTlnZiWg89GVqZHl9ssg5Uwa\nCfKAyBHdncUkKvNy7FODrhW6u4R6ek6xOHThJQmpgmcggEUt5IDQRZxtRTrB\nVrojZHK1O1I7Ob+vU8xZ1NRayph3p5CSBnxvBDG3sz4Ke4xcsc/9yUIPh71h\nztGQzBdN6OMWlPefsHFFXWQ+uq6JnkVaYnJgWusMfziIJHN9fQiEC7lFUDCJ\n0Lx8\r\n=VNOd\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n#### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note**: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n> _NOTE_: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n\n **_NOTE_: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommended to\n always include it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color)` | Sets the container fill color to the given color for an enabled button.\n`disabled-container-fill-color($color)` | Sets the container fill color to the given color for a disabled button.\n`icon-color($color)` | Sets the icon color to the given color for an enabled button.\n`disabled-icon-color($color)` | Sets the icon color to the given color for a disabled button.\n`ink-color($color)` | Sets the ink color to the given color for an enabled button, and sets the icon color to the given color unless `icon-color` is also used.\n`disabled-ink-color($color)` | Sets the ink color to the given color for a disabled button, and sets the icon color to the given color unless `icon-color` is also used.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color)` | Sets the outline color to the given color for an enabled button.\n`disabled-outline-color($color)` | Sets the outline color to the given color for a disabled button.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web button component","directories":{},"_nodeVersion":"10.20.1","dependencies":{"@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/density":"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/button_7.0.0-canary.c02712b59.0_1588357562552_0.44329549372879007","host":"s3://npm-registry-packages"}},"7.0.0-canary.15d65448e.0":{"name":"@material/button","version":"7.0.0-canary.15d65448e.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"ab190c86d37139a089425d7bd3bb1b7e914ced16","tarball":"https://registry.npmjs.org/@material/button/-/button-7.0.0-canary.15d65448e.0.tgz","fileCount":26,"integrity":"sha512-YG6hgzO4TEbs7e0n9gzEPtCYLF9nq4YZJYTDwlPwb5wdwz7YsajaiMy8cAYCir4PRpjbGxBjKR4txvf30qT7nQ==","signatures":[{"sig":"MEUCIQDvbmZxJc1HRq82+pJRHwBlW0TkFx1pOtZV4etyc10eUQIgYV7bqHzBt3QbecUEHzkxlxzfHO/4wMNvzExuhGMAVH0=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":371287,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJerHcKCRA9TVsSAnZWagAAfsgP/iZ0iXH+6yQEe2Fa7FUa\n6VOxxRLhjWFT/zFjkpg/mb4FKLlbuLnbt9k155XQ3s/tZhRrF6Lzt7KGyMuT\nKJg62GGKVn9Ga9yRt8WXvX1mvsajSp7pcAe+v43mMW7URh3Uka3KluxzeZNQ\nlwDVWeuDgB9B0rUPBxX9joE4ychGaiB2NDJFVhYL25WmmOZme8G+xuf5koS6\nWMi6472fW8nzo7WYO9d73DyxJ/OU9Khlgm/HF9S8HBGhfU6vfyKWOwwrKuls\no3Byp2Ye/lcs9r1xY0qNLSBFFGF1WP6lJWYLnpjHhszavQcjLscQjeB9h7Jt\n5lFB9nylrDImOPdetMQBNO6/60yC0eTvLYPWskiG8JGUFZu4ZH/fRoAV03cQ\nQ3ebdM66K9OtWrmzGpmEdOvt+o1Xff9mLFJjHyEF2qVlKnvsmJGmS2iUv4vs\nOhIopHmbk/BosZwMk3SKcsmd5v4tM/CpZbzBkUE8g6LMRrkIxPpgGkLrOqxD\nP6icFS8MUaJAJKHlCc6k74UYDzINLQkDUvpUIYZwZTh9eWmS/Kn8qN8mkj+K\nsF5iJvE3c0qG6xx8vBlTFP9+XGLjENtJWRYPiCG3CVKjr7A2c5Pp3IXcFtc5\nFCF5giASytDg2ZnkDAJQZe5EEPo8OrPoNrmpiQD4/vojt61Zmxh8UboJLzhR\nbNhq\r\n=a/YT\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n#### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note**: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n> _NOTE_: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n\n **_NOTE_: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommended to\n always include it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color)` | Sets the container fill color to the given color for an enabled button.\n`disabled-container-fill-color($color)` | Sets the container fill color to the given color for a disabled button.\n`icon-color($color)` | Sets the icon color to the given color for an enabled button.\n`disabled-icon-color($color)` | Sets the icon color to the given color for a disabled button.\n`ink-color($color)` | Sets the ink color to the given color for an enabled button, and sets the icon color to the given color unless `icon-color` is also used.\n`disabled-ink-color($color)` | Sets the ink color to the given color for a disabled button, and sets the icon color to the given color unless `icon-color` is also used.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color)` | Sets the outline color to the given color for an enabled button.\n`disabled-outline-color($color)` | Sets the outline color to the given color for a disabled button.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web button component","directories":{},"_nodeVersion":"10.20.1","dependencies":{"@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/density":"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/button_7.0.0-canary.15d65448e.0_1588360969764_0.2654298701230908","host":"s3://npm-registry-packages"}},"7.0.0-canary.142b1549e.0":{"name":"@material/button","version":"7.0.0-canary.142b1549e.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"5dcb0ea47314c4c600d579fab01748b2edc88564","tarball":"https://registry.npmjs.org/@material/button/-/button-7.0.0-canary.142b1549e.0.tgz","fileCount":26,"integrity":"sha512-/bsKMC/gjdnn3/cbGUc3y3VjgqMrb2lwgTbRFw3vaVcJaJdiDjsqfKLlpDkVvGUchDCsHwDT/bPIS5bjK2kKLg==","signatures":[{"sig":"MEUCIQC01hfSe7iK4/qR/oI8Ciwe8rrPhctVi0xIFWClQg8oFgIgUyhHHviI0P//GBKbbPGnuEqHeeKupx3v8Grfolxem+4=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":371287,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJerKRWCRA9TVsSAnZWagAAzd8P/3Y9CjXF6wITNTNL8Eej\niTSXUaozFCaFjK0JGDuODyM6wmGKz/kqzXINDR4tKdYWecazKteiwYAVR3S+\nnS2u2OPW1Z9FRiWXvbUL1lS4OO90vJTlLyS9oxVjjxHk2YiRfzWBB5rL0aMN\nYlsh19CgPSmikA82svOsfyNdKtkc/T4SOLTpvCPFcyHhggjX32FfO3HXVwHu\nTLIuqi8z60sd2FxKCVi8zqci/uvtQcN3B9ePh+OQZyP7cr4VSiEYf/b2YFVI\nnxmEAADFPLD8EA5ae9aCv+as8SsMmhDCTobFXEYUWzk3HaYIEV4j4esRO/HH\n2BbBOsR2kPLGHQr4qau9j5zSbAnvKRzwN1Iof41plyjL3RwFnePsyw1gI4J0\nz1G5U5PxvWTSwxIGFwSfjRYryQ6NrpYqxrBc3JuegxVoDzK8mVmXYDefklIF\nnxg/STzZUiyYP1qgz0sedl8lg3ZDVxXuFL3q9iTbzwS04ZJmKbZTw8ydad+Z\nUfBU73Lxm/ekGgmCREQ2GFxLQB9F8VMgwL92MTz5Dof4GdhskgZ2nNZDWfVd\n0t+vwOO14bQQz2gQT/r658JiCykFwhqbQOryQkiOXop40K/q2dZS3TmjdH7R\nLItZwYuhA+VS5qOACj+Iwlx+dWJ5PtwhKjXQGTPomUlaGIBBQP5PzbB7RA2i\nUbbQ\r\n=WJ6R\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n#### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note**: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n> _NOTE_: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n\n **_NOTE_: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommended to\n always include it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color)` | Sets the container fill color to the given color for an enabled button.\n`disabled-container-fill-color($color)` | Sets the container fill color to the given color for a disabled button.\n`icon-color($color)` | Sets the icon color to the given color for an enabled button.\n`disabled-icon-color($color)` | Sets the icon color to the given color for a disabled button.\n`ink-color($color)` | Sets the ink color to the given color for an enabled button, and sets the icon color to the given color unless `icon-color` is also used.\n`disabled-ink-color($color)` | Sets the ink color to the given color for a disabled button, and sets the icon color to the given color unless `icon-color` is also used.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color)` | Sets the outline color to the given color for an enabled button.\n`disabled-outline-color($color)` | Sets the outline color to the given color for a disabled button.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web button component","directories":{},"_nodeVersion":"10.20.1","dependencies":{"@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/density":"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/button_7.0.0-canary.142b1549e.0_1588372566058_0.6201631067352376","host":"s3://npm-registry-packages"}},"7.0.0-canary.524b7b812.0":{"name":"@material/button","version":"7.0.0-canary.524b7b812.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"539c8240f8544ce481aa6fffb97aed6434b9d146","tarball":"https://registry.npmjs.org/@material/button/-/button-7.0.0-canary.524b7b812.0.tgz","fileCount":26,"integrity":"sha512-8DXdIhBK8wr/6W4v52sZ4Ob85KsGLUBlRuAGozOzBVMN6Z4lfBJ3uSNWp8VC8EEGBccKIdtRkBofKvH5JLHurw==","signatures":[{"sig":"MEUCIQCjio+hgxPWEAoGF0NF/j5FWOqNpJXTKiCSOCSvZwd3MwIgCKspKGZhru8+hUukDH/0Nyc1eOzILSCwstfuxnzz0Co=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":371287,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJery30CRA9TVsSAnZWagAAM/IQAKQahs9A9/2+jmf/xsTb\n2bDZIDvGCZLf44SglpFT6iSG5XEwNqycJ4C/pZwROh0O0bMwQ3+KeJ3xED/A\ndtrEdKkHjcy9mYV/MsH6YsMjtScnw8T0vKhpxuQnVPFLfAdbaa1VkNgcWN2R\n5vzs400dSz/OcJOBZc00lKdeJYnZIXrhKyEh0Dwv2y9DZZ6rfDbx/a14dOjd\nY6KAWtLJHtnOzDZ+JG8v3i7jKA1+EkSm8ux6Z5iAAlHYZMPBzuPD268RAk4i\n6Q0dzNjzMij8sqJXibLrfofdf7xc21i7e4WSTt2PRSwLt6icCmO6OOMNTUdY\nApI7aEcuTIVK5UNtclifwL7F3CC7PTA6+P+aBDbEwOzHeg4TZMeuKQK9Y/zm\nrb4JlwRBdGNzcxVy/4SYkvKfIDptsiahxNYLCrnROffBm0fNteL1irRvrRzC\nOGcFj3TL/V2QBKb9V+s7Hl7yqHABoFAidoxaBux7bYnG5CNY8qAveBPu58zH\nbetOXrTmZS9QTSGq6z3ac0zb2EwxuGoCqFvSO/1Nw7+2z6N0NuKT7hkgk/pw\n+MMAAOFv+a0zBJYno+7WQ2d19mlXgxxu0ULjlfuRSwzTW7+fvV40Zb8gHjY9\nz4W5LztxJx5FJPCBx6fPwWV1z0v7HR2Wp9WqGkZ1sD0Mr1eTMqzsdjUKLGNk\nsYkq\r\n=bgR5\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n#### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note**: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n> _NOTE_: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n\n **_NOTE_: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommended to\n always include it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color)` | Sets the container fill color to the given color for an enabled button.\n`disabled-container-fill-color($color)` | Sets the container fill color to the given color for a disabled button.\n`icon-color($color)` | Sets the icon color to the given color for an enabled button.\n`disabled-icon-color($color)` | Sets the icon color to the given color for a disabled button.\n`ink-color($color)` | Sets the ink color to the given color for an enabled button, and sets the icon color to the given color unless `icon-color` is also used.\n`disabled-ink-color($color)` | Sets the ink color to the given color for a disabled button, and sets the icon color to the given color unless `icon-color` is also used.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color)` | Sets the outline color to the given color for an enabled button.\n`disabled-outline-color($color)` | Sets the outline color to the given color for a disabled button.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web button component","directories":{},"_nodeVersion":"10.20.1","dependencies":{"@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/density":"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/button_7.0.0-canary.524b7b812.0_1588538868210_0.9560496931936977","host":"s3://npm-registry-packages"}},"7.0.0-canary.bd8ca9678.0":{"name":"@material/button","version":"7.0.0-canary.bd8ca9678.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"66b364d7ed6ace20067b79e5a581ab8c56b5f4fb","tarball":"https://registry.npmjs.org/@material/button/-/button-7.0.0-canary.bd8ca9678.0.tgz","fileCount":26,"integrity":"sha512-a29V9YeGfTrqhvC6JVAqasCUzY/A5r0hN/rx7jbMxi8XP185X+t0lmXbQ4zkrI0qLp4DbUp33r94A+4xH7BtRg==","signatures":[{"sig":"MEQCIEMns3UBb5DI35u1CBK+bjk2jc0mzbmhFNeROhjBASiUAiBvGCw5+EJ4Frq4VRf7J2Drcmw6s6jALlhu/wHpErHJfQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":371287,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJesE6XCRA9TVsSAnZWagAASM0P/3mACtGOuFBn2rPQGCao\nzQ52Ll5N2Wq6d9iiG6x1dGW+AijKWu4Fu8gtib+tKC8nYj/h8m+KQWrWUsS/\ngymZ/c5SsK3lH1C0m7qQybByGIoWflwhexrxblPRI3BQDdgOWr2/H60gp8tW\nNMu1kF8C0rCSA6UJSIyDCfXQLj4n3sG6yIhdPgnLVefGdbmAZWtqfhPc+6Tq\nb0SfaSippUpbdwF87TqICIGtxtO/W3GatPgZsCJiQDmIZOrKaUI2j0Y2DTpA\nGKn/zUiUeSFmcw5i+PygCy2TQEA559qZ5vKx7Uxtj0tPntt8ZuqDctpMHrmQ\nhKWewSz2v0/IakxT6iPe86iefPcG5CDYX3By81efQg16zPI9fgbHFjMdPDAJ\nzzWj7IdYjSn8hmONhiRlniuo507SYa88Ws8Tljkb3l+WoXDZ4r8qEZr1htBe\nuM8bXwgNWJgJkkW6xc5EXjIextcKUJirIISzmmnBapjIb95OJi3ziOZ37Zjr\nzEiBOqRvqCB0RI30S172ot/2UTnXlSMHDxR9dIVs/wWiGyM7KP1bHuIV/7BL\nt9F7dXhG8sk745GPvN6SQMN3Yr7AT86j9ss5j5FhFtRUb2tp1FQOYkc4Iagx\nvGfn8srUSpKInxnEPKtKuBnxu5bESNgNsqn+1QTCUyObpTXwMHsAP9BIxVRO\nzUKf\r\n=x61b\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n#### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note**: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n> _NOTE_: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n\n **_NOTE_: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommended to\n always include it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color)` | Sets the container fill color to the given color for an enabled button.\n`disabled-container-fill-color($color)` | Sets the container fill color to the given color for a disabled button.\n`icon-color($color)` | Sets the icon color to the given color for an enabled button.\n`disabled-icon-color($color)` | Sets the icon color to the given color for a disabled button.\n`ink-color($color)` | Sets the ink color to the given color for an enabled button, and sets the icon color to the given color unless `icon-color` is also used.\n`disabled-ink-color($color)` | Sets the ink color to the given color for a disabled button, and sets the icon color to the given color unless `icon-color` is also used.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color)` | Sets the outline color to the given color for an enabled button.\n`disabled-outline-color($color)` | Sets the outline color to the given color for a disabled button.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web button component","directories":{},"_nodeVersion":"10.20.1","dependencies":{"@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/density":"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/button_7.0.0-canary.bd8ca9678.0_1588612758915_0.45923080814315353","host":"s3://npm-registry-packages"}},"7.0.0-canary.2553e86fe.0":{"name":"@material/button","version":"7.0.0-canary.2553e86fe.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"bb9e1ed75d331acb88c8ad1fbc1432336835c0ec","tarball":"https://registry.npmjs.org/@material/button/-/button-7.0.0-canary.2553e86fe.0.tgz","fileCount":26,"integrity":"sha512-PF5PUJ2Ftrv33/cTJkvhY/FFCELLfrsUutn8iyuS7Mpc1OV+CsEOnmd+B3kzxUO2gBm8TWICu/wTUB7ILLhp0w==","signatures":[{"sig":"MEUCIQDeNyYrO26zyBF6eDIJzN//cVgYZUjo8uvg0IbeCeoSwQIgCDnP9KEi7ke2iESvE+oWP2aqBJJTh4NpxeXCPsDLMBU=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":371287,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJesFFrCRA9TVsSAnZWagAAZqUP/RVPWQyTrSQzF38awdgu\n5IdwrooaXuGi8eZ+tl64ryuE2LlB/50xq/66p9MfeuPWTqKWAonwWQi/mivT\nUm0h2EaU9W5oJI65FUmJiB7N6mZRwglaE1R0RafVDsBUFoT6gP0sUAyVxkEz\n90ZOjVXt6O0ryDJ7yvu4/zZUVofYXc5rPVuPy0JW2mOxIKxe9gRJ01rhCDdz\nK5GVY1rV5RTifiwozix5Nbn1CPNY4HLGj6frfeQa6LkAOfWxLx86/p7oxXsy\nkyDGqAnWk1D9v9lcNVYKkjnzZ2CbO/nlJwLUifG1OlRpQfJqsUKnJhBXsxBn\nlNQz5WDfPvypNvXlytNgZppRcbeIhwuCEqqZqj+UGdJauWiAECAReaOs2L0L\nRf9/dqhzNiVwCfsn3RQ1u0byoWO+jFuWiUrMkrAx+x7bd2t5mHyUC2F/xYGU\nl/4g1fCJKNzt3wPXIcpmm7BmTDGtzhV7Lm3qtRqpj5dDAuO7KIdhwrMHlB45\ny81qUMG+fI0+vGjpfKl0k5wkZkvDor/VwFErDALo7vGbrkkE2593W4DEO36I\nF34Rcrvkxv9M09vQ/gzuhscBeLD0KhjewxZI/BrPKLR2H85pkg+Jp/JJ6jQI\nxxp7iJifPqiPrGPais3G+WMLEQJuEkvTO0ECA6PbBHGp0eGz5JvRgT0jiy5A\nCbMe\r\n=5BpJ\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n#### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note**: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n> _NOTE_: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n\n **_NOTE_: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommended to\n always include it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color)` | Sets the container fill color to the given color for an enabled button.\n`disabled-container-fill-color($color)` | Sets the container fill color to the given color for a disabled button.\n`icon-color($color)` | Sets the icon color to the given color for an enabled button.\n`disabled-icon-color($color)` | Sets the icon color to the given color for a disabled button.\n`ink-color($color)` | Sets the ink color to the given color for an enabled button, and sets the icon color to the given color unless `icon-color` is also used.\n`disabled-ink-color($color)` | Sets the ink color to the given color for a disabled button, and sets the icon color to the given color unless `icon-color` is also used.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color)` | Sets the outline color to the given color for an enabled button.\n`disabled-outline-color($color)` | Sets the outline color to the given color for a disabled button.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web button component","directories":{},"_nodeVersion":"10.20.1","dependencies":{"@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/density":"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/button_7.0.0-canary.2553e86fe.0_1588613482588_0.9051491337202362","host":"s3://npm-registry-packages"}},"7.0.0-canary.03dec929e.0":{"name":"@material/button","version":"7.0.0-canary.03dec929e.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"e2254c9deac8a2b0555458f1638d00d288b0788e","tarball":"https://registry.npmjs.org/@material/button/-/button-7.0.0-canary.03dec929e.0.tgz","fileCount":26,"integrity":"sha512-1lzhkt6rZ9SCkHejNDvM/e3IPsah7eNoWt4vOyqldUOWj++5ZTU/BA01oM8TuDM0pMJp6kdUqBY7eQ615JrtSg==","signatures":[{"sig":"MEUCIHeA43OmiKtTb6YQYLGGlAXxHLJtZ00k0fPcW5qRY1ZzAiEAtn1/ki3scRlK0kOkxR8wObtu70OXgeAC4XevS7V3BhE=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":372401,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJesKZ3CRA9TVsSAnZWagAAIaoP/2wnzixz07YvnkvrJM0t\nW36/iIPPvN6NVZ0SKbWAdajc1BLGbsQJwTMaz7SgME3fZOwGpN/mrydiR8pB\n6zZZraPQcdZAPcu147CXkW07+cFZGGV6MM/wXxqLnwzNgEUbKF5wW5d0qzfl\nw4ZIvR1p6moiraCWjFUed3jyLZabQyUA8m+1aQenS0tAcES/K02XPhmvQsBh\ntabHYjDhE4mU48Vn2KnF/vJJYMmo6xBNfjE1ietMPGElkXKQ/jXK83afOSxx\n1Pyh8RS0i+mP6rZRAKjsU/G3G3Wr4ZiSrETj+JXufYyZi4lyMnM2k1FX/zn8\nwu5fSwjFmn9mbjv/hieOmLqblmaCsh3BogSZLPUeuTn6csAZLBlgN5Zib35F\ngh4oH26VgqTvM0DNImwtG2L/G2FIcV8be7Aijie2qaICkE/aDtDVqaGzmJYY\n5LJbSEj60dFjHK1k2SZUDkGpPZf23wftSpo/XlQqbDumDXW8mPot0qyVH1jV\n5j1diLJ8AUrJBih5bERarGloLJp6B7RX9gX9K8Zhw2bfVWj2HETyQnW1LEGB\nSrxIMs1NDuaTXlIhcdPV3FYPgjWkc/TqI5LK6cba2yX0WGGsC+QjNZlUKaBP\n+qh/XlkYmIKpY/w9/IWENcZLYjQvWBTq+zzxbTQd3F4/2OtgUO6R70J6UlAN\nW2n7\r\n=9Btc\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n#### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note**: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n> _NOTE_: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n\n **_NOTE_: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommended to\n always include it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color)` | Sets the container fill color to the given color for an enabled button.\n`disabled-container-fill-color($color)` | Sets the container fill color to the given color for a disabled button.\n`icon-color($color)` | Sets the icon color to the given color for an enabled button.\n`disabled-icon-color($color)` | Sets the icon color to the given color for a disabled button.\n`ink-color($color)` | Sets the ink color to the given color for an enabled button, and sets the icon color to the given color unless `icon-color` is also used.\n`disabled-ink-color($color)` | Sets the ink color to the given color for a disabled button, and sets the icon color to the given color unless `icon-color` is also used.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color)` | Sets the outline color to the given color for an enabled button.\n`disabled-outline-color($color)` | Sets the outline color to the given color for a disabled button.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web button component","directories":{},"_nodeVersion":"10.20.1","dependencies":{"@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/density":"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/button_7.0.0-canary.03dec929e.0_1588635255134_0.19057800069813924","host":"s3://npm-registry-packages"}},"7.0.0-canary.d92d8c93e.0":{"name":"@material/button","version":"7.0.0-canary.d92d8c93e.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"14fa7bea4a082f43839593c0883addb6f3fdab15","tarball":"https://registry.npmjs.org/@material/button/-/button-7.0.0-canary.d92d8c93e.0.tgz","fileCount":26,"integrity":"sha512-YJqwOB6Xr619nSuWGUmkJN/+bj5sV/AsDfaE28Mv3xjoFqPK19I5RsDI62uZCmODGQfgxkY768JziT49zY9LXg==","signatures":[{"sig":"MEQCIBOJEOkRVy3rWRWIehZ099bUdqSapjs3keVfBdYM7QY7AiBzn5Tdi1YiEWpE311LXf6tSIGaKBt7kNIrrHmXLSZ5Sw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":372401,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJesZttCRA9TVsSAnZWagAA76cQAItVf5pQETky6vUikWW1\nq0ag+YPgvrUqw7T+pK7hDZ6kilRjvQz9Ivcgd7ZeuBZC6AhMXwhs/VtXgDAg\npemlMNp6l6Hvb7n06/ordXLMiprMtyi48WxJtsZAuCGhdOf3IPGuCYEjQ43E\n1aRfPmUYnqGVivaOv9v3BxkFWbTtSrtTeBMTmfNA5oQ3UWkutGvt/JI7Ohz8\n+qkPmgmyjl4atZbgg21Qrc4sBDSVfFSlwtHYhr5Kz+ULljwJwyx1XNanlKxE\n+dYyRlPV5SV/Erom1mr/TQ/pAxNaDjKNqwYUkgXuRFYtY4269HAFA2HFOAgO\nCJciGCxN91QZBAJkenQ2PhMlzpZHKpdkxmyG2SESz36DSy8iCMmodf74+ZiM\nAcO90MSjjL/+RyPd3U29HAzt4Ut0uyiQ56hlTcF4nI9xXRY81QQa5xU7clty\nmo9LCykoKABpOCH2+gL5Cb/KJWJkd/nDaemnfpuMvwtO/mKTtXCgOacDkb1O\n3G8pWEN5eKzvKrBYZJmz8P21JoTRihnnxoEMyStqRCJJbuRpF2MgGtNMbk49\nizwLVf5tyObohtPTPC+TdUqEnOHHLuxnDuVvQclNA4EfVTpdGPONSKHsuuN9\nwFSONxBNdJMZ5wQKVOGNddnjA5RwOo0q0nBopi8knwguHxJ+AJjp4hzqnWuw\nqX4t\r\n=2gDP\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n#### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note**: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n> _NOTE_: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n\n **_NOTE_: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommended to\n always include it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color)` | Sets the container fill color to the given color for an enabled button.\n`disabled-container-fill-color($color)` | Sets the container fill color to the given color for a disabled button.\n`icon-color($color)` | Sets the icon color to the given color for an enabled button.\n`disabled-icon-color($color)` | Sets the icon color to the given color for a disabled button.\n`ink-color($color)` | Sets the ink color to the given color for an enabled button, and sets the icon color to the given color unless `icon-color` is also used.\n`disabled-ink-color($color)` | Sets the ink color to the given color for a disabled button, and sets the icon color to the given color unless `icon-color` is also used.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color)` | Sets the outline color to the given color for an enabled button.\n`disabled-outline-color($color)` | Sets the outline color to the given color for a disabled button.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web button component","directories":{},"_nodeVersion":"10.20.1","dependencies":{"@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/density":"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/button_7.0.0-canary.d92d8c93e.0_1588697964555_0.7336331079105276","host":"s3://npm-registry-packages"}},"7.0.0-canary.09f591967.0":{"name":"@material/button","version":"7.0.0-canary.09f591967.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"daf2f101a948cb0b6a298183008dba40b6fdc9b0","tarball":"https://registry.npmjs.org/@material/button/-/button-7.0.0-canary.09f591967.0.tgz","fileCount":26,"integrity":"sha512-ZXbpCKyrsSD+V2n6A1+9Ob8O55R4jg/LhhZYWVW2SytA5MhAXfWhk1FKTDvHDTcSGj7Sc2eJKyMN2bXjOcRidQ==","signatures":[{"sig":"MEUCIQDGehTxO/BMuvFCrx9YWTe5JaF04Rs3Lh9jmJ7R4e4XIgIgLVYS65/DR7y3cnKkXvsHDq0n1Ah3NKa4JVHaWZ4G2eQ=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":372401,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJesdToCRA9TVsSAnZWagAAgioP/RvO/u8OdBR9V4WxljXl\nGcI/ROibfdFKv5p1tEyy7PUatdtETN1vCFF54rTMCNmHntZnftVhB9Agaj5B\nssKxYyXmnPQytHRx9OXRYs+J8C/b4FISi8EjdDPRsy3S/GWJ8c/QVVutEj0z\n0q5heEFXy42kPjnZU0ghvqFHb/kt7K1T6WnS7msKjM0RD3fghac/YWBitSPV\nx6Logyem4yILiLE+XGtkvrhp+YRGT/8nRvpMt9AJfYnTey5R22vPLwHkDSkF\nIGZc6PzqRhXKkhTLj23JMZCbwU8qahWGQkCHxBqLZqiTHgrsUHaewbu/vtLp\n9lOoBlGjkRCQPdCyX492jP0CerNUWRoHTytliD04qtAjLPhQPkfQRXt+1+MG\nxkmG9RMbniXO+VKquX/i6/NsZc27rTg4+XwyRpvAkS04aQ3A0nOqOh74+nc+\nwn7O9wnzsSOSDLyW3prtqake6J5nwD+uFMnc8IDZJfk7qOkPpvIM64LV+P9N\nZ/n8TBEcs95nO5brwurCo9y8X4fy3r92nK07WHx98hQxB57SG8AC3LO7mtd3\nB5Dda9VwH6sEY2WrcgpNpFJZibUVlI/zf1FMjeIslEXNOqVoA5QtnNNNvpuK\nlnvOJsOG546Fn1NMz0iSaIghZyyz6frmjps3f9a1aBrwpGaj3aSd1CfiwnZM\nW8KU\r\n=T+rG\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n#### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note**: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n> _NOTE_: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n\n **_NOTE_: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommended to\n always include it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color)` | Sets the container fill color to the given color for an enabled button.\n`disabled-container-fill-color($color)` | Sets the container fill color to the given color for a disabled button.\n`icon-color($color)` | Sets the icon color to the given color for an enabled button.\n`disabled-icon-color($color)` | Sets the icon color to the given color for a disabled button.\n`ink-color($color)` | Sets the ink color to the given color for an enabled button, and sets the icon color to the given color unless `icon-color` is also used.\n`disabled-ink-color($color)` | Sets the ink color to the given color for a disabled button, and sets the icon color to the given color unless `icon-color` is also used.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color)` | Sets the outline color to the given color for an enabled button.\n`disabled-outline-color($color)` | Sets the outline color to the given color for a disabled button.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web button component","directories":{},"_nodeVersion":"10.20.1","dependencies":{"@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/density":"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/button_7.0.0-canary.09f591967.0_1588712680184_0.10876080029388602","host":"s3://npm-registry-packages"}},"7.0.0-canary.3846ce311.0":{"name":"@material/button","version":"7.0.0-canary.3846ce311.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"da9adce3424e9bdd1e5e6e1b25ceb70d11d39ea5","tarball":"https://registry.npmjs.org/@material/button/-/button-7.0.0-canary.3846ce311.0.tgz","fileCount":26,"integrity":"sha512-Vaev1VOWfNWGGOtZ6tOwutgJL+KdwHu45ovC9eXViu3IOrKm9wTR/hSl9FICczZJEqQYX83RajbcSkChXCqVeQ==","signatures":[{"sig":"MEUCIQCGnZw/Nv3Gi04YfBeGTWYSFUoKD+uI9XBRFRXo38RlwwIgUgpBNdsPlssRJA9EBD7RJ2pd+KRdK3UqWV84oSD3CeA=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":372401,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJessUoCRA9TVsSAnZWagAAuTsP/R+4+BxT5NMHwGpVH23l\nlyQbai8hu+FNj4o+Jl+lOUncldrvBUcN5d/4aYYBlL15dRUbVWMRSVardV2s\nxoylB0nF1f3ipO3ITCh2Sa09jYhXFHoIQ/DyQovt7f0ZcbJXtp+/UYCj1JKc\nCiDJVr7hRpjKECpYbW+lyFbmmdB4RAseCmFwXJ6VjoB6opAVx2f4KLAgowR4\nww6ijo+PHYchXEFIEXgya4uxy371rKHB3tE3Q0zgC/+CzPEpP0nOBqcoSCu4\nQJ0sOWhFSnELZY3ItkCJnIQ8pzHGC1dJnoJDx0Le0ngzie6FmsTtzxSEz/Pc\nQHqiZKL1wV4WntOFemoADDjBFuOujfYrwyFBtA+lkSwAdmqfF3Ty9y3DoLip\nBY4DYfA6/oQD8vNfkVz/XMIUTxOUxL46QgUfg8UDGLkfVmQzA0xHpnhGjR4x\np0z+N7XlCcBZYe4OsViyhVq227MJgvsWuKwXCAM6MSsEukB+caX9gkJJcs0b\nrWEt/S4JXlMxz8zL1ptwP6MMUw+en+AXRivejZ9nKDFqrdsvOaCG61mwPYCv\nMdBydwF9wSdarNYmmMQa6oD1XAsEgw9P81wFpjeYTyvlX5EEZgGVkt+Dt6SO\nuK23XitRM4UkshlB7s2oRt2795V0wE+82veNrJWSituKmNl4vJhVgZGQY3q4\nsB8h\r\n=vp9R\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n#### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note**: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n> _NOTE_: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n\n **_NOTE_: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommended to\n always include it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color)` | Sets the container fill color to the given color for an enabled button.\n`disabled-container-fill-color($color)` | Sets the container fill color to the given color for a disabled button.\n`icon-color($color)` | Sets the icon color to the given color for an enabled button.\n`disabled-icon-color($color)` | Sets the icon color to the given color for a disabled button.\n`ink-color($color)` | Sets the ink color to the given color for an enabled button, and sets the icon color to the given color unless `icon-color` is also used.\n`disabled-ink-color($color)` | Sets the ink color to the given color for a disabled button, and sets the icon color to the given color unless `icon-color` is also used.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color)` | Sets the outline color to the given color for an enabled button.\n`disabled-outline-color($color)` | Sets the outline color to the given color for a disabled button.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web button component","directories":{},"_nodeVersion":"10.20.1","dependencies":{"@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/density":"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/button_7.0.0-canary.3846ce311.0_1588774184480_0.8229276540544863","host":"s3://npm-registry-packages"}},"7.0.0-canary.ed7f32463.0":{"name":"@material/button","version":"7.0.0-canary.ed7f32463.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"3f58b97b352f9c1b0ed6513d109e074d4a44b53a","tarball":"https://registry.npmjs.org/@material/button/-/button-7.0.0-canary.ed7f32463.0.tgz","fileCount":26,"integrity":"sha512-W7djbPa08p/E42P5DIaE2NddB8+TSZQsFoP5BMw636e7OXcB9r4wMi4lnsWHQhn+S8wAmd+oxKMUhoj5TRvcIQ==","signatures":[{"sig":"MEUCIBMrJ0sdznrr0vmHFwhDH3jqd2xpmI2BJ5IXEGYfQ1LsAiEAnBHth6Pa+b2+A7WBao50LJswOD/E0lDCtLH79pzKwLc=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":372756,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJesuDnCRA9TVsSAnZWagAAHisP/A3fUzz/jYrlZ7y0Agcl\n5gOt8hp6HraPebqS6Gu9BHaTmvSG68XYUKZbzjdaKCgUjd3+Z8oqGEprOtYe\npBDawS8tSJK01fc+aBBS1yKnCLCCcogfUM558DqArnGBAMBKBrdsJ2YPqxLW\ncUSn+rA3ZJKvhcYqq1z/3F69pZ4HP0KZq+fLYp5wJmpQiU/I4aSx8QBhiqMm\nblC57ijaYWTXVrFXmHq2XyUCT1HthVTHDib2FfFIQPBHiGdTW5+ifHzZ052N\nzm/mDPf6iCEn1JDhmwsRQJXWbRfgV3yJpOm+I/oTWpQ6lr20FD5m6+JhZDTV\nFPS/ONRAE61v5fZUhzrlU1gY2d8SqOFI6G1qJgUoReDmzSfXG5LaKk8R61X5\nddFIQ+f6wCbPFdPCa1OjsrhYiHhuFUf5p2bZLCSo2nOHrqN5hWHmREQVsxGg\n31Gcgj1LijwwR148qt5u/1LpLYtWMudKdZ3fcg+ajhIow7HntYd6GUsVz9uX\nhDY2/6DEq2UywNkJrum11xUtcd6twDkdz17/8H32KzjXxhoSzfmZHbJfEKcE\n3dOHyHVZYfjZytaD/2mYQJ/vLUgxFLfYVGFsdOL8E60VABUTzNS7F1FE6nL0\nJ1uGKwS3MeBrk2PQ4rT1gP7wvHLw1Y1IE1NZ2adfJWbhYrF4tvRMPX1MO0H/\njVdB\r\n=q5Sb\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n#### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note**: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n> _NOTE_: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n\n **_NOTE_: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommended to\n always include it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color)` | Sets the container fill color to the given color for an enabled button.\n`disabled-container-fill-color($color)` | Sets the container fill color to the given color for a disabled button.\n`icon-color($color)` | Sets the icon color to the given color for an enabled button.\n`disabled-icon-color($color)` | Sets the icon color to the given color for a disabled button.\n`ink-color($color)` | Sets the ink color to the given color for an enabled button, and sets the icon color to the given color unless `icon-color` is also used.\n`disabled-ink-color($color)` | Sets the ink color to the given color for a disabled button, and sets the icon color to the given color unless `icon-color` is also used.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color)` | Sets the outline color to the given color for an enabled button.\n`disabled-outline-color($color)` | Sets the outline color to the given color for a disabled button.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web button component","directories":{},"_nodeVersion":"10.20.1","dependencies":{"@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/density":"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/button_7.0.0-canary.ed7f32463.0_1588781287087_0.8926719045220275","host":"s3://npm-registry-packages"}},"7.0.0-canary.8135cc085.0":{"name":"@material/button","version":"7.0.0-canary.8135cc085.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"3cab7356c4875472af0d107091d79e5fc942eedd","tarball":"https://registry.npmjs.org/@material/button/-/button-7.0.0-canary.8135cc085.0.tgz","fileCount":26,"integrity":"sha512-XNuDwtHWu+uYZA/R+e5/PLa9EIMSgv/UNJk6ho8mjMAAvvtyf8nFd28DIFzeYXZuh8O3Q5UWRxGo+CTXM2URSg==","signatures":[{"sig":"MEUCIBWlSWq9Ga3JWvVpq0ogW2XBf3/nBQ/0c3Z0MLkJ1soSAiEA+CeaFcVQgLxTdM8HRj46wAnUzcRTu+EMoG5ZPBB9FrY=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":372756,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJesxYpCRA9TVsSAnZWagAAM00QAIBbRelT1VlpWs/7H4Go\nkzl8hZtg/H3WKr7hK87eaLYBio3PRrTqmwvsA5XUoYCPMrtsNZG4rzDFAoQP\nx3TNAtgHJfTmtNZ+CauvgAHpd0HoRJr7ctDiruok2X9+lMlBrg6Jg0gLQDFK\nZD1WImc85KxBnrakKmW9A9L2UxQZrE0k2HsnKRnPfejwqAYDySwq+/hPNADl\nBUKVV+oK+2XAIubgi/jmZDJLL2Gh3PkC/aoDyI8oHlu8Rc5NJKqAWVEPploO\nPUvwZY4bMyDtMTF3hFRmUqbc1Lk3TnJYw1JwZaJM8t18z9CtvO1ydEis5iKY\naqvYe4vwrS++9GXIcsfhJ+6c8CK0KJ2xQEFVb7ZsqtOOr0VKYMZN9DDcJ3aw\nwLhJ+qGB0sEivcPNMUw0cKFU3JZ2wD1l68j0g163dthKiOrRdBZNDsLLHw21\nDE1a26/R7kLXMfy7t52r+QbkWutmRi0h84hyXkYXIi6SB8NrbHFJjn7h/Xcp\nK3If9EjidxUj5Pk+cpGNXdoq7FOmuzrD+iHdvgPONXd2liameKZnK6y3D4e0\n0Ug2BiNNyQzqsNYrr65nHNHKEFWsCC95Mr72EZ6TG6k9XaWK1mest9AawsZJ\nZB7x5iR6tg4zSx+6gZvQQ7N/uXPfmDEgC2bNd5PUEZNGAV0txKiv/uAaujAX\n4o1d\r\n=bd/Z\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n#### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note**: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n> _NOTE_: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n\n **_NOTE_: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommended to\n always include it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color)` | Sets the container fill color to the given color for an enabled button.\n`disabled-container-fill-color($color)` | Sets the container fill color to the given color for a disabled button.\n`icon-color($color)` | Sets the icon color to the given color for an enabled button.\n`disabled-icon-color($color)` | Sets the icon color to the given color for a disabled button.\n`ink-color($color)` | Sets the ink color to the given color for an enabled button, and sets the icon color to the given color unless `icon-color` is also used.\n`disabled-ink-color($color)` | Sets the ink color to the given color for a disabled button, and sets the icon color to the given color unless `icon-color` is also used.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color)` | Sets the outline color to the given color for an enabled button.\n`disabled-outline-color($color)` | Sets the outline color to the given color for a disabled button.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web button component","directories":{},"_nodeVersion":"10.20.1","dependencies":{"@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/density":"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/button_7.0.0-canary.8135cc085.0_1588794920895_0.7980660764597347","host":"s3://npm-registry-packages"}},"7.0.0-canary.deb212de4.0":{"name":"@material/button","version":"7.0.0-canary.deb212de4.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"8186dd5688dfd872435a2ecadb3867982263c0b1","tarball":"https://registry.npmjs.org/@material/button/-/button-7.0.0-canary.deb212de4.0.tgz","fileCount":26,"integrity":"sha512-EhQVljK7AGhd6ifBXHJirPTovNEqKc1bdAFdW3Kt5CGa5KUcBrIj161Br1GxMDGA75b+MZnbbrAvRDk42tLXoA==","signatures":[{"sig":"MEYCIQDzS4rDibPKPQuEfZYK7VxylHut4YnIPfQBtw1eezi1NgIhALtpMr8YGHB4vKB1jy45sHobIceVNtkqgaGuwdfSMzIe","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":372756,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeszfQCRA9TVsSAnZWagAA1e4P/jyq8JpIQ4ZJQRHF5hA/\nUodtWFXRPXXopTPiTptCc/AudYNNrdi2muj4RVJ30Bnf1UXXI6w4gL38AhAw\nGmSld3Ajz2wV2dCfI4gJxTNbet13Dv7x/ghumexuuFv3MryQMeU4QNU9soJD\nn9DXV6zdrYE6fgFjo+DFDZJ4CbLaIfKTW67fTzenVegKNVW5Ebrv/rR2+CKv\n0K0rs80ZjtPw2Wr0U4ObzgHg1ZFMQfpT0PDshPRB++hmbVh3LDPOQ0rYHLSd\nVsITV04Qk42LWcHfMlPVcwPekDHRJ2GlOFl0TmoOf1YxsnBNgzun2eF+s+Yk\nkctOPx6Nw6UFnDhpjIDV/ZeB5uxL9QWeKkWGlA1CSYeBX0GocfBEgE5muFIi\ngoT6ZvtHSLqZehpGn9WwJIShu/TQTibVnA989YvFOg8puE0+S+nmh7FTbrHt\nPDzOHh9bDhxY1qR+NB5Yt8lGRiVfYx35C2rq2NC4ZoQKNu14p5IXfq8lysgE\nzRCSzyr3s8YA6d4XDp/HYXYJCy9BgGMQ44C8MOYAfGBVjAdi3Y42NZvlvzZS\nkn4qNzaxUwTgcdnelj4ivksvlWPI12Zu3zzOUncBDo5/hb+bUtUTZR2QIMGk\nhTmmZvHQc1OxQ7IoWtoceyY9ACgB27m/KZwOVDZKs/3ED3xcJdq/AleQETyA\nMWZG\r\n=was7\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n#### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note**: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n> _NOTE_: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n\n **_NOTE_: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommended to\n always include it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color)` | Sets the container fill color to the given color for an enabled button.\n`disabled-container-fill-color($color)` | Sets the container fill color to the given color for a disabled button.\n`icon-color($color)` | Sets the icon color to the given color for an enabled button.\n`disabled-icon-color($color)` | Sets the icon color to the given color for a disabled button.\n`ink-color($color)` | Sets the ink color to the given color for an enabled button, and sets the icon color to the given color unless `icon-color` is also used.\n`disabled-ink-color($color)` | Sets the ink color to the given color for a disabled button, and sets the icon color to the given color unless `icon-color` is also used.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color)` | Sets the outline color to the given color for an enabled button.\n`disabled-outline-color($color)` | Sets the outline color to the given color for a disabled button.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web button component","directories":{},"_nodeVersion":"10.20.1","dependencies":{"@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/density":"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/button_7.0.0-canary.deb212de4.0_1588803536374_0.1794539713164982","host":"s3://npm-registry-packages"}},"7.0.0-canary.f83e00898.0":{"name":"@material/button","version":"7.0.0-canary.f83e00898.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"e3a6d9a2cc7642124e061bbaa2789b2b4cbb59e0","tarball":"https://registry.npmjs.org/@material/button/-/button-7.0.0-canary.f83e00898.0.tgz","fileCount":26,"integrity":"sha512-uGEAcwKIZHYpM86bxBrmfNyOvYPIFO65n4pJeMiKMGte2KgUI1LuRX8QaIJKAruh6tdXzeRtf2ODECXTMPEf5w==","signatures":[{"sig":"MEQCIGqQaljbh8KuGIkQgbyhWr/35TtnLuyiTrvFwhQF6FnNAiBAuba6GWnWthlwkwDasIrSa0tLkXwhYeLpYWMuudz2NA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":372756,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJetDwmCRA9TVsSAnZWagAATTAP/iEbgELeBCdzJqWlJnm9\n1fvsbC6y/mqakbggUuXcinppbUt4a+i13goDaZoK3b7pU18BqJgBZkJCPFD4\n/JgYuRWF8/GSfmN3ZhBDQz/betqnp4V3SCCZaYISHdlt/huWsPmjiO+tsbAX\n+Lcg1xfQtT+0I53pOZFYP20rmBaEsprBkPpQaHFPIInwM0n245/Cn60odz4E\nta89pgSO2rWsO+n/xK3KuFbZvuRyJl75h9LSx6DKZjYTIjRJJz3hC353LjD7\nQZSp3usWTMv5R+vmsbj9YK+DXTpffbZu2o64jjxaLLLyHuR8/nf64VbAuVKP\nPhF2RQxgucXBBV3Hp9AuDVwei07gMOdCR17qz9IgmX9dFAWuy5LuVFzUJUMm\nW8se24bTvyFxNV9x2LYxDEldi4OKjAqh40aToHgIqcNecQZhZVNxHxqcqhWN\nO8W0TlxOncxIomftTHhjU1vEM9suem/AkLMwrT40Y+gNXQJsW2MW0PY3DB6S\nz4NZ5HMbiTrqTsKC8Vptl5698q+ZlZbe6tFtGxrMI5FgnfJMs+79fafacaWr\nvc/3V65YYgrJwuzCdUnyZLyHvOV4beLDDDDbBZLIe6ZNcCgZHF175/3lrJE9\nI2fQF2DtSNBOM/pu7MgYyy2SO2nGXL9HdmdENSo7WACDDDmrM57mXmqgHwDQ\nfpc4\r\n=zBXE\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n#### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note**: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n> _NOTE_: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n\n **_NOTE_: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommended to\n always include it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color)` | Sets the container fill color to the given color for an enabled button.\n`disabled-container-fill-color($color)` | Sets the container fill color to the given color for a disabled button.\n`icon-color($color)` | Sets the icon color to the given color for an enabled button.\n`disabled-icon-color($color)` | Sets the icon color to the given color for a disabled button.\n`ink-color($color)` | Sets the ink color to the given color for an enabled button, and sets the icon color to the given color unless `icon-color` is also used.\n`disabled-ink-color($color)` | Sets the ink color to the given color for a disabled button, and sets the icon color to the given color unless `icon-color` is also used.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color)` | Sets the outline color to the given color for an enabled button.\n`disabled-outline-color($color)` | Sets the outline color to the given color for a disabled button.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web button component","directories":{},"_nodeVersion":"10.20.1","dependencies":{"@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/density":"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/button_7.0.0-canary.f83e00898.0_1588870182306_0.6678090191393524","host":"s3://npm-registry-packages"}},"7.0.0-canary.047e6b337.0":{"name":"@material/button","version":"7.0.0-canary.047e6b337.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"888176846d3ed545eb86260cf3230e3f430a5c40","tarball":"https://registry.npmjs.org/@material/button/-/button-7.0.0-canary.047e6b337.0.tgz","fileCount":26,"integrity":"sha512-IYQaf2jIaorPjXhIBAFwbVbFzHcmntQF+XZjMoVM3uHSKlvRxXqH0ZKL8vB7I5tlL9Dx7e5JKLITclav1LmhQQ==","signatures":[{"sig":"MEYCIQCdV4iauaY3/oqqo9bsi1NcGfQlP/j07R3lBJ/OIA2n+wIhANQghgdHVK9I4gZMbLEFG30NB5Xdqk6fdZyAenv28UsZ","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":372756,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJetacxCRA9TVsSAnZWagAAxoYP/01ZmiwpHU4sADpUxMPD\nfqTXxu2VdWmSzA02bIoit8TFaHgE2JUGz0yaVEGvx+dzfPDO1XJSeeGabge2\neaj6DXXkR0fFqhgt/5hZ4yBq5XcSeeHAgd3dUAwDUXS6eFimL2nnf+XySAwZ\n0meNB7foxnw4a3ht/O2eiq/I5EibYcQrJE3Ykl7DcO29FAUH+M0cD254LbzN\n3XAStAawI0mmi/YQRE1tukCJq4CI+yG41lxf6oQXqRFQkVLu98cLHF7W8Jhj\nRMy2bYnwEO5LSW4Pj2mwByAYHGzKiaz5FmfjdaLmRAfziXyWAtYi4+/vvVHA\ng9G/mAjuUdYvdDj92jwwB6xAGA50vQpQxENDkxTk3B29pqpTlKhXEWfYmM0R\naM4krZKE4DcWZq99xtQmLiPKejgXw4qPgEAzrCTH53I6/4uQmbub6oe/qrCw\nsYYBr2lpyTVRjxgjwzguCVXvDVKg74YzOpQyeCbZQAbh6poiY59GO59o7iQ3\ncLEVUrjIshLoLR/cavo5pN5D+X6XwTwCGeZz5HwKKfTTYD99phiemMejhhyt\n4doDmXUiKLnK1rgWx7iZAjc/EERwiFDgeVhsvxsJkRJxwUDUMgw2FKovktkf\n7WgtsJeZILv1y93QBwLgpaBdqL9JuzgwiremZ4fr9p1mgYxo9K0ztFbzL32V\nrPoQ\r\n=dz9H\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n#### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note**: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n> _NOTE_: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n\n **_NOTE_: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommended to\n always include it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color)` | Sets the container fill color to the given color for an enabled button.\n`disabled-container-fill-color($color)` | Sets the container fill color to the given color for a disabled button.\n`icon-color($color)` | Sets the icon color to the given color for an enabled button.\n`disabled-icon-color($color)` | Sets the icon color to the given color for a disabled button.\n`ink-color($color)` | Sets the ink color to the given color for an enabled button, and sets the icon color to the given color unless `icon-color` is also used.\n`disabled-ink-color($color)` | Sets the ink color to the given color for a disabled button, and sets the icon color to the given color unless `icon-color` is also used.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color)` | Sets the outline color to the given color for an enabled button.\n`disabled-outline-color($color)` | Sets the outline color to the given color for a disabled button.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web button component","directories":{},"_nodeVersion":"10.20.1","dependencies":{"@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/density":"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/button_7.0.0-canary.047e6b337.0_1588963121452_0.1794837880175637","host":"s3://npm-registry-packages"}},"7.0.0-canary.119e21426.0":{"name":"@material/button","version":"7.0.0-canary.119e21426.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"75aff718e8e982ae6380e69b950bc6931b41f5a7","tarball":"https://registry.npmjs.org/@material/button/-/button-7.0.0-canary.119e21426.0.tgz","fileCount":26,"integrity":"sha512-b30u4GOfgKsei9b2OJrFez9L2CPXhml9y8Dv1bi+Bt9lHXBQlyHUuZTjStP95pyI2KdSIuFyQdupIetBdA14SA==","signatures":[{"sig":"MEQCIH1FlkyW4sdEF+8PH3e+27bz2ffJ50bFSZCgFmsGG83VAiA9JwBAqefDtmPUw64RSVeqE3T81BwBO2GKWkBtocQQvQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":372756,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJetb+QCRA9TVsSAnZWagAAYJEP/2Z+0Bdlm7wFHgbIB7IW\nhpJ6u0Ge73Cgz+X7SdQZV/by4jez5ma5ojINbQinoxf0o6X0SnrjnqPcHZBn\nCZyLdAON2Gx4ZiVQolCFGsmYbB5E/NkS3T7CUU1DmFNbFiLFfVQB+wwWUyfk\nXopbB8DkxJwvaH0ZnGaKwsZ9bFVsoc3n12gnY3u9kroj4vUgPBZnx0WHrMTM\n9u5IowgfMauxdiviHt2qBdvl+dhSU7UHRIkSh7iX4oCAYQPWlZOYqE/jcrW8\nTgklE2PLFz/9mmn58hsMqkCfO/3xHJERcn6mf5wo3hjfx8ziZsAzyfoKViDQ\nXKWIfcg/SyUDiL7PsJs1Pt66Y+YNzdGKyulkKdLXiiJe4od9TubTHo1t6drD\ny35ZtJE07AbLIkHaBVAkM3PCe5dK1xap/bkodlMt4lTUAuLtbP4cSSArfjkv\nDv6VHKs8KYFbnMiWW5ronEenjtitfNcLb5wHOE0BCYMAd4wBICdOddtQJuEO\nRQuhkk4v/fn/1h4ha64m4Sz+7l09ZJoq4vGn0A03h/pGYcAGu/c6j19F62kj\n2O8R25urPJHmHJimLbQjiVGHIPdGqjRdWPGQAWqlQpWq2iZdnaBmIBJpPh0i\np+3dX7ml2sBrbSsNmM6QXlJlaxSEkbGbqFo91ieQSTnwF9lCO5G8l71ov0E/\nQutI\r\n=lF/X\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n#### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note**: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n> _NOTE_: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n\n **_NOTE_: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommended to\n always include it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color)` | Sets the container fill color to the given color for an enabled button.\n`disabled-container-fill-color($color)` | Sets the container fill color to the given color for a disabled button.\n`icon-color($color)` | Sets the icon color to the given color for an enabled button.\n`disabled-icon-color($color)` | Sets the icon color to the given color for a disabled button.\n`ink-color($color)` | Sets the ink color to the given color for an enabled button, and sets the icon color to the given color unless `icon-color` is also used.\n`disabled-ink-color($color)` | Sets the ink color to the given color for a disabled button, and sets the icon color to the given color unless `icon-color` is also used.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color)` | Sets the outline color to the given color for an enabled button.\n`disabled-outline-color($color)` | Sets the outline color to the given color for a disabled button.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web button component","directories":{},"_nodeVersion":"10.20.1","dependencies":{"@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/density":"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/button_7.0.0-canary.119e21426.0_1588969360120_0.4974545653339226","host":"s3://npm-registry-packages"}},"7.0.0-canary.2f052d824.0":{"name":"@material/button","version":"7.0.0-canary.2f052d824.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"e8785cfed9e1328f01ed13ea79f9e2c7bbdc0906","tarball":"https://registry.npmjs.org/@material/button/-/button-7.0.0-canary.2f052d824.0.tgz","fileCount":26,"integrity":"sha512-OxkoLpK1MX8BM6+OYervMbnByRuIrCnecthNAmrvXRkDydVKFk4v5tjrdkvA9GfCwRWoMhZj0TNLnUT3o5hCLQ==","signatures":[{"sig":"MEUCIEPlWx7d+KbWiooSPqnwd+CmXQpjiME+7euC9zLa8jvRAiEAg1NVYeWke4tKcQGZeeRUense7g4obMmaWEg3jBood1Q=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":372756,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJetcoZCRA9TVsSAnZWagAAxa0QAIeGXAx8UsWzq3KyuDO5\nYP3s+KPDUO21C73ianjU379o+00okHS77lQJVXpNsX75ZaoIVZEyfGqxJVOk\nDAVMXdSWn+FsvzMURZenuVU5glM6xeBdodjVnZdzprshgDNHGuNtEAC53lTq\nVBVwGw1BLUtL08BE4Nl5DA8yNbNMenf03EKbv93KdGMxSI8NZpCrC/imz32L\nG6cl42+myGgFc9cl6uf9O7HhEgGfMI2KdftAgsyl/+Qt4wwaU+6KjsBs/kfc\njtNfAdwYUA4uses7a+rdlSh+SMcEkNAfv+2HO6MWu4IRjH42Jp8KSOMjkQLF\nuyw0HA/rQzZ414MhNyt4QVo8R7Snwr/y2IU9y0+l9J3LiqIKL0+9S7d65EJe\n+sVPN9YUAwkyuIeYo13zCOjTCe4dW40eWqahHJyFADXKvEAe95+OyZomgRRm\n1rgdv88Pkv7JspvCL9q/Vsl9RnFpvOnfHUZ2gFueYPGua7o/AevzC8jtcoNf\nUM3GZOrs3VuCg64FaxBdwmfWa73YKj0zRPaTrXjqgBqnWMlY0b1J2c9eDS5U\nHSBnS3Jliq3o+vLlUw9sEYIVe18mGZcygGTNUv4Ka9UXfNKEgNf5R9C8gmGP\nfj/4BMZzt8he0fQObY5irRe8P+90nAe8iMAJCHDqjY0Ku0c4n7EOzHvYfjNW\nb84U\r\n=Nlq3\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n#### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note**: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n> _NOTE_: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n\n **_NOTE_: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommended to\n always include it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color)` | Sets the container fill color to the given color for an enabled button.\n`disabled-container-fill-color($color)` | Sets the container fill color to the given color for a disabled button.\n`icon-color($color)` | Sets the icon color to the given color for an enabled button.\n`disabled-icon-color($color)` | Sets the icon color to the given color for a disabled button.\n`ink-color($color)` | Sets the ink color to the given color for an enabled button, and sets the icon color to the given color unless `icon-color` is also used.\n`disabled-ink-color($color)` | Sets the ink color to the given color for a disabled button, and sets the icon color to the given color unless `icon-color` is also used.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color)` | Sets the outline color to the given color for an enabled button.\n`disabled-outline-color($color)` | Sets the outline color to the given color for a disabled button.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web button component","directories":{},"_nodeVersion":"10.20.1","dependencies":{"@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/density":"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/button_7.0.0-canary.2f052d824.0_1588972056571_0.36256946139274415","host":"s3://npm-registry-packages"}},"7.0.0-canary.e84444387.0":{"name":"@material/button","version":"7.0.0-canary.e84444387.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"d48298b2c4676efbaa8d8d59f623d375acff067e","tarball":"https://registry.npmjs.org/@material/button/-/button-7.0.0-canary.e84444387.0.tgz","fileCount":26,"integrity":"sha512-FAJYpOYA42s2S4mQPCYpZsfXgCus/gmlFdDi8JpwBSxE3MnMmK+TVVNB92ABzxwrp4kQB2qFpXFi+XcODOJBGw==","signatures":[{"sig":"MEUCIGue0DmQJQaB42aqhdNtA4HOR8GHmHZeoqv0E+9ae496AiEA6HO/g9PF+4Ai0nJI6pV/cjxSri3lBsGDkul3Xhp80F8=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":372756,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJetc/FCRA9TVsSAnZWagAAWfQP/2oMTzGs3RK3V4iqrFff\nbCPVUqrD+zM6Gfc3jIgQ4d6b8BpGFsJzIFl3Zxks0uGAgaPSnlY2KPZR/PhE\nvH/ZqDYEuufG6VC3gzn/Mi0Q4QyesQx28KC4Qr3osWQ8rJp0p2Rf8d0xDv0X\nwMFuWvGxmqIxX8Wx3Ak0YYLPZxcgV0s049q+KNs7pR8P111j+iyzrwy6I0mu\n1OfWmkTVaIXo77ViixreCiUw4obfhxypi9cmP4q2FXe7XqoyxVa0+wGHIOnN\ngGXlqu4qtXBIvy5P+rh1NF/GCiEFAiJHRhPnC9jNMIPRaLsRrijCKqOggH52\nU5aOY5MQ1jl1lsvBrYz4aHLCXUL30v6ka7eWPvWGl8E9i/s4VFjIyUipMqLu\nt1IQgX2tOGYtXsTR57/BWZ8WL2rGiLjrPGbJPzO4072FHP1bcFN3niOXW9u4\nHQ0MXEdmET6fNXZUqeYNmY8gp6LOZzIaIEjTAe41gbPSHfduaetqgitvuBBV\nY5mW6HwRomXNa76fSAobGqSUS/In7pZHagfRBUjFfIh0LK3xGW/Om1I105wC\nIoZ/cO270XW25TuoRDqA8DZtVO6DjicWEdo1/pOwyUgsblT1YW1hktiF6gEz\nA2oet5wS0kjSrpnFJE6A7JQP91x/mHyENaYnm1/3ThGY8vsdFVRHSR23OzwP\nVRj6\r\n=rZ91\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n#### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note**: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n> _NOTE_: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n\n **_NOTE_: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommended to\n always include it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color)` | Sets the container fill color to the given color for an enabled button.\n`disabled-container-fill-color($color)` | Sets the container fill color to the given color for a disabled button.\n`icon-color($color)` | Sets the icon color to the given color for an enabled button.\n`disabled-icon-color($color)` | Sets the icon color to the given color for a disabled button.\n`ink-color($color)` | Sets the ink color to the given color for an enabled button, and sets the icon color to the given color unless `icon-color` is also used.\n`disabled-ink-color($color)` | Sets the ink color to the given color for a disabled button, and sets the icon color to the given color unless `icon-color` is also used.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color)` | Sets the outline color to the given color for an enabled button.\n`disabled-outline-color($color)` | Sets the outline color to the given color for a disabled button.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web button component","directories":{},"_nodeVersion":"10.20.1","dependencies":{"@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/density":"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/button_7.0.0-canary.e84444387.0_1588973508561_0.7121391283059548","host":"s3://npm-registry-packages"}},"7.0.0-canary.893eb1876.0":{"name":"@material/button","version":"7.0.0-canary.893eb1876.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"6560174b5a1f2c9f32462d46acb82b1542dd6343","tarball":"https://registry.npmjs.org/@material/button/-/button-7.0.0-canary.893eb1876.0.tgz","fileCount":26,"integrity":"sha512-RzNsTW1Sl59uaZUZh5BAakEgBvB1bdDpIIsmSsNJTzwPblMhBRdyXGufhJsjy8GFrLYf0YFvs84pEm9CD5PoOA==","signatures":[{"sig":"MEQCIF+IA3kpz7TwPD0f/h3RjlBKKUPAzyxkvLMnbj1gXwDMAiAF9w7Vfp5j2O4EA1q4GR21UtQ4DAbXPauufX1rTarUlA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":372756,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeuV2CCRA9TVsSAnZWagAA5/cP/0XDutQyhaVs7XHgkavm\n14IHyY5cX9E5USOOL3HDt0Hpv3jRxoB1jT1BDmTokRSCt0hHhZuvG/ZbevXl\nebyh/tqhuOv+CaB0BEStS+Ben6aSDjjlr5+2S4ezjsdwpETMY9sDIpRHV6jH\nobZjOCXLv8v5brEFf4ukvlDGgB8LHrVlo1MXrJID0KylTl4fXQJvLI1W3EGO\nMXYPIrnWEmJAxQFu8QkETBo9vgONrRFrGfRle3W8E1hRX5DeSuH9u9hO3UQo\np+fqT6XXNID3Bie0V+VT4Uqw8hx2cSyjondLOFSkIY/ITlhIh/Q4TFx7Whho\nQ6N3ipSHik/DfGTJFvAiwgVeVSL5jz/xdg7xnFu8JJVa5DitM39keXkkjgGj\nRKXe+R1OYnX7kg2C4BPFx4c2Tq1iMY/OhxgZyzKF5FUf7h5yIdd/a5jGFyIc\nwPzZs7rHYgzqJPNmqby98V7t4imukzA54lsxgYhdo56bVRpuwd6GOvpLrG9D\nMMnowRJLqN3whvX08CAjM/BVnAbydQPyvFAy14FwbS7n0B+yyU4lV3/RVyVu\nky16kjG9fcm6kOqNrT+RfKsxidZ5s60jlSY8NHTE2R3DyvczeAmNmxk2P1y6\neeaS2to/3DV8of1z6iYc1Uho4SycyyszVeIRVaFUpicwhMId0KXd+v1360TI\nGBuP\r\n=A8us\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n#### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note**: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n> _NOTE_: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n\n **_NOTE_: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommended to\n always include it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color)` | Sets the container fill color to the given color for an enabled button.\n`disabled-container-fill-color($color)` | Sets the container fill color to the given color for a disabled button.\n`icon-color($color)` | Sets the icon color to the given color for an enabled button.\n`disabled-icon-color($color)` | Sets the icon color to the given color for a disabled button.\n`ink-color($color)` | Sets the ink color to the given color for an enabled button, and sets the icon color to the given color unless `icon-color` is also used.\n`disabled-ink-color($color)` | Sets the ink color to the given color for a disabled button, and sets the icon color to the given color unless `icon-color` is also used.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color)` | Sets the outline color to the given color for an enabled button.\n`disabled-outline-color($color)` | Sets the outline color to the given color for a disabled button.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web button component","directories":{},"_nodeVersion":"10.20.1","dependencies":{"@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/density":"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/button_7.0.0-canary.893eb1876.0_1589206401935_0.02083604256238436","host":"s3://npm-registry-packages"}},"7.0.0-canary.a5aeb3001.0":{"name":"@material/button","version":"7.0.0-canary.a5aeb3001.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"a6831d43a1aed0cffa8ad2f79ea3a336cc0e5e77","tarball":"https://registry.npmjs.org/@material/button/-/button-7.0.0-canary.a5aeb3001.0.tgz","fileCount":26,"integrity":"sha512-EisYp+/n9E+LD/n3SawWqpnm75lHk8L3AHejhe1r9YHd/PTTHMCYggJOaEUiRnIjWA8yQymGUusu0LSxScDYlQ==","signatures":[{"sig":"MEYCIQCnRRmaDgH+67GjA0tRsZDDB2QTPyLxVvJB0iM7kzr6sQIhAItJ/WvRox4M/kEQQGDpJy09PD+jhz4U8AavhA/miCaj","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":372756,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeuWFFCRA9TVsSAnZWagAAeLcQAJFWzM6SBDg51LYP1b2v\ngBndn2hT3cROSaDyfqV8Eh4pdAKv1ZDc9iokm1J4meFLTueXR0v9BdR0TP77\nOAU0yghj6w1m15IgPhzNN4mrQ0jddx1Lqzqzn6zuMc+OpZG+JvSSS45wbc2k\ngz2OHe14JQrGdVJzUx0fRO/xB7o6YVs/WVi+08JMAJj+C4ERx5PkSRN8MDs4\nUitXmzNAPWuf0s2JSUoTNkR9UpikHRjUhLkgAODY6VNpk4lpsprhwV3MhBox\nTNNq3l45Tm9NH23yo92YW9gctc6UBwk7Ylo13X8MAAbQHB2RYWn/mzHz2rRT\nBG5VoWTDzZ7HoKejekPyliVQb3hYr7RveuF2thTm+o5uJvz678vpxF4AscP5\nxc7APn2okAJ7ueXX0B0blQFVXnPXmZJv5pZc9p5jqaCjll14Sw6HkqPKvpkp\n4fnAVxbyIwAFQWkc4Mb5vfTJrcOE87Yf3C8UQn2olsTAXHdumLZAZtlett5/\nUfqkMaChVjHdPEuHGZp/lJl8VzUAhb4JeIqIzNc2NqMKg0XZOALZA+A2wDqB\nRzqKgN6PtKfAZ6WhaXJvTfxVir9zubgJXQWm5qyZ2iNQsud/p6xQiA7+wRA4\nxqZt07pwFPMMO3WiVkTqDI1X948zF/mtNz4A68ZnypFaH5GBwbZIlLA1oat7\nB4mE\r\n=6cNp\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n#### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note**: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n> _NOTE_: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n\n **_NOTE_: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommended to\n always include it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color)` | Sets the container fill color to the given color for an enabled button.\n`disabled-container-fill-color($color)` | Sets the container fill color to the given color for a disabled button.\n`icon-color($color)` | Sets the icon color to the given color for an enabled button.\n`disabled-icon-color($color)` | Sets the icon color to the given color for a disabled button.\n`ink-color($color)` | Sets the ink color to the given color for an enabled button, and sets the icon color to the given color unless `icon-color` is also used.\n`disabled-ink-color($color)` | Sets the ink color to the given color for a disabled button, and sets the icon color to the given color unless `icon-color` is also used.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color)` | Sets the outline color to the given color for an enabled button.\n`disabled-outline-color($color)` | Sets the outline color to the given color for a disabled button.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web button component","directories":{},"_nodeVersion":"10.20.1","dependencies":{"@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/density":"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/button_7.0.0-canary.a5aeb3001.0_1589207365085_0.661428905755711","host":"s3://npm-registry-packages"}},"7.0.0-canary.610c68d97.0":{"name":"@material/button","version":"7.0.0-canary.610c68d97.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"1e33569fbbfcedb4859a4e6b44e725cc46644c9d","tarball":"https://registry.npmjs.org/@material/button/-/button-7.0.0-canary.610c68d97.0.tgz","fileCount":26,"integrity":"sha512-cYSrSL3eiYGq6DYVKuELEdVTFNa4l7a9lC6aaroruCN98FGcXgfsO6mUcta4ewnpOBrogHUI0lXatqQxhTdUpg==","signatures":[{"sig":"MEUCIQDocTs5x5KBb4FSM5qtomVW5/yp2AYFHdoI2EGkzXNUqQIgUfVX2LClj+pC/06pLjW4oBIishb7bFGHVuEjgv08qkU=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":372756,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeuahfCRA9TVsSAnZWagAAZ8oQAIOAuMNdtX7dzseCaVir\nKwktP+/Oq1wJhRL8UxxqTb+RWDP5VbNpVQ1wGFgn2J/SmkQ2VpB9RBo18vth\n4OUm06dK4JbjNMzlDAA8c3ubBfQY2+B7aLBqp0ZZPw2Usu6hREP/okdIL58L\nk/2fE3oKBi5yGG7YNbsGPfvvLmqYvQP95CsjW74o1YsEgKTujsI0u3wWcCh3\n8b/xZLjHBFFK1kkzquUcHiYeBwfoCAyJch+FyjnbuoJw7KC+Zp6j1N8lDryX\nnlGkGQCGIbEsomGySMFzkcI5ZBy5IFkNDYW5AuAzfaw0cdAEPJYeY5S1uQSI\nM0fzA+XOlVCsNt7fSML9FWjrJ/w6stV3Mawn52sSxxnS15fjDy7Pxq1MWenp\nQlNaj3HfPAVmpWpKxvzsiNEJq0x6lPem9KO0JHx/WiBbQYt7w/uXJT5iHFNN\npTpNQperm2+Fq4uojv5s3XGruawEo+1ddNvyVFf+SiFL8kbrlF+q+hKszleh\nW74q2YhrtnhOBHwBTDUn3xqLcxKLGo2+8bf5TIiv6F8/+B4LOWiZ4OP+Oqfo\nob9YpACJ+Yp5eaIJg5wJE27cIKA6y5dndlXu0Sf5otN/k3e97afq+8uamwLB\n0u9qY4sZJboT3XgLQZqfzz6P5oRwrBcb6W367inW+D8IZeZHgQJTrxjh4Ez3\nZ6/f\r\n=HJU2\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n#### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note**: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n> _NOTE_: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n\n **_NOTE_: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommended to\n always include it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color)` | Sets the container fill color to the given color for an enabled button.\n`disabled-container-fill-color($color)` | Sets the container fill color to the given color for a disabled button.\n`icon-color($color)` | Sets the icon color to the given color for an enabled button.\n`disabled-icon-color($color)` | Sets the icon color to the given color for a disabled button.\n`ink-color($color)` | Sets the ink color to the given color for an enabled button, and sets the icon color to the given color unless `icon-color` is also used.\n`disabled-ink-color($color)` | Sets the ink color to the given color for a disabled button, and sets the icon color to the given color unless `icon-color` is also used.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color)` | Sets the outline color to the given color for an enabled button.\n`disabled-outline-color($color)` | Sets the outline color to the given color for a disabled button.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web button component","directories":{},"_nodeVersion":"10.20.1","dependencies":{"@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/density":"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/button_7.0.0-canary.610c68d97.0_1589225567240_0.22869630283003284","host":"s3://npm-registry-packages"}},"7.0.0-canary.ed52af767.0":{"name":"@material/button","version":"7.0.0-canary.ed52af767.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"d6087e7d973f8a3bd4d5361484a1640c0eb6d945","tarball":"https://registry.npmjs.org/@material/button/-/button-7.0.0-canary.ed52af767.0.tgz","fileCount":26,"integrity":"sha512-ujUe183B/2uRFRgqSNnU/Grjg5m4ldqvnLftO92hn/MJ6vArLJC46e2X0gDhlExWBWCtBi1qo+XtAYyffJoh0A==","signatures":[{"sig":"MEQCIG56V9eNFPhOy0KGrU7DutVVReArgPjz3w2G2V2ppG2fAiBVumDIOxZurUcmK3QX3KotzOhLm3/CDIfuAQeh34C4Cw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":372756,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeubUwCRA9TVsSAnZWagAAQ+AP/i92eKhHjzpns6VEzeO/\nYVTN8HwkZJqcXhpanUxUyONK4RhVqgo92pm0jpGtl32yQ2W/Qz1SKmhhChU2\nn0zpsqVZdR9wRsNiH4ZS69RVONxw65144ERpOnbHcPFZF5FGWFQgveT2uMM3\nkmliLUpoPvlRra/nlfbIjQdnGiE6rJXfX8kkhcAwTFkNIPOGtVt+EUk3sozI\nQHUfPxKVAYzuYkmuTIhXs9YvZdopBHPQ32jvsijg8na58dAN5tg/pUM6XaCW\nj4vlbWrJ/0a3T4jU/Z0pGYaVNGPlixMi38vIWlmCw3i6Cq9STpJUSgDmgtOO\nesjarMi23Ae7nwOyFKOI+u1/mhJjvJmvmuLFrRa1NuoHyATqkFza9ZPZ4Qxy\nz3TJJtUr6RF8Ra4Y/Otehqg9FM105wmWz28JxoH0C/4sS7fVrerPep3ei6g9\nPxdH480Ko6BQJMPsT2ghP6K+aX7C6jnLD9Nfl3CVeEX/6MS2UqgtM/skb1lV\n6AHnOJcSSCTQM9lB7rm4zUr5RRPbRFPbMFqtwuNlYC6wM9XrxV/n8t/miAeu\nkQb1VTUkxmKVesv+pLi3s+C/T4T0JznXhgBT3GXnGPQ+yGr7VhSGjYsmtuWM\ntFYii/7jePeEFic1HGSTWdGBHYE0LrRJeOeNVbI6TkdsaT8KuXbA14CiQLHJ\nGSA3\r\n=v/oB\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n#### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note**: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n> _NOTE_: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n\n **_NOTE_: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommended to\n always include it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color)` | Sets the container fill color to the given color for an enabled button.\n`disabled-container-fill-color($color)` | Sets the container fill color to the given color for a disabled button.\n`icon-color($color)` | Sets the icon color to the given color for an enabled button.\n`disabled-icon-color($color)` | Sets the icon color to the given color for a disabled button.\n`ink-color($color)` | Sets the ink color to the given color for an enabled button, and sets the icon color to the given color unless `icon-color` is also used.\n`disabled-ink-color($color)` | Sets the ink color to the given color for a disabled button, and sets the icon color to the given color unless `icon-color` is also used.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color)` | Sets the outline color to the given color for an enabled button.\n`disabled-outline-color($color)` | Sets the outline color to the given color for a disabled button.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web button component","directories":{},"_nodeVersion":"10.20.1","dependencies":{"@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/density":"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/button_7.0.0-canary.ed52af767.0_1589228847823_0.29536800323595735","host":"s3://npm-registry-packages"}},"7.0.0-canary.058cfd23c.0":{"name":"@material/button","version":"7.0.0-canary.058cfd23c.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"706b4798231a61ad74e4b9b7c245f2669982f988","tarball":"https://registry.npmjs.org/@material/button/-/button-7.0.0-canary.058cfd23c.0.tgz","fileCount":26,"integrity":"sha512-cZyB5wp4AvlrZL2fHNitPuscKAfNTqHJaBQ6L1DtzsyoXssErioVpt9dFwbaF++NHoKqGYzidMg8wDU3tXdoxw==","signatures":[{"sig":"MEYCIQCH3liBYRIiCpqjJcp/RdmEQeVXsYPdnezOA4k61GLTOwIhAJzBCN7WYKaVliaRgzVICeuLkL49SCqPKeJLa5iJBWk6","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":372756,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeucK9CRA9TVsSAnZWagAA180P/0kL8EfSkdgiVXmL3xgk\nTedkoCIH4VEAOjHbvLgmaRGapIzWW6XvNupC2SNKiWD9V+rp60gFVnQf6xBu\njk4iVJBBJ+04hSJ/W9pLB0h29tWnS/hh7VY7NI9x6JT6jafUVBuu2xPyqvR1\nA5yVUvYJivf9yC8n7YuruzJlQbcPEeagRXOb2z/MNYJ0g8aiUGJyzr+5c/ex\nrCO/B4xdFDfg6OEpS5/WGohBmeL7eDqriHVKp/OwPLd6AcpC26vvwGsgvZ6b\nll5P/ffW5HddRICsV2Z05m5+6kwNjMHcIojEFnADcQi79Ubju7XZHaxFeBi2\nnntSus6MgMKaT9ni4d7s8XiHspQsXmoUYp8kBtU7a/HlFwYgN3+jGXBLrna2\n7Lr1SFEyXGhm8cP9AhOfvFZtfEeZAZpMDUE0kweDP0swBpPjnpDGX3TD16bQ\n/+9ZZVO7HKo/msIceUP359A/3V3u0Uxobvu+HXcifdG84lM7eZgxHRP7Wamx\ng8sPQHeo05FS3kDfIYv36tx3op3byGkhFrHD2OSOm4Fq0lNT0KWgB466QFtK\nuG5JSV0qJMx+/RUJ9DrlGfLKjJqsM01UbW05EXJgn/NPe/KroWoxBdD5FoB7\n/2HT31megvokcTwmkCX2MpTqOv6zVQAulW9N/aQFAC+ZnKn1QpXaSaR7RlNu\nUpFN\r\n=jg6n\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n#### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note**: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n> _NOTE_: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n\n **_NOTE_: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommended to\n always include it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color)` | Sets the container fill color to the given color for an enabled button.\n`disabled-container-fill-color($color)` | Sets the container fill color to the given color for a disabled button.\n`icon-color($color)` | Sets the icon color to the given color for an enabled button.\n`disabled-icon-color($color)` | Sets the icon color to the given color for a disabled button.\n`ink-color($color)` | Sets the ink color to the given color for an enabled button, and sets the icon color to the given color unless `icon-color` is also used.\n`disabled-ink-color($color)` | Sets the ink color to the given color for a disabled button, and sets the icon color to the given color unless `icon-color` is also used.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color)` | Sets the outline color to the given color for an enabled button.\n`disabled-outline-color($color)` | Sets the outline color to the given color for a disabled button.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web button component","directories":{},"_nodeVersion":"10.20.1","dependencies":{"@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/density":"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/button_7.0.0-canary.058cfd23c.0_1589232316803_0.16130641938522738","host":"s3://npm-registry-packages"}},"7.0.0-canary.0a371b4fe.0":{"name":"@material/button","version":"7.0.0-canary.0a371b4fe.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"9adf465bbace4c16c6e023aac2b01788da48ffdd","tarball":"https://registry.npmjs.org/@material/button/-/button-7.0.0-canary.0a371b4fe.0.tgz","fileCount":26,"integrity":"sha512-TCY5tlwtI/JPBofXgIeiVaOvQpM1A6dmCHDe8ra+iV5iHvyTneu5PiJPRW92jwr4CHRi9okcxiew7lOqisaRqw==","signatures":[{"sig":"MEUCIHHd+ImfcvQAXGxLewFSAqQ0JS50Sn6ZDp/xQv/q3naBAiEAvI5V4st+4597GMwyExYbkM04KKhvRweEcvlukkiSfB8=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":372756,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeuy7CCRA9TVsSAnZWagAA8z0P/1KH+gcg51hjyuZqy6fT\nX0xe1XYf4xjRQo33Ew3yhpt2tLFfNvtdyMZFUq+IrxFZGKZOPda7ESyO23NO\n4vdwcrNzAlnPSZnDNU3xNJrrnwkpD/GsEBEOGuF+04KCsAzXBvYWBWZb9cDT\nBr3LW8AA1u/3Ak7egOQxH87PImAakRuZQQR1VeN4xWFAR2DZhow2Ag5hlVHf\nB3Iu5eLk2kwD92+Mw8vclkkW3gIvjH0BR7jahNn0W2DED7CYK6FpJcWQjvvG\neakp5Oga7Kbn/m6JWTsh2OafhI85PUfxdOpM3btm71OhgouadcKObrWFpsX/\n05ylBYo7/KPZVtq48lzpXh8Gt7WcVDGk7M9ycvQ5vlvnlJ6DqDxZ7j6Ve+W4\nIak26oJvWrlS5ydYTOGJlQUmMrZDUF0YB+TidixN4FY7UzLlOUaA2ZScqffZ\naHLM3xsktCvLEPb3KzB6NNhMJ5bUe38lPctcdv935YolfR2ebymZBrhAdJsG\nBLuwH2dqdAgCio9XvYwyaQNMGsb+4rNMi/64mg9wYo5uruge4WyxvvlkHjAY\nyrg071Cyo1sVe+4yei56IXRCdiOLw9mmt2MPEcpkBsXtmaSUyQTTa2bhwJi/\nTbkpUIzretbrEKbfJ86VvbrMSiVWUNQgx2kbcOkILXcGHGQCItgYHH+UyeVY\nc7lb\r\n=c7yK\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n#### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note**: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n> _NOTE_: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n\n **_NOTE_: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommended to\n always include it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color)` | Sets the container fill color to the given color for an enabled button.\n`disabled-container-fill-color($color)` | Sets the container fill color to the given color for a disabled button.\n`icon-color($color)` | Sets the icon color to the given color for an enabled button.\n`disabled-icon-color($color)` | Sets the icon color to the given color for a disabled button.\n`ink-color($color)` | Sets the ink color to the given color for an enabled button, and sets the icon color to the given color unless `icon-color` is also used.\n`disabled-ink-color($color)` | Sets the ink color to the given color for a disabled button, and sets the icon color to the given color unless `icon-color` is also used.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color)` | Sets the outline color to the given color for an enabled button.\n`disabled-outline-color($color)` | Sets the outline color to the given color for a disabled button.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web button component","directories":{},"_nodeVersion":"10.20.1","dependencies":{"@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/density":"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/button_7.0.0-canary.0a371b4fe.0_1589325505699_0.41027610125711256","host":"s3://npm-registry-packages"}},"7.0.0-canary.2139200b3.0":{"name":"@material/button","version":"7.0.0-canary.2139200b3.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"c8fa52e52e3a2a2f54f132f5c0fbeabcc9919b0b","tarball":"https://registry.npmjs.org/@material/button/-/button-7.0.0-canary.2139200b3.0.tgz","fileCount":26,"integrity":"sha512-E/NLMS0/u2ruS5QsH4Pa+CSryCbTBXuZ5JJZ+BVHeFRglWDL4wqJceVR9wnf2pZIVwgfFflUUdTj6LuIar/9ng==","signatures":[{"sig":"MEUCIQC411N/qGDwJBnnOXictQy55MWDBwI1xxrsTaL7GU7UuwIgDR6kLBnT8R+qKq659z3kYXyd6WSxEulQEg39UWjD5wE=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":372756,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJevAiGCRA9TVsSAnZWagAAyD4P/RS4alFlndqjlaOvh+UA\nk0kOug1AI7aLAUMzH6MwFxvaYtRTTGmtmH8gN87ENd64iW8Q4+qVFdIZxayt\n7//FSWzf7cll+3t90KK/scNfiABozfc5oGox2JR8Ly02Fe6vtGnjo9rIJvAP\neRCY8ED/GzxukYx/05sspdsvxreyFBRJnxr1mOte41cvF6qoAyWqwsEFbGw2\nw0d5rYHr/MUlKQjzUQiBe81i2t5HDwIpR2ZCq2eDoTnRARZ8wFwfdZAqYF2i\nvOZ5SjiKdyKOTrNpoTqeeqwDat0haN8A/l1GSEZ0u58JHJyEJuPJWXgIh7xj\nqtfgbpUiylTcvUCjOmtaXv7lt8to6DvYMLIypG1QYnBbtJlU206TCoNOMVqq\nnJomut72g8DMi00ZB4B9+p0HUNusx670KZzhTRLevW8uwR32nVKUDhxd/IXs\nguQlw13Kbht41d8tMvTyeEWU3QhF3NohLJsH7M2MKmi0U9Urz30OSb3ET8FG\nyxyWa6Zcyr3KvW4gL7rD7DVwUHxbE5A4JkAdXo0+CIN8Zv2ZJnFLc9js4Zef\nXr0sQaNCTkdtq2ldGCh0NpUJtdz/QnUdv9ZbVgVJkSFrV7km+rGvpzoE42SP\nQXoU531J6TxuduUuKLmrkSccUVQnC/lK5lhL8cABl1wEom7sEX5BrqBseAVb\nRQoZ\r\n=YWTZ\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n#### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note**: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n> _NOTE_: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n\n **_NOTE_: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommended to\n always include it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color)` | Sets the container fill color to the given color for an enabled button.\n`disabled-container-fill-color($color)` | Sets the container fill color to the given color for a disabled button.\n`icon-color($color)` | Sets the icon color to the given color for an enabled button.\n`disabled-icon-color($color)` | Sets the icon color to the given color for a disabled button.\n`ink-color($color)` | Sets the ink color to the given color for an enabled button, and sets the icon color to the given color unless `icon-color` is also used.\n`disabled-ink-color($color)` | Sets the ink color to the given color for a disabled button, and sets the icon color to the given color unless `icon-color` is also used.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color)` | Sets the outline color to the given color for an enabled button.\n`disabled-outline-color($color)` | Sets the outline color to the given color for a disabled button.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web button component","directories":{},"_nodeVersion":"10.20.1","dependencies":{"@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/density":"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/button_7.0.0-canary.2139200b3.0_1589381253389_0.36854555987437077","host":"s3://npm-registry-packages"}},"7.0.0-canary.744d751a0.0":{"name":"@material/button","version":"7.0.0-canary.744d751a0.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"e93b183276ff68b97e0859f24c72b982f77fec5c","tarball":"https://registry.npmjs.org/@material/button/-/button-7.0.0-canary.744d751a0.0.tgz","fileCount":26,"integrity":"sha512-lFD4Bt6iAxootaqgI2lYJoLtEonENOLtpbR7FabPVIw9THBxGxZ5tirgVkf1+kmCu38aZB2uiifqTibRlkTv+A==","signatures":[{"sig":"MEMCIEemqP31+xWfIf+vICM7QQOBr2VsCSpbbsNoJf9UCxuIAh9TaMtHPcbGHLRSMyjVaZMiehiVHT6xDLE8Y6wgXL//","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":372756,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJevMxXCRA9TVsSAnZWagAAFB0P/1LUuDRrfyjAFLEcjsZd\nq4X6TGHseTP7g/7l7sMafttahM3OghU9NqDugN3ToNrNYn9foajK2vfyBKdp\nKeTk62oAJZb8RzmYIvjbjrHKXje90l+vjSiPeDLWgh7g9xDo6GF8OyR3Frsi\n/FT5hl7Pt/fopSSDNeU0BjSgRXWzdWOdPR5PQzspPeJz7J65xcWhQFCIxDKe\n9OrCqTLHyva0DTjB0ra857Ym3JZHBNeUxiTC1m8FTqW92ZUGPGsw0Hqqv/cE\nBME+vIsZ1vu1xsR0esbCf7k4PeAYkEXax+/Gban6Kh0JSE2JXa/lSC4+hK5N\nM8rJKfj2ef3iP9C851saa0ilUtaQ5GDgYSSgzs/wZXfVHXk5AKjsh5XnDlLG\nbBRzuQmJpMAwgkSomkOix9GMwB9kDZIs73tbeQNaF0u2A6zygC7lfi3wnUg7\nBfLjyzgVXK8nmr8Ip8yrlOaI1DVCO8A+qYiCFbDL32KRZ6W62MM0L/c2hHw8\nLv49S52g4kRCSgEYvcgX8gYkTnfEUiy2tDjAPiq0qpJejzraYh/WelLcc0aD\nZx5VmC4dXkJETlCIjWxdX0EWVekuEQJ2VOY/xLieRJwBmAg2nQstzCfiIjYx\nYhDHDrpvtSkWabB8FjPgUofr1GW/OIU8ZXRQkomH9n0B/9U/qv23ra8NDZGq\nH0OX\r\n=aJD9\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n#### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note**: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n> _NOTE_: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n\n **_NOTE_: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommended to\n always include it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color)` | Sets the container fill color to the given color for an enabled button.\n`disabled-container-fill-color($color)` | Sets the container fill color to the given color for a disabled button.\n`icon-color($color)` | Sets the icon color to the given color for an enabled button.\n`disabled-icon-color($color)` | Sets the icon color to the given color for a disabled button.\n`ink-color($color)` | Sets the ink color to the given color for an enabled button, and sets the icon color to the given color unless `icon-color` is also used.\n`disabled-ink-color($color)` | Sets the ink color to the given color for a disabled button, and sets the icon color to the given color unless `icon-color` is also used.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color)` | Sets the outline color to the given color for an enabled button.\n`disabled-outline-color($color)` | Sets the outline color to the given color for a disabled button.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web button component","directories":{},"_nodeVersion":"10.20.1","dependencies":{"@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/density":"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/button_7.0.0-canary.744d751a0.0_1589431382889_0.9974335559723984","host":"s3://npm-registry-packages"}},"7.0.0-canary.ad0c0c103.0":{"name":"@material/button","version":"7.0.0-canary.ad0c0c103.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"bc9dfe289ed12503a96c8cd86a858ddff16d153c","tarball":"https://registry.npmjs.org/@material/button/-/button-7.0.0-canary.ad0c0c103.0.tgz","fileCount":26,"integrity":"sha512-DLt2KGYODIWXmpYgMUYJVwd0xcG4IXzT9DHsaD65SG2/fNcSSzTCVS6rTG3zWbT3Gt/wnsmKOTR6an/jl/++NA==","signatures":[{"sig":"MEQCIExPNevY+F6vFDgpgMF8ComxnTEYT++bJ64WaplISeFVAiAJt/6DwolclLr7LqYDfUYrfm5RjIaM5KbzJD3ww8FwvQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":372756,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJevVr8CRA9TVsSAnZWagAA7lwQAILIfvy0K3Y83ugtoQAG\n6Gqk4j1gcRUebN9PxUWwVEMB5jZlkibxki6h6cYfDLLCGwI9Da+AWpfJiE86\nd66EyYs0rLT+v4D7uzP7ZELBktGEu26iu3ezQYoraOBVomwMIRb9a5AfF7QV\nj1c6XRDOEjDmsxtQuCLiWNj3IGU+Y6Xo9Gec5cBKQLBMWV2andTrYl3M5upz\nNDwvtRs85fybo0nNCZKSzi/aSJ4iCHGqycfukddwdL13fhAN28Exnnv4A3qv\ncoP5Gr/yeTTw4/M4yzPFTOsP9m1rmiSrmoHlj5GjX/XxfRoQO1T2BZx3X5HX\nI3d70Suyp1g4daj41H+RnOy/xmdFsFgNPGMkstRqHBD/SY7MmcEriYsjLLSk\n2Qt5DtLlyvapHnxe9MbIKH/w8vJrzuMmSi0Fld8wmtIIGa9Ptciei21pJQZJ\nUn+qRzwHLla633r7Cviz24obK/BvOj+lI9kAWN99Wv1SSsX72GfiPJVhbSEo\nP35SoWtGzRetLkApgyNzdw0s+pwUuI/cTTR4g4qs9zSUBm2p7YTORqkRDug6\nbb2C3MjFgobqNrioz6B0gQjiGjE8XFGgOuoaZ3v+fstxhZk2ve4UUYLKeuFt\nZnuvuV+fDTfFQbgasORQHPKLKLrpc8t6V6Wfs15yOOyh979Mind02qzNsKdU\n/Ytf\r\n=76CF\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n#### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note**: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n> _NOTE_: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n\n **_NOTE_: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommended to\n always include it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color)` | Sets the container fill color to the given color for an enabled button.\n`disabled-container-fill-color($color)` | Sets the container fill color to the given color for a disabled button.\n`icon-color($color)` | Sets the icon color to the given color for an enabled button.\n`disabled-icon-color($color)` | Sets the icon color to the given color for a disabled button.\n`ink-color($color)` | Sets the ink color to the given color for an enabled button, and sets the icon color to the given color unless `icon-color` is also used.\n`disabled-ink-color($color)` | Sets the ink color to the given color for a disabled button, and sets the icon color to the given color unless `icon-color` is also used.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color)` | Sets the outline color to the given color for an enabled button.\n`disabled-outline-color($color)` | Sets the outline color to the given color for a disabled button.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web button component","directories":{},"_nodeVersion":"10.20.1","dependencies":{"@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/density":"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/button_7.0.0-canary.ad0c0c103.0_1589467899711_0.268988667161423","host":"s3://npm-registry-packages"}},"7.0.0-canary.fd8f8f2b7.0":{"name":"@material/button","version":"7.0.0-canary.fd8f8f2b7.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"df641bacc541e9127e576d428354e99162eb3d09","tarball":"https://registry.npmjs.org/@material/button/-/button-7.0.0-canary.fd8f8f2b7.0.tgz","fileCount":26,"integrity":"sha512-e9EAPeziHt5ooWSj5Qm63C3mmueCAqkjVCl/urdak2A+HJOWJVCKC+CiJ0Sogk7Ed3FOtuYSfhHffO+893kuSQ==","signatures":[{"sig":"MEQCIH6ILMUWnq4ljP1AO1b+faH4LQUztdattA6P7jpyZ8mrAiAlHQW6A7/gk3aJBhA+fJBy+WDuXHF7YxyCEAQ+4C2rHQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":372756,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJewsuvCRA9TVsSAnZWagAAJ6EP/2msQqq19FTmy7JAB1ob\nKlim6ktAbk8pMt9FzTKhk8D5uV9nnLqokNVTrqCYR4eGGryOFYANaRFWhfJm\nAP8wj1k81PdjapuyS4+X6e3gSAEOOUfDocKQhe5TPul5C3+RQyoaraVjCJlR\nWrlsUuAIMm2xnsIQp+pxjm3DIsa4ls8SMbowfcCTCHD24+biZSbvER3jTMSL\neFkYikSdjkvP25GqFsgwC/Kj2gocL+oIrXKPTtL/ROtWZMcT4z8azIfdDVxQ\nFnaxfOdKC2Y2RObI5GPuVY9s4CaNFlGy26svAR1Eudp0L7NNJ2pUUD77xs+c\nxUjA4OaE5HePOmA5CLyLxewpWvzwpxP41Q5Rswp9ySv/MBhxTG18+98j0xx9\nc17J5DT5AwwD+LNfGmKoi8aVEvg7sS7z7Sp9YcrPh3XLq+wD+d35fRqG0ijg\nFrBlm7tRDHa1gAhHjgSDwtjrEk6L8YMy36iOfkEXcR5yQteNRoflOvgj97ku\nrwnEKTuhr1JmJD89VZgjQOpeQxBDceu9Vnh1wRgHUoyd7IS22Nczx2wdKOLW\nOez0rAZnn2kwk22ExaNaTYMoBZAZZfXNuxjwmOSXBS7vOEfQlCyW80hMozgV\nVXzRtbvOqx2ovPjdyOeqD5VnnK/+gOdYTKFen+PQS4UlqzrxDUyGIRRRD8l3\nT5tz\r\n=JqeS\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n#### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note**: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n> _NOTE_: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n\n **_NOTE_: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommended to\n always include it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color)` | Sets the container fill color to the given color for an enabled button.\n`disabled-container-fill-color($color)` | Sets the container fill color to the given color for a disabled button.\n`icon-color($color)` | Sets the icon color to the given color for an enabled button.\n`disabled-icon-color($color)` | Sets the icon color to the given color for a disabled button.\n`ink-color($color)` | Sets the ink color to the given color for an enabled button, and sets the icon color to the given color unless `icon-color` is also used.\n`disabled-ink-color($color)` | Sets the ink color to the given color for a disabled button, and sets the icon color to the given color unless `icon-color` is also used.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color)` | Sets the outline color to the given color for an enabled button.\n`disabled-outline-color($color)` | Sets the outline color to the given color for a disabled button.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web button component","directories":{},"_nodeVersion":"10.20.1","dependencies":{"@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/density":"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/button_7.0.0-canary.fd8f8f2b7.0_1589824430627_0.7978689049617362","host":"s3://npm-registry-packages"}},"7.0.0-canary.730920fbb.0":{"name":"@material/button","version":"7.0.0-canary.730920fbb.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"7e8deadafd67b03f68f0802628fcdd1a3bade884","tarball":"https://registry.npmjs.org/@material/button/-/button-7.0.0-canary.730920fbb.0.tgz","fileCount":26,"integrity":"sha512-TUJDP146Sjn7lNBD65EW+2yfX1K3NwcXZsDBs6hOOGJJGfG+Jitp0dP0/Knba2LIuOkTL3HKJLnP4FzV9L9nQA==","signatures":[{"sig":"MEUCIBmU7tjsdoOr/mNyZJUD4sZeEChsiV3cEPo7PCzU4dcnAiEAmXGxps4hlMeuCzZ5nWhH8KdIexggWXUOJ0VUEiz1JKE=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":372756,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJewuWVCRA9TVsSAnZWagAAo7sP/j9ELm6++YVLPQNwzC9o\nuklMz1CB6LhuU4AqBRPEFr/0C7xDUpBjn5kHNMO5nBOQDs/n7FjtYbkwAIIg\n3c+xqiELOPIHXGtH+rGTa6s3A0Nfc2s8DzcwuTjLPSkRMfNdvcaPiyAcj0Ld\nBJ38vrD2GuSVjB0Jh1kEzh4LpunQ57KuvjRWQmsM9GHtBTZBFURl4VqrUoHw\n5GRAbO8egVbzj0kPNfzv5VGLcn1WIumSnEgAjY7dEXhM7ZnsbKPb3819OCyl\njSV5iZvaaBompZvxj5qDtCYJwDj0pqtitI/tETzqHj3fmpBhA7PNYBj/W5aN\ng9yWjnOjlD/rn4qdN45yZNCNEEkNaRS0xTK9HHZrN8KB+XeAdjObEIIwQsDa\nGAqml6CkkhIhEYjKtHAXHpgDk8gi56KBSUa832lrB+MDhiXb7YWEiJfV8k/t\nkmb28dRCsx7c0ZvUMk75OBeavQzHdqHV2rSv1jbXLXJ9KiajeRTUDBbIj8Mj\n4e+lcBeSXziMaglgdKd0W1z8iUxck9NInaF+TSrgh4rl/NGQu1K7Tkxc59AP\nzIKuyLeQEI+4lzzBXsyzUENcSFBHsgQ84ZwTAF3rpME7w9NaN/8pksbyEs84\nBTBS3QHHXhifb2/Iwj5k3bIvyZ/gCJFQbSv+wtta94KX3OvwtMr9Byy5Wvfr\nWwJa\r\n=S2Eb\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n#### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note**: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n> _NOTE_: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n\n **_NOTE_: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommended to\n always include it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color)` | Sets the container fill color to the given color for an enabled button.\n`disabled-container-fill-color($color)` | Sets the container fill color to the given color for a disabled button.\n`icon-color($color)` | Sets the icon color to the given color for an enabled button.\n`disabled-icon-color($color)` | Sets the icon color to the given color for a disabled button.\n`ink-color($color)` | Sets the ink color to the given color for an enabled button, and sets the icon color to the given color unless `icon-color` is also used.\n`disabled-ink-color($color)` | Sets the ink color to the given color for a disabled button, and sets the icon color to the given color unless `icon-color` is also used.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color)` | Sets the outline color to the given color for an enabled button.\n`disabled-outline-color($color)` | Sets the outline color to the given color for a disabled button.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web button component","directories":{},"_nodeVersion":"10.20.1","dependencies":{"@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/density":"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/button_7.0.0-canary.730920fbb.0_1589831060854_0.5464428406150132","host":"s3://npm-registry-packages"}},"7.0.0-canary.bcdad99bb.0":{"name":"@material/button","version":"7.0.0-canary.bcdad99bb.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"bc34b3558bbd2706071006477d8331913894a8a2","tarball":"https://registry.npmjs.org/@material/button/-/button-7.0.0-canary.bcdad99bb.0.tgz","fileCount":26,"integrity":"sha512-p5YDrrg1iOkTNVsk5mp/GaNlJKTBfoRrMWwGHNDDH//BztUldf2kit2+IkPeRFx5KvudJmoqQq3Yfuurw8f22Q==","signatures":[{"sig":"MEUCIQCgZE71DruaTIY6L3hhgmmTJ4xL7c+3T9JwQEFT+OHZVAIgWW+OjuZwJRNdzn8nq0+gDqNBCwMznA65YYWvmKq3b+M=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":372756,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJew0/2CRA9TVsSAnZWagAAutkP/jaUMOu0PHc6badI3uJR\n+J2CuTS2DfFaLw7zSje37POk9qrgHk73TqigigT3Ol44/1mtXEn62jpuQhIt\n9dbZFp3HsdQgZCw65JY8nffVhHoDxD8ZFZEGp515FXepGYVDf4KAZcFpzUmq\nzNfOmwCwtGW/4M820d4XFMtcnse6CXxcG0+hksHjiX2oyGkb9PjRAEn0hqu0\nZ0VvTm/RAh7/ZzRrBV07mQy5v1r9hE6T0DsNlS8kObVj2I/Gfl9YnDssfe2d\nzgY4oaqoQElyJD1/RTs2d5q/uatq69fGNrNKr1sSnlHz9+Lng4gZjx1K27bn\nGPWnX5rRt/pu0PcP2rTi4yampldWGMsXymTI9jEZfoU2/AMRTLGxbdPewCb5\nZUJrbhS+3U1YALU4yPMmE9qDyGIAXxM78757j+UNMNQfmfGY8PRuVME/tOlx\nLB1GKdfN0m+PNJ8cTx6Af19Fc6KfeHTZeV3D9nHAKpECghYzuHG+3d6UfBtU\nUeOZb0zpuwVFpgW7Fpy7ZTDIMSRVHy+MvJ1mBfXVnFzganxVtDZIJ4xiUD4M\nkELCNDcn4KthszhkAGAQPCVfzXW0u813te+VwLXLbMVkN6bPlCY5tk9K74kE\n/y1hLgesTfFAggNzDsWPfIqRiFxRoWjl5CP0If1MOPjR4UJSHbpiZm5ewFmC\nlGHd\r\n=sfyE\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n#### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note**: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n> _NOTE_: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n\n **_NOTE_: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommended to\n always include it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color)` | Sets the container fill color to the given color for an enabled button.\n`disabled-container-fill-color($color)` | Sets the container fill color to the given color for a disabled button.\n`icon-color($color)` | Sets the icon color to the given color for an enabled button.\n`disabled-icon-color($color)` | Sets the icon color to the given color for a disabled button.\n`ink-color($color)` | Sets the ink color to the given color for an enabled button, and sets the icon color to the given color unless `icon-color` is also used.\n`disabled-ink-color($color)` | Sets the ink color to the given color for a disabled button, and sets the icon color to the given color unless `icon-color` is also used.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color)` | Sets the outline color to the given color for an enabled button.\n`disabled-outline-color($color)` | Sets the outline color to the given color for a disabled button.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web button component","directories":{},"_nodeVersion":"10.20.1","dependencies":{"@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/density":"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/button_7.0.0-canary.bcdad99bb.0_1589858293991_0.912184712158479","host":"s3://npm-registry-packages"}},"7.0.0-canary.4497b86ed.0":{"name":"@material/button","version":"7.0.0-canary.4497b86ed.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"fa3db9965c5047f02440a64e3faab61c25e476a2","tarball":"https://registry.npmjs.org/@material/button/-/button-7.0.0-canary.4497b86ed.0.tgz","fileCount":26,"integrity":"sha512-Za+zbK+ZTvUJySR4f66KbZbjTP60m++dvwxmrIy0XCP2KjkC9FowF1vAfGpu45siXKbLo1a+YMNBDmPWm1zL5g==","signatures":[{"sig":"MEYCIQC4IewePxgIJohj14Ti2XNZQje/GKYHwZR/JYxI+aGzqgIhAI8rGdbtmF63VqNgRVZnZEq7GT3VkuWymapxs4KIU8Qx","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":372756,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJew1ejCRA9TVsSAnZWagAAo+8P/A5SInx/rneJp508kwmE\nxr5B+FlOZ00FRA9k5QG0Qv+EWUlYK+Ep6u3Yoj250goy7QTKdvKVw0UN8F1c\nSfcvlb8wu0jbqILlGFoUaFIsvsVsAHn5Hsk/+b6w3a2D59nqxAMOD+QJ2+SX\nuHl8fGno6Vjg/ztAFb1NdHINZKxlQe79IuUcRv0D2DGh1wYyBdXjPbSqPoDc\nEeZ1OrAqigwn8NP/hs96A2WKDOblH6uimf+Jg7AAX6N5ng1SYwBaO0IsYmJl\nT1xaBv5RQITvXuECzIfLmg4DyXpr11/t2mZzAQgey7gu4PFkxIKCqXAyZ2ES\nrIcwpEYwqTpFY8qiRqUVoeq8YQV38q2XNl7Ja/x4ZF2z5uNxloWyziJsEHTE\ne7k1i/rKbNCeBLlM5c75F5VRGPIhPf3hgiKsfj/3qW1tR3HEQsodx5wpsqEV\nkSesbqPZe1h6Pj+kv2Y01KrHYZvTovqpjsxOQZ2Y/gUiE3s4W4gjpbARtUNt\nC1CIpKu1oa3bNkSYEA4wRnD3JSKQHiBsbScxQq2nMXsIDe+40dMxRneS0ZW+\nEdcV/UEFLk7ZDNP1FJo58Aqd2ZF79LwI7G21Rwna+0R2buI/3ZpiRgamGZbe\nLRCYw/V0KeLfVWlR5OXIeKhPY8edl1w52BQxNGqmUaiZkxS2lREnMrA//enY\nsQEM\r\n=w1Yn\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n#### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note**: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n> _NOTE_: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n\n **_NOTE_: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommended to\n always include it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color)` | Sets the container fill color to the given color for an enabled button.\n`disabled-container-fill-color($color)` | Sets the container fill color to the given color for a disabled button.\n`icon-color($color)` | Sets the icon color to the given color for an enabled button.\n`disabled-icon-color($color)` | Sets the icon color to the given color for a disabled button.\n`ink-color($color)` | Sets the ink color to the given color for an enabled button, and sets the icon color to the given color unless `icon-color` is also used.\n`disabled-ink-color($color)` | Sets the ink color to the given color for a disabled button, and sets the icon color to the given color unless `icon-color` is also used.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color)` | Sets the outline color to the given color for an enabled button.\n`disabled-outline-color($color)` | Sets the outline color to the given color for a disabled button.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web button component","directories":{},"_nodeVersion":"10.20.1","dependencies":{"@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/density":"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/button_7.0.0-canary.4497b86ed.0_1589860259033_0.7317298930666483","host":"s3://npm-registry-packages"}},"7.0.0-canary.2e60575da.0":{"name":"@material/button","version":"7.0.0-canary.2e60575da.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"cafd854d2fa3269ddff025c4d9c43696d1ead9a1","tarball":"https://registry.npmjs.org/@material/button/-/button-7.0.0-canary.2e60575da.0.tgz","fileCount":26,"integrity":"sha512-i/8/G1EFN302FHDVih0rJwi/Jf13d9R/AzEziyMCnVhNAKGMuQA08s+NR7weayDGBGs0ylaomHh+vs8aj1pvSg==","signatures":[{"sig":"MEQCIGeFnSy+x6xmI3dQjx1wzEHknz2Y78q/2gr3HJvF2XR8AiBDgwZO2HJEKwfYdGOksKwyM83rWNPLKWfsxn87SWrn+g==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":372756,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJexAS/CRA9TVsSAnZWagAALVYP/A7jL0nSwIu02Y3vkZyI\naG35MbIUjjY77yhqoueJ3g/7dG3zkEBccJHHlH++pl1IFDb5Io37n80Oo8rC\nbwJ57OsrapCj9m++c/ppbTuHj2BIbByR8xRR1KgZlwYCPne/cfobJ3uvn6SR\ngpZc9AzIfjf+sGxhYUQlve2BJl7I97CW0AUfK/PnOrKcNVBXk607Q58WOnDR\nQ1N4+qhSI2Bz3sN3N5YKXlX9anb/hXJ/CNKAU0V73A7QYtOzgBjgovcvaRJB\nvJk7/+DnOyfszkAA0Yf7FbX6bd7/+VL7UEGjDGeYbaCxUSn3/yjeMEdRpi5s\ndpFTpQeJfWaeQtsyJlhOO5wPWiw9RARQm8PMa7fwq7s8eQFb8P2DAo9x+5Jd\noPF+KoqivaP2svDEWKkrt5JQZ9h1e8gx/foHViYJm2PHjCZM3a5GBGDzOi83\nyQwM/dzipfqIFnFxEBl8vGouuhWjka9cfMKmrwQ3/6flf8iy4gn8c6fXq0hG\n2xvag72rQjzyHVQ3hVpdGyiB1Hq5H34WbttYzms2IXv4o4Y3fyOXHkVoHUOu\nxZ/ltFn9cOPUFsxvj24fpIdTYQxbuXgc2AgIrUH2T1M1TjpEMjy7ejADm5P8\ncfGt0pd9IetQU+a35O7DzoMQeNR/dmZ3HLhQBYmrCGIrZWdrJvLjkF2JGaf0\nm8ti\r\n=r3SQ\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n#### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note**: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n> _NOTE_: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n\n **_NOTE_: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommended to\n always include it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color)` | Sets the container fill color to the given color for an enabled button.\n`disabled-container-fill-color($color)` | Sets the container fill color to the given color for a disabled button.\n`icon-color($color)` | Sets the icon color to the given color for an enabled button.\n`disabled-icon-color($color)` | Sets the icon color to the given color for a disabled button.\n`ink-color($color)` | Sets the ink color to the given color for an enabled button, and sets the icon color to the given color unless `icon-color` is also used.\n`disabled-ink-color($color)` | Sets the ink color to the given color for a disabled button, and sets the icon color to the given color unless `icon-color` is also used.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color)` | Sets the outline color to the given color for an enabled button.\n`disabled-outline-color($color)` | Sets the outline color to the given color for a disabled button.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web button component","directories":{},"_nodeVersion":"10.20.1","dependencies":{"@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/density":"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/button_7.0.0-canary.2e60575da.0_1589904574934_0.6469857534197314","host":"s3://npm-registry-packages"}},"7.0.0-canary.e3eacefcc.0":{"name":"@material/button","version":"7.0.0-canary.e3eacefcc.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"63c10072a9683cd40adb83de6527d363b6a1b44c","tarball":"https://registry.npmjs.org/@material/button/-/button-7.0.0-canary.e3eacefcc.0.tgz","fileCount":26,"integrity":"sha512-nHYNbipdZpMwLQa2KNKSSZtBfxf80q+WKVnOtfY//vR3XoqaWdpK6nrcomoWMhrGCWLRXSrInvsOgHhWX+hOaw==","signatures":[{"sig":"MEUCIGfv8OQUUaewAI+zGL4lUJKP5pSVwYfq8GrZGy6Y//pKAiEA9CC2F10nWQ4/QXvHHMOimEc5IsC/udtjGu/gnP/hpO4=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":372756,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJexBmOCRA9TVsSAnZWagAARDcP/j/o2r1Uw31UNU4alObv\nnT6VYdUC4pSmwtkd+kBr1cuf8FUk8SdTNj5aZuxIi4JIKk9Z91h0I7KtZnT3\nqgdj/dTcnaiiG7kDl198kO7wj8RIiMHyuigICISA5JELVsRUJd+37suqkZ2H\njxNwme8qLCMcxFw6TSNDyZSaPbMC+WClsJWCFFXtIVkUaJE5B9sPstRIwNyO\nEvZCZ06Bm3bJocXbzFe7I7N7oqfWULWCrY/sy6dfFI19JRlLND+YeZld9n+W\nQ8L40gR308X5Ig1mHPv6ULBhm6dVZH0EMJ6x/EpY7H9Svzc8SdOVDAcyl69L\nrRPWx7VgtzAULDChJ+pOk3Dojx0dH+r29FymGTBzk2ZUumT2OK1qW9zlZtT8\njwYyqhO85prNVr15D7A2L8Z7i7vH9AVTBb/watvoSTnCLq2566JEdUccLX3L\n9QATnNl13DjS9xx6viFH2N93u3HLQc1dSklo0LtHkq59YY1/xEOdwgVRdVhx\nDw1eU2rmO2WGAm7TATnj532hCHXsNfPBT+K4CAtB+ruXNtfq5F/QRSzdTXCk\n8GjU6/4MShLm68v9dgSJIvIRqQkNeozSTsFNaPbOcs22Uwt5hCKXaIyuzAQO\nQ4kRG3Ozr1dbskllMBeIYOomHnCHHOd+koalTpe9fn1C2fLi5w7Dw7kGkukS\nSHQy\r\n=1ED6\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n#### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note**: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n> _NOTE_: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n\n **_NOTE_: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommended to\n always include it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color)` | Sets the container fill color to the given color for an enabled button.\n`disabled-container-fill-color($color)` | Sets the container fill color to the given color for a disabled button.\n`icon-color($color)` | Sets the icon color to the given color for an enabled button.\n`disabled-icon-color($color)` | Sets the icon color to the given color for a disabled button.\n`ink-color($color)` | Sets the ink color to the given color for an enabled button, and sets the icon color to the given color unless `icon-color` is also used.\n`disabled-ink-color($color)` | Sets the ink color to the given color for a disabled button, and sets the icon color to the given color unless `icon-color` is also used.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color)` | Sets the outline color to the given color for an enabled button.\n`disabled-outline-color($color)` | Sets the outline color to the given color for a disabled button.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web button component","directories":{},"_nodeVersion":"10.20.1","dependencies":{"@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/density":"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/button_7.0.0-canary.e3eacefcc.0_1589909901513_0.38315070496687675","host":"s3://npm-registry-packages"}},"7.0.0-canary.b065a4d2b.0":{"name":"@material/button","version":"7.0.0-canary.b065a4d2b.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"7c9e8675dbc26af73c4c4a8939fe60bbf901f481","tarball":"https://registry.npmjs.org/@material/button/-/button-7.0.0-canary.b065a4d2b.0.tgz","fileCount":26,"integrity":"sha512-tKZwyMfHFU0dQqvH6F26bld/PD+laHSELKbOmC2iso7MihMOuTJT+G02V8z33aBRTZ/ssjr3Q/+/Pgf0QYcwyg==","signatures":[{"sig":"MEYCIQCxEVxQF4MhfNJDmIq4sp30SgCTwnXdfA3KbfX5LKp4HgIhAK0/zirRa7y9Dsf1t5uav/26kdydP+0IC0Dg64Y8/bo0","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":372756,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJexUCHCRA9TVsSAnZWagAAHFAP/0WElDkqgEnC/ZOAUlMj\nrFA5VoSJxba2i7CzDJb4W6eKUZJ/rp2uQOq2ZSpDB3H+B65Cv/l83APnFeeu\n0m4puXHjMyHIKooAlnoYRdujD6xX5HvmMoJfptW18aT5VQ3G+VBqCPNUgvCS\nad5ByjfcuryrqvwgJJm70ka9ZiVsexw3wIt2J0BdM03pm7f8DwFc3kakCbag\nsdGGxn6teJXx6P2ahyy9KtAjtEW9mTQSZIIjc1xN8qSZ/t2AaWHbSav1uhGX\nhaxa74eiV5eZI6BT/ZT46Hj0byQ5YjBiCz6moKgb1SY54z36feNZaJGV7j/8\nuCotTjC6IdIp48TmCDqWbX5aABNr2YSLVHYH2cWiwj6cVnSozz9B9FxsvM2q\nudIOoSccQ3BAoySF5DNLD6mdj2DRe3MfwUCFNjhTGe+jx0X351ulSnFPSS1Q\nThK/1FMGNC1adfO/2OiUV4DdaU4FdAhgbVDQIomEitQZTm07r/91tQD6Nz/v\nfqkoW+Pz3VORm9X2GvXnIij3/fzastFxrHA0tbFirSwcZql2oTxfIAnFHND0\nyGy/4BzNWw8eE4VSUnMKnipNcXxiW+X2Nhf4QRoLNyKJUI1BgRiSoozpxwM6\nYPPi+/0nA/aOhbCwEZhaGWI885U9q0btPEUMBGhIPSpeZ+3jgng1+cbZBCEr\nSOEk\r\n=Hcyq\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n#### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note**: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n> _NOTE_: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n\n **_NOTE_: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommended to\n always include it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color)` | Sets the container fill color to the given color for an enabled button.\n`disabled-container-fill-color($color)` | Sets the container fill color to the given color for a disabled button.\n`icon-color($color)` | Sets the icon color to the given color for an enabled button.\n`disabled-icon-color($color)` | Sets the icon color to the given color for a disabled button.\n`ink-color($color)` | Sets the ink color to the given color for an enabled button, and sets the icon color to the given color unless `icon-color` is also used.\n`disabled-ink-color($color)` | Sets the ink color to the given color for a disabled button, and sets the icon color to the given color unless `icon-color` is also used.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color)` | Sets the outline color to the given color for an enabled button.\n`disabled-outline-color($color)` | Sets the outline color to the given color for a disabled button.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web button component","directories":{},"_nodeVersion":"10.20.1","dependencies":{"@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/density":"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/button_7.0.0-canary.b065a4d2b.0_1589985414551_0.6086531064184684","host":"s3://npm-registry-packages"}},"7.0.0-canary.4ebce8d78.0":{"name":"@material/button","version":"7.0.0-canary.4ebce8d78.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"c80f314c0cfddb461dabae6622be31f71d6df4eb","tarball":"https://registry.npmjs.org/@material/button/-/button-7.0.0-canary.4ebce8d78.0.tgz","fileCount":26,"integrity":"sha512-LNV0ncINu19vGaQZcxwv68e/mv7viig9djlHW72EhPgAO9k4C0GckcdOBynH0OM+0bj8NYqQBG64xeiQfco7Lg==","signatures":[{"sig":"MEUCIQC2YgzSSVzPCj0R13CXwriDAvsrPi6RcxppS0aA8TmPegIgeEuLgZn6kr0UZkk+jsaGU0IbuRSFphU0RHNvlMsmnic=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":372756,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJexZglCRA9TVsSAnZWagAACWoQAI7moubZlwC4gBUAnawd\n9lRCdVcPt4z3npGX/LAqsL/cFNJYTHzfdpKfA+iQP82CNmtfa6IVrOGO3fUj\nu1KZvT6QuuH3Eiy7zPoYkQ4uBBur+8LuZnaWycasrf3FclNHXWCluKWAYCfN\npdzamzPGFT1zh/0rzK7nPSiYxOa/8oS6w6srA00bmjlpBXjdqBFWKvd1wq+j\ndtnthUjvbBbNLTrmQyEImLWXz9+SmpVpPxflfqng0JQTtt54i1R8akoCXgki\noJ/8myXG+miCO9rZ5PfUjbLPrUQDgHBzbr9uF7KCxEU33hgiq0YnxjbKperP\na/HDVW5scGRCltjBqVGzMHnuHt26U5JYxxv3VlyvGogkDoZGk2j1NBywNYhZ\nLoINIHhHPOmMOCcbj30YiA7y+LU77RpQlvTyTYt4fmLdL3nQ0rAVhJMyK5br\nOineB3aFhsUxuj/uoLLH3HOYEyEWRd/yqwfRIq4yTLvi4O/im47O5lJDJup8\nBCQ2ZB7yrChjx3Y1nHK4+Dd2Cz/sjJWRFhnZ6mzNHRuc1Pl/1ST7IaMGV/7q\nFTsIUAmEXCKVt5yJZtztVe5L14Ao/EiwOoNvOcVMUyOxpzxXjz3vuCeY0OEF\n88+kwgixhYIu+5DZ6G/3SUYGkk7ol3oCLqWtNOHScXEGaYt4H9C3vwl6pLh4\nLYoU\r\n=SULZ\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n#### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note**: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n> _NOTE_: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n\n **_NOTE_: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommended to\n always include it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color)` | Sets the container fill color to the given color for an enabled button.\n`disabled-container-fill-color($color)` | Sets the container fill color to the given color for a disabled button.\n`icon-color($color)` | Sets the icon color to the given color for an enabled button.\n`disabled-icon-color($color)` | Sets the icon color to the given color for a disabled button.\n`ink-color($color)` | Sets the ink color to the given color for an enabled button, and sets the icon color to the given color unless `icon-color` is also used.\n`disabled-ink-color($color)` | Sets the ink color to the given color for a disabled button, and sets the icon color to the given color unless `icon-color` is also used.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color)` | Sets the outline color to the given color for an enabled button.\n`disabled-outline-color($color)` | Sets the outline color to the given color for a disabled button.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web button component","directories":{},"_nodeVersion":"10.20.1","dependencies":{"@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/density":"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/button_7.0.0-canary.4ebce8d78.0_1590007844758_0.81891498484483","host":"s3://npm-registry-packages"}},"7.0.0-canary.b0fdca492.0":{"name":"@material/button","version":"7.0.0-canary.b0fdca492.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"31c1ca17851cd54a90a164ee6d4e1180f8554632","tarball":"https://registry.npmjs.org/@material/button/-/button-7.0.0-canary.b0fdca492.0.tgz","fileCount":26,"integrity":"sha512-Ir5DRUCLkP6ae4fw0NEu4nqf0YmkBE79iNbwED7acY1ih0+H3zAiGk8pJgirEo3BxWfW2AnwXBEQAqpD+uS+QQ==","signatures":[{"sig":"MEUCIE0zVa0Iu3+zt8Ikqr2I73UIEN7n/DHRFHLvP95u0fKGAiEAnLbDNK6I7Qk+6uqX+nbCa9JikI6WqxCrxHV42pZtKMo=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":372756,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJexbcnCRA9TVsSAnZWagAAJ6AP/ReTsDkWaX8qywiEfuJC\nslJkdI2A6LZtPhCXVgYkKm72k9pl7OZIJiJ5dVW4SLVdUuVAULtu80yVfZXr\nKHyngHmp5okMIDu86//g1D5YZYn2EJCIkq0gsmFBSrYoJaaDuKnYnUXZ6p+N\nfHGAKtIyXOYnndwxGUU38HhVaWLKputOgqDoz8PWEGTVRJWt7xNWjQmh27en\nHA6hH1kEYKXPVqJHZQGAXAwpkDNY5rsIvp7fEMSdVYT6zuE08+nr8LIwjRrC\nXylIACgnzYDLPiLhJ1H7d2RwyXLcuQfRNjmed/8Fv2PpM1cYA1xAmBnoS9B5\nEeKoheF7hqL9ezDB1+y/c43q1fHRYuYLSLBr8uAr0ZwrQLYbTSSiJQL/oEV3\nDWyvrRNQEcImJ3pMMDnUg1KxYfDNtvxclfdddSjfnKlcrc6ssAmi0gsz6Br/\nhqSfI1zjC3+49Zgbz9niF85NJ3nhGzvaw56I+p6IdfbmVhxNQ7+ONFwuB/vy\nupchs/FKvCWRg5S4ZZ1/lyzOYpfjKx4UPDyVdVFqwlIgsdbmx434qTMMe85L\nKaqdA5xmtkrg4qkngBuZgMjUtOS95pQXuoZ1Sk/sozrCiUqEPobk2ztDkSnc\nq0z0AhLa61p0VHJqsdqmBiaz1ow8LgZVgz3roli+l40lrIJaMYXk+DWwVp+S\nBfCG\r\n=VnnD\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n#### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note**: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n> _NOTE_: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n\n **_NOTE_: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommended to\n always include it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color)` | Sets the container fill color to the given color for an enabled button.\n`disabled-container-fill-color($color)` | Sets the container fill color to the given color for a disabled button.\n`icon-color($color)` | Sets the icon color to the given color for an enabled button.\n`disabled-icon-color($color)` | Sets the icon color to the given color for a disabled button.\n`ink-color($color)` | Sets the ink color to the given color for an enabled button, and sets the icon color to the given color unless `icon-color` is also used.\n`disabled-ink-color($color)` | Sets the ink color to the given color for a disabled button, and sets the icon color to the given color unless `icon-color` is also used.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color)` | Sets the outline color to the given color for an enabled button.\n`disabled-outline-color($color)` | Sets the outline color to the given color for a disabled button.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web button component","directories":{},"_nodeVersion":"10.20.1","dependencies":{"@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/density":"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/button_7.0.0-canary.b0fdca492.0_1590015783482_0.7645537779254732","host":"s3://npm-registry-packages"}},"7.0.0-canary.c67667e8e.0":{"name":"@material/button","version":"7.0.0-canary.c67667e8e.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"70ae82340980bf243cc4ec0d5d86754d4197c89d","tarball":"https://registry.npmjs.org/@material/button/-/button-7.0.0-canary.c67667e8e.0.tgz","fileCount":26,"integrity":"sha512-XZuFUYfqOpHQ+4sItZfIa4xrJCg0qhr0jEuLYGLecAwpQnZahyKnqQz6AojhEXJPtkxLftdkKCU/pn/T+XZO/g==","signatures":[{"sig":"MEQCIF9IzEmg26l4pzpeKyJrsi4RzAxv3PZqkpm6Pnk+dChlAiB51BNUCHb8BOWkwBhXrwyKkbDLPAY0Jd18YXKNohHmJQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":372756,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJexoxvCRA9TVsSAnZWagAAAHoQAJW4bQC1210NX6aN0DV2\nJ/Td6iJoIP+sr8JbnX0RYEBYcEfIwJhBUz1vc5+TYu9dngq4xMokDm4U+bkn\nBN/JoUd6qWSlItv/vWFg8OoAZensFz5PdhvpKG0dzpU3fmpADOH72fpRIWPD\n9Fp1zyKeACtwNyWdLDIwdURIuKHey1o8YltEP/SQIdk21QPApR1bRQ3vDy50\nSHo9Kj7Ffqke8/gKKxrnqQs3PAnwZOrNGy4JLMjmSJXtYqliwwv/R9mcqB9U\ncxosfmVz8IX3I6CdF4Dm8cTnVWIjHjwC0LgKHxNvQDLq/SA3CFVrIcM1PRTq\nJweSO3mArryhwAnGUNG9GNGECebwmzVdL9JEYR4RUW1mFZIvdxCAkls4sZj2\ns5VauZRYaEgV5amP/LmlU8vwkhuK30ymgvJNtIf2Ce5/etLl+dHm0YTjsDhi\nZ6IRfZsUTwHjujzI/b/9CuHnabHEHgMc5IJhV/n5AmUbdtv60wwsU9o6Ol0I\nuywfWJyM9bs26g4KWU8BHBU8Jy4t6lulczBGSE7YlxIEbGRULi/YaTxlX6n6\nulEDbTM7ZKbdvC50tTthPldxZDhiQubOgmvxE67rTlhC4KLOmNUWLu2vXPYC\nazNEwKvjCFo7T5DmcIH6s99IEN5jt80iGN2e24Gvvs+hjjUc4buJqPuM+t1Z\nde07\r\n=VgL4\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n#### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note**: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n> _NOTE_: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n\n **_NOTE_: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommended to\n always include it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color)` | Sets the container fill color to the given color for an enabled button.\n`disabled-container-fill-color($color)` | Sets the container fill color to the given color for a disabled button.\n`icon-color($color)` | Sets the icon color to the given color for an enabled button.\n`disabled-icon-color($color)` | Sets the icon color to the given color for a disabled button.\n`ink-color($color)` | Sets the ink color to the given color for an enabled button, and sets the icon color to the given color unless `icon-color` is also used.\n`disabled-ink-color($color)` | Sets the ink color to the given color for a disabled button, and sets the icon color to the given color unless `icon-color` is also used.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color)` | Sets the outline color to the given color for an enabled button.\n`disabled-outline-color($color)` | Sets the outline color to the given color for a disabled button.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web button component","directories":{},"_nodeVersion":"10.20.1","dependencies":{"@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/density":"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/button_7.0.0-canary.c67667e8e.0_1590070382630_0.19399369686420131","host":"s3://npm-registry-packages"}},"7.0.0-canary.62b5f37db.0":{"name":"@material/button","version":"7.0.0-canary.62b5f37db.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"f00c61ef0bfba7da8c8f3b00bc2994766e532580","tarball":"https://registry.npmjs.org/@material/button/-/button-7.0.0-canary.62b5f37db.0.tgz","fileCount":26,"integrity":"sha512-+7A9DGfDqZTRwj3aeehMryuogwL2a0dSuBFsYo4Yc9ZWSL7DKNZ+sADa1QDXMcss3acCl36H0AdzbABSeREHOg==","signatures":[{"sig":"MEQCIE8GrC73O02XCwOMkGWHYYVkeEm65iu9cBN3H1aQXwYiAiA8u0VpVZf/REh6biSRBf0ZrCPW7hwQnpX2BtzxQhB/cg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":372756,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJexq81CRA9TVsSAnZWagAAzZEP/0u7AI5uFo6zLVUbac6p\nzaSUk6poNJRV9IoBMULSB9SbChDStQG8nL/EhgYXAtQudhAyEsbkbbMVuSjr\nmKr9gpLhK0YGWPnVRHddUFL+eTj1JuY4MjK+E7qruvBa2UzMvvnpZGQdW85l\nItBKn5dzc6/KsAiMG7GJmXzyC8aiFeFYqXGObCd8VJTsJsWGWrjzC1JY5qBe\nSwgINgnVdIyCDdYqjugClDCoRbfxA4/mnBxNMH0/otbaUP685dcJ/cBOwpGr\nX1boxa96NkNzmcJnvukSXho7sBkvZ/7TzTG7EWmEwtfSsrX9rFtsLSuO9qO7\nQjK/ChP2UvO6I/wHMnyDwD14ZuTXBhVn5YZx0gtlGqLyUsqlKOpMAxH7i/sN\nroI44VnEJOLWcg9rJ4rEcs6gbrYSHStl7DLWwGISwZx+Vr/9rRsOFcb5sYYD\nGoj7jVndk02IEKjSFAezZ1CWVyZSchGas6Ii2jh8i5J+i+yX2a6xKnkq59ax\nKE9/kmHlyAjNsrXAovhHfhlTYGLCX7QcqG00HIfAippP5p9tNLZKv6DREOvJ\nIjoyLYjyuwROk4kz2pQ/OCX+pn/Fdj6ecmLbDBT8lLbp/IaK9GRJDTbBFA2m\n6DMpGh0gc08SSt2LCuqxqlDbaWguBSL0nF04PS2ZLq+DI59WUWoxo7tCy7yo\nIuvT\r\n=4UZv\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n#### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note**: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n> _NOTE_: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n\n **_NOTE_: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommended to\n always include it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color)` | Sets the container fill color to the given color for an enabled button.\n`disabled-container-fill-color($color)` | Sets the container fill color to the given color for a disabled button.\n`icon-color($color)` | Sets the icon color to the given color for an enabled button.\n`disabled-icon-color($color)` | Sets the icon color to the given color for a disabled button.\n`ink-color($color)` | Sets the ink color to the given color for an enabled button, and sets the icon color to the given color unless `icon-color` is also used.\n`disabled-ink-color($color)` | Sets the ink color to the given color for a disabled button, and sets the icon color to the given color unless `icon-color` is also used.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color)` | Sets the outline color to the given color for an enabled button.\n`disabled-outline-color($color)` | Sets the outline color to the given color for a disabled button.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web button component","directories":{},"_nodeVersion":"10.20.1","dependencies":{"@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/density":"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/button_7.0.0-canary.62b5f37db.0_1590079285255_0.6839456732660938","host":"s3://npm-registry-packages"}},"7.0.0-canary.2e218dbf8.0":{"name":"@material/button","version":"7.0.0-canary.2e218dbf8.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"89db4a7827bc6e0fdcd9881ad858b260066d4b19","tarball":"https://registry.npmjs.org/@material/button/-/button-7.0.0-canary.2e218dbf8.0.tgz","fileCount":26,"integrity":"sha512-mJDhxU//VcK6JT96fmcaPqTfHSlLLZWo22BBZN1psckR42oagRXqnrLKMTVBorCHisivttOJXXNxmapwGVItow==","signatures":[{"sig":"MEUCIEIC9SXF3ri/9r/iGMJZiHSKQAfsXIjxAuCoLqFmKdTjAiEA5q76aKMkczpmUV7Q95g4eOE5TEHondRxwlzBKL8qw7Y=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":372756,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJexrQZCRA9TVsSAnZWagAAX5MQAJe6jSuP7//SnS2LxLoQ\n06qYYYQPtbKUZVriInAWSHbcicXDPH97in4Ru2pHKZoKkcE66yEyJO4pksoA\nCvQV456gJoTj+O4i0yDBwALpBCAHtOcXiPtF3W7mnIJ9L8tsAjSACnqxhJXF\n7AzjSTbSHteYmw9jwIqjLvCDLoyfEoicWIC+VWe9O1t0FUTNcEYz8u2cM0KM\nGPy1OYsd2MFnfJv11r8wzBwGID3NtDPVNBsoGt/0cLWstO9uIXvFHqxapU/z\n7QTkpz12W0iDwUYu9gRvvTvTqwa4NOQEJkwhvh8SSk6BUAKtQHUYWR1OLJkD\nXTJozQCzdCBsJLpJCBTbZtfx0f3v1z40WlwS7HzbKewbO3OVUXzotDzcavAQ\n/icxf8/pNq/GE/RCbTf26sWEPSP7z4V7JWxjwHHpSJ2ultExjryjh8REUctK\n/nLQn8xrLzzIM8+tCJACsRtbD73LFLxlRYi0kt4zhJ3CQYymo/MGxGeX9EBe\nQ/RSPVRWr8tQJ9W6rSaXp6gjuH4fyxXSCFNuUG3R355r8iZ82tHgSgzvDfxU\nX+Pa5eZNZCKiVQWKL8HO1fZ1TwS+v1//AoqSWJKP58ju0c09PIELREXeIq5b\nt73ZRPxubWYmM5JDsVRnoU7nhCdnmfZ3JC1ktIXDWGU8W3O2RebIzrDX+Gk/\nRg2g\r\n=583h\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n#### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note**: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n> _NOTE_: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n\n **_NOTE_: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommended to\n always include it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color)` | Sets the container fill color to the given color for an enabled button.\n`disabled-container-fill-color($color)` | Sets the container fill color to the given color for a disabled button.\n`icon-color($color)` | Sets the icon color to the given color for an enabled button.\n`disabled-icon-color($color)` | Sets the icon color to the given color for a disabled button.\n`ink-color($color)` | Sets the ink color to the given color for an enabled button, and sets the icon color to the given color unless `icon-color` is also used.\n`disabled-ink-color($color)` | Sets the ink color to the given color for a disabled button, and sets the icon color to the given color unless `icon-color` is also used.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color)` | Sets the outline color to the given color for an enabled button.\n`disabled-outline-color($color)` | Sets the outline color to the given color for a disabled button.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web button component","directories":{},"_nodeVersion":"10.20.1","dependencies":{"@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/density":"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/button_7.0.0-canary.2e218dbf8.0_1590080537076_0.8502443402773632","host":"s3://npm-registry-packages"}},"7.0.0-canary.7fd792bb9.0":{"name":"@material/button","version":"7.0.0-canary.7fd792bb9.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"6d770cd265899e7721654639016b7156ee64839a","tarball":"https://registry.npmjs.org/@material/button/-/button-7.0.0-canary.7fd792bb9.0.tgz","fileCount":26,"integrity":"sha512-/e/4aZ9A8Hm8T+WH9Tp9QWu+c8p6F9sizMKlxmnx5lOUkHJvnpGHRmEd22AAMRQFjQqdS0MgNfsgOnh+LWtJGg==","signatures":[{"sig":"MEUCIQDd6OKLiHA+8gGLNJ8X4kQrt6KImm6wGhfVgc5osqGqZgIgJ4R6rxCIPRgIkOSpyUAEmU4Q8IdwKEe9UQ9HQ/JNx1s=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":372756,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJexrcICRA9TVsSAnZWagAAMVYP/Aj6/MX3HtA88Qo239TS\n5+j8RNVRq3RRTpg2z3XTCuvZQM6Pbysx3zzLOUYh94/Iej4m4p1d0D6pJXTt\no5Ce/IXJ8+M8Hl52bMc4876aW91Jx89/iUe1UnD56H7iaPJtr9z18mnH4EN0\nuHEHBRlLakI7K2sZ6/eJoNUJT4tvRXFIl8Zi7njkPW4Nm6zRPZEBD4RG80ZU\nLXhYvRtM9Cb6rLUPXunmhdpYi4gLyUhW0kSeF7xTVI+zDFru6hkxqLiolirv\nFpdzCo90/uJNl+wj6vEDj1ABOlrFdma1XwzlIA1MkxvUf5gzSSANN1CIxIIU\ntkXVLtjAxeVfwXT1t7iz+eG6gcrdvZ15RHJYuo8nKWb92L0H0EZw1OFsC7A6\nRq+HV9JMxkqScHdrerdES2EeyzlHZgnuxBf+JGaKQ7mg8EXniX9epdDncriE\niSetbWsYK2vaIjzekP2yEKscJIHdA3J3NrsrSRDArTPAmwQZm6e6bQTLHjqU\n/n/71w/Afop2KCJf4HX8ot476S/qfQ0N9qRX6AkM1mXgjqiqsDQOMWwYop6N\n4ZKqP/Us/lwiPUm5rlM7FDSfh+nJfUZRDvzX1znn5PAsnX3l8r1rthMRV9qx\nFs9i1tZtJzoe1whyBSHYYp1hH4mqxnXuJHgnvr1EdOVfeRdq/03LgaK1tOFn\n7i65\r\n=03FD\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n#### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note**: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n> _NOTE_: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n\n **_NOTE_: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommended to\n always include it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color)` | Sets the container fill color to the given color for an enabled button.\n`disabled-container-fill-color($color)` | Sets the container fill color to the given color for a disabled button.\n`icon-color($color)` | Sets the icon color to the given color for an enabled button.\n`disabled-icon-color($color)` | Sets the icon color to the given color for a disabled button.\n`ink-color($color)` | Sets the ink color to the given color for an enabled button, and sets the icon color to the given color unless `icon-color` is also used.\n`disabled-ink-color($color)` | Sets the ink color to the given color for a disabled button, and sets the icon color to the given color unless `icon-color` is also used.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color)` | Sets the outline color to the given color for an enabled button.\n`disabled-outline-color($color)` | Sets the outline color to the given color for a disabled button.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web button component","directories":{},"_nodeVersion":"10.20.1","dependencies":{"@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/density":"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/button_7.0.0-canary.7fd792bb9.0_1590081287810_0.9679233874210882","host":"s3://npm-registry-packages"}},"7.0.0-canary.a66493cd8.0":{"name":"@material/button","version":"7.0.0-canary.a66493cd8.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"d49742de19a63901e637825a49fc00949507ed61","tarball":"https://registry.npmjs.org/@material/button/-/button-7.0.0-canary.a66493cd8.0.tgz","fileCount":26,"integrity":"sha512-XsDM/0cfdDyX3UHBqtJny39qcvU8ZQAyz0s/6IoyQegmApc/JiaocUneZw7wCbuqKrc4hYSXv1CoHFimMzCSnQ==","signatures":[{"sig":"MEQCIHsFiPQh2O1NH9BXk8GOgUpTNjaIuVwe0yEq7C7LIwj4AiAlgsv182abzQJur2mSzDLNhRDDMa9ehI5Sg9bAyIQv+Q==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":372756,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJexrfgCRA9TVsSAnZWagAAtqYP/0kHoqtw6NZEKRS53K8O\nb+BOUgLW+jyz4VYIRLmdCfw+uy+aQiZNYTJS2x8Wxp+7fkzd7QiRhEcUX4Fa\ns1LptA14hY7YRpKzcEiIgH1KHBg2ViQbaqh4sJr44UfmAlsRY2paMCKegOnC\nPPh5wvUXdSG6b6PtNuknbCnw/UtzPjmm8TAjLBsttobQ84d4uK0Mw9soxJx2\nyS3fGAFl2+ihl4lTe/IMa/frKXxWnqqI+O+akj4JWaJ2ehWW9XK+/o/J6OxH\nr2au1XIkx93Oh1ZthbFDUY1ga0kEV6yM1b9Vop4IC8A3jw5/b6f8Soz5vNZ4\n2RyF3xjjYzDeScl85s4BY+qYI12SwGRlYudp2Fjp733eY00drb8kM30Q3ApA\nJ88RSj+vxzk3LanotMWX7ebCE8X4QXnu6aCPqszdY54cV+H2hNn0BgQZgp+T\ntGDOTFAvHTkX5N/X4u8GfdbXH1ydxnMaB8fICjULzArFENFiF/dPz8KLXisy\nSEupgQ9FqWsE7sDK2XjAYFvjW4OcfHZkGmfyyUsunluujAAGd/e+NsMlpY0j\nkSg15OB6QADX1tvZN+fZxl2MC9Gnuctz9xNjYzQIPZEIezp1WoMqfs6iHkRd\n5ssyRorOnjUKfjRM8bbmBInIrDd7Z8gQBVm94M9EJdbiZGidKJ8qzGuhFjJC\nat+j\r\n=z+GW\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n#### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note**: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n> _NOTE_: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n\n **_NOTE_: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommended to\n always include it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color)` | Sets the container fill color to the given color for an enabled button.\n`disabled-container-fill-color($color)` | Sets the container fill color to the given color for a disabled button.\n`icon-color($color)` | Sets the icon color to the given color for an enabled button.\n`disabled-icon-color($color)` | Sets the icon color to the given color for a disabled button.\n`ink-color($color)` | Sets the ink color to the given color for an enabled button, and sets the icon color to the given color unless `icon-color` is also used.\n`disabled-ink-color($color)` | Sets the ink color to the given color for a disabled button, and sets the icon color to the given color unless `icon-color` is also used.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color)` | Sets the outline color to the given color for an enabled button.\n`disabled-outline-color($color)` | Sets the outline color to the given color for a disabled button.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web button component","directories":{},"_nodeVersion":"10.20.1","dependencies":{"@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/density":"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/button_7.0.0-canary.a66493cd8.0_1590081503883_0.1791841095817861","host":"s3://npm-registry-packages"}},"7.0.0-canary.da05f66e1.0":{"name":"@material/button","version":"7.0.0-canary.da05f66e1.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"d946a43ba66267c95ba3cb0061e5f8c84fef519b","tarball":"https://registry.npmjs.org/@material/button/-/button-7.0.0-canary.da05f66e1.0.tgz","fileCount":26,"integrity":"sha512-SHK8SFpMdv7KQtdE+6UYKE+Pw1W9vpcmUYuF3JAw+q/AhCanvqN2WwnJvzjNjQd/8xaauYZVHVikJj9F3EIvZQ==","signatures":[{"sig":"MEUCIQC/p1E4laqBAavmKM2yIFc+qJBCzvpM2xBtMdofHdJVZwIgMnjKo3lQUpUovbqs9b5ZnRsfH7Y4Vo89vVHQ8erWHZ0=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":372756,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJexrhKCRA9TVsSAnZWagAA+CcP/3WjlMrhwe1NXfNKODiw\nuJYLl7pMeVt6R93QM7y7mnj+PoTeonN+gOAFRDVi7bYHsFgH3Cqe3dxmp7yX\nENlfBZcOzXq8J+d6sbBKhsW4tSV+LGjWTILCe9lW521wX79tPkcYXuXopqKi\nHM3X1OKDXE9Gby1ZIW0+r5pPofwayfIfZXVY/C4LFhZiHPmyG9GXKBbTreAU\nw1wGtuHuk4ofU1Opb1jFmQlwGN2KWgYCGZGN/8ilJZNcZAbDiYc7Xq6lxCN5\ndRQ3COSI3bOkD884FIT2u2E+fUi/EZiNrAk982WvtqwWxM/EYVYmyuiRIRZu\nqBuNqzvwtWNFs6cPJzrUQzlu8Is+Ni1eG4/c3wBRrrcqi78qOcbzCRBG7xLU\nPMCfSknumovuUsn/6d12AHfeM1CO/D7hgj5LB4qHPDSQ2Ju4HGUhCdpokk55\nnK9HYwfUpVKKJE5rRFCYZpeI2fTkjiv7buWfFK4R1rXO1yObdxq+x+WkVSq0\n4kSggxqTl9xTjJie93M6wS+UCxFYraLqas+LK8y5PO2GPqH27K1fGBlLzLNN\nlJBHTQ0giUE3l86rjVMwU0ooljCqK2B37O70Zenv4lCUgZriGisahyvPVWm6\nCze6ZfknSmpbpFlwTuBQZAsRvviMpNwADvG+KHzjW+6w6+lkZvN0kw/7wxyO\nfmCL\r\n=o+yI\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n#### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note**: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n> _NOTE_: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n\n **_NOTE_: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommended to\n always include it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color)` | Sets the container fill color to the given color for an enabled button.\n`disabled-container-fill-color($color)` | Sets the container fill color to the given color for a disabled button.\n`icon-color($color)` | Sets the icon color to the given color for an enabled button.\n`disabled-icon-color($color)` | Sets the icon color to the given color for a disabled button.\n`ink-color($color)` | Sets the ink color to the given color for an enabled button, and sets the icon color to the given color unless `icon-color` is also used.\n`disabled-ink-color($color)` | Sets the ink color to the given color for a disabled button, and sets the icon color to the given color unless `icon-color` is also used.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color)` | Sets the outline color to the given color for an enabled button.\n`disabled-outline-color($color)` | Sets the outline color to the given color for a disabled button.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web button component","directories":{},"_nodeVersion":"10.20.1","dependencies":{"@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/density":"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/button_7.0.0-canary.da05f66e1.0_1590081609508_0.308195142122375","host":"s3://npm-registry-packages"}},"7.0.0-canary.740860e78.0":{"name":"@material/button","version":"7.0.0-canary.740860e78.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"00900d54d707729b7e2f6271791a801e8b052d38","tarball":"https://registry.npmjs.org/@material/button/-/button-7.0.0-canary.740860e78.0.tgz","fileCount":26,"integrity":"sha512-tHOuWasL3TU60FZFUa66L1U9hon3nNjKOXwP+rubO7cUwa0fnrVK3Ue861QlGYnawHFqPBbAAAdlML2NBqPj6Q==","signatures":[{"sig":"MEUCIErieG/Vx4XElPFwEWTNKfP86e2cqyRnn3vcMSCL3tzxAiEAmUGFvOJcpUx1sNQDfpMylpl4FkuU7FgPkBhiZ3cIlW4=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":372756,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJexrndCRA9TVsSAnZWagAAXpYP/16W8aHt949TEF+1xLKA\nhfJkaY4Z1Q8JxrCRfNUP5BQlXXySRG4B0X5yVc8g9pnZLDiNrwO931ZhpjO5\nzd7fTKZKPHyXbo/F1O2lantanQCPL/ZXRshBxpvh597//Alao6Z+M1KpnAji\nMC5qovf/4Ev/XrV6kEU8jQmRHggwyuCkkWH2vkj0xbkHy+7X/Dp5eh3d43gS\n9JWYtDIOZu8eyt9f/06e0YFFZJjGrlotI1m/R6tnFKqVKe9kb83e6eObl6sY\nN3nr3WNlPwa/+Yqd1xwJss8/ms/uAxkFfDNiYTFZJjO6DmphMbIZ7j9Scy3/\nVEK+QOogRqxE4lRGMCoytpUUuQFSA6wrT9i/9yrjvW447MIfCNoxUwERKTNB\nR5/aNo2YONmXBuJJxQc3wW+HeUctxJrG/3BKFrcotjw0pzMI6VAfe34a7d7f\nfwdVXfQJD3WQeAbRKIhg4bXE8AXCuz+9Ra/gONi7oTAkd/soDq655Ng5ksLY\njvPNzVFUjHcupQjYQBTnR1ZcxZEWpJPbZZ/fNgTjrFuLAboSWC8WJkUmVoHd\nj5MBI6d0HdPvrMBafV8Cb35F78MYmg20V89r+/FBemZIUerpkw8YvSR7afts\n75bKgvWzj+5uHG8NEijN/WKUYZp3CiVO0as1/fEyhXHwNoADs6KrsB4WCIpV\nRvmf\r\n=EidH\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n#### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note**: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n> _NOTE_: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n\n **_NOTE_: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommended to\n always include it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color)` | Sets the container fill color to the given color for an enabled button.\n`disabled-container-fill-color($color)` | Sets the container fill color to the given color for a disabled button.\n`icon-color($color)` | Sets the icon color to the given color for an enabled button.\n`disabled-icon-color($color)` | Sets the icon color to the given color for a disabled button.\n`ink-color($color)` | Sets the ink color to the given color for an enabled button, and sets the icon color to the given color unless `icon-color` is also used.\n`disabled-ink-color($color)` | Sets the ink color to the given color for a disabled button, and sets the icon color to the given color unless `icon-color` is also used.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color)` | Sets the outline color to the given color for an enabled button.\n`disabled-outline-color($color)` | Sets the outline color to the given color for a disabled button.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web button component","directories":{},"_nodeVersion":"10.20.1","dependencies":{"@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/density":"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/button_7.0.0-canary.740860e78.0_1590082012649_0.7449715776268848","host":"s3://npm-registry-packages"}},"7.0.0-canary.5cea2610f.0":{"name":"@material/button","version":"7.0.0-canary.5cea2610f.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"8963b243640bbdc4a436578710d18b6a13c59023","tarball":"https://registry.npmjs.org/@material/button/-/button-7.0.0-canary.5cea2610f.0.tgz","fileCount":26,"integrity":"sha512-FraqWbhrecPO5h54DEcDP08BJmWOcJNOnuPhGRDERNPuxsOk5TVaVlTm2sw17VVVi1417XWxKe3NRjaCo173Yw==","signatures":[{"sig":"MEYCIQDiT3wQyxeZfS90k9w8YRJ7L6Nyela9azRJDzeHTTLsXAIhAPhhsnb2/twOop7u8cMfuT2DADb9FUiNHQIwSG3dCF92","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":372756,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJexrpYCRA9TVsSAnZWagAANTwP/2E4f9dbuJfzm089Q2Yu\n1Bmogx05JO4VrYF0LvuA3XwDINPKlahc55Oh1gLb0EFs8Rbs/S2lw8VsIboS\nU9D4icnWJOoO5jhFnZ/eD2KnrU4avrBpHq2ALeDK0ZE3uZz26L3CZ4QkZX6s\nrJyHJsXVkOLpskjAox48ZsdHAVRZfAQ/nS5+7Omj3JupqxGRQCCp96NU8GJL\njiJwQRrO2MYfh6cdY/h+wHbwakPhgLkCPur/uiOiv7/FuQkOdm6RpG/ojFhP\n6d/SXC5tyA8HLvK+MCQgzPPIDwewT5n8c63gm3NSL7vYMSpUrGTiFwWoqQ98\nVdQIGqxZOxZ+SVQvzRN3vUqO70qXQJoKNyg7Dg0nvUnFSPh2yJzeMkYPVnmq\nM1Ncxse+E1ntHGZtudXRSh2oiyeVlbaQfeVAT20ya3NZyN+v0tw7zlLVaJWT\n9jzwFWzk0iAkLVkXfxJFtTA+cNqck9/9k3mILii9r2Af+Gt8cDOkTgXwFGvb\nSwU2slQZluAJzFQArnGA1JCUfHcVQa6AKte2jpo2ia3Wlo1YtSafbHo0k+b7\nl62lJjmkZn4ZZBJ0x07q/wmoT82KayL5Kd7jLIRE41bcyZeDsTWJAdco0f10\nz+CfDu9vkWb0yevhA+MLeDD9Cir5Shaaao1ksI5sYyXPe6zDlmoxagdRl91D\nFVvu\r\n=UIuJ\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n#### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note**: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n> _NOTE_: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n\n **_NOTE_: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommended to\n always include it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color)` | Sets the container fill color to the given color for an enabled button.\n`disabled-container-fill-color($color)` | Sets the container fill color to the given color for a disabled button.\n`icon-color($color)` | Sets the icon color to the given color for an enabled button.\n`disabled-icon-color($color)` | Sets the icon color to the given color for a disabled button.\n`ink-color($color)` | Sets the ink color to the given color for an enabled button, and sets the icon color to the given color unless `icon-color` is also used.\n`disabled-ink-color($color)` | Sets the ink color to the given color for a disabled button, and sets the icon color to the given color unless `icon-color` is also used.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color)` | Sets the outline color to the given color for an enabled button.\n`disabled-outline-color($color)` | Sets the outline color to the given color for a disabled button.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web button component","directories":{},"_nodeVersion":"10.20.1","dependencies":{"@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/density":"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/button_7.0.0-canary.5cea2610f.0_1590082135929_0.6420874132339309","host":"s3://npm-registry-packages"}},"7.0.0-canary.cf7747ef7.0":{"name":"@material/button","version":"7.0.0-canary.cf7747ef7.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"fe384efe1453880cc24ab47d10bb2d6f1f34fddb","tarball":"https://registry.npmjs.org/@material/button/-/button-7.0.0-canary.cf7747ef7.0.tgz","fileCount":26,"integrity":"sha512-cQIfKU0Kl5vzFCvDnmd7cCUTe3CTHTFnQjGyzIL0KHkVMrb0YKc+gHAsdzOBw9p1HxBupY2ZjMBpDMyrWaTpiQ==","signatures":[{"sig":"MEUCIQCGhqdr0q2srarYPFqYLjRWD4/ccYmD4dlqoWCbFBRSjQIgfJ3A4qch3vFKA3g+kCfe06sGJuRVaDCdXHLgmoV/hxY=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":372756,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJexrpuCRA9TVsSAnZWagAAOBwP/RbQicRIwq9pWBNeuAfB\nHRitZjREPSdxha/mObW9Pz8ublDtOxouj4XO7d2gPi01+qYhuwrXm21VZQ4C\nmbNrtJYn/++trizeqF4gcnBc2cUroWCcrH6XyYNS/fD4rQz2kFAvQp62IftN\nHHxry2bnk4siS3Bt4GX8VMiWdf0MGosgKp8Q7cF9K9HHF1KKRrOaRr9QGv9x\nSRZZ+jorPkjURjbUbI12Os2fuc82Ox7/eyjJnfOx+Eo9YfvEOCISs4HRbmON\ns4S2TdSK7sWWjy9KfhnilyNM5zb6kC6UqXJKcmQB9TPjb8MLJwsTJ/2uclDi\nqVq1ECdz1O52huJXmYn49j5XeCWfAvLER6tnFG9RUIBYwnv59uBcvsaYl3Kg\ndBZXBHlpl4XHxOO84LcXk9ig9y+sIMDMI0jEEyuOKgdvUi9kWizMkwTg25W+\nVLcf8MOO2/BWxEPtaL/QDmi3UvCvtmDnGIyFNi3VRBIcd6yOSzxSTRaqAhlJ\nhcCQGx11Ne8ml0R8iEYP4YNDvzJZT5aIbeNNZ5zFwBdVpFdAbbT/vNyM6Kag\nhVNUGQ9yM8AzJVBhvpTUQ7vfTLLeQEltTBCNqMxEuORfKVeO7s5PZBYH4snB\njxhk20jTVvC3pkwiIld1QPrnh7pd0GD+qhfsfTIti8VVFyav7UJ3zfSq0eiW\ng5F6\r\n=CwP4\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n#### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note**: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n> _NOTE_: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n\n **_NOTE_: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommended to\n always include it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color)` | Sets the container fill color to the given color for an enabled button.\n`disabled-container-fill-color($color)` | Sets the container fill color to the given color for a disabled button.\n`icon-color($color)` | Sets the icon color to the given color for an enabled button.\n`disabled-icon-color($color)` | Sets the icon color to the given color for a disabled button.\n`ink-color($color)` | Sets the ink color to the given color for an enabled button, and sets the icon color to the given color unless `icon-color` is also used.\n`disabled-ink-color($color)` | Sets the ink color to the given color for a disabled button, and sets the icon color to the given color unless `icon-color` is also used.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color)` | Sets the outline color to the given color for an enabled button.\n`disabled-outline-color($color)` | Sets the outline color to the given color for a disabled button.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web button component","directories":{},"_nodeVersion":"10.20.1","dependencies":{"@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/density":"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/button_7.0.0-canary.cf7747ef7.0_1590082158164_0.46862884447784126","host":"s3://npm-registry-packages"}},"7.0.0-canary.862d0d7bc.0":{"name":"@material/button","version":"7.0.0-canary.862d0d7bc.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"d197ec5676967df03cbf0b4622ac9cef7d8077bd","tarball":"https://registry.npmjs.org/@material/button/-/button-7.0.0-canary.862d0d7bc.0.tgz","fileCount":26,"integrity":"sha512-lpksxMIm5/7201AL4aFFdD4pykIQK6X5FQRzjeYdBgYj/R5riS2Ig6xqwRWtLmvrelIK6xZhgaO8Vnpj8OXxxQ==","signatures":[{"sig":"MEUCIQDmzk6wpi+qf4NgzYgc1rPrUz+sTKAy6B4cqE3NAtPNxgIgPrRvyXo50CI0vJn01hvV2gKkYvcv1XlYWb8gVVkgA/0=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":372756,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJexrsSCRA9TVsSAnZWagAATv8P/0vw9cVP4F8+j88gUPey\nZVbIqOZ9wZ6bT6U0uolEfJKiMsZvgF/MebTLC1fIfjC9M4pmBLcCxJH13DQg\nqDoeYY1zhQl1MSEryzqPo0q9BPKwHChD7DQXlPA1V3W8ifHoA1baOg02uyeZ\nMLjaWvGv4c+QP3mqbMdTFxJZYypM3a9V9N9YFDYJEufWnK5PpHT3J/0omsKS\niiuhEYXn2QTgAsScUchZZL/pvV+jZFssYl00iqlWsKQsk21ywf0Gc+YnLQ19\neUsE06XcSOQnMptEy1itCeeO/5f23g5Mf83ueavXc9l8UPHXq7BoImS2CUxD\nlY+3t8vnkc0RoDykO88dPtJwXOKZe6Rieh+W9loxAWO2G0r8ak8kTP4CxIrY\nrNasTur7eitSmO9uwL9FyGBENOiIFxUzFiJmzTSvkw5plwsmLQZINB9uXW5G\nYp8/bS4xtEOiONPNB32fFqf4VkbsRIpA1z2WWGf+XpOKlHWXuY2HpjPr6EjZ\n6BPEl7U3RBtyuDjmRex8MPb8Pg/UUNAdTv+JKr+RAL4G+GE0s6kQrrDnA65F\nvxZX8hpA7uKtHdKZ2H2ygy9LzWdSCyGLuHqsA9esUlRRGtnIzdch8XSRHqdS\nFJxZ6gNDeSpaykodQXEsDm+bS6eFIWTYFFgeBE4Rn8labx+l5KA8RgZa35MQ\nCWkF\r\n=XBYX\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n#### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note**: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n> _NOTE_: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n\n **_NOTE_: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommended to\n always include it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color)` | Sets the container fill color to the given color for an enabled button.\n`disabled-container-fill-color($color)` | Sets the container fill color to the given color for a disabled button.\n`icon-color($color)` | Sets the icon color to the given color for an enabled button.\n`disabled-icon-color($color)` | Sets the icon color to the given color for a disabled button.\n`ink-color($color)` | Sets the ink color to the given color for an enabled button, and sets the icon color to the given color unless `icon-color` is also used.\n`disabled-ink-color($color)` | Sets the ink color to the given color for a disabled button, and sets the icon color to the given color unless `icon-color` is also used.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color)` | Sets the outline color to the given color for an enabled button.\n`disabled-outline-color($color)` | Sets the outline color to the given color for a disabled button.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web button component","directories":{},"_nodeVersion":"10.20.1","dependencies":{"@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/density":"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/button_7.0.0-canary.862d0d7bc.0_1590082321964_0.4726627687577045","host":"s3://npm-registry-packages"}},"7.0.0-canary.0008c8a91.0":{"name":"@material/button","version":"7.0.0-canary.0008c8a91.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"705ad6e89e993d43b5b466ce18c88c937609f9ac","tarball":"https://registry.npmjs.org/@material/button/-/button-7.0.0-canary.0008c8a91.0.tgz","fileCount":26,"integrity":"sha512-a4VM/uB52hGxykwSblqZca2GnE0YdNhNzYYZHLrSZs0HlyNPSkCo/rYDPWV3HLuNDWO3Aog4M3Xj/oYi2BIuaA==","signatures":[{"sig":"MEUCIGpEv3n7/BMQy2sUFmwt7w0BmAIqZvWYcegJGh/2/acPAiEApaLqBsRNAvRZQzQhcyrW+xqBDXPnXNzJRmo4rEvUabY=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":372756,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJexteBCRA9TVsSAnZWagAA3jEP/25wbYFYzFT8eqIkIxdQ\nTXuuchp+KDmN0E3CJMiakZUNZthvg7DgABLwAGzRiAa2FYXAjqAbMHUuzMg4\n1rleVswrZTu0cUU1StmFddf/sWQk1mafxklwFL8gjpa2gTTwnFGu6m4MElze\nfj3FmcTpPQ7imifabvU5FtU6NRIkKCz1V0PZYGoyfqXDwd7C7Mv5dN5usY4R\nHMrgbzk7aOb3H1or31UrylwgmMgyKxvAm0pr/BizEOtKhROFudEwLq7tssbW\nAx4SrHhsBobcSpymuaVeiaXOvnNwWvss80QpN03lddtnp7fIV0IJe8+niOhr\nNIHikw7YqfV2/aYIswpctVyebfW4OepECMDHua/hKaXip+ZlFR1q+qweLIqW\n94WmA0e81O274rLOUf9cpBPuiFmw3gqVJp3GctI9t2cyXmPo7ywjIjPu3iVZ\n5aOD2DZA9bvYQIoesfUEX19Yc3XBQOFzIfQsbqawRr06MkuOahevSSn+ZGx8\nrjc/C11YOUznoGk0lTv8DpNsyNjg65Jl69P3ES+GjvIXo7mAJJVCeHECDnc2\nGD98XxSbcciD6gzEqBbKy9BiBjRPhpHbjKR9lMuir9DqX4GnS/SPFKR3DlGz\nHszN5DpdYVo2+7GUIJU809qnrUYwy8GngdKUD/skIgb/WOIaTJKTbx2J/PQj\nI7cR\r\n=bhvl\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n#### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note**: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n> _NOTE_: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n\n **_NOTE_: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommended to\n always include it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color)` | Sets the container fill color to the given color for an enabled button.\n`disabled-container-fill-color($color)` | Sets the container fill color to the given color for a disabled button.\n`icon-color($color)` | Sets the icon color to the given color for an enabled button.\n`disabled-icon-color($color)` | Sets the icon color to the given color for a disabled button.\n`ink-color($color)` | Sets the ink color to the given color for an enabled button, and sets the icon color to the given color unless `icon-color` is also used.\n`disabled-ink-color($color)` | Sets the ink color to the given color for a disabled button, and sets the icon color to the given color unless `icon-color` is also used.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color)` | Sets the outline color to the given color for an enabled button.\n`disabled-outline-color($color)` | Sets the outline color to the given color for a disabled button.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web button component","directories":{},"_nodeVersion":"10.20.1","dependencies":{"@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/density":"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/button_7.0.0-canary.0008c8a91.0_1590089600683_0.49794223845363317","host":"s3://npm-registry-packages"}},"7.0.0-canary.541638fa2.0":{"name":"@material/button","version":"7.0.0-canary.541638fa2.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"58141aa0223fb03053f7fc1473ddaeaa5dde0118","tarball":"https://registry.npmjs.org/@material/button/-/button-7.0.0-canary.541638fa2.0.tgz","fileCount":26,"integrity":"sha512-dZAgnd3Z6N/ELzqQ74WIlwoHLDGvrD4CoPGrCJdOlOyNZQEdlud+ejJR4vveU58jhB/CW54ulpy+LKella/D7A==","signatures":[{"sig":"MEYCIQDsNLJMgREzbICzs8B86DfupJQWgATUGBv8pUKVjQudmAIhAINNNAI/t8ZbqaQ2duBiep2ZxPWd7kC6qNhICzNB4791","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":372756,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJextsBCRA9TVsSAnZWagAAIdwP/2WoVvLZXDF2ecFmDBIy\nlFw1F7NcJLqmgP9bKIXkrjlKtPtc0LIvDbNyORQr88QnvTK54btOgu+obfLW\n3MLhgBVRFKt9Xopm0Z+F/dsDdaH1xA8C606FWUVv7/MT1BUVC9NWLM7ayZ2M\nR+Gerw4GGggQxTP5c7jWhmMDN/HqbntP2trFJuK6Qup+Xg4QJT/zj8sBYWoH\nRV4C1Scqw1EHuWNNIoMt6Juoh2n9zxXK9p/wtHU1bPohwfZu+h9VvM/BGQYa\nn4srrpurZ4ucU+yObAjGIvrTpFsQXfZ4AoBWoHgyUMdqhG6GsXh8fdBRjlSb\nE3Id51lcwOjcRoBFs6nMQfeCWtPfjsKh89kmsJ0prJJc9AM4dq7xcGBpCazl\n724jEKf+lVwm0oRNaKWNLT7R/iMHhRRm47zWyb5P7y741n2Xzunv5WzasVgR\nK3Aoiy6vmG9PX177XeDRCQwdzKrZ3LdYGgTIiiEn6EoukVVET441aKmwMyby\nFG0VsvrIB6CJhKEc/Cb+9ekvtuCVB+neoUfLU5GbGNotTdk3mYXoeXAJ+tJL\nU4+FfI+5kSTl95Vt1ZLGV1N9N2r2koQR4pHBS40s7xWTxAx4FufFGBuIgdas\nWe95QjbJ9xLdCys1Z+yH1GTKcJZOVRCcOaLyTSAjVP3OXqUz/syHF2c5acA8\nOEjK\r\n=CbB7\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n#### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note**: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n> _NOTE_: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n\n **_NOTE_: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommended to\n always include it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color)` | Sets the container fill color to the given color for an enabled button.\n`disabled-container-fill-color($color)` | Sets the container fill color to the given color for a disabled button.\n`icon-color($color)` | Sets the icon color to the given color for an enabled button.\n`disabled-icon-color($color)` | Sets the icon color to the given color for a disabled button.\n`ink-color($color)` | Sets the ink color to the given color for an enabled button, and sets the icon color to the given color unless `icon-color` is also used.\n`disabled-ink-color($color)` | Sets the ink color to the given color for a disabled button, and sets the icon color to the given color unless `icon-color` is also used.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color)` | Sets the outline color to the given color for an enabled button.\n`disabled-outline-color($color)` | Sets the outline color to the given color for a disabled button.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web button component","directories":{},"_nodeVersion":"10.20.1","dependencies":{"@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/density":"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/button_7.0.0-canary.541638fa2.0_1590090497173_0.027415352073354216","host":"s3://npm-registry-packages"}},"7.0.0-canary.6167cd075.0":{"name":"@material/button","version":"7.0.0-canary.6167cd075.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"ccece15ffbef968391bba5124c84f5b9c4fb28ac","tarball":"https://registry.npmjs.org/@material/button/-/button-7.0.0-canary.6167cd075.0.tgz","fileCount":26,"integrity":"sha512-QNaz9OdNYONYGY/Lds4Gj3Vtw7bTPXJrW2ZjkV3316PumjdkQrlhwU119SS3b5NdCcDC+MCotMhkINHiUYKBMQ==","signatures":[{"sig":"MEUCIBmrGfz4PQ3n1PCWY8LyQa9anBjCFUpWiA1zlezUuVVWAiEApcWyXu+09eiYq2J7axzyhYl7DghSB4rAdTvSm2Adz4c=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":372756,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJexuK9CRA9TVsSAnZWagAAed0P/3VSnRgGP0tPBsJ9yEMC\nNMrc8LWrBke/I+qTOkJ6Zohj2VL7pRQGOS6ISyHOBmHweJpCXfazxIqgFyP3\nN/OZN+O89sEgLB7ImFqoTvBgq/cqf302NTcXC3glaE1B8LY40NSrTJLD3rcH\nzQo0Kz0xP52fsmjxfbmCFi50xbmZgzX5jr5uzVePsmpjYvonTZNZyeefFRDM\nxEQePRbyP6CD4CZPdMTmfFKlapJacTxT7JOdK2WgqyE46P17hJnLrYl/Z5LT\nKRqOjhNMyPppfFl7/HfqEPCmeYZy+hWZc/jle6yqevD19gORP3LG88nh6sdq\nkkmXAw+jXauvkxlxoH/YfOsVHVeUiMz3D0CeWTJQ9JuaoSjUPXW8/azE+Btc\nCmcjzkhBlgR6JTJYiHmQ9hUv0+ywOMR9IFyYAEfQzKE9TN8vsVAKkxq49VpE\nIQjj3MDS4ItDBwB90Ub/1RsjQ+g8iJfxl+zjoGou7J5dhN5Mcf0QHiWWwCsH\nLAtvDTY7lCNwqpZlwVho16ibFp1jkSDrfF8gxJTetxjFESE/qQBRWRf0ASTs\nAu+yhEbi8reB36uEFORhk3RPaLo/rh/qnn6WdqS6bqYLm9Uczji6MFXKvA2w\npLEbg0PNhEueQ+eFsgiCD8elxbwgrETHceE+hnRkZ9+7wbb0aUcuuuH6tcf0\no8YZ\r\n=1RoI\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n#### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note**: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n> _NOTE_: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n\n **_NOTE_: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommended to\n always include it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color)` | Sets the container fill color to the given color for an enabled button.\n`disabled-container-fill-color($color)` | Sets the container fill color to the given color for a disabled button.\n`icon-color($color)` | Sets the icon color to the given color for an enabled button.\n`disabled-icon-color($color)` | Sets the icon color to the given color for a disabled button.\n`ink-color($color)` | Sets the ink color to the given color for an enabled button, and sets the icon color to the given color unless `icon-color` is also used.\n`disabled-ink-color($color)` | Sets the ink color to the given color for a disabled button, and sets the icon color to the given color unless `icon-color` is also used.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color)` | Sets the outline color to the given color for an enabled button.\n`disabled-outline-color($color)` | Sets the outline color to the given color for a disabled button.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web button component","directories":{},"_nodeVersion":"10.20.1","dependencies":{"@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/density":"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/button_7.0.0-canary.6167cd075.0_1590092476272_0.5987539230265322","host":"s3://npm-registry-packages"}},"7.0.0-canary.863ac1b0f.0":{"name":"@material/button","version":"7.0.0-canary.863ac1b0f.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"474ba40cbfb8f4bc0985aeb8651ef053514ce866","tarball":"https://registry.npmjs.org/@material/button/-/button-7.0.0-canary.863ac1b0f.0.tgz","fileCount":26,"integrity":"sha512-hIuZey/mDPB3trlop5J5Pdn/uetjSUAiBDk0SOOIZrNW1p+2QtZzps81lNCCgEx/wRh6EJDb5jw/MePNSjX2bg==","signatures":[{"sig":"MEUCIQD3pnuXW3NKWLCU8VbyhtQS7G3kT9aU9Ey5ps3p4MLzKQIgcNm14ZsaX1HbpHD+rU0g34UKiDgtkf7TyDwweJEazYY=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":372756,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJexuvPCRA9TVsSAnZWagAABAAP/2hJqm/iJJGon0tq/knx\nENezUKFuFD3VjtjOVQBAqmUIG3NZeqODkWC55ejUfN//FVwtSBnl5+mD6/5G\nxFz3LsZhGZ9Jyv29i2ps5T0GeaIAFnTYRhhbHLYCQda0l70D1PyRIJhSY/TE\nrNZTHZZHTfqG1mFRq8aJUl68z2HEpmxZ33oVOgBsZ8egMyUb/MAp9enY8h4C\nRRhFIcajScvHCsyfqMQBc6PyjSHmUVO2zsWkRZ9Yb4F3+sgHpWwAdJ+GSG8V\nFWDgOJ54txHvxsivbF2qrMkBOLKaSvx+M+IK3ItQt8k4pu1tCg/yWb1t0hSH\nNPyWaZu4NU1CNVJflIj7aZTBm/qMxIpwyCR8FJVpHukyYVQiOLw4ygTeymGP\nKwpggud1tsXgRDBJpGvFnVwiCMuVQJFw3D3KMkjp+nYYy8dAXmfWO3SbUnv0\n83zXCjadwdY+69k0PXxa+37Gb6PjQ2ueeXZFXh+EdsvQ70AViQQtPdbumFan\nSueDUzdWY5PvNw042lNToiEFNpn/cpQMOPbqcjNEtmqiyi+drfdhR55Y8aVo\nckF1xPonuU9fhmdKcLhswVGIYdWurCuyZ9UaC+V6BzXHPjxmlDGk+kDfkPa3\nGj1Ap4DIck9m1HJ6P5Xk6EWfsXCaXoyC6VhTCevIKCxj5VmY5b2/36TAHfZm\n9qY1\r\n=nnJP\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n#### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note**: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n> _NOTE_: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n\n **_NOTE_: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommended to\n always include it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color)` | Sets the container fill color to the given color for an enabled button.\n`disabled-container-fill-color($color)` | Sets the container fill color to the given color for a disabled button.\n`icon-color($color)` | Sets the icon color to the given color for an enabled button.\n`disabled-icon-color($color)` | Sets the icon color to the given color for a disabled button.\n`ink-color($color)` | Sets the ink color to the given color for an enabled button, and sets the icon color to the given color unless `icon-color` is also used.\n`disabled-ink-color($color)` | Sets the ink color to the given color for a disabled button, and sets the icon color to the given color unless `icon-color` is also used.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color)` | Sets the outline color to the given color for an enabled button.\n`disabled-outline-color($color)` | Sets the outline color to the given color for a disabled button.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web button component","directories":{},"_nodeVersion":"10.20.1","dependencies":{"@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/density":"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/button_7.0.0-canary.863ac1b0f.0_1590094798962_0.4901747880666705","host":"s3://npm-registry-packages"}},"7.0.0-canary.d30a214ac.0":{"name":"@material/button","version":"7.0.0-canary.d30a214ac.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"925f7533028febcb3bdbf531555be1301f326218","tarball":"https://registry.npmjs.org/@material/button/-/button-7.0.0-canary.d30a214ac.0.tgz","fileCount":26,"integrity":"sha512-4CfYSSHzPA+R1UqTTwCSFsrNrSq9fbjlcQZN+Ua/1e7XHcTKiaGvhqhDRLtt7nbUQv1Wutj4ipipT0FQQmhulw==","signatures":[{"sig":"MEUCIQDSYxa4O7aB0sNTUgxFu+RJ2COhjxX0oLOkyUa1AJQlwwIgJGA/tBBg++Ami3DTJmKIuZ2MQb2nmyKz+Cau2Wd7eW8=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":372756,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJexuzNCRA9TVsSAnZWagAABuoQAJtPTM/R9FHbAlbi8aIO\n2tuDNUKKHB/vqJgCq9BimnOAI3TmsnSOC0+Q5Hics1L3USOPWj/9qCBqDo6W\n2BkZpUyMIEEYp+IV2DXBFsBwqgs8TA65bfkM6eSnSvy/0Wu4xWnYRvKF4Cwr\n0/1+gtthkKZSeFA8QiHAVDYUsYOiFSnRqMo5pf7VS61JdACvRPAIJX0J0m3O\n7nfljNBhJdOGSUMegJTh1kszBsS+JOVLdkhxUuB6pbGokMd+qCzDAAgSmcsx\n4LjL9MUejxBOxeTYRrT/kIwfaddH1xZiUKyppyyZvHjjWPh4IUBzmQS8qOJl\n4HbupZKN60g87V+J+l9ROMOAseqWcv+P9sqU8OTF3xAQh9KOlz1+W7+gHvPC\nn+ldnSBqi4QRIjr86D78m4VhALZ8IaEul7qXv2X4scU6tn0PWVxm2LgmeWQB\noxhj0gYNkZKJO/YyxpQ/d8LE+Hzf04l1pb6lPO+X76mtF9qRO7oJb/tfrLMJ\ntMueYyVbpcMAw2UBhvFws2+oSBPEbV7H4n6MtwKu8stdHuMg8pv7pVsNfeHl\n1J2DWGrJiFxgl8JH27ZIGl5clCnvWfA00diWPhYZD7dhHwMFtVC5Pfyuw11A\nJRM2vFh5tViOdsP9ucdWuXkgyVseHcDFshFTfCdOPVfJnxLUNGBY90jlG4X3\nDDHo\r\n=8VXY\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n#### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note**: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n> _NOTE_: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n\n **_NOTE_: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommended to\n always include it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color)` | Sets the container fill color to the given color for an enabled button.\n`disabled-container-fill-color($color)` | Sets the container fill color to the given color for a disabled button.\n`icon-color($color)` | Sets the icon color to the given color for an enabled button.\n`disabled-icon-color($color)` | Sets the icon color to the given color for a disabled button.\n`ink-color($color)` | Sets the ink color to the given color for an enabled button, and sets the icon color to the given color unless `icon-color` is also used.\n`disabled-ink-color($color)` | Sets the ink color to the given color for a disabled button, and sets the icon color to the given color unless `icon-color` is also used.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color)` | Sets the outline color to the given color for an enabled button.\n`disabled-outline-color($color)` | Sets the outline color to the given color for a disabled button.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web button component","directories":{},"_nodeVersion":"10.20.1","dependencies":{"@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/density":"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/button_7.0.0-canary.d30a214ac.0_1590095052728_0.8497649504530482","host":"s3://npm-registry-packages"}},"7.0.0-canary.62abbc8d7.0":{"name":"@material/button","version":"7.0.0-canary.62abbc8d7.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"ab55fef6315461c55aed3e4ec8efb5253a08592b","tarball":"https://registry.npmjs.org/@material/button/-/button-7.0.0-canary.62abbc8d7.0.tgz","fileCount":26,"integrity":"sha512-Pk1abl4bdAmQSRCoU4oqKMBIGeRgDaCdd0HwW8FyqtjCe7ys9TOqv+8TeidGGJVdK5r3xc1MyHamDHA9jCqUFg==","signatures":[{"sig":"MEUCIQCq4JCa+9prckf+lbWEqoufPpxZ5q66WZgntNLnU/g3NAIgcAeEbeeAzpww1LmRR0Rrbg81xZMkpBDp+sVhPPkJuzc=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":372756,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJexvKSCRA9TVsSAnZWagAA4BwQAKB6ry1jWqwG19xiqFsL\nJ6/YnLRhLnvWw/x5SeG85THsPH96KEcbp+cqw1xuSNBEQcidRPltw7GZX5bU\n15R7yXjTdM3d32SC96DMGe52x+jqN/LfuYGveWDChN1+U746dRYU9xo/0M20\nChBUh8jIcoo66sLRVyJ7rXcvQTmvv56GZilxiC+j56ACFTx6xynPhHtXSQlq\nlv+vWWcjAqaOcVbP0HUO5aZXUXieA9Gi/cLoZZ8miHHNbJTNWx9H5d54Hi/G\nowijqN1Q81W/uBpzJEpVZL/F2rP4fZ2g0yL4G1B6pteXab0/Wh7ZMx7zWL57\nxHpa5xwtluTRvK09AIxLhK6VCDcV+Inv+iJVyj8JQT9W+67RLN2YvjPWq9wp\nE5Yv/rgn3WL8piCBCGc/7hzF01ksZeECqeTxCgadPUL0BwhiqVQjXETXjq6j\nOEF9EPSBD+DxIxxcmBh06Pa3YVd6ibrfCx9nEdFgWorK9P+MsnXBHbgJw7Jf\n6EBka9HByjbWVs0A1sCqJm5+ayLxvst2N2Q/DE57VpCTponKDn2y0QcBSDwg\nLbB10u8stTtq8b1fpKyhyS4xqbXAFeLexXuwTlmQatiso/kMYW1/6zNH/e3r\nDMVP13EJKYJ0+8+HrsacOuFgrmcYWo8m0ce2y7GcFFZgM5nucqNz93VHP+d3\nnb8l\r\n=z4WR\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n#### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note**: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n> _NOTE_: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n\n **_NOTE_: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommended to\n always include it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color)` | Sets the container fill color to the given color for an enabled button.\n`disabled-container-fill-color($color)` | Sets the container fill color to the given color for a disabled button.\n`icon-color($color)` | Sets the icon color to the given color for an enabled button.\n`disabled-icon-color($color)` | Sets the icon color to the given color for a disabled button.\n`ink-color($color)` | Sets the ink color to the given color for an enabled button, and sets the icon color to the given color unless `icon-color` is also used.\n`disabled-ink-color($color)` | Sets the ink color to the given color for a disabled button, and sets the icon color to the given color unless `icon-color` is also used.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color)` | Sets the outline color to the given color for an enabled button.\n`disabled-outline-color($color)` | Sets the outline color to the given color for a disabled button.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web button component","directories":{},"_nodeVersion":"10.20.1","dependencies":{"@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/density":"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/button_7.0.0-canary.62abbc8d7.0_1590096529554_0.04732474987752555","host":"s3://npm-registry-packages"}},"7.0.0-canary.49bf31d5c.0":{"name":"@material/button","version":"7.0.0-canary.49bf31d5c.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"98d03de0be5974424c4c626671538fba1ee9c226","tarball":"https://registry.npmjs.org/@material/button/-/button-7.0.0-canary.49bf31d5c.0.tgz","fileCount":26,"integrity":"sha512-ZS3Krv8u+PywLUBcShQGUW3tUT9cOavrWwR8x+BIPd3JWboy8rTNSACeW+aa6HZ9AuTICboix5WtCsgSGhdLYw==","signatures":[{"sig":"MEYCIQCb5yphbpDTEjDK4oOrC8IDyie/We1YCh0L0REvyrdoIgIhAKdyiPtJz133mFTprOY7khALiT3O87SUM1IyOdW7s39n","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":372756,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJexvNfCRA9TVsSAnZWagAAz2gQAInAhGNYHpgka5tzeREu\nzXE8OBbjXTi0Q/RszzLPTbU/BP1xwzOCaSCYcEZXzt8fmCNew1DmmObmi+gD\n5pgRQgGYrhkRlD14aRoqNjnw3NGkgBJhygf9AX01Oqj7xOHJbxg0aaSU/s+v\nETpE/cknWZI1odtGizzxAr/ilwafOHGoatu9CL1MuPMTkvfaoCvxuQAXi+XX\nDIfpVdcsCSAW7yzb+um8Pv4Ot6x3bWWdfhLQhJ2jtwbZV56PKrlZ7EPASI/N\neqX1sm7+SAKrFX4Eafxya9otlZD7AiiFhLA47LP+ShiRXiHL7/JYJaZd8fZE\nLSf90qQtVNV6ME+JfF0oSoAmWN6eqbZ4dW6bl6TY1Cmxm6Ek/L+v1x+5Y5W4\nPvltJRhxCGO95v6EoFD6rBlDzNIqqw25pl6gydsgK7iicM4YnVfxZeo7Xu3s\nPzBif5oIquAYrPLPqo/ZoVi+sXL2xZpT8iSzh0GAViBgLQ4+5ZWjXRplO2eV\n3QnGdZHYy4X8q0kA0/PfwVhyvNsjhPuzSNv342M6QrLyjlUH7Lb4E0GwlqOX\nR7ltMAsKW7DUYLslX/RkfE0QpiBS+7DH3Wx2hOf5gydzvBS0bDkArx7ZLY7u\nD4uKV7bCoffOZ86tPeiusuk4N+Jl0fa+KltJDIlJUs2e1iJcj3J4vwn1WuT1\nXioT\r\n=cMz9\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n#### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note**: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n> _NOTE_: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n\n **_NOTE_: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommended to\n always include it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color)` | Sets the container fill color to the given color for an enabled button.\n`disabled-container-fill-color($color)` | Sets the container fill color to the given color for a disabled button.\n`icon-color($color)` | Sets the icon color to the given color for an enabled button.\n`disabled-icon-color($color)` | Sets the icon color to the given color for a disabled button.\n`ink-color($color)` | Sets the ink color to the given color for an enabled button, and sets the icon color to the given color unless `icon-color` is also used.\n`disabled-ink-color($color)` | Sets the ink color to the given color for a disabled button, and sets the icon color to the given color unless `icon-color` is also used.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color)` | Sets the outline color to the given color for an enabled button.\n`disabled-outline-color($color)` | Sets the outline color to the given color for a disabled button.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web button component","directories":{},"_nodeVersion":"10.20.1","dependencies":{"@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/density":"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/button_7.0.0-canary.49bf31d5c.0_1590096734947_0.03909521213387723","host":"s3://npm-registry-packages"}},"7.0.0-canary.8e17857d0.0":{"name":"@material/button","version":"7.0.0-canary.8e17857d0.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"7274be50ee6f157e349ac41396227f733a5c5fd3","tarball":"https://registry.npmjs.org/@material/button/-/button-7.0.0-canary.8e17857d0.0.tgz","fileCount":26,"integrity":"sha512-iTPLfXpbL0MTntn6PouJUih+x8ipWpkKoOKc/8JR0Z44Qil7BVZA5wdGKEDwWqVwWZSuMuVoMkq6DD/wYoUKmA==","signatures":[{"sig":"MEYCIQDzFHY/r6aJMMuAvAowS6xGvIFuqAmXbg34thKAfFKdGAIhAIn7v6wIHPMWphipMmZLSe/XWCM5/EYWT5zy1rmxggmi","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":372756,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJexvOUCRA9TVsSAnZWagAAEdEP/j+WTXwUpOjlz+S7Way9\n3TqWah9fK6wBEYKhIdvPsXe/HHgfBgfkWfib0Ge16N8p1qq/YnO8ZED8FD3F\nIhsA6J3IU6B7amWzHQ5prkPOD8V6odQWCK+oUiDeUgnk/Psrf3RE61GXTHMS\nyAwggccY/J8Okyov1FKdKbh3ZvRgy/txTSrEBVNDAVgtFTMYPqLu4nFLlims\n5QTQ6YucWtRgnqV/JkGx1YjBkVpBX9Itu2mHibONrkuyuRlmYEvSkEtCkIhh\n2KaYdoQoN3bViSCwr7rLbQjQcNgagS/85zu3DIrxPwJY6PHkMaBZ9dUW7+JN\nk8f2BOObAPNH0/aaQjzE6/PtiNxCEuqXOHQvBXih7hRSVeryKt5MW93YCQHW\nOJDvUedh2k1bS6+uTp30/Ibt7dtfVpWHtFiYZ6/A5kPXnJ5I+UQWWzG6UUQK\nzt5DiP8SkJJPzJagKTB/fbe1vIvXKBMcWrv6KCQ4FIAOqrBmO2fwr6Woi14A\nwFTJre1dxR/1rkBdSjJZNoHuOmlMdy4mOJpz+qawUcRFxM10Lqe2/tzbcN4W\nXUyfnEd9f4CKc5060YkxbuLfGeTDuW/08qYVn3a9qL796i+K1bpN7iVjxcgS\nraTXJT9aKQo8Wsw6rqN/CogDgZ8cSPSZfFHAVMHrfjX0crxzlUkkO5kR/FQl\naHeA\r\n=uToV\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n#### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note**: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n> _NOTE_: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n\n **_NOTE_: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommended to\n always include it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color)` | Sets the container fill color to the given color for an enabled button.\n`disabled-container-fill-color($color)` | Sets the container fill color to the given color for a disabled button.\n`icon-color($color)` | Sets the icon color to the given color for an enabled button.\n`disabled-icon-color($color)` | Sets the icon color to the given color for a disabled button.\n`ink-color($color)` | Sets the ink color to the given color for an enabled button, and sets the icon color to the given color unless `icon-color` is also used.\n`disabled-ink-color($color)` | Sets the ink color to the given color for a disabled button, and sets the icon color to the given color unless `icon-color` is also used.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color)` | Sets the outline color to the given color for an enabled button.\n`disabled-outline-color($color)` | Sets the outline color to the given color for a disabled button.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web button component","directories":{},"_nodeVersion":"10.20.1","dependencies":{"@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/density":"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/button_7.0.0-canary.8e17857d0.0_1590096788428_0.5328505866059217","host":"s3://npm-registry-packages"}},"7.0.0-canary.c113fc942.0":{"name":"@material/button","version":"7.0.0-canary.c113fc942.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"501cff6087314552901dc87b403839998e9a3559","tarball":"https://registry.npmjs.org/@material/button/-/button-7.0.0-canary.c113fc942.0.tgz","fileCount":26,"integrity":"sha512-NpeoVsYp5AUJ5TgVSRUol73ZMomDt67P5+BIu25xRhXsQZec+Uco9ooXJEESnjrHRiSuTyisv56wZMAYlGNEtg==","signatures":[{"sig":"MEUCIBd7VolgAIOCZamcvcMkJ0kBVcEIF+SD6dKbVkyKmZyiAiEAt/eh2Am4ypNKxNl4usyGCgithVxz3W8CpgOf2/ukI3M=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":372756,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJexwTKCRA9TVsSAnZWagAAIFEP/RA5KtRpwWxWjFsvVwyf\nsSPy+CSlsxVMK6GXXyEQ/3NATZ06LzakxWb2ZGkCmcImmQ9pGeUpqGjr3YGJ\nPBqy9vgQScYWTciW89p+mQ5hRmpCTU3IZGFnUw6WvG5dHCcp84LtkJ9L/5pY\ngDpGolGw+wJFyuFkmEaS2qvc0MIGm9W78mTQe6fvMjollYY4jucEo5OugkT6\ndH79V3JtioZC5J6H9PJyl/Qi/iE/vsyL0M44aLorfuWTvfJOaVcrTq/5Ch6S\nyH7kBb0X5r9p0CkkIacXEO5o1C/eXGkHfvbrAzJDR2YVDer0Y0r0vC44bP2z\neoCsNCNI3uukCCrzb3dk5nlcODCkGF8KYQukHmzK/URb6g7FuGg3M0fF5JH2\nUo2j5NiwR9GgV0/JYIgCoGu+BhHvvkM1Z3etUg2CClXTBw7kdvLI662S5pS2\nhnwFT8CCL6roP5Qs/O4ufSrbSG/4ns8gszLkXR0RqEe4o0HkruAzc8ZCU+a5\nLOSPxyT6YoaNBV2mm0QLkC+xt1Kcw+KjhIXXhhtmiupEGvke3/6Rcgn6+xEb\njbFre2zare/pgB7mS1/TQQJxNmkZ9eTfgvvx6lufw7VF9G4uzxVa4ILTIfZU\nEEskFnYJTDdZ1rb5M/rKfe9QLoiHfJeQuz4+N/qvBWUytBxcysqGRqMKiPbS\nWYjl\r\n=I0Xf\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n#### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note**: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n> _NOTE_: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n\n **_NOTE_: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommended to\n always include it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color)` | Sets the container fill color to the given color for an enabled button.\n`disabled-container-fill-color($color)` | Sets the container fill color to the given color for a disabled button.\n`icon-color($color)` | Sets the icon color to the given color for an enabled button.\n`disabled-icon-color($color)` | Sets the icon color to the given color for a disabled button.\n`ink-color($color)` | Sets the ink color to the given color for an enabled button, and sets the icon color to the given color unless `icon-color` is also used.\n`disabled-ink-color($color)` | Sets the ink color to the given color for a disabled button, and sets the icon color to the given color unless `icon-color` is also used.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color)` | Sets the outline color to the given color for an enabled button.\n`disabled-outline-color($color)` | Sets the outline color to the given color for a disabled button.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web button component","directories":{},"_nodeVersion":"10.20.1","dependencies":{"@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/density":"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/button_7.0.0-canary.c113fc942.0_1590101194209_0.0654875528473966","host":"s3://npm-registry-packages"}},"7.0.0-canary.912d9021d.0":{"name":"@material/button","version":"7.0.0-canary.912d9021d.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"449201962f01ceb2a0e20fcac88853041c837d78","tarball":"https://registry.npmjs.org/@material/button/-/button-7.0.0-canary.912d9021d.0.tgz","fileCount":26,"integrity":"sha512-3v3JsWvdrfqgKsDdKOlWCLym+YliI077xAL/sblyXqx3+N5Tr6ERklVaZKPtRgIwwfZ51D1+qSlxqWW74vWqLg==","signatures":[{"sig":"MEYCIQC/B/19HEGBXMHie6Eog5HaHTF92RbWLwaBZ67NdOHuJQIhAKp762HNK1tB52SQMvCX24mQIwipl+8izCcYr6mmk8Px","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":372756,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJezWPPCRA9TVsSAnZWagAAWGYP/3+6tvXX2LGZBAzSiy7W\nbqAI13KDFXT+dWtXJBYwUvhdHInyFDdxeJQJCo3gOGOTBWACfU49Q6bNcjKr\nP4g0vnq9hrOEfSx3Di5P7FAgcf4Qqbs8Dg25hCE24ZsRM+XwjT0nYrfxnotR\n26gCLAodBbamkBrb5XTejJx8NdtyAFhTt1g2/8+bS65e7NyWWtBHLY8145KA\nRP/sJjTXwRvJLwh8WnyKUon2Rt3+2qJUYjKfCwzbwIoumMPqtbGrjnA74j1+\ndWulCZ0F1e0wv7h50NaCMRXaKjckV7gCH4KbUaKa+sJr1U2oeVUA50hoo50V\nv0m8dZyD1vfcnXE+k+7O3XoHKtcRQ7FiDe48Q5G5f1uBJ2Wus1DhgoGNtshL\nT2dYZjh5QLhKWVgf/szzOASDRhjI2lN3gSmWbVFR5r5baCLCiMe5BUsT9FX0\nVu1U2dMELraUXsuLKKvCV/jyg12CXYYzWlt5I0XAz/qQdWc5HXFVyEVyO2Ql\n3+Jk69H87u9mNMb3ZVoPQWPRmDLSsNEnF4RTiryfyFFPLDg6QytzX4hnOwdS\ndY2OQELwCFyrk+vbVrvTBL/kTrtua74a1JM8xxoVm25Sps24+2bAxNrDllhr\npfJsJwoscPjVD//hXw99/5BUjuxB9nVsezhJ/3AKLdKaPxY5MwUaQj7pfRJd\nVNjs\r\n=aFyC\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n#### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note**: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n> _NOTE_: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n\n **_NOTE_: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommended to\n always include it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color)` | Sets the container fill color to the given color for an enabled button.\n`disabled-container-fill-color($color)` | Sets the container fill color to the given color for a disabled button.\n`icon-color($color)` | Sets the icon color to the given color for an enabled button.\n`disabled-icon-color($color)` | Sets the icon color to the given color for a disabled button.\n`ink-color($color)` | Sets the ink color to the given color for an enabled button, and sets the icon color to the given color unless `icon-color` is also used.\n`disabled-ink-color($color)` | Sets the ink color to the given color for a disabled button, and sets the icon color to the given color unless `icon-color` is also used.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color)` | Sets the outline color to the given color for an enabled button.\n`disabled-outline-color($color)` | Sets the outline color to the given color for a disabled button.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web button component","directories":{},"_nodeVersion":"10.20.1","dependencies":{"@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/density":"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/button_7.0.0-canary.912d9021d.0_1590518735452_0.2103491922587304","host":"s3://npm-registry-packages"}},"7.0.0-canary.68a2af131.0":{"name":"@material/button","version":"7.0.0-canary.68a2af131.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"f6015e90e8a0ba13590f6c10548a50b13e249811","tarball":"https://registry.npmjs.org/@material/button/-/button-7.0.0-canary.68a2af131.0.tgz","fileCount":26,"integrity":"sha512-2+JhWkRJs9y4Ke9252tej7GpxS0+4xETVyo+2Nti47yw3YSQT5EgEvqwkuH/157bQrxesk6SJnTAVJSC2cKkRA==","signatures":[{"sig":"MEYCIQDcCcsifVF7/lRLT9iXwySU0N2xnuofLnV9QlITAYeRTwIhALeSq0F+5k4TZkDf+wsgOM6EWrBkrPg3RWOuH4cuhb6K","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":372756,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJezWkBCRA9TVsSAnZWagAAuVgQAJdfp6S5E5sAAUVP3kaF\nlT2Qi9Do9k4iD1jMKFom9OnFa82O79OSflGvSAPxlVplqvqE1dJrx+0VjDq6\nMm4rsdrGElJ3Ypi+7U5ARU+V4TF+MJe4d2LEZMXS7PjbF1IhlR2BIjsw3znw\npckk2bhAgYh3Gg30RjcsmOztbChaxwueIsA+k3HidMyT2JCSsFjnXxNZg/sJ\njmb4d/ag32Bwbpb9TcYNZQX96nbReJfpH8MKrWPgtYTH8MBKOjHlhT0UmpPZ\nVuUeKtfOUCCpeRWH74FU5LRx+V/rhbmZwmu7DPVrq5EGWaywha8/I7tRG5Ys\nR54g6Qie4VaGlw+PnreWiask5PgqvhGyFRpOOCZ5kjMQpKze4s6D1VavtOa4\nc6TQSa4kV268sHBso5+blKW763g9D3PU7RRTABFzuW+3NjXJD/MOpTUAquS8\nyy7mJ5pWLKbrncMDM7pmfDVRxFXeKDMG9ABtoVKO/GHT4TBAMY5L2KI9/Ct6\nLyAQJOBJKHxH+kJkxVwuXGPUa8XpZAQJ7i6/GTaLhyCEh+tVENF4dvpQ2dZy\nSwDcqfjdxr1yahLf8Rt4BcIpS4+2+wzt4ijm8nkcEuBZTvEDBpoenJl1QMun\nVcZyfsQQ8LmgyUFEUKLNX9OkFyiDSJwpd54tHz+pKoEgUiDkP1I4COk3EFCI\nb63u\r\n=e70V\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n#### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note**: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n> _NOTE_: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n\n **_NOTE_: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommended to\n always include it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color)` | Sets the container fill color to the given color for an enabled button.\n`disabled-container-fill-color($color)` | Sets the container fill color to the given color for a disabled button.\n`icon-color($color)` | Sets the icon color to the given color for an enabled button.\n`disabled-icon-color($color)` | Sets the icon color to the given color for a disabled button.\n`ink-color($color)` | Sets the ink color to the given color for an enabled button, and sets the icon color to the given color unless `icon-color` is also used.\n`disabled-ink-color($color)` | Sets the ink color to the given color for a disabled button, and sets the icon color to the given color unless `icon-color` is also used.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color)` | Sets the outline color to the given color for an enabled button.\n`disabled-outline-color($color)` | Sets the outline color to the given color for a disabled button.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web button component","directories":{},"_nodeVersion":"10.20.1","dependencies":{"@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/density":"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/button_7.0.0-canary.68a2af131.0_1590520065021_0.8648601694672229","host":"s3://npm-registry-packages"}},"7.0.0-canary.01de07011.0":{"name":"@material/button","version":"7.0.0-canary.01de07011.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"2b912f7077e73472ab86ee31de605d28f5244cf2","tarball":"https://registry.npmjs.org/@material/button/-/button-7.0.0-canary.01de07011.0.tgz","fileCount":26,"integrity":"sha512-E/GOultHjDDIT/8xz1UtrvhvDPAO+r60b8Jqq6gDKBeG8Igh5qXgxXpGMikBUi3VS+uitjGAd1YlI164VpBXhQ==","signatures":[{"sig":"MEYCIQDY/9BOerKXyCrQt/iBj/RYg8acuOHjkgjoH3Cd2d/rlAIhAOJALvHUXLzAh27mySWqf4qe+tmyYdVWIjAnIqHRdZlA","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":372767,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJezXOPCRA9TVsSAnZWagAAA60QAIj61qrDippMMzxEPXbQ\nOhbujvQhjw6l5LXE1K5G8NslrrdqJK3H4zQCBP4oCmsOZUt+25nDU02yTO4T\nsdDP/fwBrfto9L+iyj4zsNm64PD+AI6jPCwzW3rT9pK1CzAFGX63FKosob41\nEP6CUjoUQ1583Lw/dah3g/qzyn9DdctQF4nn+1uYkO2C0go6/eJNMx8tQ8jX\n8ZYjRihr8Oy+6PkREAxeA1QwDwHoEHkgVRLOCqVTMkgsmaYP2QSd9m9EKXnt\nBzESos2QRdqLiqAqDofx34vMZOew3AzJrR+hzbrjTFDyss6QwtlV4iJZ/GTw\nqhLVDgbxSxm5kWk1pYO/UCCMEHjWNW4jPQuGHj/qL4mRp1zCouyDxhWduYil\nKbJjijPrcMHt0G2HG2g+P5jTkBS/rIrm6wsaIHTsocVDOTsjmLXQ3jbuGiSF\nR+un07ylkROyzsJfSBp4hGrICdkzYXEborjs+Pca7AcVcdi+1L6SVonLdtxo\n3hyYZ7xFt3BRGhPvW65dOeJweBr/CNuW+NzqsOB2xshML2M9fpFwNemvD3Rg\nKNpRLo6+Fbut4CT8zZh5WUbtzzz/FSk3RfwcQ9tP4vRL9m7i2WGuqjGerySi\nsdIlrdWFL/rDroOOMgT4nXqeVChST+3kIIzQqW0OVyZOAw7fa6YTwlK062Rv\nPesq\r\n=TNB3\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n#### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note**: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n> _NOTE_: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n\n **_NOTE_: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommended to\n always include it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color)` | Sets the container fill color to the given color for an enabled button.\n`disabled-container-fill-color($color)` | Sets the container fill color to the given color for a disabled button.\n`icon-color($color)` | Sets the icon color to the given color for an enabled button.\n`disabled-icon-color($color)` | Sets the icon color to the given color for a disabled button.\n`ink-color($color)` | Sets the ink color to the given color for an enabled button, and sets the icon color to the given color unless `icon-color` is also used.\n`disabled-ink-color($color)` | Sets the ink color to the given color for a disabled button, and sets the icon color to the given color unless `icon-color` is also used.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color)` | Sets the outline color to the given color for an enabled button.\n`disabled-outline-color($color)` | Sets the outline color to the given color for a disabled button.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web button component","directories":{},"_nodeVersion":"10.20.1","dependencies":{"@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/density":"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/button_7.0.0-canary.01de07011.0_1590522767118_0.5697705162303177","host":"s3://npm-registry-packages"}},"7.0.0-canary.51d4535fe.0":{"name":"@material/button","version":"7.0.0-canary.51d4535fe.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"ee34b4a08e99607ced9f238325c85c9091067b7c","tarball":"https://registry.npmjs.org/@material/button/-/button-7.0.0-canary.51d4535fe.0.tgz","fileCount":26,"integrity":"sha512-+o/LarFkfNEb97pdbIZLJVaMm/MgXVSNfI3zLKH5PGQ7S7mmRVr9COLonTG4kODw23tTpIjINZcaEvfStnNO0w==","signatures":[{"sig":"MEUCIAespEpX8OAGrngm5F7PcQGW859qO5P8doJLyItZn5DnAiEAxfWlm2HYVdhR3SfmK8M/x+LCKhbqLvE9H4o/NiHPCKk=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":372767,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJezYuXCRA9TVsSAnZWagAAy6sP/2r1NxsRti/RoyCkhO2a\n+iupbYqCUOcI+ItAtnWNIq2dto7eK7EFOD2VK1ZaqQ3yUUmpngOcpWPEElM3\ngkhkOdYibkT1R3LWFqD38crGKxN0UlFUa98tKB2L9pCmAR8qI9bM7e26wgzp\nPrQd2LPyZHVwA4SIbDn2lSSDODHIBMEX1XYofjhb4DzcN7l7vzeJsIrhyUzl\n7wjS2EurTutHaoVIqkc8m1fujkH2uAYqZbzDDiCf9mrBARvLXJFh03BXlf25\nkvcR9ovrNhZvZYK6jSKrS57dsym5q09k+oCB9qQEceGjW0chAKh9s0DCNd8g\nJ7HW8qrpVBM7hYFLV8HO+aE4wNKOvRNtiGdo3YXaFn7VPTXs8hWFQ4pwe51G\nHmXOrBkYAndXAMFTemBlmSgB4cMiOH1cAdDzmbznNvN8HFWSedpOVAv3QjVw\nmS9oWxIfca233SUDoexJ/mcrukZhCvjMTlSFVgICdaZzmW6gwgevPkmZEVJb\n5V1jOpihX1BeM+EC1+6w0HmsGOvNpFojEFOw+grlgp9nGiCkPpiVV+lhW6cH\niGiJAq+jU/aTaG3NrQyiJGPF7BQOdnHuGlfr5v1sUvXGck2xhpsndcUnf5nd\nwlZkUd/ZxfZtxS13PFtzX+25KkSU5rdZGvhS/o7HnIuwmKBh5TyUabYuGXpw\nMEyC\r\n=soha\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n#### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note**: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n> _NOTE_: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n\n **_NOTE_: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommended to\n always include it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color)` | Sets the container fill color to the given color for an enabled button.\n`disabled-container-fill-color($color)` | Sets the container fill color to the given color for a disabled button.\n`icon-color($color)` | Sets the icon color to the given color for an enabled button.\n`disabled-icon-color($color)` | Sets the icon color to the given color for a disabled button.\n`ink-color($color)` | Sets the ink color to the given color for an enabled button, and sets the icon color to the given color unless `icon-color` is also used.\n`disabled-ink-color($color)` | Sets the ink color to the given color for a disabled button, and sets the icon color to the given color unless `icon-color` is also used.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color)` | Sets the outline color to the given color for an enabled button.\n`disabled-outline-color($color)` | Sets the outline color to the given color for a disabled button.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web button component","directories":{},"_nodeVersion":"10.20.1","dependencies":{"@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/density":"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/button_7.0.0-canary.51d4535fe.0_1590528918802_0.02397367259348182","host":"s3://npm-registry-packages"}},"7.0.0-canary.b86d826b7.0":{"name":"@material/button","version":"7.0.0-canary.b86d826b7.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"9357897f10e27e813106c7366a0789045bbf55e7","tarball":"https://registry.npmjs.org/@material/button/-/button-7.0.0-canary.b86d826b7.0.tgz","fileCount":26,"integrity":"sha512-SYRHG70y473RtG1bt4Sd3zsh419bm4XNeZGxdWR91Q5lVmzFEmjJPxO/r0Cvy6KELA78ip8WrxoQXCDICk5MTg==","signatures":[{"sig":"MEUCIQDwftbnlB5Q4/eEEhZeuAtn7Dyc3BgER6RWl7gO+GaswAIgC/83H3D6JapTX26/55KbO7xqlxKn5koP91m4GfKnqx0=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":372767,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJezZSiCRA9TVsSAnZWagAAA48P/Akw9JyEBEMSPNFAN18x\n/j67YL6k7ObSK1oebI7fFKMN4Z991vMkde62FxI0W+7JPFwZ7DZFTYZHmTyR\n7enoqR1f8uhjYNPRMETxdW+DcX3j23F9J8cPCvWMx23yIeVols18YJ8XAQyq\nGxaAwVSi2ONybaMIEQ6ABhYivV6iBnt0Q6PU267dvprhA+lfmqQw8tQDeDeU\nScwqQVDjVLH4P35I8XOWNl4wJ+zwfejer6tRKvhUlM4fUlNmHSQpc2h/LPGF\nd3kXZA8M0nMwz5Kr3VEu0BoN1yRcUSLep3ZCo6Mp1KLQs7hwPyvfNujNYJv7\ndY3qEJfzuIjahSByS0JNkTEhLBfYS4XarOWjK9dqJGzsNwKvawnPAG63o7C7\nVEhlLNgXEQA+TyO7cfvj3KNBuOV3eHycB/LMFq/bqNp9oT2jTmEYMJPOvPCw\nkVW5W7CATVxn/tggNjpv8Jds7YipuhrhwjwmVXC/GqnWFdXT++cija7FKd4Z\nhLv59+JYU6kOC5cA25RGz/eMlivx2UFRUttwZ0N4CRMaa9xHVUxphLejr/hx\n+Jhd4DS5DGMWXcK47EnsiMrivhWITsXY3uCamPk+oHEExivd3N940D6ao33Y\nGBbd2h2crt1ZLFFp1coFSKHztyuw2jy9hIbdq3RJCes1f8RH4E+bZdJleJdH\nvqwe\r\n=OXyW\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n#### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note**: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n> _NOTE_: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n\n **_NOTE_: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommended to\n always include it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color)` | Sets the container fill color to the given color for an enabled button.\n`disabled-container-fill-color($color)` | Sets the container fill color to the given color for a disabled button.\n`icon-color($color)` | Sets the icon color to the given color for an enabled button.\n`disabled-icon-color($color)` | Sets the icon color to the given color for a disabled button.\n`ink-color($color)` | Sets the ink color to the given color for an enabled button, and sets the icon color to the given color unless `icon-color` is also used.\n`disabled-ink-color($color)` | Sets the ink color to the given color for a disabled button, and sets the icon color to the given color unless `icon-color` is also used.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color)` | Sets the outline color to the given color for an enabled button.\n`disabled-outline-color($color)` | Sets the outline color to the given color for a disabled button.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web button component","directories":{},"_nodeVersion":"10.20.1","dependencies":{"@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/density":"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/button_7.0.0-canary.b86d826b7.0_1590531234073_0.15453284682333956","host":"s3://npm-registry-packages"}},"7.0.0-canary.d91794c7e.0":{"name":"@material/button","version":"7.0.0-canary.d91794c7e.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"95c14cb323cb62785c1539db320090c720ea8529","tarball":"https://registry.npmjs.org/@material/button/-/button-7.0.0-canary.d91794c7e.0.tgz","fileCount":26,"integrity":"sha512-7RrwvqWIPLdUwQXiHaIB5pKtB9a+VVj/0TYBEQj2uvSuoFpTOZ87oIX8Mxbxe3bDv4why323OGju+Qukkolx4A==","signatures":[{"sig":"MEUCIF6zSbdh4P/W1bL6E6O2lMs1kpLj4BZ3HS2FfDdQhk6FAiEAs2IXm15dZBBpFmZPo6Kc0jnXm0NRAo7RadQFttnpgCw=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":372767,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJezaxaCRA9TVsSAnZWagAAXRgP/1qBMFLjajahEX9U3ohO\naYu6o0SjZn7iwdr/ETKdWhMqfNogM8dXuCF9D/n4CGVa+UhtNHX6s1+3y9im\n4v7kPucfOEHDPlXc5eIP6z7VGRZcMLfSA2n9fPYkonOoInGwHP/ss2drwW7t\n5YZ34Y1OMlltf/rdz9+LYopn88v1+5UDfxtqyP58U4JKdGetLRbiPwdZ2yEO\nCp2dQUvlT6RRQdWK+IfX27hS0iR+UAfntAbb0Wu1R+6cLMhF3s9geOWsyRHw\nu+kynkTuVHchCfdHnt9g/lq8tbenqjHeClmUB5kR/GaYDjbRjdbkcoIWFXuE\nj+k+4dMwgX08c8fPvKrPPICJQUPB03kBBrM8H+dESbjuebxpmu2rHqXDt5WG\nBgeazYuFV4ppaKpg7RBiT4wXb4U0doQfZpIJkwBo1OOov+Nh5yAh8Ksz9Ncx\nPHMrzFv9/g7xbBYIwLK6xsCWpBcIzrfH0HYT81MUTMK3dTKOcJWQSJMZ/70d\n1lXK7GzEcIWSlAbgMTfCjeBHORhbUjq51xtjV+kF3P7i0Q0RrrPiLJCI9sEs\nJSujQlfz1J7AYE0BmS2ySBROebMqxeltga5EI0bWmvJTyufW0nU1cOpcuiLy\nphWySicJ+zetnsEa0sRO2ZksqGvwwATiH8/pSdAO1xs+chCgy/PMhV6VdKc0\nS+g2\r\n=dqme\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n#### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note**: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n> _NOTE_: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n\n **_NOTE_: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommended to\n always include it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color)` | Sets the container fill color to the given color for an enabled button.\n`disabled-container-fill-color($color)` | Sets the container fill color to the given color for a disabled button.\n`icon-color($color)` | Sets the icon color to the given color for an enabled button.\n`disabled-icon-color($color)` | Sets the icon color to the given color for a disabled button.\n`ink-color($color)` | Sets the ink color to the given color for an enabled button, and sets the icon color to the given color unless `icon-color` is also used.\n`disabled-ink-color($color)` | Sets the ink color to the given color for a disabled button, and sets the icon color to the given color unless `icon-color` is also used.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color)` | Sets the outline color to the given color for an enabled button.\n`disabled-outline-color($color)` | Sets the outline color to the given color for a disabled button.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web button component","directories":{},"_nodeVersion":"10.20.1","dependencies":{"@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/density":"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/button_7.0.0-canary.d91794c7e.0_1590537306372_0.0002650730637199228","host":"s3://npm-registry-packages"}},"7.0.0-canary.8c6d7e076.0":{"name":"@material/button","version":"7.0.0-canary.8c6d7e076.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"e6aa3c29a6e7557db50446d2e49e9c5f547e61d8","tarball":"https://registry.npmjs.org/@material/button/-/button-7.0.0-canary.8c6d7e076.0.tgz","fileCount":26,"integrity":"sha512-h+nGtaOg4sGwcvuE9O10dUGM0MXi/DNv1t/wA/hRPpitkbSI4wNyMfibwilmOGVZnVsaCRVF6UDy7MvaXcfdCw==","signatures":[{"sig":"MEUCIQDG6WOKhtOIGtAhtJLJdzFmN0a+Xiu+NEZmw5o40FBLPgIgNc7/JnWqDUmqNJ0T59p8p/9MlodN4fU68RAemJedclM=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":372767,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJezriTCRA9TVsSAnZWagAAhcQP/0eW8oTgmZVIx0MVHuEG\nH6wXoi2L0LL8rz7j/RexElmY7tAHu/wHMnf2xQnjugJlNtmyBlUt66/Zuffl\nCz8tWwUXkvPylRdgB7zNQNYsA5tnoz2S46aBREh6qtDPUkYZWJKas1EGjGQR\nFwe9HC0h3vrUrqwzyWHybZr/9J4F+2bBoaVK8LFHo9BPBAQ10n7r/Qt3VqX1\nzFrycQSbXNLkRmpNjAtYXeh81jP8AVg4okJzpm5Y9nSvmvauJubaSNrMbZ1d\nGIMBT+C6FTPTRYc5V9IiNf3PV4tmaYXy0+CsPsIlgRqnBBYpy8UcuZuHTibH\nEtCijndASSD8ErKz3sOiCpKy1yrxCgfp2ce/D9YVxQDZWI8rMilbUucCarQi\n73zSe3pQbLyojnaCk7PvdWcGYyLKPneEMcm8HLcjf3HTQyhFfOBM3aE6jgpK\nGWJHiVYRZNLVOKKsJkeJf8lNYY4vFKfC3NnRQnt8T4BEefqSA7Q05FnxVgId\nF9SJLaTbaktcnroQHLqYi/Y+lobxOUxJYKV5wUDsMik6CZHu/6GaT/fDtprq\njzsRAs3b3QeI5nnVT3xKsdkFC3tTT14eqAlGoRWTnd32EAA0QVhqQeFhw6TH\nIBb2FKNjOfQOopE2bGhzAXFC+XcDWfm8Bj5zYgdXFwGXr0Y7cEIlCP47EtDh\n5Jaw\r\n=FCQs\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n#### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note**: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n> _NOTE_: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n\n **_NOTE_: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommended to\n always include it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color)` | Sets the container fill color to the given color for an enabled button.\n`disabled-container-fill-color($color)` | Sets the container fill color to the given color for a disabled button.\n`icon-color($color)` | Sets the icon color to the given color for an enabled button.\n`disabled-icon-color($color)` | Sets the icon color to the given color for a disabled button.\n`ink-color($color)` | Sets the ink color to the given color for an enabled button, and sets the icon color to the given color unless `icon-color` is also used.\n`disabled-ink-color($color)` | Sets the ink color to the given color for a disabled button, and sets the icon color to the given color unless `icon-color` is also used.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color)` | Sets the outline color to the given color for an enabled button.\n`disabled-outline-color($color)` | Sets the outline color to the given color for a disabled button.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web button component","directories":{},"_nodeVersion":"10.20.1","dependencies":{"@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/density":"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/button_7.0.0-canary.8c6d7e076.0_1590605970663_0.29223157281106205","host":"s3://npm-registry-packages"}},"7.0.0-canary.5b5f62f93.0":{"name":"@material/button","version":"7.0.0-canary.5b5f62f93.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"015cd6985374ddcccd2c04ea6db71b318e5a23fa","tarball":"https://registry.npmjs.org/@material/button/-/button-7.0.0-canary.5b5f62f93.0.tgz","fileCount":26,"integrity":"sha512-F7bZFxREbtJZw2KWufnsmsVJ/tS592UJmXV0gVaTHar96wjgo2yA4j+YNQVXg2DcFT5a4XwMdvxPHSqOjRNXew==","signatures":[{"sig":"MEUCIHXCaL1uMf/h7Q53fe61Q1wauFhdEo48msKtyxyY/nrjAiEApxzzRC29GNu3V3JJvLhJs2m3ZUrXbgOdjwZUv6Aohgc=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":372767,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJezryRCRA9TVsSAnZWagAAviYP/3QJ1t9OJTFkKylly9O2\n09QKK2K47QtV1iSh6tQA89uxF8AcL7fwTMNp6AXdGn48UpOUoHZHUYwNx+Z7\nYZ0k/dngq4n9WEQRN5ctXPegh09cY9/R0yqoeTSGARY/vXKkZcMcqyx9oWki\n5VN2kDECUWKs6MHeQmU1/sdAI+/nmRtijBj3wxepsLICWOx6r8aVZSAViu5q\nHMVMPTzDCWtLayBUugVYHkqrMCUzkbsO3zMfoU5CyB21l3gVDnUyyfVcTcMz\nGiG5QiB2RlWkD446WKznk9iUD+cKUWuc3fG/6uOonfabPk9xbXgaCR0/BkKq\nFm6v5zC8doPwL2fQ90yPKb0Y+gTRZHmi0J+nCKx5N3c0j/36hZH/gKOpDbIW\nNA6JIOgkTF6G+MlW67nNWj9LhprsPJEdl02tPioqCJseswi7CGfVX8y3nGsX\nF4FGnvHLCeEsg/os4OfViKZUg1vj5QdNvCEmcuBBWwh9z3FJPT65QZ5ow4sK\nipjIUV3cO77ppXiRNszfq2RMtpsq7sYV5KCtBw/8vgK706ZTs3dNerFdx5O4\nUszdC3YMSAbwV+OXCEs0O7bpoDKmoQh8YDf3LbgvB4v92j8IWC55YN7C1sP0\nKiHGYyserBKuLALlxbJRDIGY40bUAaUpZpOtMEFg5CBq12j1zSXGWgaMkKNs\nX54C\r\n=L9Ox\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n#### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note**: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n> _NOTE_: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n\n **_NOTE_: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommended to\n always include it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color)` | Sets the container fill color to the given color for an enabled button.\n`disabled-container-fill-color($color)` | Sets the container fill color to the given color for a disabled button.\n`icon-color($color)` | Sets the icon color to the given color for an enabled button.\n`disabled-icon-color($color)` | Sets the icon color to the given color for a disabled button.\n`ink-color($color)` | Sets the ink color to the given color for an enabled button, and sets the icon color to the given color unless `icon-color` is also used.\n`disabled-ink-color($color)` | Sets the ink color to the given color for a disabled button, and sets the icon color to the given color unless `icon-color` is also used.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color)` | Sets the outline color to the given color for an enabled button.\n`disabled-outline-color($color)` | Sets the outline color to the given color for a disabled button.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web button component","directories":{},"_nodeVersion":"10.20.1","dependencies":{"@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/density":"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/button_7.0.0-canary.5b5f62f93.0_1590606992340_0.794532262705862","host":"s3://npm-registry-packages"}},"7.0.0-canary.d9972abb1.0":{"name":"@material/button","version":"7.0.0-canary.d9972abb1.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"9ddd6e5bd5f5583adc01c96e6e1bdee9853df698","tarball":"https://registry.npmjs.org/@material/button/-/button-7.0.0-canary.d9972abb1.0.tgz","fileCount":26,"integrity":"sha512-+nh0I43uPGLXl3Jk8PgRa5EkUfOfZGhNrdV7Bw/zMw5yaFGE4skrWaTURAuP4Y7SfPI6Sc4k3du+bCI7Xr1ySg==","signatures":[{"sig":"MEUCIGoXULS8fln2UbE13XKt0tevGJtYswr9eX0o9oV3Z+JJAiEA3ZObrYY7onEsn//EyIRivb7Ce/K6ZkYEj0CPeAo4/zM=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":372767,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJezsutCRA9TVsSAnZWagAA9o0QAKNMYT6B/7FT51Iraxat\nnWevt6woqYgLbMZPkwa4R5Kt8SllgrwairGnOeTM7lAAv1M3P9tx+h2CnFUe\np/l0RyfaNklLS7/VzPIl6aNULGQW1UqZ3/gP5jObrK9NsHkKD9fEAEVZ3OG5\nvU/g3251ngQo9Xgod4ZEDhXuK6ET+kqrKG8nOZWPle/Cn8jltOhdY1+vVvtJ\no2tkE+/QG5SP9yOZlabirekAZ3g1Nptbkmguf405Q39jz+0NpWQ167+ZQMEn\n53GMH8xOYs2uRe1++2f1rotsS9hsltcN5hPfWjl24xdZJDzpWuYkfuoJbjkH\nUqJp4jwLKqVjpEJVCDrDe9fDd7wr4B8AtORBev+LisOxQG2YC5arkDI8SKko\nM5kGbRkllDB4mx8GVVfGZXTUd+JC9cKj0f3YH1uul66KV5+3CEVO8F2GxtdO\neqgQisPoOXkmPXmh7//6Vam5ra3lmUiA3+KH5PbNmTJmPXHjb8S1ov2daNal\nQO4AGNhbjcvSnM4zgMDP8/osUpO785h9KQhZ9pOGM5QFUMCu6fmdcvuiqfNS\nwsGHHKNSQ74NsCYJG2/r7mlG0oAkRKMBSt+7IPOytg/e4ITE9eYNMZ97cwuh\ncxhpza1P6Xv8S0/paoRtEIPa8978QazHLf3Xd55D0OtP8nK3GvTV/929shtF\nz9FX\r\n=mp9R\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n#### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note**: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n> _NOTE_: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n\n **_NOTE_: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommended to\n always include it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color)` | Sets the container fill color to the given color for an enabled button.\n`disabled-container-fill-color($color)` | Sets the container fill color to the given color for a disabled button.\n`icon-color($color)` | Sets the icon color to the given color for an enabled button.\n`disabled-icon-color($color)` | Sets the icon color to the given color for a disabled button.\n`ink-color($color)` | Sets the ink color to the given color for an enabled button, and sets the icon color to the given color unless `icon-color` is also used.\n`disabled-ink-color($color)` | Sets the ink color to the given color for a disabled button, and sets the icon color to the given color unless `icon-color` is also used.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color)` | Sets the outline color to the given color for an enabled button.\n`disabled-outline-color($color)` | Sets the outline color to the given color for a disabled button.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web button component","directories":{},"_nodeVersion":"10.20.1","dependencies":{"@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/density":"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/button_7.0.0-canary.d9972abb1.0_1590610860745_0.8085439222521746","host":"s3://npm-registry-packages"}},"7.0.0-canary.6556eda2b.0":{"name":"@material/button","version":"7.0.0-canary.6556eda2b.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"f794d0c36a0f9cf179cb0cfc21be25a6e938a38b","tarball":"https://registry.npmjs.org/@material/button/-/button-7.0.0-canary.6556eda2b.0.tgz","fileCount":26,"integrity":"sha512-cZZlxJKabjQ1foUCJOm9qz74h67lCvhSoDCuhd79a9bQ9Wl7O+8gc1JzL6nmud2uOHa/Vdwi2DJRSs3y/6tW2w==","signatures":[{"sig":"MEUCIQDLUWCpZY7zso6qQ6qGZMj/zXTDoghko/6RM9EfzA59ZgIgEN1reMxvkkNGmNBQMb47+xmgQ1klIWqwQzGiQhtQI6Q=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":372767,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJezs3TCRA9TVsSAnZWagAAH+kP/RYQjOjV9zvJ6nOyTkxK\nNVS1RHd8oLTEBIXf2exTIgmeR4uAzBhZRbdsHLzaJlOjECi1EIrdsnHIFDZx\nhntuwIqXTyGlXxFjhtM0nOzi/5NHkg/EV8Pm+ORpKDpj3F/cAkiLSLGNuwCJ\n0qEKeJACt2r8D0wOWvMt3LL64hdF9qaRCtr7ajSzJNNbcJ1Ylitb8clTkNER\nV2TWyWbm6r2i+44LyoNcGO9RgSdOU18bChEsRA6JxLAGxdNeww4DDYjx/ST4\n6yjSDjLtsJhQaUjriFA368V3DnjD+D6QBCK+awKHk8Ct032pcqxroF+rxuLu\nk3fLUwRQ4LE8k/nkuZ0cwQnLEQtAyhTCFglx5GyA3iuZrSpAC6il2z1yABPJ\nXC1FCrvI21p7C0sgl0hqBvvpV8XYqLBuye8oe4pW6plz7vYjA7Qz9GBz6699\n3W/CrOXbVV7+TNGnZ6/fZ99bOPmNuhxzYPO1c40etm6PyYJ4dJhNiSR6988S\nJ4jqB89aK6UrsfnbCTAPC8fipBmVkvRHB74kwcXKksmbmwRMgn/csBPhvXZc\nqmu6mB5YkbWUMwUvekUufbaK9cPWPE0JMO5UbxYVrLNihMC/JIwxltIyucd0\nPq/IjrHIIIQvrK4U3tCWRvi3CpzqLbgmH2+CD6qJXe6QPg7mG6OTjF17FzKC\nMfGW\r\n=BYp+\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n#### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note**: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n> _NOTE_: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n\n **_NOTE_: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommended to\n always include it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color)` | Sets the container fill color to the given color for an enabled button.\n`disabled-container-fill-color($color)` | Sets the container fill color to the given color for a disabled button.\n`icon-color($color)` | Sets the icon color to the given color for an enabled button.\n`disabled-icon-color($color)` | Sets the icon color to the given color for a disabled button.\n`ink-color($color)` | Sets the ink color to the given color for an enabled button, and sets the icon color to the given color unless `icon-color` is also used.\n`disabled-ink-color($color)` | Sets the ink color to the given color for a disabled button, and sets the icon color to the given color unless `icon-color` is also used.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color)` | Sets the outline color to the given color for an enabled button.\n`disabled-outline-color($color)` | Sets the outline color to the given color for a disabled button.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web button component","directories":{},"_nodeVersion":"10.20.1","dependencies":{"@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/density":"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/button_7.0.0-canary.6556eda2b.0_1590611411149_0.6073766911727441","host":"s3://npm-registry-packages"}},"7.0.0-canary.32aa23641.0":{"name":"@material/button","version":"7.0.0-canary.32aa23641.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"30a0ee8d18e6a94f3e1db1e919798cb3c59f2eb4","tarball":"https://registry.npmjs.org/@material/button/-/button-7.0.0-canary.32aa23641.0.tgz","fileCount":26,"integrity":"sha512-LmuCBst9obwUtgVFzF55+pg/45Z5sViCGYMhs6Z1X/HLAF3WBmqFUYRJYPy0/sM3SS66Q/a/9IoQgkC9OQgtrA==","signatures":[{"sig":"MEQCIDMTw9H8kaKTkzNQM9zhHE4mEWuE0288ruWNlob1vlxIAiB5gkomyDXphzYrohA4NipQlPi1AreKri3AZVaY/eYWfQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":372767,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJezt3TCRA9TVsSAnZWagAAenMP/iCItYo0GYIYxm3N1vqu\nzTowWDLpWsv2OQN1wMWnSi74xa+XZqTd9FMeYpYSw0k6LU1bHGzbpj21ukQJ\nUmODxPBBp1oJfYzTGaKmUpVI0vn6fMZkTIxwazTUzm1V15ICKslGGRKPSLng\n8MdkA4W1ON1rJqp06v7uq5frU22lCtgcNkiWVoqI2preqwGfI/qdBEP775Q6\nYl3XAvZr4cy/serleaKCEfSb8ZTNWd/Xhtk2sUaI5hnuWBPRy69TRTgTgEL0\nPXrfScRnMh0PeHz7/LbXkNuQp6dPLXGbizSLH+ryMPXSitcYnZL9rt6X0jEC\np2q2bSFhKcE1P+VTABPzGifAG3IjYl6lJdABEuVKqSIGMo+ItYXisdFACbNe\nO9WcHOt7yzVpmwkkbVApGChjHE9LKL76c5sxRs2Ze6WdKL0BhiWNgRVX+R6o\nNitTMyHd/l0B9az5YSMjM44HRC/3PsJb1XT7KfsHlZD0WCX/GJPIwcdet+ut\nbxHwLA9qu81r/9q7Yt8/iGgIZWiqEX/HRg2cpMKPDwlpw0DAc+FqwQCLeMi4\n42qnKP3iCe8VHxtBb/ovi+Du42Nvk+JtFdqlUMyE848XGEicB3+PehCJdoue\nBc7W1xRtJDHhEiAm1wQL45Smu/cT+9cPaKJHhBVE6SbL+SsQIVG1wgXoaQRI\nj670\r\n=FHHB\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n#### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note**: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n> _NOTE_: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n\n **_NOTE_: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommended to\n always include it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color)` | Sets the container fill color to the given color for an enabled button.\n`disabled-container-fill-color($color)` | Sets the container fill color to the given color for a disabled button.\n`icon-color($color)` | Sets the icon color to the given color for an enabled button.\n`disabled-icon-color($color)` | Sets the icon color to the given color for a disabled button.\n`ink-color($color)` | Sets the ink color to the given color for an enabled button, and sets the icon color to the given color unless `icon-color` is also used.\n`disabled-ink-color($color)` | Sets the ink color to the given color for a disabled button, and sets the icon color to the given color unless `icon-color` is also used.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color)` | Sets the outline color to the given color for an enabled button.\n`disabled-outline-color($color)` | Sets the outline color to the given color for a disabled button.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web button component","directories":{},"_nodeVersion":"10.20.1","dependencies":{"@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/density":"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/button_7.0.0-canary.32aa23641.0_1590615507496_0.5529181486506223","host":"s3://npm-registry-packages"}},"7.0.0-canary.654934dfa.0":{"name":"@material/button","version":"7.0.0-canary.654934dfa.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"f2cbca4bee3aae3223d44cc67461f7939eee1d3c","tarball":"https://registry.npmjs.org/@material/button/-/button-7.0.0-canary.654934dfa.0.tgz","fileCount":26,"integrity":"sha512-TzNuAKOrnjn9bSQLu9nDDsszBjXLfKMepsSRnScuKizKI67HBjOjAu0kFw20YaLKKzX9lUTpumyGtpgUjmRKuw==","signatures":[{"sig":"MEUCIQCVAj2//xQxXJovLV2UKosDBrd1K0lMFZ34mr8ptGihbQIgY9fMceZT64Mzx1NqQuae0Z81BCjX9dn02XhQVgei9iA=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":372767,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJezwewCRA9TVsSAnZWagAATjcP/2Wz7Gq93+IdlFlqnbJq\nfwpK97inbt5EqOxMRJU5Cdn7j9Lk+Vmdh4YyBoTH/94b6TqIhGRM6T0LgVCr\nTSLpSwwOCgnR3ILgTxm1TjUAJRpmJR+eyxrgT4AknqCzye6laJ1x+5attipV\nMX1HRXmReHC50A2B0qksA77AHtmIIc5o6XO5/gQDc7VQWY/JIJEjSt4Si0vj\ng+qK8vScfgOIdD9NXSo817YdLEnfMucbuU+xc0OtiEakOFrPHk7i9I6UEQS0\npMnDWlPHNc5nisOb4xN//8PTI8vslvLqZnoSvM79mq5RQt5t/w07gGW6Jytr\nneNoxqYqoTFPdy18/MIQifZfu2ov23OyysNUK7TQUHVN3noXcX/wfqcnAfRr\neVf+OLgzz7yosqsM0RUbvS7rRjPdrvvyNh4Vy80MFKmMIP9PJZcl8gUZWwS2\nyAf99fJ+jA+MfqBwvpwtVaB8bOSmEHJZpAj23c2bo8pDNkPmQ4rsvJ6GWfdW\ndc0hcxqsPjM0A9CCeExZBrt49LwqI1pOK5RCh+bm4s4hQrY0SK0vCH3OW/xf\npkiohJ6HMQUfh5NQjH+yg0pjw8hqqSD7UDzejDlQ0kIp5823HPk10hQ9R7e6\nIIW2WXhX7FdOYBqhzp+OsVck2WhdWAlDIA1e1Y0MvVisQdlxf+d+ka0nB5/W\nZfeG\r\n=8RpS\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n#### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note**: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n> _NOTE_: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n\n **_NOTE_: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommended to\n always include it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color)` | Sets the container fill color to the given color for an enabled button.\n`disabled-container-fill-color($color)` | Sets the container fill color to the given color for a disabled button.\n`icon-color($color)` | Sets the icon color to the given color for an enabled button.\n`disabled-icon-color($color)` | Sets the icon color to the given color for a disabled button.\n`ink-color($color)` | Sets the ink color to the given color for an enabled button, and sets the icon color to the given color unless `icon-color` is also used.\n`disabled-ink-color($color)` | Sets the ink color to the given color for a disabled button, and sets the icon color to the given color unless `icon-color` is also used.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color)` | Sets the outline color to the given color for an enabled button.\n`disabled-outline-color($color)` | Sets the outline color to the given color for a disabled button.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web button component","directories":{},"_nodeVersion":"10.20.1","dependencies":{"@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/density":"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/button_7.0.0-canary.654934dfa.0_1590626224380_0.47124856017867356","host":"s3://npm-registry-packages"}},"7.0.0-canary.41910b8b8.0":{"name":"@material/button","version":"7.0.0-canary.41910b8b8.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"93f19dc0c29388b7e2b40ac04342a15a3668b9ed","tarball":"https://registry.npmjs.org/@material/button/-/button-7.0.0-canary.41910b8b8.0.tgz","fileCount":26,"integrity":"sha512-1WrIP0eXitJw1imYdYfgci5w9/uJzY/0TU5X8G/C4Xf07ttRfgOfJzQoXIkfXU5bnSdlsOInWVzOElBic7wH8A==","signatures":[{"sig":"MEUCIGYAjpIRHQBinn4Nt/4QyWvduWMCLOPo4vz8I0HFTSCEAiEAlCULwT8UuE91avjbLXvdRghkKwF+EkGg3ehTpC/K6TI=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":372767,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJezwsSCRA9TVsSAnZWagAARcMP/2AyUL+lpq9+VAaGXkCS\n77+9yUnHb9KosnlLjv+T3rU+nMljaPk7svPyyCCZyRiWXxy7WpSIupAN4naE\nv/RX5bsWlovybsdvl0pIBR1cvtBtbmJfYaPwj1EfCQkarBbI18rSOVCImZyu\nkGIE2eH8pqMq7Zxa9l9E+fgKi95PGlomiSJngTa6Lim3mdE06JkSc4tF+QvV\nngvxnRUt+T7WsBN9HG3nkJ3n6e193U2MX3HRo3zoRft57MQNRnehVWizcmGu\n/hqZoTJuC+oyzfOsr2VXtzQNzJyaRysbgPQg9Ehv7pb4AljS9qc17sqBB2nJ\n8BdFGs2DykhYQig/BZJa1UGfrRd7rI19xzvyX4TK+MlaRiaDdq8ghbnfeSvV\n4fGK/RKHHOelTVJvIXbTfeDvpGNsEYh/aBMEROle+4xmXW925o2tWdzz0ZdO\ncWd8o3syMK3GJ3+1ItasU+nOOroMXL997ch2Cx0k49YZOl322NoZ+Q3ptp0C\nCgvaR2arhQNbrk4xaNitVFoNS8jNoFGtjt2C6GEXooVUaMcH4gobuD5gK4HT\nnCP2vXpJ2LL4P2IBZ2RcehXP6SGSCkTs3yyGSnZEUJRW88TUJnjQMsBSgCjn\nbON9Y6ZJRW991vUanPBJQOwqJBjwVX/kXXNmyCRL2byARTrl4/2JsApQHOHj\n6H+R\r\n=AO+2\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n#### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note**: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n> _NOTE_: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n\n **_NOTE_: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommended to\n always include it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color)` | Sets the container fill color to the given color for an enabled button.\n`disabled-container-fill-color($color)` | Sets the container fill color to the given color for a disabled button.\n`icon-color($color)` | Sets the icon color to the given color for an enabled button.\n`disabled-icon-color($color)` | Sets the icon color to the given color for a disabled button.\n`ink-color($color)` | Sets the ink color to the given color for an enabled button, and sets the icon color to the given color unless `icon-color` is also used.\n`disabled-ink-color($color)` | Sets the ink color to the given color for a disabled button, and sets the icon color to the given color unless `icon-color` is also used.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color)` | Sets the outline color to the given color for an enabled button.\n`disabled-outline-color($color)` | Sets the outline color to the given color for a disabled button.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web button component","directories":{},"_nodeVersion":"10.20.1","dependencies":{"@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/density":"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/button_7.0.0-canary.41910b8b8.0_1590627089693_0.8862520325278549","host":"s3://npm-registry-packages"}},"7.0.0-canary.d66d22bf9.0":{"name":"@material/button","version":"7.0.0-canary.d66d22bf9.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"edff0a6bcc0927f6e649872a9ae160a7f03b8996","tarball":"https://registry.npmjs.org/@material/button/-/button-7.0.0-canary.d66d22bf9.0.tgz","fileCount":26,"integrity":"sha512-ZZSBA9rCFWO34hhYeRZypylxez8k0wBIekGGATQStQpIHxOHYosAItCx4AdNMxRdPhpNR60YHK4MSveEx9h5yg==","signatures":[{"sig":"MEUCIGjHGOVRdJHXt1bMonFtFG5dddRJxSCKYn/wTcwzSp5lAiEA4w0Ywna60Br7gtjMIuSq0hkjB81UGAJNU302Qeg2Y3w=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":372767,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe0Bc2CRA9TVsSAnZWagAA0wAP+wdBccElZXrP+GHQQr1x\nT/H13jgzl8HAhy2wvnb8cGQJ4Mye7z+Q8U9VT0ZVi+LHPYUplEAqYODqTvb6\n5raf9WSWy8eVrv4eWSsLt6ow7lOxz15+n22ZegAgNPPT/q2AGQ4RygpEAcz2\nk0ofpuTNTQDkTvikNk+vtJ0xqy1ZQ17DkbR+3yT3H8VAO9urTc9/ScKre5Yp\nPK/dySU6cHTrwOdALyVLcBpSQg8nj/IWcv+0ALW12c/QCeiyJ8nZ7yERoNwd\nBjn2x31jjgiEq7TIQDU+djZHCxE7d7B56OQDMwLwzszfn0HBO6f3O4mHCVLt\n6JaIsZcgtuGFnH5sBGDTTO+TrsUj8dPH5zdJXX0zuM72+B/kP0ZOQHP5uf3e\niqoRLrB9RVQJ6TyX+mIW6UAEdYkROo6Q8fAL7EqOaqo2nwBZBpLeTzLg8qaI\n05DkWyzY4JffTDuHyzn8ykI7IA/dvaRUAuGu0Eh7CS03v5E7NVtSmuQ9LQer\n3BBqp0wJRk7gtrjNVztFZ2ktZk7fN+yZ2dWQRu18oz5xojinoUJ+lPUcgdbp\nHYrlBPTyviy1PI2W73FiRUF6W/uF1t/vH0qgmwYqYy4aaabXSHmQavP0wTU9\nFhbT0XpSPzYTD5/E4+qA3S9EPf2x2wjvPdIyydRzCkXboUZz9fLDaPZDAyoJ\nhfTZ\r\n=tNlp\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n#### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note**: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n> _NOTE_: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n\n **_NOTE_: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommended to\n always include it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color)` | Sets the container fill color to the given color for an enabled button.\n`disabled-container-fill-color($color)` | Sets the container fill color to the given color for a disabled button.\n`icon-color($color)` | Sets the icon color to the given color for an enabled button.\n`disabled-icon-color($color)` | Sets the icon color to the given color for a disabled button.\n`ink-color($color)` | Sets the ink color to the given color for an enabled button, and sets the icon color to the given color unless `icon-color` is also used.\n`disabled-ink-color($color)` | Sets the ink color to the given color for a disabled button, and sets the icon color to the given color unless `icon-color` is also used.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color)` | Sets the outline color to the given color for an enabled button.\n`disabled-outline-color($color)` | Sets the outline color to the given color for a disabled button.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web button component","directories":{},"_nodeVersion":"10.20.1","dependencies":{"@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/density":"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/button_7.0.0-canary.d66d22bf9.0_1590695734223_0.8678388022024044","host":"s3://npm-registry-packages"}},"7.0.0-canary.8904f3cbe.0":{"name":"@material/button","version":"7.0.0-canary.8904f3cbe.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"4ad8eb3e7c7194882334120fc505e74b1c858583","tarball":"https://registry.npmjs.org/@material/button/-/button-7.0.0-canary.8904f3cbe.0.tgz","fileCount":26,"integrity":"sha512-qr95Euoiz9xkWeJpErQSJdTpDyVV1rAODor+BEi/YPFrG8r/y4FCmkaLMFTv0kcGkX2HdbHxlCGnrGdp21a+mQ==","signatures":[{"sig":"MEUCIQDxo+oc7pOLFZOtT3Fxx7iB615b7/bm5sKhCIs0uR3Y5QIgQNBFItpXK+q3kk6W4cAySXs3lQ+rlBV8iXgF07559ZA=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":372767,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe0T1aCRA9TVsSAnZWagAAVIcP/1zRaqvioSRU5juHICUC\n6XBT6YxFrvnF6dUKHIWKNrs0GWr39Q6KS0UkxJjGMEfMfEcbYYBch0K6BHgR\npqXTXE//zVN13EiEezqN5Fi/UWYbpVDHakpd2aA+4WH50Lm5HfS/CIvEABbU\nqi7IayKRVh2xTzWas0gWeFrh0iBPHJZXN94iWX/mrJDyCfjiRxIz9wXNJgIv\nZ4ens0xHFlE8Cq0pvV8TZKzrd1KWTLogdDbF+wns8hEF7r3UM3tIVqvnrb3W\nPuLkHLVHYUc/vedP/PLlOmV8K6P/BM23AlUFgQwQ6goLmVK/trPbcNvhs7OD\nWOzMGKZ9cfnd71F3wgxHsTZNjHNo9wa8EBeUdkO6KUYp1YecAEkL7EGRQeTa\nuXD+a4oY5v00LuIhN6S4rMtJ+mZcz1q7IW1JTUBjIlcpzO3bPMA49CsID9XC\n6zrEgRFJ6f4jD7iFWQjS6OONjEEDc87L63DXaoHDyp2V1XANtznOlB7GqjZj\nxQFpZ8fXBlGMj/NkBcNIo7hc2ke+g79a8hCMEKyxvBtqwn7h6a97lMnaaZME\nqE8NtPbaiJerGQ9CvrHNUzkc1u4JszyfncadKgQl2wTET8D2rpv8n9kHq0Ec\navS6qBTcO9SAWISbSA8Jsm7l6vWVWvVljHfw6h5nbmmp+Ijv5gbp2v7Fqp1N\neCBI\r\n=x7wN\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n#### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note**: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n> _NOTE_: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n\n **_NOTE_: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommended to\n always include it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color)` | Sets the container fill color to the given color for an enabled button.\n`disabled-container-fill-color($color)` | Sets the container fill color to the given color for a disabled button.\n`icon-color($color)` | Sets the icon color to the given color for an enabled button.\n`disabled-icon-color($color)` | Sets the icon color to the given color for a disabled button.\n`ink-color($color)` | Sets the ink color to the given color for an enabled button, and sets the icon color to the given color unless `icon-color` is also used.\n`disabled-ink-color($color)` | Sets the ink color to the given color for a disabled button, and sets the icon color to the given color unless `icon-color` is also used.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color)` | Sets the outline color to the given color for an enabled button.\n`disabled-outline-color($color)` | Sets the outline color to the given color for a disabled button.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web button component","directories":{},"_nodeVersion":"10.20.1","dependencies":{"@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/density":"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/button_7.0.0-canary.8904f3cbe.0_1590771033622_0.10211726250898634","host":"s3://npm-registry-packages"}},"7.0.0-canary.51512a4ac.0":{"name":"@material/button","version":"7.0.0-canary.51512a4ac.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"83813cc1c19c34adb4a2ce95e5cdfcd27693bff2","tarball":"https://registry.npmjs.org/@material/button/-/button-7.0.0-canary.51512a4ac.0.tgz","fileCount":26,"integrity":"sha512-2K4ZtGl7bi/Nh5Dxtf2lcTWiamVrLbVQcsZLKqGHTq3mw0aXh5bAZhLXxSr40MdAFt+AKJI0R/4jYGFXbzT1Qw==","signatures":[{"sig":"MEUCIAuSjpripE6zRtqIYEKwvIMIzHpFTUOhYITU4kHSv5QJAiEA1YBkK8slvwvF6ZqEHh6bgNrkWqsZOzTKP3Lbu2vwPY8=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":390315,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe0V9KCRA9TVsSAnZWagAAYGkP/1fUizfzomwdP5hXAT12\nKX1kOlJXa7LbN9ogkTMHJyGCcWg8aBnQgvCFECtOmpMQ6vF8dk+ZKSd3IhsZ\ngZvkU/GEBmkqS2+tukKzXx45x/gqpT5fxaSkA7DE5x3PMer20D1rjT7jGwAf\nQy1p2VLQcskJjAt/64PlExBu2Kzb3FJ6rxE2dgX456pQPtbO8k150rGWRBAC\nBCJIkyiotuIIAuctdmX23KFp8mp4WRzb0BLkDSN47OjC6tTC8Tnwmt9uickV\n8xAM/V3zPNqC8ypZgVolkaY3mqpeE7tF21o6+UKqXj13kvprngr9gnGmuQx3\n9IhHkZEpsN8Vd7hm2OMD1zFNiMa/9qwbHQKXMeFghxJldUDVGDvXxfa7qj+h\nxLB04AVXsyrE7AakzMTmKhUITFdLcXLuInfcnGGMMuKEe7+iiOTyJpjuneg5\nHsYnh0vfNRSXd4dvElaEEMHkLO4nN5w9CEOJJHfIV7ryvlEHi/QbRDRcHY2n\nHp0sf4jQFtBeoxzgGpThdrE450eIsouOqxfNxjNyTmwyGu3QzUD042/C+USK\nWmUFjrSIpDeprHCIDzqWGCIhCP3ReoMkJr9+5pmQwIDdbI6SwSVd/TjPHfhk\nYUTiHC89dd8xqWl0kVweROc4E+X2EdsfjIdRu0z+UxDyTBiITrJ1bcPm0yxA\nXug8\r\n=jnYR\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n#### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note**: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n> _NOTE_: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n\n **_NOTE_: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommended to\n always include it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color)` | Sets the container fill color to the given color for an enabled button.\n`disabled-container-fill-color($color)` | Sets the container fill color to the given color for a disabled button.\n`icon-color($color)` | Sets the icon color to the given color for an enabled button.\n`disabled-icon-color($color)` | Sets the icon color to the given color for a disabled button.\n`ink-color($color)` | Sets the ink color to the given color for an enabled button, and sets the icon color to the given color unless `icon-color` is also used.\n`disabled-ink-color($color)` | Sets the ink color to the given color for a disabled button, and sets the icon color to the given color unless `icon-color` is also used.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color)` | Sets the outline color to the given color for an enabled button.\n`disabled-outline-color($color)` | Sets the outline color to the given color for a disabled button.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web button component","directories":{},"_nodeVersion":"10.20.1","dependencies":{"@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/density":"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/button_7.0.0-canary.51512a4ac.0_1590779721743_0.442397202596982","host":"s3://npm-registry-packages"}},"7.0.0-canary.0743288fb.0":{"name":"@material/button","version":"7.0.0-canary.0743288fb.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"128d6e0a010d844be3ac07fdc2fdd4518e7afd77","tarball":"https://registry.npmjs.org/@material/button/-/button-7.0.0-canary.0743288fb.0.tgz","fileCount":26,"integrity":"sha512-RIp7Rk3uv+9UCmGzL+z26RR7uHEyKqHHMI9kn0fVcSCymesu/aijh8G67SL78yZtaktgzyrR7h8q0Hz9GAl9Jg==","signatures":[{"sig":"MEUCIB9F89xIohUQRn8ZW14AdnOjplGeYwVAU5lwDPcq69p+AiEAy6BzUGBXLkYjW+4fixxAsuVxry6h9q+CxcM3nhbO2NU=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":386420,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe0Wr7CRA9TVsSAnZWagAADCMP/iGAxcO9uw2774r2+bZK\nAVJdZ9rvFQsJj8jYXY8JYaD6vBpYcdaKWaeiBXQiM5RGofejzFH4+JZFWexy\nI1tw1dMZejV9r6puOFo6gYM5bEO+aicK9L7LhWzdeX/oMAOwwVJ5lOy1FkIJ\nTGC4pH3mqqcpnlt7C3HO07000ooltMPQViADfbCVwEndAKK4znA5dDOHG+of\nlhT8qyr9sJZ8lJkjiKy11+WpDsy7+c0taZYYHox2wacHtRuSa4csXw9MliCk\nweVO//WDflMok3tX4GsNJz2zFFh8oDdBOu6fz0Co7RNmwGz6KsutqIs6mZM2\nLUp2jUKejIppDbFgC2VB+jkZYciVN5t/4D7u3CQsmAeveoeCOL3LK+O7CaDW\nN6+2jEAAxL+JvKfdD4DPfe5hPeKvsEwAU9yk9C+zbcXoqBJF78BfZn9rM8m2\nh7jPN26ZfGdOGs1HjLa6UJp3Pz+efFMgz3Yd71Zgg+/bvGKZxFYZgFl59Lvx\npOYrbm6Yo6ALFNzG6qMElnt+xEUWNWbwPhDKjcY+R/L6N7iJW6AR6YTbNfcZ\nJfhKymrMKcu49ToVUPchJccnooQxhe2CDMjSowj093RzVij/Xyp+d2AK6qHf\nKUHm00t2mPc10219dZUgqe/Dxke/5eMGx6xfZR75DISlyh/FNDYAEs2sCaJC\n1Cfr\r\n=3dzx\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n#### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note**: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n> _NOTE_: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n\n **_NOTE_: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommended to\n always include it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color)` | Sets the container fill color to the given color for an enabled button.\n`disabled-container-fill-color($color)` | Sets the container fill color to the given color for a disabled button.\n`icon-color($color)` | Sets the icon color to the given color for an enabled button.\n`disabled-icon-color($color)` | Sets the icon color to the given color for a disabled button.\n`ink-color($color)` | Sets the ink color to the given color for an enabled button, and sets the icon color to the given color unless `icon-color` is also used.\n`disabled-ink-color($color)` | Sets the ink color to the given color for a disabled button, and sets the icon color to the given color unless `icon-color` is also used.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color)` | Sets the outline color to the given color for an enabled button.\n`disabled-outline-color($color)` | Sets the outline color to the given color for a disabled button.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web button component","directories":{},"_nodeVersion":"10.20.1","dependencies":{"@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/density":"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/button_7.0.0-canary.0743288fb.0_1590782714427_0.67519354116347","host":"s3://npm-registry-packages"}},"7.0.0-canary.06ef147b5.0":{"name":"@material/button","version":"7.0.0-canary.06ef147b5.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"c0a0ecdc19fdc2b29504cd9e818dfc612e8a32dd","tarball":"https://registry.npmjs.org/@material/button/-/button-7.0.0-canary.06ef147b5.0.tgz","fileCount":26,"integrity":"sha512-EvAeQretVTxdxZd/cPMAG7waH8Wy5fnPKFoKEhmOzrTz01GaRHfhLpHU+jUO9oZUu+/s9C9BodwAxsYD1WxDJQ==","signatures":[{"sig":"MEUCIB7+8/STP3GmIPlmKzTPbc5FEn8yi7p7HICg7rPdPIF2AiEAwCYnqV5yLoXIpJo7nZFV7E/+HB+YURI+uvPMOiH38z0=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":386420,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe0XNVCRA9TVsSAnZWagAAEYYP/0+cD6AMwIhJ3116kMqR\n2sibfELy5kzfuYwdP65Gyn6aakAgQyz9VTFM7OQU0UrcAPNejC0dnrSAaoWr\ne/hXuFJDGX/rAajbq0gWH+Xsz8f+sHuyHFE2/9vMF3sOQsICTG+PJmtoh9oK\nQ0AbsLUlvJyTeQaOcZzjgENKlkXse2ILNh3cKyw/xDuZCm+cr4SZMaIvpH+v\nEVrKWqA4t7tJJU5h8zyle/+vX7N1s/xVujIcNcCNYt0UXm8amSyhyEMFadOP\nrWy4o4A9JbUqDpXuCmhVgLcRJ+RURxhG4rV5CxQeCOhb3Mlzy5Jo3qgjOQGC\nqIa51m0FXXm0lBtdmtEZa9rx4w4ZDkb6TtoH6C17MQOdM26jYPnREMS4sAlb\nwyvPU40hkdGpxN/+ny3fOkgmx0LUYxxkNqQGycSKGKMzaBeUkBeo8u+LOKq1\nl2jlcguNK5dgZc0ijc0TMj11JFwDdc2uATm8dRaTy9Au6XIH/OQbRB3Dxtuz\nCh+SRzYEw4jh43H51EUID2nUXaCjq+rMzG+YuqPDvIqPOC2JFsL3em346hxZ\nW9btr2ZSQ6ByfMJv49HLPyyNxFqBSrB9HxXVKTbJvtfMBsZUD84Sh5C2uJ3+\n/OrGn0XHMPYESx8uU5TFBIgKY4L/Vn2vaDx9opfwhMdx0uD5ak1Ox819q0v6\nKkGU\r\n=Cfns\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n#### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note**: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n> _NOTE_: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n\n **_NOTE_: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommended to\n always include it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color)` | Sets the container fill color to the given color for an enabled button.\n`disabled-container-fill-color($color)` | Sets the container fill color to the given color for a disabled button.\n`icon-color($color)` | Sets the icon color to the given color for an enabled button.\n`disabled-icon-color($color)` | Sets the icon color to the given color for a disabled button.\n`ink-color($color)` | Sets the ink color to the given color for an enabled button, and sets the icon color to the given color unless `icon-color` is also used.\n`disabled-ink-color($color)` | Sets the ink color to the given color for a disabled button, and sets the icon color to the given color unless `icon-color` is also used.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color)` | Sets the outline color to the given color for an enabled button.\n`disabled-outline-color($color)` | Sets the outline color to the given color for a disabled button.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web button component","directories":{},"_nodeVersion":"10.20.1","dependencies":{"@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/density":"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/button_7.0.0-canary.06ef147b5.0_1590784852764_0.2479129190003917","host":"s3://npm-registry-packages"}},"7.0.0-canary.8073a20a9.0":{"name":"@material/button","version":"7.0.0-canary.8073a20a9.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"e8b3420bc4425d7120484b4365fbff0d62581d71","tarball":"https://registry.npmjs.org/@material/button/-/button-7.0.0-canary.8073a20a9.0.tgz","fileCount":26,"integrity":"sha512-iDpSZtPM7WnZclZzNEwD5atoaCsjxEJedSEYFwYqZDdGnAgmso0wjZ+nJp76LWhRD8hYUX4Ujddqu80t2bXP/A==","signatures":[{"sig":"MEYCIQCj7wiyBmq/EXrPZ4M93P7d13N4fqKrhEc/SlqHDy55gQIhAN3nPCcW0dyuKJyEZ663LyyqDFtnJPLgnPwCoq69twty","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":386420,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe0Zn6CRA9TVsSAnZWagAAldsP/3advreBdfSi/ckBeOTC\nDjL0tOe3dfL1Wzzf4grv19zK+gTrC4zd/9piAJX1IRpA+R5uGaRBILBpelgW\nvlWJVcSSenPAW7cMSEHq/aM+rs3Pe361xnKJJ9Rb+wZ1fvBlHqDIHwNVhSxr\nrTxAXJghkRXpLFYL2/m9AIK2yZRkDdAVAF5DBMgva95EUSXyL771s566GYd8\nHcYKgwoUpasVUmtOSqk5cWX5/xjHrfMhRee7an1Dc2bjL0XH/6j9H8KnUG5Y\nE/hCNPVQfAXSisJIB4gM2q6ZZAC75yPG7b5wJyBsY0LYE2CM3B8L9U3jRBET\nAfWeYUV+6VZ+Cb/eXOvTUF3dwCgUy38qdU+h7NH8O/EI80PL1u659SoS+mPW\nruhlWJYG/+bCJH0o/yohVfqxYwQ7R/OJrlwRYrAGV1eYJPvO9ba9OEmdgAaX\nIHGy6RNlLW1uDcbDo5un951u9NSPMzQnewDdHY5CByK4ssYLbdOD37bKSSG+\nZoYnGfINQfEAo7Av55U57eoIbrgmvgzGhtWxR6mgzCIpnnVxFrcWFyUvPJxo\nbZvvCiKPlbsXqTN8YbQ8f+5Fskea2TK+cC8A25JW/3FYGHCT0UxkliJFKYy3\n91F4ZjfQTvVHwTEvBcDc1CQ6XGxrS7md9YpC4rMf826v1Z6QrEfzLHBI3f6c\nDEEC\r\n=54EX\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n#### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note**: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n> _NOTE_: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n\n **_NOTE_: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommended to\n always include it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color)` | Sets the container fill color to the given color for an enabled button.\n`disabled-container-fill-color($color)` | Sets the container fill color to the given color for a disabled button.\n`icon-color($color)` | Sets the icon color to the given color for an enabled button.\n`disabled-icon-color($color)` | Sets the icon color to the given color for a disabled button.\n`ink-color($color)` | Sets the ink color to the given color for an enabled button, and sets the icon color to the given color unless `icon-color` is also used.\n`disabled-ink-color($color)` | Sets the ink color to the given color for a disabled button, and sets the icon color to the given color unless `icon-color` is also used.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color)` | Sets the outline color to the given color for an enabled button.\n`disabled-outline-color($color)` | Sets the outline color to the given color for a disabled button.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web button component","directories":{},"_nodeVersion":"10.20.1","dependencies":{"@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/density":"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/button_7.0.0-canary.8073a20a9.0_1590794745536_0.5000742247920653","host":"s3://npm-registry-packages"}},"7.0.0-canary.72ff42330.0":{"name":"@material/button","version":"7.0.0-canary.72ff42330.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"391f56bdafe11c6b90d874f467fddfc0ae77d116","tarball":"https://registry.npmjs.org/@material/button/-/button-7.0.0-canary.72ff42330.0.tgz","fileCount":26,"integrity":"sha512-fuvg9YQFEg/hcv0MtRcE0VE6fnv1szlQFqOXKOKqUuxjuzXgILe7pFEb5Zgf80YqZ/+iVc2YcpVTagBeS6d0Yg==","signatures":[{"sig":"MEQCIBM7K1Xyz+Ud2+Tbs5O7xi8owNpKAE5j+Dt1RdXCRqQmAiAzEwEffSdSx8CPaPFNbJktCv9o7HFDmc96C+Iq8JuTag==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":386420,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe1TBuCRA9TVsSAnZWagAAqIIP/R6cq6kmbmEVGyVStmGD\n4+s3E8asVZhPZALu+KxfyOiomQ3AHZRUcm5rZJ9cCijivOcEhOVnXHw0zdM+\ndrC5aHeaJk6t70Blbyjs3wSQSq22eU2JBugnB4PCbE+4BPCk5+DMhbSD9+N0\nOJGvwC6pMxa8XBJZuNwBk+sEH0L+TnlSZ/5Krd8NiR+nTZRBe4erNgkQyVwi\n8kXS6VQbwrOxDbKcatjcm4NQwSNdS+WcSKoyjySwJfRmdXxBIl3YfuQntenU\nqQYk7OQTziXPOej1lDt+B3LX9mgpGCfp3Jb2WtaZJxfGrRezGOzSZf9UTWrq\ngMD6RM0xqYZ0xAqEcZMoahO7CM0NI9vTGdSjNMIw/in9sq/DW1+KZFZ9r8lc\nP9aT7UU2kbCwKzGjurvPkWLFGT0AmTn01yD6eW/a7URLnWKzEDNCt34BlMet\nmZbnmY9RySfE/CD9Cf454XSGHq/depFkA5vqfMQK/JXggRw0PeQFTtB9AkVq\nGLoa22XgEqujREMB9ZaakE6AHXGwf9u1N0o85Rp3T2SmQ4bfcDAwRqizA948\nrByH8zgAcFMIst7UXjieNb6sK0iC22UR4rSExY0imVcvllSN0XXRB+nPqqoR\n1SdxlpJ+qkiSscAduEImXva0sPVYhYptDZ//QY7kU6Q4sj/kGlzRV/6ZHbMk\nen73\r\n=sT06\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n#### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note**: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n> _NOTE_: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n\n **_NOTE_: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommended to\n always include it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color)` | Sets the container fill color to the given color for an enabled button.\n`disabled-container-fill-color($color)` | Sets the container fill color to the given color for a disabled button.\n`icon-color($color)` | Sets the icon color to the given color for an enabled button.\n`disabled-icon-color($color)` | Sets the icon color to the given color for a disabled button.\n`ink-color($color)` | Sets the ink color to the given color for an enabled button, and sets the icon color to the given color unless `icon-color` is also used.\n`disabled-ink-color($color)` | Sets the ink color to the given color for a disabled button, and sets the icon color to the given color unless `icon-color` is also used.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color)` | Sets the outline color to the given color for an enabled button.\n`disabled-outline-color($color)` | Sets the outline color to the given color for a disabled button.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web button component","directories":{},"_nodeVersion":"10.20.1","dependencies":{"@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/density":"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/button_7.0.0-canary.72ff42330.0_1591029870074_0.6359117809075188","host":"s3://npm-registry-packages"}},"7.0.0-canary.9ea52070f.0":{"name":"@material/button","version":"7.0.0-canary.9ea52070f.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"6cd349dc42265fa9ff915613c03a79eaff1ef217","tarball":"https://registry.npmjs.org/@material/button/-/button-7.0.0-canary.9ea52070f.0.tgz","fileCount":26,"integrity":"sha512-RXZK+4NPz9wVrlUrFewa2tsUSXKMxHXq4g/pAqLu4xyoapIb7kb62uIeGMXR6s8P/9/DYtUQtVuQlSLs5bfl2Q==","signatures":[{"sig":"MEUCIQCC1v71vDaaseaPgHVXE3ErY/xlwPHQHbsXH9vGxEBLqQIgbg8OqeAB2P3ynTxkwtkYjKkHFnOcox8dU5eexZDndu4=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":386420,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe1TGLCRA9TVsSAnZWagAArtoP/RonMdRkJIfpwBpBYWhd\n90GsfQRKS3sY+2URW5B792+Nt7eokq7RzVp9SSeRHONbgfKiQbfb8ja1rMEa\nxgpwxC7Q92vLf20ed10IZEcHGa5b8MsTIYIrjGx/olWUZGfOc35TYpaWRUl4\n8WV+1cvAPRrOjS4xvIG3rBVJn/rh/ZxeZWdzERXPL1USKmGSILqDP86qkeZU\nWKHjaGz2G+YjJrW0EAUiWTda3XjmOc67QgiuAv6OrWc2KDhl+By6bGJx5FOv\nN1hcqQfo9mY0nwGE+kvhoexsUDI9ZTA3I1/pKKJN8uuJDhe9WPMErL3MypcB\nEkSLN598LkPi2nZoPOJWmJXW6aHFo5kNUGuCZh9zhGMY7aLr38X+7J8eCVxx\nBNF/yFg49qfWGOs9jU34aHE97butC9bMkpsLEEmKw8uwNxj7B5WQgtAqivI+\nbBa+w6VkPKpMl3Qdge7xop18sJxZykjqh1Yb39vo2b5XJwfkSBli9SqIS0R+\nXedgA4n0RAPbgiInzMF1UCIlcf2D3oPKRj8j7mu7EKLKd/58iPOstQ18trXu\nJnnuo8jnCzBiGyt3WdgO+xyhpeZ8cefx0KlfqAxCYNZwyi4Lh5/C6hD5cn5L\nl3+cqFhH1sf/8Myt/eq+HJIgXJF4BI0pC+dYpxorKj8NASubSTvxEHlNa/WH\nK8Sz\r\n=T2je\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n#### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note**: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n> _NOTE_: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n\n **_NOTE_: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommended to\n always include it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color)` | Sets the container fill color to the given color for an enabled button.\n`disabled-container-fill-color($color)` | Sets the container fill color to the given color for a disabled button.\n`icon-color($color)` | Sets the icon color to the given color for an enabled button.\n`disabled-icon-color($color)` | Sets the icon color to the given color for a disabled button.\n`ink-color($color)` | Sets the ink color to the given color for an enabled button, and sets the icon color to the given color unless `icon-color` is also used.\n`disabled-ink-color($color)` | Sets the ink color to the given color for a disabled button, and sets the icon color to the given color unless `icon-color` is also used.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color)` | Sets the outline color to the given color for an enabled button.\n`disabled-outline-color($color)` | Sets the outline color to the given color for a disabled button.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web button component","directories":{},"_nodeVersion":"10.20.1","dependencies":{"@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/density":"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/button_7.0.0-canary.9ea52070f.0_1591030155134_0.07003443437658996","host":"s3://npm-registry-packages"}},"7.0.0-canary.d86ad3b60.0":{"name":"@material/button","version":"7.0.0-canary.d86ad3b60.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"ad71bf5d10fecc31d9957b143f6223e6be802471","tarball":"https://registry.npmjs.org/@material/button/-/button-7.0.0-canary.d86ad3b60.0.tgz","fileCount":26,"integrity":"sha512-JTzYpGUrMEx5rPJulWIi6Qd8YZiV+0dAL6IfUW9ZoC+6U4ixsGCZqfqXlGyKmVSqoq73SreFJLuLcmyk5hV/uA==","signatures":[{"sig":"MEUCIQCnR4m2Qj/ZB4YCI9vVBAA+4SdHgskPcpww0OkBOt9ItwIgKPDtXQp+j3jS614bBq5TFS9Nfqumfel3E4XDElhlzuo=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":386420,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe1T+PCRA9TVsSAnZWagAAUEkP/0T6THZABYozcswi/emB\nNHOmk+fVXjtfGz7Kt1PyMghF300rQLRVszydoS4RXvywJ0rGyoFk3LO6NLb0\nuYV6Oz6PvVmC9xzEHPjhQBehDrViQp2qjFHhX9FIGcKyiCV54yHxzo/EL3A2\n7VHZUEDyfnQWinjCmU0gPJevSavVdGIZaI+MhzPw4T22DuPlFEEVdjlLdD0K\nKMqym094UU+yr76YJZr5JMnoLgvA1j31wiTUOEl3vSiAfysKQaZSehEHlrTB\noGP2ngv6iY56O97CwSDZ+OtyOniOwNLz3dmp2dVryzBVmDg1DHmEv6YlGAFB\n2qWenh9Arj8ZNcxoOnpyL8cQto4nif6IyxvnPiQaQlaQMQgcZDw9BQOBP47J\nTnjIZaYvu0t55dxPQjpqdDEsMiyu2H9DCJfD8mnFW6FV89CvB5UQSl44u5Th\nqa+nad/KQBLIblyQXxkLbM+nad00Hsc0P2reuC7KdAMiACOFCSxe8To9OVnu\nODoxJoJSaRnUDs1xS//Ts8TRu1cu55FMFCd5LjCC808GKD5gMY9uY4r3o8xS\nbRmPL71Gc4/PdIpnpQhha1ZAqb76m5x+ap3FINg86QOa8xYFZZ1/HVM9kksj\n9nQ9Ami/C93k/nnsVPFaUHizoEmG3QY8/IoXfsCrOpcWlRur4RJ7czee+bct\nvMBV\r\n=HMpi\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n#### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note**: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n> _NOTE_: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n\n **_NOTE_: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommended to\n always include it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color)` | Sets the container fill color to the given color for an enabled button.\n`disabled-container-fill-color($color)` | Sets the container fill color to the given color for a disabled button.\n`icon-color($color)` | Sets the icon color to the given color for an enabled button.\n`disabled-icon-color($color)` | Sets the icon color to the given color for a disabled button.\n`ink-color($color)` | Sets the ink color to the given color for an enabled button, and sets the icon color to the given color unless `icon-color` is also used.\n`disabled-ink-color($color)` | Sets the ink color to the given color for a disabled button, and sets the icon color to the given color unless `icon-color` is also used.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color)` | Sets the outline color to the given color for an enabled button.\n`disabled-outline-color($color)` | Sets the outline color to the given color for a disabled button.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web button component","directories":{},"_nodeVersion":"10.20.1","dependencies":{"@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/density":"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/button_7.0.0-canary.d86ad3b60.0_1591033743089_0.24813420004927833","host":"s3://npm-registry-packages"}},"7.0.0-canary.b9776b1d0.0":{"name":"@material/button","version":"7.0.0-canary.b9776b1d0.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"7d9c191bb6f6cda17c3d158857831ceb52a69597","tarball":"https://registry.npmjs.org/@material/button/-/button-7.0.0-canary.b9776b1d0.0.tgz","fileCount":26,"integrity":"sha512-GFtHnE1fNZVxb2DYub37uxlMFkyf44L9HJxUBT91wUiLFH5PDfcyVfjXB+tyYbqrabzvQzBv9UeXRGRJAMkG4g==","signatures":[{"sig":"MEUCIHyO6kwYHsATv2IFAfkyZanfEKV+pnl6WuynER5Q/9mxAiEA9lVH7G1fX22jiEAoGTnhNWbs+o+lQnRH19VB/OPWGtE=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":386420,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe1UhKCRA9TVsSAnZWagAA62gQAJMrcKx+xg+qLo+o1ToK\n1o4DpCLdp2y+JWonK+93BZFrlqJbctOMs6ZH9+XXKgfZYZk/5otCY3GmJd8J\nWr71PG5r66lyBIBYUZuuxM/qMmizfKtl/LPnlGWa/39OHdYfIaRZEVttAoDd\nSVUtT98YknPomkxkHjLJ5m6HDbfPchcwbHX0ZoUjmQ+Q+cTMZ/cxW6sZRInY\nG/KK6O8GFj3DwqeBd3kzkUT0HuiEK/nYRkQIWZjUoHez5RWgzn7wMmrNEvFS\nwgLph7ej+jMJDuqGfo1rC9zgaYJiliic44iYZNCz5WAMa07S4IMJtCFwbUg6\nWBkAaoKZBjResYKTwKb+n83P/lqDUCuRdTdvkm6tSOaCuuRBieFdTVGTaJfI\ndXP0bIMi218jEPNNktttLJgpVfc7Ro02xgTzkddc3eu6fk8SdNzA25FNBxB8\ndkC4v8YqsanZtqybaSLSnE5EGZKuDvXxNHqBXhttfK9hE0dfVuWMycE2wt4O\niRDB1+hUWS773NmYi6ot/Rg7sHJOQHDq939xQPCVg3sNfv/gY75mPGPbVp2m\nIX6Hk46O2BI31qmTYGRtlhYEOzCkbk5ZoYF7/14RqwGaLhZOxLU38Fx5Iwi7\nW2rV2AkEzdkKTTZcBB0RjpQJR0fTyZvQA3RCw+8YAg9fV7l0xEeXWSVJ3pDY\n4WUh\r\n=HP5H\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n#### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note**: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n> _NOTE_: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n\n **_NOTE_: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommended to\n always include it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color)` | Sets the container fill color to the given color for an enabled button.\n`disabled-container-fill-color($color)` | Sets the container fill color to the given color for a disabled button.\n`icon-color($color)` | Sets the icon color to the given color for an enabled button.\n`disabled-icon-color($color)` | Sets the icon color to the given color for a disabled button.\n`ink-color($color)` | Sets the ink color to the given color for an enabled button, and sets the icon color to the given color unless `icon-color` is also used.\n`disabled-ink-color($color)` | Sets the ink color to the given color for a disabled button, and sets the icon color to the given color unless `icon-color` is also used.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color)` | Sets the outline color to the given color for an enabled button.\n`disabled-outline-color($color)` | Sets the outline color to the given color for a disabled button.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web button component","directories":{},"_nodeVersion":"10.20.1","dependencies":{"@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/density":"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/button_7.0.0-canary.b9776b1d0.0_1591035977938_0.7631890645432204","host":"s3://npm-registry-packages"}},"7.0.0-canary.ba6f7c294.0":{"name":"@material/button","version":"7.0.0-canary.ba6f7c294.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"6a86989a9b26cf66d3d5612b851c44394611aa50","tarball":"https://registry.npmjs.org/@material/button/-/button-7.0.0-canary.ba6f7c294.0.tgz","fileCount":26,"integrity":"sha512-At8jXjkTnm/dwo1XnbDBoNuJVHG/RfJCErCX/CjuWij0iMELiRhmHzQTkZw7G2R577MXFnyKpVv02uHzAxILeg==","signatures":[{"sig":"MEQCIFAk5YoGZvxHbGilJkB/d6jaWH9Xxo5w+QzPcQXMPjPgAiAM0HPZe/8WbEacgi0dZ8futNo5OY3Q1v8495eNtA1HQg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":386420,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe1oZCCRA9TVsSAnZWagAAo+kP/jX1QvKultzgE6ejzMjP\n2wGiRc79n5knxitbdOYh0eVsMXxdqPM/vI+mVmkcbzrSklTsurLxjhJrm633\n07bd4PAqsu8PCQZqn8wcBfLgJSgkyHap9ZEliq99kFDOlBye/+kaczSxe756\nmfdiq3l0dVW1ns/Pbsvrz1rNDTQPxKp8BSx9ZRnRTdQdo0dcJejsrR3IBPK+\nItgkZsY68VqylpfuFU7hNDv9UazOcpNyAmkX09Jix2KsboezTWFD2B+p8J4z\nGl4/BM28AGzf8yZDGlenPFPTeucjKDckiu9U3pnyBoAVJhn0n6KV4xXwmEhL\nhmrLtuZmgifkJl252X9U/yrJ/f25+FU91knBRBJd8Tbfvw0cOqP8S6oJEN83\nQYOz4tvEXeaJtxCqDBxHoNo7ArWJ8GAuBE0NOrb5SXZ9VnAhp0EvA2+N1azR\nne/ld6SRToAvpbdvxY53KtKC2AH1OxC7JfoTiuzhqOkgjgQfnvrp9weUsECC\nWDxnQlhl4UvFZnYxNvVmqRe1QdULkSMAr+IRu16zW0Ebp2CRxsE39e2B2dFV\nvVjFlZ6uT67Vek5qYARZTaowe7HT+iyb8ICAT1CX1j6+c7yHmXeNs0kXRZk8\n3kCPe+9e1ebfWjtxE8STOk3Gwi3A7kTmukbGKl2BO17Nsp2BAkfic1z/MkFU\nzAKG\r\n=ro8P\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n#### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note**: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n> _NOTE_: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n\n **_NOTE_: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommended to\n always include it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color)` | Sets the container fill color to the given color for an enabled button.\n`disabled-container-fill-color($color)` | Sets the container fill color to the given color for a disabled button.\n`icon-color($color)` | Sets the icon color to the given color for an enabled button.\n`disabled-icon-color($color)` | Sets the icon color to the given color for a disabled button.\n`ink-color($color)` | Sets the ink color to the given color for an enabled button, and sets the icon color to the given color unless `icon-color` is also used.\n`disabled-ink-color($color)` | Sets the ink color to the given color for a disabled button, and sets the icon color to the given color unless `icon-color` is also used.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color)` | Sets the outline color to the given color for an enabled button.\n`disabled-outline-color($color)` | Sets the outline color to the given color for a disabled button.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web button component","directories":{},"_nodeVersion":"10.20.1","dependencies":{"@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/density":"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/button_7.0.0-canary.ba6f7c294.0_1591117377860_0.7838390907407868","host":"s3://npm-registry-packages"}},"7.0.0-canary.cf3b664ab.0":{"name":"@material/button","version":"7.0.0-canary.cf3b664ab.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"c8c271b458ae48d01048eb05754251c6fee582a5","tarball":"https://registry.npmjs.org/@material/button/-/button-7.0.0-canary.cf3b664ab.0.tgz","fileCount":26,"integrity":"sha512-K30Bz/yhq4xMWo9N1d8v6YO9lRJKuPwavkdsqbG6czJI0r7KEgm5mo9OuBBPGr4IK3JBYEAV0i9vC/2hTNJjWA==","signatures":[{"sig":"MEUCIQDfKE5Y2hY1OFT/4C271mmj2iik8X0H5XEGJv2TKvBrlwIgFQ5n/Y+grcTHwpY0DPcISPAjE924rAfhdVCXX6hqdYg=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":386420,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe1pk1CRA9TVsSAnZWagAAjDkP/3K1Jq1qVuNUntMY29Nn\nMac4Yjj5BZ94Uq5b3xcsTaqVs2kdD7JeS7TzTuDuJBmU48+BNaCqEa84vXM0\nPnpKeRZAoJdHQ7815lhMYjw6JoOj0igQe7kjlz/qmshKwFeV5B6HEM8mit45\n1oHXe9XQqkk5O25BcJkFoOAoIyXH8DFMEgpZQDgxT8jhZRlni4Wejhu19k1h\nMtqL1xlSOSafqodnvL5QqreMzr36Lph/dxSLWrZusXpmVmq+0KjCpKkKyVvi\nJAcx+t25G1O0T6ws1qntVdCEzUkZ1IH2VRhKtVm+cy2S2ex10rkBbcVxhaza\nQSvTYePCG/WSzR3ZSQ7rxOYZGTN4qnelNRD+JfCjlSoeuU4IksMbtjKdFxWP\nlreEXJT75BtEiW9PcHKLAhqL35VJZjJooE1oEOmqK92PyLO+8QQTOQHbAz1x\nJoRVYSuxB29WjqDl+LtjXybbiGJUfUAq4n94k0MIvuWlv+sJvFWYXLKGs8d7\nERTomONflW6zkSoG45G67xKqzbR3XoCLdWCGO0FNlhQwOGo/Px3XYL6ZVovL\noOKLGeZQLjdK/swvK0/fjOPVdwB5eE0C6KLYxG3SnTSdNV5E3Ss8fwdx6feE\nfvMlKjQKTLIL6a4E+dOgJmZnCB8NQkCITze3yr+n+/7HY5/MmgtN/ebwMt/c\nFpBk\r\n=GL0o\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n#### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note**: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n> _NOTE_: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n\n **_NOTE_: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommended to\n always include it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color)` | Sets the container fill color to the given color for an enabled button.\n`disabled-container-fill-color($color)` | Sets the container fill color to the given color for a disabled button.\n`icon-color($color)` | Sets the icon color to the given color for an enabled button.\n`disabled-icon-color($color)` | Sets the icon color to the given color for a disabled button.\n`ink-color($color)` | Sets the ink color to the given color for an enabled button, and sets the icon color to the given color unless `icon-color` is also used.\n`disabled-ink-color($color)` | Sets the ink color to the given color for a disabled button, and sets the icon color to the given color unless `icon-color` is also used.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color)` | Sets the outline color to the given color for an enabled button.\n`disabled-outline-color($color)` | Sets the outline color to the given color for a disabled button.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web button component","directories":{},"_nodeVersion":"10.20.1","dependencies":{"@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/density":"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/button_7.0.0-canary.cf3b664ab.0_1591122228375_0.901164178333929","host":"s3://npm-registry-packages"}},"7.0.0-canary.4ba3c9a31.0":{"name":"@material/button","version":"7.0.0-canary.4ba3c9a31.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"da4867a68e83151f6b1bee416dfbe9596c39570d","tarball":"https://registry.npmjs.org/@material/button/-/button-7.0.0-canary.4ba3c9a31.0.tgz","fileCount":26,"integrity":"sha512-N8sxTbPJea2OR8WN5erVpvzhTBwgKMW7d3ouRyB8fFGcGAgjMXRwdzHKaKUGoe8ni3NhoMf6fNOZgtGlWDncUg==","signatures":[{"sig":"MEUCIB7NuCue3wSDOoXni/w6ZyZEQ/PZPUFS3fHZKMYeoK9bAiEA0MlVQc4cjapgzPYOYHCOXXC1nMGcoviwD8Xq7WhHjKM=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":386420,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe1uY9CRA9TVsSAnZWagAAvtgQAJDg0HYykfRiHv92sRuE\naPB9p5AcbZ2FXdJQ+OVbdB+9Nz4OLdaXWf+cJv0iuczaZUatT5XPiH0g7CpZ\nBtUNXmFBJv/coW9vXgWDuiZCrCntKOQVTabvFUgt3bKThclWcz3cCWeA9FZ8\nDhd8ZvHXtNOlm/MxIOzksM6ucXOpRTViReW+2dE/VBucPXtW5O6xA5E8Khiu\nieCndXEUambCNJBdkcjHBbLK0FGmGf+e4KQMfxh+DkjV7i+COkNYMBCnvW3n\nvf2IzJFijOYQzHiqEmhllLraXs6uKX7HobiULAWI/KMNg+6sO5RSkaQoJDwV\n+z9/VqPhOM2nB3oBEOJQAPD5tIf2w04vir0P7LGd35e+XacZ4He2D+7uJAod\n9HMMM8DHxA+6dm6RbwDQASnMRYQPOXDIWhYrqQ6ABOUjXY080LvDNTDRPNJL\nUgy2GiQtcLAas3eWFyWOciDqgucz5GVUu7AUDlB1omHBXqB9IF/cIqJDP4V5\nI/t7IzALKNojg4GHRXGaRKBcpduYTz154kKd7KqF9MIeMs4Uw10MFW+o2/6b\nyChqUeootOYux9zUX1wqLMChG+xt0hIA4qZhhA71v4H2BwCWD98nf4LtCPSg\n/mNs6yGtT3A9k7X0PIIIYPFaSVANfAD/qS/NghdQoIJ03FAMnoV9wh8zGz+l\n2SuH\r\n=ezRW\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n#### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note**: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n> _NOTE_: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n\n **_NOTE_: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommended to\n always include it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color)` | Sets the container fill color to the given color for an enabled button.\n`disabled-container-fill-color($color)` | Sets the container fill color to the given color for a disabled button.\n`icon-color($color)` | Sets the icon color to the given color for an enabled button.\n`disabled-icon-color($color)` | Sets the icon color to the given color for a disabled button.\n`ink-color($color)` | Sets the ink color to the given color for an enabled button, and sets the icon color to the given color unless `icon-color` is also used.\n`disabled-ink-color($color)` | Sets the ink color to the given color for a disabled button, and sets the icon color to the given color unless `icon-color` is also used.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color)` | Sets the outline color to the given color for an enabled button.\n`disabled-outline-color($color)` | Sets the outline color to the given color for a disabled button.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web button component","directories":{},"_nodeVersion":"10.20.1","dependencies":{"@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/density":"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/button_7.0.0-canary.4ba3c9a31.0_1591141949435_0.3902319910047072","host":"s3://npm-registry-packages"}},"7.0.0-canary.388b042c7.0":{"name":"@material/button","version":"7.0.0-canary.388b042c7.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"f5bebf2a521d9eb749a86f5e329118f4ffdd7a12","tarball":"https://registry.npmjs.org/@material/button/-/button-7.0.0-canary.388b042c7.0.tgz","fileCount":26,"integrity":"sha512-5NW/BK9fJrVqA3ScBqxKR6MKLcF8m/cRm329XIjwLpbu5P2PP54XUmCySY3P7kLy++gcxBvsPs6337s5WFwxIg==","signatures":[{"sig":"MEYCIQCL+bPYrqccBSlSRbiPm0Uv8RWHkUrB6LMUJROZjmXRIAIhAPsn0l40jVRMNn169P855e7dnlPJY9Lxl4UA9hDd/hR1","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":386420,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe16nMCRA9TVsSAnZWagAA58gP/Rmqc/hbFWpShPwfmyry\niJk+9WEb3TnaRrGxY7ustnQsd4USxzrECJgqijvs28lJmmQNIRJ63oV6rIwO\nv1jVV5K0VpAsz7KoOmnb/X/vZT43lKmpNMaOB+G+VYpoWQ9AFSzmH2ywGN4M\nysWkMknqtLV8Vq7EJMCtiwuiy+c84fA4+kLmIqXjULBm2j5b0I04iGoVrgvz\nWdea7cnKEOsiJWzqOGl5pEzrkSDUXqFzj5ZRvHLhUbmSeKXWQQEUlXS0hKAb\ncMtuAka/Qa4ETqVsFHmLMOx1NSOtBlDU1gMRam+EjOSZvYezJIKsgG8SiiI7\nu+iANPn/Zc2QFPvYcWWbNJIt1l3YMzBUdG6oDJx+Hdto520Vac/5O/VoF+LW\n4wqNujYoPJB0iLzhjRKPmtfOcTbxcwYGJcyf6pfjDg4ytDyDFALHq+Imt0zu\nJbuAWhlwdFp5PLvcOR1yo1C+LzHh5Dkbm6aNBzPDHra9TBG+QfalvslhTwgZ\nIN9XwxEIhazhgET9II7v2OSgoqrwQcGciju/d1iCWLKwF1jqy3yE8XwCcvoU\n68mzi/D9eIJ+KR3IKDvbL6CNPvryYcYKfeUFVP9ImItMSgr0rzrwJNo1u7wL\nGon40tFDm45rV2hEHVc1c5VVv1zGy4KLZCGu6tN//9N5zQvttLKE1PLxA+Gq\nvxJC\r\n=Uvor\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n#### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note**: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n> _NOTE_: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n\n **_NOTE_: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommended to\n always include it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color)` | Sets the container fill color to the given color for an enabled button.\n`disabled-container-fill-color($color)` | Sets the container fill color to the given color for a disabled button.\n`icon-color($color)` | Sets the icon color to the given color for an enabled button.\n`disabled-icon-color($color)` | Sets the icon color to the given color for a disabled button.\n`ink-color($color)` | Sets the ink color to the given color for an enabled button, and sets the icon color to the given color unless `icon-color` is also used.\n`disabled-ink-color($color)` | Sets the ink color to the given color for a disabled button, and sets the icon color to the given color unless `icon-color` is also used.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color)` | Sets the outline color to the given color for an enabled button.\n`disabled-outline-color($color)` | Sets the outline color to the given color for a disabled button.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web button component","directories":{},"_nodeVersion":"10.20.1","dependencies":{"@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/density":"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/button_7.0.0-canary.388b042c7.0_1591192011979_0.9632578761417632","host":"s3://npm-registry-packages"}},"7.0.0-canary.cca1ca84d.0":{"name":"@material/button","version":"7.0.0-canary.cca1ca84d.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"52f5c870b60237a9f086332710b9fcfb2bb174a8","tarball":"https://registry.npmjs.org/@material/button/-/button-7.0.0-canary.cca1ca84d.0.tgz","fileCount":26,"integrity":"sha512-88TtQCUpJHXce0o8CpNThC65rDDMaxtycGhdHcs/a9E2mXZyJT3PnQlX76pkdCcwxZvbxsoB2dS+V36NSoed/Q==","signatures":[{"sig":"MEQCIGQXOFB6mcAt+4++fn4TQjaeQ3TenqzaDfikGVfPeaSYAiBZTN3B6aTpikrQHzE8DWICVOUCbMLx5qb2gMIb/CGBag==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":386420,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe18nUCRA9TVsSAnZWagAAp88P/jiiNvAfJtqSUhU9z6IJ\ntrnkcv9yjiJVqL9lgxVzDxgtQvjILprAGsZMHGOuhAsT9WeNgd4A3E/ZY+uW\nSTJOXRqAqx9MsGeGOiE9TfqpR3w0RClb0Oq5HHFGUZpaaWWU81bsmPGj95Z/\n5qwh5NKiX/yPRzkESxa21lQVPUhE1FyMJ7s1o67qnpCUsciLNayPEOnlRyVc\nljsBQ+bMKyTsjVbW7one98MUDILhqkig6/JU6DGCmo/jGxinxGEGrK3oLqsD\nBuArQHNiTbpwVeprVPMPZaw6xaYWWTOEpOZw5bS6qHdIzBfNMqx9h5v27bfw\n/0itkzSBBBxnp808pj+op7/MTPHjgbntYAjpeOrjdrnfOs9QySEMprYta0dg\nAcyQu8MFMEYidXb3MZ+B+mqvjsUTqvuz/857lDRnEHgdG5sQHC5wuY1cVQoX\n/BHiC6DwKpir30lA6DJeMx2KuOwIiWF/NJdkBpzccQqO26qMqt1hPWetwjSt\nE2IlrcwpwL95ATQZVbVa8Ty6pcow5W2YXtJkDTGKv6MfrRsAfUD+bR8eZsvc\nvkcoHyTBXHkJwK8vJ4oiPrO0Kf7LZf7u3tWTB67rG8aZmyBhmVMixYiQln+0\nHxI7m5S4bY4j6UOMrSMQx2gWGb+YtTkTjaB1aP9A6AYb0sG37GPNADESnA5z\nB0WQ\r\n=OFu8\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n#### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note**: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n> _NOTE_: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n\n **_NOTE_: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommended to\n always include it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color)` | Sets the container fill color to the given color for an enabled button.\n`disabled-container-fill-color($color)` | Sets the container fill color to the given color for a disabled button.\n`icon-color($color)` | Sets the icon color to the given color for an enabled button.\n`disabled-icon-color($color)` | Sets the icon color to the given color for a disabled button.\n`ink-color($color)` | Sets the ink color to the given color for an enabled button, and sets the icon color to the given color unless `icon-color` is also used.\n`disabled-ink-color($color)` | Sets the ink color to the given color for a disabled button, and sets the icon color to the given color unless `icon-color` is also used.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color)` | Sets the outline color to the given color for an enabled button.\n`disabled-outline-color($color)` | Sets the outline color to the given color for a disabled button.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web button component","directories":{},"_nodeVersion":"10.20.1","dependencies":{"@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/density":"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/button_7.0.0-canary.cca1ca84d.0_1591200211669_0.7376343998166337","host":"s3://npm-registry-packages"}},"7.0.0-canary.9b0b5f2e0.0":{"name":"@material/button","version":"7.0.0-canary.9b0b5f2e0.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"569602e8540fa0bfb5a9b5df36ae8aff00b0be6f","tarball":"https://registry.npmjs.org/@material/button/-/button-7.0.0-canary.9b0b5f2e0.0.tgz","fileCount":26,"integrity":"sha512-VIsMesGwFmeg/3fZtCIp/qK84JkP5HfwjFRcGVu0A4VNzxj/n/0E4XFDiSOuOiHAssBv5M0cXaED9k4BB7bsyg==","signatures":[{"sig":"MEUCIAqXO35UBHeeuYYwUdU5KjeS2HjQm2CKGvROtnddaaRiAiEAtRfemciWYJC7/ECXUVz5gqzf3WF1FrIA0Vy9S1gPOqU=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":386420,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe1/KxCRA9TVsSAnZWagAACoUP/0EZqjh0NbHnXRJBDNsB\nyV7aJHtmEyhGFaW0b4z0ieXcSYHg/QGNSWO0VSUmOxEZhOlYc9idHu5N/gYo\naKS+CrS/lRKj6zfbMywNOyUYnNUurnZ4Z50lCVdJ9jJKXNKmvRdJ59FRRxRk\n2N4XnRBO/bfF93eVauuNmSeCpWIcWO+4GNZoWDCIM/b9A74PLik/wUewhzBT\nvKcE9g9pPU2bykV+GonHgpdr0P7+wej85wmBfMY73sVnZ9UxTiF7UkkmPaku\nsSmTPgBuKhGE9X9/gUTJYxuv4KzOXhCShhdVXKnyUf9NHTID234njYBv7p47\nKG6qaMWUHwMYsWhsdoyKI94dHF3/RiV+gor5Otg2MCbvb8ZQj/JyJlQL0fUe\nDvmfB2aZvHcR4mmWsB+CuOeEPbdph80SzSaS59/sOkhSLgspOc3sNooD6gHl\nKul/Njn+hJ5FooEGsTTHjF080T05Rx6FivxH54V0fk3ZpFhSHdQDAa1mU6vk\nB259SYCOEt92dmYvFqMXhjCQ3Xz5dEAZeQ6+AiPVo4D+GtHp7zXUA6tqhU6U\ngBFsFnQ+HHoLOgsPb2m9jXkBmPTb9xcSrpOUh5DrnMaQx/y5O0HqlyBrtVOb\nIupoi4nAhEvD6irp73kothR0RGkNv8U65Tzm80gixrvFDLKOWb5CrSj7sLLD\nsEJR\r\n=WKqJ\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n#### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note**: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n> _NOTE_: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n\n **_NOTE_: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommended to\n always include it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color)` | Sets the container fill color to the given color for an enabled button.\n`disabled-container-fill-color($color)` | Sets the container fill color to the given color for a disabled button.\n`icon-color($color)` | Sets the icon color to the given color for an enabled button.\n`disabled-icon-color($color)` | Sets the icon color to the given color for a disabled button.\n`ink-color($color)` | Sets the ink color to the given color for an enabled button, and sets the icon color to the given color unless `icon-color` is also used.\n`disabled-ink-color($color)` | Sets the ink color to the given color for a disabled button, and sets the icon color to the given color unless `icon-color` is also used.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color)` | Sets the outline color to the given color for an enabled button.\n`disabled-outline-color($color)` | Sets the outline color to the given color for a disabled button.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web button component","directories":{},"_nodeVersion":"10.20.1","dependencies":{"@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/density":"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/button_7.0.0-canary.9b0b5f2e0.0_1591210673259_0.002373253093101324","host":"s3://npm-registry-packages"}},"7.0.0-canary.0a7895f4d.0":{"name":"@material/button","version":"7.0.0-canary.0a7895f4d.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"bfcd1d259be3e116694e0f8e1adaf408c3932546","tarball":"https://registry.npmjs.org/@material/button/-/button-7.0.0-canary.0a7895f4d.0.tgz","fileCount":26,"integrity":"sha512-BAOAM4X3zVQdkB6+xz5OP4W2+2YPXlIhTVY+BMGt45Q6NqrZwfn9LjbtKWmsNYb9mxiaouKwgZrN5mCoIoS1Cw==","signatures":[{"sig":"MEUCIQDIWQu3FdRYiv+m0KD1kKy3yLA0dc48HXv0FP818k7cSAIgIxX8jEm3eo23wN8Lzr81AVUPEu4RBCscB85xo+1Sy+4=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":386420,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe2BF+CRA9TVsSAnZWagAAglMQAI4zyFRV01OU38+QNhsA\nmsNKmgcYYoLkdGsjuL70UvXKqhoEjksXfEzXhC5qgEfNLAfLnJnTgIunX46L\n3Y9OzsMGNaZjQ/LScyvfBmmRZ+dS6tLUXzrcDnaReLysKEz4gC3tTAFs7VHQ\nyIP+IfpiU2M5vY33OqkS7VUdrMLCZ37SYyEHTSNjhoZxghd5pQWCMKezRiGc\nWTbYgVhjYUTrEOvJk7K4X6gXLy96xlOq1MilnTpsHiwMFEHX92aU+c35lWrH\nr20+2r2Sc8oILh2K82P9Rh0vGejMRgXREeWroZNahCgSqf7tKOBuH8TkZu9I\n/tPKWfzlKrAD048/B2OXz5eMpYNYJRoLnZ+03LJzHEgZvQHI99563T9HJLGL\nS8Eeh7vaRjiFBpd/+hJn2hwzrJOypzf2dZ4BxXYTqZyCDxM8T+geQnIJaws+\nBuC7cqfCGACUHSByIB/yfhrV85uoWhp50jh0hue2zxU8IenB1KSn5kda0woH\nhwqysHEFxP2AAFOsrV5dDXWTPjg9wcG6qwar/Zs7Zn1ofnJw0QpimY0Ra3Dv\n7qGzxlsaoing0Ek4OXUfSlC+qOfB1377lcLbFOG9w89RjHxVoPyOWHDV7Kwu\n99Ze3Z7zZmKaVFYZcKMXlvCBdsVDr+BzOF+sBbQAF2VdgtWVtd1Ml5M95RWP\nlnxp\r\n=lATH\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n#### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note**: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n> _NOTE_: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n\n **_NOTE_: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommended to\n always include it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color)` | Sets the container fill color to the given color for an enabled button.\n`disabled-container-fill-color($color)` | Sets the container fill color to the given color for a disabled button.\n`icon-color($color)` | Sets the icon color to the given color for an enabled button.\n`disabled-icon-color($color)` | Sets the icon color to the given color for a disabled button.\n`ink-color($color)` | Sets the ink color to the given color for an enabled button, and sets the icon color to the given color unless `icon-color` is also used.\n`disabled-ink-color($color)` | Sets the ink color to the given color for a disabled button, and sets the icon color to the given color unless `icon-color` is also used.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color)` | Sets the outline color to the given color for an enabled button.\n`disabled-outline-color($color)` | Sets the outline color to the given color for a disabled button.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web button component","directories":{},"_nodeVersion":"10.20.1","dependencies":{"@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/density":"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/button_7.0.0-canary.0a7895f4d.0_1591218557962_0.14453687220485523","host":"s3://npm-registry-packages"}},"7.0.0-canary.7461aad68.0":{"name":"@material/button","version":"7.0.0-canary.7461aad68.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"2809827521a11d269c31787e97562d5d952c4c18","tarball":"https://registry.npmjs.org/@material/button/-/button-7.0.0-canary.7461aad68.0.tgz","fileCount":26,"integrity":"sha512-TvMnDTFc/gHhxBuZE3rcfB7SpDQzRk4B4CoHpYJz/to6+MWdkSj2Y+W/v41Nji6CZn8+lPrXhBZ52J39DpEDUw==","signatures":[{"sig":"MEQCIDzqvMTySbZTkIOQ8Rwo8QAN7+p70MMUDWwbbitRwaHPAiA1aXp3wDP9QPVK1Cab6YWDKP1QmxXG7E920SpJAdkVbA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":386420,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe2CBhCRA9TVsSAnZWagAAbo0P/iJANvLfBXZ7CsUdPBYj\naGxI6+37zhTam4c7VOQI1RUJO8Dyx4MhqVPzXbxyooi/BsdC3pgN2SO+0ZsQ\nSI0bWtN6ICDImRYNa4AzHCe1DtUJN0H1gt6qEaZ0chbmdiz4NCEwP7LQZSYi\nnff3rbuiIbqEDvryuay5P3JWIASW/Alt1mogldPw3w6iUdCbF8kwdit84ZBw\nLxjFsCKAVzqt/Y8TBlJujjMJWJwBJtvEwas16rJ8JraB0Sk88Z3RNy4AHYRh\nkFiYkG9oWsMmobfWUxh+cNK0uy5SerHJVOoCygb9PrZIIjgnM1iVDVsnAda8\nTqDI4P4hE41kCrcFxdCes/NdK9JaLMQv3rCYwvzmfwrIwheMzpssSg5mK7AQ\n1eLZsIaIlKPJfUbo6CUms48SbMcRkebZRIS5E4+liKdhOye7ViyOeiKR2pJs\nnh/NsW+rprkxs5mKAB9JG2mPl4IeO90M+FAsOHNQfFU3BfwFc+Be8Y5rJIvh\nyAJIRGTYtFwMusogpuYm55ceOhkBow3ijiSIiH6QZmOEkDKr0pOzyOoHSDF4\nem9KA1HaJJ2PlMauV9hMLUuLI4dHx5zTao8xJ90OopQVKFjp9YPXdbcGgfeO\nAxVOice4XFwmLTIi0FDgf3tmGlx2sRvucaBlR/DIXpi2+qcKXn1QlZH6bJ7/\ncAg8\r\n=snU6\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n#### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note**: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n> _NOTE_: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n\n **_NOTE_: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommended to\n always include it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color)` | Sets the container fill color to the given color for an enabled button.\n`disabled-container-fill-color($color)` | Sets the container fill color to the given color for a disabled button.\n`icon-color($color)` | Sets the icon color to the given color for an enabled button.\n`disabled-icon-color($color)` | Sets the icon color to the given color for a disabled button.\n`ink-color($color)` | Sets the ink color to the given color for an enabled button, and sets the icon color to the given color unless `icon-color` is also used.\n`disabled-ink-color($color)` | Sets the ink color to the given color for a disabled button, and sets the icon color to the given color unless `icon-color` is also used.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color)` | Sets the outline color to the given color for an enabled button.\n`disabled-outline-color($color)` | Sets the outline color to the given color for a disabled button.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web button component","directories":{},"_nodeVersion":"10.20.1","dependencies":{"@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/density":"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/button_7.0.0-canary.7461aad68.0_1591222368968_0.3664594979011897","host":"s3://npm-registry-packages"}},"7.0.0-canary.a0dc2b5c4.0":{"name":"@material/button","version":"7.0.0-canary.a0dc2b5c4.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"f53fdadf10981d48183912b9bb1069edeedd9649","tarball":"https://registry.npmjs.org/@material/button/-/button-7.0.0-canary.a0dc2b5c4.0.tgz","fileCount":26,"integrity":"sha512-hnZBPZZxLJjZpCgSXG+k8JH22Hn7CD9u0jAItDoWgSgu5yi5a8KtBT4tuYJmh0FWQQw4IpnicaWAyiwocX+e2A==","signatures":[{"sig":"MEUCIESL7/iMRN+pOsnwj9PDJacAqEEnSqv72z0yLRISv/umAiEAt7ComQ0gNYQZaKgDzrbOWvjTpS+9teA77u/8G8KH0QM=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":386420,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe2WQ5CRA9TVsSAnZWagAAiOgQAIKhkDoMvLPIEHg+Z30H\naCuqHdLJOoWOSza+HrGQdKE6j64wkPg7voHnxXSYSChWBAIuNrqDYI/R7cGS\nABmAWE/+76PJ+uHd74DfH2yEAw4mbTX5nh8n7kJv7ndf8idtsTW0m6fyc1Fs\n60HLirBf5ZHuE/onTQnp5ikPlno3/WZTjgDjBVRZeP9VRfbUFc0TU2WXC5TE\nn6CyYB02FYqvhLA3qpYC0tQwRMsewX8GA6ImK7anVkkMjYbUSEmQw6kVHteU\nhIdypp2JsJvdbFhpUegoEsXKedJUF6OSnojNahLueLkJVLVSsAtojdlPnb7V\nRkdKRU37sHWwwrnuVA0LiYQa/Mj96aGGb4svd27RQzZgeuIR7rCg4k77djWM\n3+r3oLAWwcXk7WZt8BIwZOS6T/SS5GS0bYD/qFqU7vr5tD5WHBRzhgpy6Sjs\nUwpu71/Fi5l3W/qrgdE2IGwoKvFLKLMa4czBQXhT8Ykio3iyl1unlC2UPMPY\ncJbUtd+oX8Ud1IdjyS2WJf+QeCbVSvIsgY5dgu57ZzFooxiBpc2YsDYAiq0P\njcJdEBE79xxJR+6S+YtF3KfFOnOBH7+0dw0t+nbvMfBVDZbxpyAeb8YkNvS+\nD88qHFh4V3lANVZIaPUQFplq9UCuyIEga31Hey7vbvOJzaBYBOjArHs2uRjO\n91qr\r\n=LuYN\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n#### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note**: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n> _NOTE_: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n\n **_NOTE_: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommended to\n always include it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color)` | Sets the container fill color to the given color for an enabled button.\n`disabled-container-fill-color($color)` | Sets the container fill color to the given color for a disabled button.\n`icon-color($color)` | Sets the icon color to the given color for an enabled button.\n`disabled-icon-color($color)` | Sets the icon color to the given color for a disabled button.\n`ink-color($color)` | Sets the ink color to the given color for an enabled button, and sets the icon color to the given color unless `icon-color` is also used.\n`disabled-ink-color($color)` | Sets the ink color to the given color for a disabled button, and sets the icon color to the given color unless `icon-color` is also used.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color)` | Sets the outline color to the given color for an enabled button.\n`disabled-outline-color($color)` | Sets the outline color to the given color for a disabled button.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web button component","directories":{},"_nodeVersion":"10.20.1","dependencies":{"@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/density":"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/button_7.0.0-canary.a0dc2b5c4.0_1591305270343_0.12128251589240535","host":"s3://npm-registry-packages"}},"7.0.0-canary.2b420c5b3.0":{"name":"@material/button","version":"7.0.0-canary.2b420c5b3.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"dabd07e2ef3d22b5c251046da8e72b8d194e6919","tarball":"https://registry.npmjs.org/@material/button/-/button-7.0.0-canary.2b420c5b3.0.tgz","fileCount":26,"integrity":"sha512-Cc9foJkFJpD54eTvGiVPHZTgZOSUgO+SCvFLSnkQ9XQxJwMYmaMhCcr9nf8wM0jAnK7BV1ZpD87v9pC2jTPM4g==","signatures":[{"sig":"MEYCIQC1p8YmitBlaZLmeM436FH+vhgthJx3aYpNYFNNpUCD/QIhAKWabEQksImKw2SXJ+pn5v24lbHJ1KlGlY8hW23D5045","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":386420,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe3mPzCRA9TVsSAnZWagAAwGEQAIYzUa+nGx9C2dhGPc81\nDNliiETR0M+IgBYP7BTWg2KPw+aEmACKgbMBRlyy4ppRgF3pdBw5MNytGGwQ\nJKbrnrrBDGhKc54Q1Xq2qaFbL/c4rt20q7/UM1pLsPS0sPM8lZ7fAPrvI8U9\nhppRJG0yazC/KskQhGwMhNPkC347rbR2xq+mEr4XP7/+wS7utYuSUvcGgm+3\n14GujpVghZFwXDQfftjNVC9nFZX6ZL+/kAoCgaPLDCLaJ9Rcd9W7/77S8wj8\nn59BAWHflJaD7BjCNvSr6fPQSlVdwV1bPDPTllZTve9k4ocBOnbO26X24cMK\nIpKelTea5jj07P+uMwAlFgZisRvIzNYY3ZsRdZzMw0nZX1RRvVmKIiC63X6+\nAUt2RFLV5MPu8bb5MXpaX7WdeA0kphzASlKYzoDoHlCWwMewMgkcYGVmtueO\nBanNlTxNXzSkeB3t8QScmLV8QrOzYw51UsgXr+swvSw3AhFHCprUJmPZ/+qE\n9r1qvHVO2hQSF19G12m+qGY1gKaQAn/H93U6lGSeQTbEL/OrquMVpo4DHQY3\nmzS/Qe5PFBG1I+hZup/R1e4PD/z2HGjHh2QTy3U6j+YJjxptJOC80DxKz/nT\nSEo2n3hnkWTJ0k0R4UDF3SSmFl82xeQqNJDDlQ1CAhUrFgrXSDXb3JpxFIxT\nrE/j\r\n=e0a/\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n#### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note**: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n> _NOTE_: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n\n **_NOTE_: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommended to\n always include it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color)` | Sets the container fill color to the given color for an enabled button.\n`disabled-container-fill-color($color)` | Sets the container fill color to the given color for a disabled button.\n`icon-color($color)` | Sets the icon color to the given color for an enabled button.\n`disabled-icon-color($color)` | Sets the icon color to the given color for a disabled button.\n`ink-color($color)` | Sets the ink color to the given color for an enabled button, and sets the icon color to the given color unless `icon-color` is also used.\n`disabled-ink-color($color)` | Sets the ink color to the given color for a disabled button, and sets the icon color to the given color unless `icon-color` is also used.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color)` | Sets the outline color to the given color for an enabled button.\n`disabled-outline-color($color)` | Sets the outline color to the given color for a disabled button.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web button component","directories":{},"_nodeVersion":"10.20.1","dependencies":{"@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/density":"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/button_7.0.0-canary.2b420c5b3.0_1591632882909_0.37009192019308257","host":"s3://npm-registry-packages"}},"7.0.0-canary.8fa22aacc.0":{"name":"@material/button","version":"7.0.0-canary.8fa22aacc.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"4410aa20119f3f89bc72c24189193531f6f6558f","tarball":"https://registry.npmjs.org/@material/button/-/button-7.0.0-canary.8fa22aacc.0.tgz","fileCount":26,"integrity":"sha512-EOrjkAvAdC4RmFPGdX6xC1QzJiblk8+fIqh9Sg3LCAYxVuJLUq9y0L0UX+1y3EsJbJC2H1ocFnfsqXX0CWufJw==","signatures":[{"sig":"MEYCIQDCrioaf6VF0c7TE62UX1eygXb+gzRbm0gi8NHwjrtWYQIhALrpHKYI6MAaU17eqsbESsZyyDe8DVfJe6n/7GWg7SzY","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":386420,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe3n3BCRA9TVsSAnZWagAAs1kP+wetPXcit6U4MJkCuJCj\n0p6siP6cpkPHoRV/BQzzKd7bbS8tSR6tLT4IVwF3IHGmNhRb+0gQ/hosc0vP\n7FcpL3DU4AbfPjmYz17TWu2tHTvqDpZaZ6QigDVkf1p2mX6so6wtOTLK1pj7\nuSmt8oQsjqATxQWXiIYVzlDsisNHUePh4pquHvR1a6gVpmXDrVDI+AZEhREo\nFCe7vUaUm0pIHlg6iQBI/ebtr3wqDGTmcVM9gbhMaJQ1j424pRaMWl2IC1hm\nO4wJ31UR9rp8kwXOLu+rWbYEt6C4MxnK8U7IDsjvyaPEdqSuuA4NGxKkG2MH\nRFfkFhRycg+1h8E1eRpdeNOn+Mnsx20s/IY+W6AyYaPdMt4tpMi43jB7kFkD\njUEReNHa5HIUMFh3I8ZXztv5Sj0B8nI47gCobot0sf63YrBAChzYePexAeMk\nX4yW0S0XiBQK/m/cxEhht3yZFV07VMFmk2UEp6FDUFPege6nsCN0jvj1SuVA\nIMn7djyppoKmEz8Tq3t4z/WKJ6qAgROgWEL7c5n/KSnUZpA9A8TwFALCa5O5\nrnnqf5NaYJqFrqPK8n4ICRw0w5WPm12YeDasjO3w4Qdpuy9rFGf3wxmyd39H\n+tEvuKK8UMt8HJSp97WYEys+6sJtOhtC0+yglzzTUu/ByqhfovOw7LWE332e\nHXvV\r\n=cbhK\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n#### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note**: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n> _NOTE_: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n\n **_NOTE_: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommended to\n always include it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color)` | Sets the container fill color to the given color for an enabled button.\n`disabled-container-fill-color($color)` | Sets the container fill color to the given color for a disabled button.\n`icon-color($color)` | Sets the icon color to the given color for an enabled button.\n`disabled-icon-color($color)` | Sets the icon color to the given color for a disabled button.\n`ink-color($color)` | Sets the ink color to the given color for an enabled button, and sets the icon color to the given color unless `icon-color` is also used.\n`disabled-ink-color($color)` | Sets the ink color to the given color for a disabled button, and sets the icon color to the given color unless `icon-color` is also used.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color)` | Sets the outline color to the given color for an enabled button.\n`disabled-outline-color($color)` | Sets the outline color to the given color for a disabled button.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web button component","directories":{},"_nodeVersion":"10.20.1","dependencies":{"@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/density":"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/button_7.0.0-canary.8fa22aacc.0_1591639489101_0.4234997191024934","host":"s3://npm-registry-packages"}},"7.0.0-canary.21c4e4ed8.0":{"name":"@material/button","version":"7.0.0-canary.21c4e4ed8.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"326d546ff7b424e3c946ccf4e20b843bfcba621d","tarball":"https://registry.npmjs.org/@material/button/-/button-7.0.0-canary.21c4e4ed8.0.tgz","fileCount":26,"integrity":"sha512-CA4pDKY7YrUOa9u1RwCNf7ZZl3AhbB2Q1qSFt8JAr7dYEyT+pvLh3rHHvz0BRDWjYZ42ImQJ492wV98vt+dfog==","signatures":[{"sig":"MEUCIFt45eyrnrhxzKllbtE6mERrAu2hGVrNAEpuvxIWVHPJAiEA5fEkklV5dqlMSTpc7ISDqrK1zNCfElfxczAJBNL2sbA=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":386420,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe3ocSCRA9TVsSAnZWagAAWo0P+QESUG0HVyGjDRQWYR5R\n8xg9Ev+jrK38I7+8hXu39ajKNe/m33MH+z1x6vDEt+BCPn2KbiJutTUe6FQ8\nbGyVFijoq4aA0g9SLq+9vYxjGfmR9MHIfpLvt1ntDhQmUKLNrXDkWwO1FX6z\ni62U+Qdn/p1sI6DIBVj5GRNeQ2fztfAj++SlIcu5lDY7lScy7H1d7S0yn0eI\nVOnJO3Cu9uoyBIVi8xA2KXOl81PL45JlerATG+KconWF3PpzI/HHQpGmQGvH\nFGBe8+aRJGSsSTPYheNthjPAHRGKxAd7NWdZB2kvPDXRT/na5x64c6wRxbdP\nxjdeA2X1/RujNQxpuRpwS7P4dWH73VRcXdcwPsm2kFPyHWsArqWft7Y0YpVt\nqsnAAI1bdNk0lZ6J8hPlkXvl3lwsp1Ik93XTxcxOimu+jnPVo3AgxizUbHQC\n2t4ccwekdbj67orTzC2y5eHkFzsXBZo5F9wB7DGcAPsLmQ4tHh3vvIpTnAc9\nNgQivN9qgl+/EJ5na3d44Cgo4LuLkwAS1c7E63hAGbHdbYqqUCEGCca5cbQ6\n95dJstQfdk1dxJeAmheLSv9IRgrBMlLQIaHCTs8qCAnP8ZaIjnQ0LXZojLK0\nreCxlrR47S1zvcD+KwDhywFANFEPQwkB5ttsTqtMZdh7VtMAVzBrgs1u/sVy\nL0A7\r\n=ePeX\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n#### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note**: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n> _NOTE_: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n\n **_NOTE_: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommended to\n always include it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color)` | Sets the container fill color to the given color for an enabled button.\n`disabled-container-fill-color($color)` | Sets the container fill color to the given color for a disabled button.\n`icon-color($color)` | Sets the icon color to the given color for an enabled button.\n`disabled-icon-color($color)` | Sets the icon color to the given color for a disabled button.\n`ink-color($color)` | Sets the ink color to the given color for an enabled button, and sets the icon color to the given color unless `icon-color` is also used.\n`disabled-ink-color($color)` | Sets the ink color to the given color for a disabled button, and sets the icon color to the given color unless `icon-color` is also used.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color)` | Sets the outline color to the given color for an enabled button.\n`disabled-outline-color($color)` | Sets the outline color to the given color for a disabled button.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web button component","directories":{},"_nodeVersion":"10.20.1","dependencies":{"@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/density":"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/button_7.0.0-canary.21c4e4ed8.0_1591641873799_0.7416035734254631","host":"s3://npm-registry-packages"}},"7.0.0-canary.dfde46516.0":{"name":"@material/button","version":"7.0.0-canary.dfde46516.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"b055edc24bb2c80faaa8e6a78d7a36a23d235be7","tarball":"https://registry.npmjs.org/@material/button/-/button-7.0.0-canary.dfde46516.0.tgz","fileCount":26,"integrity":"sha512-hTBiwVRjvR8K7I4lrvV6lnO0vioYptZmMQlTTztTIycW6WQLaLWO/6ipRYOQ8vGGnGcfO1WP04ngYW0s5DZ2kw==","signatures":[{"sig":"MEQCIFd5ZFE/BLlwvH8lK1+fSmDXxTVKVJwXNzIKerRB08aJAiB9kBEsMd10e/3o0mojLGGM7YyVjGg/t03iIooSezBsOg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":386420,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe3pSUCRA9TVsSAnZWagAARowP/1zKd3mc76qpuGx7xve8\netPNdc+Tds3BjZJAxBw2geEvIFHwazbUzElTvB1Iio/ceO0qYXxB4LHgTrfF\nXQ3x81WZkVVfhwtCaf7k8ROnl03NY9XwIfIsBd7ldBKmwbG0PoZS6j+37rfj\nEN+jILLFdpowUo0oKcbeuPNncqBr4sx9QNX5W9Ck5+ElxMvypueAXdtWafEg\nBJ8Fm+YxoyqLG3uBzZqtVsLrUl7yxbIfDiBCVjlzi3YPpxv1/AOfn7z7ibkG\nsHQJeiX+Le+TmSbI6CwJnBfaS+uaeaQARIwOHwW8kuOYAbv9jehzE6DjExSH\n60V20yJDoFvX7pcOa9WgUpMGRmZsojsREzmZTAEqZNaSBFVdrDpDyTcMG5K8\nnZNDpipcYKzMJAMV+KtYq99EfQ8Gbal94I7Tg0Zr31osak4T+/AR7Yj+Pp2h\nPV8ruS3MR+lwGh6nNmz9+zP8MEQWqP22zYxTIm5aqC5Tuqw0XMqwkU45L+v/\nbzRYz6MsFQ8utk/oPqfalexxWV+j8FZ5a5Nokum35c/kQK16qmXIc8FG9WHM\nU39yoVyVOk32j/el+K2JVaPwlHJU93eYU6kI9h8sIa659lgmcznJm6z1I6mw\nETPiqQ+dSCiaqW7XVMjzS9Z+E0k/NFxuSjuupI0i7m2NQUUFqjmESfSAGClu\nnQoF\r\n=0Fro\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n#### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note**: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n> _NOTE_: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n\n **_NOTE_: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommended to\n always include it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color)` | Sets the container fill color to the given color for an enabled button.\n`disabled-container-fill-color($color)` | Sets the container fill color to the given color for a disabled button.\n`icon-color($color)` | Sets the icon color to the given color for an enabled button.\n`disabled-icon-color($color)` | Sets the icon color to the given color for a disabled button.\n`ink-color($color)` | Sets the ink color to the given color for an enabled button, and sets the icon color to the given color unless `icon-color` is also used.\n`disabled-ink-color($color)` | Sets the ink color to the given color for a disabled button, and sets the icon color to the given color unless `icon-color` is also used.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color)` | Sets the outline color to the given color for an enabled button.\n`disabled-outline-color($color)` | Sets the outline color to the given color for a disabled button.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web button component","directories":{},"_nodeVersion":"10.20.1","dependencies":{"@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/density":"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/button_7.0.0-canary.dfde46516.0_1591645331997_0.7896663120149847","host":"s3://npm-registry-packages"}},"7.0.0-canary.05cc5c206.0":{"name":"@material/button","version":"7.0.0-canary.05cc5c206.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"e08d4a09c6bd659604edbd1470a453fad7fdb591","tarball":"https://registry.npmjs.org/@material/button/-/button-7.0.0-canary.05cc5c206.0.tgz","fileCount":26,"integrity":"sha512-cWvEGVEwdHQEAEhyCwnT7fKl5jDRPnCfbipGZ7pUlvR58aYaf+7X2Lli+BWQQPRGmfDKbgFDrXTpuST/GNntlw==","signatures":[{"sig":"MEYCIQD+CnJpWiNimepMFRZGm94G5vQ3uMX7i930UfmO2Re9+gIhANaT/8S4bF09T/+ZcB8314FiybWG+F92p2PUgmK2hiKP","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":386420,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe3qY0CRA9TVsSAnZWagAA3G0P/jYU/wUNIK221NQkJgwX\nN/myWHI6FWi7P6pmk7Qnh3V9EIdTLi5hVoekDEzJdTZQLOFniS0UTA9/e/k0\nr3oTtBl1zRdX9mgpq3BOHVagh8Joexqk6QdSm42beMXvoqZITuk0JKWfcswz\n70RZHJByWZOcPxrShetWOAAf6FD8ZoTITe5/UYN9104uUH4Or81MrngteQhp\nr5xyz5bpYR0Q3Sl0SUiMrSXkoUNfRSYJ4aIlR2ufRiRUIUTh1yk7280U12Kh\nGlres/iBlMJSC/QdaGuOs6GWJ60O18UJu0cEvywBL4U5mThbNHb92JnZn/hp\nyDc06cnkkMXbhrtZd0qm6u8OuVbrYGcSHeNMm3sCekYiC41HPTViXLM2+cNY\n7ywkFyhbGA69qD5Obs719g5fi1x3xjsAieuBGoD7wlGQJze9ZnmsgkxOHtqb\n4eE+jqqhCpuWcQYHHmSg0oCk8nFEFypsCMQxaI5rfVL6uJKF9yBZJf4uOsI+\nNwllotb2NU+LfZUn/X4l2q6VyN6KJCuyZ4jw5JLzpy87Z3mni6KErwjVVIIQ\ny7HKD2Mvbtfyhdv8GqyiRmGaEL0DXAeE/drYmXQbq7GauF0uRJ1T+0S94bji\nohWBlq/KajaN+LsHfIaQc+cJ2HiniRsehlIs+4Q09Qh0XdRViZREV9iZ5f2c\nqryo\r\n=mHhd\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n#### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note**: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n> _NOTE_: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n\n **_NOTE_: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommended to\n always include it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color)` | Sets the container fill color to the given color for an enabled button.\n`disabled-container-fill-color($color)` | Sets the container fill color to the given color for a disabled button.\n`icon-color($color)` | Sets the icon color to the given color for an enabled button.\n`disabled-icon-color($color)` | Sets the icon color to the given color for a disabled button.\n`ink-color($color)` | Sets the ink color to the given color for an enabled button, and sets the icon color to the given color unless `icon-color` is also used.\n`disabled-ink-color($color)` | Sets the ink color to the given color for a disabled button, and sets the icon color to the given color unless `icon-color` is also used.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color)` | Sets the outline color to the given color for an enabled button.\n`disabled-outline-color($color)` | Sets the outline color to the given color for a disabled button.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web button component","directories":{},"_nodeVersion":"10.20.1","dependencies":{"@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/density":"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/button_7.0.0-canary.05cc5c206.0_1591649843895_0.07193899719746888","host":"s3://npm-registry-packages"}},"7.0.0-canary.3ee488f1c.0":{"name":"@material/button","version":"7.0.0-canary.3ee488f1c.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"4edc9ccdda92e7a309e8c5d94c3b45ec12a3948b","tarball":"https://registry.npmjs.org/@material/button/-/button-7.0.0-canary.3ee488f1c.0.tgz","fileCount":26,"integrity":"sha512-HvViQ3PNjKiQuBh96k++Y36w8/JJrx26wY/gXHQ+Z6+zB5N5FRmKVqfqF2vrTzhI/fYJUNQL4dfJH2T87E4Ejg==","signatures":[{"sig":"MEQCIAhtO1NLUKzUMgC+qXe2ub36BZqlUn8FLNE7EqC5xLa+AiBg/B+u7WyrHQeNHyTiv3TTAJUDD2SvH59NGetTHlwZ9w==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":386420,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe36KWCRA9TVsSAnZWagAAw2sQAKMi2322Kzgoni8LcJDO\nZHzTNOXEEG81Ty0bw/yCqQnWwOpp8Qqu+b6jMvl23FD5CbboUTYccCr7EcMA\nQVif5so3tb0b8pGDvwPlkCGqan/yVKlFcl5zd7fmbDbhsqZcqMgcZAnace1G\ntt0kasl3whQrK+snyfJn5v1gvVlXpR58BIXsQIW049XMTnVDC3KTFmiw0IO+\n/o0bVAPmOXaaOeK+TIkgPt8kA5fluGSJ8Av/5mTjTO8Fguot15JsWDvn4OHe\nPIjgGDlJ1u+C829zf+ru92u/t1iz2pstYFR2ZcdBqpwsh9OCBISThjCeovRn\nMJSrQN1pU1tQPGZ1j6ridPsjS7aotjbPi6KHVhCEEgJYmM4FMANZRc+glXdA\n5+m1U1DCl+1LBcFlEqVRhtY61susIyBnAjzZEUTEkIt36r2+pjZ9daplrnzz\nNJWw60AwAZbpPZePaYbeAJOVALXCKvrriMEB9c+06q92agECLLldSpMH3heO\nlJei5LDn3Oz6n0TgaoPZe55PivkoeKnSmuB2kgKgESA2B2fq8vl49vd6R1ao\nXgIQxzLebBHQtnNdlaseXBj1tVc97uW7TQIA1xRIk7pU7fqykhPGBVVmuZv5\nyjnCQUHRKiLONKAu4H4CMpFR6KArYsFvBNh6ldo/RTawpenZPaXPSgglMLV0\nywkH\r\n=X+c/\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n#### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note**: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n> _NOTE_: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n\n **_NOTE_: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommended to\n always include it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color)` | Sets the container fill color to the given color for an enabled button.\n`disabled-container-fill-color($color)` | Sets the container fill color to the given color for a disabled button.\n`icon-color($color)` | Sets the icon color to the given color for an enabled button.\n`disabled-icon-color($color)` | Sets the icon color to the given color for a disabled button.\n`ink-color($color)` | Sets the ink color to the given color for an enabled button, and sets the icon color to the given color unless `icon-color` is also used.\n`disabled-ink-color($color)` | Sets the ink color to the given color for a disabled button, and sets the icon color to the given color unless `icon-color` is also used.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color)` | Sets the outline color to the given color for an enabled button.\n`disabled-outline-color($color)` | Sets the outline color to the given color for a disabled button.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web button component","directories":{},"_nodeVersion":"10.20.1","dependencies":{"@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/density":"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/button_7.0.0-canary.3ee488f1c.0_1591714454117_0.9985027497436978","host":"s3://npm-registry-packages"}},"7.0.0-canary.b83d720ee.0":{"name":"@material/button","version":"7.0.0-canary.b83d720ee.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"670accc3394eee51b65869219cb3338bd2290c56","tarball":"https://registry.npmjs.org/@material/button/-/button-7.0.0-canary.b83d720ee.0.tgz","fileCount":26,"integrity":"sha512-aO8yp1OKkwS0/G8B1onkOI1yMHciUKYqQWoL0WajxPo62wqwVQC2kmwv0JkK+ptoia9Cn0sJ7N2Tq40Uv9iihA==","signatures":[{"sig":"MEUCIDuVztGaUsxT44b8+4787gUm8mngDWbJZEMpm4BgPGkgAiEAtP3gkdrfG557BVVEiuO6b0zDaunOLsuhBLcgw9kbUEE=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":386420,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe38ZGCRA9TVsSAnZWagAAnzoP/iKYSnnQvy0mhZhEhuW+\nRy97kps9sPHwoX7wPONDxhwJZD+9ZklF3XC2QsSGafjISBn9b2qrgtS8Otxp\nY32OhZ+cR7XnemaAC5Eu/WIxqIkzhxL2V6hVJ/kyg7LxrRChQDYT+BxQ1YQx\n8TkOBcFtpLR9sohmWtuSGn6/CddSPYNDHBtO3Och5VqGMhMeKbw93UMrRpsG\nRqajR1CQyUzZlcC1n1Q294UgLAqk/GD793IRcdjj07qfqWsZsM8dw2DUeCo7\nMVeahXioGq3F05vJpzJk85v5HdvBKncc96XqxQ894Ir9AyfTnfaZBG7dri3r\nhhAx8vU501t+uFE3+Ens/+/4DY6EJU0lRxqbZdTyN1XP8C2uCsf824BpTuvR\n77PvDAl1sUe7erYSb3S8IgLpwfY+GAOCwn2Q1Gnyuy9k9iNtTDTp8GSHcHC+\ndqvS+QNJR3XYIRh+KTFCrPWiWPj/K5IL/oGLvF65I1UJTxvZPeXIG8GlMe7v\nVrxgosimgDD2DsZUMJK0v7p425I+uJ9Sj86bp+QCIA/1XlIb6YPEjjryCVZx\niLuSUzpa+MgxYkQkXpX5CBP8hXPgMZ/PjJcqLswriAhCZLclS75ATIRWiVPH\nPnNeLNDUWUDr5mYjn/4FKJQxRPQPw21g8kcsyy77XuKIHzGQYqY9CdvERxEq\nMrEt\r\n=+rQg\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n#### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note**: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n> _NOTE_: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n\n **_NOTE_: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommended to\n always include it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color)` | Sets the container fill color to the given color for an enabled button.\n`disabled-container-fill-color($color)` | Sets the container fill color to the given color for a disabled button.\n`icon-color($color)` | Sets the icon color to the given color for an enabled button.\n`disabled-icon-color($color)` | Sets the icon color to the given color for a disabled button.\n`ink-color($color)` | Sets the ink color to the given color for an enabled button, and sets the icon color to the given color unless `icon-color` is also used.\n`disabled-ink-color($color)` | Sets the ink color to the given color for a disabled button, and sets the icon color to the given color unless `icon-color` is also used.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color)` | Sets the outline color to the given color for an enabled button.\n`disabled-outline-color($color)` | Sets the outline color to the given color for a disabled button.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web button component","directories":{},"_nodeVersion":"10.20.1","dependencies":{"@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/density":"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/button_7.0.0-canary.b83d720ee.0_1591723589074_0.04524103154432901","host":"s3://npm-registry-packages"}},"7.0.0-canary.afb1c11a9.0":{"name":"@material/button","version":"7.0.0-canary.afb1c11a9.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"74c68fb84f2c82ae53771864b54df3453e6b0364","tarball":"https://registry.npmjs.org/@material/button/-/button-7.0.0-canary.afb1c11a9.0.tgz","fileCount":26,"integrity":"sha512-ZGDzDlAw5HeE1gZXuoIXQfVCPkyik8hrux2fjUmzhSoK1Th5sfs5SkP3UsgVHQQuT/iT689hlHYKm20VtZbxsQ==","signatures":[{"sig":"MEUCIQCGp56hDodvydep4z81ftJt7Lno6kr6+xYGnAA837NItgIgQcms7wEbmdx+Bt/U9+L4Muiivo3wAqyJe2Nzb1hOEwE=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":386720,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe3+4yCRA9TVsSAnZWagAA6wUP/jc7oRVxCLdl0vAUraaN\nDa65bdRrzS2oQEn6iylDCwV+ybYfilfeHUf9Pq9mkh0lt90HwJhyZkxgscsw\nVDjCOEtrBHgWBfVU45HVR1UZOz/pvWtavM9PIeHXvJcHyEmu07tLTms4lRkX\nLtbusrTMFKeQk3C5iBNjiCSodLD+LVjEdT75FRkLMCB5Hpuvqq7naryQlk47\nJhiofaIOXyghDPXn/7YtcIB4nC5ApmuayL0N+w/myn32yzIizHw/WONyUpbW\neVwup0+SIrfWFE+jBYeEtyi0G4g5+rVzTYnPFjwsHbp8t7nDsE7btySxtUHG\nr4RZoK6e8FSSbNOOW08vtubJ9rZReE3GcNmFRleeq1yEoia+AyEn+m3zzS0H\nsfLQr0Y13MIKr+VutvrKcngQG6hZWZCi6nJetk3eCB0Y8YITankfaLHPJl1T\nBymTPUhHi0y+b2issy0RZ1Cmv3cLzVRRJnl/W7RXdgYLmplbMbvmK7qaWymm\nhBsST23SbSb1kkMv0UhzsW4yLFLgmLDms+jQEGYpqpUX4LKzKYUb+MUlNXhg\nSm+WZ3Xf+lZ2nIm1vQDRTnFChLeP4gasiNnkfd2aK8o6HSSNjO8/yIqImx17\n5rvduRWbLHXLYWKQq04g4Z7oe2mk9swQ85UiLSabN53RHY1ASKr0SG4mONlW\nH+7C\r\n=K1Ig\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n#### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note**: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n> _NOTE_: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n\n **_NOTE_: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommended to\n always include it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color)` | Sets the container fill color to the given color for an enabled button.\n`disabled-container-fill-color($color)` | Sets the container fill color to the given color for a disabled button.\n`icon-color($color)` | Sets the icon color to the given color for an enabled button.\n`disabled-icon-color($color)` | Sets the icon color to the given color for a disabled button.\n`ink-color($color)` | Sets the ink color to the given color for an enabled button, and sets the icon color to the given color unless `icon-color` is also used.\n`disabled-ink-color($color)` | Sets the ink color to the given color for a disabled button, and sets the icon color to the given color unless `icon-color` is also used.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color)` | Sets the outline color to the given color for an enabled button.\n`disabled-outline-color($color)` | Sets the outline color to the given color for a disabled button.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web button component","directories":{},"_nodeVersion":"10.20.1","dependencies":{"@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/density":"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/button_7.0.0-canary.afb1c11a9.0_1591733809893_0.016094596212895995","host":"s3://npm-registry-packages"}},"7.0.0-canary.39e6f71e2.0":{"name":"@material/button","version":"7.0.0-canary.39e6f71e2.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"dfcf5a10378ec68abd748321a325e191972b7d4a","tarball":"https://registry.npmjs.org/@material/button/-/button-7.0.0-canary.39e6f71e2.0.tgz","fileCount":26,"integrity":"sha512-yk6WzvXbdrQfEhaBHZPtqAZtDz59rGI/8FD5Y7Tz4YrZNHUi4ay83HlfIcOXX2E7yha6vgPWE0jYJ31+GaB0Tw==","signatures":[{"sig":"MEYCIQDXluNSJfIepjYTtJ8rZ8miCFwSuzYT2GvJfk0lNaD6aAIhAO0ZmEdFOBJRLxbEfqkGMhbTuJF5aj0TUaEaiC01UEPq","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":386720,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe4B3RCRA9TVsSAnZWagAASU0QAJap7uykSnGT1hblLrTp\nLbE3v+xiYdIzNC+b+QyPdth+yDBxDeJRK009ha0f3qyHOGPiVDfylr6f+yFK\nLY0YMHjYQRCgcv1o/QDYovaMbHr9hT/Had5e3VwVS5v+4oPJGVCxlGP6O0M4\nCrfauBraS+JGtGtaQWenbr4vJTbrGNzT3731f0tdJRqf1MrNXfppGxXwdruc\nur+I8pFRBgSc18HT95xUc3YPsiwWiSp/H/I/GQl/sYlzK+QkKuDCYEj5x+hF\nnusmlK8GntOMX/y6BUVw8yMXaOvF7ROmsKWwQLLjxjeDX229Nqx/9Br3mfML\na/Y49nRO2a4Z/fqbUreCvKserHt3vKILtulWc2DVeMGvpL+TFfcmbfEBkagD\npcaXNy0cZr9boy368O60FeeAEWNsV4z3L3vfqCEZ0Y7/AvjVWi+tC06b61h/\nXPk+0zoHtXveFTYjL81x+ZQxsiYpfDVHw0/zNOY9sxdVo4eYdmaZzuk3sUd1\nmTY9umULzxUAYb9Fjv8k86IN7UgF+jyhicq9+UKV8Ziz0lunLesghi/UHcY5\n2SvIjFT0F9YW8LoF0vNbBM5aMPF8iRwMUQNhHfoqC3+JBR2bf1q80GZX4hAE\nB6OAof1QlTIBhWx38Oqh4LBgBMrIFNwnwnOZNeSGyMHX+8tt8ZY/Y2sj8Fdp\nPmL6\r\n=uC8T\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n#### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note**: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n> _NOTE_: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n\n **_NOTE_: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommended to\n always include it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color)` | Sets the container fill color to the given color for an enabled button.\n`disabled-container-fill-color($color)` | Sets the container fill color to the given color for a disabled button.\n`icon-color($color)` | Sets the icon color to the given color for an enabled button.\n`disabled-icon-color($color)` | Sets the icon color to the given color for a disabled button.\n`ink-color($color)` | Sets the ink color to the given color for an enabled button, and sets the icon color to the given color unless `icon-color` is also used.\n`disabled-ink-color($color)` | Sets the ink color to the given color for a disabled button, and sets the icon color to the given color unless `icon-color` is also used.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color)` | Sets the outline color to the given color for an enabled button.\n`disabled-outline-color($color)` | Sets the outline color to the given color for a disabled button.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web button component","directories":{},"_nodeVersion":"10.20.1","dependencies":{"@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/density":"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/button_7.0.0-canary.39e6f71e2.0_1591746001377_0.9430867167862935","host":"s3://npm-registry-packages"}},"7.0.0-canary.d4c66dc7d.0":{"name":"@material/button","version":"7.0.0-canary.d4c66dc7d.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"7ab00b9df305bfe09d818cf227de7fc0e94ad753","tarball":"https://registry.npmjs.org/@material/button/-/button-7.0.0-canary.d4c66dc7d.0.tgz","fileCount":26,"integrity":"sha512-vwt2EjKiHgaKnn/VTQIKpeaNJ5fPGvWDTxqfVG8Eo3mzfTucMWYOlmdNTqjUI30gBviAdyTRsPWOqWsOHQD4Kw==","signatures":[{"sig":"MEUCID+fg/EdKEcNtdRy5w9LuREXlvkJiW15diKh6fqiuvWPAiEAjJRB0Uk6oOoKdgJNoLpl3ZGzV2H9H0yMxl0Xz+QzEL0=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":386720,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe4m4TCRA9TVsSAnZWagAAFFcP/RguaDwuj4uSFb7DdeUW\nD+vZlsUFymAWzhyjPCLvc5VqeadWObO3CzFjpUZsXKY+Tn9/Bigw26pqCfN6\nUb/9KSDLTQpA7e5+fmneZBqpeIEjy6ziiCyr+ngixoBquUaRHY16xE6lJml8\n7bJeevUlf487M4XXXha2yqohbcQanCW1gEbGZH+iOD671SnGVhYoRhu4+lbS\nVxVBkBbppG8ktRFIgFYFlcStGowUtIB6ItmktBHN5XRfSEtJyQ+1r0xnYth9\nCBgldnr0PZHei6LOiIc5tqYhn1emCimuJ8d8ouXtLBmsO5AprdAzRa8kBR6o\nYQ46SpmXUiYR1HTgqeVRXmqRtp6WZtoHHR0fr7J8LGIQO7BD+rmeGQfFVJOQ\nOWDpKYw0yqa50+29n3NQ8SzDxgn4SrB3/UofcMavPhq5/wqoxC/mSABz5GnL\n0aC+4ChyROzrhKj0l84yxbJSYU2ZrN51NZtziKXXyMAno+0AmufPQ1rHVyrv\nIoCsucFoNEh9f7YzrDoPv068MD8+SQj/z94m3JcEaDKfd8xrYKuCELVA2Iix\nyQAQYl44GLoty+CAvdXtEyBG9KJqjp21QKkSGrvixWTM6S3iMksDFVnzGTUM\nr8aTHhQ93Euqx9yTkjnquv1RdY20xvh5m51UnwsMX4X7L5N/p+IzzfwBcIfR\nBvTl\r\n=L0lO\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n#### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note**: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n> _NOTE_: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n\n **_NOTE_: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommended to\n always include it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color)` | Sets the container fill color to the given color for an enabled button.\n`disabled-container-fill-color($color)` | Sets the container fill color to the given color for a disabled button.\n`icon-color($color)` | Sets the icon color to the given color for an enabled button.\n`disabled-icon-color($color)` | Sets the icon color to the given color for a disabled button.\n`ink-color($color)` | Sets the ink color to the given color for an enabled button, and sets the icon color to the given color unless `icon-color` is also used.\n`disabled-ink-color($color)` | Sets the ink color to the given color for a disabled button, and sets the icon color to the given color unless `icon-color` is also used.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color)` | Sets the outline color to the given color for an enabled button.\n`disabled-outline-color($color)` | Sets the outline color to the given color for a disabled button.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web button component","directories":{},"_nodeVersion":"10.21.0","dependencies":{"@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/density":"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/button_7.0.0-canary.d4c66dc7d.0_1591897619390_0.46804372339484934","host":"s3://npm-registry-packages"}},"7.0.0-canary.be4a19f9f.0":{"name":"@material/button","version":"7.0.0-canary.be4a19f9f.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"09e298313c945a41843c6b0aaaec466220c2d395","tarball":"https://registry.npmjs.org/@material/button/-/button-7.0.0-canary.be4a19f9f.0.tgz","fileCount":26,"integrity":"sha512-Qve+ijwjQYygvMGQVzIcXRK6JzpPlFYL51IVcnTg3iD37tDVEXALLH4UOeO0fkzqElMsnpO83dkAobjtJ2cpZg==","signatures":[{"sig":"MEYCIQDonSbK08lMGMf8ijaH+cTRhuJIBaJIfcK506qsB4MY5wIhAJM1BRHZY67gAIEn0Dl5VnBSyiouORdL1PsE43yhlpKS","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":386720,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe4xvvCRA9TVsSAnZWagAAVyQP/1tUPE4uLL5+R9xrUhsw\n08QYQiS5yvELTUygTEwnD6T55uwsFN639JjNmj/7q6Q7s1jWvlcyi0xfrhWI\n/Omzp5DuKv1XMhadKunWBG5QOhMXaXHm7jzmNZ/lmLZbfovbVrEyzy72kV3T\nPSWbtpbMWuIGoUvIkrRu72ClBYAia2e6yiuRCh4QGx14cKz6L4CiOcJchjDf\nhd8KfZ9fBG2HLPk+Zv7+i1lYrihPxqaqZHxtJwd+Z63+XVaWSWYCfnNVEX1h\n2qbKPJMSbsShpqZ0Uu48hkt5hxBHQ0rwBYSwyjvCGzwyKzg95vy26VGeKV+B\nFkjzlbJ10TTPe/IbB110XJsWx08YOFGI77oiMYG5oPckbZzqHZ8H1sxtFD47\nu3zXuM9KyOQegapxAAxr59f2r0dQhWKY9/uVYDzfI5kIxjbWkxko45jkUVuB\norhvA/tDyZimqyN/0Ay8hiw81Nc9ZLNQd6+GBfKgtk6Wd2CxeQRper3cMT3K\n0AeR827xH6dahlwPNCo6rJmvTanNX4Ga7SIhQwM5uZ9MwwXBK9hIUh4IuRrn\nt9wWDfhIHmXcniM6G/4wjhHFhtxpotiig0dmlBzcPTeWg/nAl41K3DZwwXC4\nbEFQAYodKJZtTBqYYMo795XRmxIdCf6yvAsbLtvE7QXeJX/VKw8ByCgB5Rzy\nxcEB\r\n=x30K\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n#### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note**: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n> _NOTE_: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n\n **_NOTE_: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommended to\n always include it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color)` | Sets the container fill color to the given color for an enabled button.\n`disabled-container-fill-color($color)` | Sets the container fill color to the given color for a disabled button.\n`icon-color($color)` | Sets the icon color to the given color for an enabled button.\n`disabled-icon-color($color)` | Sets the icon color to the given color for a disabled button.\n`ink-color($color)` | Sets the ink color to the given color for an enabled button, and sets the icon color to the given color unless `icon-color` is also used.\n`disabled-ink-color($color)` | Sets the ink color to the given color for a disabled button, and sets the icon color to the given color unless `icon-color` is also used.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color)` | Sets the outline color to the given color for an enabled button.\n`disabled-outline-color($color)` | Sets the outline color to the given color for a disabled button.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web button component","directories":{},"_nodeVersion":"10.21.0","dependencies":{"@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/density":"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/button_7.0.0-canary.be4a19f9f.0_1591942126974_0.6585934260782476","host":"s3://npm-registry-packages"}},"7.0.0-canary.a6ac8f629.0":{"name":"@material/button","version":"7.0.0-canary.a6ac8f629.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"991c2dfff9e6f492cc88aa90d216db56730fc488","tarball":"https://registry.npmjs.org/@material/button/-/button-7.0.0-canary.a6ac8f629.0.tgz","fileCount":26,"integrity":"sha512-WU5e96qZCZG5dtUfnVO4W5AJtFyEGebwIAzpw6fV9Mpf0PtM4p9n40ekbtougy8ZPSv46iz8jrqGDJB6JU7Q2A==","signatures":[{"sig":"MEUCIB/clJWou/ogUnelbnyppJBH+93zKPXmNiJCvy9Zq+aNAiEAzUPN1I27rQiXI63RW0rnFOiZ/WwjCmDdYnRhDANrya8=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":386717,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe5+iXCRA9TVsSAnZWagAA8jAQAJaMlnvtmO1hpLxhV8uY\naOAK6cR8p0RCQvLKKrIt+rgp76/yu0QkK0aIhpTjRp12ANgNlUZQ+XgiewWX\nI4LyG/+VyQxtACgTe99ITk6ipUhSHQ1TqCVMfV7ql2WwlZKenr/LH3+DbGn6\nduLxQbQqnQRI9a4EeqWJZQ9ttb2JxYxtKhB57EhrctWuWjS0zRJ9tfTzfO0Q\ntwy992qIo33rYnYoQWP8Tdvl+860dFnc0/fzs7Zm3nYD4A/4PvgYUZmT6LWp\nReLQJRqklWcaFtIIoePWkSPgw84POpc7uOq+YzrabNjnbtJXXEMr+qTVTJeA\nfeIW8zQd0y0K/n8S37AoETTlygekBi/Ih2X6bypBbbReKkAwAKNr8tTxBrJt\nv8030SeRTgVLjZIAa/pSfPa/kHNPw8uyoO0KKr4V9FEW6h5RB+jV6pYeYaD4\nCbWgCsCZFmGTafVlvxfvY65aBu5ymwdclxuKBlAgyKJjiTLpcHg+Yr4Bvumh\nvmL6S5wpFIWl8fgVKzwIXb34PI/8ZNwxpPcAqSWn7ebtgOCHsRGABVU/3pcz\nqOclmcGW7afcammKOT48itvYbt+LWnkcpaZXlp+LrtAgDLBOF2+Z1LKeBmmK\noSG/UgQQ9s5WL4gihRto2ftRF4eOSqZXUlbWpxZkuNhN2kEVzriA2khpYkJb\nrtUr\r\n=Amhp\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n#### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.**\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n**Note: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.**\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n\n**Note: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommended to\n always include it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color)` | Sets the container fill color to the given color for an enabled button.\n`disabled-container-fill-color($color)` | Sets the container fill color to the given color for a disabled button.\n`icon-color($color)` | Sets the icon color to the given color for an enabled button.\n`disabled-icon-color($color)` | Sets the icon color to the given color for a disabled button.\n`ink-color($color)` | Sets the ink color to the given color for an enabled button, and sets the icon color to the given color unless `icon-color` is also used.\n`disabled-ink-color($color)` | Sets the ink color to the given color for a disabled button, and sets the icon color to the given color unless `icon-color` is also used.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color)` | Sets the outline color to the given color for an enabled button.\n`disabled-outline-color($color)` | Sets the outline color to the given color for a disabled button.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web button component","directories":{},"_nodeVersion":"10.21.0","dependencies":{"@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/density":"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/button_7.0.0-canary.a6ac8f629.0_1592256662867_0.4971621654152203","host":"s3://npm-registry-packages"}},"7.0.0-canary.9833dc287.0":{"name":"@material/button","version":"7.0.0-canary.9833dc287.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"4e950df370ef93d42fdea27214686638ccb1fe3b","tarball":"https://registry.npmjs.org/@material/button/-/button-7.0.0-canary.9833dc287.0.tgz","fileCount":26,"integrity":"sha512-sffCG7H2yK10ltO/sRuobm/bkz3cgB4Qem8VjXo/fhj6IREACLvaqc95vXLKMtXITwNQLB3ejDzq5iu9ukkAGw==","signatures":[{"sig":"MEYCIQDYDA4BcbQ4iy6chsfggVwuNFM5ZtFDRtFhLkNJRiEJugIhAPv/Ay9Ftx2zPAXQkxWohgPoNH1Bn/AUnwadijoLLfsH","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":386717,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe6SJXCRA9TVsSAnZWagAA/N4P/1J8yidsY0Te1A8/xfZg\nTwyVAlK5/dl6T+7x+RtRPfJS4CD3H8eWjXHqluFUwR49KAF5Dm0J/tVoC6Br\n8Ni/fZPk96PWKO09lHGaG+0cB6w4AQ2AS9f85Qqa55Wm0ncFoJyZX4jb8F+5\nkMQ0Ld4NCb+BMvfuwv1CC9tXGQBdz2RQKq6kiuuX4H3AxnybuWru9IUow9O1\n2KGBZEkLiGGS2ZQD8+6mraPKNS4aAFdpnkwEg+f/uGZ6Pq//7CZVrMB9juTU\nfXWxzwNJ2SSy0DU0qa9TKxy31pbGFC42YQn9uBgdNJXEj/30pLYtjX9qGpY3\nH5KuH8YySiJW4hyjTTxaahhGh+5W8ZLJHU8pnK9/aOGQqYs0K46a5iMWuICc\nWfpE41/MwU54AuMBTUT/AO114utb0xEkDnCfPBD+mauXkeK545Yv8APTvES3\nPR8AXXEzuTvtZJWtxT9lNDjjelknQ9hVNF+4qjDdUiXXNHvnW9Eo+gh9ZCRm\n+sa2hm/W2vN5Im476W44B4MGELLVxWOn8VNlZWe1AIPw4F+IZRzsTPNU/U+G\ngKt8ViGR5Nh7tUpGgTWPp8DYlrXlDBExrmk/MqhhfsC4weQ4awLRGrfNE1IY\nF2f5uwiZDjAn4RNfq4LjAOu/ou7CytmQSQr5TtHZwXd1yCvNC/NyrNYOpYdk\n2Mef\r\n=UfDW\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n#### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.**\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n**Note: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.**\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n\n**Note: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommended to\n always include it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color)` | Sets the container fill color to the given color for an enabled button.\n`disabled-container-fill-color($color)` | Sets the container fill color to the given color for a disabled button.\n`icon-color($color)` | Sets the icon color to the given color for an enabled button.\n`disabled-icon-color($color)` | Sets the icon color to the given color for a disabled button.\n`ink-color($color)` | Sets the ink color to the given color for an enabled button, and sets the icon color to the given color unless `icon-color` is also used.\n`disabled-ink-color($color)` | Sets the ink color to the given color for a disabled button, and sets the icon color to the given color unless `icon-color` is also used.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color)` | Sets the outline color to the given color for an enabled button.\n`disabled-outline-color($color)` | Sets the outline color to the given color for a disabled button.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web button component","directories":{},"_nodeVersion":"10.21.0","dependencies":{"@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/density":"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/button_7.0.0-canary.9833dc287.0_1592336983171_0.20230936122139775","host":"s3://npm-registry-packages"}},"7.0.0-canary.3aa33998e.0":{"name":"@material/button","version":"7.0.0-canary.3aa33998e.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"599fe1506ea9cc032d101dc14023b6f4367e41b5","tarball":"https://registry.npmjs.org/@material/button/-/button-7.0.0-canary.3aa33998e.0.tgz","fileCount":26,"integrity":"sha512-RlaT9sGbWiLitIXoR06g30nDdsGHDY5lbB3RyXmJESjevXF8fSBOWN5Na7emgwGnN0GRtRDPpz52uZXo9i599g==","signatures":[{"sig":"MEYCIQCVbl8PtKXajfsrstUnwwK9TJUCIo12qWpjAviwO4/wnAIhAIcrvPw+WJYCeZ+HmFvRCdRnA9x4bHiE8dY7RHo6wM/t","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":386717,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe6SnXCRA9TVsSAnZWagAAsYoP+wVV3Sci7MmKx1GBv7Uc\nJlTIfc1fiPrNJY5oxHiQDHHuSQM257JiWPNUZPekHjxwL+RZLajjmwE8X6F6\nes+HwrJzVUxfl33Z4eH4PiqxlluTU/5uxegR9SQZFGkNpteHRuNCDlwVbJ0+\noXxITm00KYTPpSvckeTCmY4ZwUuoFNsl0FoWcF5SMdKMHX7pXOTiBqW9yco4\n/IdmITlOlbIfxqVeoSuwZT+wWI80JqMK5g/R8eIUbCg5SPdAyTxxgmBuiP7f\nVQq1SzjTkNmjhFcUVCxt7xaKvvpFjDjgJP5vsI3AzhuZuBD1/1huOdR5MtzN\nFwMm568yhkcDa6uccbtvJsBk1u9prsBw+zu2wMNRph/DhLHbZkhcMIkwwjXa\nOdsOt+ngLzGA4iPtm4aMYHXqy7U4VXoh6UU3/gUkGHC0+lpFR0JMJ2PpXRWR\n9SnQp8kQ+0+TREDAsT29bYsEmWDrqRTSExqJ1K2OQJBcm1dxrsn5zJZ1qV5q\ntWNCJVY6u1iMr2ER35HveAN9MwYe0AQK/0ofNTPxJ+sjlRKw4fP/FcxWgN0M\nlYV0SRkIT15UMuGdMUe4OYcy9XFC4CG9XU3Spk1iL5d0lcGzFCXeidmqfPpU\n/TyrXzhvNqj81yRILyjSLUbNQTYPle7P50Xrbye9F9iYPtxPkp7rosGvdq/j\nySDC\r\n=e9uW\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n#### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.**\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n**Note: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.**\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n\n**Note: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommended to\n always include it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color)` | Sets the container fill color to the given color for an enabled button.\n`disabled-container-fill-color($color)` | Sets the container fill color to the given color for a disabled button.\n`icon-color($color)` | Sets the icon color to the given color for an enabled button.\n`disabled-icon-color($color)` | Sets the icon color to the given color for a disabled button.\n`ink-color($color)` | Sets the ink color to the given color for an enabled button, and sets the icon color to the given color unless `icon-color` is also used.\n`disabled-ink-color($color)` | Sets the ink color to the given color for a disabled button, and sets the icon color to the given color unless `icon-color` is also used.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color)` | Sets the outline color to the given color for an enabled button.\n`disabled-outline-color($color)` | Sets the outline color to the given color for a disabled button.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web button component","directories":{},"_nodeVersion":"10.21.0","dependencies":{"@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/density":"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/button_7.0.0-canary.3aa33998e.0_1592338902615_0.2435279023691257","host":"s3://npm-registry-packages"}},"7.0.0-canary.d2b54d183.0":{"name":"@material/button","version":"7.0.0-canary.d2b54d183.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"38df8d3c11f8e1acb9e14a99da5a784c95adf35a","tarball":"https://registry.npmjs.org/@material/button/-/button-7.0.0-canary.d2b54d183.0.tgz","fileCount":26,"integrity":"sha512-qiWtTL7xQVEiw35ciYKWK3gB442G3cI2cn7/bxkkTMqy+olDc6T8rCCwNMZoBLn7MHGkKn8hBBAMnHSJKeom3w==","signatures":[{"sig":"MEUCIQC98jWqCkh478R68Ow2bqLzemwY5bMqeKN8VZrZztNMmAIgYg0RhEjTUJgMEPGOhYUknaQsanf5+G5IIfvBpns1ZQk=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":386717,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe6sBTCRA9TVsSAnZWagAAcgYP/0ranCMz3ORGs237ESHC\n07nkj4bUXzWPfasIhO51nSZeJG9gnc3ppONS6yIpBtdKuqASaXvrnwZlQScO\n6Kx3JTqV4miY/yfcSKVl7b7jLk3zRGNl2BcDzoaLrr3u08IDpc6zKC0spiwe\npvcPvv6JJ/zzCjeWp+rUlPQXVlvx9lWqiuDGNtl4wrw3G6W0ROeeC63pSE2R\nr4IJn6pedHgtVgWg6olHAxxi49W28YE7dwqadk59IC769MlzbLP+Qwuh9+Ch\n7Cge2m2wF3HaWZ9TSyCrSGdw6BU4Rqr9Me8N1F4012tX8fq9cJjJShvRyZWc\neoYWpMqSQLLLKfY6cHVQ5zIfmwFyR/+nwn6pi7uoRuzqsTybjhWlIRXv2SRX\ngD4wz2INP+DwY16QMJvJJZ+IebErfGg+JhdT45PKlSW5zI+/UXwtdbiIE0Ay\ncaWsTFp638M1256KanCVeVfsSlnTquPubilXx9pvv9cTuLUB8KKv+nTDu63d\nvwOtyXeLR0bMQ6bkCott/22JqitLkKKi89HcFpOlkXCbZcuxStmdjWjvBpid\nCsHcxZQCSW8/5tER9K/k3Qhfd6cx8+Q9gJImNoVz34jD844dsbjIFnHqhwXK\nFd48rfCLmLAgP/2wksU3m90Uqy0879knhlSbbA4HAuyUUEnDHJblwGU6Jhvs\nswMK\r\n=1Mu5\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n#### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.**\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n**Note: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.**\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n\n**Note: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommended to\n always include it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color)` | Sets the container fill color to the given color for an enabled button.\n`disabled-container-fill-color($color)` | Sets the container fill color to the given color for a disabled button.\n`icon-color($color)` | Sets the icon color to the given color for an enabled button.\n`disabled-icon-color($color)` | Sets the icon color to the given color for a disabled button.\n`ink-color($color)` | Sets the ink color to the given color for an enabled button, and sets the icon color to the given color unless `icon-color` is also used.\n`disabled-ink-color($color)` | Sets the ink color to the given color for a disabled button, and sets the icon color to the given color unless `icon-color` is also used.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color)` | Sets the outline color to the given color for an enabled button.\n`disabled-outline-color($color)` | Sets the outline color to the given color for a disabled button.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web button component","directories":{},"_nodeVersion":"10.21.0","dependencies":{"@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/density":"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/button_7.0.0-canary.d2b54d183.0_1592442963361_0.35534336318138693","host":"s3://npm-registry-packages"}},"7.0.0-canary.f2a488e95.0":{"name":"@material/button","version":"7.0.0-canary.f2a488e95.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"3dd907a29e691b4fd3d684b025e717b49dded106","tarball":"https://registry.npmjs.org/@material/button/-/button-7.0.0-canary.f2a488e95.0.tgz","fileCount":26,"integrity":"sha512-FUJ0Jg+MCaGD/gM+sGnI7iQot9zNPbPOi//swZ+brMJQqkVx6HCKaEv4gh4EOpW2US/XH/W6OqFXU/tZf4irPg==","signatures":[{"sig":"MEUCIFivDfbf48b7RRoebCllFwC0S4HVQwJIR8+L+88pvTx2AiEA4kL8ZOJxBOwfHuvSQm+T2UNQolSDybHJrwCmSI7yV5Q=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":386905,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe64KLCRA9TVsSAnZWagAAfy0P/0u+KBSdh/DZyybSDGbM\nQqpthxTAcufcCN79NJW2zFNK/A4zHgDZEgWW6gPg7VWK85Gzk3fQqh3p0h4y\nUb1SDLLAbGEN6oxX4njY7EAnCzvW0YU4gznsqIh6PoW7SDLDauxYVyZ74JHA\nEJVREJ3Z25kq5tftoChgOiILbLtxwl8k9iDjSU4ZiLZm4/Wv7oSAlZteV/99\nth0DxbYil5KE7Jo/RPIh3WcIFBUAo0VAzlQWD5fmrPPEw0DKs2+w3l+a8VlL\nl1OzY5rYL1a9RT0OnCjfhRRmSaIkiMXf+Zc46zWVYrfVSYKePtsz3UvagGRb\nOBO4o/zcrI4sTAaVakHrIx3WFbajj1niNCyp+iVDKJcY+XmsbwQplXOhiMKr\ne0IUBUsFIDzIc9QdYUKi1PXD3CuKIwzStn4MlJ8u/4tTt4tkyTiB6I+pC5ro\ngjaJdYjTNKEggfjReo0FkF3/i9svdaJzIw6vP1c8BddIg1VsG1GbbtfulJ1U\n382A+i3YarLzCiqc+D48jkKL7dOeFABPFZcf5tWZz/4YatTBYQfrhfmWbPut\nDa80KtLceqXbPN1UW1138RBNMSMmhmZhf67nS/EfMdNsDLay2Ppyrni+2kj8\n4dkEcI+xcPi60rReMP6Cwka67Dp6DNT/Qj6l8y99JFlejXMtr+tRmWSQo4HA\nVnz4\r\n=G6+5\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n#### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.**\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n**Note: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.**\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n\n**Note: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommended to\n always include it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color)` | Sets the container fill color to the given color for an enabled button.\n`disabled-container-fill-color($color)` | Sets the container fill color to the given color for a disabled button.\n`icon-color($color)` | Sets the icon color to the given color for an enabled button.\n`disabled-icon-color($color)` | Sets the icon color to the given color for a disabled button.\n`ink-color($color)` | Sets the ink color to the given color for an enabled button, and sets the icon color to the given color unless `icon-color` is also used.\n`disabled-ink-color($color)` | Sets the ink color to the given color for a disabled button, and sets the icon color to the given color unless `icon-color` is also used.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color)` | Sets the outline color to the given color for an enabled button.\n`disabled-outline-color($color)` | Sets the outline color to the given color for a disabled button.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web button component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"@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/density":"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/button_7.0.0-canary.f2a488e95.0_1592492683039_0.45200157596328094","host":"s3://npm-registry-packages"}},"7.0.0-canary.bd8d1aafa.0":{"name":"@material/button","version":"7.0.0-canary.bd8d1aafa.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"1bc8c71f4adb64466b7c65790a8a7b15832c4f0f","tarball":"https://registry.npmjs.org/@material/button/-/button-7.0.0-canary.bd8d1aafa.0.tgz","fileCount":26,"integrity":"sha512-1i1/TTmEh+K8U+KEdw61vSCbdsQOMmN4yQV+ReQN+7a0oE5JmBBgFSMD3ENpUcFSfW9mTLQmii0vWwcsxxWOaQ==","signatures":[{"sig":"MEQCIC/VVAVRBYmkyjcy+iluRMIO/Jv2xnImGzJkFbSOWaqhAiAMcCQZYABLShm4KbzQqbWeF5+jJfvEGbh/nUHcxl7xRw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":386905,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe64VcCRA9TVsSAnZWagAAbEMP/RA3xP0pPgUk9lXpD9td\n7kM5nZgMW3RbXk20xQT1z4marcc6Vu4atx6GVcVHZ8kk1kpspwF0Ws6dB5LT\nuubSP53t83g61GwfoAqlczOPyUr9Rt2rZDtnf4bnbn/ntIYgSRLWQIiveQVH\nUyhVcL0Gn4LNUywGVg3Bhz9hvZ2mhgyfWpZMlScGPQhHnSeRyj2D8uUM3sMf\nAcRomtEH0w5Q5CQDyxmH0eToPCA095wZwhMwl134OPfbNV31J0p9O7o2x6g+\nYf5l2SkZPN9I9NrFF6EgqdPiEkkSEr0nvzY+COa1N38GxGmXyo0WIf3Xxo3Z\nnZkR/WuzbjAB0KkGOm3tsaR1hfuOx8P7aNpy6Un1RhEcTI/ufd+qNoDfc+DD\n93cqLah8SspGRX5Ixi/nFzMMvQwsUCqX1ev1DMGfQulVAbEFLCFuuK7EDcUe\nQi7/WdpNlJrUO4dcGA9glT4s2Cq2e4wNa+ToF0wrzUdu5pY2VJ4IWNljC/4a\ngNa7F5OyWUNuSjvVUeHpwM0Px8FB1l2pMhV74gI/buedG6e33B3+/s1Vyixt\nK3+ORPpoKFa4zOKmj5Snk7obGoRR99YZsG/w/p50CljN2Js88OEiiwFswsKW\nq56QlnlpZ1NuFBdX7Deb2qRJetrfyTwWMwN5IywZ2htPdjKhiaytrDVtNp39\nO31y\r\n=sn0D\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n#### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.**\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n**Note: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.**\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n\n**Note: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommended to\n always include it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color)` | Sets the container fill color to the given color for an enabled button.\n`disabled-container-fill-color($color)` | Sets the container fill color to the given color for a disabled button.\n`icon-color($color)` | Sets the icon color to the given color for an enabled button.\n`disabled-icon-color($color)` | Sets the icon color to the given color for a disabled button.\n`ink-color($color)` | Sets the ink color to the given color for an enabled button, and sets the icon color to the given color unless `icon-color` is also used.\n`disabled-ink-color($color)` | Sets the ink color to the given color for a disabled button, and sets the icon color to the given color unless `icon-color` is also used.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color)` | Sets the outline color to the given color for an enabled button.\n`disabled-outline-color($color)` | Sets the outline color to the given color for a disabled button.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web button component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"@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/density":"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/button_7.0.0-canary.bd8d1aafa.0_1592493404092_0.1314368663413399","host":"s3://npm-registry-packages"}},"7.0.0-canary.1321eb968.0":{"name":"@material/button","version":"7.0.0-canary.1321eb968.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"68d6b4831e1a783f1583c9233527c2022bf47db8","tarball":"https://registry.npmjs.org/@material/button/-/button-7.0.0-canary.1321eb968.0.tgz","fileCount":26,"integrity":"sha512-6SSBFQFflWzlZUMWVyy/f7bElz/VYLuznZSVjWAbX2YbgAOI44v2TTUW/FCvBmPWkIGsyYAP2/RuRo/VAeZfXA==","signatures":[{"sig":"MEYCIQCWshNvA79RzyAGbuqoIu4JEHonqOKxYP1Gf+B8B0rCVQIhAOzJk4SrvHCKcGwtWwxHAMAZ9SIsj0WME0UHRyAe2qCd","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":386911,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe7RBHCRA9TVsSAnZWagAAf+EP/1ffyauwXJjjaqUOpXrg\n3m3ZpP+VqGMlU2kz+nyCd8EYnzv9ARN60gM6WhFQAKid7N4BGOfLxnumouMM\ndYUrKC3hqXjCZnTJ7UpYB5EvQ83aOygo2RB2LnlzbxvAwTbzy7SGuUR0fwt0\n6Ls0hX5bFW9u3wXsTOEq6En1xFfrR8CsPCI0xZkDIVwoj18XFey2ohLzB0RG\nrux3hADTvA8PYuRYOLGQ0nGK2qiTZlyGceCxevGsz54iaDLJU/h7PBQu8IZr\nt8NukMUb/KoKH1cc00BhnwDdT+ODDOiVOv9HA3raS4hxGpVSWAen7YkDQdbc\nzvAlKjfm3oMmPAqHiS/0m3fi2zzzslRTia7wEIwKkIN6LxU/CFvd5rQloEBj\npzgx4NVpaEh/ENi74QHdGQepe2oj0X2nzMZ5Jqx89iqqDMVZ9oHE+dWbiihS\n3P7mxGmBsVPABAMc8FAlKr73tC145t0xk62Ltk3e0a4HmFekyFUj4jhBr2cm\nnbso9oF2ZR6LuPVCc/zyN3AwrOTQwsA9dmCqygZec6HhePbbQyEi4yDMVIqf\ni3lFbffb/2EqZp1oYmPjLjnst8VxnTL1cHcr41YZe1qCQPqFHt1s09IZwix+\nWLG67Y4FkeQ/CPhrcrMsL2p5inzPj6svtwc7WMAVBuKCBf6RhjMiBDUUeGTQ\n9++s\r\n=Lah6\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n#### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.**\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n**Note: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.**\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n\n**Note: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommended to\n always include it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color)` | Sets the container fill color to the given color for an enabled button.\n`disabled-container-fill-color($color)` | Sets the container fill color to the given color for a disabled button.\n`icon-color($color)` | Sets the icon color to the given color for an enabled button.\n`disabled-icon-color($color)` | Sets the icon color to the given color for a disabled button.\n`ink-color($color)` | Sets the ink color to the given color for an enabled button, and sets the icon color to the given color unless `icon-color` is also used.\n`disabled-ink-color($color)` | Sets the ink color to the given color for a disabled button, and sets the icon color to the given color unless `icon-color` is also used.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color)` | Sets the outline color to the given color for an enabled button.\n`disabled-outline-color($color)` | Sets the outline color to the given color for a disabled button.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web button component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"@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/density":"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/button_7.0.0-canary.1321eb968.0_1592594502869_0.10216354927873383","host":"s3://npm-registry-packages"}},"7.0.0-canary.db5cc0382.0":{"name":"@material/button","version":"7.0.0-canary.db5cc0382.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"d7af2e04395602f52e63380a9ed4d1882373dfed","tarball":"https://registry.npmjs.org/@material/button/-/button-7.0.0-canary.db5cc0382.0.tgz","fileCount":26,"integrity":"sha512-e6GuB/p57T91+ywKRXnUbJ8JqVQUYzTLNhxn8FHPQmEWA1QqNwJJ4BgPyPLryM2rAUQjxDDj8g/4PG4RBo/ysg==","signatures":[{"sig":"MEQCIDl2mXxn18b60uZwABrU4VdQYtJLGz58L7cGJLXiM4nrAiAPIjW7/BXcqxKC9YZsrWB9p0N6yre5YPcKQYUD+CIxDQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":387245,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe7RHLCRA9TVsSAnZWagAAJRcP/3V7mbovn95Y/l473BeF\nLAZubd+UrUKsR+q6zXnrODTRWnpzjVjGcl87H2QMXV+OFswmJiBz09WJ23vC\nY9dcTkRnUoB7zb3N6uOhy1vLrCESOoAAad9+1bIUrSB88tIWDPAiNLIrCLkE\nwvAeFMrzUU01znnBTGHoEvZqmpHMP8uMxNXxLf76m8VyLEnl0DT0sUeg6aXM\nyeYKPg8a/4MIoMzmrc4ulnnTO2s2ckK5rBAEgJknLksObR/BVzG5KHO3fSPX\nFO2l/uPxa2HUbFONrl6X1/OACDvhqMd/Xg+iyhKw2IdPm1SaaT1f8qDwwdJX\n0C3liZPEpJo2HnLKhlZqmP29/Nwr/oNgwhNeSQahaC86XC1zCugQ/UzKtvKO\nljsuu5LcCa1mApQBfHXsTjNGmFTpm0+j71ClYAs0ipnxUMePM0RQnven1w/k\nNgTAqIKjraOau2KEbyufUT6g5AteJQLo1RpnlXQeQy2wv7zRQdbAXW4oufSX\nglB9xg5nYPWXZsOTKSESTZV68izCJzUuAnY68UMLkjrUWMKp6rfiil6Ir+ZV\nYE+bsSzGYK3QZV478GBmB9Tp1eX073MhM7Gc8C0PQ8gWPW0egGwB/Z57bbI/\nzmbl/3Fni75PBCONrInBVdEZ4b9mDA7yyDFN169HO5Y0zViVbagKeQlHtNzN\nQ5Ms\r\n=3ZzT\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n#### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.**\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n**Note: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.**\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n\n**Note: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommended to\n always include it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color)` | Sets the container fill color to the given color for an enabled button.\n`disabled-container-fill-color($color)` | Sets the container fill color to the given color for a disabled button.\n`icon-color($color)` | Sets the icon color to the given color for an enabled button.\n`disabled-icon-color($color)` | Sets the icon color to the given color for a disabled button.\n`ink-color($color)` | Sets the ink color to the given color for an enabled button, and sets the icon color to the given color unless `icon-color` is also used.\n`disabled-ink-color($color)` | Sets the ink color to the given color for a disabled button, and sets the icon color to the given color unless `icon-color` is also used.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color)` | Sets the outline color to the given color for an enabled button.\n`disabled-outline-color($color)` | Sets the outline color to the given color for a disabled button.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web button component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"@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/density":"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/button_7.0.0-canary.db5cc0382.0_1592594890617_0.9733583135684714","host":"s3://npm-registry-packages"}},"7.0.0-canary.6ac9bf031.0":{"name":"@material/button","version":"7.0.0-canary.6ac9bf031.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"17d0ada578a5b192781e1fc31169a4c156384183","tarball":"https://registry.npmjs.org/@material/button/-/button-7.0.0-canary.6ac9bf031.0.tgz","fileCount":26,"integrity":"sha512-MULM8CwYZtzKDWHXrLmxAWFjwkRLTCD9jZNtT3ot4MVhC6G1EX+nRj0qCjbuOzxlTY89RtSNXTc//5Hf9RR/tA==","signatures":[{"sig":"MEQCIQCcNSnOwzDHdjlC1aDDPGdxbSYZemesqCCYdW37zAZ00gIfWDu+0PQ7Z98trZCRLuk+CqyRkBPmAH6C5mMMjwOmRQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":387245,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe7RaWCRA9TVsSAnZWagAApHwQAJuUc7zQPPWbFa/DHjlr\nhbLvLFXATE+uyR0ASf4+dz2NnPdMSfelr9s3RJjBI7VIKTuR9Sl4LmcqELzp\nK2xhl2qE1FVkzInG7pW5iEaXM4JOpYYvOXl6CNQyhMlQH1fTtNHFu6dEg+gW\nP9a41lGB4krS6DZtbs7VG/PBIEdgEMy10pljKne7L1spyHYBgR0X5kdP3EPd\nojg9KI6TlVtuBFKA+ScAfhJkGGNhJP1JTPKTvto9jvBmU21OHzGUB0dpAKvm\nn1tPjlFZgQucQTE5DzYyGRDHB9R+t8ia67+NAnZ6dq9amZAnsn/2SFFgKNwf\ns2saUCFmi4KYcRBEL5mMrmrMLKMI+TUtJFNKymrlIAG26jGDS2g/yWnvML0l\nq1BZDDoe1383d5jfkXPvoLmvnjdW/g7OsKh56KjzoHeEGZUYLijRsiIr2ZO5\naTSHhMaWU8w3pmMrw2I8sUBZPjrdzW2+2GEeapZQBSq+2AwUpG8KpsOPMSPG\nkFDjxvvaasFQ/NTV64rNz5V4cI+yftJvFW5YmhN/m2xZcbIRqzf1C6jlDcNw\nKRlg4+XdBqkjEqtX9l/IR3LsQtBmRRZfYy44nXICQeFJFZocEGWBNk8sfNGk\noOj26tOqwpOb+v/g6bxHX4oI7DARqvzFELxsaNyJz5IM+A/XuRG3gtDwtrQQ\nyG/S\r\n=shqN\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n#### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.**\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n**Note: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.**\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n\n**Note: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommended to\n always include it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color)` | Sets the container fill color to the given color for an enabled button.\n`disabled-container-fill-color($color)` | Sets the container fill color to the given color for a disabled button.\n`icon-color($color)` | Sets the icon color to the given color for an enabled button.\n`disabled-icon-color($color)` | Sets the icon color to the given color for a disabled button.\n`ink-color($color)` | Sets the ink color to the given color for an enabled button, and sets the icon color to the given color unless `icon-color` is also used.\n`disabled-ink-color($color)` | Sets the ink color to the given color for a disabled button, and sets the icon color to the given color unless `icon-color` is also used.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color)` | Sets the outline color to the given color for an enabled button.\n`disabled-outline-color($color)` | Sets the outline color to the given color for a disabled button.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web button component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"@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/density":"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/button_7.0.0-canary.6ac9bf031.0_1592596117547_0.3795548346623605","host":"s3://npm-registry-packages"}},"7.0.0-canary.c21b5c367.0":{"name":"@material/button","version":"7.0.0-canary.c21b5c367.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"ae984a395651052fc37e462fd3766a431fe50af9","tarball":"https://registry.npmjs.org/@material/button/-/button-7.0.0-canary.c21b5c367.0.tgz","fileCount":26,"integrity":"sha512-KkVwMD7FwHTfZZQ1N8bGUVkGBvO4qLXn+ZB7Fs+xgMgkB4HFpd+YUcQNpGRHsmuUg2NGx5i/ngpR7zyp4WCe1A==","signatures":[{"sig":"MEUCIHrIi1Od5GQzqQWLi9IOEF3PEFFIATWVs4dc1yZZCWv9AiEAlhRQTm6h9kFuntaGbAvT82gnnuid1HDPJQSwugChyFQ=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":387245,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe7RvTCRA9TVsSAnZWagAAaEAP/2NHSr/RyGIMpt4KlaF6\n4khUYyuA5D9LnYICzCQGFkiqBbNfHEhZX2j1fKv5Oc2lVMCAeJ30e13GDwdU\nnjJ42GIRrmwEcTALyHIKzoWl5/0mii0gGckzivvmi/DPw2ZBCJ42DDC1Pkca\nHGnmMErH6bEiaXfC5p8kUIxGo3pfWrHOJSRszcmDl17DsB9cWdPG/Z4Zerc9\n147U7cW8JLsrQQZqH8EF/Iv/CVq/EpDAwFDOB+iXk4HXDSlO6hpxvZfg4F1B\nkWF4e/f0DxH0SPblgY5MVaNh1rtdWNiF/VPxSuiZj9s6PYM030jV5STSf5xT\nBnv3NB/bBQ48Avrmz46XQ3MSJniX+jWLpHu7pXxyYI1mq5nNLyt7WlqmVFNM\n0NQ3OWaorB2wkN1mA3KXjPICgqz4Pw54TWPUyTG47UU1AHkVXvbVpPcyEXXA\nbIOG8BSul7pbYkRFUIJbvLAW+6kqSgvKCv4jL7XtLRVs+mw/VzDhkph1Z3mn\nL4hGRRWZ+tEn5+pmiXjqBC0CH+E/aIEji6RRNal5WV+oDRogYpV4511RN2lo\nk5VXJ8wxhBTkQ6qz//FguMgbDI3dN3XDYBgO+6Lwxptc57Hkhv5b57JC6ugg\nxdUBRKsM+DBR2taWffNISIsowRRlFZfM770uM5UfH3pvnZkBYLpNCa3aL6iw\n3OZw\r\n=5GWM\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n#### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.**\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n**Note: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.**\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n\n**Note: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommended to\n always include it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color)` | Sets the container fill color to the given color for an enabled button.\n`disabled-container-fill-color($color)` | Sets the container fill color to the given color for a disabled button.\n`icon-color($color)` | Sets the icon color to the given color for an enabled button.\n`disabled-icon-color($color)` | Sets the icon color to the given color for a disabled button.\n`ink-color($color)` | Sets the ink color to the given color for an enabled button, and sets the icon color to the given color unless `icon-color` is also used.\n`disabled-ink-color($color)` | Sets the ink color to the given color for a disabled button, and sets the icon color to the given color unless `icon-color` is also used.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color)` | Sets the outline color to the given color for an enabled button.\n`disabled-outline-color($color)` | Sets the outline color to the given color for a disabled button.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web button component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"@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/density":"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/button_7.0.0-canary.c21b5c367.0_1592597458494_0.6177312195110332","host":"s3://npm-registry-packages"}},"7.0.0-canary.bfdd7fd39.0":{"name":"@material/button","version":"7.0.0-canary.bfdd7fd39.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"3b02bc30bbac45046609d3d9e7bea97f4792439b","tarball":"https://registry.npmjs.org/@material/button/-/button-7.0.0-canary.bfdd7fd39.0.tgz","fileCount":26,"integrity":"sha512-1rQduvdzbnQp/xrA+sV6MYNTreJc1AoGiQNGlVuK4ecq+ZNDQ89TFp02wR69cNfdH+Gd9SgBovOjFA4v3OK4nQ==","signatures":[{"sig":"MEUCIQDycLenQIlGTpw8ZOszg3hZ1sjZLB/t5tTqfAx7rWFYCAIgY5ODOG8sf56nPrW3cW0vfKHAjWt9mZusUUYxOtAzZ4U=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":387245,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe7R4DCRA9TVsSAnZWagAA41oQAJiqQpQppFKYvTQZ0N+T\nrNvTN+3/R0SK6UMwrqkF3vYfuoyw6Gdm6pcJHgZa/rbY/SgeA6uUTFsVyfrX\n8EptlV3xyEF8UIa2KH2jA36dZheiwVKdNYkJGLwgfiafY4fXP58AXvD/sle0\nso9DrNx/2ezxPu/w98KL9LUMv/aYWgeCm/huykYeP9fkQ9ZBwGC/p7QFmJC9\nioO63HGZv0ivBeXICzyVNqASZlUxUTugRQConNN9SxnmgvaqWO7LP0+/RWku\neVzT0v2mfL7PkYcgh3+UllN50piOHojBpnNXDpNZXRMy5FcA2g5Ighv24cVv\nBu6+Y1ZdyQwVfsEJPgEPv8tpyD9p9pUGhJDzPu5MGUi8yMzFssLNWt7Jwnsu\npAGNwVlS3cKjsvFXlNADqdt0b40ar5SUIrntj1GchzC7K1tgNnmLookf0jFe\nP6UyMA8iPXMMUsbUtVLPZCAFAO9n8oQGASdSu/OsaYTOFteLbpg+GkHSQeQg\nRSchj3PJvX8VqxSSvp/P4C8Ugmf8a5LdgcF42Bf0VT9FM6nNEI5pFVG4FXiW\nbt9DhVYeKMSxWJTn3V/G1mGRYxFK728sl4Qcgs6m/WofGMYDiiQrAGzlSxsW\ndtf2CcNvgG3ViRoebr1fHP9LrcCPgqwqUqyEq5vUlT+caMGfSnXQelnaWnr9\nQAEb\r\n=k45a\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n#### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.**\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n**Note: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.**\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n\n**Note: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommended to\n always include it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color)` | Sets the container fill color to the given color for an enabled button.\n`disabled-container-fill-color($color)` | Sets the container fill color to the given color for a disabled button.\n`icon-color($color)` | Sets the icon color to the given color for an enabled button.\n`disabled-icon-color($color)` | Sets the icon color to the given color for a disabled button.\n`ink-color($color)` | Sets the ink color to the given color for an enabled button, and sets the icon color to the given color unless `icon-color` is also used.\n`disabled-ink-color($color)` | Sets the ink color to the given color for a disabled button, and sets the icon color to the given color unless `icon-color` is also used.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color)` | Sets the outline color to the given color for an enabled button.\n`disabled-outline-color($color)` | Sets the outline color to the given color for a disabled button.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web button component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"@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/density":"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/button_7.0.0-canary.bfdd7fd39.0_1592598018605_0.16293654611455333","host":"s3://npm-registry-packages"}},"7.0.0-canary.10b505785.0":{"name":"@material/button","version":"7.0.0-canary.10b505785.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"7c307ae25f4d85995d7e8db937d3e4d20ebbc8fe","tarball":"https://registry.npmjs.org/@material/button/-/button-7.0.0-canary.10b505785.0.tgz","fileCount":26,"integrity":"sha512-FEDD91CoHZu0+CE/tQUMJsk5fPSkb2eZoZ1jkSJTfpsi0BkH0u40IjD9wPVYfQppoJjyw2pD5xPCw44aRRmkww==","signatures":[{"sig":"MEUCIGtN9zv6AEApYzaidwS/AXamhkweefZWw9HnJq0MdE34AiEAp+xui7OEEylJmATKg5anQwyF8Wte0ETqFtNKbh2cfAs=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":387245,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe7R5cCRA9TVsSAnZWagAA4CsP/3Rxat6PhUhiePIhe09u\nZBPqiq/+nosb/gJWOWN6/C74mqTgn1L1TeDottRSkC01rmzJsg+PaMVz583o\nvPrWZq5VNUl6e+ns2Q7S9pa7U/NQyHzFKKPKI+xXKMZttm2MuAx3ebQHKTUz\nnbW0klnFLElyrPEofYa7ns313BiBGEAklehnRxEqmRnLNIoRA/mPCO61hP6o\nx1+BRdKRnKiIIKXzfnn3pjwb5w/iLSbQVQH46IQouLiDY67adoEYrwOd0Z2C\nfEl5vJtf1WECSLJXdsjHgdUQo7i8XDzFcpknM4jCV9YxPRgYFV697o/kPJy+\nqMJ2QvRdvzrCKpBMVV/UcgqxvTpF+67lUl3r704wEcByPZw9ODTn2cbYpJ9J\n4eHhe/7Z0bptFQE2plOEPacotyt0jzBrtfxtxwYVMGDWNpQe3FI3FvwX9CJm\n8w1EA2o2mx3SDXrdnrRdoOQe7ceNeJsylEboRRWDrSJAPRHWCYhGkqdMC2qs\nvT0uDSo218xGFG4HBOrhjOexuWRYEIf9Iu8wdpsBjv/2uWYYneDT4SqxgpZ7\nbC3KU8dWpBNv15HyOBFUyKiWGVhlOeA/iPWHIuHAnFrMvCI3QsqQzK44crx3\nVhAY8ziU7Gxp4qygermhslbXHcwUWaK0ExrHFjgOeGcLb/9teM7MI/Cynpqo\no252\r\n=vaHR\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n#### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.**\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n**Note: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.**\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n\n**Note: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommended to\n always include it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color)` | Sets the container fill color to the given color for an enabled button.\n`disabled-container-fill-color($color)` | Sets the container fill color to the given color for a disabled button.\n`icon-color($color)` | Sets the icon color to the given color for an enabled button.\n`disabled-icon-color($color)` | Sets the icon color to the given color for a disabled button.\n`ink-color($color)` | Sets the ink color to the given color for an enabled button, and sets the icon color to the given color unless `icon-color` is also used.\n`disabled-ink-color($color)` | Sets the ink color to the given color for a disabled button, and sets the icon color to the given color unless `icon-color` is also used.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color)` | Sets the outline color to the given color for an enabled button.\n`disabled-outline-color($color)` | Sets the outline color to the given color for a disabled button.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web button component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"@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/density":"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/button_7.0.0-canary.10b505785.0_1592598105763_0.7760100177884064","host":"s3://npm-registry-packages"}},"7.0.0-canary.6483d3f44.0":{"name":"@material/button","version":"7.0.0-canary.6483d3f44.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"f3fd4cc275f7a88826cc67f2e27d80f5aa1654f8","tarball":"https://registry.npmjs.org/@material/button/-/button-7.0.0-canary.6483d3f44.0.tgz","fileCount":26,"integrity":"sha512-F45KOq+44tjhl37vJliGZV9+qF4Ikn9vjHiO13Lo/0+GSJjM/4SxD6fb2pbx4kH7ToQb/zRTp6lDEL4BffTAqQ==","signatures":[{"sig":"MEYCIQDp852UjEgOxCsM9cTbfqE0PTcvB9ML4d1PkOYZhCPGZwIhAOxB4+Vjm8nIyKHG2CbliBi0HALchsaDBwI1U171gH7S","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":387245,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe7SInCRA9TVsSAnZWagAApyMQAJ0OjpZFi6UfvjzNy1GC\nUVHNfNnVr78BJ/A0MR6QySVsFZjXkMwGD1MGJ1VqM6/Eh5OgxNBJg/js+AYj\nphzQj1Olz+ZxWgnbr69k3iYnsZ/2wb1xXIyRFNjCAFzbsVUoAnzHpdsOr9Kg\nR+1rebmjS4fU74MfEz9h8WixIvmI2zMGZV9DcfKrsU5wO8coaa8elrB/FDAK\nJAEsHa6NC4Rz8vZEGJt2XPKp68nXv7TckClv8pDVv09In46+XrEKb2nxKUzw\nwBCg9BG4ivd8mZ1RYs9gG8cr3PAeCNxknZEL7jHOicV5KzBI0T1hlMGlrMnU\nYdtXTmFFr+dnvtneC86oq4jrQQvqrxVJcGgaVzUqk3R5mn6XcUGWukBpy7hl\nc+19H/AUgA9BVp7zjdkFLaETWxPs8kdMlE4OfITaZa4AiuFqi8lct92yMgQq\nC6nn0koCOy3omQjx49T1mhuNhiCPtraETpoy2BkhvEaBgiMfR4z1MFXcN91h\nYyZHe1ygPrilk87oXGt4YMUMDWCVhShjhFIIkEKb48EeA5tyFgxozGZ9+CCw\nAPQoNSyxuGTehOQ2xPwKjk6j25U3mlMLZ6hpUzNmKoHxU6gsYVE+iK0uz179\nMMWM0FFdTvv8LEsNojmvTMXUaFllzXruQ8nPtd2pFKxwD++8TfsINh63Y+fU\nPU82\r\n=xFor\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n#### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.**\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n**Note: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.**\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n\n**Note: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommended to\n always include it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color)` | Sets the container fill color to the given color for an enabled button.\n`disabled-container-fill-color($color)` | Sets the container fill color to the given color for a disabled button.\n`icon-color($color)` | Sets the icon color to the given color for an enabled button.\n`disabled-icon-color($color)` | Sets the icon color to the given color for a disabled button.\n`ink-color($color)` | Sets the ink color to the given color for an enabled button, and sets the icon color to the given color unless `icon-color` is also used.\n`disabled-ink-color($color)` | Sets the ink color to the given color for a disabled button, and sets the icon color to the given color unless `icon-color` is also used.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color)` | Sets the outline color to the given color for an enabled button.\n`disabled-outline-color($color)` | Sets the outline color to the given color for a disabled button.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web button component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"@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/density":"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/button_7.0.0-canary.6483d3f44.0_1592599079210_0.5422407702538119","host":"s3://npm-registry-packages"}},"7.0.0-canary.30a74e921.0":{"name":"@material/button","version":"7.0.0-canary.30a74e921.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"124c48da183a983cad62c3eea54eb1de2efa35ca","tarball":"https://registry.npmjs.org/@material/button/-/button-7.0.0-canary.30a74e921.0.tgz","fileCount":26,"integrity":"sha512-bAWBOF+sBC9sbgZYYaFL668CZpJBU5cWlXLcQ0qNCZVWumzo1oFXd6rjefCauw4GcujzRhCYekMa9Mkk+LAxSQ==","signatures":[{"sig":"MEYCIQDBouW3dZSP7BIZhGv9POlzAysY2xMScMjEiV/W4hrvzAIhALtoAwqSbKoPIzIve2QbV+lbjoUNiIsisWSf41cn9Dc/","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":387245,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe7SKtCRA9TVsSAnZWagAAk5UP/0xOSQwHtZlG0gsDHAFd\nUyk4frNegoYQypn84JEUz0St8Qii7ijniiCmiQgW6GwFsHTt7bDzLlXnRQmN\nDXRhyeX1mfoBGIQc0Hvf6Oy+3S+GG4BpYAGkwW/1Kk7gO0cXB19irZV79jJ4\nrvXi1uP4t4cNUKMGCgvk21uPc8M+8z6tdrCe9BRT0Jy+BLwNPqhh5C4cNovw\n5sm5qbzk4eA8roP13kudeQ5flkA+J2J+K3USkIqVwqIsZA3iwAen0jjtJlJw\n/gU6R4HLYIPht1vDbF2U5rziiGrcGs9euSEiGQIfFKNd+AmhW4mEG4sQDlZV\nJ41oez5eL70lICzsa+k9+7oyFVpZyFC0uzCmBgYBxL6P8OgKDHqqi6WdKsmW\nCmARW3lyPwJK0V+0mUDGfRleitjSVVOA7JyGlNC4wRJgJm74YeU0PTtYwegM\nSPrWYan9HjgA3CSzG/3JHf1CWr3YAQaEtS6jH2gdG3LlxaDls3IFelSnJw1M\naa6/zf7ARt72/PIspyRpZDtQ+YhZtyQ/0tEZcq/U6+ZR0kdRUNs1if2PPrYR\n0FuhB/zXYakL44yu6jyqrryRCAFNAXP7VZh9izeYf6joUFepuD8I2YD0Dbpj\npWBstvQfNHAWE502k/RdpVo0ARSXLfJVbIPE//tDODYPA57mI6LS1M6BG/fJ\ntUK5\r\n=KzPM\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n#### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.**\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n**Note: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.**\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n\n**Note: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommended to\n always include it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color)` | Sets the container fill color to the given color for an enabled button.\n`disabled-container-fill-color($color)` | Sets the container fill color to the given color for a disabled button.\n`icon-color($color)` | Sets the icon color to the given color for an enabled button.\n`disabled-icon-color($color)` | Sets the icon color to the given color for a disabled button.\n`ink-color($color)` | Sets the ink color to the given color for an enabled button, and sets the icon color to the given color unless `icon-color` is also used.\n`disabled-ink-color($color)` | Sets the ink color to the given color for a disabled button, and sets the icon color to the given color unless `icon-color` is also used.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color)` | Sets the outline color to the given color for an enabled button.\n`disabled-outline-color($color)` | Sets the outline color to the given color for a disabled button.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web button component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"@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/density":"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/button_7.0.0-canary.30a74e921.0_1592599213356_0.6565467662199549","host":"s3://npm-registry-packages"}},"7.0.0-canary.c20727498.0":{"name":"@material/button","version":"7.0.0-canary.c20727498.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"566db3283a34608ca503e90dcb54422ce7ffa6c4","tarball":"https://registry.npmjs.org/@material/button/-/button-7.0.0-canary.c20727498.0.tgz","fileCount":26,"integrity":"sha512-yjNnVpqQ4EeaMuiZWFdx0q+d01hWyZwjM6qClf56hTNXv8vHXXuXfhvjFiy0vna2iv6mDFVzzQdHzqfw7GygpA==","signatures":[{"sig":"MEYCIQDJ1iJa4OnBz1S0Bl0xKseUrGSN2QkXtmmLosaMutq0/wIhAM+8qjpK8tcf6Q0ngUGbgJSzEf9kcGQr3mFfSmcbtnqb","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":387280,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe7SNYCRA9TVsSAnZWagAA1egP/0GbzSgV1GiAXZPRrL7s\nlqu1deg237cTjdzJ/O/8D4eQrFMVmAQBQw6SFDCv/K51OvPrLivV8YnlVmOd\nNDFRRZQkxua+XbugyH46HcBg4vTCIzTxBBYHuDT3ThFHBKS2kpISZ6VrOxmP\ndgNPADRtcec+F41Pah6u/7bQyitQPPcbl8IGPsqd9fzEjei/sASTgNkU3d9O\nRqszRZh+jzz4brHdlgC+Gw0mHxixlmUc7bYiUPB2AZHswfbGeITMDDmA/AHy\nQL/1mQYsaQg43Jl87swjQuOGJHO9BhBmun4u8i+vPJ5DJXB3kGCdBGhLLaQF\nQzAU6Y58oA2FtEYUDL8EN/VVEuaHVHosxwGKIs3IOsy+AVcvGFAAR+t9Yvt8\nWd1viuJJtWYLoY9Gn5KvGzKVWR08zP+ebwNQwXK0oXGmHhppnExH9zYQMj/G\nnFSpUPuOZx6SmegpepBYbSo/V34t9wG5tRaTODJVgyISwmyaTLYOaGBRQLfM\nZQ1+Q2AI/tTaVuhn7n6M6hHW8uLwIv50m3u+FSfFbvWgT/xuXzvO4lNYGNjo\nrJgA4Zybo4abfrsG4bscABeRa+7Zdf0wtJGUI3rRG2nfs+hSh3Gz1IlQPi/G\nWWOB3d7vQVdNvEvH39Bg4NpNcdJ7IQg6CGzCexV+uahj02ckxq/heDFP3TEV\nLnxx\r\n=Yr0Q\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n#### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.**\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n**Note: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.**\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n\n**Note: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommended to\n always include it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color)` | Sets the container fill color to the given color for an enabled button.\n`disabled-container-fill-color($color)` | Sets the container fill color to the given color for a disabled button.\n`icon-color($color)` | Sets the icon color to the given color for an enabled button.\n`disabled-icon-color($color)` | Sets the icon color to the given color for a disabled button.\n`ink-color($color)` | Sets the ink color to the given color for an enabled button, and sets the icon color to the given color unless `icon-color` is also used.\n`disabled-ink-color($color)` | Sets the ink color to the given color for a disabled button, and sets the icon color to the given color unless `icon-color` is also used.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color)` | Sets the outline color to the given color for an enabled button.\n`disabled-outline-color($color)` | Sets the outline color to the given color for a disabled button.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web button component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"@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/density":"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/button_7.0.0-canary.c20727498.0_1592599383626_0.7134137498754771","host":"s3://npm-registry-packages"}},"7.0.0-canary.4e360ae94.0":{"name":"@material/button","version":"7.0.0-canary.4e360ae94.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"7eb5d56354e46d0f0d6d309bd4ec3dc279e20348","tarball":"https://registry.npmjs.org/@material/button/-/button-7.0.0-canary.4e360ae94.0.tgz","fileCount":26,"integrity":"sha512-vjuAdBFrDGbjW4Polz/N4d5wPV3PrcU27/JTOtZWixv3BOtqGb6tEzN37MCz3Njwjs78btOu3VR+jx3pCgEHGw==","signatures":[{"sig":"MEQCID2NC6s5+w0Xk6SKL14QB1ZkzdiWH1Kjo/MeYnzmK1ydAiBZZ+Y62v00f6qIo35//udT0uSYC0w/SgNcZbLejaH6WQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":387280,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe7SdFCRA9TVsSAnZWagAAw4kQAItUYkwRq0zrGK5VlRPs\njEZlU/KS4Ifeqa6NKZ1LSym3rFKJJ4zJ7Jx8kOYIWbUD5GS7nD+QYc5nFuOY\nGVvg4piy0wwF+HU+SZdySq74qvv573siLpW1xveYur/Lv37hUU7vfxySuC1Q\noTfL0wW24CmARFDJPC7+9RS/DldgwyVSRiQgfL3+s7DUjI9qEgwwGl48MFg/\n6q/TeqtX9Hq8G9DrGH+Z2nDKfNlmvAORddoQg2WKKlLCLAReTAz+TMqRAQru\nMnfLTYlyrd5s93RGL3y+T4q9eeJWot7tZdVPBiTu4Z7yoPQERtCTxsJoOfwv\n/8Td+hbIYv5An2bcZjAYXk/0UEQhgc0TBJXRqW2d09S/twpSKYV8WA1JBU5C\nC0Bn0rLIwn8N35z7m/eDDu3cl8BsWB8/iGqLgjZ7QXWZKI9MnY3c6f2+q4Ab\nXjedMlj2O6RbQzgMIqnPIULj19aBIOl+cNqlwelpkoIB1gZwD+zOd+QtnPeE\nEWckEilHswkl4Kamj2D9rKGhf1aI/YuztB1QSRivH8v8OQ7lbuHJX0KSm9KH\nNNyG7bLPv7gDoilZF+yeCaU7YG3mRJuBvAB2vHQdrurlUKMoRhbOCGR/K3Kl\nrWUtsHtqzUltbvK787Qy3ZDVs5jxBZjxmrvW1by0lPbHSm01hhdVapGZvtYQ\nYI8Z\r\n=1MdU\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n#### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.**\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n**Note: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.**\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n\n**Note: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommended to\n always include it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color)` | Sets the container fill color to the given color for an enabled button.\n`disabled-container-fill-color($color)` | Sets the container fill color to the given color for a disabled button.\n`icon-color($color)` | Sets the icon color to the given color for an enabled button.\n`disabled-icon-color($color)` | Sets the icon color to the given color for a disabled button.\n`ink-color($color)` | Sets the ink color to the given color for an enabled button, and sets the icon color to the given color unless `icon-color` is also used.\n`disabled-ink-color($color)` | Sets the ink color to the given color for a disabled button, and sets the icon color to the given color unless `icon-color` is also used.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color)` | Sets the outline color to the given color for an enabled button.\n`disabled-outline-color($color)` | Sets the outline color to the given color for a disabled button.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web button component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"@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/density":"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/button_7.0.0-canary.4e360ae94.0_1592600388465_0.6346189754112113","host":"s3://npm-registry-packages"}},"7.0.0-canary.8550fa53b.0":{"name":"@material/button","version":"7.0.0-canary.8550fa53b.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"9e6dde783c81f8f5544ec8107fce525daada8623","tarball":"https://registry.npmjs.org/@material/button/-/button-7.0.0-canary.8550fa53b.0.tgz","fileCount":26,"integrity":"sha512-vbdzKTRm6pJ0zhR7S+W8ILt3r7NU0WkrFclKaQjxM1Hzwj9Ow7fZML4iUd0BPnYG+FG1m6LAEsSt//1T7eK5Gg==","signatures":[{"sig":"MEUCICTB+PxPHY+UGYtxQLbrosxlK0lBsFPYQzcpl5zHfMylAiEAy4oB79hT9GA/Cz86NQV+72B1QDOBlB7BoMl5m06EE7Q=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":387280,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe7SfOCRA9TVsSAnZWagAADNAP/Akli8CScaPCHZC0Yjva\nSvoG4E2iGPfDtf1yLtgszDhBM+M2hjGedxE/kn1/2NVBU6g5oNZaRsYA+mdS\nbX5XZwoEIDuXxKjCgNKzq3flVG532fp8Y8JWAVMPfrmZpnf1Y/xaMl1H8wEN\nIOnRoKcdCxoDRPYssNibuFNZsMmPZA65HW6dggq80Ec3K2Bulnl8F+HZLvJ+\n1fVnGQsU5m+fQUVFaPha7T2DJpq7Q/CZXZ1LsmyqxPF2WeYyTsdraIp58+eB\n5yEx0Y/+bqkCTJu/E/gGiMLdEuoc6ewJw+HLWLxncFj5vQsO7uhuc05SSRh0\nH5wJGZy2YuJjpyxc2eE1JO0p+hig+badwiFna5ahYwtPpZvbFH6QLNMqgb/u\nVnaquQarkGf7CoQ2CqUnmSK9UxK+CpK1Cvcy1MqlTL9EuUZp5DI7NCvgiMaL\nnJByTwyrvCx+xuaMMuctFf8sitzgIvDoEpfXsPNUxmx17SdMJdF9oykiKpsT\nRTei1hWarrgzfPCn6AgA5kemWmy6BSCrFC7ezHJf+jg6FS5sDvJza4NXcUvm\nuMq1KY/TLIQEavR1qJ9DmbRsoB67s+7dqZ+8HJkaGbr/FhNKH0DBMX/YYc8k\n0FEDxZETTb5uZ2hev1q4krn+36C5GAY/4dmPYKD+GNbZsVS+gtgC9Potvf7t\nCjRX\r\n=IHJ1\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n#### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.**\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n**Note: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.**\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n\n**Note: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommended to\n always include it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color)` | Sets the container fill color to the given color for an enabled button.\n`disabled-container-fill-color($color)` | Sets the container fill color to the given color for a disabled button.\n`icon-color($color)` | Sets the icon color to the given color for an enabled button.\n`disabled-icon-color($color)` | Sets the icon color to the given color for a disabled button.\n`ink-color($color)` | Sets the ink color to the given color for an enabled button, and sets the icon color to the given color unless `icon-color` is also used.\n`disabled-ink-color($color)` | Sets the ink color to the given color for a disabled button, and sets the icon color to the given color unless `icon-color` is also used.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color)` | Sets the outline color to the given color for an enabled button.\n`disabled-outline-color($color)` | Sets the outline color to the given color for a disabled button.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web button component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"@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/density":"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/button_7.0.0-canary.8550fa53b.0_1592600526364_0.23668923746301496","host":"s3://npm-registry-packages"}},"7.0.0-canary.93ade142e.0":{"name":"@material/button","version":"7.0.0-canary.93ade142e.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"0ebabd5470de4231565f9538c88b3e799f274005","tarball":"https://registry.npmjs.org/@material/button/-/button-7.0.0-canary.93ade142e.0.tgz","fileCount":26,"integrity":"sha512-0XCa/BlKzYiduKO4XGxVp003ClJl5P2wtCRoUY5YGc5/5e8w5IAjnUjspxOimo8kzkNpEE4pIpLkt7u91xYIdg==","signatures":[{"sig":"MEQCIBLZNIjyzNXUQATGdMCwUr71JMzJR24Af84bhjXehc5JAiABHi+UsCHTIVaEuUKDo3k8wvDJCFoSCkmhGq9sro53lA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":387280,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe7SgXCRA9TVsSAnZWagAAm+4QAJ5nDJfnTiYAfe4+e2rh\nnYDMJORdvhNlA+P5LIL6Y4sbfQHEQyI5UUbvPR5z2bFqbwL+6QSenXAlmpQ8\nf7We4LlUICxCaypGcgXAma3WaDyxqSBKoLqh8k/GEXiOU0++e5DeKPuva6Fs\n2qDbHUd2+TJESq5qTi4xJ39KBxA3SzZgKJksZro0BAx3T7rQxUSCtMMvzUzS\nTEMElD7WiBS2u/kR9qR8DjZXcsiqeE5coLTP5SdtsehfzyeI5aMtyZ77cxis\nI30H2tq2BGQUvlIFBFNnZashMCYzEwEKoJ+A1CEsVAL8SFWNJdJY9zFAs+gi\nNYHXGsTjzpYsEm3VWMd2lLutLcIy9nuRXNKFIiDvO8hptxkqyiqJFDrZEqbt\niTHdGzB/rJRY+A7uFEfqfachK8FFBpdbKxTV5a9fkbn8fDd5WGSseQzISguM\nD60GEOuIVyTVX9Q93XxGx50EPS/DFAo4oWJiFM8LtzQPTcII6nFhT5ePQgcN\nnWpX6Lz2gPpjZo4foVOhAKtS86wYG4sOlKj8d/V9EUwahQZgNqqP3jYEA7r+\nmagFBClV9e/ZpMZubmkTGsfFexNJw9BOAiL3UJSRc5kHP4xpodP/j8Lo9ZsD\nmk1LRwq2Dznm0ce+Ly8HkDuXk5mFPrqAoIdrU1ZgtzUiKoHaEU8QOPQJZXtj\nsgmM\r\n=tf84\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n#### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.**\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n**Note: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.**\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n\n**Note: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommended to\n always include it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color)` | Sets the container fill color to the given color for an enabled button.\n`disabled-container-fill-color($color)` | Sets the container fill color to the given color for a disabled button.\n`icon-color($color)` | Sets the icon color to the given color for an enabled button.\n`disabled-icon-color($color)` | Sets the icon color to the given color for a disabled button.\n`ink-color($color)` | Sets the ink color to the given color for an enabled button, and sets the icon color to the given color unless `icon-color` is also used.\n`disabled-ink-color($color)` | Sets the ink color to the given color for a disabled button, and sets the icon color to the given color unless `icon-color` is also used.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color)` | Sets the outline color to the given color for an enabled button.\n`disabled-outline-color($color)` | Sets the outline color to the given color for a disabled button.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web button component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"@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/density":"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/button_7.0.0-canary.93ade142e.0_1592600599308_0.829959875295051","host":"s3://npm-registry-packages"}},"7.0.0-canary.a0032f5bb.0":{"name":"@material/button","version":"7.0.0-canary.a0032f5bb.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"57a5c37ca6176391f19aa43f2abac48cbf6e015f","tarball":"https://registry.npmjs.org/@material/button/-/button-7.0.0-canary.a0032f5bb.0.tgz","fileCount":26,"integrity":"sha512-+b4U+WLe7d3IwVwNL+upq7rwbJoXnamBsu/1W6tjnaNNaS1yZEz5f800X7Lo/ybifXsnSTWVYquk4c+IachW6A==","signatures":[{"sig":"MEYCIQCpqs3Z0jTgPHS5OgLPxxeLbkh+5h4vYgcCqora75wJpAIhAPmjpriDYcWuqarTMOtF7MVUmeOi6ZCFZSXgSCRMXsX7","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":387280,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe7S3+CRA9TVsSAnZWagAALisP/3JM6GiKvj42x3jUf71C\nP5SauBy0OwyJJiI9a+tr/QweqdyB5ZcRZJv4v+PQyX7RMxHoeeKl9AN2VBvi\nzI/jMEPGFqhlI2cd5b/XI7BOYYZ1AkxCNamzpJyd7bZkCul4GDx5O7ui8woe\nYJ+aG0Rr159mrnXHGMcokxRsyqb6foo5SnHhv+v5VwDE+fBxbWHAZY9lQBSf\nysC4Hj9JfLhaPU41b0OKLiuGaCHKoIDN1an+WBMk9c4S3r8aD490blEtyNmx\nVP7hUCyk12t8KCoJoGVwQnCVpTTW7bZQBbT4QGWYYh4ZgTdWBZnhDKELIhE0\nUvUGn74hf4G6IJklmJtup63GW7xF+RXEn/uei7gMBf1lrMfAvrw8bXOgd6QO\nAyOp+Z9sB/gPit6qKwOG72l8u3FnHeEFA3MXFTHIc3OZnOSbNAkp+x7KEnqZ\ncUeabXPOBH0EMZQ55CSRvKSsWh+hmb+MzENd2rJLf7ShIrTkTQjkmXtl3dRY\nr5NDoa4BryJhuK2bn7SpXPCZHeDXoASwOM2or6foH4Q05uU5vRw7wRj9QqB9\nuuiHXCqqPg6rZEVvINcn2c7ZPCjNR84+/CCVlURFBrUy/KoSYUZkxRQRmUGt\nRMh2DUW+NhTNMbZ5wEzA3lFBjEUR4gY4dYMHAQUghpocBKcFEnNc2J/lnsnS\n0E9N\r\n=rKq2\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n#### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.**\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n**Note: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.**\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n\n**Note: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommended to\n always include it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color)` | Sets the container fill color to the given color for an enabled button.\n`disabled-container-fill-color($color)` | Sets the container fill color to the given color for a disabled button.\n`icon-color($color)` | Sets the icon color to the given color for an enabled button.\n`disabled-icon-color($color)` | Sets the icon color to the given color for a disabled button.\n`ink-color($color)` | Sets the ink color to the given color for an enabled button, and sets the icon color to the given color unless `icon-color` is also used.\n`disabled-ink-color($color)` | Sets the ink color to the given color for a disabled button, and sets the icon color to the given color unless `icon-color` is also used.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color)` | Sets the outline color to the given color for an enabled button.\n`disabled-outline-color($color)` | Sets the outline color to the given color for a disabled button.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web button component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"@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/density":"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/button_7.0.0-canary.a0032f5bb.0_1592602109814_0.9948395364613691","host":"s3://npm-registry-packages"}},"7.0.0-canary.3f342e721.0":{"name":"@material/button","version":"7.0.0-canary.3f342e721.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"88afd92ea605ec5a7873a08ff0516bf76ff141ff","tarball":"https://registry.npmjs.org/@material/button/-/button-7.0.0-canary.3f342e721.0.tgz","fileCount":26,"integrity":"sha512-Dh48KCY7E0/F7QCtSS/uk9CZWf8kuSxogr93aXntat4kPcRAjUOErpqAEQqQiWqRntoKFl2n8q67ER5XUtJ8vg==","signatures":[{"sig":"MEQCICzUhV9eyD7lT86usUBK7scfUxIZp9oay7UyyFiQp/5aAiASGvMm90uW9IyxKbDl8H8oi7guiqfvsnttRuc42KDb1A==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":387280,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe7S6ECRA9TVsSAnZWagAAa7gP/A1cTpnfIO5gK0ehAAsn\nJ8QrUFX326HutnvoWZSzHsc7s8GzeOt01qdCn89BcnrPG+dVnsxWPN/8TdOu\nQuciEDNRYHN6TbcLFo8TizsIOULj1sD67GZFRK5G7a8jngY4jvAqgaz73mEZ\nSi/N69XV004fdZJ8bpAyr0HzGcDx7UJ50sxmtMTit3LZVbPN6X9F5IC+vmO8\nQwJJefFYp7qhzFLJJulzJbt4Ydxs26AWDNQlG9j+GJcqJ6mmMA4U2xWfH2ds\nwwbtpXIcTf8h8vneHUEUymTr/fR9f/pgICIGSsIg9CJD/nCcvBde0UoaFZ84\nFcxB4n/6YQu0m1buddT10zMBDYaNA1r+LxkN14tEui8MqLvP20U1tn66rgHv\nJrvJN+8hvEj9ImtzmlMqTe/DxBC7rV72clwi4Vij5oPnVinyB8O8qLkcCxIh\nk8cXiZUn5GiqbV2N8/cTwIrAXvX5myRtp9boco0bwaZDF0NmDO26kzdIRjvl\nop02GMQTCitHJCYIhiGgXT1Pxr0x1mL8pAHSdYkSpzZ2DljJKVv3b9aPuQ7T\n2YwpL2uVArprTL7R4+rmazHhwJbE8y7d+ak7bS3448Uw3DhWKLZz7GLme5ZH\n4b6cGhOID8PDSE+x7GaOYU5Qb7cz4df2nnnhr9YC3jA0fb8d26EOzOX2Y+Oi\nBjRX\r\n=tKQt\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n#### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.**\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n**Note: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.**\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n\n**Note: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommended to\n always include it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color)` | Sets the container fill color to the given color for an enabled button.\n`disabled-container-fill-color($color)` | Sets the container fill color to the given color for a disabled button.\n`icon-color($color)` | Sets the icon color to the given color for an enabled button.\n`disabled-icon-color($color)` | Sets the icon color to the given color for a disabled button.\n`ink-color($color)` | Sets the ink color to the given color for an enabled button, and sets the icon color to the given color unless `icon-color` is also used.\n`disabled-ink-color($color)` | Sets the ink color to the given color for a disabled button, and sets the icon color to the given color unless `icon-color` is also used.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color)` | Sets the outline color to the given color for an enabled button.\n`disabled-outline-color($color)` | Sets the outline color to the given color for a disabled button.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web button component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"@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/density":"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/button_7.0.0-canary.3f342e721.0_1592602243447_0.4533235799785058","host":"s3://npm-registry-packages"}},"7.0.0-canary.ff89457cc.0":{"name":"@material/button","version":"7.0.0-canary.ff89457cc.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"fc6714a8e152f59ab44dd9bcb1276b490f032a9f","tarball":"https://registry.npmjs.org/@material/button/-/button-7.0.0-canary.ff89457cc.0.tgz","fileCount":26,"integrity":"sha512-OynYmMkGYjjfAhBtv/AdFwi2te18/bxrbFoqKRq++OP+UN/nXo2fwy76QPy6iwHQPkEOkHXe7yf42rh2TPQXuw==","signatures":[{"sig":"MEYCIQDbSsogtf7Od4XHxzleYtyoZf5Ha6JQoL94kIgWHpzyMAIhAPhB4RxKvgrzmLl1m1tLtVLChpgmxSf9IQ02hXssTf/P","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":387280,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe7S6+CRA9TVsSAnZWagAAvLQP/jPPF0Z8JyPN8p3r5wF0\nG3ygOPZQjU+vyB7wOVwUgUSveX90tDXl5AHpxOesb3kLLtIh7PMqKKzRa3LI\ntGd2UC/U6f1jUuDPDBAgtCt5u48lfH5+F9gMd3/oj/8yLZj/QDVHIqfrV4YQ\n5m97TApCDbM05sSk8QrcgEfPc93DOszZEhXQfk6StshwjlEJv2sZ2Bl0C7CN\n38+r20YgNP0qDnVxfiMQLOwvcaHdYOGAgmZAuRsqt8BTQGKzQ893QcDWcS8U\nnJ7NgQVsgEU5SOq0le3aK+uL3jDoy+7ln28IgG+rYxd/BoXCGIV5uZQ+tSG2\nbvyiSjlcOP4ZmPT5XNTA8Iw2FEAYOM1abPX8agWSLeFOfYjfOC9Bb4edATGW\nITjJNCnQnVihHbjEu6IYOv1nQfZ349rxFkls3XKKSZRJpw44dCcVvgBYLUdz\nC/InJHfFXtAIidf9ravdx+j0i0bBU0qB1uEIKh/ufngDESAEYhN++A96rwc/\noSZZ47t9a9g3hyc2dBekJ3CyjmRLyYD272/MaWTPPYGj4+HGkxZ4z/ZInWCp\nlNkesiJOamTqtLQ2GLB1GuWLS7JLlCT5shDOjo923LL/OgEkJUYTUk0fwwXI\nS5lwhDo9cpeIiEHQ7B8Mz1iTJDO2tWt7PTuDQ/rpy5/CXPAj7gM5oLMC/+Ji\n4g0v\r\n=VhXH\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n#### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.**\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n**Note: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.**\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n\n**Note: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommended to\n always include it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color)` | Sets the container fill color to the given color for an enabled button.\n`disabled-container-fill-color($color)` | Sets the container fill color to the given color for a disabled button.\n`icon-color($color)` | Sets the icon color to the given color for an enabled button.\n`disabled-icon-color($color)` | Sets the icon color to the given color for a disabled button.\n`ink-color($color)` | Sets the ink color to the given color for an enabled button, and sets the icon color to the given color unless `icon-color` is also used.\n`disabled-ink-color($color)` | Sets the ink color to the given color for a disabled button, and sets the icon color to the given color unless `icon-color` is also used.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color)` | Sets the outline color to the given color for an enabled button.\n`disabled-outline-color($color)` | Sets the outline color to the given color for a disabled button.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web button component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"@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/density":"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/button_7.0.0-canary.ff89457cc.0_1592602301872_0.6238361364217198","host":"s3://npm-registry-packages"}},"7.0.0-canary.4a1855cf8.0":{"name":"@material/button","version":"7.0.0-canary.4a1855cf8.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"5379a22309cee3954cb16c8675f30385a9f56a9f","tarball":"https://registry.npmjs.org/@material/button/-/button-7.0.0-canary.4a1855cf8.0.tgz","fileCount":26,"integrity":"sha512-kPA/cQvXF8sRfwK30imnY3taCEK0OJQ0zilPZNt9o/QGF2XgU8bWHqwsg2DZFCG/cXVBb0hN0d7QeUpgG+lSVg==","signatures":[{"sig":"MEYCIQDapriWvOFkq/D+m+aGxHz8FxujGnjP7RD+W05bx1TS1QIhAOPjlR5CAkblVmVuJLxQPTjhpMRQuN5JDnbKB0M5I6Mu","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":387280,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe7S9hCRA9TVsSAnZWagAARJsP/2SWGPB84Z+7S3Vou+Tv\nNxXiI4pHJ5rBHgc6o8UYdoMjas/L8FgXnDkBPI4XkkywlwwVpuTopjvJmrK8\n8Y7bbV20jlEYB586+rrI1OOH/Yyt594RZp44oznaGxv4TvVFVMR6aH7pSAJN\nyP6A4qwQXnprXNQNAgIAi72TSO+pXKMg40117dvh/bXHprxBvWjFzP4+eIqQ\nEufbsiVlbQiECEhOfAZJHstn/Tc+haOC4+B3/eQHXeB2Dti9OfhNL1jMym6e\nKaGO4QsPiiv9WxfssihGpALPfw7Lw8PtGxq9DZ5QXx9nq/0b85OHO1gBjSva\nB4IVak0LdUY2dKLNXiAot/+2pjjZnrhlVYcAMBnlwsTKXC2+v4GoGYN0fjiY\nmrNe8fLPc/z9pc2Fw3s8N7vKWx2yPbJXf6Q21LwvfJgxIsWc2q/bOHQXqG0Y\n32reXpoLo6zoAR5sK9bXVvOC+qkr+8P6sWKPhhNRBN6p1luZD92c58d3Sqbz\npr2CrxFDCjK4rrHyIlPCfkxFKGAbnQwyTffVYbHsbVmgbAfCzAjAVRvJIwra\nqv9nJ0vpLBMTo+2ab1nqvpWmgo8UoiGuJ28oQsbtUSaEwVEDPuvUUlXIU4ya\nj4fFcF2cdWhIXbLxezKUmhOTOzr6T4TjrZOXjp1MIQIDN0GVoKZydSrKVF06\nvhBm\r\n=C0Ud\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n#### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.**\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n**Note: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.**\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n\n**Note: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommended to\n always include it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color)` | Sets the container fill color to the given color for an enabled button.\n`disabled-container-fill-color($color)` | Sets the container fill color to the given color for a disabled button.\n`icon-color($color)` | Sets the icon color to the given color for an enabled button.\n`disabled-icon-color($color)` | Sets the icon color to the given color for a disabled button.\n`ink-color($color)` | Sets the ink color to the given color for an enabled button, and sets the icon color to the given color unless `icon-color` is also used.\n`disabled-ink-color($color)` | Sets the ink color to the given color for a disabled button, and sets the icon color to the given color unless `icon-color` is also used.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color)` | Sets the outline color to the given color for an enabled button.\n`disabled-outline-color($color)` | Sets the outline color to the given color for a disabled button.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web button component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"@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/density":"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/button_7.0.0-canary.4a1855cf8.0_1592602464922_0.7202746489534964","host":"s3://npm-registry-packages"}},"7.0.0-canary.8602f1b4d.0":{"name":"@material/button","version":"7.0.0-canary.8602f1b4d.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"3df45f73c7b3c871159df4a31c53e6624a41bf3b","tarball":"https://registry.npmjs.org/@material/button/-/button-7.0.0-canary.8602f1b4d.0.tgz","fileCount":26,"integrity":"sha512-E41iFX4iT23EH9bJDOe4VeAbn3z2Yo0rUgzMdcCRyaHKFDNe/o13KJUVwW1pT326ZoibRp7tEa0LIUCHUPZMrA==","signatures":[{"sig":"MEUCIQCn/P225jYhm2AX4oG9Nx2aN4Vi7CwBGJNoZzgaNZ/G2QIgdJx0jyHNRCOW43HyIY/ligaTH9RCnksb4DDwM82l+vY=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":387280,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe8Ok2CRA9TVsSAnZWagAA9ycP/iEmOF0to1k6FhviRlQt\nMvsozf/mVnMzMXMhEoJnPWX+WZ2702qQl88f8gvtytdhKkMwivUn/FMC/aRD\nyF6eFpZSGrQdoQHlPfE7o8Vxbc5sq1VRVwS0mviutSxhxKL5YSY0KCtYz9kk\nB+v8LoEJXZUPDU2q0P+6crZXtcw2mz2TNgMYtgMrM9iAP8T0lmH+xMjw8QU1\n/pApr4lyT08RemHXSOynuISYwXFyFbEVbtZXf6M1Vo61klmMYQ99vU+HynJX\nknmzXTzAFnctkAQOenFOyWXUeoN2yLnGdXkzlfNzAqPpNiNJbVhTjEh7CtgV\noWBFqY6hDNj9yrpeK2Y89DDC5ZSP536oY3Zs8/Z2/RK/ciyZNWyXrmSMCPtw\nHLAsVqtQREBkRUv6HheeQfDaZwS5Cur4TtXWf7kP+XOy03k1fy5/0zTzBwLD\nWAoUaEUw3VjLPv24YVp/w1Vj+pqk0i0ETtEj4ZAmBxa2t/ehcqgbf40VyF7F\nk34KLfHj4TiNKF+VW+1xqKOBZxcEqm6mmVPLP8lPk9mAW0ufuG6tWEIWxhpZ\nwtZc6XQnkQCS0X04ETxGtXc3L0bT7rLIyh6nd648XUmy34k6W6sk5TWFctUj\nyGlKTC/qe6Za1x9R4x5m7QebDmQjsQY3MdSSh6FemeUaEwepkZkSusxSN37r\nrP6Q\r\n=Ivz4\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n#### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.**\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n**Note: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.**\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n\n**Note: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommended to\n always include it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color)` | Sets the container fill color to the given color for an enabled button.\n`disabled-container-fill-color($color)` | Sets the container fill color to the given color for a disabled button.\n`icon-color($color)` | Sets the icon color to the given color for an enabled button.\n`disabled-icon-color($color)` | Sets the icon color to the given color for a disabled button.\n`ink-color($color)` | Sets the ink color to the given color for an enabled button, and sets the icon color to the given color unless `icon-color` is also used.\n`disabled-ink-color($color)` | Sets the ink color to the given color for a disabled button, and sets the icon color to the given color unless `icon-color` is also used.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color)` | Sets the outline color to the given color for an enabled button.\n`disabled-outline-color($color)` | Sets the outline color to the given color for a disabled button.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web button component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"@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/density":"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/button_7.0.0-canary.8602f1b4d.0_1592846645583_0.005173670168058475","host":"s3://npm-registry-packages"}},"7.0.0-canary.69f9f0982.0":{"name":"@material/button","version":"7.0.0-canary.69f9f0982.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"edc97feb8008da75e97278012770a16f084c315a","tarball":"https://registry.npmjs.org/@material/button/-/button-7.0.0-canary.69f9f0982.0.tgz","fileCount":26,"integrity":"sha512-NMA7he+cJukWeT7cMdMvX6KirWK1bQnCAFKUcAVnvB7zd3wqIwVEue3g1S8KRSugtrpECLK33Du+XtdzENdtLQ==","signatures":[{"sig":"MEUCIQCM6K97L4I6EYyygKhi+a1/SG4u0zQ1jUAynPVvzMhyUAIgcWBhHEA8UaexNC5i/U+Q8+5EU1kfX0nzMxMGllrAArc=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":389204,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe8R9RCRA9TVsSAnZWagAAtEgQAJnQCnSecSK3qZ91x8PC\n8VZYt+3zzpI0NuKNBgPay5QwDk1/xCRmCvS/XIbOqdH9tu148Mh54b7rYi98\n/0G4oH60TkA8vTrhBK9S2qILG9XCE9SyElDE6d0wfaRQUFOd6qlp0jkhGzlD\nAKbxmKDlXiXEuVTqklM1zqVOgLKSRu3QDKf0S2V94ZDMqGiUkSP7HTcJTRgi\nhdxg542E3I+K493ZAoUDh5x0ZWCGGBksuUOYel7zkqLbuzGvNAnnGbnb5hDa\nyY9y3PvTNNpKF+CdBli6ZQz+fm6wlvkz7lvRbLsoPD73Sz/KS6qVWqED6Zhm\n2qbJ0n+zIKTXg0fZvuphAFUaxZzyVrCHJcJBNHvfueJLpTyXhsrnCPxPcyiO\ntPVqHV+dEfgnqEihd1788BuE1DkMSYRKJs442yODo2jcI1kfksBzHBgXaoNP\nQZspbjiNSEoAdRf9qW1Rkb4R/QOf520LZtSLj8FddMekYXDyG/U4JqO2rQGu\nXU+dz5jg+5GscYxaxZt5Q6mjesXNbjERV1RZf9QI2cl7ozVIqM9XLs0jgjqJ\nj5elN0DaG6wrOkrKF4F4rfiBYaiKbFdCjwze4ztFCHIqaPflCbh/bVpjqjiu\n61logxm/NS7b+oVkYXO/AMwAmU7U4foAl13crkGUJ1FhP21mGUUb90vrRp34\n51zj\r\n=cz54\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n#### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.**\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n**Note: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.**\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n\n**Note: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommended to\n always include it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color)` | Sets the container fill color to the given color for an enabled button.\n`disabled-container-fill-color($color)` | Sets the container fill color to the given color for a disabled button.\n`icon-color($color)` | Sets the icon color to the given color for an enabled button.\n`disabled-icon-color($color)` | Sets the icon color to the given color for a disabled button.\n`ink-color($color)` | Sets the ink color to the given color for an enabled button, and sets the icon color to the given color unless `icon-color` is also used.\n`disabled-ink-color($color)` | Sets the ink color to the given color for a disabled button, and sets the icon color to the given color unless `icon-color` is also used.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color)` | Sets the outline color to the given color for an enabled button.\n`disabled-outline-color($color)` | Sets the outline color to the given color for a disabled button.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web button component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"@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/density":"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/button_7.0.0-canary.69f9f0982.0_1592860497116_0.6887292181416234","host":"s3://npm-registry-packages"}},"7.0.0-canary.369a293f0.0":{"name":"@material/button","version":"7.0.0-canary.369a293f0.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"03ffb166883eddd3043d1ff482b40cdbd00e7d27","tarball":"https://registry.npmjs.org/@material/button/-/button-7.0.0-canary.369a293f0.0.tgz","fileCount":26,"integrity":"sha512-NWYyIV2bhRaVsGoi8ER9sISjcO6UpYZKbJNQnvjVXYZainfsceZQ5cLe7ZgJVGx4n309xFDOp0ZkzJBgNgcSiA==","signatures":[{"sig":"MEUCIQCxmOHLdTYY48Zuk6jqNuu/bGzlvAqGskiiY367VgBkdQIgTBRfWxqUAU+8FTFFwQ01j1yNL07JdoBd0CQ/6bjdDWs=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":389204,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe8R/uCRA9TVsSAnZWagAAJLQP/109t7xEANz1pJBZdSVH\n4XJzzkIq/yMxcLETqJSr3uTgnZ2NSYAiH1XgdYi8iVK/JimgxmZvb6DV9wsr\nxLVetk5HKXZyoT0GA+uSGN6iVYFt44E84b86G1yv6dmnFP28A78vuHTIWQhY\n2KxPyQS3H0vP06MnLHLyGgHVklivCVpJBcTIk7Nqmp1L52I3GwjZsWPk9ihl\nu2yTIM8VsnY2yOCTR5+0qg+cf/0AC7rBznl7J5kUhvLCjt0fexLaD0upvSx+\nAivrFBFPcyC1WCC2As5LHM5rG9Lh+IKb9D5igUznrIuYeDZo4u6KZMuxFQEI\n2yjqhM8nuqJDQdUg3BEKhLt4y50ZdpOXwL9shycAKK/dMWeve1sgo6ldjK0P\n5d8a7w7zf+DXQ0cC0vdUXhXYd7mdlt6qgucw3ven4XUNgntILBJC8EyGD1PJ\nLdCbLV3eFbklFOogasac17JFk6qSsUYAl+ED1PJMNNKND86W+Jo/euXjgOHB\n6vbEtCo6kV+u22zxnrBaaO+sndA8RjYyZ2MHHDruqTMBF2RCFVTHCqBvn20h\nuS7WQFVPnsD9e9j1KU2V/fYKwKg1pp+SNxEqbSlkGmiEMCSvKY7Bhzb2sjkT\n9eYmpU/848tCqwXOt6XH9fG3j4VUsxz+5pv7GlTz+Ebgb7G82DUQcNBVSXZF\nqghg\r\n=0rP4\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n#### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.**\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n**Note: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.**\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n\n**Note: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommended to\n always include it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color)` | Sets the container fill color to the given color for an enabled button.\n`disabled-container-fill-color($color)` | Sets the container fill color to the given color for a disabled button.\n`icon-color($color)` | Sets the icon color to the given color for an enabled button.\n`disabled-icon-color($color)` | Sets the icon color to the given color for a disabled button.\n`ink-color($color)` | Sets the ink color to the given color for an enabled button, and sets the icon color to the given color unless `icon-color` is also used.\n`disabled-ink-color($color)` | Sets the ink color to the given color for a disabled button, and sets the icon color to the given color unless `icon-color` is also used.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color)` | Sets the outline color to the given color for an enabled button.\n`disabled-outline-color($color)` | Sets the outline color to the given color for a disabled button.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web button component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"@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/density":"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/button_7.0.0-canary.369a293f0.0_1592860654489_0.7863308285298614","host":"s3://npm-registry-packages"}},"7.0.0-canary.f1432b5c6.0":{"name":"@material/button","version":"7.0.0-canary.f1432b5c6.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"cdf9e365f1bd98381b00bd5073ba3b83511a57ec","tarball":"https://registry.npmjs.org/@material/button/-/button-7.0.0-canary.f1432b5c6.0.tgz","fileCount":26,"integrity":"sha512-lTVu+VVkH3Fgsk62M6RscQK4hiZ4YG1nVw2jzgGKqQnJhqTmFV6oMkt8mPRrnJacwbPl8jpc2u9lFPG3X4xq+w==","signatures":[{"sig":"MEUCIQD035IgW5SYUdJUYDYyIKasSD8Rn742+4gDVhAbjYwwKAIgShiVdRidLeDniOKn8ELbZgWUUs+KGOsBl9bFV6KqmD0=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":389204,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe8SHPCRA9TVsSAnZWagAAgxkP/RVBK7LGgQQejJYKPpCm\n6BARnMxXhICatfAz6BgnvUaLQzu5gTBeJPoXp1Al1e+rh/kw0jvDLGfwgLv9\n4U9ad0ZfcASXkc2p3BkEHY6Jxizfr7cWburNGXt7oA1W0SV6CH1qxmqFOrA3\nwi8/Lr5HZ81iggESzy1KVNkp/ug+NQ/DgejWvgLnbmwlVcJ9WQJ3gB2in9U5\nWdIQEGkmtNTZp3R9V5cPAOz0arV0077hGZUtgJTOWaFGXA+pnwwooD8IqXKL\nWonuSSn9tZTNMBWnIbsLMa/hQ+WKiAO5JodNOA68LYhjYPnPkUNrzOeyIPmP\nHKDHsad2n2Z5s+AVn16sDggz8x1EKvIRb0rKhabo7otpEG+Uu+6xb6mD/7lZ\nwQagyqJcu7xG7r0KrrD3+bDOoG6YyGEuu6TsqiQHs8LsTotd9vtb6ypdFdKL\nN5xkBvUW8iOlzE4LflpqoKpp8q2YxiyHTK5PWgUZINI5NXFw0ieUgK27Fsiy\nggDo8CjcwierzH37d0SU3E7g4BlJKOcbCbbFatut6U6G0XuYeLp5AcUp3B8F\nw3bsQG0DS46AFjoUTSGhMfu9hyWGiK/QyQySmDQURfwhR3qTwwaaCyUg8rHE\nEt2xkXU46qu71+TFIIUwzk8TVkMYm8XHqbarPTw4RWh2/mGzLUxG/wTzbU+h\ncgo7\r\n=xxYg\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n#### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.**\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n**Note: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.**\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n\n**Note: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommended to\n always include it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color)` | Sets the container fill color to the given color for an enabled button.\n`disabled-container-fill-color($color)` | Sets the container fill color to the given color for a disabled button.\n`icon-color($color)` | Sets the icon color to the given color for an enabled button.\n`disabled-icon-color($color)` | Sets the icon color to the given color for a disabled button.\n`ink-color($color)` | Sets the ink color to the given color for an enabled button, and sets the icon color to the given color unless `icon-color` is also used.\n`disabled-ink-color($color)` | Sets the ink color to the given color for a disabled button, and sets the icon color to the given color unless `icon-color` is also used.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color)` | Sets the outline color to the given color for an enabled button.\n`disabled-outline-color($color)` | Sets the outline color to the given color for a disabled button.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web button component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"@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/density":"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/button_7.0.0-canary.f1432b5c6.0_1592861135253_0.13641955513835646","host":"s3://npm-registry-packages"}},"7.0.0-canary.4757a16b4.0":{"name":"@material/button","version":"7.0.0-canary.4757a16b4.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"1e66edcd30288681712404f9a6f6ea4df1413e76","tarball":"https://registry.npmjs.org/@material/button/-/button-7.0.0-canary.4757a16b4.0.tgz","fileCount":26,"integrity":"sha512-jLn/UgVQ3UiTFkP+NurkDb0PvDfBceGSmpWOQ39qyfo+pymIrgqbFgsWH/0LKnlpmBqV3LCiP3QQ60nJAep3qg==","signatures":[{"sig":"MEQCIBnb2Ri86/1mNxbMCp8WFYdu4w4pF2VTaxFHbBhjOdnvAiBQN2lUuZpphTJoBQ4UCIXi5Ghx/ho3bU+9ZRhOaIwC8A==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":389204,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe8ShoCRA9TVsSAnZWagAAB0wP/iQTtfncBezp5XUUYFsn\nxSkyyzw8XV8Vow/lBiWTNftv5+voaqC3ZXTHZmPb0XKz4X2iVcsWVqJI3Dr9\nRoh58frzvvhVK/eiYIRTQWa8fM2b8tJRKhMdWr/2J0wqnOHTPrRmJL0QDv7t\nzswQwu39mCTwFD/7ZX3g3q2tYzwxAkA9DZ8IwGNNXzudJM+QIc/e/ceLBrSi\nnl4pua0+RDEr1krzJ8/QGugUhvgMRjnUAzY03WMCsAZRQXBRp+WwCnxPRLjB\nnfHlOQI4/NIg2SjfJHFW2F8xszxEaLELwgMrUAGfuuG/x9uFCtqKFL/xAGS+\njOLKSG8ujUO2F06rAevDwXfiAH/D+26O9jQXIZgdqKnHUd/y55wCwJtvpKWO\n9p/XYawcyFp9RIc2H3FFIsDEPR74pbzNL/V8HCPOQNV9TTIrP1AZ0IZZOaam\n8XlKTipEbEOjG60NOapi0iAm8I9P+eLvUB6sBsrQ/0Ot0R/VsCet83Bomwj2\n/hNUw59dddnbbJ9SIoXzAMlar2MPI6AkEy4M3vyE68mledNwKqyq9mh6+fJu\nxfrfRQ7nvR3CSsyF9SExYpUXQMq7tFcZnghs36BVenqqAPPBIyNM+VDwT6Ys\nBIQrsNXVBv3lHbZIsuqFDzu9l6xucdG21zrx/6furdLMAhXBYFrwP4LWSCR2\ns4Pw\r\n=H2Em\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n#### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.**\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n**Note: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.**\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n\n**Note: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommended to\n always include it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color)` | Sets the container fill color to the given color for an enabled button.\n`disabled-container-fill-color($color)` | Sets the container fill color to the given color for a disabled button.\n`icon-color($color)` | Sets the icon color to the given color for an enabled button.\n`disabled-icon-color($color)` | Sets the icon color to the given color for a disabled button.\n`ink-color($color)` | Sets the ink color to the given color for an enabled button, and sets the icon color to the given color unless `icon-color` is also used.\n`disabled-ink-color($color)` | Sets the ink color to the given color for a disabled button, and sets the icon color to the given color unless `icon-color` is also used.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color)` | Sets the outline color to the given color for an enabled button.\n`disabled-outline-color($color)` | Sets the outline color to the given color for a disabled button.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web button component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"@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/density":"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/button_7.0.0-canary.4757a16b4.0_1592862823500_0.4920196550446314","host":"s3://npm-registry-packages"}},"7.0.0-canary.f8f472762.0":{"name":"@material/button","version":"7.0.0-canary.f8f472762.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"991dc7072ae6e5c8a5a55483ac384e238fc01c9b","tarball":"https://registry.npmjs.org/@material/button/-/button-7.0.0-canary.f8f472762.0.tgz","fileCount":26,"integrity":"sha512-oABsbbLdXDga+31w/Nx3Y7uOOS9GkgghZs3YzNPcsBqUFO9xc9jqwzxY2OPZyh7vS+7ZEy41rT4QDW9AD31w3Q==","signatures":[{"sig":"MEYCIQDjXNnKQJiqoHj4xagtYPk8Bjy0jylJ1rgKwfQqQG3Z5QIhANYqewG5SHG+URMVn/Yra4h8zIKmpXykHE7NTBkJ/iIr","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":389622,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe8SlbCRA9TVsSAnZWagAA0psP/ifjFVEvUU9+kK9S4qJw\npfgGgMG3LKyIWtWiXrDIh1HOPOZd9JJ2KMSeELdZKkRIbnSwLEGiEBIwVles\n8nxHjC/MmKgr/MqmVB7xn8mvZO6+/Ga6oqztfwEEpNT+VvMs/8F9FCMmYEt+\nd+wFavFLrs8W016bNeC8LQi12zj3UIXRX79xEjkHB/s2gmiZmKJOEVRsmrNA\nekNvKwi8LxLakcQFJMNM8Q6fiQEA6jmsYvqiLq7NikquH1XrSBycwHY2Rvv4\n4207orPweMJpMy3rk/4+02MCo68JTaw9w7M/b9Hk2tuvAowoSijqe9DLKTgS\no0CkBQePG2kfH8jq69Gfsc5KubQzQqyvbafo6wu80P7y2g4b1A3mOCgWJbzf\nUCVFklqaZKjE/5mS4bo/BI/uucqKbHIaNhmVaTq95M2v+2wuNOJZgpLR5Wlp\nCbwNFUpnpYdnnd3q3oH+W9YPgyUJLZpdinh+w6EnvQHyODEy/6lKHfKu6Zdq\n8HmgDDSbp0WO7f/yphrLUrMcPMTP6VvSnEzUVa+RTwDXNUZrmZ8IH5nJ6WB2\nrJieJ2PRMt2bY3QB0x3ZDp4pOQV7+KyMvwUWxoQkcR2zCcqTvKvInVod/1rf\nrm5FBUNGrvfA2JdrhRQpozIYWMxhKv8OQWQ28DhioVRHj05/KKEJ7ksN6e7K\nU+Cr\r\n=j5h/\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n#### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.**\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n**Note: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.**\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n\n**Note: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommended to\n always include it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color)` | Sets the container fill color to the given color for an enabled button.\n`disabled-container-fill-color($color)` | Sets the container fill color to the given color for a disabled button.\n`icon-color($color)` | Sets the icon color to the given color for an enabled button.\n`disabled-icon-color($color)` | Sets the icon color to the given color for a disabled button.\n`ink-color($color)` | Sets the ink color to the given color for an enabled button, and sets the icon color to the given color unless `icon-color` is also used.\n`disabled-ink-color($color)` | Sets the ink color to the given color for a disabled button, and sets the icon color to the given color unless `icon-color` is also used.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color)` | Sets the outline color to the given color for an enabled button.\n`disabled-outline-color($color)` | Sets the outline color to the given color for a disabled button.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web button component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"@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/density":"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/button_7.0.0-canary.f8f472762.0_1592863066692_0.17285751155207207","host":"s3://npm-registry-packages"}},"7.0.0-canary.7e4d55c34.0":{"name":"@material/button","version":"7.0.0-canary.7e4d55c34.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"21463a20fe4286f13f9aad7900745b78840c15b2","tarball":"https://registry.npmjs.org/@material/button/-/button-7.0.0-canary.7e4d55c34.0.tgz","fileCount":26,"integrity":"sha512-gj0akluZeoCmacqB411d1vdRZOWJrAJaU/P5jg036aU0mNgPKmgBsCG/YHn/asK741tfO6qi4obRdfwEUdGD/Q==","signatures":[{"sig":"MEUCIQDFBA94zD2uYmHtdUoDpUpB6slU7eXEtTqkRjxR527wjgIgatW69tlYXj8qlvTYYnVb6x1X1G+vablXKwDMXttogCQ=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":389622,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe8TDVCRA9TVsSAnZWagAA51wP/3prBFgoOc0/ZXYdXL0e\nb4JvNlXGe8DpqoSB0xX7si8/PglnhJ3ZyommkprPzikLAb770yqAp3eY1aUH\nXA8uovVqLt/fJKFIXBIkpuPyBnyVQu5uIv9RAI18B8CYQurg5N8aklmBz1FF\nq2Pz5DypecwgfN210SDm9Bz+27Bbns1b2HHEaurhBVD15tJNKY2UiqIQmiEp\nnVqZqfMB40ZEMNPq3fkLH4lcEZGRP8h3RiQ6PLqEaQPgG6xzkyIbGSt670J/\nVuqyIAnWu0xr35+cH64sEakJxipWlBfc4zQ8os4YexiSWi8e4wgVvNz92+gO\nu/xZzuytT4j+rhSqQPadbssrtNc43T0QFeDUxZor3TL8ijQLvilENmFOk/5V\n+c/mZPeSYA/CfTe0NUy0PtS24l7aja6FChx2/o7VL+lkDoP7dzBhGfZv6XQV\n7CuzSW11aUiP+QGCMkHIL6nayN1Eag+VUEFDccV0FvPgiMmaC7SJmxOxBP/Z\nd3BYVKgYbAGjI0xaJYvA7GRPQbV/5dTrRPv4sy2AKtPWVUwQfplLonPwvhc5\nLKBCI8hv7nf/NfcWqWCW5ryrL4stJThqZ2tJlgA3ciCK0PS6Vx/TKoGTXKLj\nG+3BHTaf9a2EMUY9a62NvhcjUiJIKCtdIALUtdDNFU+eYxELSsAO1htjqcPF\nQcWl\r\n=NhL1\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n#### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.**\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n**Note: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.**\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n\n**Note: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommended to\n always include it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color)` | Sets the container fill color to the given color for an enabled button.\n`disabled-container-fill-color($color)` | Sets the container fill color to the given color for a disabled button.\n`icon-color($color)` | Sets the icon color to the given color for an enabled button.\n`disabled-icon-color($color)` | Sets the icon color to the given color for a disabled button.\n`ink-color($color)` | Sets the ink color to the given color for an enabled button, and sets the icon color to the given color unless `icon-color` is also used.\n`disabled-ink-color($color)` | Sets the ink color to the given color for a disabled button, and sets the icon color to the given color unless `icon-color` is also used.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color)` | Sets the outline color to the given color for an enabled button.\n`disabled-outline-color($color)` | Sets the outline color to the given color for a disabled button.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web button component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"@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/density":"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/button_7.0.0-canary.7e4d55c34.0_1592864980671_0.8976662089664769","host":"s3://npm-registry-packages"}},"7.0.0-canary.bd1dbc91f.0":{"name":"@material/button","version":"7.0.0-canary.bd1dbc91f.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"48717e6029711f175f0273e2329e5085e2810ad1","tarball":"https://registry.npmjs.org/@material/button/-/button-7.0.0-canary.bd1dbc91f.0.tgz","fileCount":26,"integrity":"sha512-USvmg1xNPtrU0LlLlMjWnBCalYD8Z+jOJ9gaWI/khenmz9zjIHxLMJbNVYAiKUnvqEk6gGVorkzkzZvR1PYe5w==","signatures":[{"sig":"MEUCIEebG/pfihnIXepePgva4xmbDRjmVKWhZgOD6B5qLZhEAiEA0D5rV5Mn5qGDkPX/aeb1tujaCrY6nNr0PcLyAI4nV7k=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":389622,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe8hGRCRA9TVsSAnZWagAAqr0P/2FIw/Q83W5YrGYepx39\nuyAdoYtkyDkkuOviSyjiBIWmT54wU9R6HSBUsWKDFiPeFKzB86L1HJeyWdSB\nzJGnIypJBXM9fNseBoAmWEkO17IQJq4V4cCEFJ5VQqHFYpVBuGPwvU5dmSFR\n221hhsB6NE1UKw+asLfupcWKnVMjPdclzPzGClQqiinJw+CJC/p6iSZyeyhr\naSJ53LOt30YLo91uazEE97GpQILoWo0CSdv9hVwyuIDc+fIdntjt1QXPLS3X\nvs5OjoO0lz1s0D5NA20b8tnW15/SJfrMHptj4/dhKMoK3miiHCfxN9WMuzrT\nsYiCpxcmsNI1poRULDTUCRJLLmUD5I2K0Ub1MK8YQqCBjQEQdJBbxvDb2B6g\ncGTMXHPIoEIUBnOVEtyzSe9Zunh8Atu0atDB1n5bIKGTBLe5loflcIJ1w9tm\nWJZVwobGpi/pC0ZbEYefAmr8LCgejOY6aw1g275ghFba7I/xWaoZ17e5fL2F\nNWHHQZX5sEePsP9Po0KeT1gZhpvkjERB/PUtCxAoDQyuvSRf7svCgM2Bci63\ngBGva0cb+8D7v7Fv/ld6z5WUmH363g/n6BzbvwTwDbM+dO4ETGkWU6qtxTIN\nNYVancoVG0w6DaISYEJ0ALQLHHebWPHPt9Aorzw3LCB/ws65M+WLTdPL0ode\nizkr\r\n=bkqs\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n#### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.**\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n**Note: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.**\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n\n**Note: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommended to\n always include it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color)` | Sets the container fill color to the given color for an enabled button.\n`disabled-container-fill-color($color)` | Sets the container fill color to the given color for a disabled button.\n`icon-color($color)` | Sets the icon color to the given color for an enabled button.\n`disabled-icon-color($color)` | Sets the icon color to the given color for a disabled button.\n`ink-color($color)` | Sets the ink color to the given color for an enabled button, and sets the icon color to the given color unless `icon-color` is also used.\n`disabled-ink-color($color)` | Sets the ink color to the given color for a disabled button, and sets the icon color to the given color unless `icon-color` is also used.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color)` | Sets the outline color to the given color for an enabled button.\n`disabled-outline-color($color)` | Sets the outline color to the given color for a disabled button.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web button component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"@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/density":"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/button_7.0.0-canary.bd1dbc91f.0_1592922512693_0.18441706142706105","host":"s3://npm-registry-packages"}},"7.0.0-canary.31523bc62.0":{"name":"@material/button","version":"7.0.0-canary.31523bc62.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"ee5080312c6402936229214598aeacccdaa885b8","tarball":"https://registry.npmjs.org/@material/button/-/button-7.0.0-canary.31523bc62.0.tgz","fileCount":26,"integrity":"sha512-LbPvL4nwdpp69bgIRU8YuPkz/n3k2VyI+keJKxQGB5Wci4+7Sl6rY+bX2RonAU/CsWrm1ryYSjrGNQBZeNlY1g==","signatures":[{"sig":"MEUCIC0z6/azcaRvIO0pgH/NOkwUvgjQfJVCQG3Iv/dyCcSdAiEA/N9su7ltIGL8ilG9mjm1AwaIXqDHyVaG3byERjfYVpc=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":389622,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe8hLXCRA9TVsSAnZWagAA7+wP/0G0AExhwHnW35SA3HId\ndnSALM5Ngbp7baFIFvQfyiWcHi+V9ITpt1EPyTT+FCXnRPMW2wHXMWrvdour\nxC9ujy5thA47lBu/uQ2lU7PpfaP2IsqQZxlFjO6nnU4fzhzt3B7S5emnfAMl\nNDQN1HHnfNVqlFg9c/dKJ7gznNNYLrUEljJmwyVzGcoJLXbSrX2FEXIkChiK\nUogKUYPitisZZAxiLvH5Zp5TiR0rG/USyOp+dP/AWg1WjftnK4ZzkeTwqp2e\nXLQxNqkFiLhsltRHWUBfLZTNWAWoKQDwG1X9ATM1RV52CKPfpa7+Q7WwYpxw\nvK68zqFM7sWcTViZIVOlOhvvlHvi5hwGd7u2CuYbgx4CEuDNauP1Om/njMpx\nCpaKe8ZJM0VIHJMAUcWlt+hrksiEP5oc/XnSsscd+LZF9EFt0ZlPeYUZIm6W\n97qPaypWrU6gfMfOOzV/f05Z5evf8xY+JnGvg8cTgQhTVyNInMMuwzqrAync\ne8IUvFdjW1csPJZ5n4277cmrtOibu80zxSO4V9+k+YatyAJyGG4ilUNXWkzv\nYbCpTm0m0mkAYEBATxnlK5RCARMDUZFJxBAK+xPz8t5d7oLrW/kASBTP6TSX\ndJDikVl/iAXqyvXucKaHPzO/GDwWpI/hNgVZ93qNscB6wC4pvhqEkLxFr2Dr\nIUHq\r\n=FLoZ\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n#### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.**\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n**Note: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.**\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n\n**Note: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommended to\n always include it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color)` | Sets the container fill color to the given color for an enabled button.\n`disabled-container-fill-color($color)` | Sets the container fill color to the given color for a disabled button.\n`icon-color($color)` | Sets the icon color to the given color for an enabled button.\n`disabled-icon-color($color)` | Sets the icon color to the given color for a disabled button.\n`ink-color($color)` | Sets the ink color to the given color for an enabled button, and sets the icon color to the given color unless `icon-color` is also used.\n`disabled-ink-color($color)` | Sets the ink color to the given color for a disabled button, and sets the icon color to the given color unless `icon-color` is also used.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color)` | Sets the outline color to the given color for an enabled button.\n`disabled-outline-color($color)` | Sets the outline color to the given color for a disabled button.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web button component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"@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/density":"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/button_7.0.0-canary.31523bc62.0_1592922839078_0.47267534109969733","host":"s3://npm-registry-packages"}},"7.0.0-canary.a96b6d4d6.0":{"name":"@material/button","version":"7.0.0-canary.a96b6d4d6.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"526853b3f7d1d1ef467ad75adecb6c74a08f127b","tarball":"https://registry.npmjs.org/@material/button/-/button-7.0.0-canary.a96b6d4d6.0.tgz","fileCount":26,"integrity":"sha512-zCnSo+DZeVWvRBvP4FyIhPIM7ZdoQOfH5VXYshpNOHA4Q+M2/PYf3MFkFGD44hg60cLM3zpVfwJI9MskSsvc0w==","signatures":[{"sig":"MEUCIQDw+LV0lUsLzVzIovnrkMwjRzO/uOkqD7SKnXn5JqN6egIgMNA71/muSin1dBo9Sk/F93YY9jR2x70BlJ0DVd4EjNM=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":389690,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe8hRRCRA9TVsSAnZWagAAaw4P/2e/UiVVIYE3qOdWR3ig\nIqKQBXRxB9rQ8sFBRaktoXdqC+P2HGUGa1GhZSYbkowgW4ynq0xGow30mj1Q\n1KOr/SsP4Ii3EiH6HbDrpCFBeHRAfIHIwjHTggFV9pG32kEVMA5brynmLNuZ\n/ZduNHinhPevoynX56IEDKApJp/EheD19Y/3JC+epo86EEzYtFhKznOGcUY3\n9W9oyBJGSjNVo33vRpOu+OAjznTDB+GwWat0fWLa1p71PRRhjiMc4N03tih8\nB8L5dGgYi1V8OpCj3He+AxHcNdhhs+gAhlgIRAntFOo4pZEbyi39mcl1Kktb\nOKMqJjZKLBa4aYedknudlF+p2pOy6nx3WTiu0kA+/UzLnQvPtia2MuR43AcA\nPMMaJIXMMa9mn0PCRIvB2iC2wLPrlcqXP/d+whBeBOuTOZldmWUfhrqXmC0+\nDKChYyDVfrZxDZuZecBMLgFcC+rU4pa50IN6qi9KQ5Ti5tlHK/lSm2rg5JUG\nYtTTIQCKqg2fZwDmSNicGsWsNXl0VqUf23JDedBIRXYOoIOGjx6LkEt63e0F\ndk4US1H14g+p7JRyrN6SCF1LLvpASiTA2w5kdCMD/XJWpDkvjALXkPo3H2Dn\nR8gmjdIDnaZMcQ/zp+b2NLdxJ98z61cTFYdJq1QyimzZ+IFV46+HsRSImPnn\nP4g4\r\n=blMi\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n#### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.**\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n**Note: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.**\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n\n**Note: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommended to\n always include it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color)` | Sets the container fill color to the given color for an enabled button.\n`disabled-container-fill-color($color)` | Sets the container fill color to the given color for a disabled button.\n`icon-color($color)` | Sets the icon color to the given color for an enabled button.\n`disabled-icon-color($color)` | Sets the icon color to the given color for a disabled button.\n`ink-color($color)` | Sets the ink color to the given color for an enabled button, and sets the icon color to the given color unless `icon-color` is also used.\n`disabled-ink-color($color)` | Sets the ink color to the given color for a disabled button, and sets the icon color to the given color unless `icon-color` is also used.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color)` | Sets the outline color to the given color for an enabled button.\n`disabled-outline-color($color)` | Sets the outline color to the given color for a disabled button.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web button component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"@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/density":"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/button_7.0.0-canary.a96b6d4d6.0_1592923217183_0.36998156055058784","host":"s3://npm-registry-packages"}},"7.0.0-canary.ef3a09533.0":{"name":"@material/button","version":"7.0.0-canary.ef3a09533.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"a3e0af396c8c8362c9fe23c9ef5f747629f9b516","tarball":"https://registry.npmjs.org/@material/button/-/button-7.0.0-canary.ef3a09533.0.tgz","fileCount":26,"integrity":"sha512-YldWlbvMaKtrQB5i7ygSdeBnEw5PfpV1wy0bSvRIvIIN1i3u3cFr76DGJefxQZ203ZXxZJlilNTRio/r/IWPMg==","signatures":[{"sig":"MEYCIQCNj0Y9rtvY2CFqKTOAAZzJvX/LcaMy5+iz3pCLthnu2gIhAOkSfbVJz1snJL2jEDgzMuErZtMi2hhqSLe6dGOjQrVq","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":389690,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe8hZDCRA9TVsSAnZWagAAH7sP/38y1GY2qg6T/v92ESjH\nFFCxcDyHKX1NsuWNgBLR6vhsCZJuX1SHn+/hCTn59abQj3HR29865rDmlt6L\nI45JahgUSGb+t3Mrd+pWLRlKzt+xPvrkRkk20Gf3d5Sg9kaEcs/lfoz82kUO\nzwwxrzEmwIXPZonGc80In/ZdreB1Fe2wqdHuK4GE3W7Dj+pb7r1SYUQK0iEZ\n52F3cH3Ly6KzhuoudK/D1bb7nlXNHCnDj2Hx3jZ41tGlMC9ZU+yCCkUM+9yE\ng6X97XFhENj7qZw+6kvpbkR2dg77MVP8YvySrdmtUEs5rw88A17LvAxO2Wkh\ncu6oMcqSX+VE4unwbuXo1lQE0af1iZlME/eGEBcBmMf91N1bkdDOUMP9avzo\nLPrC5cqmTDQejvE2XxVOSdFjy6Mq8KGR89UoaJnkSHJVwy/mz2AkI6SDf9b2\nudqv6zSWveZU1sUoB8kwUJ6pbD8lGcYHU13jkmpxoCFrib0LhDp3s+CYm7iY\nTpl3ZjbOr1oFig3pb0k4v7wVqCUWi924wWDCHEisiXGH0g42NLO4aejPrEl6\n1h5WAFpvXq4AYbYBZYsz34al7yIsf5vTZKef54UXj5hwxU3lv0vZy5gPAq7l\niPRwwPg/rY0mwYPwYK7EbOc5Lq24mNJBhifYjYkeBpl3LZPa2s0yXjYbrZUq\n58dk\r\n=tCQp\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n#### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.**\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n**Note: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.**\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n\n**Note: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommended to\n always include it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color)` | Sets the container fill color to the given color for an enabled button.\n`disabled-container-fill-color($color)` | Sets the container fill color to the given color for a disabled button.\n`icon-color($color)` | Sets the icon color to the given color for an enabled button.\n`disabled-icon-color($color)` | Sets the icon color to the given color for a disabled button.\n`ink-color($color)` | Sets the ink color to the given color for an enabled button, and sets the icon color to the given color unless `icon-color` is also used.\n`disabled-ink-color($color)` | Sets the ink color to the given color for a disabled button, and sets the icon color to the given color unless `icon-color` is also used.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color)` | Sets the outline color to the given color for an enabled button.\n`disabled-outline-color($color)` | Sets the outline color to the given color for a disabled button.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web button component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"@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/density":"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/button_7.0.0-canary.ef3a09533.0_1592923715553_0.21727659249372433","host":"s3://npm-registry-packages"}},"7.0.0-canary.080965f39.0":{"name":"@material/button","version":"7.0.0-canary.080965f39.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"1954cf6db232b0ba87493154f539465ba20f7515","tarball":"https://registry.npmjs.org/@material/button/-/button-7.0.0-canary.080965f39.0.tgz","fileCount":26,"integrity":"sha512-Eb9gMNxJ3mp2NYBrduJtxiAfqyjs2kbioYhyLOEe16qtDC5O5xIiWRM5bn/4VYpWY9mbw/dlRtZ479KRTprLsw==","signatures":[{"sig":"MEUCIQD1p9F/A8JY61b2oIyqEwumScFwmfWWLLXhV28cDFYh2gIgHw6oyRAj/kuplR2z7JhNUG+uShV2rOzf88gy/iHrzdI=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":389582,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe8h0lCRA9TVsSAnZWagAAC/sP/RmJ6ZGpIBkuGycw3vqK\n4emesLIvNnFkNxJuZNQ5+n97CTpHCp+ib1MhJnikW5ct8xbBYPJ5IqgBEL8B\nMwQTO+YiHmdh//vQg3kbSCvpHk/GEwHVnZOzkNSwt1zpKWMKOEzD24LDL1uZ\n+Jdv06IwEvCdXwCYh67n/RIHJv/wUMdOrP5YVii8UxYoIVeGkJw/R9Jcy0EH\nYKdN/2NpAoBS4xz/uWJKCAxil2JrunuTjy0RhZpoO/j8HPE+lKe4VZSjAYFc\ntcmgOOn8jv7tY09unhzaT2+u51n/ZoO4xeJFO5tW1WnhJ5yMIuC3Ex/61vZL\nFM7RyZmxSzRp/Big1PIJ3md0cpu7Tqh5QO8gayEzovnxXBvq1AefcMcEz+3M\nMWf7JdPp/vvw/FOQxkwCdvwlIfHg3UmNPQUEYnRlQDh4kxxDdo4EwPXlS7Ns\nXZovZApUP7pBtXXGPBccGbL+vqYj0bTgxqm9zrX+6ZFNK7o/dBfFue280sML\nIo+DFNOiPXadvW2ObeX5AnP9AqEhXnN0MZRFvDufP5yxL8CZBvYtkw0eB8Ba\nZYeHda5gPT5fHBNkTAobGy3IISUAMIMdJuPKGoZi8GrkgPWdyeXk4f98TiGT\n6KdFWiUGaN4yyYLKLH0EqJ5FCnMsKtBPmlaaT57Jng2CANPNumRM3JZOr4qH\neN94\r\n=w6n3\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n#### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.**\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n**Note: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.**\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n\n**Note: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommended to\n always include it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color)` | Sets the container fill color to the given color for an enabled button.\n`disabled-container-fill-color($color)` | Sets the container fill color to the given color for a disabled button.\n`icon-color($color)` | Sets the icon color to the given color for an enabled button.\n`disabled-icon-color($color)` | Sets the icon color to the given color for a disabled button.\n`ink-color($color)` | Sets the ink color to the given color for an enabled button, and sets the icon color to the given color unless `icon-color` is also used.\n`disabled-ink-color($color)` | Sets the ink color to the given color for a disabled button, and sets the icon color to the given color unless `icon-color` is also used.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color)` | Sets the outline color to the given color for an enabled button.\n`disabled-outline-color($color)` | Sets the outline color to the given color for a disabled button.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web button component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"@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/density":"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/button_7.0.0-canary.080965f39.0_1592925477280_0.2606961655230269","host":"s3://npm-registry-packages"}},"7.0.0-canary.1bd67b65d.0":{"name":"@material/button","version":"7.0.0-canary.1bd67b65d.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"131e890d0a50738593ea409cf072b7dae4dda3c3","tarball":"https://registry.npmjs.org/@material/button/-/button-7.0.0-canary.1bd67b65d.0.tgz","fileCount":26,"integrity":"sha512-Myz5qlrFWz1Q1sTzrlssHF6H+4Ucx/ZRrCDrQ6PIkN8I8aATqFqlXI29K+zena0BbtI0VE8smMutACVfsjEk2g==","signatures":[{"sig":"MEUCIQCGZCLCjbR37gyjyJ3aFkZx6iIuyuLtszY1449XEN/SqgIgKBg4A/PMgOJ7MTrRcEby5FbW7P+0beSiTmhi9fJmQNo=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":389582,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe8icYCRA9TVsSAnZWagAAuD4QAKFzrnDgA5lquVr3NJ+X\nmSktJVuAMkKoNby1pGY3mHjrjBLZBKJM0lvDcR11Yf1riPofKs/Uk6anoxRk\nn31rPzorq2aLYITa7z5JHF87WxzmCTbcUmdDPzmqU7yOh5y2EljVj5tl1QtS\nf8c2CS7zBbp9smG9oW0TWjOf/mm60o2vaWRYTJ9j/pAZDvQ00rVqZpfl2XJQ\nEpuCBVNXfc3l2NiIBBPVn3UeQGPwBi7nvlCfleq5uJUWI9CO0+Xi1gph6te0\nSSF7TDnkf/ucu2w5TxaLG8EOhNHOlSgTtSBhupwADkcCgaVoUF7ObRuzFBnu\nr9b4AxN0RSAgU4hbADLxgyxmUZno6rQI7kc4NCY1UV+f2AkB/t52sIXmwpmp\ngk7NWESVeYcmO4A++4WENcWlEsdYMqZFuF6/L0wHN3Bw+zltubOHcu4hvPs1\nyoWsglh67OX2FxANchj6MJpulhT0Yb1jpwcGi//XcIAlQK0VvBgU6Gn0O/07\nkQrEcDJUSnM4m3PPT+AO2+Zoxf70DhtmoGhNErkUfvvAh4Tuotwdxf0lfbR2\nza9BvEHvXlco6aq1eZOWIgyVG+qE2Mv+eSLy0I7XJXCtB/uKld4V85t3UegX\nW5O7G9Dl47TFSYHeuJjLx+w2K+8wdowALKcDb74azgWjEuZOt4U5QbihoYZs\n0qMl\r\n=wrAy\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n#### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.**\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n**Note: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.**\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n\n**Note: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommended to\n always include it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color)` | Sets the container fill color to the given color for an enabled button.\n`disabled-container-fill-color($color)` | Sets the container fill color to the given color for a disabled button.\n`icon-color($color)` | Sets the icon color to the given color for an enabled button.\n`disabled-icon-color($color)` | Sets the icon color to the given color for a disabled button.\n`ink-color($color)` | Sets the ink color to the given color for an enabled button, and sets the icon color to the given color unless `icon-color` is also used.\n`disabled-ink-color($color)` | Sets the ink color to the given color for a disabled button, and sets the icon color to the given color unless `icon-color` is also used.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color)` | Sets the outline color to the given color for an enabled button.\n`disabled-outline-color($color)` | Sets the outline color to the given color for a disabled button.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web button component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"@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/density":"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/button_7.0.0-canary.1bd67b65d.0_1592928024004_0.790450047556831","host":"s3://npm-registry-packages"}},"7.0.0-canary.18ca31248.0":{"name":"@material/button","version":"7.0.0-canary.18ca31248.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"9ee53688e3b26236a18d33a88db336708243d5f1","tarball":"https://registry.npmjs.org/@material/button/-/button-7.0.0-canary.18ca31248.0.tgz","fileCount":26,"integrity":"sha512-4XlhPeNMEolCcg7Ykc49JKb/CbwbWrE1xlBzTxGJW7TwliXv5/An2/kY0JnFIqSZosHa6dA4/jDpj6wznRdOfA==","signatures":[{"sig":"MEUCIQCUJ236aH8oW4lTTQfnW2azjtXebpEzZLoLPAfy1I0TwwIgLNU+pL2cUwjvgS4B1jzI9IulRlD027oCE9cv25llSQU=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":389934,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe8kkSCRA9TVsSAnZWagAAJDoP/R9DE8g5KEnbu5X0hK5W\ngJS0t19odegvBpRRkQIuhB3zZys20oDFAp+p46zgcN8eH+wdDPNBAjTzEMK/\nwL46jVPrtaEdtv4Yv8823C4+tLm2fP6MyEKBG/BxAvwt3xnBYhNqWfCh0XWB\n5Ek0LcNQXs9Z0s94Cg6321cXYsNlZTyDAEh6OpmvBnOU7mICkMXJbFbx3EqU\nrehZaSlfw+6BZpijOYTU7TMcIgBor+VLb3HipYS3OHKFsuupIxsC0NqfPM8D\nfqjolfLMvdcRBu6GeaACgzPdnXB6tCXuuv+9Zr3t76ETZWxKeXcLUKtuKcDM\ncvix8FQjXrWnbWRKBUSjJfVR7GTy0U+xhELgeU0QTBJCkO+n9RTlBOBGiITJ\nMhgH1JKxgqqDhc3LhSdL5qCggtl4ibdDloiNnC3X5JBnf6b0vNUBpIfo+Lg3\nTfXV5Rju7MVLDwixd6mbIFFbdsYKORNYJf6OG90E1eNA81WQMZjs87QzHXZ4\noX9zMjluer2nGvRUql/l5W5tdit1r/OTeC8LfUErW6dSnt/S1UnAtHSKu6Ld\nZCuRuVX9xc5vxkY0f2OJRkV/jTbZ9v3Uke1rdq3k7osiKLcREgB8CD4jypXS\nj2t58HXQ30ESlAMBVviiGtrBIdQCXp/+j02MFR/mIBkUtWZPSPaxgAfJ694a\n1hsV\r\n=5Jfg\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n#### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.**\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n**Note: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.**\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n\n**Note: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommended to\n always include it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color)` | Sets the container fill color to the given color for an enabled button.\n`disabled-container-fill-color($color)` | Sets the container fill color to the given color for a disabled button.\n`icon-color($color)` | Sets the icon color to the given color for an enabled button.\n`disabled-icon-color($color)` | Sets the icon color to the given color for a disabled button.\n`ink-color($color)` | Sets the ink color to the given color for an enabled button, and sets the icon color to the given color unless `icon-color` is also used.\n`disabled-ink-color($color)` | Sets the ink color to the given color for a disabled button, and sets the icon color to the given color unless `icon-color` is also used.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color)` | Sets the outline color to the given color for an enabled button.\n`disabled-outline-color($color)` | Sets the outline color to the given color for a disabled button.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web button component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"@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/density":"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/button_7.0.0-canary.18ca31248.0_1592936722288_0.8917929633005786","host":"s3://npm-registry-packages"}},"7.0.0-canary.39cf00836.0":{"name":"@material/button","version":"7.0.0-canary.39cf00836.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"6b1cf645903ef5a6665db91ce9b051c5cc65d8b8","tarball":"https://registry.npmjs.org/@material/button/-/button-7.0.0-canary.39cf00836.0.tgz","fileCount":26,"integrity":"sha512-PN9uz5kt8N3vFPmcbgE4kHuD5xTKBZ5RGakNRtDgV40FutuBA+mzonAkmzxfiyOfOVCtm4MPCTbEInKfj8uv2g==","signatures":[{"sig":"MEUCIGpAligOXzMp5JB/D2Jrb2D7POss6XtZ/hrH+iKDuQvSAiEAm+2Mq+HxTM7hPvGDoN8ntE7H429WDTPODHa8JNWagKE=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":389934,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe8k5yCRA9TVsSAnZWagAAZrYP/RI1+ECgVytYrOizLZYq\npDnwzhD4ZD8JxmGAJtv9nKj5OpCjoI1NINpTwqcOXrxfTv7TyDPmgUdyvA/J\nM+KXugXl2a6ug7Dtpd9djqLQbiLb7p9e1CkNs8wXohUVRRRCoqFzoA//m+iK\n149MmXRAlmg673qWOxOFSLNwOD8VN6rEhx1Q3R3ssKTTk5V0PPVpIm5FlPXs\nzjZZQ5urM4CNdUsauXlfmG1JdzTa9x/ZXNETtiiy1ZQbxAhv4eK8cThN1ih+\nVzFGm5ursR1IApp2k0PPh0XUAzc6d/ECFQLVqq2B+77HrNA8pkfRfVXX5hs/\n0Nko+W1+zDa0PqBivsxFEohJ2UCPPqiUXaPYqyJG1vglQ7tCKpMRZ3MlUMJp\nKbMIo9NdGn/eCo5zH3xq2dhNUeNpeuGUk9xpdvSYh5W08mKuphVk3RhnDAlf\nUZwSklUmtCzjL8Epk3Dth/leQyryB3IVELwKwmdwWR+441Xgn7qjgVsmQO9z\npxZTi8gvR3Eue8xYVxL5y8ZSp+av4efB/EcEim6Rlwl1Iiz9U7VhEirDo78s\nDkm8hXhsklRi3IGmG2fcCLQ/B7EktG783mL56xxB7+zlOjg2NXGjj1O50S62\n2yj2hKmGmoox8NtFdEbTUBwJES4NP5572EHGpOxB7VN2wa9ab3JA53SFPOwS\nlqH5\r\n=qW4Y\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n#### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.**\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n**Note: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.**\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n\n**Note: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommended to\n always include it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color)` | Sets the container fill color to the given color for an enabled button.\n`disabled-container-fill-color($color)` | Sets the container fill color to the given color for a disabled button.\n`icon-color($color)` | Sets the icon color to the given color for an enabled button.\n`disabled-icon-color($color)` | Sets the icon color to the given color for a disabled button.\n`ink-color($color)` | Sets the ink color to the given color for an enabled button, and sets the icon color to the given color unless `icon-color` is also used.\n`disabled-ink-color($color)` | Sets the ink color to the given color for a disabled button, and sets the icon color to the given color unless `icon-color` is also used.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color)` | Sets the outline color to the given color for an enabled button.\n`disabled-outline-color($color)` | Sets the outline color to the given color for a disabled button.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web button component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"@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/density":"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/button_7.0.0-canary.39cf00836.0_1592938097693_0.7695079657019857","host":"s3://npm-registry-packages"}},"7.0.0-canary.1bfda9e05.0":{"name":"@material/button","version":"7.0.0-canary.1bfda9e05.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"41f2e36feb9291d3f604dfff58465fb95a246828","tarball":"https://registry.npmjs.org/@material/button/-/button-7.0.0-canary.1bfda9e05.0.tgz","fileCount":26,"integrity":"sha512-w7Y5lV8GnlK9ApjWQyO6aWLLYbhBAHXK6Qb5XdAxA+7RqAZrfLb5vDO7ZXdQ9Th1XRXPMbQboNlwYUcDvyMMSg==","signatures":[{"sig":"MEUCIQDdrrlK83oqfNZwwJNQdw75sF3Hqm7oN35EHg/usN5KtQIgX1abp0SGmKeZoYxvBz5PEPDU+YWFtz3PRB1cWWQ10fg=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":389934,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe8lFeCRA9TVsSAnZWagAAsaMP/iDXsd8IQoGD2SlvAnwc\nXAUAJXs3fmgLPI7zKBF7PvAkp7NmxIIj5gRCUTiJBMNvrF8Rydcrgnn3GZdl\norElCLG00796jyQr1OZD+qpKPO0botebmIJ6R3h42jukNpcX7fvQbg9XgQEc\n0q8AzRQistALORem1K0NVUcUZnHLxBRckW6tkGTEUTc7qshcogY9ClaJDuLT\n/uLHxwwNxQsWhRkY5ci5Ku/z5w+DHoN3PzUvO148ydjEw5gNs537t+Otw5Hj\nvEEQbTKtpthIjFOIJbMgr9rpSUnGsNPYISr8Nhp3PuGcli17cHJlRWE3snbL\nsnUPXtSkma1RbWLkcLdSV1HyiXEM88WQio4N4MpuHAbf/rIletg816LdNNl1\nm8Hlxcy3YhOVPxwQRASQUTXMRn5zn0RLLGhmQ6BbweEP34OvzD0wD+agy7vQ\n+/CBxJ4to2CBS/Hatd9UPyoPSdFJWZ2hpZDCQSrwTAvgaUXr/52XmwnkbHtx\nYGrUjE0sG8JF1cv1fy1tMjKlrC6Flo93bODRo+eHKWh0QZR8wTeyuy6VFYzX\nICCsbBe+aSf5ob8/hbMFKW/UsapT2rg3ngggZyKMSZ7ZhRJvyAx8PCiUcdCm\n+DGW5gjzEy6cCitsW2M78apR95SholHALVGl1k45VHdcE8ofdYKWEq5EAdaE\nPXLL\r\n=q+Vt\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n#### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.**\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n**Note: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.**\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n\n**Note: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommended to\n always include it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color)` | Sets the container fill color to the given color for an enabled button.\n`disabled-container-fill-color($color)` | Sets the container fill color to the given color for a disabled button.\n`icon-color($color)` | Sets the icon color to the given color for an enabled button.\n`disabled-icon-color($color)` | Sets the icon color to the given color for a disabled button.\n`ink-color($color)` | Sets the ink color to the given color for an enabled button, and sets the icon color to the given color unless `icon-color` is also used.\n`disabled-ink-color($color)` | Sets the ink color to the given color for a disabled button, and sets the icon color to the given color unless `icon-color` is also used.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color)` | Sets the outline color to the given color for an enabled button.\n`disabled-outline-color($color)` | Sets the outline color to the given color for a disabled button.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web button component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"@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/density":"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/button_7.0.0-canary.1bfda9e05.0_1592938845894_0.5443955615943517","host":"s3://npm-registry-packages"}},"7.0.0-canary.08731bd95.0":{"name":"@material/button","version":"7.0.0-canary.08731bd95.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"e1fc006b3d0dfe2f5a73f274fdcf6862e230f985","tarball":"https://registry.npmjs.org/@material/button/-/button-7.0.0-canary.08731bd95.0.tgz","fileCount":26,"integrity":"sha512-jGJSan40eKNHQKni7BW1EztpjgJgpaPD2k7ZUYJ9z4z/Bvy8feLgGTqCdiqCCurvkpoYsibp1PhKrF7ZqZnnFQ==","signatures":[{"sig":"MEQCIGr5WZDxIiTgxm3oHOsvsYCYsfotiZW/llq128MP7luzAiBZtOrDF5M1br5VtRnDXDAinB1v1/d1Ud8v3LUSy1n7Ug==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":389934,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe8lH5CRA9TVsSAnZWagAAwjAQAJSRLuyT4H4N86JGbJ0Z\nhcN7ac1Zob40OgWAuS8tTNs94XiBj/dK3VsZg7DV0Bb0aUizRzD/D3SfbFTC\nqvZlGcBDNfO4leupvK+ECZSNPO47wYfhoA23hunOxkmNSCENKYUScLLGh5Np\nub1vaDbfY8D9D/2UEB1lpVd/RDn5Tt/zOsXXKS40kD/PpA5iYwpzmzp4IdZL\n3E/J4hR6o1jzCUsndhp3lNY3iFV84y7uYjsySPIqcLcR0UYiXhAh6MlG2w+a\nhhc0nexfVH1rKkoEgZA6PdDjpNO0j2YyxPkwqr7tclnXFe1dOkQSJ/MmQnul\nG1tK0gbGsV19iBG8h5wJNcGDwV/YEvZo/0/LE5Qzk61lr+bGhbVTOr8VFYfg\nh9XG3y7958c9zobjUM6C00tun5VNy1ogo34kU13Gl5NYf72sqhcD6yQSKf3f\nKFigvQadrz9l0gQB+0YIKFd27q++2uwJrVxF7lAfIL8JxeXaxBK4kayU33xB\nkBHH0Npm1qlrgQRrBnUGI66iohXiSYTQgbuh5ZBETEoFZuz8aaUZXb/QQRmc\nKpZQtYvbELXApt2zfswto5cgUp0734MYmLikOg635s7iQO5f+CpG1zdG/dMV\npr9c62HVX4H48qBo7VYTUAOElAJURNEk4vNDujBBjraX77Amw7DTl+awXjPx\npiPW\r\n=2XZs\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n#### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.**\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n**Note: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.**\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n\n**Note: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommended to\n always include it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color)` | Sets the container fill color to the given color for an enabled button.\n`disabled-container-fill-color($color)` | Sets the container fill color to the given color for a disabled button.\n`icon-color($color)` | Sets the icon color to the given color for an enabled button.\n`disabled-icon-color($color)` | Sets the icon color to the given color for a disabled button.\n`ink-color($color)` | Sets the ink color to the given color for an enabled button, and sets the icon color to the given color unless `icon-color` is also used.\n`disabled-ink-color($color)` | Sets the ink color to the given color for a disabled button, and sets the icon color to the given color unless `icon-color` is also used.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color)` | Sets the outline color to the given color for an enabled button.\n`disabled-outline-color($color)` | Sets the outline color to the given color for a disabled button.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web button component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"@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/density":"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/button_7.0.0-canary.08731bd95.0_1592939001193_0.1280312798008949","host":"s3://npm-registry-packages"}},"7.0.0":{"name":"@material/button","version":"7.0.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"9d80a580997d5e053d2947cb879031d042929473","tarball":"https://registry.npmjs.org/@material/button/-/button-7.0.0.tgz","fileCount":25,"integrity":"sha512-Y6dGxtXBEXa2Bnkj66nyXQo4yc2OTXH00NCGinf+rP24pASxIV27pHwW64zjoTAdJYhZbyrx+wyk8fN9tk2yag==","signatures":[{"sig":"MEQCIEz7ov+yjSkyC7ysPDLCw8NbljHVrtitLFsQ8K08W0f7AiBbmGNsfbvz2a9arqblPM4swHscDnlpwlEroYWGzf1pnA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":387603,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe8lPTCRA9TVsSAnZWagAAAG0P/jS9jf0yU5KplIKITucS\n1DKaFmAumeMi/uCbuX8YTYTfq9RXuJxa5rYqPIjt5BZ7YJKLjkMwa+LYhdrL\ngkCo1Plzjicuas/NSre+Xe7piNa0KJINykyJbi8P+r4KGSsFGdmAr8zD/dwN\ngjk9fprrEtN+OntdfvQZ8yR2bWWULZE849JutM/5uSErSGYG3cF7ahxZqKcs\n7YC0pLpGllTIG45RHIuW7Ly/oyPy06GSh9Jxvyh2ZFpe9xFrw6k1ofCkXXWe\nWbYWuM+Tghp6E9FiXi0j/2FqCpMYxX14xzBP1CzUNtqaCr0aY9LVy3trFK2r\nRDXjGta6BTmzFJO64oMB7FyhpX1oot0N6LTojXqrv7WwtCOaBJvbWEKQzXpd\n26ZqCfoXBod0Yjn473BN+rF9xBsXRxM03Q5XYa9yJeKUHUQDksk9rQguC82a\nFufKRwKE2V9loNxSaiMas11GS4oQWq8Y/5jYCV3Q7gfc8HURakXDrn0nuR52\nVmYxjzazm/5j7DQL27vWEwRER4OSKeIJ6O1GXnvUmi3IO5KhoEgQYaR35qto\nU+jXB2v8UCaGNCg9UmBUWrwNRMpK9cJ6hd9Nx0K9NZI96BNYzdQ8iZm/WMwu\nkE/52BJ4H8pBZjVvb22jRkImOz1bOWu1KdWdvQSLlJx8qSA+qxlMT5TsrnDC\nvL+8\r\n=oEir\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-button"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web button component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"@material/rtl":"^7.0.0","@material/shape":"^7.0.0","@material/theme":"^7.0.0","@material/ripple":"^7.0.0","@material/density":"^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/button_7.0.0_1592939475212_0.7544024824325588","host":"s3://npm-registry-packages"}},"8.0.0-canary.a3212b209.0":{"name":"@material/button","version":"8.0.0-canary.a3212b209.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"110ef296fa71e357f1438979834982cb46378d9d","tarball":"https://registry.npmjs.org/@material/button/-/button-8.0.0-canary.a3212b209.0.tgz","fileCount":26,"integrity":"sha512-rUmwwUUEJEkvz7TpDDce+ugx1PiGrgDot01e+TZlbQlOcb2Plya48ntp/I2KkpIIkawwUdHCpqJWB359PGz9dQ==","signatures":[{"sig":"MEQCIAN9FCSTsYAjPt43Ca1InbSM79fW4hUu8WiqGGjPirjdAiAWc21d6C2vl1rzAB5U0Kh6Zy4nzhUTjCqwJtfW3NoiFA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":389934,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe8lQHCRA9TVsSAnZWagAAlxgP/0aifSCC2cGHnnQqmGfM\nsWklMwc7GY+U5Hilj8aRPj3Tx89tQmk5HWMdcB5OYfM9F8v6q+T/KFffOp5/\nSu2QKHVpIOTrt7Sg3cGxJak2S8W66KMnbsxIfxyWtqvWNq8e27wlutiMBaz6\nE421MIqSyzIvjaFv1YgSygYhz8URDu4b1xHRRn7JepyXJWvAYPzKTIk7e9I0\nBQMQiF9bzNtNPQOmS69zZ/qikMJWDVQUi6ePj29qsY8sGRTqE4CTOoSS1IV5\nP86FtaHJDYL9S8i/8zTw9NCGIeK/fqUvOPBP5EQ6kpLo13uN98FRbVhUvvMt\nDiS12Wnjt2Tm8kstQSQ7KziA+NcaEAaiCSfUhHxdt5dx+490buifz9WVvDb8\n+Bf6JdPOU9+5A12L8dx8D3V8gyQ7yO49g6yUH8sx0AmqZstVNBwAFEmMiXOo\nk/GOjuilSCyj8ArpdyHL0DWbRNOddtb7tn4xBda4z6EyOKSVnx1YNFZmOIpU\n7n7uQbV0YokduvZC9uwA5WADNi3TylJPzgfe7R5nIfN7PJgZDl62SAB16pVx\nnoPqY4m3FzbeTjqxXmnrqnHjJXQMH+YTXbRyEd39Z0B01ZbOsHEOizYaT1Jd\nljja5vrXS71Mz42ecbJBZWStm1RXcYxp/x4Q8n42Nzq+AtjzGZMIcE6G7c0w\nok27\r\n=Y+5j\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n#### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.**\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n**Note: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.**\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n\n**Note: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommended to\n always include it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color)` | Sets the container fill color to the given color for an enabled button.\n`disabled-container-fill-color($color)` | Sets the container fill color to the given color for a disabled button.\n`icon-color($color)` | Sets the icon color to the given color for an enabled button.\n`disabled-icon-color($color)` | Sets the icon color to the given color for a disabled button.\n`ink-color($color)` | Sets the ink color to the given color for an enabled button, and sets the icon color to the given color unless `icon-color` is also used.\n`disabled-ink-color($color)` | Sets the ink color to the given color for a disabled button, and sets the icon color to the given color unless `icon-color` is also used.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color)` | Sets the outline color to the given color for an enabled button.\n`disabled-outline-color($color)` | Sets the outline color to the given color for a disabled button.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web button component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"@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/density":"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/button_8.0.0-canary.a3212b209.0_1592939526772_0.6131349282330407","host":"s3://npm-registry-packages"}},"8.0.0-canary.15e81fe98.0":{"name":"@material/button","version":"8.0.0-canary.15e81fe98.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"087fc320fd11f39b78d351fc37d5fe3c28c724cc","tarball":"https://registry.npmjs.org/@material/button/-/button-8.0.0-canary.15e81fe98.0.tgz","fileCount":26,"integrity":"sha512-GEIQwNo5lYGfuGwgve4PTd35rHtOtiOG+C7hSlNTmqJ7k3V5nid/kyjB5F9wmWmDHwhBoAM3R2UA+dv98dFr+A==","signatures":[{"sig":"MEYCIQCyakbzrnj3w98f3Vpf/romRYFbTulHYnqptO8fQ1lX0QIhALkt+Pq7FQ5UgF7sF8yP4SaRMTHPx0TNdAfpcNTzo9iA","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":388158,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe8lroCRA9TVsSAnZWagAA704P/0xapqWBa8/2pd0/Mvm+\n80Wo56NkCWLfGu5N4uUOtCH9k/T5IqnbVihA0xbvKxcTIH3BTqXiIu7WmMQF\nx24ZQhaKME+rGRUR7wv9T+mXPp7M7JQS8VZE7iIANMQKP/0aDLFYwcYFiKHH\n3Knch7FnAHDQD4BO5zHSTNdoPS1Uto22lC85RpYrJL6ihr48SdCifvQ14xu8\np9UsrxukJACAaqCY/76Ovq5M/Br0JNsHrtqB8/HXgqSTjnh1FJIBidleCIuf\nae2oxxah+blH0KHQ0qbrdIaG9f0lDQyN1LtSSsNl4pNljX8a6LAKcIXVcIGU\nCZAZrLNWY1n13B1SjhWDvQQE7dZ9mJXXSbcI7JDDqfCoi5L5dZNruqsgHVhf\ntx1DqMIIVJH82rPzZe5D+bgaPDtweze8GU+QyYNwxYv9R9MxwqVzt1uOxzcT\n1iwVc93OiZhHgikrLK1fFE/Z/nAFFNXRg9G/fLxdmtWuwLVTsWKb9nuHo/fZ\nWrRFx091EZg2vSt5bzpDuR2vLEDiyfKUByYJDbtq9UXHVQc+zdIHCG3Enlk0\nPgNw5t9+I/VJUezFdvLoJZFUxzIWm7FOalglmlwRYsemuowkoyl3x0HMWiI2\nr1hzIFSkl8H8TB5jnEtiUZhI6+AmmYe+AUBu0NmE2Fin/3WPLd8CuHqUeyMs\neGhm\r\n=6iYg\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n#### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.**\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n**Note: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.**\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n\n**Note: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommended to\n always include it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color)` | Sets the container fill color to the given color for an enabled button.\n`disabled-container-fill-color($color)` | Sets the container fill color to the given color for a disabled button.\n`icon-color($color)` | Sets the icon color to the given color for an enabled button.\n`disabled-icon-color($color)` | Sets the icon color to the given color for a disabled button.\n`ink-color($color)` | Sets the ink color to the given color for an enabled button, and sets the icon color to the given color unless `icon-color` is also used.\n`disabled-ink-color($color)` | Sets the ink color to the given color for a disabled button, and sets the icon color to the given color unless `icon-color` is also used.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color)` | Sets the outline color to the given color for an enabled button.\n`disabled-outline-color($color)` | Sets the outline color to the given color for a disabled button.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web button component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"@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/density":"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/button_8.0.0-canary.15e81fe98.0_1592941288565_0.7554922175137455","host":"s3://npm-registry-packages"}},"8.0.0-canary.004c9d392.0":{"name":"@material/button","version":"8.0.0-canary.004c9d392.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"d72a62eb0e86b8c9771ce6840480b26ab9f327f0","tarball":"https://registry.npmjs.org/@material/button/-/button-8.0.0-canary.004c9d392.0.tgz","fileCount":26,"integrity":"sha512-wP3SPD2dqiqrbwwOt7dQQWE60u4XfC4B0K7VoU+Enrr5lijzLTwX/EGSyABfXWciSJWdnJG2uj8awChBYxNWFQ==","signatures":[{"sig":"MEUCIGNIzM6anYGyWnymOoV7zmaaNN79UxdHQmZ97py5qrcPAiEAgCYmU4/XYMxdBFYWZwz9ZjAe2Pzj90DSyy+BmfxFNTo=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":388158,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe8oiRCRA9TVsSAnZWagAAtlkP/ij6FMqQiAmfrWchOPD7\npuru5i000/PwA7+zGCP2MKKvrfhW19rD7BoeJgmUjsVItrDhqwLPlpiqvMlE\nln/2jh6ctDBCes6nvLXhVjEnxRbPITX3qWQu0tYvgOSaoMngr7JGDKfFxVwN\n6CabMubBlrmPFx+VztfcTeDvz/22GB81siYMBgVO2Y8BGed+iVJMM7LR90Rf\nciZrjHtOrWzri+veF8xC0Nz89YMIGNibPF6ycqEFcfE+EXsEzXmiwvuWwIcu\ntIvshNFz3nItPgtc2GueVcRrYuvRyBX5srhF09dg5W19wFiTZC0r4R59T8D3\nvxCLX7OYkJQlmzVzI7E6HMlR6w9jXW/Wh1ubYi6PQ/JmM6JOHPIYTIEWhDf8\ndSS3rjVR/OcGdcjVk1+7hXT30BXyfew8rLeOp7fNRTteZKzf39smn/jobSOW\nXL13YtlicoFgWJeOjiyN84kOPqXtBxdsRh7oT9K+N1V9oD8JsMnZRi5cmzhi\n6GWhUwxIN6gXwUQRme+w4IY+U7J4JFQ+JLrjK2gXDde9OQEkaI63cdGUaxWk\nl29lNyv6i56PDXNc8ED0wQ7gDl1fT2CUWPrxvNIehKUcPi0lK6h91BAwwBe3\nv7vmVzPEiKKM05yiNbz0GL8Zf5UyUPm3YSV7iB2ew6jeWEIcOSKMbL8wOgE2\nHb6T\r\n=amqM\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n#### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.**\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n**Note: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.**\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n\n**Note: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommended to\n always include it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color)` | Sets the container fill color to the given color for an enabled button.\n`disabled-container-fill-color($color)` | Sets the container fill color to the given color for a disabled button.\n`icon-color($color)` | Sets the icon color to the given color for an enabled button.\n`disabled-icon-color($color)` | Sets the icon color to the given color for a disabled button.\n`ink-color($color)` | Sets the ink color to the given color for an enabled button, and sets the icon color to the given color unless `icon-color` is also used.\n`disabled-ink-color($color)` | Sets the ink color to the given color for a disabled button, and sets the icon color to the given color unless `icon-color` is also used.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color)` | Sets the outline color to the given color for an enabled button.\n`disabled-outline-color($color)` | Sets the outline color to the given color for a disabled button.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web button component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"@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/density":"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/button_8.0.0-canary.004c9d392.0_1592952976793_0.5366923001767163","host":"s3://npm-registry-packages"}},"8.0.0-canary.03bde00f5.0":{"name":"@material/button","version":"8.0.0-canary.03bde00f5.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"cfb188cbbd7fc25b3d178f2f5fd4adfeb362f963","tarball":"https://registry.npmjs.org/@material/button/-/button-8.0.0-canary.03bde00f5.0.tgz","fileCount":26,"integrity":"sha512-zZxA1zdlyVj48LujUiq8BTz6evO8hw2W8Tk00y2bMzqrPePi1QzxY7G8cYXr1YoiP8pP+oUgxlQR2Y7iRKrRcw==","signatures":[{"sig":"MEUCIQDZBuKbvxyH/nXNUUfREbTKGkIZJdwZ14WH+v251lWH2wIgQZhtv0UYm/YJ7H4Y3JHGmxvcFf4pS8dI1DwCU/BdMOM=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":388158,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe8p7/CRA9TVsSAnZWagAAo/4QAIDcaxB37tkMCYrd3UlU\niSdDRKMjSuvT3+6B9Hl/YOdfH26zgiev2sRyrUyw33JL4cShCdYpvodbwgxu\nEXtNInRXd+pMPN1pct+Qma51i5wY6So8LsrafSHG5y8QCWgFUjIhukP3FXrl\nY4OgsUs8QqcNwN+QwIJHSZ8bV30QEba4ft+6FLyluVT+5V2+UevtZqS91HUq\njMrOuLSsEQKXnclUn+viEOWf5E2ANHeFuZyxUyTBWA1n+N95FJdEslKatw/S\nASB/win2XGLE0wiZMbx6gfdrco9p/6pbQ4jSdSrbuH0Pl8rglMWZUp/Qjaz7\nd6MbwmQfTy9ZfxWUQdyULIxL1N/sSROn0FjHEahbQmi1e1km/TwDI5qY18kc\ne9lbm7FuHxdTZB4R0nQA+facCR7BF9UYCSTI65QRThzcOlNzjTKe+wnTkQBo\n4nJiMfS4RPYMBIm+E7snIm+MSVe1KG8ZYpG9Ct17eX8v3FUPYeQHelO1IjD0\nEKCuCrpFzsiSr6M296f2V28g30Yepep0g//QU2+yuVKOiLxleDL1rz+B72qr\nRYgLj0VwkINj1BwfUwaQQP3r2T1OBhpFBuv8ARkjEKt4YO4trj96nzZTbF3E\nIUELbilJCrztjCvWExcz1+kY2MYbzvMUEK31Lb24sagarqLgCO8wPNH8isTo\nK+92\r\n=trxt\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n#### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.**\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n**Note: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.**\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n\n**Note: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommended to\n always include it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color)` | Sets the container fill color to the given color for an enabled button.\n`disabled-container-fill-color($color)` | Sets the container fill color to the given color for a disabled button.\n`icon-color($color)` | Sets the icon color to the given color for an enabled button.\n`disabled-icon-color($color)` | Sets the icon color to the given color for a disabled button.\n`ink-color($color)` | Sets the ink color to the given color for an enabled button, and sets the icon color to the given color unless `icon-color` is also used.\n`disabled-ink-color($color)` | Sets the ink color to the given color for a disabled button, and sets the icon color to the given color unless `icon-color` is also used.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color)` | Sets the outline color to the given color for an enabled button.\n`disabled-outline-color($color)` | Sets the outline color to the given color for a disabled button.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web button component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"@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/density":"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/button_8.0.0-canary.03bde00f5.0_1592958718994_0.12394569883075102","host":"s3://npm-registry-packages"}},"8.0.0-canary.599b8c319.0":{"name":"@material/button","version":"8.0.0-canary.599b8c319.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"faa0c88b4b277e0d60e33f204f28ebd672e54421","tarball":"https://registry.npmjs.org/@material/button/-/button-8.0.0-canary.599b8c319.0.tgz","fileCount":26,"integrity":"sha512-Hyr2O1Nvluj8fjRS2N7PjBLeghVvsz3ezUf+qOQK7NLLRONLafq8BpzmeIOdOFQ0aAvJPwdlRQIzz1Q2SGXMAQ==","signatures":[{"sig":"MEUCIB/QW62l+Fws12fH+tg22HVSWRtQdoBDXnLGtXS8mlTRAiEA529oIMJggxhEN3KPuDeRtdXv57Hy3pTXOgeKNtz0gik=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":388158,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe82m6CRA9TVsSAnZWagAA29oP/3mmVJF4bneWZQS1G2Q2\nb8SAZ/wPl7bs45fBKAbdP7X70xPO5/+5iJM14v9cnXExQBPZTbjqSPoa4eCZ\nKyP8tbbf1765vznow8kGPwtBNhLDWhxQ2oCNup97Ii/FzHKcYe4Kx5tgciJX\nsjxe4MXzO2pggVJ7vcI46e7t1GoUoeFPwdfacmA4gIlecs/s2i6bLggtp276\n1O9k6iTuNwu1R56aqeBo8aN8MjB8CzD0XSHemVfKRlJ5pbnrUOJc1ceIsdcI\nvaYQt7l3+o7qxF/tFrfzvZsXhLPKAFDslBrKoTsZOquXQ6vhHe1KCmuPfqXr\nCEMJMReord6GAhIcY0WdUVN8SPKdrWkwmpUOoYnAL5JfmEpiN9i3viYmdNw7\n2i1nAC4Qc6b3JCFmovUK97jImV56PRvcddVaRAn/9GrQwnD9Wk4rJ1+UKaFc\n6nrMZlZVgioF7DfOgiobyLkQrRNVMHs5gYYAAWrsTKloa4JSI1F+Ewv9R466\nX/bnXiV55T4RYYSCQMOglfke/FC6Y6aQ09AYdVKV5pqN4Z8owSPTKrZEtuXb\noXzkv5fN+HZLveYI3pSF/z6XxG9jruf18qJEveuJnhGQjyVzMYShXjtrFAKb\nTYPtYKembumKGIeZPR75wAusgLOmpmLowcNiOB7opD9vb+r3OzEjNawt/rBx\nmARm\r\n=ffTv\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n#### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.**\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n**Note: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.**\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n\n**Note: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommended to\n always include it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color)` | Sets the container fill color to the given color for an enabled button.\n`disabled-container-fill-color($color)` | Sets the container fill color to the given color for a disabled button.\n`icon-color($color)` | Sets the icon color to the given color for an enabled button.\n`disabled-icon-color($color)` | Sets the icon color to the given color for a disabled button.\n`ink-color($color)` | Sets the ink color to the given color for an enabled button, and sets the icon color to the given color unless `icon-color` is also used.\n`disabled-ink-color($color)` | Sets the ink color to the given color for a disabled button, and sets the icon color to the given color unless `icon-color` is also used.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color)` | Sets the outline color to the given color for an enabled button.\n`disabled-outline-color($color)` | Sets the outline color to the given color for a disabled button.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web button component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"@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/density":"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/button_8.0.0-canary.599b8c319.0_1593010617522_0.39814040245734983","host":"s3://npm-registry-packages"}},"8.0.0-canary.87e3be418.0":{"name":"@material/button","version":"8.0.0-canary.87e3be418.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"7833b8dbf0552e51e1a9b1f102e2b740decc5cd2","tarball":"https://registry.npmjs.org/@material/button/-/button-8.0.0-canary.87e3be418.0.tgz","fileCount":26,"integrity":"sha512-Kcg9GJboxuVz3uYnCRp9ORIBtQdKF9k7eE0aPsdlGIHg/GW/BIgLJel7citYf4uF1RCAxIc5i/8ItvIahYfqSA==","signatures":[{"sig":"MEUCIQCazip+WjIYgPTQ1q3T4ukvD+ICyQAloqxrHYeM3egqQgIgfcqJJsPli1Xl1OixVpt4+EifWENoqDgGNihHN2QSQFo=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":388211,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe85MhCRA9TVsSAnZWagAA70wP/RLVJTZEJebjqC9FdDq8\nECeDuUcW65ah6oJXvfLJGYYrp+LWRMIV4Rw2gBbK9qLeFG9xMt6/fT1IkrHz\ns0opH3YQX2jKu1lHjfulr2GQ0OfZi52549Ifc7KPlWAqVZYZE2cplhKQNxGl\n2UuBrhM54yg2NxhSA/j4sPptBXYpm6WOkN24Qa6PhiMgHM9axfNyD0IS6EdD\nbOHBRJZ3BAJNm+JLgTCSkd8c6Gu7KCtX0+3tzDun5/fP3FBi6P6OcNNzq3sU\nawc13Qh39JWL10C+nYgj21PEe7m3ELkHDwWyIs0SkRtKr8fmvT6xjHP7BtUp\nYVOxbAFNu+N24AiT0Lls7aW1xbeX/aWnq43fGxQYHAivXb39sAR43ts0iW7q\nTRoBOjuS6P9zYZxI+Pw5gbFqynIyuUZsoy+nHnpPxB9w+kVvrRwZXzdWT5cs\nSPSpqSS9i5ojZlGSGs8dr969x1Pv7vO9MtHcBPgOtMJQGxatvxNz998ikzxQ\nlwIHZy9SARVijkD0GhX1zXQS3J6K6fXgyHLKBdfws7G30cuq62SMyKgdMp1n\nigIfSkGscNDocnJGtKUf/xl+ekoNPZvwh6Pgz8lEYzPyqp55C6UGUb/9DS2i\nxf7O2CCszif4ROUZraTRMDNSNMfw8IB1MQXLZkVu1zUPNKc1n1dC/4rk2Bkl\nh9HK\r\n=BVEw\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n#### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.**\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n**Note: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.**\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n\n**Note: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommended to\n always include it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color)` | Sets the container fill color to the given color for an enabled button.\n`disabled-container-fill-color($color)` | Sets the container fill color to the given color for a disabled button.\n`icon-color($color)` | Sets the icon color to the given color for an enabled button.\n`disabled-icon-color($color)` | Sets the icon color to the given color for a disabled button.\n`ink-color($color)` | Sets the ink color to the given color for an enabled button, and sets the icon color to the given color unless `icon-color` is also used.\n`disabled-ink-color($color)` | Sets the ink color to the given color for a disabled button, and sets the icon color to the given color unless `icon-color` is also used.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color)` | Sets the outline color to the given color for an enabled button.\n`disabled-outline-color($color)` | Sets the outline color to the given color for a disabled button.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web button component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"@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/density":"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/button_8.0.0-canary.87e3be418.0_1593021216535_0.4635301007999755","host":"s3://npm-registry-packages"}},"8.0.0-canary.035cf2a6f.0":{"name":"@material/button","version":"8.0.0-canary.035cf2a6f.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"fc17e962d5ab82023c30b9ce690fae25031a0e6f","tarball":"https://registry.npmjs.org/@material/button/-/button-8.0.0-canary.035cf2a6f.0.tgz","fileCount":26,"integrity":"sha512-r+ELcGnLt6Qj2bC0qhoQ/04HaDPgWOhhYvGgn65vHvj/9L4ZfXBkqnqUXk3gIKho4hWMDqRByEUIL0+B0QL2xQ==","signatures":[{"sig":"MEYCIQCOLREJ7hGyXTR2XUs5XvKfJ54d+oyrd0k4NOzgOiE6VgIhAKLTawTkthZlUuiKnnu4BzxG8JaZePa6Z/XtNZXEVt5s","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":388211,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe853CCRA9TVsSAnZWagAACjMP/iubLdLI2KFerIXp1BxQ\ntzTGO+r1kNv9IqG1W9VfdSvitOjjh62R6NRbAv37lRcMJkSjDlfdTGB7FXov\n5oG/uL46bNffc0CW16msBc4A1gJktUfU4JzzQNsHm6vr2vK9/VKb8IK833dj\ndK+gbmal+Wj5ZhE9jyGmuEr5L+PpMlmCEV/Fw0l2+UXTeLY8MlRSMX/JLNDH\nRQIwVhXufw1TGCfUFqaNdESTxATh0j/uMNomVSJ0HeFrRa9h8gdZ/NrJ6/DH\nS86u11vDSeH1I0zRueANky61zqBrUGdWxSfQTvoj//9WLIb03Ub3DOyW5cBQ\nxCWBFsk6vwOFyCYjhbVAzCn5GvtGNA8rj5aT7gLXivjgAiguIylvcHFy2cja\nUBX2jkGoRScItwhLYM6cB6b9RsKPalXB74I1Eqa1HiFLadXwhZhpzJMrMEgS\nDWBg5XNmje3D/JPu3uaNpLuTEBzRGsl/JTVjZ+s2iyCbnM7qEXiymL5tFf23\nKENZkXQ2XfCXC0A14STSh6uf6ZglnS6blMdA/YXMZzQHh8Dhv2640E6/f2Va\n1WVE4wKE/hAhvOi5K6CrNqvGYo0nR+Yr4bPra59wQ082e038F4JfysiJmLUu\n8BMFsjRWb+zMLfS89gvVBiLuDNbGtO5YUfOD2rnuGfvfyBCnJQ+0MP30F/Hm\nPw4z\r\n=QGq8\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n#### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.**\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n**Note: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.**\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n\n**Note: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommended to\n always include it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color)` | Sets the container fill color to the given color for an enabled button.\n`disabled-container-fill-color($color)` | Sets the container fill color to the given color for a disabled button.\n`icon-color($color)` | Sets the icon color to the given color for an enabled button.\n`disabled-icon-color($color)` | Sets the icon color to the given color for a disabled button.\n`ink-color($color)` | Sets the ink color to the given color for an enabled button, and sets the icon color to the given color unless `icon-color` is also used.\n`disabled-ink-color($color)` | Sets the ink color to the given color for a disabled button, and sets the icon color to the given color unless `icon-color` is also used.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color)` | Sets the outline color to the given color for an enabled button.\n`disabled-outline-color($color)` | Sets the outline color to the given color for a disabled button.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web button component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"@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/density":"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/button_8.0.0-canary.035cf2a6f.0_1593023937713_0.7322812090882969","host":"s3://npm-registry-packages"}},"8.0.0-canary.2fed2c12f.0":{"name":"@material/button","version":"8.0.0-canary.2fed2c12f.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"e76e483d40e007e264aa0de335902b333dcfb7c6","tarball":"https://registry.npmjs.org/@material/button/-/button-8.0.0-canary.2fed2c12f.0.tgz","fileCount":26,"integrity":"sha512-4wy6/cz++R1fWg4HHQU6w2DYm6IgvF4j86lYxQ6R5jwGzdxXtRqkN3qvH84faUDoeDl0iYoF/wE9nyCoEXDB6g==","signatures":[{"sig":"MEYCIQCfwBbdcnUpXaS0NXb/DhEqbtCGy5AHUbFkkiDp1ne76gIhAN8UXELk1IaQbYdUBtBwl/XNrSnUrlTVxAPsmLqV68+M","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":388211,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe9QK/CRA9TVsSAnZWagAAwTMQAJnm2OnQ0u3+kGFSrs59\nUh/qCvDIOCgEe7XX2hNCfRxgzsBrbqmi0WTKY1xI0elrraOE/nGVnx9hBjPM\nj/U5huiEQ0lLOUUOXLf67UoMwr+PdNDpuzVBXJbeVdJ0qcUHRgjkr+OSrevO\ndPyaekplAnJc2QY6zClepok0SGCSEr6K1UMv3MFDf1w1B14UEOix4xo3MMi7\nimSIsrlP5Xtbbgj3noHq4WtBGAN6uED0eHaB+kxQ3drG5NtK9YSKcGmta2tU\nhOLepn4quKLgCiCWfyQ37380mfyUIylO5/RSmDhcTkKIE3KHIhD9oHWIeoBu\nlAf/XPerYTGnWz1NX/K8Gt5KHy9VG4R8xPvrG5edAlWyiqZqpv+QBoP1o3mV\nXntvrFRIjCFvbKn1AuB6WkHTxWheAhjHjkj4O19U2Y0Au5BpcufpyqxMwDXL\n8o16T/kUS7kmtb1rrqCHJco9g7JE4JRu5a9ieGk1JcGWY2v3XxKdC/MBal41\nw0jNxeinyLOYEdlhS44moI2fAQyydqI3lQyL4NvY/nqp8qfeZYGkJnH9bWYg\nOv8a8WcmOtnl5JXSaZpuqM2rmuMuP4V5LD+rC5+jLOXf239p+YSTFKhKjbe/\nvUqaa1OKbAgK5o+/Mh+GD3ppPAZ9MX9SIWx4XnVjy4q3HyOVuVcVzjYWk3yJ\nL0O1\r\n=RiZS\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n#### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.**\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n**Note: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.**\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n\n**Note: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommended to\n always include it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color)` | Sets the container fill color to the given color for an enabled button.\n`disabled-container-fill-color($color)` | Sets the container fill color to the given color for a disabled button.\n`icon-color($color)` | Sets the icon color to the given color for an enabled button.\n`disabled-icon-color($color)` | Sets the icon color to the given color for a disabled button.\n`ink-color($color)` | Sets the ink color to the given color for an enabled button, and sets the icon color to the given color unless `icon-color` is also used.\n`disabled-ink-color($color)` | Sets the ink color to the given color for a disabled button, and sets the icon color to the given color unless `icon-color` is also used.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color)` | Sets the outline color to the given color for an enabled button.\n`disabled-outline-color($color)` | Sets the outline color to the given color for a disabled button.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web button component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"@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/density":"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/button_8.0.0-canary.2fed2c12f.0_1593115326991_0.6116844195310298","host":"s3://npm-registry-packages"}},"8.0.0-canary.38197b443.0":{"name":"@material/button","version":"8.0.0-canary.38197b443.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"2c65419bc0228a6adbc2bfc13a8aac1651fafd40","tarball":"https://registry.npmjs.org/@material/button/-/button-8.0.0-canary.38197b443.0.tgz","fileCount":26,"integrity":"sha512-3nYTyuVtcNcbbPwOp86uBhceWnyDNdpqPIW2AQ+SlYP/t4UcBH8+wFFBjxPwSukcVBzsGKeSUBMRwq3D5+0PnA==","signatures":[{"sig":"MEUCIQChrVcnY8x4KVHvzIr/iL9McifDWFgO6gyZIm/oHzOz2gIgNPuvHqALVvKrBKvD4WMyRPW+0sQcug83Equ90GSB4iI=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":388211,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe9RWtCRA9TVsSAnZWagAAbtQP/j3GQMN/wByPyLNOyy8G\nKcaeV3WH30yK9uzhby3GpzcYkU+f/6qjjwBHxad2q1P9nKchyijghD72M+C5\nZOMOUqnNKtPI0Om0l3Exg/0LT5qIj1apOrrGkbhujFSeacoHjec9vkf/sbyv\n24uv4lIFUpQZa7YFonfcHEIQV4PNWL0hobfLPh+HnGyalNIIJPt7Lw/yduO0\nmy+lyEnnCG/vaSItTVrLV9Nyts+y+DIEfGeK+BOd6rY2bcSRQinDkb5jK2YO\n9S+z2dCxYlyLMQmVotRptjw5j/32muSuVzwFiEjIeRpuSMvyU6149+JdIdVr\nSCdmNn6mZYFPRnK6IDANpip5+2fC/QfGno5yQZYWcgBU80wfa1jiLO3S566L\nrpH4fwONPcttr2LL9d85WhKaPPK/sPYiGDKWM+fTkavzCBc126sgsiV6hSNu\nrpIAMk0tpVlAYwr4ex0sIuHJThWm7qBdz47r1vVwHLSxDzO1N+NwojlXoiIW\nbqTIOBKoZkmNf3q4pmNmrGGTS/DRx9xO0oADx7bSyoYJZjRxoxQFtJyNrJmA\nhZIoy+SpSskY3l9lhuKS4vnyr3Hozs1RIA4VZjnocq2j9fHHEsuIFTs9SdCd\nVpGu1f7SZKm8i55h0nSpbI6VbEZh7P6nuxOdhyKh8MvJgmJMfJ4FZQQY/Cjf\nAe9B\r\n=NdFx\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n#### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.**\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n**Note: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.**\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n\n**Note: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommended to\n always include it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color)` | Sets the container fill color to the given color for an enabled button.\n`disabled-container-fill-color($color)` | Sets the container fill color to the given color for a disabled button.\n`icon-color($color)` | Sets the icon color to the given color for an enabled button.\n`disabled-icon-color($color)` | Sets the icon color to the given color for a disabled button.\n`ink-color($color)` | Sets the ink color to the given color for an enabled button, and sets the icon color to the given color unless `icon-color` is also used.\n`disabled-ink-color($color)` | Sets the ink color to the given color for a disabled button, and sets the icon color to the given color unless `icon-color` is also used.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color)` | Sets the outline color to the given color for an enabled button.\n`disabled-outline-color($color)` | Sets the outline color to the given color for a disabled button.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web button component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"@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/density":"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/button_8.0.0-canary.38197b443.0_1593120172500_0.40343633895118614","host":"s3://npm-registry-packages"}},"8.0.0-canary.69a35e80c.0":{"name":"@material/button","version":"8.0.0-canary.69a35e80c.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"af55e333a8a66b59316faa7275d2e3184b390280","tarball":"https://registry.npmjs.org/@material/button/-/button-8.0.0-canary.69a35e80c.0.tgz","fileCount":26,"integrity":"sha512-30vXksfb2ZZ4Qg/pS8BHabz9NROvkF+j8nrzS9BVQH3fMrKGGG1QgRSKFw8le23hbm3VMzv8nOko+mB+79iX9A==","signatures":[{"sig":"MEQCIGVyf2tMlj2V/UBViEr2EeddrNdFtzQMzsVtqcPrjV4TAiBSbzMEFXMiV+ChqKbiaTMVSn3kpDQHJjEj5EQppdSXrg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":388211,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe9jK6CRA9TVsSAnZWagAATv8P+wQjsKDI1SbBjmWTEbUM\nJP53VzmwRzsxXfk7LPe/nbtM/V2gn7fWeiSSsJe7B4EZ6uURFsF45njH/COL\nSD8o5e0uSPpFpZzEqb4GNv7W1rQ0PSWSS+fVC1vliMGoQhaYvr5PSa4aJ+Zd\n1eDWznVb3fCRA5WIUwpbRF5mNg19sdBppDvGKYTDCJ9geRoSW+y/bszZdlO/\nMo4yAEJpCjamI7OECXp85EbviMRs88iV1pyVx92+WemWmbGY/aP36/Gw/449\nRU/yLIBwSdt9LXqdKht28XDkAjfdvVERmUIutjwjxUTLcPJ2VuhTmOQqIvGp\nq0vAvnbumWbbASWWKZ9mLLrhIuDB+omi+IJwuWmUpxRzP/jByopg+49iVWWy\nzY5UwGFUzAqCA5R7uyuhc9lu6pkRDyqFdC8Qge1fspljhmNVt18ehC7oRDS0\n9ldkNEpsbw1zEpIQlI/ipo1vkvLWiJVE3kQ7Rk0nWMdipXfufGWJJxFaZyUn\nUTuwVcPd52zYA78MBdWvkiYwzzH51dwmM+dIOLUPTJTs5NgJ/IMxLlrlELm4\n5Q+NXT5kjd5HZRGUon5N8YresAgLG23AqnokyuRdsfzlFCKFsz4AvHvDWztv\nOWin0y8NVYHVJHKV8iHz6pJGwKRUyyNaCHmbyC5AM9Vxl7Y1qYfgHcH71neA\nu/rt\r\n=sQad\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n#### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.**\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n**Note: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.**\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n\n**Note: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommended to\n always include it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color)` | Sets the container fill color to the given color for an enabled button.\n`disabled-container-fill-color($color)` | Sets the container fill color to the given color for a disabled button.\n`icon-color($color)` | Sets the icon color to the given color for an enabled button.\n`disabled-icon-color($color)` | Sets the icon color to the given color for a disabled button.\n`ink-color($color)` | Sets the ink color to the given color for an enabled button, and sets the icon color to the given color unless `icon-color` is also used.\n`disabled-ink-color($color)` | Sets the ink color to the given color for a disabled button, and sets the icon color to the given color unless `icon-color` is also used.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color)` | Sets the outline color to the given color for an enabled button.\n`disabled-outline-color($color)` | Sets the outline color to the given color for a disabled button.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web button component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"@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/density":"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/button_8.0.0-canary.69a35e80c.0_1593193145795_0.7788694876699054","host":"s3://npm-registry-packages"}},"8.0.0-canary.df7154fb3.0":{"name":"@material/button","version":"8.0.0-canary.df7154fb3.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"7273a4ed42e9f007f45590c35363d86a05a99c5c","tarball":"https://registry.npmjs.org/@material/button/-/button-8.0.0-canary.df7154fb3.0.tgz","fileCount":26,"integrity":"sha512-ftUqaXNHojBXhyyiXTH1kEVKHJTE3U/A/clym7/K2Hu/FvB5SajT2dygLve9t0BAeGG/HdzqJjEM/SI0qPoThA==","signatures":[{"sig":"MEUCIQCke53mdQUVeq2Ebj6uJNSsbBmbgfIliqHW6eRWDnT51gIgZiqJBQue4QmwAofo7053TEDbACi2ggypnhRdUtLZ2Vs=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":388211,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe9jujCRA9TVsSAnZWagAAhkQP/1vK7lx+Xu5dYStJ9lKu\nmDk/C63+QFJuYXXXTZyCNKkXI7whITowBycCVFrntDipGLwE61YZo6e3y/ic\nWSRpJ8lhZ8ygjedQKLHQkvfMByOthMXbDhn9bCXgLv3kYfeC5sVrwCuZPZre\nLd5leTb2hTvDxH+gFnnZtXg7j9q768SYtAZfVoqPag2dYIkMr4yr2d5FlJHy\nEXCWkwkn6Z+xa2UYkpSaa7L3fn0cgCLDU7F2ZJurK15enV73wjLcZMR9JHe8\nPAwaWi6XpYapC5fgFrqAVUC2DskdJkthIM1NeIkp/UEwN/6/VgEWCFVrqEmv\nBBuQmxOFe6oXTjE4BGLkhPX+60L85EESzK5+OQvn3U1B+M+iWDddBbK7w5Fn\n69quQizo2so0r17/qc1Sxt+UxfrbENj+3os4O7VExkb1m5AG/bGwdNSHSWFb\nnmuT3T87GiyB6CyJMaKUaqeUDYk7mwtr8PCFjyKYj34ZfONcXZJ1ECiW9+hP\nqL8lUBlGcL4zw5gUYuzhBWpPDD0fwPvEJwZLkJp+G7Dfu9tcR0OxyszysqAK\nabia7Y9ojmMWaQuv8Cm+cnyJQyWaaLeTsFKuOxigOz81N1QU4l646ybZlbaW\nCpdaa0tJshaTwg3umEnOJblKXaef3ou6d4DQMYGWAFTcPxm7EvSM4tEue6My\n97OJ\r\n=yyM0\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n#### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.**\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n**Note: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.**\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n\n**Note: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommended to\n always include it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color)` | Sets the container fill color to the given color for an enabled button.\n`disabled-container-fill-color($color)` | Sets the container fill color to the given color for a disabled button.\n`icon-color($color)` | Sets the icon color to the given color for an enabled button.\n`disabled-icon-color($color)` | Sets the icon color to the given color for a disabled button.\n`ink-color($color)` | Sets the ink color to the given color for an enabled button, and sets the icon color to the given color unless `icon-color` is also used.\n`disabled-ink-color($color)` | Sets the ink color to the given color for a disabled button, and sets the icon color to the given color unless `icon-color` is also used.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color)` | Sets the outline color to the given color for an enabled button.\n`disabled-outline-color($color)` | Sets the outline color to the given color for a disabled button.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web button component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"@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/density":"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/button_8.0.0-canary.df7154fb3.0_1593195426386_0.737960720172611","host":"s3://npm-registry-packages"}},"8.0.0-canary.d5618602a.0":{"name":"@material/button","version":"8.0.0-canary.d5618602a.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"a1aa99f656a0e8f16c4a160017a5079c6c691bd3","tarball":"https://registry.npmjs.org/@material/button/-/button-8.0.0-canary.d5618602a.0.tgz","fileCount":26,"integrity":"sha512-Qu/N3sr22ggJFbVn2zH1GSJwlz+SrBwd4S1dGJ9kdFD3NQttQExmG83BgnCSrCpSlcl8ixyMKFCLBXu2Qzd4ow==","signatures":[{"sig":"MEYCIQC2zGfevmJjoFEbAcez7p8eu0zX+vWkfQEGk6KoGKIaEgIhAIkS0PZnDpUHXMt3i63XMY0L2QhDRVzfvU1z7k+/iCZm","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":388211,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe9m0zCRA9TVsSAnZWagAAUfwP/1fqhQ9sSM8fZFfuW7P1\nMLteNPz7b4p1cZmzj/R9wYQhhmN+rp8CDlB+7vuzs8PWRl4Uvnxp0YSJwxiA\nE/pRJHCK7jj18Ph9j+VctOrKuiIQlf2aRyNIoW7MhaKsEBK2F5eNx5PfDLX7\nb65mUYqg4nfHv6GIHAG9E3Xz36Yh+Hl5pH62SsIzWq+XuOXNaChgL7aGeTV4\n/V0sPt6skN6JqFQvNYAKksBDzQ/r8AiwzLCrAwAONNbEA9oKnoXmQGdm6g/x\n7DcRih0rF084kWMXy0kvsrK+sFi00sX2/gl4emrlxbW0ZkP164vKToeADzbx\niUcWEgY69gQzZnlUpWqZHCpOorvfXXNUiNpT87uijFk8C90i1o05ZFkkPHWo\nA9vy1JWcTR2YC5Qx1OcKi4fksS1AyljBJPkD7vaaEwaXPN5lzKca4VfRSBZG\n8zW5VLKEvaiwahaVna9w2yGwqB4XWulpRCOzVPC4m/sGELvu14SEtkV6EGdF\naGJldcZZtxZ0Dqv85idgz/XT4+FHOpmhQ9zWTgmTHPUBXLCWsgByA6j/y4uf\nAW4M4UMNquJaMzljCrwdclyTNEvpGFS372XVthFPeLlGQTVFACthF7H1FUs3\nsrviWDkGWW1sDbGdV9tA2RVny9DdSmPStjSU4hA3tFE5EkgvSZuzbPZeFGF3\n5gNW\r\n=9XC6\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n#### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.**\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n**Note: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.**\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n\n**Note: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommended to\n always include it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color)` | Sets the container fill color to the given color for an enabled button.\n`disabled-container-fill-color($color)` | Sets the container fill color to the given color for a disabled button.\n`icon-color($color)` | Sets the icon color to the given color for an enabled button.\n`disabled-icon-color($color)` | Sets the icon color to the given color for a disabled button.\n`ink-color($color)` | Sets the ink color to the given color for an enabled button, and sets the icon color to the given color unless `icon-color` is also used.\n`disabled-ink-color($color)` | Sets the ink color to the given color for a disabled button, and sets the icon color to the given color unless `icon-color` is also used.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color)` | Sets the outline color to the given color for an enabled button.\n`disabled-outline-color($color)` | Sets the outline color to the given color for a disabled button.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web button component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"@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/density":"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/button_8.0.0-canary.d5618602a.0_1593208115186_0.9036167784338891","host":"s3://npm-registry-packages"}},"8.0.0-canary.e590b376b.0":{"name":"@material/button","version":"8.0.0-canary.e590b376b.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"f2fbb9ee8ece8171dba5bd8c6ad60eee69ddac51","tarball":"https://registry.npmjs.org/@material/button/-/button-8.0.0-canary.e590b376b.0.tgz","fileCount":26,"integrity":"sha512-dgqC402c/znmky6WBS+C5XMW2jzCiLGChyCi93asR3Rlj/K6QAfc+MD31U7U69Vsl7t7+jGny92NI2Drq/FOvA==","signatures":[{"sig":"MEUCIQC/Q8XNLBb4lx8DKTwmqKzVxvnAGtvkTbLJ/aGHdP7i3gIgeCqNVDaI+q5wX0wBz+BtvcOq+xL5Tl6XrEreh2EGYGg=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":388593,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe9oOLCRA9TVsSAnZWagAAUhEP/jwyz5hdlg4EC00ftmMe\ng22XLu89eQ+rALSTegE9Hew2VJhQtyFuDKYkRGGp8KyqjLSTjy4w348tnWMh\ntVBN0pVZHwISAv9qM7CYlIs+iytIEAu6t45MDFBgWc2z+vY8Dsi/oQKGT7OH\nhekrNl0it77ZohU/ef4CiyWpsePTzw+C/ulMITXIWClCLk40MRW1J1xaK7tB\nV1Dvwnj9j30WSnGd3Fo6Q39rAzGhDMuRVfPzDxayDpJXsolv+NY8DPb/8vP4\n9TpAe5oFvcjnttznAopI+3UxK72f0KI9Ddld9bHUD/54frfb4se5du+CEWjp\nLCd+SxxftN37L1KkN9rchUOdUVzwtf0p4oOnVXpmyxHOe9qhcOfC3oPmPgez\njI1hEyCdAuMovLP+QaS93XMvwKUSXMWQ9mTG3QtngYtM2RoL+wHpLRf7BRS9\nQTiBvFxn1U9gfNtultvcaGLa0YFoF2VNnqImPP1g5E68uL2UYxjc1dp9QRX/\n3OSkOVoOkri8fMsP/wqiMoWuBPif3KO8VGTXbkIEVMJk6AdZaVR4uKz7vL7s\nCs2yW4AxyL+H+Nka3CDbMfv9uLL1EZxmK+9HX2cGtxGS7negyqkxEzdIkop+\nH63kXXz+pzBlnUkOChbazerOwwGrjyoYps63Qhm9i+HPSEUBHWJx5owDNIeW\nh3Va\r\n=l5VF\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n#### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.**\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n**Note: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.**\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n\n**Note: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommended to\n always include it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color)` | Sets the container fill color to the given color for an enabled button.\n`disabled-container-fill-color($color)` | Sets the container fill color to the given color for a disabled button.\n`icon-color($color)` | Sets the icon color to the given color for an enabled button.\n`disabled-icon-color($color)` | Sets the icon color to the given color for a disabled button.\n`ink-color($color)` | Sets the ink color to the given color for an enabled button, and sets the icon color to the given color unless `icon-color` is also used.\n`disabled-ink-color($color)` | Sets the ink color to the given color for a disabled button, and sets the icon color to the given color unless `icon-color` is also used.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color)` | Sets the outline color to the given color for an enabled button.\n`disabled-outline-color($color)` | Sets the outline color to the given color for a disabled button.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web button component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"@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/density":"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/button_8.0.0-canary.e590b376b.0_1593213835241_0.5539102992824125","host":"s3://npm-registry-packages"}},"8.0.0-canary.0c9d6bd2d.0":{"name":"@material/button","version":"8.0.0-canary.0c9d6bd2d.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"25bbbd3b44988f7f5b18d58be1fa10beb7fee2ef","tarball":"https://registry.npmjs.org/@material/button/-/button-8.0.0-canary.0c9d6bd2d.0.tgz","fileCount":26,"integrity":"sha512-wDx04txkPzOnEsSkaVRxfci2/u+uEmn26Ra/TPLS8y92c1x84IxLdGoehoUdAWvtfSQaZTi72TfoinI6hzgEwg==","signatures":[{"sig":"MEUCIC8ZOLyhGtUoUzIkskN3it3LvB8o4MChXbaEeuqwX40bAiEAjKsW2bw5ovGCsQFGW0FrRAqxdWjxpymuHAhLYRNe/r4=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":388593,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe+iG7CRA9TVsSAnZWagAApesQAIcLSkLdmkT6AZFMLmVL\nsOmCLnOHFjcJ+lEA5E9Ry4QnrWed0gfPljCEy7N4a5LMLzG5g/oqCm3wuVi6\nYbgSqgEvnm3xOsn4XW1NsP+swd4hx/BKvRndMIvch7VzPRoPXZzKG23IewQ7\nDTG3opMRyEdfWbwcjAJnP1cTKaW9Rj1fWWVyun27/TQdb0KNYLfXF/uGR5jz\nMN1UBSIi7a3s/bo3rb3Fl/TGTFUzfm8tQd4z8HrUX1VOCQ+/TtSPbx3hOiwz\noorZcDR+jl8YdIaLcWlsk2gjItNTCIyB1SrF50f6ixvACmVkFqYHhyqumDND\nkrl3m8ZPayjq3z9+3/K/OvfUfMU7KUiPUplrqhkONjNY8jY7kkVsjlEW+3Cs\nFAWS3Qb9ZXRvwGpBCJ0A8VaZSVK69HGOgOg1z64DuQhRGl0v2Hl1fDcY1LYw\nCvmjCyZ5Kq8zs3rGgOD4TGxQLaHN+kgB11/peuh2i6qZ9In4AWAi1JJhk93m\n+ReGtGLIfCnAUnKUKS/1GZi7uptf+0gIyqrBcOY/zzBd35dMIN7YBzHMnlfm\ny7L8uzHzMkM5gfhid34O/Ams5KfpIVL5mV/KXBbzpzzyurayyJZbk2ZI3hy+\n9zE8qJz5fE6J8DrGzBqV+RI9YprLygx50kyI1X72ir5UWypleRT+sMnav5ES\nYjiK\r\n=YWPV\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n#### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.**\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n**Note: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.**\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n\n**Note: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommended to\n always include it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color)` | Sets the container fill color to the given color for an enabled button.\n`disabled-container-fill-color($color)` | Sets the container fill color to the given color for a disabled button.\n`icon-color($color)` | Sets the icon color to the given color for an enabled button.\n`disabled-icon-color($color)` | Sets the icon color to the given color for a disabled button.\n`ink-color($color)` | Sets the ink color to the given color for an enabled button, and sets the icon color to the given color unless `icon-color` is also used.\n`disabled-ink-color($color)` | Sets the ink color to the given color for a disabled button, and sets the icon color to the given color unless `icon-color` is also used.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color)` | Sets the outline color to the given color for an enabled button.\n`disabled-outline-color($color)` | Sets the outline color to the given color for a disabled button.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web button component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"@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/density":"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/button_8.0.0-canary.0c9d6bd2d.0_1593450939172_0.16566463695835454","host":"s3://npm-registry-packages"}},"8.0.0-canary.c1fec4246.0":{"name":"@material/button","version":"8.0.0-canary.c1fec4246.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"3d3fac8fc658ee82ff50a432d1e7b9034b5934f0","tarball":"https://registry.npmjs.org/@material/button/-/button-8.0.0-canary.c1fec4246.0.tgz","fileCount":26,"integrity":"sha512-sVLWYAKoHT7TYnokyI1OZjIvHoeWrtSfpclw2wR3VHVm66K04XjPRP9jk1FdHu8iBCepEHYg4EeJ7zL/KVK6dQ==","signatures":[{"sig":"MEYCIQDXLC2riLkLPxj57P7rl9f5VOY6C6mm3hPY9rXDFjEhZQIhAKItk4fU0q3sOwXxDJSZxOy9SfkxegvzCKPde+nsKR+0","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":388593,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe+iVXCRA9TVsSAnZWagAAWP8P/i7ktDdpjNeugcQLJer2\nddequ1twTpu+2UB4ei5/y5WBsiK0bMKBll+99YwdgNqM8HrzPvwvTj0vW88b\nCvSPYCJAs63nj7bE79MAl7K0mNl8HDCg+3kcT+wPVElZbN3CAOCSmiK1H0zM\nVWWeg/g5Eh0uTrY+UGTe/hH65//58Jz2LKZqurVcMAUMuqUCg8Qw2tGi1O7b\nPAGVvkX7E5kiG/PSXU9UxXtxxOPgK0oxNpGrO1DRv0g+Sc0IUQnZ77GAnRSm\nwZnoeYrpEV4NpSK9UDT45HT2lo5zlaT047swON759aMf4JOju2Rm5Y6EEP6v\nLxxhfqXkxVkjPrVdpoqZDcCamfeoqUZGhc2IvzlgUD5vn3ptR1uYqXWJ95HM\nu+9gsxi38xraQo3Fa0GbCqut3SWRynFRkrPDsdU8WHHqmc0qQ3lPGVKs+rYk\n5l7PlB8UvTC61NjFyG+wRYKMwJVH6JQKq8EHpWDONVtQMJ+EnOVrH7h7Fc+K\nWJqRUGnGktw/AM7uU/LUOmmvvEpG/ltbrbR0PLGqOzoVw6B6ofW/BbeHb/Cy\nFVzLByIN7EdVouiT+3XiV/08tjW7l4NIi4jO+5ZvFh/9eu1S2hZbhZggQ4jY\ndkYyT09mxjb9kXz8koi9bNRHyE008t4UNSlJd+VBn+LPCkaQRUXUI275JP4a\nN7MZ\r\n=eVZz\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n#### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.**\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n**Note: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.**\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n\n**Note: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommended to\n always include it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color)` | Sets the container fill color to the given color for an enabled button.\n`disabled-container-fill-color($color)` | Sets the container fill color to the given color for a disabled button.\n`icon-color($color)` | Sets the icon color to the given color for an enabled button.\n`disabled-icon-color($color)` | Sets the icon color to the given color for a disabled button.\n`ink-color($color)` | Sets the ink color to the given color for an enabled button, and sets the icon color to the given color unless `icon-color` is also used.\n`disabled-ink-color($color)` | Sets the ink color to the given color for a disabled button, and sets the icon color to the given color unless `icon-color` is also used.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color)` | Sets the outline color to the given color for an enabled button.\n`disabled-outline-color($color)` | Sets the outline color to the given color for a disabled button.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web button component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"@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/density":"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/button_8.0.0-canary.c1fec4246.0_1593451862952_0.19569868010051517","host":"s3://npm-registry-packages"}},"8.0.0-canary.c678a9d34.0":{"name":"@material/button","version":"8.0.0-canary.c678a9d34.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"7eb212c909dd36f4ee7c1866e39ea24917caa6cb","tarball":"https://registry.npmjs.org/@material/button/-/button-8.0.0-canary.c678a9d34.0.tgz","fileCount":26,"integrity":"sha512-g0f+PXGKSClAtMlGmQCejLzoBquoMT9yj0ujicCPo/zRGvw5CRCfbgDFasrapKH+yAEX9356Pw8TQ9ugwRwQ8A==","signatures":[{"sig":"MEYCIQCVq07qJDz/VQxGHWWmoGStcqf657h6FbZiRc7Rd67EkwIhAJ+ws7/aoha8IXQfhws50r+iPWYBzdBMX+14q3toSjQx","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":388593,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe+ipCCRA9TVsSAnZWagAACXwP/0jrgPcnizeaB+rO531L\nPdXGda9kWhe8PW44rUbQicJqUPeUpUhhs6AmRY1zV93jJCogmY0b73oP140u\nmkJzR84jgR4zS61UKdMKZv/cG6uYD3/cYGBQOybPzAeXKxZp8P+DLvd5MXav\nGZckxPjkZeV/9tT5DshbsdNnlHlye4J+Q7yaSaaj52qQr6nSeCkBPUFmid5F\nVmbZd9LW+udB3ZwThDXrXnMfAnnF6F4visFFMJhbVx6qSZPmYfeE+H2OZlPC\nEbdGLw3OsHK7qpdbg3yUZzE23tP0LBlrSCGa2Z7deZYso0PK4rg6c2/iv1po\nepvezoBfazqT3ef/JPZQa6jv+O5xMln3ugiikllErtTqzVM+2Ybzm0QEjbn7\n5biPlQzCxKfPZqyYWwVYVd2YBmqzWWEF11zu8eAFYlGtKxDA4zxuL9a8daVP\nAGI4DbDbmnCtDNcFeuOz44bqcsgGVFE4wBUU3xVt4h5GWEjsa99nMJTNgBLT\nn3ddQu6EC7fcoVM3pAUYsK7n4OOEQyyh3Hkjt9cTnPdM8jbtuabXU8L8pAK3\nhjMmqvuZ829G4FJE3H7LR1s73OPMZZWauBxWjxZOLGuaKESMk80hQdXSNTlo\n/dXHqoWBOq2RZ88kvskwFPvtFjQwcLKp9EtgK77Ndtzi+dhblu1DcHKBIp4G\nmx9o\r\n=UD9s\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n#### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.**\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n**Note: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.**\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n\n**Note: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommended to\n always include it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color)` | Sets the container fill color to the given color for an enabled button.\n`disabled-container-fill-color($color)` | Sets the container fill color to the given color for a disabled button.\n`icon-color($color)` | Sets the icon color to the given color for an enabled button.\n`disabled-icon-color($color)` | Sets the icon color to the given color for a disabled button.\n`ink-color($color)` | Sets the ink color to the given color for an enabled button, and sets the icon color to the given color unless `icon-color` is also used.\n`disabled-ink-color($color)` | Sets the ink color to the given color for a disabled button, and sets the icon color to the given color unless `icon-color` is also used.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color)` | Sets the outline color to the given color for an enabled button.\n`disabled-outline-color($color)` | Sets the outline color to the given color for a disabled button.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web button component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"@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/density":"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/button_8.0.0-canary.c678a9d34.0_1593453122236_0.030626239065000282","host":"s3://npm-registry-packages"}},"8.0.0-canary.521afaf6e.0":{"name":"@material/button","version":"8.0.0-canary.521afaf6e.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"1abfbc99b103f484b1430720ddefc51cf405a8ec","tarball":"https://registry.npmjs.org/@material/button/-/button-8.0.0-canary.521afaf6e.0.tgz","fileCount":26,"integrity":"sha512-Segy4qIftvQh0DNGbN0PrFehaKgXBczCwRT9Y2vulCdPVlfpokUohaFMgDzBBLJDlNxmMOmQ0ZtKXWwOodY43A==","signatures":[{"sig":"MEUCIGIM91xg5NWVZNIJ9+ToCe2u28NYEKPWyWMu3+eRnNO8AiEA58lgs5bmu16BiP3RAnATOSkh8hzVW8A624zEtvryzUI=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":388593,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe+1TTCRA9TVsSAnZWagAAHi8P/jNBJncdKd1rDgCUiZD3\nafWu/zC/drNJZnRpMpUNQERuGEPiOuPlekVy2s4JiaDqttHM/WizwPcx7XWZ\ng4FfiyfAWEDsQJeGJoI5sbW2NHG3OZS+LdZr0eQiWhzMtGIjiIpAq32ovTHm\n2nZaL2X2f9mP4yMCwhGCAljVY46gCuEeJgAeBv9XZI90QBOeClVjiX86K1rp\nJSn7HgBZpGbRO+8LG2u9LQiaQJ9L9ypK4s1l9wOrxMA6F2564kqGi/OzygP1\nNtbMeRaz+DC7w2faJafFjy7bFzmZznN8jH8f2zIKX8OrtxSgsm3eFmtztODo\nqqWLQL/+irXO+g4hDjAz3ZDJVUIZakPG1+gE2CN2T6wMfjQcA3GVPhydSauZ\nysc9lamrgJySCZuAWTQghvAcHzzsIeaVKLXYpQyrpnLzMKVALkx6RolTFMky\nP0PI5GoGh7USdZxfekQceNwr4qkFk1RIestYK6dctBlY7HFSKEizZuqJjNOj\nFEi80QaREuUCDkKqg8qZh0yzhPi98vA4jDHKcv/0rwSNAsSGjfwlIEY601jV\nsSA21eq7QUF/VImCR7UK2a2EzUTVgMQVbITO3beXXfzy29UIr9ICI+mAj3BH\nblFeU/Oc33g8c5TjiIAtBjOD1Ws5aNg4YMjXeRF9ikLVY5Q6Ftj6GOnTip6K\n5wPT\r\n=bll4\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n#### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.**\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n**Note: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.**\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n\n**Note: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommended to\n always include it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color)` | Sets the container fill color to the given color for an enabled button.\n`disabled-container-fill-color($color)` | Sets the container fill color to the given color for a disabled button.\n`icon-color($color)` | Sets the icon color to the given color for an enabled button.\n`disabled-icon-color($color)` | Sets the icon color to the given color for a disabled button.\n`ink-color($color)` | Sets the ink color to the given color for an enabled button, and sets the icon color to the given color unless `icon-color` is also used.\n`disabled-ink-color($color)` | Sets the ink color to the given color for a disabled button, and sets the icon color to the given color unless `icon-color` is also used.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color)` | Sets the outline color to the given color for an enabled button.\n`disabled-outline-color($color)` | Sets the outline color to the given color for a disabled button.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web button component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"@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/density":"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/button_8.0.0-canary.521afaf6e.0_1593529555206_0.1846173440087835","host":"s3://npm-registry-packages"}},"8.0.0-canary.a2ad48839.0":{"name":"@material/button","version":"8.0.0-canary.a2ad48839.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"2b19c39c0ec4082f9604bc51dff8ed971cbc1f4b","tarball":"https://registry.npmjs.org/@material/button/-/button-8.0.0-canary.a2ad48839.0.tgz","fileCount":26,"integrity":"sha512-zWmvV+dKVIQ4nB5W9bA6hklPD5uOIdz+tPSsz5IcIhNm5KtTVbip2w2IweNAx/hzMMenuQU0KCovK0Pv5KbceQ==","signatures":[{"sig":"MEUCIQDK7u+8mfB/W1AyS24wZIScj5ipQgzfK0TdeBOI4RxKmAIgfS9rllNLUSHEQbI0h/4v8JYR3QNhhHsR7bKg1dIHIgk=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":388593,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe+48iCRA9TVsSAnZWagAAA8UP/1OW3gpIDT7P6aPUoOrU\nY/G6PH9dx5pUI0iF07AOeLrdnuOra1m8VckZqcXXlVtKKfY4yNYH7AE1cvT7\nFdop0PyevQStaKuZMEgNEPK6H6UnQdQMToVB04LSBpTpch+Dzydw7bE6AQvm\nFt/c4q3q2VjuzTVM8ytIoP8PPMCOnucZHPepaGP/uybFJjOlFslmic/0UXYi\nXmYnXQv9ptvQorgrStri0YjAZrHvhSNfdE9LGZTME7jvLb6ogIycHgiXjTQ3\n5z6WkuiA4Com3nZpo7EdukafNOalfjpdRSJfchnyTZforEpDxwWwoRgzkNHy\nJ6TjH1902A5cCcabOa+vRKGDIiLz69clXshQAYxEphy9pl2DvzrvXhg52ng2\nbHTg0ItUJI+u9CF2VGTXuXkkiiDF9PWCKxai/IBssSbZ0B5ehn5+o+h9o8DU\nmO6JzGZHRVCXDo3XYonXhW00XqOYPuiC6ZzcVtjtDtDIK9OO4S/5nWZ2meBT\nWVAeIU9RqfR43tXDf5AhPu79U40L+Gw3bKaksH65DCJ8UfrwHEDbDh6xd6YT\n3neEw59NTHNbqUVpwPjqG0W9K+YUHne/szws1tzs3KYQPDzofru/mq2iBPq4\n5mYttu1K6gO6Uf6xlUtbInpCEd4gOcKT4lLL1OS3YbRRf57V88tbEZLEURrG\n6YC9\r\n=T/4R\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n#### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.**\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n**Note: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.**\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n\n**Note: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommended to\n always include it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color)` | Sets the container fill color to the given color for an enabled button.\n`disabled-container-fill-color($color)` | Sets the container fill color to the given color for a disabled button.\n`icon-color($color)` | Sets the icon color to the given color for an enabled button.\n`disabled-icon-color($color)` | Sets the icon color to the given color for a disabled button.\n`ink-color($color)` | Sets the ink color to the given color for an enabled button, and sets the icon color to the given color unless `icon-color` is also used.\n`disabled-ink-color($color)` | Sets the ink color to the given color for a disabled button, and sets the icon color to the given color unless `icon-color` is also used.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color)` | Sets the outline color to the given color for an enabled button.\n`disabled-outline-color($color)` | Sets the outline color to the given color for a disabled button.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web button component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"@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/density":"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/button_8.0.0-canary.a2ad48839.0_1593544481560_0.5157634473640691","host":"s3://npm-registry-packages"}},"8.0.0-canary.ec2385881.0":{"name":"@material/button","version":"8.0.0-canary.ec2385881.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"2cff138e717bcb44b9856dc6b3516b6957982ab5","tarball":"https://registry.npmjs.org/@material/button/-/button-8.0.0-canary.ec2385881.0.tgz","fileCount":26,"integrity":"sha512-JhdRt8/WWG8p/AH9Z/kiDl6oPUAJMVlo+dMI/2wTtDLBVcJ8v3sqKcQ4UPmlPncwmCm9NXPEfu2h/WWnitmQZQ==","signatures":[{"sig":"MEQCIECuBSD+ilg0CqC1OP0sABKNKtQEtSSAUcQYIQmSikAvAiBPvyACBKHZbs5RQpWli6vyHmwZ227rgPFmGM7GyujkcA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":388593,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe+7LpCRA9TVsSAnZWagAAhNcQAI+W/i6KBpxXo0oCbjFL\nmeDtv7FJ5nEnL4Ydyehupuhs6xh8/JA4w+/0/PFoANwUgirDbvJIar8/EPnm\nTAw84m+Z6kg++ji/r0or0GfEPzOKL1tZyb8o2odnEJ8KLeEIWpXUag4dZlLt\ng9SrWEP2BF6rJzx/MBdL7ZJaKEVi2f1/n2bXwFHMr/s/cwv19XP90Kjtn8X0\ndOBbwIfaqjWMc3DbyQoNVjv7re+N+D9qrX+3Xg4xPyOQwXGOpag9p5PyFG4o\nFnUckzHS6qWas5hnEgkrbkeSiC+PSVDzbhjXT3oWCrS37H4HBZ6zOfwIVfyX\n+M+bcGF5CSnt/7ttg/CStIRSs2xgWSJSIqK+Kare2x8OIHhJ1/2BzCSGP/uF\nEmvgiCt1bfLIGML2b6l+l/Mjf3xJ94xdAG9nlr7u+210fiY509lxwj4RLUx9\njnRR5UNWz8xXnsNk/q7mm9RavwtddrT0otv5c/mVkdXiOBURaM7e9rQV00/B\nWQCP0eCxv+SYBXdxcVRd+duavbSC3MUv0ysjgLb2CLXkkmWxNGruZKxKC8sl\nBCE/7RMVYPIGcC4M9ypewqQpGtMxEy0Q3Cet/2Wbjhv4qpSpiXtiAcHdvFXY\nA3SyefyT7wJCwk5FtXU4oeSfZJ/uMuP439ufTAxsCva/QrEZGRuWK1AhMwwL\nMANZ\r\n=I5/t\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n#### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.**\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n**Note: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.**\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n\n**Note: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommended to\n always include it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color)` | Sets the container fill color to the given color for an enabled button.\n`disabled-container-fill-color($color)` | Sets the container fill color to the given color for a disabled button.\n`icon-color($color)` | Sets the icon color to the given color for an enabled button.\n`disabled-icon-color($color)` | Sets the icon color to the given color for a disabled button.\n`ink-color($color)` | Sets the ink color to the given color for an enabled button, and sets the icon color to the given color unless `icon-color` is also used.\n`disabled-ink-color($color)` | Sets the ink color to the given color for a disabled button, and sets the icon color to the given color unless `icon-color` is also used.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color)` | Sets the outline color to the given color for an enabled button.\n`disabled-outline-color($color)` | Sets the outline color to the given color for a disabled button.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web button component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"@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/density":"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/button_8.0.0-canary.ec2385881.0_1593553641029_0.6992008350105672","host":"s3://npm-registry-packages"}},"8.0.0-canary.610c26c4a.0":{"name":"@material/button","version":"8.0.0-canary.610c26c4a.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"4898f1f5dd6579b933ac7116fca08227c0cdb7cc","tarball":"https://registry.npmjs.org/@material/button/-/button-8.0.0-canary.610c26c4a.0.tgz","fileCount":26,"integrity":"sha512-iOWpt9xdilemj87hKCWNrSqX7kcRqyVb57GVx9XtL0o2+oqDh8YRoi4r5YVBwaKSS109sZPoEwAmox+AiXzjGQ==","signatures":[{"sig":"MEUCIA9OAzs8xe3ThS26Ey40nZbQLtX++K+x8L/Wx63naJddAiEApvgaH3crX5piZDKRmeuviZOgq0C/xEYmOLgKWpGrgKE=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":388593,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe/KQmCRA9TVsSAnZWagAAhosQAJSGwitterWcKA+xdqDN\nxTprMulqMejmjX4iLMUlYQ/gX/9cgfJnpnax5xpqezbyqhK2UYEMgK7lsruQ\nexKG+gB96D5GfKELISlLYZE7jrzfWOI1K8XHl+cuYsLlbe0m1iwbBIPxWj0i\nECnyCKcrQTMfPKMkLVc0rNu3IIk4a58oG4IT8GFbAn1FW/AmRPRSTErKXAxX\nlFRQoCGCH1mAxAyDRlz8e7183C6O7vu9z3deOTK22O7SZxtwMwFoe2+Utfpe\nqqBfeVprPWaQqVt4n925lYsjIg5d0HJYIZQDE0AspjKJj0Y2FT8+2PGDScu3\n7h8JYsu/pp/3Vtq4V7O54YhOv6deiaC9n+jiSEZxtckfwURMCJr+HNLa3sqj\n+Fz/mz70W5a2IqRm/q/Z2+6dyaHFqCbf3XmCCdb6rvz7IsMoEdShLHWWNO15\nxtMh18bNtmmDpJhhl1DvHPAx/FZO8lVJqh6Im3rQee9JZ5vJmt13g3P52m9+\nQwxcJfZto5vofQlArsdVzXvD5aeFB5HkjTTx6yCwciPLjMdhbawee2Wt5unj\nq7dbfX9VCabNv0nRobfbJkj+Nj1rh5ql1jAEOnkLON31cDjmo/yfdCsFi0Qs\nvbA0B5C5xvbh5y+uraI6w1vGEMUjPQiVz2PKR0yEl+/edoIC6r7EkgAhsX0p\nO5fe\r\n=fkMh\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n#### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.**\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n**Note: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.**\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n\n**Note: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommended to\n always include it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color)` | Sets the container fill color to the given color for an enabled button.\n`disabled-container-fill-color($color)` | Sets the container fill color to the given color for a disabled button.\n`icon-color($color)` | Sets the icon color to the given color for an enabled button.\n`disabled-icon-color($color)` | Sets the icon color to the given color for a disabled button.\n`ink-color($color)` | Sets the ink color to the given color for an enabled button, and sets the icon color to the given color unless `icon-color` is also used.\n`disabled-ink-color($color)` | Sets the ink color to the given color for a disabled button, and sets the icon color to the given color unless `icon-color` is also used.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color)` | Sets the outline color to the given color for an enabled button.\n`disabled-outline-color($color)` | Sets the outline color to the given color for a disabled button.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web button component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"@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/density":"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/button_8.0.0-canary.610c26c4a.0_1593615398076_0.3128739607823243","host":"s3://npm-registry-packages"}},"8.0.0-canary.e2ea4a99e.0":{"name":"@material/button","version":"8.0.0-canary.e2ea4a99e.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"91e17cdbdfbb9cedc810e732fb114d69c862bbb0","tarball":"https://registry.npmjs.org/@material/button/-/button-8.0.0-canary.e2ea4a99e.0.tgz","fileCount":26,"integrity":"sha512-X63SABmUoOdT4TyMskfQv4Iq/BsHrtbdy9SMSplT8E7BwzRpmLXBJB1JYpN+aNPlncvutuGn6gdsXelYPZg3lg==","signatures":[{"sig":"MEUCIDZLHaUmCasOuh3SwyziE+6KuwNVRkimfeJDkC5Fg1wLAiEAqeva5H0E95OYAdnwY/9llmT6QrP/8Q4phwoNmS0Gngg=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":388593,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe/OOmCRA9TVsSAnZWagAA41kP/0KGxbA2mtczGyr2I+B5\nPeHfWAuNNzLvUt3SGom4pS0C/H2Fin0W5g3IXcr/Z85JVHwWCRVDBTWU5Bje\nKgzjKCqe8/3hrTt3BMa18iyuQWe3hSY26v9iR29NpgIjrufDsjYL3aCRl7h4\nyuwZBSLHrUxvBgKWInjo7YBKu6YiJLb2TnB7MisaPYxcenbdQ5SOZ1ywUs7B\nLMDscYfKSBZYIfcWEgRy9Y4Kisdx/l611MHoChrZRqfjr6TlyYh9lUuvy6hv\n8+BGYcXA+tB8QPMwIDLy/0OtjLhv7MG265dZs7EvuHMjrumx6uDixV/7wrgH\nki1eo/Ps2XpqvkY9f3ziyt5fmj+qo/1/YeDPimMW4n9fLowNvXkrZGqdCNxg\nq7iaU/QiHtiZbKbD+q9uRtld8kUHChxZjvZW5xY7OJgLBY0Dqbf/0ToGo/6r\nONfur+QyY/WB6y+cL8MfFivsdftsTD3mmrqZF9QGUk7q0ewzSNKkTAfwVWDh\nHS1p2kVK6U1cN4tWjRnzecXEaBj8MFkHOKgpghUqi4NvVCBIRog4VXuzgN7I\n0X2kgQX23ooVSBd0BBYEA8S9irS0fhTfjxIRCgBEwELJ7xzv2cgRoItgOfg/\nM+D/WPiV5BuzZI05TJfraeXljzAfGANDj3oDTi+n6hFA08Tz9yJmirHcSwIE\n+gLz\r\n=o+pw\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n#### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.**\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n**Note: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.**\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n\n**Note: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommended to\n always include it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color)` | Sets the container fill color to the given color for an enabled button.\n`disabled-container-fill-color($color)` | Sets the container fill color to the given color for a disabled button.\n`icon-color($color)` | Sets the icon color to the given color for an enabled button.\n`disabled-icon-color($color)` | Sets the icon color to the given color for a disabled button.\n`ink-color($color)` | Sets the ink color to the given color for an enabled button, and sets the icon color to the given color unless `icon-color` is also used.\n`disabled-ink-color($color)` | Sets the ink color to the given color for a disabled button, and sets the icon color to the given color unless `icon-color` is also used.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color)` | Sets the outline color to the given color for an enabled button.\n`disabled-outline-color($color)` | Sets the outline color to the given color for a disabled button.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web button component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"@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/density":"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/button_8.0.0-canary.e2ea4a99e.0_1593631653902_0.9676883984669529","host":"s3://npm-registry-packages"}},"8.0.0-canary.a78ceb112.0":{"name":"@material/button","version":"8.0.0-canary.a78ceb112.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"79b13900307f769e7b63f9eef1d209b40df7fc2c","tarball":"https://registry.npmjs.org/@material/button/-/button-8.0.0-canary.a78ceb112.0.tgz","fileCount":26,"integrity":"sha512-HQExVH0zD7VIYt+48YOaHRcCXYRiMeGsVwhYDeLJilipqxAjniDLhudlBjnmAFBOFs0kWAYuIyXRiszJfgOVUQ==","signatures":[{"sig":"MEUCIQCVoDK0BvXA2cx9uM8MPgyABnTCkV2vWO37M+pLaLv0pAIgCxhlAIQhdoE9yY/fEYUEPnCU8U27ocFZAH6ZqOfmVzA=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":388593,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe/OZmCRA9TVsSAnZWagAA8GkP/0kE3lFOxZBZjOF0Fuph\nwh5oWLDfQgwFnl6/vcWJbho53YM7OYuQx0/pFLNZHKTjPXYtNTWNz/Z39qBZ\nXn6683de0QU5Euenb53oYQF063j9mlA/reXx1N2Z5X+Fmex1hOb6p0mtaGYY\ni194G0DyN2K4Bip1026WEA5k5pys22WBlkcRwDtR+T9e/gOkur3wLcojHdjw\nweuf+X3wVTGAsgiRMSDKqMUPNv8QppISU9CZfjhF8MIMgVS6i1g5yc1H2sT5\nOpdQoBG/ruPcvi5MahVgWuNbnkj8EcSrIMx6FRpJNytbXQPFl5jge4JxlgFt\nZhdF4nvsGmNOMML6vrbrYb9NKGCnJY3yA5/o+ueno3YoTmT0tQ1GwfFQkN/x\nQfizB5pRqgJdE3AWsB38c1NTpCabszpOYOqhUmAqdHTaFRlX8cfEz2ZxeDjQ\nKidbqLREUY+TVLGsR8zYXBfm4Bp3itibBFsVKpybdPuVRyx2nmawESiCctIw\nG2r/4Tv72xXHvaaF/QoHPqRGFCD4FmJMnWOXvU6DIO1F24j2Pquk9aYDNPws\nRqGOlLDAGMazT91YFBhY4HiVFq3205kvmV2qRGBtWXc9IHwCUDjsMCl4IoXH\nKpI2jQz/3tAPM2dfxwxADA1ur2e37n/hbbE6Wo8Q1yHZnfMM6z+Oy9jiQngX\n53U8\r\n=9qrm\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n#### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.**\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n**Note: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.**\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n\n**Note: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommended to\n always include it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color)` | Sets the container fill color to the given color for an enabled button.\n`disabled-container-fill-color($color)` | Sets the container fill color to the given color for a disabled button.\n`icon-color($color)` | Sets the icon color to the given color for an enabled button.\n`disabled-icon-color($color)` | Sets the icon color to the given color for a disabled button.\n`ink-color($color)` | Sets the ink color to the given color for an enabled button, and sets the icon color to the given color unless `icon-color` is also used.\n`disabled-ink-color($color)` | Sets the ink color to the given color for a disabled button, and sets the icon color to the given color unless `icon-color` is also used.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color)` | Sets the outline color to the given color for an enabled button.\n`disabled-outline-color($color)` | Sets the outline color to the given color for a disabled button.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web button component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"@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/density":"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/button_8.0.0-canary.a78ceb112.0_1593632358362_0.7830256709189949","host":"s3://npm-registry-packages"}},"8.0.0-canary.b0c456d33.0":{"name":"@material/button","version":"8.0.0-canary.b0c456d33.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"6e3b7e636778fae7b9c55de4d8cd6936a1f6c0f2","tarball":"https://registry.npmjs.org/@material/button/-/button-8.0.0-canary.b0c456d33.0.tgz","fileCount":26,"integrity":"sha512-O+nIBsbIFFlPoqkKydq3hTg4fkkwc4HJrQRGUXr5TC00y5so06aZ/Bx9sUZ3G61iVYWl0dplSGeJ/h4pC6e5FA==","signatures":[{"sig":"MEYCIQCGflG+dxOyTVzsTQbp8IXwrqvHXaNL9DcsD05VMCNvpwIhAL5jkeTTF0ErGT86EGHITEpcV1MZYDSfRo6uNUDeg+Gb","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":388593,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfA6iwCRA9TVsSAnZWagAA2qoP+QE4kHeJvKDt8gm6qIjk\njNmpE15PKi86bBP9PxtgHHsdulFXh6M/78n55q5fxZBY6416uWj13wRgxvcz\nNnfjmQ70vL0qh1AfDm0+SXI20cz5EXTuLYakRem4GuoM6bTXeMFiMbb6ppDB\n6a4DBjz2NzTTOlp+MpkCfC/qNov269gfJDIQAnr0rpUNf18WZp3fgRJkD2jF\n/GpEQZ8hUXAEG/PX+3CcDMlue6C94RQtq14bY6B5N8rCeoUO/8o6kmsQNkNH\nGLpzf+XEo4nIbH5TYr9UcNoXmCdPpFbu3BF2emmY8Ei15pxD+KPiCtZcY2ew\n6L4QAgiq7tWjwBFM9azn7H738kL/e1bhXTWrwlhW7e1ReeNWZvdnEmLvyAHh\nwSOFTA2ewgkX1Rn7ebMfZmAy6bkoIEPFrrdOzDrJMjiddhfLeb0RkhaTaLzG\nxFhIcT53n5F0XyF8LmGqXfgK0ESA0zX4MZxAmz03HFrKbj4J332KoZhrASPf\nIyJjLXf93+NexZ486372a05zX18RVacNUGC26W2BgYXXR+2LZg/ES88XbEVG\nHVxd6GPp0ZpGsCJvuTyZcLZ8+sdOTyfjgzSYuLwuo/hjZtWnBNLg3jbT0Wj5\n2rG6KoPC1rd5F+XNFDGQnRZ8fGw3b1RNBGynAGRo90m7Ckly7GgvKNJxFE9C\nKtkV\r\n=5iQ8\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n#### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.**\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n**Note: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.**\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n\n**Note: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommended to\n always include it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color)` | Sets the container fill color to the given color for an enabled button.\n`disabled-container-fill-color($color)` | Sets the container fill color to the given color for a disabled button.\n`icon-color($color)` | Sets the icon color to the given color for an enabled button.\n`disabled-icon-color($color)` | Sets the icon color to the given color for a disabled button.\n`ink-color($color)` | Sets the ink color to the given color for an enabled button, and sets the icon color to the given color unless `icon-color` is also used.\n`disabled-ink-color($color)` | Sets the ink color to the given color for a disabled button, and sets the icon color to the given color unless `icon-color` is also used.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color)` | Sets the outline color to the given color for an enabled button.\n`disabled-outline-color($color)` | Sets the outline color to the given color for a disabled button.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web button component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"@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/density":"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/button_8.0.0-canary.b0c456d33.0_1594075312477_0.07823820286506633","host":"s3://npm-registry-packages"}},"8.0.0-canary.2e5711e04.0":{"name":"@material/button","version":"8.0.0-canary.2e5711e04.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"a0392175fb30b52dbe759c97793837cbdc740cb8","tarball":"https://registry.npmjs.org/@material/button/-/button-8.0.0-canary.2e5711e04.0.tgz","fileCount":26,"integrity":"sha512-1DiiJ5rG7QuCw05BGXH2XCn5W209hFZ08t65bT6glLFSAclMBDvmLl+8zTvNyMqNvtrdmGgU1QHiAmIkGRCFpg==","signatures":[{"sig":"MEYCIQCKe9Qd38H4HOU40sLcGpSWejRA5QjFon579gV1E89nwgIhAM/JbRowQwOGux7Lff0trC0maYvajYhRqM1jbUFW0C3T","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":388593,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfBfjhCRA9TVsSAnZWagAAwbYQAKIxrM68WXB3S6E1UEpP\nXrzVW/Oxo29y3ToWW90hSrQcoI81o3MtUVd60YPOpge79OR5exQwQrcRuMiq\nI+SlXNI9KEhG+/sL0vLwjzObbs/3yPXEPcZSVpj8TK7LWY7ScTvcgq83pNzA\ny2wFkeJfT87Y5LhWVzSMShzmnmu3Ra2OAE6ROurSivOtCrrlaNHMT8RCJNfb\n1SVy/UVuuLkVY8UaGK2WB6ZFxETxqMtsLi9iT5dv5v/p9aCc7V8i9l0erj8C\nALprQJl005QhcaC1vHAsuUCxjD1dUvCHEv+lRihoXQyPJJtXyrndr1HNnL6D\nIvMy50AZQqArIAFUwyUfz9ZTzZqpth0KefO7IxapfjjRmZtdfRgIICU5sgq8\n1iXgPICGbT+ZSZS8ykB/9wJ7dHH+VMmyimldVjuUZWVRdpiPYdhrdLYtyLN5\n9wsoU2i9OD4lYU7U/hduaEOpywXbWJ0IAfBiU0gk2JiH+0WQ9Z9PejCe2Ri3\n+FKQqKYvKWg1XHfpUXUSPc4jwXu0fLFS28sOI99KZ3RblLZQib+D8lJe/fT6\npTh0lECtRUnO0rIwDU9t8tc61gQQ3P9sq7r3lKiW63sdugwvL272roI8MQk1\nWpJwGzm+e2ehLIjLhsX6SnTU3SbE04xWbBpdos0357LKcaYq5fXLOuvIHoAV\nMbMI\r\n=XF8K\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n#### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.**\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n**Note: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.**\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n\n**Note: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommended to\n always include it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color)` | Sets the container fill color to the given color for an enabled button.\n`disabled-container-fill-color($color)` | Sets the container fill color to the given color for a disabled button.\n`icon-color($color)` | Sets the icon color to the given color for an enabled button.\n`disabled-icon-color($color)` | Sets the icon color to the given color for a disabled button.\n`ink-color($color)` | Sets the ink color to the given color for an enabled button, and sets the icon color to the given color unless `icon-color` is also used.\n`disabled-ink-color($color)` | Sets the ink color to the given color for a disabled button, and sets the icon color to the given color unless `icon-color` is also used.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color)` | Sets the outline color to the given color for an enabled button.\n`disabled-outline-color($color)` | Sets the outline color to the given color for a disabled button.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web button component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"@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/density":"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/button_8.0.0-canary.2e5711e04.0_1594226912924_0.33263114329828003","host":"s3://npm-registry-packages"}},"8.0.0-canary.811fc5d24.0":{"name":"@material/button","version":"8.0.0-canary.811fc5d24.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"466d7d76cf1496553e3b25a11a0b5daf7ffc0d35","tarball":"https://registry.npmjs.org/@material/button/-/button-8.0.0-canary.811fc5d24.0.tgz","fileCount":26,"integrity":"sha512-6k2DqTyBJKMgAaDsH5AjmbwrjVKTDGSRocCrLlDda6Pn7bdsdVBjxQXY9n4b4aErVRAGvNaLm87oJHsYYBMxxA==","signatures":[{"sig":"MEUCIFfDXKG6IUNvXnmEGr75mIu35QY6V+ijPxXGS0W6by82AiEAp8XRFK0+v8ERHREz+I0cjI2R/2FkcexI64RFv4LJsNg=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":388593,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfBf9XCRA9TVsSAnZWagAAt7sP+QCU52IYSdNUZm25mtjc\nR4UK+7VPArr3Az7dWwjHMFMiAwk1R3FJLnzLDfuOb33nLckxvuCsaRwywhro\n/xjJlzXKpPBuBJGfcz1eQxRW0SP8FrlnU/mzTdU6hF2fghtRa77itVHcRMFk\nvcAem2JflYElRB0yF4kUfgvCGRYn0ZMDd4RI4nEguGl8uEC69CExteyiR5Kj\nZRvR6di/b6pjQRgKcnKphTdBUuYDCzcGPPQKHFDulGNdaBcQpHz6zC7VaL5U\n/uW6IhqTDad2A+284Wh964CoiHc3oF4PbHKNPHxmHPRNL4+1pPX4m6/Bmh2P\nQCVHlmN/YSTh83O00GQPJYGSaf0nh8OhBtsE6iLkDKJ1wCYc5s6gXKDwTY80\nJlloiW0GIgbO3nxrSrbi8k+7nStIIFX/e4bcrnY4i0JrqbHrmD1EVEog6R3N\ndyiW/ueEbCd/mkBiF1Eglq0ut9w5BlvXWOthrtT7EzYgYRmZn+uod7wxNFu1\nYPhpBTVGK7/Qf+mUYKBwI59Gl8vJH9JsI/r7bcF+QOAQWSWP2HCz7mHhueBK\nZzB15oC+/ecy3F1RNtU9YhL5TCs3XFK5bZPCKfpig8ZBogvRk2MKyHR5aWxH\ngXlkGWUE2Jo5kuvkG7MKLr5/AF00ZkDhgUdsHrzdpbdhMy05P2JBhgkASjle\nRm4t\r\n=lq7W\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n#### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.**\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n**Note: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.**\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n\n**Note: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommended to\n always include it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color)` | Sets the container fill color to the given color for an enabled button.\n`disabled-container-fill-color($color)` | Sets the container fill color to the given color for a disabled button.\n`icon-color($color)` | Sets the icon color to the given color for an enabled button.\n`disabled-icon-color($color)` | Sets the icon color to the given color for a disabled button.\n`ink-color($color)` | Sets the ink color to the given color for an enabled button, and sets the icon color to the given color unless `icon-color` is also used.\n`disabled-ink-color($color)` | Sets the ink color to the given color for a disabled button, and sets the icon color to the given color unless `icon-color` is also used.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color)` | Sets the outline color to the given color for an enabled button.\n`disabled-outline-color($color)` | Sets the outline color to the given color for a disabled button.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web button component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"@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/density":"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/button_8.0.0-canary.811fc5d24.0_1594228567387_0.21838308772959647","host":"s3://npm-registry-packages"}},"8.0.0-canary.6ed717ddd.0":{"name":"@material/button","version":"8.0.0-canary.6ed717ddd.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"c54bccdd6bd3f6e606e59514e8d70c52949763be","tarball":"https://registry.npmjs.org/@material/button/-/button-8.0.0-canary.6ed717ddd.0.tgz","fileCount":26,"integrity":"sha512-U6UPAnk1dIIPN1KUKO9z1zn9t8XRtFL52S/UjgsurZ/rpfwWkSNFCAQ2E/JWF1fD+o1Pmu8uI3fOgMWNr2FNsA==","signatures":[{"sig":"MEUCIQD5KlaEfRNUDpmfpBkOJnJ+098kUOsAI/nWtC8JJCuQvQIgdvD48jw4p+GTzJTzDfiJP9kRue3u6kRes8olUEbITHc=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":388593,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfBiIfCRA9TVsSAnZWagAArukQAKOZmFgvWqynvnV956Ha\numS0waWiic4UfWkqbmCZu7iACHHgwl8bxF25oeo0b2CNKaX0KlwkfLvy3ekC\nHyRXwbfl3yr37fOw5bvSYayiTBCGw/O8oP2nLqh18+f42xp2wxkuF8dtZlK9\n6HzxjE2UtXGy6GbL71x0avdxB+Q1octWwB5vhI9wuZD3h4YKQD1xkjY7uJXS\njQZU6DAKbMBHzHFrqE3eQdGW+RbvxcPZ6X8ElkIBnZ/a/j00q8BTidixNDal\nb+UV1sxunwnSgqf3s5ixNqPxYBnB3f6q7zQ4D4ye4zr4jlo2vIVZNnl/gf2o\nh/BcDsLnqExyERFvPRdoF2/onwNyKpStWScwpj6NkAoT+EzOa5I2wVtfUKdI\n8je4iFd5cozq9rZVeMTchb+u30+Z6Z9C/ZfdDMtgZ3bNKKsg1S358GrjJe3i\ni4V/Ib8bSEboYs+1TEoHrUDzn1UbNJqVm11CAp6w2qSAuqmN0drYqpEd+Ytp\n3riGaLcb4q7p96hs8nnH9hl3NQygQmBPpUdU1nCMPR/7ZOrGU/VtAV3n6Ifs\nbkW0zMImphzAOVZESSO/MxPIp90CvymcoopBhkX+m4W0s6lLUBkytduhtZBA\nhOaDxPkSCkgAyTBK6q0GP1q4WXi+5wiFYQrq8BhShgNTpK/tb0osmaSO4Q1O\nIUVu\r\n=agUL\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n#### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.**\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n**Note: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.**\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n\n**Note: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommended to\n always include it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color)` | Sets the container fill color to the given color for an enabled button.\n`disabled-container-fill-color($color)` | Sets the container fill color to the given color for a disabled button.\n`icon-color($color)` | Sets the icon color to the given color for an enabled button.\n`disabled-icon-color($color)` | Sets the icon color to the given color for a disabled button.\n`ink-color($color)` | Sets the ink color to the given color for an enabled button, and sets the icon color to the given color unless `icon-color` is also used.\n`disabled-ink-color($color)` | Sets the ink color to the given color for a disabled button, and sets the icon color to the given color unless `icon-color` is also used.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color)` | Sets the outline color to the given color for an enabled button.\n`disabled-outline-color($color)` | Sets the outline color to the given color for a disabled button.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web button component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"@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/density":"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/button_8.0.0-canary.6ed717ddd.0_1594237470778_0.008950651530141185","host":"s3://npm-registry-packages"}},"8.0.0-canary.d850de590.0":{"name":"@material/button","version":"8.0.0-canary.d850de590.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"12aa18044f62e67ca499102ded10bda2671f4773","tarball":"https://registry.npmjs.org/@material/button/-/button-8.0.0-canary.d850de590.0.tgz","fileCount":26,"integrity":"sha512-gNn7R1fHli3KlHjFFUTEVwoxLpTqAuIa+s4KwsSjnnuUtEEc3KfIIWBCJu1IZfuw8Xrw4hLTAWa0/+G05eUGPg==","signatures":[{"sig":"MEQCID64VhzfyGJhY98IcSLOAQIsiAfizC9IddQK8Vd1342aAiBZP5uV4uHyZTQxOzCY6ZJby1gfYxYm26Ln5EE0MV29GA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":388593,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfB1yBCRA9TVsSAnZWagAA+ksQAIAxSVOtGSeHxWaZTJ2j\nMKpMUefTQOWEZnLRNEp2z1gAphLPtugCr/h5aOCUxospTWmYxz2lnnS/ODzG\nlsyfeOk5dnsoCHVmPfMwCM/1WX9Jd2mNkfrFQKGjglnsFetRf22Fy8jUwVBF\nCJQavUPZMM9CvQTk2B3vmGSx4Sqwgx8ixznJhEzezsJ+841mI5NfH0z2aWHI\n0J4LFeUT+h+uFLYH3ENIwDZ38vzySWP2sBcd2Dq567V3CudOpo2He/gItg08\naCIcqqWjshFTSIGqrucFfgAb0WVCL5urPnSxTK4eAEmJgeYJUbS/3DCc2Mbd\nYR2Oz3SPKY335VthLA2xpP6+hC5MWqFeqC1lZUhiDaewMQQxWahnx4FgXE/A\n70EzvUcb1OAknb8PifaRK1xdJVqEdWUl7Y7b9HBs+MdTI5xzafuWNNySUGVZ\n/NFDStDK+W1+GhSr0zDx10Kb0PfH3sjy6nA4MLMt6DfzI0Gvv0GBoBAqF/hO\nMh1UNNCK4rbcEeKp+8veNKDMwoGHQApeNr+ovhv44sVgjd2aG0LMjcJuxWpK\nW+Ab0YGHkSJt0/N79pKgfoi3DoBV0ORpwouYernI8dQh3J70tluDweHLlhyS\nQpaiUciVFdharSP8JEGO3t8/U37O57VS1dRaLNdjSNKXGZ1pv3cOO33AHWww\nRGKe\r\n=wS+z\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n#### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.**\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n**Note: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.**\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n\n**Note: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommended to\n always include it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color)` | Sets the container fill color to the given color for an enabled button.\n`disabled-container-fill-color($color)` | Sets the container fill color to the given color for a disabled button.\n`icon-color($color)` | Sets the icon color to the given color for an enabled button.\n`disabled-icon-color($color)` | Sets the icon color to the given color for a disabled button.\n`ink-color($color)` | Sets the ink color to the given color for an enabled button, and sets the icon color to the given color unless `icon-color` is also used.\n`disabled-ink-color($color)` | Sets the ink color to the given color for a disabled button, and sets the icon color to the given color unless `icon-color` is also used.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color)` | Sets the outline color to the given color for an enabled button.\n`disabled-outline-color($color)` | Sets the outline color to the given color for a disabled button.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web button component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"@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/density":"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/button_8.0.0-canary.d850de590.0_1594317952635_0.6670085409796844","host":"s3://npm-registry-packages"}},"8.0.0-canary.e07a70841.0":{"name":"@material/button","version":"8.0.0-canary.e07a70841.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"11f4d3411e517cfc0f9b0df4b0fb763fbc20239c","tarball":"https://registry.npmjs.org/@material/button/-/button-8.0.0-canary.e07a70841.0.tgz","fileCount":26,"integrity":"sha512-MgkCv3sIOF/sXP8yBB6/XMXtEfnt0b0TsHnasYLe4qShcE/lzvE1fiHQmadk/Ue2men3wWZLNjHgaLpmzsI4uA==","signatures":[{"sig":"MEUCIDYN1U4KfryI9mu93leHH4jKi36b6PX2mK+zLdf3yy2mAiEAhvA9ZIB5OWTYrGxAEo4VMXp2fJ9Yl0j07rHiUpYZ28U=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":388593,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfB2N2CRA9TVsSAnZWagAAloQP/2SLlyrp7FixDze4wZ4V\n9FADDFQ35cM9BM+acY1JnZ+Vxu57V5LI3eV5BtwyfTrHoVkvVAVbiwzehi0D\nXvGEVjapXSJ9tLAk+dpTfVWxKn6LvWVNITg3T9u49VtjIVCM9HjB1MXNIv5r\nb4ZuWcgaqP3UOB/w3riXw8LsOpB/CXNXdOnJ+oTHYwh8gESa34hQYW/7DoTV\nxaNPVOltXI+vJhoT0oAjsOlG+xvwIrQA2wBfZfL18CM4gRvX/xGslKm9vHbE\nHWJpm1hUB1vAWg3IjCR8r9hiilKrdO1/W9JpEI8o80xAJtA1XKJbaSkyWZkc\nIkGaIutdI98OzavOR6pA7r3XOinOy/OFfPKpAXb7hyEZcGzknjjOaihwHnA1\nN9gjjOJkwiN+4KAis4RTOuFWm9hfc63dEh6FgckfAX3Vz3qaJz3krfrFcONX\nVz090OsAM1ZBVV0ZmuQhSg7QVBZoe8FsTY+71uOK9EFcMMZZ+JTro5pJTRKW\n9sofbq1t2zPxdmLBcn81Vcb0UfwioN8NQYqgqzrHx5s9ht8fHFZeb7jcJG2M\nai7TRVYuJSpX7CNFTp3DuUieKL9Em3ZxIZfdkQRdLQsaTmcXEcUhD5ibZX2/\ns6BKdjcqsIBA/479Z4CfXR+AjpgB8WhJrrq15sr3i7gX6PaHoUIVzBuOhUEj\n9QfP\r\n=haaY\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n#### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.**\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n**Note: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.**\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n\n**Note: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommended to\n always include it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color)` | Sets the container fill color to the given color for an enabled button.\n`disabled-container-fill-color($color)` | Sets the container fill color to the given color for a disabled button.\n`icon-color($color)` | Sets the icon color to the given color for an enabled button.\n`disabled-icon-color($color)` | Sets the icon color to the given color for a disabled button.\n`ink-color($color)` | Sets the ink color to the given color for an enabled button, and sets the icon color to the given color unless `icon-color` is also used.\n`disabled-ink-color($color)` | Sets the ink color to the given color for a disabled button, and sets the icon color to the given color unless `icon-color` is also used.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color)` | Sets the outline color to the given color for an enabled button.\n`disabled-outline-color($color)` | Sets the outline color to the given color for a disabled button.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web button component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"@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/density":"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/button_8.0.0-canary.e07a70841.0_1594319734482_0.8021880097804139","host":"s3://npm-registry-packages"}},"8.0.0-canary.37947ed6c.0":{"name":"@material/button","version":"8.0.0-canary.37947ed6c.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"c9a4c6f2e1e60bb3bb3317ac230968770a85468d","tarball":"https://registry.npmjs.org/@material/button/-/button-8.0.0-canary.37947ed6c.0.tgz","fileCount":26,"integrity":"sha512-YcZ/xdl/rYOq4U2kGBnGfalVLwOkjCq3dNdfj6q44gOWn9VI8IcD9X8sU4/fN8bqeNOSPYqteK1NPlo+Cze35Q==","signatures":[{"sig":"MEUCIAGOwNg555bbkeWyLvBUdypEakhfCDoBkxWDoNRo4x8cAiEA6GMK3LT3hupOJkA+si5WIvcj4PJdOhFp2D8jsKvnIrc=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":388593,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfB3/OCRA9TVsSAnZWagAAvrsP/RZevuvd+oh/oQwSpy+x\naCGD/6GjE9pRc3v3WRrJ0hZBU7mabmJDfyjo4ewP4DmKNXKF4CT25n+DZ+2E\nPwuy2hcLShWFSJhOOLjYBBDKrpDwtXZ000QFbHXJlwKuYcpCO5M8cE0EXyjM\nCfriqDlVupDzav0TXYd1SaFFa9jDO1OdoXLGkQwy4FPL3v3uqKG8EnZyPmUb\nTJm7+L0lzV/z8xHcE+o4DBN1H096hmrDGGVCP1975jZCQBQ//8QKaNJKYG4P\n/Bq8wJdkr9KCMGmDnJp63ZX9ZTmq5MYEhzM5VZD281LC8sWSDbQ+YX/aMUdI\nSIOAfK0anhHQ6ZyB3iDV885uRy2IHwDO9x/bXFHFv5acuP0sRZ/COdZBkhSY\nk8gwSPa3Y0Eqm1TwzMGH3eZVeflI3W8Cf25dSYEMxaE2kcpZcGPfVrlWqHF4\nuLZWPcmc6aZMqwOrzGMoVVGm+I2ua43rXZZUb33TXkJfBqKgujcxPFnIibcz\nh7I9xkOGob1k1GlEjld/fEb/QjpbfKctx9KnR03M9aSi1UBvmXx69RlVSdrg\nmxTCd42lTC36A7ddTHm+H2Xf8ChMi/iDv4bk008tVHcUBgS/fvKjX52Jcduj\nezFEmMypUQ0Uu2E/B4R+XmvuxzWWtrz+LmCKEbFoK88xCzpeRfB5ulY/j6Hq\nrsRI\r\n=4vh+\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n#### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.**\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n**Note: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.**\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n\n**Note: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommended to\n always include it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color)` | Sets the container fill color to the given color for an enabled button.\n`disabled-container-fill-color($color)` | Sets the container fill color to the given color for a disabled button.\n`icon-color($color)` | Sets the icon color to the given color for an enabled button.\n`disabled-icon-color($color)` | Sets the icon color to the given color for a disabled button.\n`ink-color($color)` | Sets the ink color to the given color for an enabled button, and sets the icon color to the given color unless `icon-color` is also used.\n`disabled-ink-color($color)` | Sets the ink color to the given color for a disabled button, and sets the icon color to the given color unless `icon-color` is also used.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color)` | Sets the outline color to the given color for an enabled button.\n`disabled-outline-color($color)` | Sets the outline color to the given color for a disabled button.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web button component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"@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/density":"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/button_8.0.0-canary.37947ed6c.0_1594326989388_0.9326978405645288","host":"s3://npm-registry-packages"}},"8.0.0-canary.5d443afec.0":{"name":"@material/button","version":"8.0.0-canary.5d443afec.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"63155c040942e1f4bf74c9db34418d2abab25669","tarball":"https://registry.npmjs.org/@material/button/-/button-8.0.0-canary.5d443afec.0.tgz","fileCount":26,"integrity":"sha512-acqF6VBJlw2EMVg2Pia3NWkKJKXfO4d48KqVu+W4onO/82W1/WYM1PSu70lIglrdcfxxa5PG2LFd32btaVQ6OA==","signatures":[{"sig":"MEUCIQCxJbjE6MTfPoP9zYhENyR0McSCxYb2P9BIQpcmszVL4gIgMKxMNIlwG3aGk1T4WZWN1jIRWs4GmZxqIpEuOYJ3DvM=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":388593,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfB4N3CRA9TVsSAnZWagAAOz8P/3vXyVX2WS6gmVPSbGUi\nP0nRdkd2WX+E2r38WUTDB/3oNVwdG7KWLX1JkyVdbnRAuoGOsZ0GcjnytSCK\nc7lGHPFAXuAQONzTi+LVYlscdcUlqhwj9JLLUiyRQsTOand0oqI2JbWgPjXQ\nXdbYb4apcpecxqhkPpyOSR8nrJqaASQ2HN9n7+TZNmyMpHEYOixsDIqL9x5q\ndp//QOuJXe49fjIxPFld6SpEdvkThj+XO/jxK+/aCKXWFZdR16Sv5hDHvwhO\n4eBqP6Gr/XfFoHEk/HNknaHNDWeUyjJUTIoKRazoXTktY9YaUw52S+o8OMFU\nMIwxecUQK0s+SW2PpgR9ff/W0haVUGa7ivIzQwudEZ/ZTV5/QAdJLNp9CXcJ\nvkAZmT9mujsJxeYUKKq7SMaflP6baFGWvSD/FEa9FEj7/zNgW91RQi5swjOJ\nC6noehG0vimcUBrKoa1OVEsmILo599h2i4CPPiEjC1l6noW8D2H61GDPKhLV\nuk9JY6ZuRDXR/4+0eg8AKul8Pf6wX4/I6gN7FYNEymAerGcrxhuh+DSWIGGr\nOwHG0HT3C52aP0h8K4MO1MxPLFLVn31CGimonKNbCkpvmcb3TB2rpeDe3FVc\nf2u9KHpe+ieZoz6hpqoUxbiO6Ybwt3FuMHeT0eTRX0cZYgGs24+KABIOw/M1\nhe8C\r\n=guCR\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n#### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.**\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n**Note: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.**\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n\n**Note: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommended to\n always include it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color)` | Sets the container fill color to the given color for an enabled button.\n`disabled-container-fill-color($color)` | Sets the container fill color to the given color for a disabled button.\n`icon-color($color)` | Sets the icon color to the given color for an enabled button.\n`disabled-icon-color($color)` | Sets the icon color to the given color for a disabled button.\n`ink-color($color)` | Sets the ink color to the given color for an enabled button, and sets the icon color to the given color unless `icon-color` is also used.\n`disabled-ink-color($color)` | Sets the ink color to the given color for a disabled button, and sets the icon color to the given color unless `icon-color` is also used.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color)` | Sets the outline color to the given color for an enabled button.\n`disabled-outline-color($color)` | Sets the outline color to the given color for a disabled button.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web button component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"@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/density":"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/button_8.0.0-canary.5d443afec.0_1594327927168_0.7113529990047855","host":"s3://npm-registry-packages"}},"8.0.0-canary.9ac1ed914.0":{"name":"@material/button","version":"8.0.0-canary.9ac1ed914.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"d252e811423ce0ceeac3d3e469c750bfb6fc1e7f","tarball":"https://registry.npmjs.org/@material/button/-/button-8.0.0-canary.9ac1ed914.0.tgz","fileCount":26,"integrity":"sha512-5K9qZmtaayD5K9aYWDHawsni/+V/tiyPHtbcwD1Zbp1YqclKiVCcTHcgEWpw1gP8LakQzp8Xy3XlYhEXOeLFhg==","signatures":[{"sig":"MEUCIHHrI3P2SABx0qRbv/D1RwvvEM6ZhqhlkytuaSd65tBjAiEAkvNVeyAcgF99yJp6hoNzeFdPKxB4caw0l62ZdTP/mzs=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":388593,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfB4o7CRA9TVsSAnZWagAA8qoP/jL77kRxW2WXrg/3+Vp1\ndantkKkaEPmAyZrHr4A5772eqjZUhnyFWyDmS4shfxQ3zP9ejmV5h1MEtU7r\n3KN7zh1WIA4qXReu7+lE5MQBCSRSiP8YjJfL0/FTT9uBHTxa6XOzpELQInv+\nlxOThSTxnbmPxtaXZhCdFVWoo8VVISrUbX9Q5KBgqGDazropy8UJFzKklgKp\nkBwh5Im8i8F0n72MxURes/ZEjQrtKY3LvK/QqbJ61jwjw4/l+WvFmLtX+vWT\n5kvww0UgM5WZ6zvAhz1JTDum5YO/r33m46lMRamTXIT3mv0w6w8oA+VB2Rph\nMDbrESzFG/0W7FfHC6HnlkQikPGCH8uFVs4TJ/Z4ioxsAFH1VjEdfsZBe23k\npO/cpxsw9k+d/x69GLaKCDnVIXdXTu4YhoaX024jkEGaVxpDL83zt/ioN10d\n+wJFgNOofFR3n7rERsG4xOS8v3w2jjY6v/Ij1f0D7/QSarrn9h3ENqtG0gSF\nAK4QJe/7+ru4Q1y60OOxxZKg6tvO9oKigqCM2vZk7ClMY/BhwGZZRdb9lhM9\ndCWlQjO1Uu5s3BtGTAQzkxspJDspGzJO7/ZL9ePVBBJgrTjM/GlDzMVMwy/g\nJ7ZAXw0LNmBy7in09R4mduxO51KB1w4FhNa/H9NFWBJ13vDzUvmDBZB6Ikf/\nGAfR\r\n=nNEf\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n#### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.**\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n**Note: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.**\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n\n**Note: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommended to\n always include it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color)` | Sets the container fill color to the given color for an enabled button.\n`disabled-container-fill-color($color)` | Sets the container fill color to the given color for a disabled button.\n`icon-color($color)` | Sets the icon color to the given color for an enabled button.\n`disabled-icon-color($color)` | Sets the icon color to the given color for a disabled button.\n`ink-color($color)` | Sets the ink color to the given color for an enabled button, and sets the icon color to the given color unless `icon-color` is also used.\n`disabled-ink-color($color)` | Sets the ink color to the given color for a disabled button, and sets the icon color to the given color unless `icon-color` is also used.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color)` | Sets the outline color to the given color for an enabled button.\n`disabled-outline-color($color)` | Sets the outline color to the given color for a disabled button.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web button component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"@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/density":"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/button_8.0.0-canary.9ac1ed914.0_1594329658443_0.15647311614052195","host":"s3://npm-registry-packages"}},"8.0.0-canary.1e7cb6198.0":{"name":"@material/button","version":"8.0.0-canary.1e7cb6198.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"6c38ab768f638387bffc761bd797a1c88897e6b0","tarball":"https://registry.npmjs.org/@material/button/-/button-8.0.0-canary.1e7cb6198.0.tgz","fileCount":26,"integrity":"sha512-G72JG+KooQoQCL5CiGOO/fzBoQJRORngabLPDifr05r9rnWjQo3JrKtpM4qJVV5aaVAusUKO8m+Sc80M4+baeQ==","signatures":[{"sig":"MEUCIQCuzb8mdak+Pwrr9G4ZWw3sEsAQAdChifK8bF/2+2OjtAIgXdqJR9QBdYjY5XFkixOF5zfpbq8j/O2Jfop6MTF3yWQ=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":388593,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfB5ZgCRA9TVsSAnZWagAAGjQP+wSp3f9RAfENEBwliev8\n9FfTZoMjSikV60qBr/wiW1Yroz0vDomSH/zCqYHUTn2bjvLvNrGImTweeFKr\nHXQzY1HnURtzoEsstxv+qZUyUT3GlRLjfT52kc86PWM/dz8IREuCe/Hpden7\nGf8U/g3GkjaOA4esFm7ADUNX+Rzd/hIqgsbPry6s4Icy/9ieVhSvAhmQhbRG\ntu9eyleBLklHkrgZ4IY2qgj9WMDl92PvjUJlaePoxXcx6wxch7g5BCnNddls\nED9pMUXLv4GxMuiqI8V8/3bxcWm+wgZGUE4zIDbeghCCrIUUAB2YsV/fpB96\nm9oYRKdyzfpcEVWkyMWZjIREmFokppeCAoq85kv4uDtVM4UGYjHLa3dyISWG\nbp5U48Ag/4SutsHRJonax5CzGQuXRzRpUdJdicAvJRIIre5OpVuSCFAe6J0O\nt7C2cUnX7WE2mBral4lOUnYII6z2ZpmgkaQdD6uyEVXogLbFg4ajVP63Xz6U\npKIq6qEN8K6hTNggL0cy+qYi0O1Iq78eOgIp9Uq0buocYsXG70KCIQ8HtjHJ\nWlcCrtcnUn5nNIRRCL6YRIPYfAtxXqRH56kLeO3WsybQA52koBkSvoQLcabU\ndu4e+3tnRRRJTtfOeX+B+FIAFELKAukWfGJd3k345Dry2TWfmCjjsGnnfuJC\nEY2J\r\n=H82F\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n#### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.**\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n**Note: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.**\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n\n**Note: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommended to\n always include it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color)` | Sets the container fill color to the given color for an enabled button.\n`disabled-container-fill-color($color)` | Sets the container fill color to the given color for a disabled button.\n`icon-color($color)` | Sets the icon color to the given color for an enabled button.\n`disabled-icon-color($color)` | Sets the icon color to the given color for a disabled button.\n`ink-color($color)` | Sets the ink color to the given color for an enabled button, and sets the icon color to the given color unless `icon-color` is also used.\n`disabled-ink-color($color)` | Sets the ink color to the given color for a disabled button, and sets the icon color to the given color unless `icon-color` is also used.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color)` | Sets the outline color to the given color for an enabled button.\n`disabled-outline-color($color)` | Sets the outline color to the given color for a disabled button.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web button component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"@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/density":"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/button_8.0.0-canary.1e7cb6198.0_1594332767902_0.04669362620568229","host":"s3://npm-registry-packages"}},"8.0.0-canary.843f636c0.0":{"name":"@material/button","version":"8.0.0-canary.843f636c0.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"49833921bd80d5dff0bf44193c6163c89ea13d51","tarball":"https://registry.npmjs.org/@material/button/-/button-8.0.0-canary.843f636c0.0.tgz","fileCount":26,"integrity":"sha512-ksOTfrn/ZyOLAcpkU16Ub1RdMoKaBthoZUnIKct3NY3Rm9M3RybzELh3b6mE94aFSSLtNobM3CIcglx6/m7Ppg==","signatures":[{"sig":"MEUCIQCd2VMN7kGfI54J3qKF6Y/zOMU9mQbhskF8TTiUI+IgPwIgQrCAxE45Vx+OxplBRmuMDm0VAa7TT4ZKgP9DNJ5GLHE=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":388593,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfCKirCRA9TVsSAnZWagAAWKUP/0i6kNKKvhUtC4cJvKtx\naFG2uDy9GfBgA5DWcXlwrqV0PE/ty1BdfTCQWfF5f/033DcTXmZA009jBsYL\ncEPmWEab78ymRyvofS3pS1Aslx+o2D3NXCFeCU0OrEIPi8I5v7BAWNZGb9yU\ntE3QJtDgc1vzcYp5V3Hy4cy5DLZ+dMCtPVCzNvqiiQsyhutluTe5gslL9ui8\nJQrKWkfpH9mNhW+/qOr5Kfo2+d4tkcfizDWSNSetqILh7HJTf/o5SL+SJYgd\nGnJsODX4ApXxaEjsQK1kzgSXNCxyHG3DK5fHhNsoxRRLMOTVkFV6ScfL+i3x\nql1Gp6yCYRKIfSfb/OTaDaJ1VoyJce4QXZiyqNPsmFbJ6fwRA36B3oQUrQBP\nqgvkHS0v6vJlbkmVUZNNy2+qMLC9/xgew6TNsXMj4j0p/PCpsZHoFUtp+g0L\n1kPjRBzMqdGGcmR+GrYjBxv7uW9q9IxhENDIv6nBOKQsU6DVjNUSA2icLa6x\nstST41hLswwyEg18pnn313mOsFhLLzO91ujRpbXfxfmo+h8DvZgLjBwG1VL0\nVtL6VyV5Bekt9WabGMeoqc+Xh4kFEP0FyVGtW+ZWG1kSnQKK8QgZHYsOylkJ\nWXltH9/EBNdCeXR9h+aLkq5wyoaWAiaScCBKeqScDuhFkvzTgWXLBEMnG4dM\nb83F\r\n=LrkC\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n#### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.**\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n**Note: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.**\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n\n**Note: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommended to\n always include it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color)` | Sets the container fill color to the given color for an enabled button.\n`disabled-container-fill-color($color)` | Sets the container fill color to the given color for a disabled button.\n`icon-color($color)` | Sets the icon color to the given color for an enabled button.\n`disabled-icon-color($color)` | Sets the icon color to the given color for a disabled button.\n`ink-color($color)` | Sets the ink color to the given color for an enabled button, and sets the icon color to the given color unless `icon-color` is also used.\n`disabled-ink-color($color)` | Sets the ink color to the given color for a disabled button, and sets the icon color to the given color unless `icon-color` is also used.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color)` | Sets the outline color to the given color for an enabled button.\n`disabled-outline-color($color)` | Sets the outline color to the given color for a disabled button.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web button component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"@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/density":"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/button_8.0.0-canary.843f636c0.0_1594402986779_0.09309778080691578","host":"s3://npm-registry-packages"}},"8.0.0-canary.b2edaeead.0":{"name":"@material/button","version":"8.0.0-canary.b2edaeead.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"bb5be63eb2e8e430ccd43f4b2a5d7a984f979dd8","tarball":"https://registry.npmjs.org/@material/button/-/button-8.0.0-canary.b2edaeead.0.tgz","fileCount":26,"integrity":"sha512-BDIh6HdSdw8GVXwFRWdCjt+yfKeYSzIpWZKJa/mDSLSIdmpzXz2bdecPZa7grGtM4RvDtA1YikDZyaPV4L+k8A==","signatures":[{"sig":"MEUCIQD6JiZvL0b9sVKdh6L0n5cwm1jFd5ybshbVO07VbnSi3wIgBZJc6CZKsPZjJQa4W5nVMklE7gEIt3r4ctxVFnS9C00=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":386725,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfCK5oCRA9TVsSAnZWagAAC/cQAIJnDdJCAnGU8xPCbUya\nrHUnrmEu2kpHTKyorW1JoUfdb2E7w3ZigCTSVld27+GF4psi9SDQx/eEVuDv\ntUcclYyIuHOp79g3vOOkZMZOlCZJqhZeZssAlqizCYyWKLxFumglsc6UZcP/\ncXWHXmaJvnkAm03p3o2ecd2sIIISkLbIyYr7egd5tjMY+5dhhFzO0NEx/5gi\no/B92/Qc6sv1NaFw7Nf64ITkmq99mQqlkOp1OQGDqY0eNjamoNkOY5U4e6Nr\nOGzPbjgUQDea2QvdqTubcscrJKz2yFrXqrp2r+8HdR2T+YrDyjt7Dkk6ER5P\nAS/5tq7ozOuLDxgJ3yAUGOsjpXTr2UQ8WHt1mHMVYHFhf8cs+UaF6fbjXVtU\nSCAFoUsm2cKrZR1UoukcH8p1OxvAkzs4unid9Mqb6ezX/Yho0Hz92Yf1xzY/\nU+HuOBhh8xptyX/QqK0H8Uq2XRPQrCW84MOsZ5C6uljPDlkQ2Kgxp1kvjBtA\ntX9qaxJrO092FNQMotPwZxCRdwUtzgtw1JgpZgQLLTHTvdFuWR3fFlCQCGZK\nLNr1ltMnXgzaosHLUxv8SfPraPZPWO6CaSt0bdzFoQm+JtloVne/E+3sjc/w\nZ/sIekB3IMsFh+u1ddB5vhhgsSWUE1PPSVGR+kZx1Vfis/x7N2ubPLA7YmdM\nGEh7\r\n=7moS\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n#### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.**\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n**Note: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.**\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n\n**Note: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommended to\n always include it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color)` | Sets the container fill color to the given color for an enabled button.\n`disabled-container-fill-color($color)` | Sets the container fill color to the given color for a disabled button.\n`icon-color($color)` | Sets the icon color to the given color for an enabled button.\n`disabled-icon-color($color)` | Sets the icon color to the given color for a disabled button.\n`ink-color($color)` | Sets the ink color to the given color for an enabled button, and sets the icon color to the given color unless `icon-color` is also used.\n`disabled-ink-color($color)` | Sets the ink color to the given color for a disabled button, and sets the icon color to the given color unless `icon-color` is also used.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color)` | Sets the outline color to the given color for an enabled button.\n`disabled-outline-color($color)` | Sets the outline color to the given color for a disabled button.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web button component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"@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/density":"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/button_8.0.0-canary.b2edaeead.0_1594404455540_0.6448520812610432","host":"s3://npm-registry-packages"}},"8.0.0-canary.5dac1f624.0":{"name":"@material/button","version":"8.0.0-canary.5dac1f624.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"afb8b6700cb76d1f406c5f8c01e4117f4cd19f27","tarball":"https://registry.npmjs.org/@material/button/-/button-8.0.0-canary.5dac1f624.0.tgz","fileCount":26,"integrity":"sha512-+VdueTqY3dhcZssbutusyePTbnimeEJvp2CZvRTy0wI+2pB2X2/pUYfie013yEqOQ9XT40tJ4NpOi9xWB2hMqg==","signatures":[{"sig":"MEUCIGcS1ZGiesKZpDPWDX+x5GUsGABVBEZPHM3scMgUOOg8AiEA9HF4H9g5Kpb96+Ap84rQ2wJpzbqt/2QN7knMnRbj4tE=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":386725,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfDI0eCRA9TVsSAnZWagAA/MQP/A7ek8QkIdwN9zmqLA0f\n5S5rJcTW3osKf4xy2uWYMRJANl3HpZn/cc8pgKmcjBxRt3YEdFflcLRZ1SMw\n7s4t2t6/amUEahmSfZZ1uF28JKWPmrm3tLDXk/uFBwaZIUnpEQRQx8lvOrb+\n4VHjZ/i8S4U7LZDsyLYEjdfnJgCZ31p4rFDCoY3WahRmXt33duHnPJHjqIMW\nJOaaivw9zjSeZSk4nj/mQF0BiPfjfWQJZnnOJVvpgDhQEmU5ii4Qn/z1MLyF\n3LXgM+NkboaPKzkw8smi6IG1eZy/y7Cu5tx5vBWBajahGHxDh0ZbswIHSy27\nyCeh1Yol7j83vnEXOqLDKC7LO3N1KbXcJlbjCmnAtzKRcIs6k39ZOdn8+2o5\nKN2rWNo/gPyO1zqLDDYz+cOEX+loHRl6cMx4wAuyYst9mATY1JX21FIpbfjf\n5+ESUHOUtSStgkHhleyMDN9AP9RDybV9CcHmaLgATWEAhdZIWGFgsPA19jUZ\n1DFXdcsrn677Ae3eUywdXC72Xex/635MSxo4Izw527MCxNV6/3AEPpZZxFc0\ntnZDrB/DtwrIgpnt7HKKr4TjLXFfpvONIuv3lKSDRD1oQF0TvTbpftCxpBG5\nD7NGfk29Zvvq4Oah/dJroHpphKE0u3kX0xSsErPW0BEqWHHXTHQXQMBrsfVo\nSvjP\r\n=EZBl\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n#### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.**\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n**Note: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.**\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n\n**Note: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommended to\n always include it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color)` | Sets the container fill color to the given color for an enabled button.\n`disabled-container-fill-color($color)` | Sets the container fill color to the given color for a disabled button.\n`icon-color($color)` | Sets the icon color to the given color for an enabled button.\n`disabled-icon-color($color)` | Sets the icon color to the given color for a disabled button.\n`ink-color($color)` | Sets the ink color to the given color for an enabled button, and sets the icon color to the given color unless `icon-color` is also used.\n`disabled-ink-color($color)` | Sets the ink color to the given color for a disabled button, and sets the icon color to the given color unless `icon-color` is also used.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color)` | Sets the outline color to the given color for an enabled button.\n`disabled-outline-color($color)` | Sets the outline color to the given color for a disabled button.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web button component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"@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/density":"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/button_8.0.0-canary.5dac1f624.0_1594658078447_0.724190828973458","host":"s3://npm-registry-packages"}},"8.0.0-canary.4497acef8.0":{"name":"@material/button","version":"8.0.0-canary.4497acef8.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"96d82f8f08fa4c54b66cae2a544bddfb2510674a","tarball":"https://registry.npmjs.org/@material/button/-/button-8.0.0-canary.4497acef8.0.tgz","fileCount":26,"integrity":"sha512-IJOA/3nt5jxk4PYmXtcEeDOZfdqVoKGm+V8ZVS9TloGhH1n1YmF0G0UT9C9m0Zuu8Rls1NXMVMMnKtynmfwzlw==","signatures":[{"sig":"MEYCIQDbFHUmyWeqVh+gIEqCNx6SMvPZcTx2PL4odP3YmO0xLQIhALQzTXIRd4xTDu96VuloZI/F7CRuW7FBJhcXa7DXv7Yk","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":386725,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfDb81CRA9TVsSAnZWagAAq1AP/1HcUw+L0M3h+H01rnc7\nOWxjimcDwD0kNbf97cBxefyklo4mVDJyOPWQDCbxhzmj1h3LQwtFTsr1eU/X\nz0hNFux3B+T+qN2xE9s0fHG8LBCAdsODSrVu8qO2Z7QQfqLY1fNKzWvZprbA\nn74Uh3xH275mw3x3p7f28eHzIeYUPmXCbYY9JhdFme1uRMNsSM0VBIFQnrMq\nvHoO+5VFfLyha1G6dnsmQejLE+f1fjEeSIus2K7JV9fjpM3XmsBf+CFFSm0q\nepnTJO6PTrXMhIDqgsJaXPHVWQfPJREzIJwzmrxuVce8wgU37vfbzSrc67ts\n305lS0J4zIczLft+H/8uzSP6R0oUE+YaeRpsBm4jwrqEvjGqQ6L5kPPBJ7OS\noj2VsgijeykWP65QFBAkEpRR+hLTjwoD+ykhLapoOd4fbyfOzEOIh4JM5aD6\ntn5wM7llnJUcsouRdpcMDxBsVXVJOIfBmL7F6Lrn8/a2owMo5nszb5h+XnbX\n0FuPTrhoRE+49bYUfMkQaEZyP7I6klDzlS+fxuHiPt2a6mzH8msP/CrYMM+e\nPNt9pXOZ8kGzEmUn/9kM+5QWpauhSBNsqR0KfbBPSP2mLlo8CPjUNGkkpbMJ\n9fjkISeMKSP0xJ5MJyhkHumzqNbTpJcLXtWCFvTt4WDqbMsQJVkkBz0BfvJo\nYyOY\r\n=fPQD\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n#### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.**\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n**Note: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.**\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n\n**Note: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommended to\n always include it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color)` | Sets the container fill color to the given color for an enabled button.\n`disabled-container-fill-color($color)` | Sets the container fill color to the given color for a disabled button.\n`icon-color($color)` | Sets the icon color to the given color for an enabled button.\n`disabled-icon-color($color)` | Sets the icon color to the given color for a disabled button.\n`ink-color($color)` | Sets the ink color to the given color for an enabled button, and sets the icon color to the given color unless `icon-color` is also used.\n`disabled-ink-color($color)` | Sets the ink color to the given color for a disabled button, and sets the icon color to the given color unless `icon-color` is also used.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color)` | Sets the outline color to the given color for an enabled button.\n`disabled-outline-color($color)` | Sets the outline color to the given color for a disabled button.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web button component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"@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/density":"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/button_8.0.0-canary.4497acef8.0_1594736437369_0.4473350397312321","host":"s3://npm-registry-packages"}},"8.0.0-canary.e6e23019d.0":{"name":"@material/button","version":"8.0.0-canary.e6e23019d.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"38e6626bf1e120462d79a01af629ad595de12e8e","tarball":"https://registry.npmjs.org/@material/button/-/button-8.0.0-canary.e6e23019d.0.tgz","fileCount":26,"integrity":"sha512-WwslLeENFOzJnqXGhRh7IDT3serhy3QUY8R+1uESGWSw0egNpMTMq5F/ifj29XWYIEp4y4QB0B7hpiYR/mg4pw==","signatures":[{"sig":"MEYCIQDPm6mXvFTc51L5ipxT9JbqY8Azn8AxxGwYdZHreXhPCgIhAIcKoDCfFqvhmWJW+X9uZy7ZXk+1cbFvbcslbRoyWa4o","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":386725,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfDhFOCRA9TVsSAnZWagAAFI0P/i9vlp+HfXkvdXc7XPZ+\njCSvW184SRnFk6obaPYCXhI351E7nMez1pn0XLCuPq26h6Says+7fy1/DX42\ntL/+t5w9MFlndlLGt+8R6aubz/atvn8g1qKxjFKOExGLrr222X4BD+a+rj2g\nD7Auqcon9mkiAXir3w/ZIwzsM5stfIHdywIM4+stSkWhUl9CC9Xvx4wCceuR\nRZfsnT/Qe+o/Vgt1akDWD86llGZSIzn4hPAnmgrogVOGjvmvprsxrWrWHauy\n3EzfWZ7YogzBfYlx1FZjHtxeg360r12e3JIkUzYwGVOFjzJYlMxzqIsghPDL\nm9IFtQ1dP7X9DLFAJ+SDgkooaiaeu3ia0DtVxZ8ThJkw4glT82anD6dRHDY6\ngwJBs/m6SACK9CQpmKTRW+iEeHkazrfejA4t0K6kcp+gwMUgvTSuXs3rVncp\ndgBi12QB7woG2MTqFw8kI+xEki2h0IukF9mzoIjK4HWD3ktoGel77mTjxzXM\nMoz9NwLO4yY/8OHroaPfNnfOZ+XjhbeYWHDSaW0U3eONKEDiWdzwLyr1lj0W\n7e1MZd+3Tx+fazOp6+Y90vQQbn4vUvwyRjbmDciqe7n+NR3gWJWumcVFiy36\nTwxE0mcGa0jLwFi8C5U9NLDR+5QvOLP9pM/sfRelyxH0uJDOwWCA046PgnyN\nfQSW\r\n=p2w0\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n#### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.**\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n**Note: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.**\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n\n**Note: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommended to\n always include it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color)` | Sets the container fill color to the given color for an enabled button.\n`disabled-container-fill-color($color)` | Sets the container fill color to the given color for a disabled button.\n`icon-color($color)` | Sets the icon color to the given color for an enabled button.\n`disabled-icon-color($color)` | Sets the icon color to the given color for a disabled button.\n`ink-color($color)` | Sets the ink color to the given color for an enabled button, and sets the icon color to the given color unless `icon-color` is also used.\n`disabled-ink-color($color)` | Sets the ink color to the given color for a disabled button, and sets the icon color to the given color unless `icon-color` is also used.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color)` | Sets the outline color to the given color for an enabled button.\n`disabled-outline-color($color)` | Sets the outline color to the given color for a disabled button.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web button component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"@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/density":"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/button_8.0.0-canary.e6e23019d.0_1594757453758_0.7743031050889901","host":"s3://npm-registry-packages"}},"8.0.0-canary.d548d7a92.0":{"name":"@material/button","version":"8.0.0-canary.d548d7a92.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"264128c6c30a1ee24208b80ccb0d4db3f8aa92a8","tarball":"https://registry.npmjs.org/@material/button/-/button-8.0.0-canary.d548d7a92.0.tgz","fileCount":26,"integrity":"sha512-/D/0xoa91dWrtiS5KoUpWDEEaheLyCOuHuBg9/btKHs43vNpzmsp78ZmI7I5xcDTyvGKq96LO/ISk0awLwMwIA==","signatures":[{"sig":"MEQCIGZxulw99k6vfIbk5S0TZmPSCezqxUnhut+MG2G4uQufAiBl5TYH9gk1t3UuxXMf1xQmkTFlMR82KVY7zTyuLuzt0w==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":386725,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfDh/yCRA9TVsSAnZWagAAXEkP/jN+gph1eIGFDGsPOZNT\nFTj3Ukg41SCt01Ekf95+sRyL+u/trxIOB2i/9qS24PbdVDE5im+iWclJWRYh\nj6pGcja896ZwwYThnIA6d5ai70rWlfbDWf/fA5sbkJFrMM0TJreTSMhZ2833\ne+3t2ffiFN6lhl56ijAefkdr92EUhfPDYPRg5rynKOnOVd56AwOB1D5joa6f\nHiyPpNY7OdZte2ex9fIvr8g1PtdT10EmX/xBRcpue1mQSI1CTDzSFetg6hS1\ndpyvzhy53MXv9PDEZ/5KpkY75hCd0caRqvphFeB8JAzq9nNjwnmatW+nmv49\nv/rs6TMqUq4ipImYxr9N0HO34ILmCxb/X0qKK+IuN86EhQGmpkJjmre9oyj0\nFtJchBDP6tfs3zBYdcXQ/Wxx+HTHF7MhBucHxW96Qy9p4XFUleo6FEZZbny/\n7tpzE1Suogpavdxn77IB76LJBsGbz5ywF/VQ4CjGXbCEVgZmxa7nvmJeA+D9\n40g7Amoq6ZlyjjC8yMpNBcR1z17eAWd+qfjE2oV45GCevGMYjH2IM29TKi1m\nVc8ZajhTe2WOrwk3s+m9yuX69Iz/OUFq3MYDao3KkD6BErKoh3Rwm71Otj+F\nDyc7+0gNG3UCvdvDJamLsG1Dky6g9i9QFv1hLy1hJ1CQw44rbcJE665bn+C9\nozVc\r\n=HkFy\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n#### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.**\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n**Note: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.**\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n\n**Note: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommended to\n always include it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color)` | Sets the container fill color to the given color for an enabled button.\n`disabled-container-fill-color($color)` | Sets the container fill color to the given color for a disabled button.\n`icon-color($color)` | Sets the icon color to the given color for an enabled button.\n`disabled-icon-color($color)` | Sets the icon color to the given color for a disabled button.\n`ink-color($color)` | Sets the ink color to the given color for an enabled button, and sets the icon color to the given color unless `icon-color` is also used.\n`disabled-ink-color($color)` | Sets the ink color to the given color for a disabled button, and sets the icon color to the given color unless `icon-color` is also used.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color)` | Sets the outline color to the given color for an enabled button.\n`disabled-outline-color($color)` | Sets the outline color to the given color for a disabled button.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web button component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"@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/density":"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/button_8.0.0-canary.d548d7a92.0_1594761202400_0.8696946151982863","host":"s3://npm-registry-packages"}},"8.0.0-canary.58ce529cc.0":{"name":"@material/button","version":"8.0.0-canary.58ce529cc.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"4385d9e7233123ce08ec470e1a2f99a5bee0947e","tarball":"https://registry.npmjs.org/@material/button/-/button-8.0.0-canary.58ce529cc.0.tgz","fileCount":26,"integrity":"sha512-f49Qm10Okr7nVxfCXkljWooke6GuLfzuSs1aYyqkg5h/LltyWlsp8WebUGUMgLcQwBR1tEYMs1yA1B8uEQkIeg==","signatures":[{"sig":"MEYCIQD6KgW27AFfB8NjzfxEhMl6dwvL1yOZKwc2okd94kVoNwIhANXI/9GLQnQe2pu+cN2tNSVGZJtw2ee1Uxx2HZhvAnlZ","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":386725,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfDiBuCRA9TVsSAnZWagAAu+cQAIMa21yQTK9E0fe0L5qX\nOg9w8d6Q2ptmLJ+79GgB9eYwSXQ62G1nVN+D990eOIDoErz2IE8hedvEkpF7\nAEnvIJl/zh8Y2QBEmvjEtvIONmZYAxAv6BkXHLBwmrcEcvzLLN6C2zX1WhKe\nB1eIltxab3R9/KItyGrVu4D3TkxOzp2zgci1AO8yqkIuCyOqarjRY3FdXKTW\nr15wQ3Ex7YwInhP0LByxWV9MG+ryaedVakNu7DxSURYtBt3B7FrBtuRkhUVe\nNG55o6z30QlYEBFN+xhNJ1iM5sGU0lKb9x6vtXpBjg3F8y/J+Y/ItwgLiZu3\nRbJWSxbvT5aIdDhfXQiE+05iBvO2xqm/e6ETGKF2A48R+mVxMbZuuJseXRVt\nSytvf1nyJXh+xdNPD5Yj8KzcZP2V+kDDnrAGureL8SIidT0nb8P3k47WF6cD\nc/PUgaDfEYU3XpzUnKrnX5CvRPE6FZs8LJj9fXn5fsqi3Q6JPoaQy0rToskn\nM3JVLgopr5mxXvGmf/dNrw2xW/MnX2ifm728Uao54rPlZRorFYujf1AYsWWO\n/g37sYV+GvHtVxl/IJzYrKs+Cl2JhOv3ySd+5JbsZnn8er5zcHFZLpamK2eE\nf9u38/TEIhAI9QEeNJm6taHJJKG4W0VBS7b4qdyhEeyKQRkOwA0KQsZiBgq0\nrxTX\r\n=R27m\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n#### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.**\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n**Note: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.**\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n\n**Note: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommended to\n always include it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color)` | Sets the container fill color to the given color for an enabled button.\n`disabled-container-fill-color($color)` | Sets the container fill color to the given color for a disabled button.\n`icon-color($color)` | Sets the icon color to the given color for an enabled button.\n`disabled-icon-color($color)` | Sets the icon color to the given color for a disabled button.\n`ink-color($color)` | Sets the ink color to the given color for an enabled button, and sets the icon color to the given color unless `icon-color` is also used.\n`disabled-ink-color($color)` | Sets the ink color to the given color for a disabled button, and sets the icon color to the given color unless `icon-color` is also used.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color)` | Sets the outline color to the given color for an enabled button.\n`disabled-outline-color($color)` | Sets the outline color to the given color for a disabled button.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web button component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"@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/density":"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/button_8.0.0-canary.58ce529cc.0_1594761325945_0.2573388859663437","host":"s3://npm-registry-packages"}},"8.0.0-canary.a0f1202dc.0":{"name":"@material/button","version":"8.0.0-canary.a0f1202dc.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"1d10b3651b6a3022fb079b4c3d7b7ae9e3cb6ae5","tarball":"https://registry.npmjs.org/@material/button/-/button-8.0.0-canary.a0f1202dc.0.tgz","fileCount":26,"integrity":"sha512-4AXNneEEtXGXWgfhDNwjZ3fg5ufZYM6zpUSwaKFyBnPmcLnbGEZ5CQIDkK8lZ3xM0EFLj41r8CJvvt2WbcdSnA==","signatures":[{"sig":"MEUCIQCN1NaBq/jpwqZjxZP9Ex7/hmVVO/lyFVbiBWFFTG+d3QIgcf8IvG67ap7vK8wLS4bzsPZ+kEgbrp1aCEN4ihiUT6A=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":386725,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfDiT4CRA9TVsSAnZWagAAZ0MP/0V+KjOXpaODRbCZ63z+\nwpWNXp4moVKzSN2UvHj26GtmlYZG348Jc1LiQ5BP7uPidfpodGt/WgKvBA46\n0PMARUEcOj5umrRLK7EtoUXJyisM+/lHUnd3/iSg2AW/DLGs4GPvbunQPvu3\n3dnfoO73J2OvXzxxiXpbDlf4PgqS+G5jFPcnf8KtdctVA6PL5F8Nmf4SDkSk\nn750q/HDzbAVQW93QyrFG2XjmmKs4HIu8Z4PXCSRe0DEAYKL32cEDGberEqi\naOYnMdPFcryPR2ux+8s+k5YDf91BuK8JycfZ4jqPXDMcx/erB7jWiVBEiyLQ\nlzL+xA67C4CaoL/FmDohzXEXHTM1a6sveSMoYvGym6+zKs4u5m/ypWYCX8um\nOq42LlGOB3Vuxm2Ala4j4kSpbu8iQn6l4w5XmaUvO96E3wZEGYYwk2sBK3VP\n1DySJTMaIxCusn6Ta853yf9o6kpbE8JHUQWmAoJFxw1Bm4whG4u2PawCJUJ6\nIkipjatAOzQ4d1dN7Wa5E4Jl4paqA/LeUZGXUK2dpuyH0FEY21DzEkYwjk5E\n+yY8ohxgigeStihq17J5o1wdoFNp+6fBk8L9B+WVlcKqmd14lXrw+HpF0qpM\n6xEH2jFq/9FK8OYSwE0ToWkUdMZJI6chhbCR2EuCAiFRTXt7zVPPVQ+xXMMo\nRhdy\r\n=+I+o\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n#### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.**\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n**Note: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.**\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n\n**Note: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommended to\n always include it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color)` | Sets the container fill color to the given color for an enabled button.\n`disabled-container-fill-color($color)` | Sets the container fill color to the given color for a disabled button.\n`icon-color($color)` | Sets the icon color to the given color for an enabled button.\n`disabled-icon-color($color)` | Sets the icon color to the given color for a disabled button.\n`ink-color($color)` | Sets the ink color to the given color for an enabled button, and sets the icon color to the given color unless `icon-color` is also used.\n`disabled-ink-color($color)` | Sets the ink color to the given color for a disabled button, and sets the icon color to the given color unless `icon-color` is also used.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color)` | Sets the outline color to the given color for an enabled button.\n`disabled-outline-color($color)` | Sets the outline color to the given color for a disabled button.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web button component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"@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/density":"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/button_8.0.0-canary.a0f1202dc.0_1594762487923_0.7849439634397042","host":"s3://npm-registry-packages"}},"8.0.0-canary.ad4df58c1.0":{"name":"@material/button","version":"8.0.0-canary.ad4df58c1.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"915eb0739084fe1672730552c8529d49519041a9","tarball":"https://registry.npmjs.org/@material/button/-/button-8.0.0-canary.ad4df58c1.0.tgz","fileCount":26,"integrity":"sha512-btEy46O0+pOKzZ2hUCl4biFp4RRqxC3qdcQKCJEVh1A1fN+Sw7qiFcmXE//RmvAXEvugIiDjS9xCK1+xEb0CMQ==","signatures":[{"sig":"MEYCIQD7rqDRlf0IWZgHupd3rDycUqs9td8W4DH+PfiX1cQ0fwIhAIsbaQm56eusGbUv4ykRuJVCBoL6kaEFOFSOl2Hdq7vP","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":386725,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfDklJCRA9TVsSAnZWagAAcL0P/2AuExG8DLF+X9+w5ThB\nUJDDepZD1Li7qW4JFfRJ0IbJQMg6Gx1/s0Hmy/MnKb7CksgDd9aZI8FwUREv\niuNARZPIIkzTW2oWe1GyIG8hRvdQHcrM7V93nJb5Imbxco4/UdNUyDLtIhUP\nf9zQHhtkkRQLNSatgmj4HRr6JD0bGX0+Tg4lxrWGjzJlgcFhaBo4NX8ARz0P\nieKWyBdBeJN8Ht5P9SULZilTzkexCoYdnElLfnlNxlmxAxALoz+RxFSaMMm5\n//+8nMpaq2ANzE2dSYTsd8A5j4bE/ZQLF+8e16YZyq6i2Yl9sdefegisvk3W\npnnIMtgSDQeWxGYXBT0LmUf37nMpM4FnmYO4P0Ij93+3GenGbfph7uTVwbY8\nS0zHrhkAZ4F6V3Ev87qA4EergRQJNlUTJFOsZvDsCwf/DuCMblWEzCRcfF+K\nM7OlLcg3S2RWRqGkj0KAGmV8EP7NRRkaz7lm9phvGlHYrHc7eGoR4uUViZ3X\n4dM237FkxGCh8LD0GWUMltC+90N3RDfUm5reFImTGaUY1SteUgIQWzeGeaMc\nkRlVK1KAN5ZOXJt8lU+K3PZ71smiHy1q0qiAVL6Z/UIsLXdZ1BfvOTi/5OSA\nVgYl7XNVT91uO1/+sba1QgNpBsu/Vgq5RUGJxOtB8jKLAbMbiqARK5FGw4Mx\n4Oam\r\n=aUxg\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n#### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.**\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n**Note: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.**\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n\n**Note: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommended to\n always include it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color)` | Sets the container fill color to the given color for an enabled button.\n`disabled-container-fill-color($color)` | Sets the container fill color to the given color for a disabled button.\n`icon-color($color)` | Sets the icon color to the given color for an enabled button.\n`disabled-icon-color($color)` | Sets the icon color to the given color for a disabled button.\n`ink-color($color)` | Sets the ink color to the given color for an enabled button, and sets the icon color to the given color unless `icon-color` is also used.\n`disabled-ink-color($color)` | Sets the ink color to the given color for a disabled button, and sets the icon color to the given color unless `icon-color` is also used.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color)` | Sets the outline color to the given color for an enabled button.\n`disabled-outline-color($color)` | Sets the outline color to the given color for a disabled button.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web button component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"@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/density":"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/button_8.0.0-canary.ad4df58c1.0_1594771784647_0.214804766785323","host":"s3://npm-registry-packages"}},"8.0.0-canary.01db89053.0":{"name":"@material/button","version":"8.0.0-canary.01db89053.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"d3d8e980f921874dac778a4b8702deafc0f31da9","tarball":"https://registry.npmjs.org/@material/button/-/button-8.0.0-canary.01db89053.0.tgz","fileCount":26,"integrity":"sha512-7auTOYQVQa2cl9hY3ZloGaXN003TcDlF2O5meH6ep+UbZCw3COw5IenyzzKLrvFRIpVqatKr9MOewgW4bpvXaQ==","signatures":[{"sig":"MEQCIHi3eNe73/0sbmza1AQN6W0FJSCSPdQwEwfiSBWBKDTmAiBkadT3Lkqk3JjosR7rWdjkyDgcoAiV7osbVW7yTdpyww==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":386725,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfEILYCRA9TVsSAnZWagAAc7sQAJL6CBX6Fw5jjK0XpYOA\nSOM/GqmKlu9D2ot8tk02GrJ3GSBMXIuziMh96v2grdif7dHKEKIPflvihCl7\nxhrBYWVTE+pAy8/PfJ6lyyw9CFMZ6jukyumAsTn7rR15wRf0J0k1e30VjlkY\nOkIiaZ3Zg7GlwmKIh7DRY4SX3DHRQLL0lCQ7gEx9tm/m0+A+e+9G+6pJYRgy\ni1oIxX7IoXZaovv94iQa/XWiMRAv/GPGdpG8T7iGm9bDmLMP48W385zxi3GQ\nEAcCcJ81mKTTdcgf/g9E2MV54RQsZMaig+1hitYbLFgWJeoLiSo3UGAxJBfN\npl9LuUICEWMYWVLAez0WWfBn/RWTgx0HANgSgVJDv9mBLbwLoS7B0DWCuIjv\nPxbfvvw/luriYXEIOzpzeECZdxKIZAaoG3UjuXyMqSCc/OH8kA2Pv+SglZl2\nXL3VWcZ6i3DJZvcVyo84+Bdtm9A16YjG9yh92d+syADBqP8ClsBz6rPe/BGH\nJbBBJFBsRjeW7YQ6LL7boVeFTx2zkED+ta1iSnlCZxc+c2pxbsJejfL2V3Ut\nvjfRGfHLQhUcpVeuY57yUJaCE0yvG1G5AP13FQe46RH62qu2D2BgjwxkDyLx\nc8eQNPEB+rxEF1YW8DlcIHfTGs5TzLd4noDNUFmlWQSxeRlKllClMcmv8A1z\nbiEG\r\n=LSem\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n#### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.**\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n**Note: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.**\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n\n**Note: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommended to\n always include it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color)` | Sets the container fill color to the given color for an enabled button.\n`disabled-container-fill-color($color)` | Sets the container fill color to the given color for a disabled button.\n`icon-color($color)` | Sets the icon color to the given color for an enabled button.\n`disabled-icon-color($color)` | Sets the icon color to the given color for a disabled button.\n`ink-color($color)` | Sets the ink color to the given color for an enabled button, and sets the icon color to the given color unless `icon-color` is also used.\n`disabled-ink-color($color)` | Sets the ink color to the given color for a disabled button, and sets the icon color to the given color unless `icon-color` is also used.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color)` | Sets the outline color to the given color for an enabled button.\n`disabled-outline-color($color)` | Sets the outline color to the given color for a disabled button.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web button component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"@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/density":"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/button_8.0.0-canary.01db89053.0_1594917591614_0.8309041330936666","host":"s3://npm-registry-packages"}},"8.0.0-canary.fb5a4cdeb.0":{"name":"@material/button","version":"8.0.0-canary.fb5a4cdeb.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"8314fa5ef107664c920b1bf6df0ebecef1fb5b8a","tarball":"https://registry.npmjs.org/@material/button/-/button-8.0.0-canary.fb5a4cdeb.0.tgz","fileCount":26,"integrity":"sha512-D1Pwn1RFZjWCG0mlPHLZJMcbBXsICAzmvzuDgDARWavGcjqqaA2G/RugCtdsGdjuGgeGRIXdWyd4CXgGCCVz+A==","signatures":[{"sig":"MEQCIEYDi/ZDYQm1hpCy1zj3HC8FM3L4UdS+t6OQyY9UzvLWAiBHRgWImEuSimZ7hSs7ZMUQXc7dUBpqbFqN7AC9Q3jqEQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":386725,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfFe52CRA9TVsSAnZWagAA20sQAIUbm1yDt2Z+0FJB54Wb\nDOKjrRFeK8QRk2BFsurd3zZm294CIDVijzlRbxvHXVSPNZbqlWnuS3ziNaDb\nsI18bpBiyv7OZMYBx2y31Nw4drywihSme3oK8VBYvItTWnltgNodpmQnAdsx\nO4WU9Xw5eop6HFg3wWld3IWlRJn7zyl+TlVuiWJ2G98fOkyD+EjbI0DyvW7s\ncJMnct5FNFWolxbYtBopCNHvpTEgkShcPR6XOHSZmS32MNWmFHp0x/EbpuGU\nkuaG9WaIvP7EvlQ2LSzlF3V8KSUfxIKu4gM3kbJIrdOKx34MVSX3dYGSyrOW\nd5zfFQrnmCKXaY8ebW7VYkW3STa/AOi64V+JBD1jb+Q+MWY37p5ql9Rp2xFH\ncmMDNKxi6YWFbewXkA9P2rxj8o8t/NDeCQ1d4ne7x+7+7GULNz21/OoFZD3n\nzyKtVitYGhAP8xxSFn3hqlxoQ0MNUbzWmxX77KCfEuvqjGEMS9IJExWjKJWz\nzLeOYzP1f9/aQk5yLfa6V4MfXfAl6zfyMnAr4p0+vTKsp0DzsAW2uc6zFQyp\nbFFuYzxlAleAUuA+0w6NNuwbM0XIeF0lkZZuOh2B2HZqF5zn/mLnwx3hUM1v\nlEsRx8Wl582j0cj4HT0lup/R4gcW3aelcrCLmO5zgbNvYGW8H+LjmDuJl/4P\nbFU2\r\n=wtG1\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n#### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.**\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n**Note: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.**\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n\n**Note: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommended to\n always include it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color)` | Sets the container fill color to the given color for an enabled button.\n`disabled-container-fill-color($color)` | Sets the container fill color to the given color for a disabled button.\n`icon-color($color)` | Sets the icon color to the given color for an enabled button.\n`disabled-icon-color($color)` | Sets the icon color to the given color for a disabled button.\n`ink-color($color)` | Sets the ink color to the given color for an enabled button, and sets the icon color to the given color unless `icon-color` is also used.\n`disabled-ink-color($color)` | Sets the ink color to the given color for a disabled button, and sets the icon color to the given color unless `icon-color` is also used.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color)` | Sets the outline color to the given color for an enabled button.\n`disabled-outline-color($color)` | Sets the outline color to the given color for a disabled button.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web button component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"@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/density":"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/button_8.0.0-canary.fb5a4cdeb.0_1595272821821_0.8612537526433457","host":"s3://npm-registry-packages"}},"8.0.0-canary.8df0f517c.0":{"name":"@material/button","version":"8.0.0-canary.8df0f517c.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"7d6e7f83851050e2b27cafb17c7c2d1bba1deed0","tarball":"https://registry.npmjs.org/@material/button/-/button-8.0.0-canary.8df0f517c.0.tgz","fileCount":26,"integrity":"sha512-fn/3t090NATN77rfkDsVjCICLShWNBKd07LnfGnCF5B9sBBkhE+RHulIhx8AWCFm+H8kqoo5SfZk0Zv4JLsbZA==","signatures":[{"sig":"MEUCIQCF6WXsVzqS8c/7RwUXUyZZZ7vAyE5A9Eqp7lq5oRP9GQIgTGroE9Px6ITs/7wVwleWLK0zwNJ6r/W+KlmN0dG0ky0=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":387493,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfFi8RCRA9TVsSAnZWagAAJgoP/2QTau9jp/IBMZ41ERK8\nOZnx+eXH/sakKoypJyJZlJNSXjn8y7Etc4s/iJWZ31cYwbR6K629KfyRCWVi\nE4eUtKfsUXW9Bd704ZtaF+uCG3HEn4b8satrC55wEL/uT/0rvUxOBMRaO8+w\nLUBXLBmOKTfnaR8BhPo2+P/gGNLIRmTKYdU5KfckvUu4D6jpFK34TT70w+Sq\nfkEs0jslb55eQOedf2N7kzBOUm1TgDX+c74ROrOikAwCsP4gvRf3LajVoN6x\nC7sat2xkCpKWx0RVs1D7Uuo8zUjQ1ZIdXBDr0dN0tLksx6u8QYuJomDeAJqW\nATelKqhPiCqLmnYvy+yrp3NFnFd6jsDiU8rLAeixyfQwvFNnLFDzsHUzn13+\nD8c0ZM+iFFpajk5Mg9l4fdG/uv8mXcwJC5k0VNeqxyOEXc8VB3gda9RPLIly\nwFELWA4ttdNooIshQfB50c6eXi1+S89Z0is6BW8SR0C1jMh+fiwxju1ncImM\nyHR7Rxp7lIY4sGqibbJgxKfsxLgXka+UWHMiGpq2aJXVrbEMpSfrfLPoeCTS\nz6jmPWDZv9GURn3PtrTOdUkHPvVWSEem6DkSqoMZJk0t8dXkNQs5ocJOY3cY\nDbGfmwGpNiUoexPsy+ZwFvYIPj3sPId5i/ARPOotnwxllNFoGYYNvQl8bEQ1\nYgb3\r\n=5ey9\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n#### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.**\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n**Note: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.**\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n\n**Note: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommended to\n always include it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color)` | Sets the container fill color to the given color for an enabled button.\n`disabled-container-fill-color($color)` | Sets the container fill color to the given color for a disabled button.\n`icon-color($color)` | Sets the icon color to the given color for an enabled button.\n`disabled-icon-color($color)` | Sets the icon color to the given color for a disabled button.\n`ink-color($color)` | Sets the ink color to the given color for an enabled button, and sets the icon color to the given color unless `icon-color` is also used.\n`disabled-ink-color($color)` | Sets the ink color to the given color for a disabled button, and sets the icon color to the given color unless `icon-color` is also used.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color)` | Sets the outline color to the given color for an enabled button.\n`disabled-outline-color($color)` | Sets the outline color to the given color for a disabled button.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web button component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"@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/density":"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/button_8.0.0-canary.8df0f517c.0_1595289361001_0.003357999193728034","host":"s3://npm-registry-packages"}},"8.0.0-canary.abcdbcfeb.0":{"name":"@material/button","version":"8.0.0-canary.abcdbcfeb.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"9a1df6e09d053fcb90342a5240a7085a481f81c1","tarball":"https://registry.npmjs.org/@material/button/-/button-8.0.0-canary.abcdbcfeb.0.tgz","fileCount":26,"integrity":"sha512-wVx9VTf0SKm/5DZPs5RW4TQDhTsWMlgLw8mEpiLtt4i6jhCKeil55dEAvJWK7lffNEMO9mQZjlQgtO1NnDV1Bg==","signatures":[{"sig":"MEUCIQDPhxasCO5qiHRYlN3jTZFA5Dl7DLCU5Lev2z/mg0sKpgIgBw/4/2jRDybohttUm4Jo87+YOtpvkqlBfOy2MgRSySs=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":387493,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfFjvYCRA9TVsSAnZWagAA+QMP/2HzD+gSu3b4R13RjLTr\nT6Ahlh7tcdiA9pEam54W0YTUZW9mT6Q7Wcryo3O5OW8qneG/UGFylmxa6Wan\n9HKyAVJVyjS9BYEjQ93PM6U1vl5vB1eEIm0L9D73x2uKT8t/jZlTkIy+FID8\nwQXlrRyGqmS2ZqCJi4HLqln+HsA5jhYI6xBxL5xx1GPkEDN6GBcAoE3VGRlh\nWpijTxRo88Z5+0tY6f06EusJTt6KFf8f0LOBix9d+H8bFqjLrXe24Ih1gx02\nWklrBRutbnIR6FJ0wIobXp8f1OCIK0ON+o4AxrsrXYubo5vf+6RgiFG0Wwe/\nzgCZe1KB3Rx2OswxykJrGN48TuDBm3lTGJAQDTZmISbp1lzp5xyHmzszGeFX\ntvoRzIlWMrRHOq1WKGxYyWjZ6UGF9jTE3Noq3qGO+rsI4OW557ywOji4iTNS\nPHLv63Oy3rRkRKxHs6CmPA3Avzc9q/+LWdzNrOsuYv8qNFcob7ApKP8ys1hz\nNyKoOy+CSF1t44YWcYsookdBYA9s4Obx029RgcIRTq0+jDG0KwL1GS4a8UyX\n7EKID5V6T3t7L14rV6zA4sd5Fes31262pZNGh7RP3ft7l1PZkLiNdpaQhHjr\nyXoTxLfVthMOL29tWFd7BCtklvDx1L0rY4BgzD4ayuSMOv1QRn1b5Jf7cQzN\nOR0u\r\n=dzJ1\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n#### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.**\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n**Note: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.**\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n\n**Note: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommended to\n always include it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color)` | Sets the container fill color to the given color for an enabled button.\n`disabled-container-fill-color($color)` | Sets the container fill color to the given color for a disabled button.\n`icon-color($color)` | Sets the icon color to the given color for an enabled button.\n`disabled-icon-color($color)` | Sets the icon color to the given color for a disabled button.\n`ink-color($color)` | Sets the ink color to the given color for an enabled button, and sets the icon color to the given color unless `icon-color` is also used.\n`disabled-ink-color($color)` | Sets the ink color to the given color for a disabled button, and sets the icon color to the given color unless `icon-color` is also used.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color)` | Sets the outline color to the given color for an enabled button.\n`disabled-outline-color($color)` | Sets the outline color to the given color for a disabled button.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web button component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"@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/density":"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/button_8.0.0-canary.abcdbcfeb.0_1595292631879_0.8983021367309056","host":"s3://npm-registry-packages"}},"8.0.0-canary.7bd5075de.0":{"name":"@material/button","version":"8.0.0-canary.7bd5075de.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"9239409fb4ed06a682d9c2dc6188865c3430bf0d","tarball":"https://registry.npmjs.org/@material/button/-/button-8.0.0-canary.7bd5075de.0.tgz","fileCount":26,"integrity":"sha512-yTR0v5qwcwbNvrUC5TtjdgQ+UCLt7v7nx3oYyvb5O9yv/T/7cWLaxfKvtX7CPCfIH+2aRO9Ir/+tkfyuPNh8KA==","signatures":[{"sig":"MEYCIQDc/ULKJJv2hlHl2AgSeeYzOdt/+DML+DNVlXFL6GshiAIhAMpl0/tUiFSMy9JXjEeopQtIrZwrGssjOKLEoFqjdUis","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":387493,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfFzhFCRA9TVsSAnZWagAAwGsQAJdEByuakFubyJf3ecUo\njzkazAjZczBsEpoSdnRVqkH8jGJtR3h1QTQ1E/HFariBxEeHb1dSKcyukuW/\ncQ3M48xTgy2NHEmQfDsDOytef2lfz7utZ1mnS0SQdwsRoA79kF5Qtb+3luWD\nTMHx/v690G3xqkQO+3qG8KNoq5zynV1FNdDApnBUIQJqIjG5iFsJFVTh09RC\nbbQ6xbDa++huDDxZn7cP2Rxkz+0w6quyaGB3yQkKoV0lTyi/Y8BsEYw/3EEB\nwEE9vdHgh1/NVLqNed9HfRXaolhUNnR+6yyCLrNcaFiWz8psV0Ceb9b0CHxq\nzgVbOBzZbM0UDtzCgzMh59SQnyjQvITP0NFZPRrhEcnPXQnIrRaFQ7VGZQKN\nyYuTNAbCR4O4bnvjl+/LMCBcXw0hv5fwzILX3BqXeu24n9mJ0iwuh6Uy0qkf\ny91YQ2337oAzBpKH2kaJXNusuy4xszaMUnVMbgVDjpvFozX1xqPCkqsGcs5e\nf7n2kTxlbeHg50I836oU4x3zFYbiKjnHnLDvEHMmDxUWQyTTwsWvP/onKaxa\nhWqYyPwXauH4IbLhVlax+ZYyEmtAqaaO+/gtpj4itRgjLraD3JTvsYzwIx3v\neAk/1bnmARLNfatyEha63yHYKMh6cing11ldSj7FgngcoF9sOa+A9PUXjFbM\nsXGm\r\n=iN41\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n#### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.**\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n**Note: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.**\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n\n**Note: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommended to\n always include it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color)` | Sets the container fill color to the given color for an enabled button.\n`disabled-container-fill-color($color)` | Sets the container fill color to the given color for a disabled button.\n`icon-color($color)` | Sets the icon color to the given color for an enabled button.\n`disabled-icon-color($color)` | Sets the icon color to the given color for a disabled button.\n`ink-color($color)` | Sets the ink color to the given color for an enabled button, and sets the icon color to the given color unless `icon-color` is also used.\n`disabled-ink-color($color)` | Sets the ink color to the given color for a disabled button, and sets the icon color to the given color unless `icon-color` is also used.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color)` | Sets the outline color to the given color for an enabled button.\n`disabled-outline-color($color)` | Sets the outline color to the given color for a disabled button.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web button component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"@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/density":"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/button_8.0.0-canary.7bd5075de.0_1595357252868_0.24745550830145335","host":"s3://npm-registry-packages"}},"8.0.0-canary.405a29a20.0":{"name":"@material/button","version":"8.0.0-canary.405a29a20.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"1412b59e4a0fc3d57970b003afa22c8ba8630ff2","tarball":"https://registry.npmjs.org/@material/button/-/button-8.0.0-canary.405a29a20.0.tgz","fileCount":26,"integrity":"sha512-LsfaC8YEIZxNw6jPdb+T+92HY47cJ9MMH0UPueeNKZg7ffxMQ06k18k22V7/1I2JzFYuzTVy6VCAX2cSSrhLRQ==","signatures":[{"sig":"MEYCIQCd49xihYEpmgSXZ2Czxw8kEbjKQbMNRGRbDgZKoqyZfAIhAN+TT4fVVpsdn1ax2fjcOam9kPbF8dy9BZHV+QQPhP2v","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":388545,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfGLxqCRA9TVsSAnZWagAAQEQP/RATiOT8YEs80FdHvmSf\n9XYhcOvoTvG2arQUD0TgwFeLGNDTOEB7G2IXFTXkXn/9AqB5itITPSCjQS4K\ndcPuFkzQxmEdCwAMYqnnAllSct+dR/kr0X0Tq8lH/YPFzv+D6BffK2n/ZwXU\njmLJRfhWgaEi3GkiJI6lg1uVnlD3KsHkdhKv9nYcXuR0ZQdvzjfDhrvsP2OF\nY4v/xLSTNYk+JebsEmILMdkRdo7Gsi7febp5iR5MKtz2lBEkW+bDwB4m/0w+\nC+a5zTXEFFG39xd8P/DaDsP0Hv7T8p6YMxPLcn7n27lKuclL9mm/eaBHNJbD\nHcBtImB+mHMwzt8syZGPGW9QlKI3WFXOxlvbR3PjGB9ElEEjha3qHOJq/td9\nW/Rwn9itDqhCHSdU3kCPobQKtPKmwhZCMrYmoFfuOKJNyH+HO+Yn/Fk4cNcp\nqVH4/RImkfEQICuTUh/4z0Ix3AEyotD/oUK386GClDQUg/2f4kVvhry33ozU\nZoCCAqyHy3JprSPJaphmGLVmY6GzB7uqcnAUXDYZ/xF1cZsFGuCQnmExbIk4\nhU+H+FapxHj+xCEDn4j7HpJ1Dj8CxUYtm9w4989dbrNB2akcTxnnWVliei9Z\nDmKxVr/bEcta1A6ZB7F+Q8QxLjm255GTA9nym4RrjJTD+D98SKTiIjPHkMYP\ng2xZ\r\n=MWmd\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n#### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.**\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n**Note: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.**\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n\n**Note: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommended to\n always include it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color)` | Sets the container fill color to the given color for an enabled button.\n`disabled-container-fill-color($color)` | Sets the container fill color to the given color for a disabled button.\n`icon-color($color)` | Sets the icon color to the given color for an enabled button.\n`disabled-icon-color($color)` | Sets the icon color to the given color for a disabled button.\n`ink-color($color)` | Sets the ink color to the given color for an enabled button, and sets the icon color to the given color unless `icon-color` is also used.\n`disabled-ink-color($color)` | Sets the ink color to the given color for a disabled button, and sets the icon color to the given color unless `icon-color` is also used.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color)` | Sets the outline color to the given color for an enabled button.\n`disabled-outline-color($color)` | Sets the outline color to the given color for a disabled button.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web button component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"@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/density":"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/button_8.0.0-canary.405a29a20.0_1595456618207_0.8813880386452009","host":"s3://npm-registry-packages"}},"8.0.0-canary.f3693ac4c.0":{"name":"@material/button","version":"8.0.0-canary.f3693ac4c.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"503f67529c578e42ca4d7dbcae5b04f77354ebef","tarball":"https://registry.npmjs.org/@material/button/-/button-8.0.0-canary.f3693ac4c.0.tgz","fileCount":26,"integrity":"sha512-Gi2YGB7YSI9rfS9/14oSR0zZcNvdZhR+Grj9x72CutTUhAYqDXW0P0R2Y6GfM8HClo/NM0n/OJCVvKoy0K6Jiw==","signatures":[{"sig":"MEUCIQCthNg/DDhxbqzhwkWbVeHtb8hfrHDdCu9PnQ4evG0EDgIgIGMk93w0Q8SVGBbh399tVGX7G1SOeO/lm7YRzqcRRac=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":389655,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfGL7hCRA9TVsSAnZWagAANX4P/i9RcTid8lm89xdGRq0N\nhYeLkFcYwuR4A2gFiv8MKPkIOmAHM6tDGlq7qmp34jKDvWPL+1erbBujm5Ac\nd4FK0mNMkU844Pzn+AZrLZmbefQ913tt9m3eL1lmwojDO+uKMcNuBsL/r/4N\nBD4+FYfNV3Sf+4I1ye3wG1aL0p9s3VsOuI+u7FSMseT/gFSxJlkxSGKAx8vf\ngGhsa0rEhDsQK4PPR1oq0xJ4eNSem2LaOSlWwnEkSi3vXxjXdVntzr4qQjJZ\nteT9a0n67I/46w7OA9sOI/DZ/a1KglXRK6HwhUkUZ7Hn3NQ3DJMLnDYU3kIw\nzvwfYH/fOtlZqFUCkA5R1Jx4kvzIvdeHYnap+UBZPZ9Z0DVTTCDYQ58V3RgD\nXgE0293O7EM/U5RXH+21aT8V1TXvR3aDfXgdqo1VlJuGZZeesTjwcrV+iOuO\nfiN/900wnA100K9zRudhnuM7D2TVxokteYAgKHBEVez5vcxUqY0sgRFhdo3Z\nc0TtCgBZuia7lpBTdNZqifnX+xF73EQdASxMU5ZgBe9F4hUbwz7cmhmKD9en\nG1X3KA6OYPbMs6Q0ClALp+qqgGRKK69/5LF18vvt5w/6koggaoMQ89FXzloG\nXOId9ecucMyYxgwl3S0ZKEwjL63fSJuNCbXczGkkbnw4uma6+K+3y+/C4rKu\nIjeD\r\n=0If+\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n#### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.**\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n**Note: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.**\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n\n**Note: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommended to\n always include it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color)` | Sets the container fill color to the given color for an enabled button.\n`disabled-container-fill-color($color)` | Sets the container fill color to the given color for a disabled button.\n`icon-color($color)` | Sets the icon color to the given color for an enabled button.\n`disabled-icon-color($color)` | Sets the icon color to the given color for a disabled button.\n`ink-color($color)` | Sets the ink color to the given color for an enabled button, and sets the icon color to the given color unless `icon-color` is also used.\n`disabled-ink-color($color)` | Sets the ink color to the given color for a disabled button, and sets the icon color to the given color unless `icon-color` is also used.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color)` | Sets the outline color to the given color for an enabled button.\n`disabled-outline-color($color)` | Sets the outline color to the given color for a disabled button.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web button component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"@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/density":"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/button_8.0.0-canary.f3693ac4c.0_1595457249269_0.945776661039667","host":"s3://npm-registry-packages"}},"8.0.0-canary.12a109680.0":{"name":"@material/button","version":"8.0.0-canary.12a109680.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"efc279fd47e65c85a52f8d9b6ef90c777563f129","tarball":"https://registry.npmjs.org/@material/button/-/button-8.0.0-canary.12a109680.0.tgz","fileCount":26,"integrity":"sha512-y5qgaMxhjNCJpV+gUvAK8L/QDrdfT1fQkyKMO/+jrH91RCD9x0dz+YuZBi1thoXorQ661Z9qfgskgKOe65yhSw==","signatures":[{"sig":"MEQCIAooqCLc6akB+rxuiKTUEWNPQn2r0RRHG+c6mFfrSmKrAiA0gdIb/VMznafzDOEqvQzKRQtVIGJGlI4e3qglhRiqRw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":389655,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfGMXZCRA9TVsSAnZWagAAHGcQAIqQqG2OzTbLXlB0ksyb\neE7ID/W7AHp/baSdWkig0QSHUeuizSU1Tk5HydABro42vERsKJoInvI5k1q+\nvDswCyB1BVVIImdrbd7OnbBIgCDZK7cTE8P8XPU9pxGebEL15XLyRMuQaXKX\n7xP9WgAjNFOExwY2uaJZrfmnSDxhT7Sg/SEdz2oP8QGahCvV3yZdxv2zdyTa\nX41pBy/sTrIdvaL4l9iWCwmergr0DGqBRuw3dF3DrTpiJZrb/55+rO07RiM5\nAaGsIw+mShR2YS8nLz9gMna17MZQR9Tf0oa8Nirgg7vwv7ZwJKTxV3df+6bf\nTMkoUZlQZbGqNJNLE5ZxCAtKRm7vYel/aYRVgRZYjqOIjrkINRcMso1nn0PY\neNkOU2uPpM49FN6NTyznMBlb6V9nJelol0Sjc/9fs388I8ZmLbqDWGbHXEX2\nNGSEZtHOcxrQd6GzXsFGsoOnt+gTAQSfVVJ5I+noPskrB9cCBObgGRIXLzfO\nFoQLXN64oTdh/zemd/qcI78bvWpbBaqaCgSCIwInT+gzxFPEQcrDx5hojWbc\npXTxk/1YLwjeojFgJp5ZkP6CAoSn8ZdxA3tNuvq1oVKUAh0fRJY/wafurDFR\ny+IfyIaDLoTW5BQTcPCZC2yi+JWlynunkY2mLxOhvNJX3PeQnVCkwRNDyhWh\nRz4Q\r\n=Bwke\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n#### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.**\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n**Note: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.**\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n\n**Note: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommended to\n always include it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color)` | Sets the container fill color to the given color for an enabled button.\n`disabled-container-fill-color($color)` | Sets the container fill color to the given color for a disabled button.\n`icon-color($color)` | Sets the icon color to the given color for an enabled button.\n`disabled-icon-color($color)` | Sets the icon color to the given color for a disabled button.\n`ink-color($color)` | Sets the ink color to the given color for an enabled button, and sets the icon color to the given color unless `icon-color` is also used.\n`disabled-ink-color($color)` | Sets the ink color to the given color for a disabled button, and sets the icon color to the given color unless `icon-color` is also used.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color)` | Sets the outline color to the given color for an enabled button.\n`disabled-outline-color($color)` | Sets the outline color to the given color for a disabled button.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web button component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"@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/density":"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/button_8.0.0-canary.12a109680.0_1595459032899_0.30805323292445586","host":"s3://npm-registry-packages"}},"8.0.0-canary.bbd06696e.0":{"name":"@material/button","version":"8.0.0-canary.bbd06696e.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"c8517798ca97a02d832098cf127fd8de4055354b","tarball":"https://registry.npmjs.org/@material/button/-/button-8.0.0-canary.bbd06696e.0.tgz","fileCount":26,"integrity":"sha512-b76mIL1QyZzZtasLgWlKe+yi40+VQbeW0qZEsu7fagYJNdOy0ru6iBj9M8GkU4b8up/K1mRzKJpMZsiKq8QoXw==","signatures":[{"sig":"MEUCIQDgnV/p7wyWBGLeL0V+SI3/PnkDLkgEA324NKy0hx3zagIgf5lWSpu/YJ1KGcU+eER5fex4unol476vatQeMGzPZPU=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":386695,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfGNFvCRA9TVsSAnZWagAAuZoP/1qK/1k9JO6BhJlzz8W0\nNQxXL0Rb7q51iH30oY5tlRBxTUXvXL2JSuI0M9t0GK87mkygN6MEPKPJqLit\n8yFwfoRih17DmccKjB03pFisKChWoCt9Af0F0WYr2dJfcX/k6ZJJZsC/wRYw\nVlJmKMoH53PNaZLLN90t8PQSfMaI23lNEUXDLwedf8kLMQdYm+4Qe3vCPe+2\n7jiMPABSzCJ5wKWIPTmODKpurYIhUD6HbeJrvz63MRCEnFdZZ5zyWWTTgH/U\n/9ZfUF8i+SCt1/sdaojlJpeAfKZlNuHko2EaumbYmMVUme5y5oFhpFwz0deS\n4ZcDPvYV1St1/pPWh4diJJp3nPH6/X0vrPTUbDU9J3NCuhqapXb1bDpk+8iJ\n/UVJfySNUT1WMLYBqbWGd8qQUFBSwyL/kEN39PxMoXZ6M5aO87Io/BffJPS7\nt1BNqGtGVPud4pSHm14CFGsVYnALRg0mQ/SXcZYp7cUI4sZ11ES7KiKZv7PX\nR9XKphibO6zGPz8kikCOxpJp0EjbVoWYUY26Kya3iPeEndhzyoHbOfpNebJC\nNiaYAfzgI7rUNLl0Q5mo2+Q44vtrZnlJ3hPpVottZipwZVjb7Ovegr2wMZhK\nMOpi9Af8UI4zZw8zBsEuUCa0ClcJ+cIU8xNwOwvoN1ErkvtH9NoU7NImAo7n\nwK7M\r\n=ejy9\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n#### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.**\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n**Note: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.**\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n\n**Note: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommended to\n always include it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color)` | Sets the container fill color to the given color for an enabled button.\n`disabled-container-fill-color($color)` | Sets the container fill color to the given color for a disabled button.\n`icon-color($color)` | Sets the icon color to the given color for an enabled button.\n`disabled-icon-color($color)` | Sets the icon color to the given color for a disabled button.\n`ink-color($color)` | Sets the ink color to the given color for an enabled button, and sets the icon color to the given color unless `icon-color` is also used.\n`disabled-ink-color($color)` | Sets the ink color to the given color for a disabled button, and sets the icon color to the given color unless `icon-color` is also used.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color)` | Sets the outline color to the given color for an enabled button.\n`disabled-outline-color($color)` | Sets the outline color to the given color for a disabled button.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web button component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"@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/density":"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/button_8.0.0-canary.bbd06696e.0_1595461998882_0.40970669771759005","host":"s3://npm-registry-packages"}},"8.0.0-canary.4951e7651.0":{"name":"@material/button","version":"8.0.0-canary.4951e7651.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"3ef0a36540d0e7e1351df5c838d9776dfba9a3c0","tarball":"https://registry.npmjs.org/@material/button/-/button-8.0.0-canary.4951e7651.0.tgz","fileCount":26,"integrity":"sha512-rmrHTphvx3pFHKeYzm7CsifRB5YbMk3IDOP4ubWoglaA44uj+j3aj3CXMAFEFpjuFlKeqbrge2r4DIO88rIhQg==","signatures":[{"sig":"MEUCIQCI1EJ9dt8D+6HmlfkEWxaU5wN3puXIMqMc+Vvy3l2yfgIgWGXtb8yh8CqRtzkmsamwN17Geayi6WBG2/X8vNfjvj8=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":386695,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfGOzKCRA9TVsSAnZWagAAxncP/1qo8NEBSCvMGDek+LZp\nAWTXDDo5bphRvQp9vlbfccMIGAhADcaP3S4Bh/A293HIuh3if8UUm47SGZFQ\njOw5O6XkwDeE6X/K3MibsOR2gQXdgRJMjDnAfAxl5FG9dhlauSXj6uQ/VIx6\ncdfvCh4cGF8v1UeoFpPpZtCmjuhbXV5QJzm0lnQj5Vr/tn5FhWm73Yku8vOF\nkuN7JYdbXBL41Vug7kR2Fhwf2tJw2c9kpOWJC1sPyh3LpHV7y5b8vmLEK3mz\nc/5e7EQHDN92rgNNL2ozCiBEGlHE+hczkpOSMjJR7+KGKffI1mK8uk6TXbYX\novpvsHIoE9mtEVtWAl6JM8ZD9xw20WDufsdoNoFuJ45Rd7IbtsIF4ex9AQCu\nwR69i3V7zuCzQ/ENnK1tV7IDNqmyYNpeEaDgOYvXi857X+vdA+FW78sz12kW\nly+UNSF0gDFdWBgej54R1bFvxZaYSyfLbRlylzhl18/WOa33jpqAbrxUml6h\ncarIPkRhkBW0YKiMwpnAEWsV7t1JnIlS9xCXGsEwgV9Zt1uBeha1l+A40OSP\nkvyIgogYaTInphsa3cy+9V2NMgb+3hkLwvWhakbtgoXX+hF1tWAYfkx/I5eo\nQk46SiU2LfTBGTqlqjdY7R9OmvVNKdaRwHYpzk3St39hsYWE/2L1qB2oAyp7\nFS2D\r\n=6Q6J\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n#### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.**\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n**Note: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.**\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n\n**Note: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommended to\n always include it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color)` | Sets the container fill color to the given color for an enabled button.\n`disabled-container-fill-color($color)` | Sets the container fill color to the given color for a disabled button.\n`icon-color($color)` | Sets the icon color to the given color for an enabled button.\n`disabled-icon-color($color)` | Sets the icon color to the given color for a disabled button.\n`ink-color($color)` | Sets the ink color to the given color for an enabled button, and sets the icon color to the given color unless `icon-color` is also used.\n`disabled-ink-color($color)` | Sets the ink color to the given color for a disabled button, and sets the icon color to the given color unless `icon-color` is also used.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color)` | Sets the outline color to the given color for an enabled button.\n`disabled-outline-color($color)` | Sets the outline color to the given color for a disabled button.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web button component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"@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/density":"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/button_8.0.0-canary.4951e7651.0_1595469002473_0.3312736701391066","host":"s3://npm-registry-packages"}},"8.0.0-canary.75deebbef.0":{"name":"@material/button","version":"8.0.0-canary.75deebbef.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"cd92bed82b8ed855a1c2ebafbaaa4b3b4d99efde","tarball":"https://registry.npmjs.org/@material/button/-/button-8.0.0-canary.75deebbef.0.tgz","fileCount":26,"integrity":"sha512-AkPEYlpFZnLh+QsXQS9D4Y7rMVEEGXlU6LqWS4hv9KitxtXzevlWVjk2u6KLbR7UbJrsco1p5SkwzRDiVefgzA==","signatures":[{"sig":"MEYCIQC94w4mB6kParxFxsmBK4tqv7CytPrSC0sDUmLtxvD8lQIhAIKKcvVuoWWDmQyjUFrQfUsUWaEwN1ey73L4KlFIZpm0","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":386695,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfGc0dCRA9TVsSAnZWagAAdRgP/14MXd5aAEv8ORW23Tak\nUJgSjVYPn6Unyr9uc3YZcoXg6ur9kqlRSS9D+Kg7fLLNpR9/Oc5JSgm2c/oe\n0Zl0/PuOXWMnjWewd3lGqOuDo3ZUorEobtOPREwilpC93L3nCCQRGk1iskdh\nM+HgGdz7cVeox9e/gfWT4YkgN+F3YO55jb2k5TTsAH6RxzcD2uEaG06+WknG\nZMHwLOP/yAj/FtMUU2LVqP/Avnh753STQKCvOpTMb0g0+uzeFXSux9eSctTV\n5KMGC7KaFdw0+SmQwBWcW+OmuKunNa1PDQtKcRCTkwH7vo7Am1pSHfIaKCFJ\nuYNBRm9QvtT6XbIsAP+qMZY4G+HyQtMkuh7kYtvWAuxSYdcjyLyb4n2ktaJL\nHMIGpDF9u61X6xJSEi1TAD6sPHDBKVl0T2aR0MxiJdiG4X6EEZtg3RDV+6G3\nfH+LSBR3cWm30Y5O/SoDWTz2mGI30F4lVVxHkOIRQxdrqObgWVjnt9sq167Q\nZzy/8lmrxY+RBm+Uy5hQJnaH/efI9+sK6Q2KU2xj4S+Q5LilwlC53/UGjpt1\n+d6eQzg9o7DXu67uBAK1ajO2MVABQvSKd5FcrxsWe3PeR3N/Pu1NTZw4dkxy\n43YVYru+A70uMmzJyvBzJ3P+1uMOF6Bw5AMyICM5j3sAFxxhO9VfO8LPjcmR\ndxGX\r\n=S1DK\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n#### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.**\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n**Note: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.**\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n\n**Note: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommended to\n always include it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color)` | Sets the container fill color to the given color for an enabled button.\n`disabled-container-fill-color($color)` | Sets the container fill color to the given color for a disabled button.\n`icon-color($color)` | Sets the icon color to the given color for an enabled button.\n`disabled-icon-color($color)` | Sets the icon color to the given color for a disabled button.\n`ink-color($color)` | Sets the ink color to the given color for an enabled button, and sets the icon color to the given color unless `icon-color` is also used.\n`disabled-ink-color($color)` | Sets the ink color to the given color for a disabled button, and sets the icon color to the given color unless `icon-color` is also used.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color)` | Sets the outline color to the given color for an enabled button.\n`disabled-outline-color($color)` | Sets the outline color to the given color for a disabled button.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web button component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"@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/density":"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/button_8.0.0-canary.75deebbef.0_1595526428500_0.9973585392736477","host":"s3://npm-registry-packages"}},"8.0.0-canary.95aff33ee.0":{"name":"@material/button","version":"8.0.0-canary.95aff33ee.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"3457413cc1d13964e65bb35eef1b4db700118998","tarball":"https://registry.npmjs.org/@material/button/-/button-8.0.0-canary.95aff33ee.0.tgz","fileCount":26,"integrity":"sha512-qUdlpbNYWMeNmslpDQWErOzI/W+Nae2JhBIChIiFETSbJSOkV8wW0xVjaphBfomV/G5hskcfuOAtVBKlXl4B9w==","signatures":[{"sig":"MEYCIQCNynq3th14VJvMgf6+lxFTSSwmB9olg2taHaVYIYseRQIhAK1mDz2HJ2rvwEaw8kALuw4KEpBkYB+vPD6iM1zpUsjb","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":384613,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfGdtUCRA9TVsSAnZWagAAn0AP/j7dZ9ZfO8gKkBExTiUs\nFimElf9lU1EE+EAhNUGgsBP82VF33ek2mEwau9kV3gX5LxvSPrdaysS266gp\n3SlIqv8wr9qlTOHbnjqqcxbSGBHxGQhQnuvuMOKmB/tS6baQHHPcg3O7/D/W\n1P2VN/oKDLXGQ7Ev0X4CQE0lrE9lT47I159lw3ZZsNOTtZnpYFcBVSDvaIPL\n/Yo4wE3DlEW10u4s7fTJXamE0xBsbM/R8smX/pJX0pny8F67ftRkM6XsBFpR\noNr8RMs4uGMPAnubJJeZajbyyBlGnCV0BewypSmf/Hzmd9UrRferPAC0cLvh\nSGPwBCqqiN/UbXThd0tDzI7uJbBJvCK3GI4f9yy9XUtfIETi9j9YFufFgvxY\nO2yQ+XneRJZKjUTkyvU7WuvuBmzXgh8StPHe1nJqPMOuzvgKmILhHDQt7GvM\nVn8fsC/ieqsTFhW8vwDvyJtWfqmOsVEsTiEXdeXsPdZy3oDh+6pi+z2b79xb\n2D9Lz+bXBksJKqje/MCfCjaS8yo7gVwNCukgryCB072rl/kPDlgLEql4QU2k\nY3A3QX24C9sS8lCjfCF7rmZP3xUqt7aZ2brJ0nNA62oB66ESUDNBzXeGA2kN\n+uTuZ4YL89uUJZcj/j1GQPbQDhXAYFvAMyQqAUENLotaL0aL3ODNsI/1HjgF\nTsVt\r\n=kKDK\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n#### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.**\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n**Note: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.**\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n\n**Note: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommended to\n always include it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color)` | Sets the container fill color to the given color for an enabled button.\n`disabled-container-fill-color($color)` | Sets the container fill color to the given color for a disabled button.\n`icon-color($color)` | Sets the icon color to the given color for an enabled button.\n`disabled-icon-color($color)` | Sets the icon color to the given color for a disabled button.\n`ink-color($color)` | Sets the ink color to the given color for an enabled button, and sets the icon color to the given color unless `icon-color` is also used.\n`disabled-ink-color($color)` | Sets the ink color to the given color for a disabled button, and sets the icon color to the given color unless `icon-color` is also used.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color)` | Sets the outline color to the given color for an enabled button.\n`disabled-outline-color($color)` | Sets the outline color to the given color for a disabled button.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web button component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"@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/density":"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/button_8.0.0-canary.95aff33ee.0_1595530067643_0.960369473850049","host":"s3://npm-registry-packages"}},"8.0.0-canary.9d9f47473.0":{"name":"@material/button","version":"8.0.0-canary.9d9f47473.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"26073b64f77a13d1b384d75bcb52aa7302d86f1e","tarball":"https://registry.npmjs.org/@material/button/-/button-8.0.0-canary.9d9f47473.0.tgz","fileCount":26,"integrity":"sha512-EPBjOToMRg6aHwHeI/M+AcxsDCzNQF1Y5WUmu6yUiQJLoBemqv9154owym80l5hAA+wuCZJLztj7smJ+H1CuAw==","signatures":[{"sig":"MEUCIETvALnNzsSZxPKejcUrkemooca6HqYAf5CmhI0o1X61AiEA0IBTYnosa8sScrcIJSekA/FPwha2tntuf8mIMvZ1pcs=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":384367,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfGewQCRA9TVsSAnZWagAAALEQAKDeF2os6YEwLLoixEXY\n4frAeSTXCJ6qeMjVOFTClezP9L6e8s5RB6YNyf6Fg0L6aJ4OIylxKcVHSLdU\nAr+DhTDAXkQB9MuRmLIqDNid2vhGpkX0Hazy4Jv4/SH7ZwcLmqHJ2wsP5Tpr\n3r8MS7a9EZKiSNgFGo1BYAWupq2IHOMfHQxzpDfLPSp2BmVFQ85YVc0OPIGY\nzwjZCIeXnaa7o0zjSHIvJaDGrXoVSLBz5yLFpQozoQDvlEY82eYJbudw4pCY\nnFC5WyWSq00oCdJu5a34OlfvusS2LJjlaqgC2xwjBWoqFUl18xuj+IEQysz1\nYF/HKhTqp005FZVF5lgnzuPv0bcn7C25aclN2J5dT+AdD9ezOdfrgH+7kvwN\nHnzV3gltKkgFh6O3YXpluzCU2ZSWXzZ1gOiphO9i5VAytNxeHr1W5ET07t1G\noB/rb+PKvukvc7/x97gSC95EvRHE0LEZFa1oJCahpx5JUtHmhEqTB+tHciSw\nD8rLh92AUjgyrX/jWvHVUon01Tx9HwLzGzpzGW9bVhjjrM82M8gLoEy/JAV9\n5lUBz1IGaaDl9GM4QlvUimag7Ywvg6kKdeqWtpSg4LTmIZExWdNx6lzYHRip\n37StU48TriZ3ONNyDwDzKjZw3r4dOhiB5YiCcJOZeYsDAF3i+YjC6Pd913/E\nxR+K\r\n=4gdf\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n#### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.**\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n**Note: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.**\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n\n**Note: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommended to\n always include it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color)` | Sets the container fill color to the given color for an enabled button.\n`disabled-container-fill-color($color)` | Sets the container fill color to the given color for a disabled button.\n`icon-color($color)` | Sets the icon color to the given color for an enabled button.\n`disabled-icon-color($color)` | Sets the icon color to the given color for a disabled button.\n`ink-color($color)` | Sets the ink color to the given color for an enabled button, and sets the icon color to the given color unless `icon-color` is also used.\n`disabled-ink-color($color)` | Sets the ink color to the given color for a disabled button, and sets the icon color to the given color unless `icon-color` is also used.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color)` | Sets the outline color to the given color for an enabled button.\n`disabled-outline-color($color)` | Sets the outline color to the given color for a disabled button.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web button component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"@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/density":"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/button_8.0.0-canary.9d9f47473.0_1595534352225_0.36034240991450894","host":"s3://npm-registry-packages"}},"8.0.0-canary.00dfbf6be.0":{"name":"@material/button","version":"8.0.0-canary.00dfbf6be.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"318d6a23a50db13b7156846496aa909b31b75a55","tarball":"https://registry.npmjs.org/@material/button/-/button-8.0.0-canary.00dfbf6be.0.tgz","fileCount":26,"integrity":"sha512-70XXg60LeGuFHwZL/jh4yKzMportPCMIia5Cfyhmtopq6M35VtbFrgGEbwrNb4NMZ/Qxha/RLYfHM1LvHfrbFA==","signatures":[{"sig":"MEYCIQD+EF87xfF5WfGFAuvrIEJnt3UwzThfh2pl/5YVHoonKwIhAK/ynong9Uo9im/YFvD7zSoCnevneiv9PiC2uLZd3QgK","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":384367,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfGfpSCRA9TVsSAnZWagAAOVIP/3nppoOI2WZXPMg1t5yf\nbusUwDysQuZFwnOPYX4PAp78Pz9rtTQyxQw7BQbz6P+9mwoKDwBaKrKGcfPc\nfet05TX/ZdIKbASqmXUoVrUW8/CUDe0a7Nb0KWftbHNGRUPmBS8OVOR4ek82\nwWcxPabkyZXBs6gcOS0A+DgLO89dzMvx2ufmJChOUrR4TthmLXZvqHTbcl5u\nNFVB8T117ZjoiLNiWyafvvVRZsHKeETnS8Yd+OSV1u2L/sp3YuNf36UN/XCz\nipey5pkKnXRCzyznCtOjlq1uK2OhTOu6QSNiI5HriBL2FsyDEFBHb3zrg2o/\nwC7yx/vd6Zh2oS9WODREzO+eZu6MQTv9nEnIubz9dXIq/s94fbllpHzWnVVF\nUeX0Wf3VDi97tyTzRZxVpme6MVWXaOajsObebGXSSshm082Hq4BITybY3sn3\n5toCRQjUhKON+UoUEowVH8eYC/HFiyMmScH0bBte1TdkVNk80uvT9xQgD8bh\nUMPqL0SSnEaccxfIh2qZrVD9qaVFGaTzpKByOQf3DOZ1CySQSmq0rgCaWgzM\nE6dfY4twr2IQ/FSzYnSJbOxt0xgsnOz2wz783RDlV8HM1I2Ds2/xjDu1mjdZ\npJlAqR2S9OU1pH/qSoAOOeAUTApYhPl1jXn/coGQZyXPeyWoOF8dISw3Pit3\nkvI7\r\n=TPWj\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n#### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.**\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n**Note: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.**\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n\n**Note: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommended to\n always include it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color)` | Sets the container fill color to the given color for an enabled button.\n`disabled-container-fill-color($color)` | Sets the container fill color to the given color for a disabled button.\n`icon-color($color)` | Sets the icon color to the given color for an enabled button.\n`disabled-icon-color($color)` | Sets the icon color to the given color for a disabled button.\n`ink-color($color)` | Sets the ink color to the given color for an enabled button, and sets the icon color to the given color unless `icon-color` is also used.\n`disabled-ink-color($color)` | Sets the ink color to the given color for a disabled button, and sets the icon color to the given color unless `icon-color` is also used.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color)` | Sets the outline color to the given color for an enabled button.\n`disabled-outline-color($color)` | Sets the outline color to the given color for a disabled button.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web button component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"@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/density":"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/button_8.0.0-canary.00dfbf6be.0_1595538001716_0.17550952553832344","host":"s3://npm-registry-packages"}},"8.0.0-canary.b87e522d2.0":{"name":"@material/button","version":"8.0.0-canary.b87e522d2.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"f9848ddfe982bd1359572518231d6eae59220560","tarball":"https://registry.npmjs.org/@material/button/-/button-8.0.0-canary.b87e522d2.0.tgz","fileCount":26,"integrity":"sha512-3zcrDyiWSvc4VWHwTehlpARu+NKhlUEVT3fmWgppEVSCvpJUqNvI7FMoPReFl/OoJ8UWkbX6CnovRGCGyfKV/Q==","signatures":[{"sig":"MEQCICKEhLUNEDkQlCDsIBb66Jslcy6vGqKtQtAGCP80R4iUAiB8crDfP3lq+w827hU13RmCGjUboPIKWharwhpXP13sTQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":384367,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfGf/1CRA9TVsSAnZWagAAPwYP/3TKukKTLjtT8Ar43FDV\nkwlhhhKKYHH/94PYBGb4/f5kVHV14dQWsSOwiXxuzgdKD7/L5ci8BvirkkXZ\nclkaNUL0Ud6a8cnIdDLxcjAWE+nxfqebB8u+ZinBnh5Bq4j3JCugLMmB2oO8\nvljyM9YEjmjRCUkLssMYoMI5vOY3BFgLNpPKFu4PZgrWukEgnxg4Zdoz+IIy\n1zysHs9eqPGuyy7UzknDhmKUFbcNeaaEyH5BL6eSFMrhfqN+BZojwpdmZKx4\nBOsczmNPaTlo8zsvZCKVHIRosKAEq5d4QGaJJQUfvVJP4llDNfJ322QzEv7v\nH5jokpQ37BouaSdTJHdVbT4nCa+wEGBQv5V0zwijm1WtA1c1XtykXiEtL6v3\nyiAjAAgNbme859bTW3D92Jyvm7WCye+D3pDSYOHjmiouY1ibIb9FEczJHbom\nBY5MBCs+k4P1i4IsWiAk6uPV3CuBwUy+JEhIz2WRYqWI5EgSzj6u3Jr+f4Fw\nPwrOjeDqARdHFPOjc8Vpyg0tSYv8zlqWrI5agbo1WLvg+r6UxIPEEo0oB3WS\nsWGYo4jIyJ11FxWG9OCTZEosAZieWS8nTl3BA8OBd3LnncELyzQ9ZQggRB42\nt3E/AJSagvYn7/c0Wy08uPN8cjjCkO5Rwmg3edyzrdZPt4+J6ryTwiL3Iswl\n26tk\r\n=EGas\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n#### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.**\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n**Note: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.**\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n\n**Note: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommended to\n always include it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color)` | Sets the container fill color to the given color for an enabled button.\n`disabled-container-fill-color($color)` | Sets the container fill color to the given color for a disabled button.\n`icon-color($color)` | Sets the icon color to the given color for an enabled button.\n`disabled-icon-color($color)` | Sets the icon color to the given color for a disabled button.\n`ink-color($color)` | Sets the ink color to the given color for an enabled button, and sets the icon color to the given color unless `icon-color` is also used.\n`disabled-ink-color($color)` | Sets the ink color to the given color for a disabled button, and sets the icon color to the given color unless `icon-color` is also used.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color)` | Sets the outline color to the given color for an enabled button.\n`disabled-outline-color($color)` | Sets the outline color to the given color for a disabled button.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web button component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"@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/density":"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/button_8.0.0-canary.b87e522d2.0_1595539444821_0.9360763665158152","host":"s3://npm-registry-packages"}},"8.0.0-canary.5b3e150e5.0":{"name":"@material/button","version":"8.0.0-canary.5b3e150e5.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"950058d8ce923a5c6eeb1bd1ff2d28b2862bbe23","tarball":"https://registry.npmjs.org/@material/button/-/button-8.0.0-canary.5b3e150e5.0.tgz","fileCount":26,"integrity":"sha512-yj1rLgp3sPBQH18WrBIOBLqrT07JkE7Fsvom8gO1azevJFgH4Yn0HqFbTJOP0pbt3dkwb2xZ1oxSLwbJT/RBJQ==","signatures":[{"sig":"MEUCIBIpcsr+ltKM2wK6FA5oE2YpNuUFwyxdBOnZ/1/gkebtAiEA/MFcqz3++fqUreEYstJBAzR07Qa0LrNboICbypKiGDc=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":384487,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfGjhHCRA9TVsSAnZWagAAvswQAImmctvQnAeXYozR84yc\n4wl7FW7bk93/a3t2of6lHahHJcHwPAPHm1UMWk8v3sMu93gTqfdQY2LMH043\nn+14npOxtKNrsLK3CZaegFXk0+6dGv/qKfJzZl9DUBUNYElMLnjJM/+eWbS5\nJnEXiUvlEb25mFn8c2I9y0OXWgm51doA9U375r9Dzc1AO+n4KsXW4G5E+0ie\nBRSTAtvSsX8dj+oPu4leQ1xAPElfFvNQyCie2rIDRRHATTP3O8NAXFUm4p+w\nxwQmezd2ad/23hihTr6RDBw57IwttyQ7Ek1L8W6w8bvb8qtGuR3LcFrLBp7P\nO0rR+HyO8SpeZ6IvfaQzE5COn6hVMO2zHPd4k62AFhmUNFYCv7kC22yhiVrW\nv5/Gr6yiFurolWrTjG1u08cxKBCvqwdhqxtfglzZP9VyGyX4lOeMUHoUFYCZ\nu8VzsuXAyi3mp+7Il3H86R0WmRGrdsYXO7p+CZ1OJdIYf5pP7ZZS09KGjvDW\nsfTgkUSKatw7jTcb/qbcLYnmNkHE9flX6cm0VQT2rR6AUE4IjcVW7VgV5z6f\nfZ9CN5Pv4a1M3/cMZ0B7RiKA3EeTn9c5+aZKEJzRa6U/Lk7jYDtKVwnol33E\n74suqiRaZoJRgZgsQlyNrNdhK+uIKOHwuyY58t2v8+U6xRw5AbRkU1nBPRDn\njaTs\r\n=me71\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n#### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.**\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n**Note: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.**\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n\n**Note: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommended to\n always include it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color)` | Sets the container fill color to the given color for an enabled button.\n`disabled-container-fill-color($color)` | Sets the container fill color to the given color for a disabled button.\n`icon-color($color)` | Sets the icon color to the given color for an enabled button.\n`disabled-icon-color($color)` | Sets the icon color to the given color for a disabled button.\n`ink-color($color)` | Sets the ink color to the given color for an enabled button, and sets the icon color to the given color unless `icon-color` is also used.\n`disabled-ink-color($color)` | Sets the ink color to the given color for a disabled button, and sets the icon color to the given color unless `icon-color` is also used.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color)` | Sets the outline color to the given color for an enabled button.\n`disabled-outline-color($color)` | Sets the outline color to the given color for a disabled button.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web button component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"@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/density":"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/button_8.0.0-canary.5b3e150e5.0_1595553863214_0.519882634111895","host":"s3://npm-registry-packages"}},"8.0.0-canary.f0ae11786.0":{"name":"@material/button","version":"8.0.0-canary.f0ae11786.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"71b8a55b48843eccbd12c6c056c240b6cb42bb97","tarball":"https://registry.npmjs.org/@material/button/-/button-8.0.0-canary.f0ae11786.0.tgz","fileCount":26,"integrity":"sha512-Tm5C0zzYaSpIzrIL/ocmn1kMDNOHVo9WE+gKruBBOf9PARmGDIvyO4qTgV1zSnjudPqfQ62nVrhUzdm2JIN7Ig==","signatures":[{"sig":"MEUCIQCI0smbPyhPaTCHuvpIX3TCS+oDGAxNitBDkc0Z6HMUzQIgQczoXfXdu8pbo/7PG8w0QZTakrx7GZfzTAh2fwvuEZc=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":384055,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfGjzhCRA9TVsSAnZWagAA9gUP/1s6vf1LOGa+s+Psv0aX\nZD1pLqNKZG5KPfdqRgb0SHlWyJ7uqrmJ6wjJMhCQrtBPkzMAnnS0EMPb2KsD\n5TkzzxBiljPuGX78r7aenChgjaPtDG9KBZfXuhOkTQz8SuVQTjNv9rC9Gp+K\nTDd9b+PfmTN66u86bpM34v0lRsu1EkxGMKaLATs69ecdmAVr7R+prkAWjlEr\nZk+jfyF9bG5NgtkyWT6vqbDqEamKLcxgFEqVtKMLauyMkI8km+ipH6gLrNqn\nT84MfIdfLKHnSBedGxha0UqDfHz59wRqYJ105JcVWG47vqXvRFkLPMEj1I+o\n5PFkH/diyBOyqGiIwmnVeaxkdLq+DF4uQ+4Q3XVhuacUtfWozEe/zrv2V+FT\nb40G/2e/uN3t+CA4UlQJVCxc/MilW8rJ3zPsWrfUvEJyrOEGxk3kbjw3i/m7\n5zBjjTzFhZ/Ae+EWtRfJAfOrQ2ROZv1yrlZuhGVMbdaduT22/beF/0hOyI+8\ntM+EMVnF6TX0+LL/dAPPXWjoOkfX+g5DCwQ5/XgcIHFhSgS/Ag1JYk6qM7mx\nEAPwvmFXTgccl5zX1LUPy8pbwPoHg8WLEhh/p0UY6z/R6oxoTo+lUX+sIuhW\nRiUuFUkYRkFDpcWgLbX0zk1WZK7o/vUl1MJv0Wx0jmpnbxfu/0J2+//nPR+Z\nxd/g\r\n=Q2ya\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n#### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.**\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n**Note: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.**\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n\n**Note: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommended to\n always include it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color)` | Sets the container fill color to the given color for an enabled button.\n`disabled-container-fill-color($color)` | Sets the container fill color to the given color for a disabled button.\n`icon-color($color)` | Sets the icon color to the given color for an enabled button.\n`disabled-icon-color($color)` | Sets the icon color to the given color for a disabled button.\n`ink-color($color)` | Sets the ink color to the given color for an enabled button, and sets the icon color to the given color unless `icon-color` is also used.\n`disabled-ink-color($color)` | Sets the ink color to the given color for a disabled button, and sets the icon color to the given color unless `icon-color` is also used.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color)` | Sets the outline color to the given color for an enabled button.\n`disabled-outline-color($color)` | Sets the outline color to the given color for a disabled button.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web button component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"@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/density":"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/button_8.0.0-canary.f0ae11786.0_1595555040466_0.4205446398497239","host":"s3://npm-registry-packages"}},"8.0.0-canary.fb4ee66c0.0":{"name":"@material/button","version":"8.0.0-canary.fb4ee66c0.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"bbf39f1b55948804617eb1636fdeb49773e2cbc8","tarball":"https://registry.npmjs.org/@material/button/-/button-8.0.0-canary.fb4ee66c0.0.tgz","fileCount":26,"integrity":"sha512-NBrS1Qv/n5wvGMhXc920D9HTVKW513TZfoY17cpbD1D3mLiJ2luysROL0HvaJUP7ErT+U3Tt1ofn7SwSIm7coA==","signatures":[{"sig":"MEUCIQC4+IHp4UzVJSX41PH9mLaaOXi30yR4rm5Ap2cMnaulygIgDCTTzZu6DkmZqq9IhstIjVlxB5USiP21ND9LEEEkrKk=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":383842,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfGkM8CRA9TVsSAnZWagAAIxYQAKLHtDcebdlqvosgrzOE\nS/ToPgVM0eAPTITzWco7iCFT+XlsOJRB+R7f/e4PGVHm6D5z2EDURg1b2WhN\n9+/F1nBJruiLamAM2QCalqI5cw3IQf7P3L6/juP1+egNI8SLMO4gssS+ECXb\nZcnynJxPi89hq3ozy+BnFQs1j7y1q+1iifk8XsbXiz7zhlmQuY03gFnXbPeZ\nuELsUtIFAhDigs3ylYIkth7+vbYVNUDQ4lR1kETo3MCiW35afq5Avs4hZbIG\nclasiBZ9HBXZ4pINP2hnjR3vFHTzqH/GRxQ5iCajUh8W7rxlj7Q5QhmVOxSC\ni6EJX5dOhplatIyZBL2OFhaFbPesycJlkiQjWThgRbPYNqncC1g1Tg1s7dMj\nKn3ZxzLVu1J2qqeQWnFNv/A00Q6JzhKKueRuChQ0yDUIhAJJYO3RYxoBF5YO\nuoTzvqoFeZIMKBmbo0YadSAjYSJKiLRhMhvKaKHQLExK4KyTrXSF+vPIBa4Y\nQYJYKQLeFsdxNj2eywajhRFBhH5GWYeqkxnyP8BsvaZswbWoQpKzJUrP2FjN\nPORAJvY3UQtVYAo1FTL4XhZkcbmKarRO7jMUv56JkQ3N936gN71qBmK3DIn5\n+/deVYNBINnM3fCxeljNXLG2Xvu0o3d0vev59JMSGMz1D8SB6Zn4R6Dpbemq\neqFj\r\n=hDNJ\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n#### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.**\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n**Note: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.**\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n\n**Note: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommended to\n always include it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color)` | Sets the container fill color to the given color for an enabled button.\n`disabled-container-fill-color($color)` | Sets the container fill color to the given color for a disabled button.\n`icon-color($color)` | Sets the icon color to the given color for an enabled button.\n`disabled-icon-color($color)` | Sets the icon color to the given color for a disabled button.\n`ink-color($color)` | Sets the ink color to the given color for an enabled button, and sets the icon color to the given color unless `icon-color` is also used.\n`disabled-ink-color($color)` | Sets the ink color to the given color for a disabled button, and sets the icon color to the given color unless `icon-color` is also used.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color)` | Sets the outline color to the given color for an enabled button.\n`disabled-outline-color($color)` | Sets the outline color to the given color for a disabled button.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web button component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"@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/density":"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/button_8.0.0-canary.fb4ee66c0.0_1595556667712_0.41407243887146805","host":"s3://npm-registry-packages"}},"8.0.0-canary.5511e0aeb.0":{"name":"@material/button","version":"8.0.0-canary.5511e0aeb.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"2e529db6f2e76ddad3608f5552b9944207c950b6","tarball":"https://registry.npmjs.org/@material/button/-/button-8.0.0-canary.5511e0aeb.0.tgz","fileCount":26,"integrity":"sha512-3PXGK7WaIpy0Jgj/iPntyOQ/jxJzRWnVA7C5VbmKnsldpOOYbrZ560P0ueItq+4lLzmVcJYSd2Ag3gnLayOJcw==","signatures":[{"sig":"MEYCIQCXE58iALqiO8SmHJxU4I688MHJclc+kIQcI6B/sv9nTgIhAICt2/LYTTZ7E4fNHBKNtmk0B4gQRIL2ZrEi6iUfdXnd","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":383842,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfGxLoCRA9TVsSAnZWagAAhNEQAIfq/7Exk/buAWb9X6D1\niDMUKaP+T+lxOFrIy0/vjDejBc1sZCQXBUEMchc2u41UiGxIbxhTPMil7+VC\nSK/lQCu9EZBCWQ0cGbtcR1bSCkySRUvDDQmYPjheNhjbIR3G7IzqPS+25Yc5\n/QHHFYY5iw7b71bXLy7Cwn7jVH17cdLB3Km9sdJCm8/+dyLkXk4VZq9/ozBA\n2xGyTQIUotR/RcUizrIyM9i0b5RXRxgV6cr78QdO8hVQ0KmjRuSIhSJaTqoA\nu6Wh/uGxgpojF/VeuLaiKqtE65Zltq9ebd5R+1VCm/RYvpbryKj9gqbwHSRa\n2TDCS3Hen/cmEtWsarEmHfISs5ZndAb5wAissXOUp5494w+bo9RxgLxHvtM9\ngwktRVwzq1z+WDMPi5VGsx71ViqLQ1UTXhptKA+9qXvpRvUascA3qo7uhvfI\nbHBkgnE7K/aM4nXO10p2Xe57xHKZ3UVojL6Z8h/021kJZxIsudaBspKFFwiK\n0H/8BwY7tzDfpcLW1QRUuU3JdWO5mkNHlPhQgue2QPEilC6gxkpbPW/Z1ny+\nwrdoltlmFB9aL3FuFCTYVX1b2W2IpBzxF3vvC7lJ3UqnbAa3kNcokc5bJ4Mg\nn+rUUDc5hbxKZicvqgMjcYVmMn581PTdzrfjthRtFg/NUQ5I+LZYMYXhfBry\n4EUP\r\n=cPIx\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n#### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.**\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n**Note: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.**\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n\n**Note: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommended to\n always include it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color)` | Sets the container fill color to the given color for an enabled button.\n`disabled-container-fill-color($color)` | Sets the container fill color to the given color for a disabled button.\n`icon-color($color)` | Sets the icon color to the given color for an enabled button.\n`disabled-icon-color($color)` | Sets the icon color to the given color for a disabled button.\n`ink-color($color)` | Sets the ink color to the given color for an enabled button, and sets the icon color to the given color unless `icon-color` is also used.\n`disabled-ink-color($color)` | Sets the ink color to the given color for a disabled button, and sets the icon color to the given color unless `icon-color` is also used.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color)` | Sets the outline color to the given color for an enabled button.\n`disabled-outline-color($color)` | Sets the outline color to the given color for a disabled button.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web button component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"@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/density":"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/button_8.0.0-canary.5511e0aeb.0_1595609831935_0.5510980328863744","host":"s3://npm-registry-packages"}},"8.0.0-canary.8388a9bf6.0":{"name":"@material/button","version":"8.0.0-canary.8388a9bf6.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"ce5227c216cf587136709d2eb18fe656714f8577","tarball":"https://registry.npmjs.org/@material/button/-/button-8.0.0-canary.8388a9bf6.0.tgz","fileCount":26,"integrity":"sha512-zDrfVEdb+uoZ5w76rpX0b23ptyDUt8ajcuDzz5fBDLXmbpyk4A/n9541aXKaZhXg1q3ve2MnUa6g0l1lcLfGHw==","signatures":[{"sig":"MEQCIAY0Bqe2QxwjjsTUO7z8TrB3mZ19gIoRDqUZpSoQCcL8AiAXCW5B6Xv15N/RUk9LOzNnUPULCleVaJF8T7Y044G8Yw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":383842,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfG0D3CRA9TVsSAnZWagAANZEP/iTog6ZkCIO1NL5LpQhc\njVoPD2WetZORYSJMhPre6a71FA6lkr+FEv3OxRUL37WVa4txs5BT+pUGR9aT\ng6AWY6CRVxw1uSzj4VecV2CIIlgIPfU+3rPMXjRHmaFfZt7gjmXVLu3c7CyZ\n9ndJwH4rR/bytHBKKYwLn3KqGSLu/ozDbQIcMTJNRxrv8opTSa6rqo41SPHu\neGjqJGaiwYs/yIsZ5LHx3oEA+Uwg8jh3SwkaFtZ05ueWPl00zeycHv2KrxoH\ndCcGhROl3Aud8sIovGqJqHXQpCBUuMgFzPhxEsyrPvrjidIfAV7YLYAmsYIJ\nBCKOVQiCKHpFJvLyde4plUi7Lo5b35euWU25+l7flsd+59CtGmUdPAjwnUjl\nbYTqv9dGy8bV+JojbRUhadBJ5ekgXvOEGV46l41gB2OS10EcGY5OGFrx6U1Y\nNXQg30yau33XPYw1Hb39w39GNmlzEazeLI6Alfrc874TPc3o8HmVn8RHCV49\nLgyZzJXFxG1VE8dASrcxTBwRXAHNFIIzb0DkrBwTTYpYm3jBLusHSMSB8nf0\nxnbMS9Paozf1nBNos8MfCoUwRy7FC6jBsgH5c9Dod2+Wl8AnbRs2NmuiV/cQ\nswypxYvucBMN/BzQd+TVVu4QUecI7ljVYyaQ6QI+yvlvX3YvlNu2ERQbziYw\n2r31\r\n=Hjtj\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n#### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.**\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n**Note: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.**\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n\n**Note: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommended to\n always include it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color)` | Sets the container fill color to the given color for an enabled button.\n`disabled-container-fill-color($color)` | Sets the container fill color to the given color for a disabled button.\n`icon-color($color)` | Sets the icon color to the given color for an enabled button.\n`disabled-icon-color($color)` | Sets the icon color to the given color for a disabled button.\n`ink-color($color)` | Sets the ink color to the given color for an enabled button, and sets the icon color to the given color unless `icon-color` is also used.\n`disabled-ink-color($color)` | Sets the ink color to the given color for a disabled button, and sets the icon color to the given color unless `icon-color` is also used.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color)` | Sets the outline color to the given color for an enabled button.\n`disabled-outline-color($color)` | Sets the outline color to the given color for a disabled button.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web button component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"@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/density":"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/button_8.0.0-canary.8388a9bf6.0_1595621622951_0.22738480481649925","host":"s3://npm-registry-packages"}},"8.0.0-canary.ac405eae1.0":{"name":"@material/button","version":"8.0.0-canary.ac405eae1.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"536b26e3fafd2ede6b6d9c621a9836eddc957f4c","tarball":"https://registry.npmjs.org/@material/button/-/button-8.0.0-canary.ac405eae1.0.tgz","fileCount":26,"integrity":"sha512-0uJrb3V80KCSu7QAr4fJmn3zeXzyK4zkciWRRk6s40kSSwUpTyDDow8NGpMRGxEyRtMJLoWLFoX79TuVfNNcqA==","signatures":[{"sig":"MEYCIQCbdtU0Q5prsTrnlJR4jMEFKaUVgB9ocTOiOONp6h7V7AIhAMxUJRcC12ibN2CKxKaJAedApT/0x1oQ2A5md0sMXMfZ","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":383842,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfHu2UCRA9TVsSAnZWagAABFoP/AmiuayWdZgjg0xgyCsl\nkbkTyXe0GwR7ZhLZN09ykgxdL/cf9XVlsFsWVUL72Cqj8bMRr7pkBd/E0hhi\nmPugg6n7UrwPjvPYkDzG06EwZqEWMUpDlvq/0+RQrIgN71lP9T5z493p2Iqw\nWchQpdRKSGmoTjrgVL72ZbSpJ7D3bX3BaqgPKsqiJe0C/zGAbTXMYJkgBBzj\nzUnJpWe5GEEMVBRKIHsnY3uF/cdJqJ7vm2nYeYHWkmnVk34e92J4gragntou\ngF15rK5mKB8iDvxW+NTCwxAoWqVnXbVch14HTBMt1yIqigI0pMBzlB3xqTlZ\neiNeFeM0gQ9FmXSBepVas2lgDckBTh7Mu2e97FhlDClD46NfoBBFe0P0xmgR\n2Fdw2YvaCVVin7Ncbd6I0cF5oQmotbW8ThLWsMrrcvFBf4+fy95lQUqvAZjB\n3Eist/vSKIvhnKedU0G7gxPUpBf9N6Vpyin0Dbpa/IMUN34rX8+SSNbw1g6Y\nCIfKLOR/itlG9JZRp9GZDKFLTFvjpA0SOt9c318+BThxpBuIZDCxpguAAXZA\nKlzmmJFOGmk9KZIXdtuCXGM+eqQR9zPWD3sdZQwJbxkSsnQ/xztm+M/SNmZB\nkJzYIcBrcoA393ZjwSrNR96aTV9L9AGQu1Dvr8+PmLe0+Xp4gvzk4Vev2DDs\nybKf\r\n=nDiG\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n#### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.**\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n**Note: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.**\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n\n**Note: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommended to\n always include it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color)` | Sets the container fill color to the given color for an enabled button.\n`disabled-container-fill-color($color)` | Sets the container fill color to the given color for a disabled button.\n`icon-color($color)` | Sets the icon color to the given color for an enabled button.\n`disabled-icon-color($color)` | Sets the icon color to the given color for a disabled button.\n`ink-color($color)` | Sets the ink color to the given color for an enabled button, and sets the icon color to the given color unless `icon-color` is also used.\n`disabled-ink-color($color)` | Sets the ink color to the given color for a disabled button, and sets the icon color to the given color unless `icon-color` is also used.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color)` | Sets the outline color to the given color for an enabled button.\n`disabled-outline-color($color)` | Sets the outline color to the given color for a disabled button.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web button component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"@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/density":"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/button_8.0.0-canary.ac405eae1.0_1595862419626_0.9315440488190212","host":"s3://npm-registry-packages"}},"8.0.0-canary.75553837c.0":{"name":"@material/button","version":"8.0.0-canary.75553837c.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"1846ec947f278d8eb2fc982b2cddcb5ccb6cffba","tarball":"https://registry.npmjs.org/@material/button/-/button-8.0.0-canary.75553837c.0.tgz","fileCount":26,"integrity":"sha512-24ONGMFCvDOk+a/Ld7X6dMOPAHi/0t3nmlgugH6A77ojabOqNyzSSPNBVpNmhGGDxUFFif40QfPxaaC49FSDsg==","signatures":[{"sig":"MEYCIQCljyuxoqs6nOgDFf4WZlJHDkClp2OMR/WAfBv8xvYcNgIhANjAqh3q5YKDZVgGnA5Dqg9ZFxg2GTTDwf227MlhlhpF","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":383842,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfHu75CRA9TVsSAnZWagAA4GgP/jL7Fz9DrULLazIpN+Oy\nzI1GIvxS+SUuvPkbKy3Tljl7DDDNd9uFaeSWAGI28xmY8PxeLaaXcB96dC1V\nyWlNBC79yLsrQ+ucXDR0I9GbyXbqH8o4med8LQpQ4b+xunHT6HgkM8kgJ2/h\nbGCLRpkFaOZGkSWrU81vOkPdeLcU6Y9FkDnMHUkHNU2Cj/tbIgGbUG1+MYO6\nhDkaJwOiBVpqrslFT8gphZriP3jW6GqK9fxV24r+wZht5ycshNxvHc622+sz\nLqh/hlCFup4FjKs2cBVhKBWULWix7QihIIIGolmCbbgT5ciKqJwM8zNzmS/t\naRrFEmVxjcB1XxYx6ndOjnauQ6yy9hnQ4Q3LeE0X3KsSvnDwLnKBd4CXv0Kw\nBVt0F/TbKA3hdiIn+WKlsEmBuBLjHpZV5WbW2SzFUcluE+TDqpOW5is2nrpy\n0iJaISeesWJCqYDdvMhk+CSAf2+7bf/PdU8Ht19qIjP7iMcRe391F1te3Jli\nGiWtxCW3j1aHFp8Yeu570mXcpjHP7/eJmfRF86j2htQUZz6CjTFAhxDQb5PL\nkSjS8Ljd9iyDhfI/qRa95phA4luLKxnK+lcEB1KRxezIBe2QCHuJ2l1Rx5lN\noi1g2SYMOQ8+Cd0a7jhA91sGbHLfnwZbggMe+8mNrWWuOh0I0IU25cM8H+bJ\n+44D\r\n=xpfs\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n#### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.**\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n**Note: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.**\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n\n**Note: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommended to\n always include it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color)` | Sets the container fill color to the given color for an enabled button.\n`disabled-container-fill-color($color)` | Sets the container fill color to the given color for a disabled button.\n`icon-color($color)` | Sets the icon color to the given color for an enabled button.\n`disabled-icon-color($color)` | Sets the icon color to the given color for a disabled button.\n`ink-color($color)` | Sets the ink color to the given color for an enabled button, and sets the icon color to the given color unless `icon-color` is also used.\n`disabled-ink-color($color)` | Sets the ink color to the given color for a disabled button, and sets the icon color to the given color unless `icon-color` is also used.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color)` | Sets the outline color to the given color for an enabled button.\n`disabled-outline-color($color)` | Sets the outline color to the given color for a disabled button.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web button component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"@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/density":"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/button_8.0.0-canary.75553837c.0_1595862776580_0.6505229053798631","host":"s3://npm-registry-packages"}},"8.0.0-canary.b96fbfc7a.0":{"name":"@material/button","version":"8.0.0-canary.b96fbfc7a.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"66f9d7e0eacb45ad96e8e11c724827c5192b229c","tarball":"https://registry.npmjs.org/@material/button/-/button-8.0.0-canary.b96fbfc7a.0.tgz","fileCount":26,"integrity":"sha512-SODK52DpOlu4VmCvwROMnHfJcRYB1x2Ar9QDEfulcRWftoEBNrjhFZxp2mGU1qjZafGlfSzB72H6YMieEB+iNg==","signatures":[{"sig":"MEYCIQC21/eyapoaUC5nnWim9U15uglibp8lthmL6skXUM7qsgIhALVI3WpdB0xzrhIP+6/MIAW8vcut+V2PQ1AB8/+loAai","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":383842,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfHvT3CRA9TVsSAnZWagAAV8gQAJN86wh2Iwmizpvonpnv\nVsH+z0EBa0ZLvmJKJI5TufAj8x7jn2PD1NTfYgPwq4G5cqA2joCpHZa/daIT\ngWVpfn5/jSd4DX2lX4W6TFaq9qTp+I3l+lvTE9MBpKmua17Q9RsZeb9EmJRX\n+tHE4eAUjfHYyZpgU+2WVWFTNvturMtafgBWQnFjED73PkfBgI/dYnkiLmYO\nQEcfqOrQle4gs4hG4Y9mgClb2j/EO9Dg2NZhhzINo27N9knqK2+VU6b+CV3v\nUBL4fG609qj/+IOsp7lNTlY7hJg+y3pzT8S15Wi5J1y020O5yVFw6ZS3qqHD\nahLKLCYlGQbPFRv2WU4xa0dDLEz9kyu/Xjz5mqmA0wA+Dq4zdfWW2syD7S3g\n37npyXRq6J/VQqmVLda6pB3aPTZbF7PPgp7/SLlO0UezFxP4DyD0ZJyCc4+o\nZ663K5rNoMtqR+M5mZixO/lSd7g6RpgsodWjn+7nMkxSJX880fCcgxdo2EEd\nZ2k+qkgvQh2BhHJIrjlIaSqhDHkdolbBm/v+1D6Fffj4ilQKf41AMXuFb8PH\nciROqt0UWg8wsDlZ5y46aDVuPqfacRQAcxRtys1i1nfUZrFCiErFbNRqDeT1\n2B69OJeFbZc58wbfuQ9jVdYmIZ2n6PJckc7DgbYj0T4a6NxfVncOfAvPLtvd\ntwvK\r\n=i2Ix\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n#### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.**\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n**Note: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.**\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n\n**Note: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommended to\n always include it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color)` | Sets the container fill color to the given color for an enabled button.\n`disabled-container-fill-color($color)` | Sets the container fill color to the given color for a disabled button.\n`icon-color($color)` | Sets the icon color to the given color for an enabled button.\n`disabled-icon-color($color)` | Sets the icon color to the given color for a disabled button.\n`ink-color($color)` | Sets the ink color to the given color for an enabled button, and sets the icon color to the given color unless `icon-color` is also used.\n`disabled-ink-color($color)` | Sets the ink color to the given color for a disabled button, and sets the icon color to the given color unless `icon-color` is also used.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color)` | Sets the outline color to the given color for an enabled button.\n`disabled-outline-color($color)` | Sets the outline color to the given color for a disabled button.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web button component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"@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/density":"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/button_8.0.0-canary.b96fbfc7a.0_1595864311476_0.5448565109386074","host":"s3://npm-registry-packages"}},"8.0.0-canary.61f1a8d85.0":{"name":"@material/button","version":"8.0.0-canary.61f1a8d85.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"ff3c4993c73b40de24729d9141443e9a9e6867f4","tarball":"https://registry.npmjs.org/@material/button/-/button-8.0.0-canary.61f1a8d85.0.tgz","fileCount":26,"integrity":"sha512-SvrMJiESilp0+UxX15VlM4U/+31DdS9rCOp4egnsGw6Z0ck1Pmr0ZRPno9Zy36McAhCwMD4zliGfrUPJm5Npqg==","signatures":[{"sig":"MEUCIDAoVAb0MUw7+q9zfAVKbaGmH1u7WppzwTi3bIK03PnpAiEAsZHJQZ82PfEAMFg/TxtdeIjUg6NqpPwNgMN9amIpfKA=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":383842,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfHvcVCRA9TVsSAnZWagAAmgQP/Ri2VbCjoKImTtHpNkXI\n1gZ9VAPFPvyy/Sl1tYlvr4K5wT9Cx/C8MtYSp2yyoaJtDLFStC63hqGCZBDC\nawOmaVo7CSpicY2OdBnk1RzWQVQnWeHIfeZCT5CXTMIwh93Pb2VT1JlTjuY8\nNTyQs5wbDvw4rmDVLpzjVKJ68i8Uz5pwRRqPlrSeSr55WQqEp5mabQhHuXKC\nTtCfRQxP3hlHE4h/dTMdCdH6NU7o71ISzzF8ivoV681RnBAD4Nrt5M4XvvbG\nzZ3Y72N8P6JF9FKPuusxAKDImIY4pzGGswKJyQ4OOKTTTh8XFfZprDC/5z99\n9XbZ1vGj250I/ZoFsTR/Owhn+LUZv89lBd4XPXJuND94yHrYnEUJkd79vdlJ\nNFPrIF0mnkvCHTGHB2Y4aoRKTNTspya3ZdBW5GZ+iN+/Njw3IOBvFD7W7Ipw\nBteoNwuDxAh7ZrHp9TLGSRJ4Ru/Q8Qn6O0u+Xtsg/uAYK6LQQY3l5MpLoGOB\nivT2FJGjL1VSuE7yxXIH0GYlwCf7vy3tieXKu3lYyTphhEN1Rn2+GlkhIcsa\nj2Gl4SSQezm+eHyQ+MnWjByVbAaP2fiqSEPlc8TQkt+DzH+I2bDShkY1tSkz\n+8EADGieqC7cO6omoLGMmGadwvbuxWZWqHGNQ7Lb0kYEiMKiX3o03PFeL6ij\nfhM1\r\n=BtkD\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n#### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.**\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n**Note: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.**\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n\n**Note: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommended to\n always include it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color)` | Sets the container fill color to the given color for an enabled button.\n`disabled-container-fill-color($color)` | Sets the container fill color to the given color for a disabled button.\n`icon-color($color)` | Sets the icon color to the given color for an enabled button.\n`disabled-icon-color($color)` | Sets the icon color to the given color for a disabled button.\n`ink-color($color)` | Sets the ink color to the given color for an enabled button, and sets the icon color to the given color unless `icon-color` is also used.\n`disabled-ink-color($color)` | Sets the ink color to the given color for a disabled button, and sets the icon color to the given color unless `icon-color` is also used.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color)` | Sets the outline color to the given color for an enabled button.\n`disabled-outline-color($color)` | Sets the outline color to the given color for a disabled button.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web button component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"@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/density":"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/button_8.0.0-canary.61f1a8d85.0_1595864852824_0.04054697840820243","host":"s3://npm-registry-packages"}},"8.0.0-canary.81dc33377.0":{"name":"@material/button","version":"8.0.0-canary.81dc33377.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"272e720a75f5028f05239ad6539a263b18c0c033","tarball":"https://registry.npmjs.org/@material/button/-/button-8.0.0-canary.81dc33377.0.tgz","fileCount":26,"integrity":"sha512-gBkOiizvuPyykU51DROhz2Fvt/V2eOtBVu4oM1NGQ+9dEi8tMjLS3LEZL4ctBKzYT4R741LhQJwR56S4teedTA==","signatures":[{"sig":"MEUCIH/BjkWC+5HmbMuCQdRGZmWeoYwk/pISxTtnzQRJuvxSAiEAxiMh4kfcBezWXbHonruGVbLz77RLCwOLu7nVLfkcp3c=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":383842,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfHvntCRA9TVsSAnZWagAAFmsP/ROfDtK3ifSy/CvaNB/t\nC/4Ui2m8YON8Lz7wnuVpIaPx9aOZy8FuCbLaxYeJ8NCGC8X0OXp+3KNT2IBf\n0+knondSYsljx9WA5D1zyFjAKlQtG1+ckFB1azN/B1wBsQ+wnVkwMfe4kybh\nboSBOL3HMR9YQbeLnSY7sAXMspRbmVSoagitLq/dzRLbWE0Exg5FSTM0Umbq\n4ZBCTEvDuuv4qlZAfGG0SaKMn0q5rzlIp8WHKW7DjmIAxBI0+bHzAalTHnil\nqBFO3aNTL4VseM+Nq7/AcAcamf5QuXaRB3ZYr5HXzK420GkCy6tIfxUYC1fb\nkTyRo31tHPrGlZhYT4XuMRlkH79v0yihDQpqooss8dSELxhkhyQscvwYfLu5\nCJkNspF5p+PqbPuqmQ6qyXiVwnk30RilHGHGaSgp6BO8AO/WdjAWfnhaqyqW\nA75eGHuDNL1+lnbj1f27g/lN9T5vpP+cZ5lsLeix6j6n8kb+qhUqJ5T+MqoH\nONvopD1YYGQKI1HQeED6/RnbKOtTOblvAlz4XRdAOMOlrleQcuFWjJQuDcF6\n5V9K0Kkkbkfhjt3jgRSwhL0FmTetJR1nGN/fs5cDGC0iBjUxtfOPsn1+qokI\nzVB+fhDenrroSfY6Dw+JBR6u4rtJgTKgm0X7L2g5p2AjH+z/sdu42y8zcEGM\nB29v\r\n=fZZ7\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n#### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.**\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n**Note: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.**\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n\n**Note: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommended to\n always include it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color)` | Sets the container fill color to the given color for an enabled button.\n`disabled-container-fill-color($color)` | Sets the container fill color to the given color for a disabled button.\n`icon-color($color)` | Sets the icon color to the given color for an enabled button.\n`disabled-icon-color($color)` | Sets the icon color to the given color for a disabled button.\n`ink-color($color)` | Sets the ink color to the given color for an enabled button, and sets the icon color to the given color unless `icon-color` is also used.\n`disabled-ink-color($color)` | Sets the ink color to the given color for a disabled button, and sets the icon color to the given color unless `icon-color` is also used.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color)` | Sets the outline color to the given color for an enabled button.\n`disabled-outline-color($color)` | Sets the outline color to the given color for a disabled button.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web button component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"@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/density":"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/button_8.0.0-canary.81dc33377.0_1595865581070_0.28452040199171535","host":"s3://npm-registry-packages"}},"8.0.0-canary.ffd9ede58.0":{"name":"@material/button","version":"8.0.0-canary.ffd9ede58.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"6ca1567549cd6822f1f82d3f1d249d83a0eb5604","tarball":"https://registry.npmjs.org/@material/button/-/button-8.0.0-canary.ffd9ede58.0.tgz","fileCount":26,"integrity":"sha512-QuBl72FZ9KOFGJordl/J5H3+DlJ0ge6PYcf319Lawg6kh7zYACYHWcsw8dJTb9i65x4DNg6w3cDMFNZQ8j2lgA==","signatures":[{"sig":"MEYCIQD6XyKbTMMTBxyl6Ohv2wSzYni3Ie2iClUxFwKK9Fd6owIhAL+NMCee2/TyShnldJFZ63QtiBxlJglBgBkQMhpGvGNR","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":387236,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfHwG8CRA9TVsSAnZWagAAtrUP/0uT4qoFiW/cAZ4COhTa\nc1SJAMqyrT+O7RuhqsNc49Z+tN5TgsJlDmMa43yq8eZjqstgHxYyZMkZeNWv\nvYYexA/Q74GtTqdGSNt+hsb8wWbmSd2REV+DYcZZ2IKqyO9RaxIvKEHADqBv\nRQ6tAfNUie2tC9qkN2d+TM2ufXjGxMZlycyJ3POomBtEh+qaEdbgHzR/dd7l\nLHAAqZMuRoP3kVZOoiUSGN8Yh+/ix6aqRQ+gckOjE4wGnFdjjYuBxbWkIHT9\nzDeT5KEN9bqoS+yx5JNoQ6B6uOtNJaOJYN0JFDC1eNxB74xsFalXpXy4kiat\n4maAveue3h1IgAg5JjbHo2MwirVdLeNCsiryNCeKU6dER7uVXoRw/TWarb82\nXqN2eTTkMpWxJ1VhseY00gMyTdVhwgTX2wdBl0RTiYP8KUfOZr1HU3NQE3Cx\neF8a5oJJGCDDuZLX9o8ewo+13IuXTjlZl6hwyjz6k57qCJ4zCQBbhIjh4f1J\n6V+R6h7PGtrUhAwHlLHdEoRJaZJwZmJdhlA/gvWe7spI/jXIU4XF4nCxAHda\nY65KyXaWVURM4i+4p0EmXkUi3KPkA4e18uHkMx8Ao08FPdhPLO/gHqI7FmGu\n+/YFjZEctaJvZPetIrVM1ZiMjix4D9iFu920yCHwR9tY1FReDCATYckGNQD2\nATs1\r\n=MYV0\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n#### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.**\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n**Note: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.**\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n\n**Note: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommended to\n always include it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color)` | Sets the container fill color to the given color for an enabled button.\n`disabled-container-fill-color($color)` | Sets the container fill color to the given color for a disabled button.\n`icon-color($color)` | Sets the icon color to the given color for an enabled button.\n`disabled-icon-color($color)` | Sets the icon color to the given color for a disabled button.\n`ink-color($color)` | Sets the ink color to the given color for an enabled button, and sets the icon color to the given color unless `icon-color` is also used.\n`disabled-ink-color($color)` | Sets the ink color to the given color for a disabled button, and sets the icon color to the given color unless `icon-color` is also used.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color)` | Sets the outline color to the given color for an enabled button.\n`disabled-outline-color($color)` | Sets the outline color to the given color for a disabled button.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web button component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"@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/density":"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/button_8.0.0-canary.ffd9ede58.0_1595867579749_0.7859132018543848","host":"s3://npm-registry-packages"}},"8.0.0-canary.52dc55acf.0":{"name":"@material/button","version":"8.0.0-canary.52dc55acf.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"27cd91d12de65b8e1b13de59f4b91f07dd4185c8","tarball":"https://registry.npmjs.org/@material/button/-/button-8.0.0-canary.52dc55acf.0.tgz","fileCount":26,"integrity":"sha512-5FccaoUQsg6NiUlf1SbuSB4y5dX6gdjd0y7KIiOQmd6rTrKYVMC0NI9zUYNC3aAioJm+O2dRJF4FaIXqwp1nYA==","signatures":[{"sig":"MEUCIQDGBwVikPYvuszTuuJdVlGDt0XT9/b29BrI/plIO1AX0QIgBZYx+x0O1zFHLKsTvTkV0eZgAMOXBSWu92e6cvWj45w=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":384721,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfHwoqCRA9TVsSAnZWagAAtEIQAJnj/fa9uxnuDH5aihR/\ntjAp/E6rdgOgQ6snzk46XJnf36sobQy9MqrMGf1yfJa7PCY6WJmfY0ylcmWN\nSxrpzKkojYaIvet+rHc8G0d7q0vEiHSN8U0bO5ZRQmJunLVuNsW1vA4M1Hdn\nH9Clrk7fvy2rw7HiwtdKKHsEevSd+iWbzn19exmD5zRJP2UtQ0k/B14YM0yA\nGtKOT8vCQBcDTbHjnM0FqUwsuRAS0p19ApSb4BbRcle2SHcmjpV1TsvioCTw\nK1xTarSU5lD502zqMsZmsG8/mjov7UR3dS9f3NAa7xgB+QgmAEcSI8aRhOsv\nHfZd1/Mrp4/7QQY9U/zoNzCDj8vz2yiCY0K57VsriC0Gkf64FiJ3LS3of0QZ\nukUNhG9UBipXHvkCL49id/qih3fURLM7sQmyYmLmcCCdeA4LSglgR8ATyffd\nwRFPixUDRhIxAnrAMF7nIP8IKNObaE5rd5B8D+XpMlrKQ7Ez7xY+FQ/Hif6e\nqNAop11rqCi77+rl1Qu2Mb2DL6RsJtQNDZqGUpdduH+3r71riFaH3LHFopT8\n0zeoHTGsQ3+DsHFPB2PT5lYEBInrZVP1VoSYxQKKTdJgbrFHQ/ZAgoNH70Xw\nx3bvtYVBr/nZNsNPuYijzsCmziBpPZ73P9n1TqfyVswB5njsmzfUbCMnyKXN\nsEiq\r\n=xk6l\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n#### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.**\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n**Note: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.**\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n\n**Note: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommended to\n always include it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color)` | Sets the container fill color to the given color for an enabled button.\n`disabled-container-fill-color($color)` | Sets the container fill color to the given color for a disabled button.\n`icon-color($color)` | Sets the icon color to the given color for an enabled button.\n`disabled-icon-color($color)` | Sets the icon color to the given color for a disabled button.\n`ink-color($color)` | Sets the ink color to the given color for an enabled button, and sets the icon color to the given color unless `icon-color` is also used.\n`disabled-ink-color($color)` | Sets the ink color to the given color for a disabled button, and sets the icon color to the given color unless `icon-color` is also used.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color)` | Sets the outline color to the given color for an enabled button.\n`disabled-outline-color($color)` | Sets the outline color to the given color for a disabled button.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web button component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"@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/density":"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/button_8.0.0-canary.52dc55acf.0_1595869738325_0.7009395225929285","host":"s3://npm-registry-packages"}},"8.0.0-canary.d4274ff05.0":{"name":"@material/button","version":"8.0.0-canary.d4274ff05.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"6934b066925dc66bf896e3e07c1910a3c28ee2e2","tarball":"https://registry.npmjs.org/@material/button/-/button-8.0.0-canary.d4274ff05.0.tgz","fileCount":26,"integrity":"sha512-swefccFbzjuJSRrShdiBvvr2I+3Cz6mnespTJiFSVInrMrih6OXCnZKksBrtSZw17Seq43ql4ta3O5bxGYvOtA==","signatures":[{"sig":"MEYCIQDI//AmccMqoTA/pro0DJ0e1gKUO0aLMFSGruOVzUEv5QIhAP85zzyKA4kkq12zlqc2PiA6y3cRGixmLdIxwcdAdO7P","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":384671,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfHzBiCRA9TVsSAnZWagAAK/8P/0S6btIdtHjSbilm5o5s\nagNPLbmTWGCNPBhRuqbzgQDi7fXJL10TcrCIhWFFLWXsKEBIqGMx348ULseS\nxZM1QcOQtxg7S7nIJpFenODFgXuAEVQWlQoGeGB0AVSbeyQ69UvC0XY7EuuP\nWHtBmuUy8zQTRaX0lPwgeszjGeFABINsVjrpJiaF9gVsGAQX96TKKZBAFlg2\njHnKEjNnfZc448loi8OJth9I9Q4KwqRudMyPvoDHj5IdNF6cc7Al0bq0Vj4W\nwyehBUzfCfyYEYk4LPF6bDhnO362xt+nXX5EC/uQek0CwuuRxaF9Zd7cLzE4\nmZSgRIRUeCZNhgsmkWOQPCP/X+lmYwJ6KZh1vzjfPoUJL8sqKsud+8sEebpn\nqPqTBTQpGSSj382dc+Z+Ho/DQQFP4fDIpRzDaWf6YsaFMBJbAuX23CCulHO4\nD8Hx0dcwz3MYz83dRAetFUdA6zXZ+3MI/Oio2uX/pyIwo/gy+hy8uTm55mct\n7KUt2/gSUURp6KnQ2n99oCc/NAoDETCqIqxRL1VoVhUGWeJ5QB/2HD03oiYp\n5OJ31KBvp7pRUfY2HwPnHjnq2lvrotABXdWtiUXwN8Cr/Rf08XOkhccTTO/x\nv0wLOWpwWpM0Gljd7nfNnOE2QZDJiTaqqCOy3s+VdFmqzs4d5VsOE+clojAF\n7lq6\r\n=yYrp\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n#### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.**\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n**Note: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.**\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n\n**Note: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommended to\n always include it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color)` | Sets the container fill color to the given color for an enabled button.\n`disabled-container-fill-color($color)` | Sets the container fill color to the given color for a disabled button.\n`icon-color($color)` | Sets the icon color to the given color for an enabled button.\n`disabled-icon-color($color)` | Sets the icon color to the given color for a disabled button.\n`ink-color($color)` | Sets the ink color to the given color for an enabled button, and sets the icon color to the given color unless `icon-color` is also used.\n`disabled-ink-color($color)` | Sets the ink color to the given color for a disabled button, and sets the icon color to the given color unless `icon-color` is also used.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color)` | Sets the outline color to the given color for an enabled button.\n`disabled-outline-color($color)` | Sets the outline color to the given color for a disabled button.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web button component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"@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/density":"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/button_8.0.0-canary.d4274ff05.0_1595879521773_0.19676301977997634","host":"s3://npm-registry-packages"}},"8.0.0-canary.b82d0696d.0":{"name":"@material/button","version":"8.0.0-canary.b82d0696d.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"72ee4cff20bb639a01e405040554e3fedc997b7b","tarball":"https://registry.npmjs.org/@material/button/-/button-8.0.0-canary.b82d0696d.0.tgz","fileCount":26,"integrity":"sha512-ej44Sq1kzsCMZBGTOpErrcjqlTsierYTUPqa/i0tHM/R+P2lw0OkG0f/s93P6Mbh1VDJLPwplB9ROzQOFwnqwg==","signatures":[{"sig":"MEUCIGYxcycwoKWgdZ+hEaFHCpMb46g93h4tkw5sP3iGMfn1AiEAyY/BdPUq2d0Gjyk4uYNzELWaazvlsOLw9PkahJARNE4=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":384671,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfHzHsCRA9TVsSAnZWagAARk8P+wfGMnMWIIXFWvg2Qdk+\nmBSpkEY6kXs5OCbMXODun9H00MCg3fnv3AOt0Aj5J4jT0DO1tfg4Ot2V4Hgs\naeIvd7k+dOXkIt4w8tLS+H57P/jqR/cTL+yrFsXMbXxRSkinVMh98gcCL+VK\nwqrODYhfmlfzReXiS5nNtspotO2619vC5+wdKxMaT8GXz5YrgrfDn0OJx03m\nU95ED6cP119uG898K1LfJZv6D0gwRELEp9vXXQbygmym+V71mBe+oZtavrBx\nrS1LkegX3XI6Rw2z3T/Ybo7vmDVuGBzaYLUFYUkwZXTyr+LKCaZzJnmlGNRv\nlyU3WFUR9axoMj12bXQkUzllsJFm+Bow3jtzucR58qXYSmuQkc0z/zHYJKNf\nx1qWavYz4u5K4c08PY7kNQHDbKK/a8AKL4cSaVbfIVMZl65E23URqeWk6S1E\nnvMU7p0VCmSz0IUWabyjUfhftvxijct186J7CupaVojoz4xjC/SvlG0mZbut\nOeYY/Cg3wF4oJv2ZfhBN7PaN8Eo/yDs9FYwdtvDvD2y/1rzirJYujkzWJXqo\nP9GBewIcJtuuXQTMZabLKecpyRPWPil/gEHSm6VE9vmQ9l0AfMat5cYzYYW0\n6YSi2Lo3wX46TlBA59B4+nDGhm4ts9KtNnVL6/1Te7rOTBk3hYHxJv/8PbFy\n2crB\r\n=CPlj\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n#### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.**\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n**Note: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.**\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n\n**Note: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommended to\n always include it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color)` | Sets the container fill color to the given color for an enabled button.\n`disabled-container-fill-color($color)` | Sets the container fill color to the given color for a disabled button.\n`icon-color($color)` | Sets the icon color to the given color for an enabled button.\n`disabled-icon-color($color)` | Sets the icon color to the given color for a disabled button.\n`ink-color($color)` | Sets the ink color to the given color for an enabled button, and sets the icon color to the given color unless `icon-color` is also used.\n`disabled-ink-color($color)` | Sets the ink color to the given color for a disabled button, and sets the icon color to the given color unless `icon-color` is also used.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color)` | Sets the outline color to the given color for an enabled button.\n`disabled-outline-color($color)` | Sets the outline color to the given color for a disabled button.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web button component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"@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/density":"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/button_8.0.0-canary.b82d0696d.0_1595879915546_0.22249377470490206","host":"s3://npm-registry-packages"}},"8.0.0-canary.c2852000d.0":{"name":"@material/button","version":"8.0.0-canary.c2852000d.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"9585ed60bbf018265e185d7c62ba737d3883dba7","tarball":"https://registry.npmjs.org/@material/button/-/button-8.0.0-canary.c2852000d.0.tgz","fileCount":26,"integrity":"sha512-dZbVODZB/NsyQgO8JSBakz/0UdwkXRz/zj8NS/WHiR6NCGBdoXI/Pwlfv7TU7d0IdUiQgaoSeG30MZnO3mAk0g==","signatures":[{"sig":"MEUCIFjF1F2pHFrhkAmBMuZ50YK7WN8zPjRsWhxgT+hvsnifAiEAnMYCxCUtarN110IoSFezwP0XFi+1lTamzGd20/D2oMg=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":384671,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfH0AICRA9TVsSAnZWagAASwsP/iyFBebGDfTWFuh/27nA\nrGFW14VAdnVNTJrcQjJTdBDnTA7gar2hoY7xqYOMjQGdNRkeTNddTRljPdJ8\nelkgPGnS7UEVdHZRgnwXdytEym4TP8kDGneiWMsEtt+KSqbUjUjudCPspE73\ngFz7Mc3Whz2G7in6Jm26NE14n+CSU9cgvWnD8R3LRNPUocQIz7UaVF5i0DzQ\nF5Vt++CFDS5BjDBh2xzz6oDjwBN833brMwML2vR9IvbpQWZkO6NDnkyol66N\nR3qGTU0g3FcyisENDp3KcHhsMHjwVXMwuRgUk4AKhT3fYDCfovxJNJgmwLUp\nTAT3sptlj3Oufg8hErdUWyGd43OmyHAdJqWALEG25iLMr39WPc9EIRVHiPaR\nwxKyv4g1Ha0nEvSDmQZUC2yRCp915T8kJNcBm9oBcqwyiNp2J7r41k2pssMQ\n5cYcD7aPMYB7Oj7A6ifDsPK53/3EyzKpjd0V8zP2J4it8WjgGHwQuaKVvG9r\nFotpPBuqaDpz0hMwI8OHs3VhswwwKSoOgJSLYYwfCliubeF/HdsHF34Usyks\nNlLHQHV500yjz+2Yqm2+GSiemjAFN77Qu6pakJyaaHANNUK5jM4l2uuTmRDu\ni0Fp6QwOzo7NSVKLOEbeOdPjCydvY9pirqvWCQnpxMUe0VlzHY48mGS4x5xq\n1POn\r\n=VHol\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n#### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.**\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n**Note: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.**\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n\n**Note: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommended to\n always include it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color)` | Sets the container fill color to the given color for an enabled button.\n`disabled-container-fill-color($color)` | Sets the container fill color to the given color for a disabled button.\n`icon-color($color)` | Sets the icon color to the given color for an enabled button.\n`disabled-icon-color($color)` | Sets the icon color to the given color for a disabled button.\n`ink-color($color)` | Sets the ink color to the given color for an enabled button, and sets the icon color to the given color unless `icon-color` is also used.\n`disabled-ink-color($color)` | Sets the ink color to the given color for a disabled button, and sets the icon color to the given color unless `icon-color` is also used.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color)` | Sets the outline color to the given color for an enabled button.\n`disabled-outline-color($color)` | Sets the outline color to the given color for a disabled button.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web button component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"@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/density":"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/button_8.0.0-canary.c2852000d.0_1595883528135_0.06836423665680669","host":"s3://npm-registry-packages"}},"8.0.0-canary.f86f83f54.0":{"name":"@material/button","version":"8.0.0-canary.f86f83f54.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"3c521e3d5d4e682549832f9d5b620158ef606217","tarball":"https://registry.npmjs.org/@material/button/-/button-8.0.0-canary.f86f83f54.0.tgz","fileCount":26,"integrity":"sha512-NxDda5Zgq3a0Yrc181SEfHg2RtJN/tahgkS0fVafMBMQfKRQGBmSIRUFejdszka9+crQWvjrax7SpCaoBzz7yw==","signatures":[{"sig":"MEQCIEwPKVQ6zuZFYWG/S/4yJD4wq/cXdgqGYwlzk5eZOhzAAiBYSNDWSBGaeAUgDqsz0w5icwT71VbIuLbqPslXBgIxCw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":386470,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfH00XCRA9TVsSAnZWagAAOHcP/2dSvgeQGIzBTnvksQZb\nw8+PL+A60uYsCr8+1fsCeH+nn84BG+37YvxTqyz2UXW1ZB3mFEdPSLsybxMQ\nAvimnr3MEA5h1u7HoT8fkB4GQBD+z1Tti2Wjdw3ZRbmcFTeeWZMVP1rn9zed\nB9l0yO9qhkD3FkLQovch2DQZgQ26oXOjcXjmTLOJKadrqYqcE1qhIz0F7ELe\nsDGeAKkKO1XEZ7MqL2iqhd7BEho9sIA02amb1WYV+zf76QvBN0Rq4pTNC8Zh\nu3IVWMEw2VrYGgcy/ie98lHirMpx0/544UkzpOj3n8EsvlE2lipUsDWXXsMi\n+q7ejjR/JnRcyVb8hxtFOkCJ2tcVrV+C825thup1OFOqorp6H2BwPWbitrKp\nVCF37s8YCkh0imfJi8ZklfVvW/fcSzKVU26AWJZw0pvr4Sg6mWu7/0CRBFkJ\nm3qkOoZ4BFxuoYbXi13wZM1yo8rRTcC3q/ZADCCmJcWEGHj8AGjuwSTJi2CB\neERIl2wNM4Htrr6gbcAJE+xT4WQFnoxqKnfanbJyTL+ZMoNjtdkeBsv9lqi1\nIcvZopjrfRlm+n2eQ5K/QOIsf5I69OO6CFaKKi5CNNSvxr0RFilfhnZ/ieBk\nZIMFMhlevwuwvxvB11CEm6PFGhD7KdK1RNX5Lawr3Suxa3CCPmOlVASZe/IN\nGNBi\r\n=K9PF\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n#### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.**\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n**Note: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.**\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n\n**Note: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommended to\n always include it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color)` | Sets the container fill color to the given color for an enabled button.\n`disabled-container-fill-color($color)` | Sets the container fill color to the given color for a disabled button.\n`icon-color($color)` | Sets the icon color to the given color for an enabled button.\n`disabled-icon-color($color)` | Sets the icon color to the given color for a disabled button.\n`ink-color($color)` | Sets the ink color to the given color for an enabled button, and sets the icon color to the given color unless `icon-color` is also used.\n`disabled-ink-color($color)` | Sets the ink color to the given color for a disabled button, and sets the icon color to the given color unless `icon-color` is also used.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color)` | Sets the outline color to the given color for an enabled button.\n`disabled-outline-color($color)` | Sets the outline color to the given color for a disabled button.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web button component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"@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/density":"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/button_8.0.0-canary.f86f83f54.0_1595886870765_0.7702077354201946","host":"s3://npm-registry-packages"}},"8.0.0-canary.41eb1684c.0":{"name":"@material/button","version":"8.0.0-canary.41eb1684c.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"2421675fd75ef2aaa3777f935fa5b7abfe5cd9e2","tarball":"https://registry.npmjs.org/@material/button/-/button-8.0.0-canary.41eb1684c.0.tgz","fileCount":26,"integrity":"sha512-EsEvv0j0u7i2J5Av8JLAxqWiS47o8aDXRuNLyyuXKh3QHnKl9M9zD5gkjoM7LsEtd6bqnDWEG8qFXmmpW6HUuQ==","signatures":[{"sig":"MEYCIQC4/JdcBe2gGw8oOq73sJtrpyeomcrrWJkSL8kEojrGlgIhAN1jCTl8xKXb+5FsenT4ql5Cmdfrbj4EqOnMn1i+QMfg","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":386470,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfIGV4CRA9TVsSAnZWagAAzxUP/2LvBUvMkVH/nFq2jump\n/Q8oRvPXTvIYuPdKj+ms4gvHaPU63kwRZvUgXT7APyRcQjdCmQXLhhiGrXrr\ntykKLVspqevmRDJ6zBb3VNrZvN0VC7x6CwtZMUgKr1T+h65zVvHlm8Hw1DP5\nsJmZ3r1tLR4O1IVHiM20EW+fqh/r3340UAE1idO+H57I9F9Pp/hEOjMj8K4o\nJRwnRaEf0yijP/6Tx3nbELfBJ/LpZDqxdQtYAVb5fympQzI/qcDhZnkZqGLK\nqdiAjplSBwKl+25FwPh8B9F7d1iL5qiYPbmnGGAqoF9lYzZyHF67pZMpqGmW\nCjygxr1kleREUzpWm0Qi9d21q/vapV2Sp6HEAv/udJ3IP0aL5q0YYEYOryub\nb4XMrFntiuoXUDVT31z7d1CUrPNUS37bLmBK3Lt+7o0iWcBIIbTyayWNZaFg\nrnGfkHDYDdfcQrfkLyUCrS2hNuUU67OwDImZmgbmarmlmepMDcoxu2lURV5J\nyreHbrvY694OVcXDha8eD76V+onrgKl/lZLpcUrlvolzj5JxRDEBAJ1vFbJD\nughbch5UeLfVH8xz0EtIgFrlfK/kLqxE0OHq2eN2DPKlLn6tFff2nDfVY9Ne\nwKtcI3OxKanZZ6HkW/udO/IYGDUfJ9gcQbYk+SSfzSlvCB/XrMPhf6ihRWaq\nq4KI\r\n=4mQ6\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n#### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.**\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n**Note: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.**\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n\n**Note: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommended to\n always include it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color)` | Sets the container fill color to the given color for an enabled button.\n`disabled-container-fill-color($color)` | Sets the container fill color to the given color for a disabled button.\n`icon-color($color)` | Sets the icon color to the given color for an enabled button.\n`disabled-icon-color($color)` | Sets the icon color to the given color for a disabled button.\n`ink-color($color)` | Sets the ink color to the given color for an enabled button, and sets the icon color to the given color unless `icon-color` is also used.\n`disabled-ink-color($color)` | Sets the ink color to the given color for a disabled button, and sets the icon color to the given color unless `icon-color` is also used.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color)` | Sets the outline color to the given color for an enabled button.\n`disabled-outline-color($color)` | Sets the outline color to the given color for a disabled button.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web button component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"@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/density":"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/button_8.0.0-canary.41eb1684c.0_1595958648424_0.1662033931812925","host":"s3://npm-registry-packages"}},"8.0.0-canary.9e2f6c450.0":{"name":"@material/button","version":"8.0.0-canary.9e2f6c450.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"12e80cc89fe8c10ce540db0454f1b28f72712634","tarball":"https://registry.npmjs.org/@material/button/-/button-8.0.0-canary.9e2f6c450.0.tgz","fileCount":26,"integrity":"sha512-ikH96P/M7ta9Poo+t5BuxFBNKmAga13hryhfp/sSASpekMV7iCDy88Ai32wjCj/xQ/1Jg3mx32B/r+NgYSDwVw==","signatures":[{"sig":"MEYCIQCY4gB4rVnktegVj41cM7eR+J2u/HmjJeQoDV35Xi64kQIhAL1vyE41SWHMggtnjeHQMoWJfXozT3FhR4aLdk10mT3v","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":386470,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfIKkxCRA9TVsSAnZWagAA3LMP/3U4HiNn43hVSgT3lYNi\nnczz1dq+d4X6nqWhXeKvVn0dCRr/3Iowe78W24cA/KCmj4O3XroTH6WoqJBv\nvabMMPZIWqIsO9XA2VXIVn2JUacXJrTP4um0p8SroYcHtsnp9AKjjoVrxBN0\nXNJowvAMOb8rNupHvmhphredEvrSdBLebSLIeCtFnKPBt1rK1yiTIUP6TsHL\nXBDEb5wRmyrZqvxyBscJxfH3A0ZQnqTK6ftRabIyFAq3N5IqGeU/BEHp/fL0\nzgXCL05Iqtzsv0hRzD8fdCwaIfOQ1229E0xOWdUh/LgTtQhGFvYsq1O/Uppq\n2J3Ki0uUMolEjnyJdfLaONg8mi0t+KSdbvLeBTfspBHir1gBfwL++t6rhYPQ\njX9IIyESukeZqDTX4Fhth+yt/7HGxiPTk1Ymi4wR9vTxRYZ12XYo1E9of1Fn\nve2EO+WOr6Hrcf81KDg86tGMGK/qnUy0ia99SU2gErv47ajYjPYgCJKohw8+\nr42F5v/GRYA4RiUkF+Ik+hHROUmdLR8IKG9O8fvyIlrl6aSb8qc9nLYpnXU4\ntbhjztK/wIM9QNuWngElrb4phzUeqB6Hh/4NOyGy+kU9wz2xBnY8PyjPflbE\ndsykywYh/2A981bPO0ploeE/0zodgBqsl8qO2IOSJSuY7J1pccCWUGljzvN0\nAmNF\r\n=QkBZ\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n#### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.**\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n**Note: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.**\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n\n**Note: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommended to\n always include it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color)` | Sets the container fill color to the given color for an enabled button.\n`disabled-container-fill-color($color)` | Sets the container fill color to the given color for a disabled button.\n`icon-color($color)` | Sets the icon color to the given color for an enabled button.\n`disabled-icon-color($color)` | Sets the icon color to the given color for a disabled button.\n`ink-color($color)` | Sets the ink color to the given color for an enabled button, and sets the icon color to the given color unless `icon-color` is also used.\n`disabled-ink-color($color)` | Sets the ink color to the given color for a disabled button, and sets the icon color to the given color unless `icon-color` is also used.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color)` | Sets the outline color to the given color for an enabled button.\n`disabled-outline-color($color)` | Sets the outline color to the given color for a disabled button.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web button component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"@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/density":"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/button_8.0.0-canary.9e2f6c450.0_1595975984748_0.9616340420253244","host":"s3://npm-registry-packages"}},"8.0.0-canary.e6950b55a.0":{"name":"@material/button","version":"8.0.0-canary.e6950b55a.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"e98062e5a3461d5864aa0e48d86036f43b8f949e","tarball":"https://registry.npmjs.org/@material/button/-/button-8.0.0-canary.e6950b55a.0.tgz","fileCount":26,"integrity":"sha512-FFeiIUaYu3MK3k5qVhWr/mvwzGaZA2t+pVnsvnttU+5rKLE21rmUymC/9TEiGOKzQFqaaUX1KkC5joTD9EbNBQ==","signatures":[{"sig":"MEQCIHJ6tGKC3Faaaz4DrhIXbazrR7CAAtOJGPsRtW/59pCxAiAO9bivD5wfQesUmVTJi2BrCX0+ISekfcUxZNbV7wvdGQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":386470,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfIKxJCRA9TVsSAnZWagAAAz8P/jZvivmwWSG9czh5FA6U\nvt2Zbwp63z2opGO7BSDl4CFz4nlKIFOSON/8S/zJ89HwaN9H3p98ayQQPFhT\nM8+1q4uweoKroKyx3e5isZMi8MJYbhAOcmDVJAljfk8pOz4oqHNaEakE6vbY\ng20JB22NgI6ipoYQEZrME1FAO4aIkibACS/uqK8hTGVy1g4j1QEyevdIrB/z\ntQWo4GXug7aqDPL5+0O8qV8NeVR+n8fyFrpGxn6lsOX1l+EYWFS3OEfH4RnQ\nXuqqwwJeObjBxWRmi5WJrvwJDe/CDWEG+skHSjDDtT85X/XMkQSsewLW8UGO\n17i3JAPAtUcDsOOwWZMKwC1fqAg1/l1AeoQWSWcK5nJuQOOats5smWHFFZZv\nJ+hLBhVMPml0PQ95pJVvudDF5Bl5j/wCkKKHTamSEuZ9jQLm9yLeLNUA16dE\nr6fPU6idgvcHN23NvAMWWfUr1tLKCk7KSm6RSytcTFYVpwhZt+KXZFW3Uxz2\nLGQIe5yQtCfSjsFqqIY3XHbEKGANUylkCflXbl9EK+EQdyYZYQLOK2IILJrs\nWTPElmxkYq5qGUymAyQgENPJUBZuyvBUf/NNjpD3uoChfZisi+91Yry7hH8h\nLNjbJjZZ0R210TJ8vdp5D/QcJ4XVdI31bF0JbHzTrzQYN4YtJ20HdFr3FxxI\nO4G6\r\n=FqeP\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n#### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.**\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n**Note: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.**\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n\n**Note: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommended to\n always include it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color)` | Sets the container fill color to the given color for an enabled button.\n`disabled-container-fill-color($color)` | Sets the container fill color to the given color for a disabled button.\n`icon-color($color)` | Sets the icon color to the given color for an enabled button.\n`disabled-icon-color($color)` | Sets the icon color to the given color for a disabled button.\n`ink-color($color)` | Sets the ink color to the given color for an enabled button, and sets the icon color to the given color unless `icon-color` is also used.\n`disabled-ink-color($color)` | Sets the ink color to the given color for a disabled button, and sets the icon color to the given color unless `icon-color` is also used.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color)` | Sets the outline color to the given color for an enabled button.\n`disabled-outline-color($color)` | Sets the outline color to the given color for a disabled button.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web button component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"@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/density":"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/button_8.0.0-canary.e6950b55a.0_1595976777348_0.06915418895412784","host":"s3://npm-registry-packages"}},"8.0.0-canary.5e51ee38e.0":{"name":"@material/button","version":"8.0.0-canary.5e51ee38e.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"c4ee1cee010efff8b24fc9d52d09671539974507","tarball":"https://registry.npmjs.org/@material/button/-/button-8.0.0-canary.5e51ee38e.0.tgz","fileCount":26,"integrity":"sha512-X9IoOoMerumcs5O717HtEmzsM7iWVqclUBf94j7MmBijJXu+X9rOmnntmXG4qPnD+fZmsZEQANfKdXk4tHb8dw==","signatures":[{"sig":"MEUCIADE7XyuPAi5LEx7ZQPSMxYThn+49ddRKJg/h6ccapH5AiEArxdetxEyr70dNw9aZyeHIN16pEObONU7sJsoJ01OxzU=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":386398,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfILHNCRA9TVsSAnZWagAAohsP/1uSylJ2uxHbTJHMAtQH\nMVsnWQ1wuQcakYjkHYe4jIhr6hbazWcFROiMpxC/nwbBQVYYhasYH2SAc8Tb\n+O0VFk4Kfoz8Au8vd6CKkPPU5q5Up5gV7LMnrUlqWv4ab/Dq04ymrR9APnMS\n8ZG+iitnHdi8KAoT1hNNbY+078TdJnLkKPBS1ZMg4Cq9IGItogqfVxeXnHLK\nn6Lk1NoZfPWJkx8BB31uSpDj7AXKYh+SBCD+KqLbZQYmFSnu0WxjMcmzvl1q\n358Xura3kvLaFRe4rZ4G9yBtmbLjlj/JdKttdljpyS0nOzvy/BcpzyLsy25L\ndxTMpuKn6G6pB+m0IRF0eKVpLNiiv+XrADyWp36aYvGed4QW9Pd977yra77I\nMfuC9FKX+RdvCVj/YpSvFzCgwJEq5/41Ad1UBRLxoXxJ3CRYKUeLJzzmZApP\nWOPgmIMKfb7vuYZ0VrONSpFSEbNHXGrjchrzQkU7fbyFZQIdyjP9QBT6XYGS\nQ1i5KB8B67CGBe0Me1D9e9t8vW3uuSXHJGkyEFCOiNJ4GAypz8sPeZWeqgoM\nvtSH7rLTEuu4hebYkM9KkbjWdulYvTRnMVeeACo62cme6dsU4XAAo01nAIQv\npt4kxcGyMOwQirK1PaVpapsBBHLbx1CciQHhJn9nV+41XlKEBH0hhSHOkSeA\nFf98\r\n=VWIx\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n#### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.**\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n**Note: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.**\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n\n**Note: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommended to\n always include it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color)` | Sets the container fill color to the given color for an enabled button.\n`disabled-container-fill-color($color)` | Sets the container fill color to the given color for a disabled button.\n`icon-color($color)` | Sets the icon color to the given color for an enabled button.\n`disabled-icon-color($color)` | Sets the icon color to the given color for a disabled button.\n`ink-color($color)` | Sets the ink color to the given color for an enabled button, and sets the icon color to the given color unless `icon-color` is also used.\n`disabled-ink-color($color)` | Sets the ink color to the given color for a disabled button, and sets the icon color to the given color unless `icon-color` is also used.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color)` | Sets the outline color to the given color for an enabled button.\n`disabled-outline-color($color)` | Sets the outline color to the given color for a disabled button.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web button component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"@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/density":"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/button_8.0.0-canary.5e51ee38e.0_1595978189165_0.32664992267531634","host":"s3://npm-registry-packages"}},"8.0.0-canary.a3898ffcf.0":{"name":"@material/button","version":"8.0.0-canary.a3898ffcf.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"829c26a9f8b7394045f87eb3bc3c4c30c44fed91","tarball":"https://registry.npmjs.org/@material/button/-/button-8.0.0-canary.a3898ffcf.0.tgz","fileCount":26,"integrity":"sha512-WNB7yrcaRgH/xbpbvYyTziGeInq+FZ38evc5+hzwbuAt8SCNhGiAlZMkpWJOu502BKolO+hEs0/fef2wQAhB6Q==","signatures":[{"sig":"MEQCIDHxNrBBvl1d9zLqAcUyw8cenxVV1x18vuE0dQuLKssvAiAWjNWTDWgbYaSSLaKdORa7bd8GdHgrCG17yL4OuHAQew==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":386398,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfIMSjCRA9TVsSAnZWagAAD9sP/0pkgsMIjaMUNbVmEPyG\nplHbcKx08qP4L+CjlfdMccldqerzM3RypN6xY/7AZW3GRswU74ZOJnCpYIsc\nm8Sg2/Q3oYPrekGWa3dS3f7VJ4Qe/xxKaXL4UDtp0mCQTnoI1pRTpczeuW0l\np6GZDmy8diTSXsIa8RWARbc2adFkM7ZreXXsjQhTmUnB97dKv8i2rbu9si51\n4lgikGQJzW8PHvJVHRKB/BP1wxWO2eEhQ0Jm3/OkACuJ3Q/xVYs2t3h3XR3p\nXcWMHk9wgnj0rS4vT4DjK+KEw4PDajbB9BiotCRanR7pOWGypm0fCINc6l2O\nbhBqpPpShH5JlTIND9P5JNPcVelOTDSv4aEPgUjg00NnThTg9hMhJveMav0l\nTE2crrmxwjUt4ugyaK5gxG68rI+2bUShn8eY7CPARQxqp6sH9XDow0UDQtZo\nUi43dom5InB8ZegLPsZ3JdMsCONH/ZAGtKaAnGf10oJF3MZXopQWr/HePNmz\nv/CyqQfJJ7eNHfqosz95q6jYuVPhe1gOkl36/+NgaqMJuJo2wy+Bu+8b0bVk\nolKDOesX9FQ4DepEItvKhciI+uZEdzdklkZ5/FLC/xPhKJm/hlpjQi1fnJ2L\nIupfJ2tVAzAKgliwj+dZEgPbK/sQo+isq941atj6DrNGUvivjgkX4qlMmbpu\nVtM7\r\n=DNbV\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n#### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.**\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n**Note: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.**\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n\n**Note: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommended to\n always include it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color)` | Sets the container fill color to the given color for an enabled button.\n`disabled-container-fill-color($color)` | Sets the container fill color to the given color for a disabled button.\n`icon-color($color)` | Sets the icon color to the given color for an enabled button.\n`disabled-icon-color($color)` | Sets the icon color to the given color for a disabled button.\n`ink-color($color)` | Sets the ink color to the given color for an enabled button, and sets the icon color to the given color unless `icon-color` is also used.\n`disabled-ink-color($color)` | Sets the ink color to the given color for a disabled button, and sets the icon color to the given color unless `icon-color` is also used.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color)` | Sets the outline color to the given color for an enabled button.\n`disabled-outline-color($color)` | Sets the outline color to the given color for a disabled button.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web button component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"@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/density":"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/button_8.0.0-canary.a3898ffcf.0_1595983010763_0.27795555570738273","host":"s3://npm-registry-packages"}},"8.0.0-canary.bc5cc6c96.0":{"name":"@material/button","version":"8.0.0-canary.bc5cc6c96.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"073564346f2d5488fc9c520ceb4248e32934eea0","tarball":"https://registry.npmjs.org/@material/button/-/button-8.0.0-canary.bc5cc6c96.0.tgz","fileCount":26,"integrity":"sha512-pXx9dMBXeLLfygsDH8pv+A3gLURVrFyYnzAkki5sp2eU6i29ZEs9c0DnSynVt6ZGVUwI+IYHOvM7Mgpwhd7yQQ==","signatures":[{"sig":"MEQCIB/5gbXoIZkpglUNL6f49ab+lMLWALLof7ZwjKV9nXpZAiBfj1DAkRCtSNvFU4fhwyVzc6VFJYlFnwXjRZJFcTHxvQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":386398,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfIMelCRA9TVsSAnZWagAAdegP/2yGOJSyfVJh646azEFQ\ncgt5H6l1DUSlTtlX12rU7Kz7QLYOV9PhOfSI3MhW1kCT52JdijoMv0KrbH2d\nZpnVYcIgHNzANBoSR4Enjt+CEQxyF6Vt9kmpQooHvoB3AxoBybIi87mQs5Mx\n5ER2MbZhGL0xOF3/fugJT35xt9+263v3ilsGCDGXXFcvwftQ3OOcBZ1VsZT5\n2aoPvv9yPXgFs1rEryZCqB16YbaXd3NES7Tt3gO64jfXLDkvLAeH/hBqnz19\nvzbPc0STgozw5xZZSpPro9+WIw5BQI1eR/3cvEY4mBzynuFlxHu84SBnlBs8\nFacjpOiOGM+TM7zSliqzt1Qzjl8+goeGbuZJ3yWbvWw6RvSb4lhp9OV4g+eo\nDQxjb8lbSHX4qxmj7cCxOuDeDYXwbR/wERgv/clBgIHzbgK0FcWdctHZ+ohK\na1wDihEh80hcdoaIPcBgDPH96OP1EcjTqba23VhyyLNSzA3W8j2ztUOBt5pz\nSFpeCElzfEOqYldO5UE0TmqOF6TT3MLJhM0EOIS1oc0U80hqDOkjq2E8gw91\nbKGbzfec8egYzSWBNRdWL+KCnZwm3yvXBI2kQgwZIiFe60s3l6Vz85kfBzbJ\nGwx4xJUajUCqNqYCyn0JDG9hf593u2LzJm/9LASgoJhvjaxRkZzYzk3gFe6D\nMM6M\r\n=mTEw\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n#### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.**\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n**Note: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.**\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n\n**Note: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommended to\n always include it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color)` | Sets the container fill color to the given color for an enabled button.\n`disabled-container-fill-color($color)` | Sets the container fill color to the given color for a disabled button.\n`icon-color($color)` | Sets the icon color to the given color for an enabled button.\n`disabled-icon-color($color)` | Sets the icon color to the given color for a disabled button.\n`ink-color($color)` | Sets the ink color to the given color for an enabled button, and sets the icon color to the given color unless `icon-color` is also used.\n`disabled-ink-color($color)` | Sets the ink color to the given color for a disabled button, and sets the icon color to the given color unless `icon-color` is also used.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color)` | Sets the outline color to the given color for an enabled button.\n`disabled-outline-color($color)` | Sets the outline color to the given color for a disabled button.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web button component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"@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/density":"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/button_8.0.0-canary.bc5cc6c96.0_1595983780735_0.4137616572100262","host":"s3://npm-registry-packages"}},"8.0.0-canary.9bdeaf928.0":{"name":"@material/button","version":"8.0.0-canary.9bdeaf928.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"f0aea8d5beb4e24db512f3e0e3392a76044de50f","tarball":"https://registry.npmjs.org/@material/button/-/button-8.0.0-canary.9bdeaf928.0.tgz","fileCount":26,"integrity":"sha512-yT6kizcnltxBhtyKiV+1IZLXLmZ4HvOpXBuJWZ4MLlL9MPkF02NRmUB7IeIU5DlFFYhf+TYNvtXQ/GDr5x3kfA==","signatures":[{"sig":"MEYCIQDEszyuunQVylLCbZ2CHpKTslbERi2FonNlZ8Mn18bc8wIhALRkxQBKHTrkJ1Z48paC0DSCb60j60m7egrISZF16GpL","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":396940,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfIM8FCRA9TVsSAnZWagAAjD0P/1WU009HaBGdFNIXyEIC\n7dH+IEvLAmyE47uv+pt/iV/byJUmTy0gnu1VJbegOeYuWQ4L5DLgsRmmop87\ngzYXzLbE/i0SzTRR8gMaLdNjGx4QPlgR/qwEomN+rghpMglxfbC+RZHIPGvc\nudT7yBhd5sUdGny2Byc3ki/mQJFN8KFgoGMOUIJWfCtNo2FtRxxZwZoLgaCb\nQZjyN7aRQ8lVrsHakgWwogugu/rqDAD19WYH+PmO8KjAjrEmgrGlvKTkgmse\ns+InNhb7k1p99CiHnSl1Y8TN9N6R+3UECAKnFnsBx7uxkuq3NmE7FYEJsC2L\nNIBGtybzJd0rtF29Po1UFh4IxTuXfa+D7d6y+zXp4btR3fW1Cr3ILQeFdFOp\noY5a+fK4xEhfiJjcPv9n12nxP3ZIsI5z+nQW2a56BF0ZBIsdxqj5Ob+vmpOs\n3S1mLXWpDbR+3VLrvu2WZkzeykKaFDlcEIxuHO3lq/XsUSdtbdl+hU01t+1c\nkHDz8muLgBi8lb6jTO7sxjF6j4kASiAD2CePa5oVuVX0ZFoeZJnRzfA67fId\n/WWbBej3OT3lbAoYoqK7bg8M1vJDOgFlI1h/1mKT+sKMtv1xmASYUEBgUyj2\nEaEgH2rqfeoxcwEqlUKtONWzhYBsv30pd4vynaWYE2M4ozwWXpN2wfANOzkR\nl5q9\r\n=ZKKI\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n#### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.**\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n**Note: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.**\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n\n**Note: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommended to\n always include it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color)` | Sets the container fill color to the given color for an enabled button.\n`disabled-container-fill-color($color)` | Sets the container fill color to the given color for a disabled button.\n`icon-color($color)` | Sets the icon color to the given color for an enabled button.\n`disabled-icon-color($color)` | Sets the icon color to the given color for a disabled button.\n`ink-color($color)` | Sets the ink color to the given color for an enabled button, and sets the icon color to the given color unless `icon-color` is also used.\n`disabled-ink-color($color)` | Sets the ink color to the given color for a disabled button, and sets the icon color to the given color unless `icon-color` is also used.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color)` | Sets the outline color to the given color for an enabled button.\n`disabled-outline-color($color)` | Sets the outline color to the given color for a disabled button.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web button component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"@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/density":"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/button_8.0.0-canary.9bdeaf928.0_1595985669164_0.7344861370892142","host":"s3://npm-registry-packages"}},"8.0.0-canary.fde2c1f9d.0":{"name":"@material/button","version":"8.0.0-canary.fde2c1f9d.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"e7af60575e2ad5ad3ddd7b963c0d6dc0e511815b","tarball":"https://registry.npmjs.org/@material/button/-/button-8.0.0-canary.fde2c1f9d.0.tgz","fileCount":26,"integrity":"sha512-fnvxn38jtBuI3bGAA2y038IEiz74KB9xKxj6sY98T/3byiCH91dgDQfnvECUS/cHyQbuT/uyPGyycLKq8PgeXA==","signatures":[{"sig":"MEYCIQCEOIWEHQC6BKESebPNXXaMHrwWD8mriLxPrm8b1valPwIhAP6B3TppadC8jN4paNNDpiQKn1xXJrdr5orFWmL3/Et1","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":396847,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfINJeCRA9TVsSAnZWagAAlkMP/A5u3/4Sm6Kv5grBmCxN\ngpYeas+/VmP6IoeWoapW1ike9C202wG1X877Yb9aGg9qETgjncmMqve6j4O3\nYhRPLMqUynHabXvlxcnivW3Fi+zIyu8FLimRgAzXdm8LUUKNnjfCQpMUC0e2\nBqMgXhZAllbfj9B/2ZQOmKqf+i/7GgQEF3NjUPCABJngM2Lq7dUSiO96aH9Z\nscaXsHZBoJuZj5f2XgZav+HV/f8vEXruj/H4AQ5I8LOIVllwQ7g+7bOHINEy\njK+2mtkuGiM1s9mkW/oQuzVXHWis00mNoWUYkuMvPKfQBVsLVKU0DiN3Vi7s\nIBsd4mro5KtrqobtEfCxGRDBB0UyxERjhi3Qh9T21f8GSDpSNe+TE9NZ+/3h\n9L3WlA9r7lhcP21T2wWuVOaXqveKGYOun4QgYHOH+q5ehWpeY88QRXAI8O8F\nK+/fjv99jqN7EZ1RiZUOE5Es7nqCAqTIfbE2TV/xb1xDyPfYTiuaKoA7CkGJ\nmZdQwHeEccrN03JWXXrDK916+OKABjnx4eFRCARTwRblhkpfFY724okrvdEW\nDVxeiqPEYLJO3ZY8JHiQfM3OqHVOS4OBUvhxGxFv7SF3zpznWGAr+/2Zj2Ls\nkUEWp0RTbQo8G/pgmIftXJMivjx8ema6D/n4rzs5FnTK9uDFccBoy7Pz7QTu\nDQS3\r\n=l29v\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n#### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.**\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n**Note: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.**\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n\n**Note: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommended to\n always include it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color)` | Sets the container fill color to the given color for an enabled button.\n`disabled-container-fill-color($color)` | Sets the container fill color to the given color for a disabled button.\n`icon-color($color)` | Sets the icon color to the given color for an enabled button.\n`disabled-icon-color($color)` | Sets the icon color to the given color for a disabled button.\n`ink-color($color)` | Sets the ink color to the given color for an enabled button, and sets the icon color to the given color unless `icon-color` is also used.\n`disabled-ink-color($color)` | Sets the ink color to the given color for a disabled button, and sets the icon color to the given color unless `icon-color` is also used.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color)` | Sets the outline color to the given color for an enabled button.\n`disabled-outline-color($color)` | Sets the outline color to the given color for a disabled button.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web button component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"@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/density":"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/button_8.0.0-canary.fde2c1f9d.0_1595986525862_0.059989030986707714","host":"s3://npm-registry-packages"}},"8.0.0-canary.6b3876d5d.0":{"name":"@material/button","version":"8.0.0-canary.6b3876d5d.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"59f7f48f289273196b20cf7b54a255c96a866914","tarball":"https://registry.npmjs.org/@material/button/-/button-8.0.0-canary.6b3876d5d.0.tgz","fileCount":26,"integrity":"sha512-F1sv+VRjyoREG21qKBGcMaTSW3JIjtqEYjyWLM8kjtDs9LgnlJt88sMiB30GC257dD3foXwAw8Xh9bUdJ6xiyw==","signatures":[{"sig":"MEUCIQDDoJXBZ5Doy7MWkOW+oe8OXcIjA9fjQWcgD7mP+DvqxAIgeAaBO6dzSX/5Ydw82MzEdxvZV9l19oO2Z8bsP7vXvbQ=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":396847,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfINNBCRA9TVsSAnZWagAA/Z4P/0FtyPvpOeEgGVE7C7i5\nrrbnhr+RMsSWyWw1XJv/lcz5UjPEnin3ZMpKgLUynBzErCekHSax/or/0lde\nImdcvI/e5RRXwWHt9Th8SQ2BPqw3JqhTxYP9Bz70u7DJc8+H2fwc3Vx+uZs1\nJjCNZkSpYzDijGWVL8DG9uUwzDmNUBn9wr4errgHuxbtH6NvYpnohfrJYfm8\nzmberO0miLy+acLuzMhjT3jznJaWVc8YhAgCkQBshYhXy6VwCuDfTcpCOyHN\nepT09nB9gG2HIpVg2Cb/Bi6TTImZz6q73aW77Wh40Z1dZLr7wgYEIHGOAv9Z\nsKhR+bRse6QEkwa2Z0poZbsJXSsFxbrmaKu/JFgsfoZ5f8ResLxi1HfItiF6\n3Rk1UCpSZ6ModJn1qYPOe9/Mibje7VTN+9Dzba9GFsPPwkbY/a/iPAIrSKtd\n7M1DmA1hSiRg4JkGLm3z0CtGRGGiJNfM/5upyDbel1Oey8yR9SDQagO6SkLw\nkaGrTz/5e/SME8lqaGeZlQZ0rbNWR0loZM1HI5qNEEpqS4u5FZW7Af4wy62d\nBMameBFPQWs+9S08ciixlaqq29QKbw/UOhj7w8rQoEbFBS/Z8kvSE5zcTS/T\njc8tsBKDEugaiAThthgm+O9NbguLVIo8fg8rok6rtyE7BK7ZV1taR6uXizWh\nECj8\r\n=qInO\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n#### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.**\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n**Note: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.**\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n\n**Note: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommended to\n always include it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color)` | Sets the container fill color to the given color for an enabled button.\n`disabled-container-fill-color($color)` | Sets the container fill color to the given color for a disabled button.\n`icon-color($color)` | Sets the icon color to the given color for an enabled button.\n`disabled-icon-color($color)` | Sets the icon color to the given color for a disabled button.\n`ink-color($color)` | Sets the ink color to the given color for an enabled button, and sets the icon color to the given color unless `icon-color` is also used.\n`disabled-ink-color($color)` | Sets the ink color to the given color for a disabled button, and sets the icon color to the given color unless `icon-color` is also used.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color)` | Sets the outline color to the given color for an enabled button.\n`disabled-outline-color($color)` | Sets the outline color to the given color for a disabled button.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web button component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"@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/density":"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/button_8.0.0-canary.6b3876d5d.0_1595986753271_0.4253384403004883","host":"s3://npm-registry-packages"}},"8.0.0-canary.30ce17873.0":{"name":"@material/button","version":"8.0.0-canary.30ce17873.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"399cd709eac055bd7982e09a0eaec8ce3ac8a25d","tarball":"https://registry.npmjs.org/@material/button/-/button-8.0.0-canary.30ce17873.0.tgz","fileCount":26,"integrity":"sha512-w47nzDT8vWJO4MHmxR+Fr11jD773xmOGO8jekfuxATSuma6iQB1f/VZljKvf9ijlVqohwdrTX1Zlj+fuxhWe5A==","signatures":[{"sig":"MEQCIBZzaWbEPmdNjNYZhUIVdCD/aX42mAkA4nMRwINw9QFkAiAKZeIMKluOWE1qZPa7zc1+S7uKDQTuNLeMPB9BAk4mww==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":396847,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfIa6oCRA9TVsSAnZWagAAPioP/iOcDOUjnvQgGsT+fMJO\nQ+6HZ/8SuOoEJpGI6o0ImpgLTtTcWaWPTXPWsHmZyEKFYUuKv1UXd0Sjf7OV\nQiyJ61q9y3Xx8E49CfSURTVT8in8CQ1EIKAmkeB9hilNse/RxFWNp2PerOEe\nHLdrXkpp5GUfwAYZPlTUppm1hkaZb8IzTVsJfVYsJzRLeEsF6ZsqeN9afRfg\nSYJIloM8mBzrLe0l5emRvJspPVI3huwW/pzJ4HByifPyGHBZkeROl13pPRLA\nE5IOGDnK2hWoGdJtnTLJYnVp0hN22DJcLrzvsC9wv2wIzE3KnUoOKvtjA0eY\n6kcqC7YsgkOFgO1a7tfVBEc0gYlM3rZHCqoboizDHoPq97M85sMB9+uBdoSp\nmW6E6GbpmFUdBmT4WQ/o1Xt9p7qofEL62WJ+KUzlRQUZZ+8LpQ7GVXDwtuN4\n0brdnHvKSCz/3BfRR2TTSbDMAqNz3qrZVOsD0PSJoZ/Nlp+tbfUimo7j8edD\nDX9N03FiKvX2I85Ii6vWQhVdkGgLo2jPqq9G1LwjLKxUgEBvWWSz+DGRk1P+\ne6JaBGUfljeJFqBGDy7xwV6M/JjheSLwQbl/w+iANGKawhU6AHkIUAwifu1x\ntldE2ttfMWO2id5BI04H/WV3L/KCXHUCuphWobWMRsQXW339BVYrFU2W5InQ\nSPOQ\r\n=x97m\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n#### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.**\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n**Note: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.**\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n\n**Note: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommended to\n always include it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color)` | Sets the container fill color to the given color for an enabled button.\n`disabled-container-fill-color($color)` | Sets the container fill color to the given color for a disabled button.\n`icon-color($color)` | Sets the icon color to the given color for an enabled button.\n`disabled-icon-color($color)` | Sets the icon color to the given color for a disabled button.\n`ink-color($color)` | Sets the ink color to the given color for an enabled button, and sets the icon color to the given color unless `icon-color` is also used.\n`disabled-ink-color($color)` | Sets the ink color to the given color for a disabled button, and sets the icon color to the given color unless `icon-color` is also used.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color)` | Sets the outline color to the given color for an enabled button.\n`disabled-outline-color($color)` | Sets the outline color to the given color for a disabled button.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web button component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"@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/density":"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/button_8.0.0-canary.30ce17873.0_1596042919572_0.862846916138573","host":"s3://npm-registry-packages"}},"8.0.0-canary.f6bb43bf0.0":{"name":"@material/button","version":"8.0.0-canary.f6bb43bf0.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"81e01bad55b7ae82e4ad8102d010fd394c001d07","tarball":"https://registry.npmjs.org/@material/button/-/button-8.0.0-canary.f6bb43bf0.0.tgz","fileCount":26,"integrity":"sha512-u2F1v3k9fJzpUgmirczZZ6BiqsM/5fK//oYa+5rI9jlYdVRDAOs0EjlywA5GfqYdwYuBk8M6GUkHRs+/I5eX9Q==","signatures":[{"sig":"MEUCIHQFqMMHYbb/fqTenViUu2ENcQk9uZxGJLzeXW4oE4h6AiEAxdYv7HYwCUiobd0Dl8wv0wtAr+7I7oIa0T0ZKTVTidI=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":395540,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfIb8yCRA9TVsSAnZWagAAqfIP/j+DnqLIazuRLdlZUt00\nG4ciAEgDtlFAUmv6pY4j1vXQkRgnOoN6SQzqSvI/yMa3GHk5qAT1gKT1iYSx\n6jj+cXZTkfItY3+U1wHIFzo6UmSiqW9nqFPGLBhWAst0h4V5L9gc/AI2SW4y\nuqdDsuQ2La9BXOqubObjiWwFEX6R0JKn9wJ+utP9lRsBhlT++FzfVagtSpNC\nJy0Wg9qYueJPuHvHGkvMLpLM/lqv/NkwuwVJT6ejpSZVHGtbRbk/bpZnZ5IX\nrUsRznGRBeesYNFOGwzBfst1cWx8MTfSlVqhNqR3kawY0RxeIH/PYl331yEn\ngr5JCh4GQZemGSQ+ZpTzSsL/a+9lrUlun7OIUe2WwFjIP9Wh7kHyjQkvxTWH\ndp0MT1P8hnHt25cJwp5JzbLm8y0UmbEmnkAeSUGyhoOeKzKudOFi1ovC05U9\nc/j9rxwuHlKMKmRzrUGlR67g3VE9gvfK2Y4yzwrFMD7Jqr5+OEvqNDLO6tMF\nbhidWW9VsMFatPZQMRH6ffpAVN5rrA9SArh3lKsEGBB1iWIsr/NFHXino6T4\njPd5AypQNL8ewSJ6kqTodKRzt8xKbQuw7DN27bLuxqgIYNe9Gno/8SbSRV9R\nhy4EiCLEwvVIaCZPqvqCzwMVdbH3w+EOtLXdxkJstEAKDDR36AYoP/YzifQI\nj8V1\r\n=Nax7\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n#### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.**\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n**Note: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.**\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n\n**Note: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommended to\n always include it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color)` | Sets the container fill color to the given color for an enabled button.\n`disabled-container-fill-color($color)` | Sets the container fill color to the given color for a disabled button.\n`icon-color($color)` | Sets the icon color to the given color for an enabled button.\n`disabled-icon-color($color)` | Sets the icon color to the given color for a disabled button.\n`ink-color($color)` | Sets the ink color to the given color for an enabled button, and sets the icon color to the given color unless `icon-color` is also used.\n`disabled-ink-color($color)` | Sets the ink color to the given color for a disabled button, and sets the icon color to the given color unless `icon-color` is also used.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color)` | Sets the outline color to the given color for an enabled button.\n`disabled-outline-color($color)` | Sets the outline color to the given color for a disabled button.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web button component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"@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/density":"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/button_8.0.0-canary.f6bb43bf0.0_1596047153662_0.07332666091412299","host":"s3://npm-registry-packages"}},"8.0.0-canary.6af75f6ab.0":{"name":"@material/button","version":"8.0.0-canary.6af75f6ab.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"36ffa1a96900f6308e70456bf730e984fe7695e6","tarball":"https://registry.npmjs.org/@material/button/-/button-8.0.0-canary.6af75f6ab.0.tgz","fileCount":26,"integrity":"sha512-U7InvdjHhuepBOKdvpFege24nIiC+a/bwf1SvsR/Jcnvzkk7fnzB4ymh28o05r5MzgnddurPtdCHbrQiJi1SLQ==","signatures":[{"sig":"MEUCIQD9l00b9acc+LhvorGGFjTvHx+nBX4+prbgD15Y5TxFOQIgMfMr0HETYQlsEF54QZYYko0RtgkkM4RTyEu3X9G7sC8=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":396054,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfIg3xCRA9TVsSAnZWagAAik8P/39laA0UOmY9J14UBKv6\n5ruaNyNuS4PUikCqo49snTpjXS44b/SO59CWjz9tpulu0hMZK1vpEvXTK3ou\nc3YlEMKnEapJ+C+LsfbxKBdwcc23OyNqSUqT4kAM4MkpCnDE9kuxCxJnyRbV\nB7FCVvomwbN1sVnTU/xdQVayNbJumtBTkptS11/JtFcVk7qhaoT6UYx3S5rU\nVSubVv0SY7Hxs5Ohrzwu+98n63zioHxoGPZzBdroZbkVrqgGAjyZso6u7cXQ\nnQND9wXcoTuFj1HMMaTRsbvPMX0S/5N1EF9cIg8Zg+5bzLRfXpABbYVGQfxw\nGOYvzbuEQA9/Xm6brlFplEireOrhuTsDlRwqM3BzGwnNUfA7nuAIkytujehW\nYKfSf2ty89O7QJmjUV7Zi6/eI2ibGPlY1U2l1BBOHoaUzXaH/epLgDY08MUK\nc5TPPboU2AErOUYQ9xzH+5/RoSPDac/HGIBdfnHYa2ypcTqvO8tEcEYglx6n\nS405rjiSX/HLeZftC66psDVQ/2d7yDocnjlAj8xT+Qao4zH2a2t/Cs7CAnrU\ndScb8vzSUbJitYeZ4OixmKunkeMlN5iN1qishM9silAPtis/+cnd+6p5JuYm\noBmgFLZownBOuYr1XIVzyJxOdW310ZlKJlfgSuCYPs+zCQJljA0wlkjFyKt5\nqQdj\r\n=wQDd\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n#### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.**\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n**Note: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.**\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n\n**Note: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommended to\n always include it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color)` | Sets the container fill color to the given color for an enabled button.\n`disabled-container-fill-color($color)` | Sets the container fill color to the given color for a disabled button.\n`icon-color($color)` | Sets the icon color to the given color for an enabled button.\n`disabled-icon-color($color)` | Sets the icon color to the given color for a disabled button.\n`ink-color($color)` | Sets the ink color to the given color for an enabled button, and sets the icon color to the given color unless `icon-color` is also used.\n`disabled-ink-color($color)` | Sets the ink color to the given color for a disabled button, and sets the icon color to the given color unless `icon-color` is also used.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color)` | Sets the outline color to the given color for an enabled button.\n`disabled-outline-color($color)` | Sets the outline color to the given color for a disabled button.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web button component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"@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/density":"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/button_8.0.0-canary.6af75f6ab.0_1596067312976_0.03397822458189115","host":"s3://npm-registry-packages"}},"8.0.0-canary.42d7a65aa.0":{"name":"@material/button","version":"8.0.0-canary.42d7a65aa.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"7c672250a153c1f80ce39c879487aa9d93adc31a","tarball":"https://registry.npmjs.org/@material/button/-/button-8.0.0-canary.42d7a65aa.0.tgz","fileCount":26,"integrity":"sha512-ODETHcVHT4aGuhg0gnaWoU74YceI8ZBc/EWOOla5CAp5WHPhX6zWJNpA3KX1GMmppyCsmw+gBANbmCic5T4NaA==","signatures":[{"sig":"MEYCIQDi1uTkGiuGBKXLvxnFoHYzgAWx3LwMaGa/tPIonCziZAIhAOPOF89RlDKqpGuvIvXX7ouT14F+wQwzvJQK8Legbyms","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":396054,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfIhAQCRA9TVsSAnZWagAAYpQP/j4vrL214ZnxPStjgfAe\n+UU29y5PeSNJF9g/lmnYrElsLwVJfQ8cWaiu4rE1AnkIhbauNsrCl/SIeXA8\np2JQAekAvVrNoiN4v2i1EGLATQt6+ZRQ1q1XPdn4vYAS8E5GUuspz47cTrVq\nVieLWe9d1hT1ADzhvBVM0OJemq0TDa7h3gX4bKFUEUWwExYZ+9Rwx7RME1dD\nc0IcnEWhfd7YA4qSPpN5JZbpjCJ/N7y0R97vebzW2d1bvXZidS+MHpJjd6/8\nA4oj10hzaEB3AxQ2pPtJ9KIqbzct8Nq9rMYTyLJ607S05+JvqvpWGlrNX3Kn\ndiu85GzwH4YuhS4FAsKIYwCneLrcy3npEylsp4OKIcf6Cm2m4gCyCvb7TbD6\nB9iUXsNz4IrEi/SlCAPI6FJgkcYXd7biq2MWa0SklwdVnpxwPsc2iPt5dkV3\nHw5SGObLBbBqeqWq8q1tUlqVw7izeUfN2fTmSPMbc8GulLz+eSg2q/j1d+Bs\nuz7hU9nI0beUkV/Uhc7wL+TXGaf5uRzuZzfGappHF7HQ2vIzlJrG7u5S4nNC\nhx74Zdt8JNZax3+ADN86uzG3tyBGEdTS0yY/fya2IAKzBKpKRT6KEr6yUg+t\n71w6xMMD2RW0JOonLy3/cyRd9nAipFYA+jop1ctDVgFk03zVsu2RcZSpHg6q\nhsdA\r\n=6Xbi\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n#### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.**\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n**Note: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.**\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n\n**Note: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommended to\n always include it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color)` | Sets the container fill color to the given color for an enabled button.\n`disabled-container-fill-color($color)` | Sets the container fill color to the given color for a disabled button.\n`icon-color($color)` | Sets the icon color to the given color for an enabled button.\n`disabled-icon-color($color)` | Sets the icon color to the given color for a disabled button.\n`ink-color($color)` | Sets the ink color to the given color for an enabled button, and sets the icon color to the given color unless `icon-color` is also used.\n`disabled-ink-color($color)` | Sets the ink color to the given color for a disabled button, and sets the icon color to the given color unless `icon-color` is also used.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color)` | Sets the outline color to the given color for an enabled button.\n`disabled-outline-color($color)` | Sets the outline color to the given color for a disabled button.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web button component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"@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/density":"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/button_8.0.0-canary.42d7a65aa.0_1596067856075_0.47028613672570585","host":"s3://npm-registry-packages"}},"8.0.0-canary.85abdabb7.0":{"name":"@material/button","version":"8.0.0-canary.85abdabb7.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"71f0d45c0a2e9e0e676ecd78da1443449036ef23","tarball":"https://registry.npmjs.org/@material/button/-/button-8.0.0-canary.85abdabb7.0.tgz","fileCount":26,"integrity":"sha512-DsAb9XLbDc8OaCY+M2gV5pEXhMOq8KApSXJv60TB3L6iTLBjyLiAJMxIPcXKInIDuP7EZO/J9g3maFOCXHqu6A==","signatures":[{"sig":"MEYCIQCQjxnAqitOK1+Xy9W9qlYcLjHV6niUkECYTrQyULlC2wIhAKPXNTxI0fjWdT/f/TtTmrYyUbBGGigZBaVFc5RgyXk2","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":398679,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfIhExCRA9TVsSAnZWagAAfqsP/AtoDqgnvbimtFfpRDwc\nx3sEY936WC6jGXPCbSGV/p3x8QsJnkYec/x+0mw2ZojWQlSSIuJyvWvs2xJZ\ndHPkWbmwda+jW1qXy5RMHby7N4+LQxzrZRyy2/2lBlRIt/v4keDqfqaX9VrY\nAwk8BcH0p4/PtqGxUDKZVOhfyhPeXHrh/TF9lw2wGgAHqeEGKHoZYqXvX6Cr\nLbMG/9BjRD5Tpmy4wkQ1FHBDejVUUPp53gHIA/zdUQKidCfULPEZygx/67h2\nKokhE/e/6P8/CSngfk3OJf1PvAj5wa4o09CioSP2lxqb8K0B3qy2/LquaCHb\nagFllZfxg09jXk+cE9OD7lk06t6BysSSlv8lHMRmSL0bGsfMvDR0FF2mIQSX\nb1kyn/7JOw65n8Lrx33au6cfFwCikh0dE+yVV6ZdpGf/vrVVUtQHe5u0hg3+\nGzYMYF4NPSRFD0IuewMHKf+ik89LNUL9WyV36ixDGD/pJtmbbRdydmJ7g87w\n8Fzl/pOFy3QtcsJmxU9sTsXcHMd6QBBF90xUL/JxzZRXtsoD0pvbwFcLiziN\ncXmKJsTajD0k64M3WvhCwl01cK2Xrtk5x9kFJQApEK135+k0Cz8Z81QVVpTD\n0Nl9v/OuDAKt15zFrFZGpl2lYg003ayM9ZuiMgL3KGweelNDynrcBhzlKFsp\n/si+\r\n=FSf1\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n#### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.**\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n**Note: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.**\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n\n**Note: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommended to\n always include it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color)` | Sets the container fill color to the given color for an enabled button.\n`disabled-container-fill-color($color)` | Sets the container fill color to the given color for a disabled button.\n`icon-color($color)` | Sets the icon color to the given color for an enabled button.\n`disabled-icon-color($color)` | Sets the icon color to the given color for a disabled button.\n`ink-color($color)` | Sets the ink color to the given color for an enabled button, and sets the icon color to the given color unless `icon-color` is also used.\n`disabled-ink-color($color)` | Sets the ink color to the given color for a disabled button, and sets the icon color to the given color unless `icon-color` is also used.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color)` | Sets the outline color to the given color for an enabled button.\n`disabled-outline-color($color)` | Sets the outline color to the given color for a disabled button.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web button component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"@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/density":"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/button_8.0.0-canary.85abdabb7.0_1596068144760_0.9083690778648046","host":"s3://npm-registry-packages"}},"8.0.0-canary.49fb20ca3.0":{"name":"@material/button","version":"8.0.0-canary.49fb20ca3.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"ca02e61134a7261cc01876e4bc7a71b1d7c73508","tarball":"https://registry.npmjs.org/@material/button/-/button-8.0.0-canary.49fb20ca3.0.tgz","fileCount":26,"integrity":"sha512-ISt2b6yzmzwnuWSHwwZhIYS4WnFGVxPAHBUM8ZTDeuV/ODqe1wfh9/SXScHW0rmYnF2NO13jfy8SabgJ3Lakrg==","signatures":[{"sig":"MEQCIFHR8UCfmT4FllAwwnqGkCqQoHhwjAcuePw3M5GtXTwLAiBgdByGDaFjRGV/jXKFlYSfvGND5NoMc8H30+NaCSML1w==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":409024,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfIiIkCRA9TVsSAnZWagAARp8P/1qprLpcJmvFTZGLVP8f\na/tcrWLDoJYbWL9xBalkmzchRigGm4jfvo7rpVsKQ3aDhAC3aa3kpXEhdRDN\nV7ZsUUGf7Uz5ET5851r3moPEnGIUaPH22l50zVaD4TQGKeaPcN208bZLhJRh\nvXIvwCYnIh4wAjyh8k5KgVZnG/mUe2Nhp2dX/p6er0bj6p0pRJN3bz2QtIZo\n4nVeHzu47jAfxc68+j4r75Hgz2Caam64cHTyQmLOoNWNwXAFKTcv5YsXne5W\n6UBMmbsEfN9tMmGc6rYWffrEAnH5L/FmYuyTD8CCkyTf8C15nZOIU/AyFRPa\nwe04A+hxNK/nWp/YjY0fzgY8I1/ZXUbFT1SvD+y1CGSF1aANsMr/CzUDFLMQ\nzULfsmwZusIiwAHqyC0jnbzER0Q6tg1z2ENmTVJc5UYTspO5sI1r1Qf7GFdN\nVxbojOpnaJuK4zOrvA4zKAb/qnGGz66bCv3ltOH7ez+gwWIMYxqv8Q/iPUQy\nw1uPOj9hb/QIg92IaHZ+qo5E1kIsiHCYbhO5YgyS1tCpxpHIU6dCTcROWSj5\nsruEaRu69q1ZXqf4v2BK59ckyZhFcHBofXv3TOLHkAWT5aLptOOSoU+7nmNv\nlBsqaO/l06kMlf9J03qxEDu8k/kGTrLIyuuBPdVzt8Kvw08SMqQK31aAwATv\nh6JI\r\n=n2vF\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n#### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.**\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n**Note: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.**\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n\n**Note: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommended to\n always include it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color)` | Sets the container fill color to the given color for an enabled button.\n`disabled-container-fill-color($color)` | Sets the container fill color to the given color for a disabled button.\n`icon-color($color)` | Sets the icon color to the given color for an enabled button.\n`disabled-icon-color($color)` | Sets the icon color to the given color for a disabled button.\n`ink-color($color)` | Sets the ink color to the given color for an enabled button, and sets the icon color to the given color unless `icon-color` is also used.\n`disabled-ink-color($color)` | Sets the ink color to the given color for a disabled button, and sets the icon color to the given color unless `icon-color` is also used.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color)` | Sets the outline color to the given color for an enabled button.\n`disabled-outline-color($color)` | Sets the outline color to the given color for a disabled button.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web button component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"@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/density":"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/button_8.0.0-canary.49fb20ca3.0_1596072484188_0.3258007452088456","host":"s3://npm-registry-packages"}},"8.0.0-canary.962d4abbb.0":{"name":"@material/button","version":"8.0.0-canary.962d4abbb.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"20ade6aaf2e62a2279e6600126bbff9966711c36","tarball":"https://registry.npmjs.org/@material/button/-/button-8.0.0-canary.962d4abbb.0.tgz","fileCount":26,"integrity":"sha512-laI1jIPvYbhiEtlb4XK9oAU/3VwXQOWnbiq21xqgMzxWmXay3P901/z8b/277cqCv01ZSxz8wA53YAcHlVk9lg==","signatures":[{"sig":"MEUCIQCwlUT6cXgTgo9qtTKdZN8W+e1EqSEEwZ3PxRsTzMEXzQIgJ5yVUCSDbx6AZeovFpRB4K3i4PEsvc4UnuDpOeN7Xaw=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":409024,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfIvEACRA9TVsSAnZWagAAP1gP/3J/Fk6tIKscNY3VL7D+\nC8+6mbDvPq2uUjVRC3DTd3RQUqJ76l8jC5+IaBJjNImCJlReom2bnUMeiazG\ncYax6WFRLh2yL1kAVHXKboqZPNNPKRe1sDU7RmVm6TLnmd/jf/etAGri8G6Y\nYY5ePjgJE+4r1FPNeJfAuilUVgyT0Ctg6K+GC4TNvSifHMyIXZ8qhKI2yR4e\n8BNGLFnLuiLaNr7o8OHe8i6ipFzZoqCdN6Zme62i5618baUoLxhDKwSm+uad\nEntkSFfyhZQVx8FsmAdwR+0sp04PfxOzKlbQdidhxFWKZ9C2r0L9zR4w1XzO\nd1dytnqienS4JvoFwKyW/aHeLWPml9uaAd1XASyEnNlALZxWiWCc/cJpIVyi\nJkXohvNu/ulLXf9L8lgOqjjnNBnCX4z6z5PHsT+X5YxSD5iBRR18OsgeQlqZ\naDiYak7l4tD/1VnMKDm4LzFaIT3pPHYmwJR1ffllHuxeCvUQjWvdm6y412Mq\n+Bwv/UrvIMWRJ8GJ6xySiwMlFkqC3m5S8aIJ0JQr+EFey062FlumzWkt8kf3\nzLnlLdOIem+5QDdsjsana3XivWCrs2qab5xxad1/S4aWCI1GDqe37X3psrs7\nTj4h12IdUrId1IPBR94mi/J4XzR9+P02E39loeAkglUWqW7D7dVLSFC8hhVY\nxzmE\r\n=vtY4\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n#### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.**\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n**Note: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.**\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n\n**Note: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommended to\n always include it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color)` | Sets the container fill color to the given color for an enabled button.\n`disabled-container-fill-color($color)` | Sets the container fill color to the given color for a disabled button.\n`icon-color($color)` | Sets the icon color to the given color for an enabled button.\n`disabled-icon-color($color)` | Sets the icon color to the given color for a disabled button.\n`ink-color($color)` | Sets the ink color to the given color for an enabled button, and sets the icon color to the given color unless `icon-color` is also used.\n`disabled-ink-color($color)` | Sets the ink color to the given color for a disabled button, and sets the icon color to the given color unless `icon-color` is also used.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color)` | Sets the outline color to the given color for an enabled button.\n`disabled-outline-color($color)` | Sets the outline color to the given color for a disabled button.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web button component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"@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/density":"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/button_8.0.0-canary.962d4abbb.0_1596125440259_0.697226587676691","host":"s3://npm-registry-packages"}},"8.0.0-canary.2fcee40cb.0":{"name":"@material/button","version":"8.0.0-canary.2fcee40cb.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"dbe1a3cfe705a1ab5688b6b271b18f7043215910","tarball":"https://registry.npmjs.org/@material/button/-/button-8.0.0-canary.2fcee40cb.0.tgz","fileCount":26,"integrity":"sha512-ghbtMubAf55IZ1LqajYZsURtyM3U1lyCSITTcY3/26+1p9dGZhuanvGrGcINbmQTia5u0Z+vDditJnrS0f8Vlg==","signatures":[{"sig":"MEUCIEs2K8X0cRsCP0KjYlieghuBiJJGFPUj4zR/GRTlI0JTAiEAtVHyO10oh0zQiBPJovSFAucgALhW9af2MaF0qtzNRSs=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":409024,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfIwG0CRA9TVsSAnZWagAAn5AQAIl2JmQQ9FdGOA1Gccso\nPjzfOzXorrsslAf3fLAnnMUIlDA4LBkFuMlmiNfiGlEmpmFAZniFH1tdjySs\nx8TLRd46ZqZbyakiajjMlVa5einsFfg0Aw1SZyK5k2wf20LvE3vo533pmFCr\n+p8O2hFGriH6qNjY24oZMBiFacgCsW0KaBAgeDBn9ea5snebOra4q3Xy1UZH\nMXQjvnhwq9y4hnXTtcgZAf+v/MxF6sjOTlSg+IM7kMhVeloPOETBHDgWoaS8\n4cN/TwmH5QzQuK3VyyH4aMoB0JeP3XsfbGVDHYv249d0ob5hOwPmCPD9go3Z\ndN/GNOGImZa24eDgsb36rf5nTd9MNKnYTKt42o+7Fgg6llgOw9ALNStnTlPz\nm15EFbBiuES992/r6ohWV5OQuz5fi2NhadT2loOQkQmkP+sHTnzfgWS20XrP\nfFI1olSPncmdbJ8AKXp0vu9KB66uS5tI/K5B2x/ICCI8/NzspPGkObWm63MA\n0nWbaTcE9R/ZQsMrqm1vG/JRuCL9ZSBcdAEqX9GKjJqN7gjOs5lnN35jNUJi\nr79F+oJxD5pdEOoV5OcMqRSdld1OWEgmPgtQIFfCEjyzPSPdivSXX6tCPA0T\nOeXZtI1OebvvZyy0YwJS/Nm0FCvgH+Hnx1xh2oCWypRDrx47QPJEnUMnHNM5\nyDjg\r\n=wDY0\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n#### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.**\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n**Note: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.**\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n\n**Note: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommended to\n always include it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color)` | Sets the container fill color to the given color for an enabled button.\n`disabled-container-fill-color($color)` | Sets the container fill color to the given color for a disabled button.\n`icon-color($color)` | Sets the icon color to the given color for an enabled button.\n`disabled-icon-color($color)` | Sets the icon color to the given color for a disabled button.\n`ink-color($color)` | Sets the ink color to the given color for an enabled button, and sets the icon color to the given color unless `icon-color` is also used.\n`disabled-ink-color($color)` | Sets the ink color to the given color for a disabled button, and sets the icon color to the given color unless `icon-color` is also used.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color)` | Sets the outline color to the given color for an enabled button.\n`disabled-outline-color($color)` | Sets the outline color to the given color for a disabled button.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web button component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"@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/density":"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/button_8.0.0-canary.2fcee40cb.0_1596129715786_0.4344963327816951","host":"s3://npm-registry-packages"}},"8.0.0-canary.bd5987f5a.0":{"name":"@material/button","version":"8.0.0-canary.bd5987f5a.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"63b1aa42760147beef3964b0aacf9305df3a6e31","tarball":"https://registry.npmjs.org/@material/button/-/button-8.0.0-canary.bd5987f5a.0.tgz","fileCount":26,"integrity":"sha512-pluwe9Bamdg6jJUWKvoH4nxKIc2OAwvz/mWGHVYwUR2VJFTkgf6cdnAcDRQPguFDm9d6BDOS6mIX0Nasm1XzMQ==","signatures":[{"sig":"MEYCIQDMfJ31cWUKTE19cYNLUg/9cwR2P6QskMM5TteGBU8GAwIhAJ5m/AuImNnQyK3h5RBK+jpBfjupUpyX6YuJPpGTSTTL","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":409024,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfIwd7CRA9TVsSAnZWagAAB28P/1AfPb5aclLEHYgPzaxi\n1wUHMYNN4EJnIq798NWUt/nxefmYpjXuCxejOOEWTI2gRMdye7JJbIRYQMkL\njubzoXOSr2ZZsziZqvRq1VOqZymim31O+pl5CstviruoW2rBDqr+WXc2Waxu\nI0XhiO9Ljx+v24p8GKYjJXYr6GttJxV9OVymuEIl/ecl1+X8bZrjCdNhztHM\nxff4PcdgqFI2Bsk6K/LaX9URo82SNNhiFIs/gRQzlUhmKsWCv7gkDgnVpm4C\nYOQTWIxuGNOAEs3rKerlwhvXGJ3bFpdNeWEaNZWCG39Py9y9zIfeygPiRoq0\nBdH+vBl/U+8EOGWOjepsqqgSD7SflaISsoLppZDdasm9uTEyhpyhb6iGZ9O2\nzQBDZc85CMAGF3crI53SoLG6f3Hzx4xDinClenxpzWD5CdqKUh/6tsmA2kBh\ngIARftdJi3xJVl4jh3XgDJvN57WC3mPgLtHD0ykVmqRuSfpsuYHmakjJsZk8\nGMVlb84jgZTmfqR4/POgU1mF0IqL3cJyW3qlySU4xP8s+0JQMhxjMDwKoOpb\nDnMGmQfy4YMBpfwCqJ0RYGzbqcLLKtxb2RIL9hA/8oXVCn+wfy8o2vHttnqI\n9TPMkdqApTQ/c5FEdb8u18mNld/3/MILZsWcYF4gHi8vKNvqf6s2HUHiECor\n30FY\r\n=PL+B\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n#### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.**\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n**Note: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.**\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n\n**Note: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommended to\n always include it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color)` | Sets the container fill color to the given color for an enabled button.\n`disabled-container-fill-color($color)` | Sets the container fill color to the given color for a disabled button.\n`icon-color($color)` | Sets the icon color to the given color for an enabled button.\n`disabled-icon-color($color)` | Sets the icon color to the given color for a disabled button.\n`ink-color($color)` | Sets the ink color to the given color for an enabled button, and sets the icon color to the given color unless `icon-color` is also used.\n`disabled-ink-color($color)` | Sets the ink color to the given color for a disabled button, and sets the icon color to the given color unless `icon-color` is also used.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color)` | Sets the outline color to the given color for an enabled button.\n`disabled-outline-color($color)` | Sets the outline color to the given color for a disabled button.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web button component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"@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/density":"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/button_8.0.0-canary.bd5987f5a.0_1596131194644_0.20080141614030222","host":"s3://npm-registry-packages"}},"8.0.0-canary.005e86a9b.0":{"name":"@material/button","version":"8.0.0-canary.005e86a9b.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"bfb90f0cbe79f07a2c8ae697ee80cde57b8cafcb","tarball":"https://registry.npmjs.org/@material/button/-/button-8.0.0-canary.005e86a9b.0.tgz","fileCount":26,"integrity":"sha512-FN+8VK0a23osugSaM5H9HrvfWhmApT6j9rayt9kjPjfGi0RdCGTdqdTJ72k3QgMKhCLhwtb8bZWka4HjaXF4IA==","signatures":[{"sig":"MEUCIFeeNo1Mx7alOSk4lFUNp/iytqze55b4ehg8koHwbTDaAiEAiek36FRPO8EDjGBP1KwvlGieDlUf/SjCMcXY4I0oToY=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":409024,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfIwq4CRA9TVsSAnZWagAARREP/2hFaAd8Ccnxe20JfBUV\n811TR4XtzeTsbYlvc2D0zZFIKEVC4M++etsun/pT3sx4DLTNJ5oJyYRwr5ep\nJlHiSQZPSuYVbNoVFovBnvK7gAw/NIBD50E8v68qz+jC0iZa2pq+1F0b7TK5\ndODKdnDx1FyxppTfN38hR4UTAPNA5ApGw16liMYqxcESY7GGKAmZvxDNoSW6\nXCEUN/E0/xiE2FKxtUkHYosIDrRzUldq+kt54elUy04kiS2U+4jgOYR751pc\nOPt3nlWDpdKkOrWq4EZQKxI/zcCNoF0+atvthgxkUDtMuFnKo95sJXRmkyqu\n3qEfCaN3XZwb6mrxuZWsiEyLJ3lRAwXkDdA8cktlapE0dmFc3PCx4gBA327c\nVgk38xueTL0Q3Kk8RRL/5r6K1NOdcqLVeL/BQf2X4+MvCCeAcJFItw1KYVId\nDTLU9yJYxC3x5XeEukeBCP3VKfr2CSi4wZHljjuzY/vPnqR/3Sx1L+V2yqfE\nn95bIOp0kit+z5q2Z/xY+DBTp7KN5mflrG5bFkEVJSRhKX4Fk7NgN5hMYP6P\nmmBwIK+PZirvHJetMmQGD8JcC8l2kVfZgQtn6TXLq3ZnD3tbfQbMTlEl99Eo\nAXicSk/DwMsJ3b81dvuJX0FZxTxaVnLXC5M7PdvbpGf7rtmjPVI8z4JSZhiM\nTEbD\r\n=0Dge\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n#### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.**\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n**Note: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.**\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n\n**Note: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommended to\n always include it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color)` | Sets the container fill color to the given color for an enabled button.\n`disabled-container-fill-color($color)` | Sets the container fill color to the given color for a disabled button.\n`icon-color($color)` | Sets the icon color to the given color for an enabled button.\n`disabled-icon-color($color)` | Sets the icon color to the given color for a disabled button.\n`ink-color($color)` | Sets the ink color to the given color for an enabled button, and sets the icon color to the given color unless `icon-color` is also used.\n`disabled-ink-color($color)` | Sets the ink color to the given color for a disabled button, and sets the icon color to the given color unless `icon-color` is also used.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color)` | Sets the outline color to the given color for an enabled button.\n`disabled-outline-color($color)` | Sets the outline color to the given color for a disabled button.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web button component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"@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/density":"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/button_8.0.0-canary.005e86a9b.0_1596132024186_0.08350410967712074","host":"s3://npm-registry-packages"}},"8.0.0-canary.e309c7c68.0":{"name":"@material/button","version":"8.0.0-canary.e309c7c68.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"1ddd3148930e29df1a7280384e81bc6d2706e801","tarball":"https://registry.npmjs.org/@material/button/-/button-8.0.0-canary.e309c7c68.0.tgz","fileCount":26,"integrity":"sha512-nDaU40RXbqW2UpiX1vZIcq18yKT35e8RjuaDV32OIWxY9hbucAurNR4WtCFptxLL4qtQja7w29Slp06DTu6dwg==","signatures":[{"sig":"MEQCIFnyk0bPsSKIFxH4g9szxrf7Fgy5YPfoadpzWYTdpD2SAiAND5+29KBpk/Fn8zySwUo2obMjGjMs4r/AHctdzqo8+g==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":409024,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfIwzDCRA9TVsSAnZWagAAHi4P/iVa6C4BOKSK/R0CFGfL\nZZenR8E7gNr+UHDR4ptiu5xDe+8OdSmHSVN4+Aoq9utGfjENocPV+IizI9ka\nkJzKwcTl2sJQtDS+2vroeTVhKXG7sgN0E1bI+nupmZwqYC/StB9g9fx+x5I+\nEJof9pW/XECe6zy4MuVmlVGLCJxFe0lHUDdGIQAbqKk4ai1GcJw+IezzuS/P\nZ+Rl2sJrA7YMUW18ZE/1/3hvizbrlAl3Kik5Vrol5i7BNxsRASvHmk65RYoy\n9oKej3gaGZFSjgNdDJf6a3RFMChTnSvFZBoGI729+RWFmZ/VYXO80+jJce9g\nUZbM1PbuCozJE3qTSynrBmrSU3DJKyUHU7A9LgMuN3GHLkPEZI6FsqxpnStn\nLZRH21BxPtfw6r8TKYyVmrsClWxDGUkyTMGBvENmlvTvATIXNttkT7JZvyq8\nKAL6xXmm0xmO9C8icSBISJm5KkudjblREie38tymi6sbQn7ZRKJ13v2gH3u/\nJLeH5qa4zQxGJbxQfYqHCm9nW8JwUHwqi++mqLTbVTwDKNx7kuBHdea+F1rD\nMectJIbVrr/iZ6Rjmv8NTPMF1xwJKLaoJWQkwINQ5GU2nyUZ9xmwyS/rSMNU\nEknkX4naZCsZ1+0ndHlaucshtaKqLFVTDN7YJLzHHtm8nIN0rsy3t3088e3Y\nYlGx\r\n=VKca\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n#### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.**\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n**Note: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.**\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n\n**Note: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommended to\n always include it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color)` | Sets the container fill color to the given color for an enabled button.\n`disabled-container-fill-color($color)` | Sets the container fill color to the given color for a disabled button.\n`icon-color($color)` | Sets the icon color to the given color for an enabled button.\n`disabled-icon-color($color)` | Sets the icon color to the given color for a disabled button.\n`ink-color($color)` | Sets the ink color to the given color for an enabled button, and sets the icon color to the given color unless `icon-color` is also used.\n`disabled-ink-color($color)` | Sets the ink color to the given color for a disabled button, and sets the icon color to the given color unless `icon-color` is also used.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color)` | Sets the outline color to the given color for an enabled button.\n`disabled-outline-color($color)` | Sets the outline color to the given color for a disabled button.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web button component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"@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/density":"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/button_8.0.0-canary.e309c7c68.0_1596132546658_0.8773475603163761","host":"s3://npm-registry-packages"}},"8.0.0-canary.935a51cc0.0":{"name":"@material/button","version":"8.0.0-canary.935a51cc0.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"6818499a191628c057a3c3c6025278b3722bc13b","tarball":"https://registry.npmjs.org/@material/button/-/button-8.0.0-canary.935a51cc0.0.tgz","fileCount":26,"integrity":"sha512-pxFQtb0ohDU3x8CPJD4R8ESvUnTwmyVKjYHtC30KDp4oid+C2dbYJWKJGuv0PW7vHDGpHtxoTQp1QKAid+Mavg==","signatures":[{"sig":"MEUCICvH3cPYwCtSjuabcMpnoF8/U7AQwB7Rz901a2E41tkXAiEArp6XCcBl9xCzye40jUFdWFqYvafVqhYnU9umLnJLZCo=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":409024,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfIw+ECRA9TVsSAnZWagAAHVoP/0+gLZQQSuElBpQJfSWx\ns64jfc+d3Xc1tuSnFvqhTh/UDxQEWA5ArwMuLuCItTsHs0n3m64Opvu+y3l1\nS+w13DpuLOZWKRJsJD7yRz0FonkoyJCtj1PikXKsCdLYq709y56iRcisZBj+\nvv9S3T0YajSa2H0pwu2HEshU1yuHHB4Fku4DdZYTEwKWKS+Sbimqzqh8pn3j\n3S7xc4YGoMDnJefEIH01NDDRiIG5BorDSDG6ImRR5WlBJeDaQ/J3K6YGFbgv\nvqpiPp8jUTPcle+5aAn+9dyGFtVg0eimYeBnsFE/hCrCctMD0wnuiRQLAmfx\nkhpsqa4vSK2c7iHIp1RDGOcjQ3z9n7F4SwASXPf1nlksdr/g24tOIK509wjC\naDu7U0QJt1axV1O5GkxAVFseUu/bpjgfrm1/sTBU9Eu7yzJRhEmhp848wu5M\naVMBqob3odBeipdxsYrZh4MvjeVBLixTxYjr87owj+onW3B9BXMhD7IjrQ3p\nkDPA+ADiCAnGOV58S3Oxvcm516XJ6CIz90T8rdmMK7sfFE0vi99qFFxx0nxK\nSNu2ERF5Dxn9CSszBCQn9s/zaLySlBRr+3gEXmRyj2qjWGxvEFYEsG/t8R4Y\nS4TnNUU1aqBM7hqCIehqs4HPnE8kaV+vBCuoPbg/uxbRJoKaIFAssZFbw8+u\npi6p\r\n=qa+k\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n#### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.**\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n**Note: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.**\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n\n**Note: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommended to\n always include it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color)` | Sets the container fill color to the given color for an enabled button.\n`disabled-container-fill-color($color)` | Sets the container fill color to the given color for a disabled button.\n`icon-color($color)` | Sets the icon color to the given color for an enabled button.\n`disabled-icon-color($color)` | Sets the icon color to the given color for a disabled button.\n`ink-color($color)` | Sets the ink color to the given color for an enabled button, and sets the icon color to the given color unless `icon-color` is also used.\n`disabled-ink-color($color)` | Sets the ink color to the given color for a disabled button, and sets the icon color to the given color unless `icon-color` is also used.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color)` | Sets the outline color to the given color for an enabled button.\n`disabled-outline-color($color)` | Sets the outline color to the given color for a disabled button.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web button component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"@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/density":"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/button_8.0.0-canary.935a51cc0.0_1596133251767_0.46069099221838417","host":"s3://npm-registry-packages"}},"8.0.0-canary.74839da7b.0":{"name":"@material/button","version":"8.0.0-canary.74839da7b.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"cae09163788283da248c63fd154a0ff41292db86","tarball":"https://registry.npmjs.org/@material/button/-/button-8.0.0-canary.74839da7b.0.tgz","fileCount":26,"integrity":"sha512-WjSbvW0k8v4CZ/XV5JFiuyNkY0HKPYr4NItgv6F5R0SRSyEbtNZgYoyTgibF4oUyMhR8DExo9DG01M2X5/XHag==","signatures":[{"sig":"MEUCICRitp6J0zo9HudNRLNheR9KLwBJgMULWqipg6hTShVzAiEAvYKV2rQR1VXJEebCLuxxeiDPv+x2C81nD7+4Qk/B6Fg=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":409024,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfIxIWCRA9TVsSAnZWagAAEeAQAIjNeafcnSguwwRMKspV\nx0vlCSRq2GFUaHxfqgBokwVLZMEymhnjKyrDbIw395mn0sb6oerEj14TLOwK\nvLNlIkf2Htl2Fyas1IMKqx3P4Jx1RuyqFzRlJ8ZnGLSrW7WVhhXeT0whSGPt\n5hsvg5azrLbIa2nx/K00NciD1eZDnWn4Kw6svrtWsnFx55A9qpWrpQhTSSew\nfzID0ZYmmkEEUVxyC9ctypmCRoTuz1OGGGcNByWXZLhSy5shg1gg1qPS29NX\nh9Sfn76Pm7gJ2MCZF40MTybv8X464IZPrkJiZRw3IpIO4lBnvoaI2LAKghHT\nZQn9ZOFxBXfo5nMCHRbWuyvjfv18XNXSZlkpfI14SY8PKvGhTzypjIB/8q+d\njWVadBM7dyAe6tx8uAwHr2xV0T+00pzmtLIALm2+W3XjIGixcRnM8DsIOouS\n5S7Z35a6Ckl4UNxfNjZRrZwCquXRuaOJnDS/DIHLFQ73or+th/i9Powu+vaL\ncnWlv9M1LtZ/hUs+isl1+BAhd7d2s1uMft6nYzjKl49JVDOmyjfhobusKlQF\nXr+W+LjzOA6SmLfFlxn3NibwslBGmLqZkr2ZSuMX1f7Dizm+2L+eUu120dhx\ntl3luxq9EHoAPsnKnEVt8K63DBMrzL0OVXU2BUQzCiECZP5Fyr0ipGSZzSSh\n7xoS\r\n=b4jG\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n#### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.**\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n**Note: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.**\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n\n**Note: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommended to\n always include it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color)` | Sets the container fill color to the given color for an enabled button.\n`disabled-container-fill-color($color)` | Sets the container fill color to the given color for a disabled button.\n`icon-color($color)` | Sets the icon color to the given color for an enabled button.\n`disabled-icon-color($color)` | Sets the icon color to the given color for a disabled button.\n`ink-color($color)` | Sets the ink color to the given color for an enabled button, and sets the icon color to the given color unless `icon-color` is also used.\n`disabled-ink-color($color)` | Sets the ink color to the given color for a disabled button, and sets the icon color to the given color unless `icon-color` is also used.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color)` | Sets the outline color to the given color for an enabled button.\n`disabled-outline-color($color)` | Sets the outline color to the given color for a disabled button.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web button component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"@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/density":"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/button_8.0.0-canary.74839da7b.0_1596133909874_0.9303376635283653","host":"s3://npm-registry-packages"}},"8.0.0-canary.f041a48c9.0":{"name":"@material/button","version":"8.0.0-canary.f041a48c9.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"5d6859e3b91efa03b7a0802b7c443ae4d3b0b998","tarball":"https://registry.npmjs.org/@material/button/-/button-8.0.0-canary.f041a48c9.0.tgz","fileCount":26,"integrity":"sha512-SdDpUiAAwakXT63Ze6pOpht9P0Fazpp+XE3Xxsy8GPh+go7fwnaxxjNUbipS/ksBVW9YsBemMi0rYO4QKrFDsQ==","signatures":[{"sig":"MEQCIHtIyGS1400Gwb+wMjQq15iFXfsqhf/uXqB6EQhiQo8lAiA1J19BeosFD/nwfWe/IeAKrINIOibSF0YuVZLrkRtOHA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":409024,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfI1D3CRA9TVsSAnZWagAA7PEP+wddP80kFlNP/TxnNEvQ\n4Nq0sIFPbuZD3Ye8X11Ev8V8jnboLbPeG9BmDBuJjQIawQn5PTDZvjdhVqqa\n6yRnlqiwe/m+PPDil8vfRhd1/IF4Yr+5BxbJB4Dm0t8xMuhPygOZwQ235R6O\n6+gZYiFMsE5tn5xf0QEfCP8qDReqI4UZQn/OOXwtFUbDWAYl7qLvN3tRZlh/\ndel8SDqPqh98pqX8NPb7mz4Lvw8TGPzVgzDWmCvrwzAVLOXilycVMQjw2/YA\nxq/4yYTxMeHx9Oi/h2X0SqMeXG2bB9Pe3AFTC7yKAWyaIrV23x0b54+lJJyU\nY4QWd+zltKKFhe9fJuo64RhlL7lais5UPVa3yJfr0Zy13fxu2uWuHwBVZbeS\nuiD6m3cL0VG69PE/UB/C3mSh/jUZXFNcBYqxIdpxTQhe7lNb9zfwvJNOlnPr\nnGoCDFuD27I/618joJL1RZi+WU2hALIUTcfSZv3A1AeBSjtdjalAuLLaPEPJ\nUceyi5cZP5OcU3EpPPzqckyjk8x7HICfmLKJk1BhCfL0ZFmftxf+X/G2ZMhl\nMpQJz+CCsOF1BeBzLSNWXN8ra5fCrHfkwsVmDWITgZpoIsfW6+52kY6T3GUh\ndhr9iv9fys7A+c+h5RInPDXMaZTRPBoZ9EJun/p9k8A67njl3cCVtw4/vhIj\nR1cG\r\n=ZRIc\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n#### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.**\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n**Note: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.**\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n\n**Note: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommended to\n always include it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color)` | Sets the container fill color to the given color for an enabled button.\n`disabled-container-fill-color($color)` | Sets the container fill color to the given color for a disabled button.\n`icon-color($color)` | Sets the icon color to the given color for an enabled button.\n`disabled-icon-color($color)` | Sets the icon color to the given color for a disabled button.\n`ink-color($color)` | Sets the ink color to the given color for an enabled button, and sets the icon color to the given color unless `icon-color` is also used.\n`disabled-ink-color($color)` | Sets the ink color to the given color for a disabled button, and sets the icon color to the given color unless `icon-color` is also used.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color)` | Sets the outline color to the given color for an enabled button.\n`disabled-outline-color($color)` | Sets the outline color to the given color for a disabled button.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web button component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"@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/density":"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/button_8.0.0-canary.f041a48c9.0_1596150007215_0.045517846254375716","host":"s3://npm-registry-packages"}},"8.0.0-canary.fbb1381e1.0":{"name":"@material/button","version":"8.0.0-canary.fbb1381e1.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"0a3f4df6217f8f9d370b62bb2c1f26026e800d7e","tarball":"https://registry.npmjs.org/@material/button/-/button-8.0.0-canary.fbb1381e1.0.tgz","fileCount":26,"integrity":"sha512-3Naj+42+mGCf6iL7mFc+F9U40GLZjEubV4RzGNP2Yb01q7JkFGdljlsPzqoGsDpXJYPT083J3znzRWgSLS6WJw==","signatures":[{"sig":"MEUCICr0N0gLt1j96uJo3TupHKIQuDnhTZDKNdTyaB5JG7wTAiEAqxKacJPujW8p6WmF4L8rP3ZsfkC9FJivWzQogtR6vo8=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":409035,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfJD3dCRA9TVsSAnZWagAAInsP/A4OHWAJHRuEbm8zU66o\nBtxYmUJboeZarldqcdyiw70qHyyI4Yoa1N0NOQu7DiD7SBWDRqGN6ZKSt647\nUZEEUBQroRW7y3kOB5ZEad37zKsFoyu2ci298ieCQJ+ExcvNR1Rkf5xN8Z4s\n7ZTanVrozIE1O9+fCBkL+YmsAqH7Fz3xQ5j2B2Txe0hAZQtPBOexOejpyrmE\nDU9fmGkb67X/F1l261ZfDPyV4yuxrVT/Pqx4WjcEcrxR/3Q5SpZ6wbqpPwyG\n0GWDGtjqkkU79bxPFwtoP+THcoyR24V3peEVGY1UsKmh6mXXnP4mwvjxObHf\n7gXVsW3gsYpGfDXwyQ8AKPziZSs7Cfi8wc2RezHcI50h3qh51ZVUBV2v06k9\nxuake3Qv9nuYd7ia+K14qD6eU4CKQiM8UEu7jfmKjUJ3YqnYfxpu+DPf6syW\nTDa1qE4kIT1tKftgBrwjz+nIam34mEi5Wqdj4x9GUKu+xqZuUL8lSKdwutLO\nAIzpJ66oFMUqCh0Z6z61sC2e3tCpCw2Qi4V38/I3m88qG1F2yPyEpTNEt5U8\nwZPmYTY+ojJrOERzl5ZO644qLlGd624YV4pkYNv46xNNjGHeB+7tcCHH+1lv\nrt87w0YrxkACUYA5KODveBvYTsSg4oghQDkg8l2jNSyOdhIpWBqcgfnCRJfg\n+dLp\r\n=Mtog\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n#### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.**\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n**Note: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.**\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n\n**Note: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommended to\n always include it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color)` | Sets the container fill color to the given color for an enabled button.\n`disabled-container-fill-color($color)` | Sets the container fill color to the given color for a disabled button.\n`icon-color($color)` | Sets the icon color to the given color for an enabled button.\n`disabled-icon-color($color)` | Sets the icon color to the given color for a disabled button.\n`ink-color($color)` | Sets the ink color to the given color for an enabled button, and sets the icon color to the given color unless `icon-color` is also used.\n`disabled-ink-color($color)` | Sets the ink color to the given color for a disabled button, and sets the icon color to the given color unless `icon-color` is also used.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color)` | Sets the outline color to the given color for an enabled button.\n`disabled-outline-color($color)` | Sets the outline color to the given color for a disabled button.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web button component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"@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/density":"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/button_8.0.0-canary.fbb1381e1.0_1596210652899_0.7988332260292705","host":"s3://npm-registry-packages"}},"8.0.0-canary.7f61d5785.0":{"name":"@material/button","version":"8.0.0-canary.7f61d5785.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"ce893b44532bf5d8f1b7353a102e129a0c1f654f","tarball":"https://registry.npmjs.org/@material/button/-/button-8.0.0-canary.7f61d5785.0.tgz","fileCount":26,"integrity":"sha512-kdmZFzDYmPJglxQEy5R2ZNL1iYHmOR1SExNml6btmVS4RsEkUOPQg/zw9qODXOoFLrQkas2wgddXYXhxhp3LWA==","signatures":[{"sig":"MEUCIQDFLZ2WGJlvzm7viVzVKpT63+12q0oIO89Icsxi6skRdAIgPTntdakGCoUVwldIYq/v64tgoeJ5kc53mDSdwz9J4u0=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":409035,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfJFOQCRA9TVsSAnZWagAA7EUP/1TVUTKwL2daYl3ZKGsx\nm+F88SDK83FsQdXPTyZ4wzNcgmLjPzg2Ai2WdFa/nash4V5WJ6DrnPRTDmSn\nBlK6+Uj0HreYPSZVFM41tsnHdTd5oNrdyz8Iy0FxktHX02lkhFObAzDyeWNe\ndWIthLh5KCT50oHyxcZrU2Lwpe+HCxqgQZy8UKHWDWzpq5Q+3wpUU3dIzvER\nesLIKJZWlsL+9BYBHiBVga+qEldujEeweqI7uI2pCJBvjSnHOKjqg3UVB4pw\nBwQYFdLEGjTSCe0g6XkMNWih/kMIzOboVBO0WDJSXb5BxhwFnPLvV/ivqPnR\nIT3iAwW9mi5SkZc9wDFu0a0A801NvdA+71hFmNkwSUE43ItRrBoFJRtgmLiv\nv/pSyZvuoYZG3/BvxVZFvKOy1C/At5sQM+Tx0LU3bZvvRCL24e9XkTu51epB\nVrdtzZn7l2+WcsW9jR4hrgcB0VUiVlfi1gudGuoTsP7jSTo2PP6BGW0movBN\n4KxPoW7tbASGTETMdV/bgbLPXAlphcfGfKtPiKU98jiqxPLHbLO7TM16ckLQ\nEXUKGWQetSsU+ql+aGNt0Yu/hbiX12XRCQ+i/CFTZgrCtkEHgh8cZj6+n1hd\nZwRerJ60aBs3T0RzVq1VtOXzgk4oOfHhicUfP0fXdTuUggRqa/7YYfulNee7\nD5dR\r\n=HBs1\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n#### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.**\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n**Note: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.**\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n\n**Note: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommended to\n always include it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color)` | Sets the container fill color to the given color for an enabled button.\n`disabled-container-fill-color($color)` | Sets the container fill color to the given color for a disabled button.\n`icon-color($color)` | Sets the icon color to the given color for an enabled button.\n`disabled-icon-color($color)` | Sets the icon color to the given color for a disabled button.\n`ink-color($color)` | Sets the ink color to the given color for an enabled button, and sets the icon color to the given color unless `icon-color` is also used.\n`disabled-ink-color($color)` | Sets the ink color to the given color for a disabled button, and sets the icon color to the given color unless `icon-color` is also used.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color)` | Sets the outline color to the given color for an enabled button.\n`disabled-outline-color($color)` | Sets the outline color to the given color for a disabled button.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web button component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"@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/density":"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/button_8.0.0-canary.7f61d5785.0_1596216207660_0.7909544448464025","host":"s3://npm-registry-packages"}},"8.0.0-canary.e1bc84d10.0":{"name":"@material/button","version":"8.0.0-canary.e1bc84d10.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"79f9edb8de107f1f8c676b42649b34f446f1c803","tarball":"https://registry.npmjs.org/@material/button/-/button-8.0.0-canary.e1bc84d10.0.tgz","fileCount":26,"integrity":"sha512-9ZpzWmk9wE0h6uscj1IZXGzk5uQeSKtpfUKK1vg3rNL09ExLKMfMJ2yxo9C12dD1UEWJzSXuTt1jNUZaM2PklA==","signatures":[{"sig":"MEUCIFF9wQnrXLj8kU+K6J0ZeCNG4cT0EhcOvRrZpZeaCVCZAiEA0m0w9tITZnI/4Qp1NEGzoIQENDFZoi9BrLPPa7RNNWo=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":409035,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfKE6TCRA9TVsSAnZWagAA/ikP/1KPoeO5K5MwltuIbUIx\nMw60ew+rKmYiHbNstNq3cn87yIhH7mPpvPokAED86L8bXpAoyQje70LZuRUI\nLVkYzyDCUjyQZfLkVpkEtHuXunCkxcmrjfYjfhr62KDT+f7sDLqWPugbdpZj\nulwy/yO6FxW1xEzQKDiE/MkrANJ7tGTRabNo6Du8zFTPkLYlmcFJr0clrEKa\nvo69mSvzeXsKeGkRn06LwA4Foy+d0lfPAEqK5MfKeHjIWkZdPmBc2KNWQDU5\nAruEyJQpJkpY7FdYO7pue5s4pbE9RDyhVixaYbwAzHZd65+Aj6o5iJn2lTTm\nOkrDRsUpA4c/qmjvC6481q4uzo+Tf7W2ehXgGaErhCNaVK7uZLm9UVuY+L4X\n3j9yV/2vWqT66USayRVg0/bHVE5inVpfUERdDCL2kf/HDrM9ORcm9v981Gyj\nqNfAgISs3Efxw0BnLWgykOa/PST8ecj4LhK6SI23GOGigOQiWNGm+QZ9IZXU\nVD8D+MEV53pJfrX5o/SvMma+sUKQec79B5HiJukTLxMSIEKNbuaK8JAsqnNi\ni6jiHoPh+XsuuNfueXxe7NYpQfh1318JGwu2DJJ2p1RD2odjZ4XKzS62vjnS\n7lgj/RYDa0Ag07gtY0ZEXhAwieAJU52crIj6clJnj8hMzU59dbwyJ4w896GT\nIWAv\r\n=W5yC\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n#### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.**\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n**Note: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.**\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n\n**Note: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommended to\n always include it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color)` | Sets the container fill color to the given color for an enabled button.\n`disabled-container-fill-color($color)` | Sets the container fill color to the given color for a disabled button.\n`icon-color($color)` | Sets the icon color to the given color for an enabled button.\n`disabled-icon-color($color)` | Sets the icon color to the given color for a disabled button.\n`ink-color($color)` | Sets the ink color to the given color for an enabled button, and sets the icon color to the given color unless `icon-color` is also used.\n`disabled-ink-color($color)` | Sets the ink color to the given color for a disabled button, and sets the icon color to the given color unless `icon-color` is also used.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color)` | Sets the outline color to the given color for an enabled button.\n`disabled-outline-color($color)` | Sets the outline color to the given color for a disabled button.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web button component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"@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/density":"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/button_8.0.0-canary.e1bc84d10.0_1596477075226_0.15765732499677387","host":"s3://npm-registry-packages"}},"8.0.0-canary.096a7a066.0":{"name":"@material/button","version":"8.0.0-canary.096a7a066.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"ec41fe966909b5e95dd5f0e1ed73e8500ceaa5a9","tarball":"https://registry.npmjs.org/@material/button/-/button-8.0.0-canary.096a7a066.0.tgz","fileCount":26,"integrity":"sha512-bqR/c1mJB/bENKM9rlafVPSolyWBbOe5HKyN+Dvr7w7/Gzdx1Ee9cplnyYVxl1dMTvuTc6dTr6ueF44WjgV5tA==","signatures":[{"sig":"MEUCIQDFisuZyJgfXPDERJx3lKZriOHkvqF6c4x0yVhOsKS8vQIgBWK3HaJjsvmFVwYaXaKt1DWZI6LBo5hGIMjR1gW5GCU=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":409035,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfKE9BCRA9TVsSAnZWagAA1a8P/jpPiD4aqLwUG+qi9gSc\n8Ck7t66ChtidAz50jSWeDBJDe0fqdyNvaEbTkXcDM9RUBDRMWsu90pxVx/YE\nb7cazRnumPekoZLn7xz1IlX9C/1Gzd1P40g/x+mO4od0NEjNk6OtyXrIRGzR\ng8c0e+tYFUdHTNfkT+sGXLQJFyLMvnhyZ5Rh2Df/dZZGt21D0EYo7PVUx1Zi\nU1lNx3GtSecD7ibpGmKKUyZr7uS2laGWFpxF/T/h/phR3VBQgEQgRqgOSEle\nvM35HAkBET+gTdNP/acfY5V69cdZDZfCnpZq4HbgQ4twblEtS0QwjQAkao+P\nTGIC7Od+F//+IqABrMRv9hN4z737hTjFESpdsBZE3sQ7HB/2nFE/AC4hfoXR\nKwfFQrbBiYzidE4s4ihtPnDDTLssxLUobPSDO/m8ccArrvpPejeeyzW26bTk\nffbczchT+RlMcb9I5pRslxDElbyg9TTUmyEnsX5/oy9LYgw+6YoAIzW1fZ+h\nPUE0FDYnDLw3nbIGcquDxgrGe1nAouMUKCEpdDpQc5sH7jQXLi//NQ6yHmrR\nwwQcVWW2kYen0G/+/ldDZhglAdlDhZXPI3NrHLxWTLkhAds9pNx+Z5WRdRcG\nhMmvV9S2S0o+8C3rxlqo7hIFtQydQAhYa03u+I36uKDSnkv5/p3eBUOLV+25\nRzAs\r\n=tug2\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n#### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.**\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n**Note: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.**\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n\n**Note: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommended to\n always include it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color)` | Sets the container fill color to the given color for an enabled button.\n`disabled-container-fill-color($color)` | Sets the container fill color to the given color for a disabled button.\n`icon-color($color)` | Sets the icon color to the given color for an enabled button.\n`disabled-icon-color($color)` | Sets the icon color to the given color for a disabled button.\n`ink-color($color)` | Sets the ink color to the given color for an enabled button, and sets the icon color to the given color unless `icon-color` is also used.\n`disabled-ink-color($color)` | Sets the ink color to the given color for a disabled button, and sets the icon color to the given color unless `icon-color` is also used.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color)` | Sets the outline color to the given color for an enabled button.\n`disabled-outline-color($color)` | Sets the outline color to the given color for a disabled button.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web button component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"@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/density":"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/button_8.0.0-canary.096a7a066.0_1596477248735_0.3058419072783347","host":"s3://npm-registry-packages"}},"8.0.0-canary.aa3a3e5a4.0":{"name":"@material/button","version":"8.0.0-canary.aa3a3e5a4.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"b9b31ae577eaa06af5caaf081e206cff4a6950d5","tarball":"https://registry.npmjs.org/@material/button/-/button-8.0.0-canary.aa3a3e5a4.0.tgz","fileCount":26,"integrity":"sha512-PNETp6C2FieLCi8b78Ga4NHTHrIppEvsuDM5hFjpfdLu/wN6pmjpAUnqe+GxleO4GnymrQIeNhTI2EWInf6wvw==","signatures":[{"sig":"MEYCIQD52IM69EN4B5KctZZTfRDkkmgD8TW2XpAb2KN+VywZtQIhAKqB9E0f3O1hZs0B4fs3p2hFLshHRgeEACVZp8VnsEX1","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":409035,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfKE9rCRA9TVsSAnZWagAALLsQAJWtjHPpA7bz6MGwyXSv\nyDBP+Nowdcud5TCyvhz0GYAfFeEayQsqqEQTCWGxoMeAJ6lOWEwmdU+rDnDG\nkrdjKkdKdynQhITFd53+zUUchq5FOO/Ypf++2BpyVK726uyhe+jJvbKr6kwV\nwE6ykeSsvxJ9LMdlBB6PELg+aUXIlsF5pabA7TNsoT90wvOAZrADGd0Lqghm\n0YiivvA3CSx+y6hAYbP7eV2hYxR8zcmIejP7xWu2MJqDMib8XvpSeokKcM78\ngunH1PLNJnfP8wtikQVHCBwm15GTmrve1njNMH/ysiq9n1ZusMtM0KI3BHF1\noRhimY/Yc9oQKs2plgwC/O3fybEFn+EogKehaA+pet2k2Sr9GtqhDscxPFmg\nd379vgpY+4hC6sTpdRXjbWAU6VH6EiOTL35hpX+UwtzeCvbdF7DtvUH/8jfQ\nEFxFr7ahn8Qaz90nhOKUZTVJNgXA4psBlVhwFn8hAikIoLQKWUG492A21mV8\nkf0Z/BBT+jc2O8y4kzp4czOAIFhRDxiYId6m2sFpn9PYcKmIM42YyMCkFaHO\nlOkaY1fCJy0qJV7z7oWtXF+3OOwjZl2TIqsdDgPAjKxICuKjBdZrd3s53609\nsrZnP9h9mK/4kXF05a/NyPR2T3FMQvn/IYleP863HJv/2tvbQTu32m4oL6gy\n15K4\r\n=uWZK\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n#### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.**\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n**Note: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.**\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n\n**Note: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommended to\n always include it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color)` | Sets the container fill color to the given color for an enabled button.\n`disabled-container-fill-color($color)` | Sets the container fill color to the given color for a disabled button.\n`icon-color($color)` | Sets the icon color to the given color for an enabled button.\n`disabled-icon-color($color)` | Sets the icon color to the given color for a disabled button.\n`ink-color($color)` | Sets the ink color to the given color for an enabled button, and sets the icon color to the given color unless `icon-color` is also used.\n`disabled-ink-color($color)` | Sets the ink color to the given color for a disabled button, and sets the icon color to the given color unless `icon-color` is also used.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color)` | Sets the outline color to the given color for an enabled button.\n`disabled-outline-color($color)` | Sets the outline color to the given color for a disabled button.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web button component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"@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/density":"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/button_8.0.0-canary.aa3a3e5a4.0_1596477290889_0.70512580856395","host":"s3://npm-registry-packages"}},"8.0.0-canary.5903d39af.0":{"name":"@material/button","version":"8.0.0-canary.5903d39af.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"c7b83ffc4b808c81b82072d0d6cc6c08c26e07f5","tarball":"https://registry.npmjs.org/@material/button/-/button-8.0.0-canary.5903d39af.0.tgz","fileCount":26,"integrity":"sha512-phjyn3IDmGcGiRNwLbAZmKfpWaIBHqECUbXyRDCbc7UMTHBokJdQH0M7TiFCHS/oPmuOq353xpoMr27ug8ngUw==","signatures":[{"sig":"MEQCIGO2gGyFFVdvyEypFdwUTVpL4+ZCFDO/IWxxhvCxqJfTAiBZxyFstuu4uVP1pxrK7K/QLlj+KxRF8wax2/GvdTSQ3w==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":409035,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfKE96CRA9TVsSAnZWagAAOA4P/2c2NJL0Jjk7vbVSAJ/Y\nG/HqLos4965qcB15Z+d2f7+EFVQGFCvqUgY650rJDFDDtIO2J+w0yGsmctIE\nJTSKWiDrxj+sOKRhPlaeBcS5RHpbFeW3Yf+toG+Wn/bc+gPQLCIuJcJCMWXv\nrC9luS0yVbFi6sPe5dDEKhCKmFr1Ek2N6DNP/e+4ka7PGfyEFdaEdpEYpBpM\n5fyYoYkqBRZPCMvyDAyz6gxV1CPbYGjn6PzkD5Uk8rveKFfmSPeFLX5RcKYW\nYmTAqiSkGYD6lAWaxfNvpGv1kcR9tHUs2ZNmThwxU8btcdvAj7SCq5BCTBL5\n9Mde9X+c7o5Itmzm0FTp+wqNupki7URDCt9wct+GRGFHNvl9m8BCs5AyIpFn\nr2etMoobuR/HrMHsmk9bA1/JCf/wbSzAB/Zlaakei5nkQ25Ht3jf/CxVKvr7\nI9khyw934brq7YBn5bG67UsYZjOwk9YXQrp/zOKo88942XV/qhBsYH8uot29\nRprn7Nf4fZG3Kdns6Wrj7QNxuKduGGQhvn+REoBf4iOilaKaEOG1F3czPnrd\n5cGZTejKtaDWgb1rgREVV5ZbwNReGN2EB4IQY/QCfW2V+Q0A02U3FsUN6hWo\nAGAZP/vJjKo98GnkVyLzlpl84XwCIE4QuRlKYpxfFZgI35zRgwq4T353oIF0\n71Wx\r\n=aEJT\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n#### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.**\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n**Note: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.**\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n\n**Note: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommended to\n always include it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color)` | Sets the container fill color to the given color for an enabled button.\n`disabled-container-fill-color($color)` | Sets the container fill color to the given color for a disabled button.\n`icon-color($color)` | Sets the icon color to the given color for an enabled button.\n`disabled-icon-color($color)` | Sets the icon color to the given color for a disabled button.\n`ink-color($color)` | Sets the ink color to the given color for an enabled button, and sets the icon color to the given color unless `icon-color` is also used.\n`disabled-ink-color($color)` | Sets the ink color to the given color for a disabled button, and sets the icon color to the given color unless `icon-color` is also used.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color)` | Sets the outline color to the given color for an enabled button.\n`disabled-outline-color($color)` | Sets the outline color to the given color for a disabled button.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web button component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"@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/density":"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/button_8.0.0-canary.5903d39af.0_1596477305656_0.6814536435643013","host":"s3://npm-registry-packages"}},"8.0.0-canary.72258f898.0":{"name":"@material/button","version":"8.0.0-canary.72258f898.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"ed4b507999d02f560f58a7626c0f3e0c8079b988","tarball":"https://registry.npmjs.org/@material/button/-/button-8.0.0-canary.72258f898.0.tgz","fileCount":26,"integrity":"sha512-JYRFpXGeyg09LDFm3Lz+xYy/rpoPuSlpcGqStNhqiPjDjjdeakd2OrkZxB41ldc/492n+OJNpeoGNjBA7MQxnQ==","signatures":[{"sig":"MEQCIALstTMyNo0nrJ54OGTCHNi40DWikGDa3EuktYSzwojtAiAELBfyvjjdsT2LN+r3Ve2c+I9c6rFOC507fVLjDD87JA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":409035,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfKLc8CRA9TVsSAnZWagAAX98P/jVq6B91UdJQ8cBjJ6HN\nYFrOqDiA06yK2JqrloqwE8tsnG4dJoKWtiSu/bWhpTodn4bf3/hUQVAYg+yd\nGanPOICUrCYPshRsDpaRB6j1UZYV/d9SPOwbV9CQb3bXSS2DEyta7P8VgAcU\nVF1FSnpioQ0vlAP8cgywY6lDgNmQZ0FntT0SO+KzxE9A6u9nR9cSxihUU2PD\nr94DwQDC8iUZwUE4DIYrGl4tZx2VSuAcv0kurDxq2Hhh98/JiZ7Tj/G5nWjl\nTv1jSH/t8BLs3xwnzRASD9TAIdX0ItKRO/d9qCuOO4W0Vl4GCphaQvZ8H4qT\n6toDXX22fZa8Rw8akEuyNVOKl/wVHUSbm/Cni3ai5bQahe/joi5Glh2bQMxs\ny+whDwt9TZAtuIMblFf/rIg5yHmthaTJiTiX7FaN21dpCPATm/2+n7mRj9Lk\nuEX8hTtTnnGReeHlYAWV3MUnhcU6EsXtNa3PWbTfSugkvMzZb+UMiy9K3OEH\nNVRtF1NfZ1M4rLDZDNGlduAbywsNfTURvQ+MXHVV7Mwt//McwDNAb76nnQSk\n/aKkC2K7NvuKUQPayJJRBlpuLbbrSQayYbZKva3dR9rgl3Iag3iOm2cxTBim\nZKg+9rrMSlSC8tJQ6xjNt1zBwkP1JWi08y56nk20RyOKmLrYX2qunUM+5IJI\nU/9F\r\n=LZPc\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n#### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.**\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n**Note: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.**\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n\n**Note: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommended to\n always include it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color)` | Sets the container fill color to the given color for an enabled button.\n`disabled-container-fill-color($color)` | Sets the container fill color to the given color for a disabled button.\n`icon-color($color)` | Sets the icon color to the given color for an enabled button.\n`disabled-icon-color($color)` | Sets the icon color to the given color for a disabled button.\n`ink-color($color)` | Sets the ink color to the given color for an enabled button, and sets the icon color to the given color unless `icon-color` is also used.\n`disabled-ink-color($color)` | Sets the ink color to the given color for a disabled button, and sets the icon color to the given color unless `icon-color` is also used.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color)` | Sets the outline color to the given color for an enabled button.\n`disabled-outline-color($color)` | Sets the outline color to the given color for a disabled button.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web button component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"@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/density":"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/button_8.0.0-canary.72258f898.0_1596503867945_0.1775099360164616","host":"s3://npm-registry-packages"}},"8.0.0-canary.1b44b43c8.0":{"name":"@material/button","version":"8.0.0-canary.1b44b43c8.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"cddbec365c77c336007e539f3df9fb9ac7958b20","tarball":"https://registry.npmjs.org/@material/button/-/button-8.0.0-canary.1b44b43c8.0.tgz","fileCount":26,"integrity":"sha512-9+U3tV9U76rZmlpsoxUUYxasjbtR0H60+U8tt0EKSjY8IYq+3eVzjC263IVvnD+pZmzvyXMPq2+70eZaiJOXag==","signatures":[{"sig":"MEUCIDqQaD9ZCGCppLR89PRM9vnVKCIbqLL7eKAX3YA/symyAiEAlfoI/sk8GT+9CaTwEteKDHU5q7N6GkcusvS6WOCrw7Q=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":409035,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfKZFuCRA9TVsSAnZWagAAJuMP+wdBBvY1e2NxHJt6crNd\nitznmTGxB6zfVAS/nKDmebdZez4wLlwBx0MWJu5oIegTwzhLkdGy3yR+rdlp\nlY2WuD1d7A2Lvs2XCLbX/TZuMDB6Pn03a7ejSM9IPtuA3h66jRwaRdhXE5s8\nFb16kh+JVBXfFW6U796izcZsCu4Gh8QC2nnDYKMSC+jPPyLCP7b82ckagEj+\ngU7yu75zkPHqktRlJ4YkrBNZJuAE/PQIsxPOSdbjNa4sZVSmK6aRVcwf0xbW\nzwQ2DhXrpHgKXO9M+ogoERHTAlKtHKXlwkgUUdQMP5yLKQzL5B7B8ONsBJ2l\nqwpN81OaVE+Hcgo8rSWv+Rj4NXq6j+c4xl4CuoF0iW9kJB1U9GZNFpHgqOMx\nGLMWqpxtAVRtSlvTYk5Mw/+XaEKB8ktWnJAp8i/H49cdJp+XB+NFDXeZ0FXu\nmVx+fW5RXge0NkaEwoQ/Qo8KlzOfw4jE/Zrn2ZfujueXkkOzVeRlKCNU9ty5\nMjMXvEVK99lhZIc5X1g1WqPATFbHgC3K+2MwqI1aHDrCjnjRoC4JMN9gk5+p\nxrKUYY20NaP+M2iAolAJHcJH3E0tp1ARw876A3EFKhLVDj/7/tN5fdX77s5A\nyzNSRf9xLxj9SatTSiDXTndPzCoRWFw0Bxo9KKvS9F1HQJUFp7OxOXRe6/MI\nXvb9\r\n=UuyY\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n#### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.**\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n**Note: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.**\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n\n**Note: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommended to\n always include it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color)` | Sets the container fill color to the given color for an enabled button.\n`disabled-container-fill-color($color)` | Sets the container fill color to the given color for a disabled button.\n`icon-color($color)` | Sets the icon color to the given color for an enabled button.\n`disabled-icon-color($color)` | Sets the icon color to the given color for a disabled button.\n`ink-color($color)` | Sets the ink color to the given color for an enabled button, and sets the icon color to the given color unless `icon-color` is also used.\n`disabled-ink-color($color)` | Sets the ink color to the given color for a disabled button, and sets the icon color to the given color unless `icon-color` is also used.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color)` | Sets the outline color to the given color for an enabled button.\n`disabled-outline-color($color)` | Sets the outline color to the given color for a disabled button.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web button component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"@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/density":"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/button_8.0.0-canary.1b44b43c8.0_1596559725559_0.39619953998017654","host":"s3://npm-registry-packages"}},"8.0.0-canary.e9d2e2f96.0":{"name":"@material/button","version":"8.0.0-canary.e9d2e2f96.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"ecdeb6049e4670c4da85f193283bb50eb32a7d75","tarball":"https://registry.npmjs.org/@material/button/-/button-8.0.0-canary.e9d2e2f96.0.tgz","fileCount":26,"integrity":"sha512-Ok9n0MD/xGduu3wh0t2JcrVVGllRBiVuB2IRHnvuuMSA8sq+xphnLnI5f4SRzmKRn85nq1K3sXBJNmZSv4a/Mg==","signatures":[{"sig":"MEQCICdaYVSFPiY0nBWQzB8kLzH/rJ/AvZQe7nYlxinoD6pvAiB6qDpvcGWwyYHiFmAgSkye7PiGNnYa1gmB3smApgLaBw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":409035,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfKcQJCRA9TVsSAnZWagAAW54P/3MNUB7KfA/K9G9wSg4e\n6fsF9QeiwIsxcTSoJn/tJL54VHNKBGCLjc6LnbxD1mkTr8ug8/+0M4LSPdZd\nork9nzzhZuXEk1Ge1IWvp9iPcJbJ/lYbd3gZe3K0ze5ghLa5lLCRVC+NnMXg\nyf084A932BXmpmi6nesdDFXFwssKErNHgISNy37LWTwAQQPXkjEjz+VIMrx4\nQLAnFzYi3mgKab5Ws9TTGLYq6DHQh6ljpA18DC/zCgIPXqy3HbU5p5E7iBNY\ns9JY4gvcg7RJUQP98mDGb50XRa/znvyCqPDPnooJ/KHtalPnj3Q6YvC4XYVd\nPpLSqLkjkMdOvd+dBEamwJKY17sz0NXhpsBJUDa6ETEF3ekRqbGaeaG+Tb8f\nzxgnRNM25w9JhoDogHMsQqeLZ+D0rek024mMLeXm05+0IYtU9ZLmGyEcahJ4\n1ifDj1Y+8Btg3ajRVJzrMZT6uW4sMcV9raOU8UM36FzclqDr95sJANnXqtL8\nuxn+fRQu95IwfJhA8w77+hQKm/QDUlftSZoD1uYwHHe8+JpAhSFJUq00XJ7/\nREx4dzln6Z49yhFxb+fS+Lwms7+4kyU2Xr1QXYHy8RQ1xRw5aiDFgKX5kZd6\nDAMbo7fJScpjszYPuutln1xyIXWA+WswSnVt6GCu+kXupMJiI8vLCgUdlAxX\n4Us4\r\n=SgQu\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n#### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.**\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n**Note: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.**\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n\n**Note: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommended to\n always include it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color)` | Sets the container fill color to the given color for an enabled button.\n`disabled-container-fill-color($color)` | Sets the container fill color to the given color for a disabled button.\n`icon-color($color)` | Sets the icon color to the given color for an enabled button.\n`disabled-icon-color($color)` | Sets the icon color to the given color for a disabled button.\n`ink-color($color)` | Sets the ink color to the given color for an enabled button, and sets the icon color to the given color unless `icon-color` is also used.\n`disabled-ink-color($color)` | Sets the ink color to the given color for a disabled button, and sets the icon color to the given color unless `icon-color` is also used.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color)` | Sets the outline color to the given color for an enabled button.\n`disabled-outline-color($color)` | Sets the outline color to the given color for a disabled button.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web button component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"@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/density":"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/button_8.0.0-canary.e9d2e2f96.0_1596572680691_0.10006292701072916","host":"s3://npm-registry-packages"}},"8.0.0-canary.b9dff0a19.0":{"name":"@material/button","version":"8.0.0-canary.b9dff0a19.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"829b0d605335a502ed018b8cc1b457cdeb0bf248","tarball":"https://registry.npmjs.org/@material/button/-/button-8.0.0-canary.b9dff0a19.0.tgz","fileCount":26,"integrity":"sha512-AUnSMOixAGluVMbb9SdX0mTbK6130hzcmcnOH3KiQBrs8sW8du94T/1HFEqz1gFpojR7QhkLQe7G3gdq27vamg==","signatures":[{"sig":"MEUCIQCzRDuGx5WdAstFmapUii2bI49lMZjd9H0tOEF1nM3i5QIgUHpSceyJzPiyeoySp8tI3fLqXbbHSI6IxuHGDfIbQhg=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":409035,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfKiw9CRA9TVsSAnZWagAAdJIQAIIL6pyDJ63Kg0aDdC55\n2mLzU5IAlGsd2R1LqN9lEMc4JTfgqS7OnhG3T7ZW9DFONO/K2tw9exbVhlZ9\nuNKAKEwxZjlrHAUJg4qsiFSaArBt4YLckYySt2Zka9se1li2koSj+zrNuv0b\n1UMCK8egbXBbN8VzuoBYVrGHBsus8qwgnlxP2HOkM23H8xak32jgZ0k8zwoY\n1A53+1g4frZMuBTYdpMBcbkRJ/SXPwD8a4NWXAIH+ntswZyniwSW9vKk5qvc\nOUBPxEml+YWTleD8cJ+V3ST+pRGC4ynCBZVeoqqB/3QBFQ5bLl3liNP3Qn3X\nHVsFVE016YlpuJiqaNISbjndK6YZ3lSuM+nuQYd/2/BGmbqVP+NIM6O5HWyg\nfwpiMBzLG6TtCsJoI8ptU1FwJOFqvbofWwjgP50XNyjkHadry6/RZzGUTMrN\nHokaSJQDJS289tU1wU8v4/sqM0xxwiti/0d4ox0zM+OafJVvWmrF9zS6GSsb\nnvaflGmXChutiTxFasvsdt5qWl0EIFZSrQeq8/Ivcz4YrK8JaLVWEbolYicf\nKFbMSNETxBLPUt69P2pFOmKmJ0AkXr+2MC3opSO524L8KltNgY91gcy5qMIu\n+dq8KimnE57eJxw95pa+7hzV5oMMfP/ImdUaxqUeTz2vLpc1Utxp29RiE3P6\nkrfN\r\n=StV2\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n#### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.**\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n**Note: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.**\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n\n**Note: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommended to\n always include it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color)` | Sets the container fill color to the given color for an enabled button.\n`disabled-container-fill-color($color)` | Sets the container fill color to the given color for a disabled button.\n`icon-color($color)` | Sets the icon color to the given color for an enabled button.\n`disabled-icon-color($color)` | Sets the icon color to the given color for a disabled button.\n`ink-color($color)` | Sets the ink color to the given color for an enabled button, and sets the icon color to the given color unless `icon-color` is also used.\n`disabled-ink-color($color)` | Sets the ink color to the given color for a disabled button, and sets the icon color to the given color unless `icon-color` is also used.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color)` | Sets the outline color to the given color for an enabled button.\n`disabled-outline-color($color)` | Sets the outline color to the given color for a disabled button.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web button component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"@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/density":"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/button_8.0.0-canary.b9dff0a19.0_1596599356807_0.2408779068529472","host":"s3://npm-registry-packages"}},"8.0.0-canary.2bd09a706.0":{"name":"@material/button","version":"8.0.0-canary.2bd09a706.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"ab9b605162cd69513717bf534ccaa0288d0204e8","tarball":"https://registry.npmjs.org/@material/button/-/button-8.0.0-canary.2bd09a706.0.tgz","fileCount":26,"integrity":"sha512-AAfeS/tChyegLX76pbVnRymn/0gqJYi63X8gQhd/MmyH4T9pywJ78gfbqzyfMfFrmCyfgWcARCBTg2MIICGFRw==","signatures":[{"sig":"MEUCIBjZi7enS5rcpVInEgvLcL5WdFxF9ZXTlyXqYrH2+m+mAiEAjGZXa6CVBqXsm1ckQ6JAcjsEFwvXqa2OkUaX27ZLYi8=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":409035,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfKi1zCRA9TVsSAnZWagAAdeYQAII9CzEl62SauKY0HuSF\nbGrhscZ9sJa2XcLwGHrXKt4YcxAb03F0dOmWQVa/wBci1OlwOk7Gxsi1P3zJ\nWJcj0XJ1NBrTwJYZLDW17tOCloxF37Kj5/Xu0rMTfAq3NzX+lnLXMffC30Om\nTqHHa+cMcyB4JfpCpxItqbwBSrqE7mnW4t8+NDIu8yCSjsd3RK0+VbsYvM3N\nz6cfnlFCIbebo210jUOwkde8Ifkyu3v1rzWjZA5SUciHdGUAMlQ1NEKTK0Fv\n+te3X1r/RS019MwX9MKx3CKMMMGBAqnSwT/4FCzxdpebHcgQrp91DL8+vnkP\nfwoGfEWhjYz8QVCcxbcbdY9SFvW8BcCChd96zCaNHrJPpC4CEwDBkFQRxqCp\n9Brd/h7nn725N+hzbuJzxSDHcFJ5jgNNyf7U068xrcFCINWdvDoeZ7BdFkmE\nDsKneXjt2VeXea2kSxEcVUYg0qk1W4cXD624h7ABak+x5iB9jeHNIBHq/iav\nZxYJY8J8aE07fyuF5vBqKSP6V/wK6Hv1PNaOYB7U2anMJ77rtjSwNLCVJIti\nFweUSgbP1A+4qU4Izd7akDwcyqzGTxw8nuYv5N3JStNxtGjzpA8BhtYllTkQ\nWcsNFGnYz9slYtpCVpCdBxncfbYTqWocDTsOM9+vi9kLQLzqBWwdZT7dMNLO\niorO\r\n=zAqn\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n#### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.**\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n**Note: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.**\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n\n**Note: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommended to\n always include it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color)` | Sets the container fill color to the given color for an enabled button.\n`disabled-container-fill-color($color)` | Sets the container fill color to the given color for a disabled button.\n`icon-color($color)` | Sets the icon color to the given color for an enabled button.\n`disabled-icon-color($color)` | Sets the icon color to the given color for a disabled button.\n`ink-color($color)` | Sets the ink color to the given color for an enabled button, and sets the icon color to the given color unless `icon-color` is also used.\n`disabled-ink-color($color)` | Sets the ink color to the given color for a disabled button, and sets the icon color to the given color unless `icon-color` is also used.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color)` | Sets the outline color to the given color for an enabled button.\n`disabled-outline-color($color)` | Sets the outline color to the given color for a disabled button.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web button component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"@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/density":"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/button_8.0.0-canary.2bd09a706.0_1596599666872_0.7831090997921724","host":"s3://npm-registry-packages"}},"8.0.0-canary.e0560522f.0":{"name":"@material/button","version":"8.0.0-canary.e0560522f.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"13f243dd84f1e3768bbf3b6378b951723a7e0a36","tarball":"https://registry.npmjs.org/@material/button/-/button-8.0.0-canary.e0560522f.0.tgz","fileCount":26,"integrity":"sha512-5M+7IiQalhATrCj7k7mZFwZgEVERPlNMHAvQheZcu99r48woUyA5UzZFEizZ7RVQ4bdpxwdPMZmWoKEUngkIkQ==","signatures":[{"sig":"MEYCIQCTfV+Y9J8uBHdjsBUGuo/RU1ymXFJPIg+HEVzv1EjbvAIhAK4kF8Hoa9XAftOv736smBq4WJJYjURFk/ngZYlpwW3T","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":409035,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfKupZCRA9TVsSAnZWagAAzHEP/389gz1oZAmiyt2/sqiV\nGS1oAzqafR09ki6ygl5nOZAXKmq8IRHrehxvLyLnowKX+Nc8OOtQiAhLJRKn\npcBtdKQJQyehqsIvdL67cM+9xqGVWppEdxC92t5SL5TQVF0Zl66/1GIV2gQV\nT/mej4GlO93B+LCELyKH1FFC8DG3ZccKKtegmgSljxL61aOZYo1gwfLg2G5p\n838M7VRgNwDMck9psQjyNl/6msyyyyqzJLHHmTTrfvPSLs3dqgjlfv1dqeb3\n+xKN8705lvDTQTh6QPuf6rY52IjixrpxR9fBi5FzI9GDNGXi2bdaeRAddgu+\naCFiAU2ELPGIIwV/VVcuQ4svSy80vjgOOdGya9MRgwTj8rUbSF4CIJsKfV5Z\nzoKMIFN6zf8EmTQ4pGVHVetg/3ts9mIJVfN/aFZQ+Fx2xHO7S56KmxsN+4+8\nFQLIoCmgoJNHvJNL5DAJhdYbxJHlYys1nKswPcky313m+BlzR+eT8yok6zI6\n/2MU9Lx4RykZECTfTF+hrm17X/zgOFk/iUACEyoNbMqOlu5JlzpZORSqCUvO\nt0T5JKrNrt0chOK//e7DYCga1QMVhBHCwQ05I1+onRPvI6B07qASbE36AAoZ\nSV8SqOjbQKBhdM7M1XJgPe+ae6Rr/D9lvNM55HXrC4YyOUFpSP3b5YHUs4co\nE5AI\r\n=OMvp\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n#### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.**\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n**Note: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.**\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n\n**Note: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommended to\n always include it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color)` | Sets the container fill color to the given color for an enabled button.\n`disabled-container-fill-color($color)` | Sets the container fill color to the given color for a disabled button.\n`icon-color($color)` | Sets the icon color to the given color for an enabled button.\n`disabled-icon-color($color)` | Sets the icon color to the given color for a disabled button.\n`ink-color($color)` | Sets the ink color to the given color for an enabled button, and sets the icon color to the given color unless `icon-color` is also used.\n`disabled-ink-color($color)` | Sets the ink color to the given color for a disabled button, and sets the icon color to the given color unless `icon-color` is also used.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color)` | Sets the outline color to the given color for an enabled button.\n`disabled-outline-color($color)` | Sets the outline color to the given color for a disabled button.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web button component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"@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/density":"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/button_8.0.0-canary.e0560522f.0_1596648024580_0.8410341839668882","host":"s3://npm-registry-packages"}},"8.0.0-canary.08ca4d0ec.0":{"name":"@material/button","version":"8.0.0-canary.08ca4d0ec.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"832c42beaf603900ba68065e8893bfb79bcd5bdb","tarball":"https://registry.npmjs.org/@material/button/-/button-8.0.0-canary.08ca4d0ec.0.tgz","fileCount":26,"integrity":"sha512-Fq6cgD5N8uY8Nnbs0OkSNJhJKMDdgy950bnU3PkSAD180wCuCtbpL+5QI8O7EtncIAR+SdV/8e3w6t70ZE7IuA==","signatures":[{"sig":"MEYCIQCPXpj8W51Sd9iG3B1SthuWroSQI5UUX6gq8kwfvNKjRQIhAOJzJqomTFd7EWx9szgVLMtOKqoMt9bpUvEuhi+71uD4","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":409035,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfKu7oCRA9TVsSAnZWagAAsNsQAKOH01/hLujoD1zKXOdM\nkqkkZEUYahFJ/96l9s8mGJTz+PMQpnXItmSjKrVIfrxtF5LPQtf3xsS2yVaQ\nP3OnYOdGPNfoAiGDaTz0xA0FFztt4KGtg4Hwmuq1EBVwh1Naz4a4f6fUK0eC\n7ZUV5ucJ4/hSk8R5OoWJ9UF322eDjk1Tf2mo4l2Wdr43hTPUtEby/JTAhoMI\nsqj6i6AyA2n6Ig14M/oEYwqAdSkQpyalPvfnj/sLkOFbB5koGJCqcareQVwy\nDeu0bXdtBih2IQAexooOuK4A9aPQJEHV/t2MSFRK7ySiI6PmUw4+FqsP2wyc\nDwStFdeUEAUU7oj3q74IWfNpX38FDmGhu2PrGN47ZK1XRCW/1U3uHYXsnGw8\nfHArZw16jLeXPisun4XuNqV7MX4Q22/iUzRoTsxN7grlI9RlVYgW8pau90Ov\nZtnkV0byT89DyU17aVUh+Am18AlCgjt8vza5OCcK0EqaRB5KDtVF7qPFXwpW\nGUHf8y7ZaWCHpuzfyZ83aOT3+RlphQZYG5s1iPUq9jg3ocN7l5R4eR1Tu8SU\no8QUdQWQkDS3vI17LWhv1FUoZpbCfJunbcBcDpKLwEu9or4B4LXNUiNMukzm\n4G3iE1oQxIlR30igjLzsXAaCbbCPhu4P3IrU/fsnnXxBRD8zdlgnqkcTQ8X/\n9Mp/\r\n=XuAL\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n#### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.**\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n**Note: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.**\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n\n**Note: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommended to\n always include it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color)` | Sets the container fill color to the given color for an enabled button.\n`disabled-container-fill-color($color)` | Sets the container fill color to the given color for a disabled button.\n`icon-color($color)` | Sets the icon color to the given color for an enabled button.\n`disabled-icon-color($color)` | Sets the icon color to the given color for a disabled button.\n`ink-color($color)` | Sets the ink color to the given color for an enabled button, and sets the icon color to the given color unless `icon-color` is also used.\n`disabled-ink-color($color)` | Sets the ink color to the given color for a disabled button, and sets the icon color to the given color unless `icon-color` is also used.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color)` | Sets the outline color to the given color for an enabled button.\n`disabled-outline-color($color)` | Sets the outline color to the given color for a disabled button.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web button component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"@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/density":"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/button_8.0.0-canary.08ca4d0ec.0_1596649190932_0.7792480462079125","host":"s3://npm-registry-packages"}},"8.0.0-canary.08090126b.0":{"name":"@material/button","version":"8.0.0-canary.08090126b.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"dc885ff4a223907a197bfb8c2dbf0e3392e59d81","tarball":"https://registry.npmjs.org/@material/button/-/button-8.0.0-canary.08090126b.0.tgz","fileCount":26,"integrity":"sha512-Dw3cvU+ZeUobBEmXmLwZ2QO6bjVMJzpY4JWRSsStWZB8woRmyI7m3zaMbsG0ouJ6b6XBWtdMaG7Sbqpwype4ag==","signatures":[{"sig":"MEUCIQDa1F+OR3exDNNefYTGCmNqbcTdQO9DEr2yBnug7bozLQIgIRCpE1OO8Emyn36gozECNF1RKsAXIcV29YpvV5kMd00=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":409035,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfLFrvCRA9TVsSAnZWagAAv60P/3NyQAivFzTtMJ+tm++r\nhUtAh018/+JY/QPNV33of0XH9wsQpJhkvPebJtnlYt/YsSnZz4/BKb9Ibi4T\nFGbO6Yiwaxpr27pxfMPOpfTcfUFfISD1upR2nNBjKKin1D3fUT9gmL57DoqJ\nZSX5wK14dRfPPTApOYZREyVEEVP7BDnFNgpuRfdynJsxnC6bRIfNLTYuWX+f\nbx2nuhZOwjNiuNq4qT3c8q8wvR5oi7PT3NVfe5wRZHTXDizYJpahcousequx\n6khzilELI/mky0AirFPa9oB2ganVHDFb/025fleprseGu70nJLazeSUbvE38\nZjbwMZp8zr8VZ/ag8Kk6cORbmK9z5RnnM2545HMbhp06jCMbBme8ew7CO1Kf\nWqxl1GZwsfuc8po6wrI6rHmva4AXOJACHuMeIfetzKsstucKX4Z7dPf2C0Q8\n2Xk8sSI+p8Dlf63OND/ZlQmGpl4ctLdU3u78t8PTU0K52k33VPkTQcEHjYXV\nna6vQMRKgTavYxMHIlveQjwouarLymrAixn6UpTCB1ImxE2YL2aO3WCgB/s5\nFv6vv40f8ZFx0WslBxC1qL7C74R2g/Rz4+o6BtC7gRBopDyZGqMYI3BW+p5d\nPDeQcYsIMmj08Rt+ZAhfI9ryQs3PNe7L1rxL6H3AaZcDqneJZZbIPySOOFd6\nvS1t\r\n=MBz6\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n#### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.**\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n**Note: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.**\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n\n**Note: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommended to\n always include it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color)` | Sets the container fill color to the given color for an enabled button.\n`disabled-container-fill-color($color)` | Sets the container fill color to the given color for a disabled button.\n`icon-color($color)` | Sets the icon color to the given color for an enabled button.\n`disabled-icon-color($color)` | Sets the icon color to the given color for a disabled button.\n`ink-color($color)` | Sets the ink color to the given color for an enabled button, and sets the icon color to the given color unless `icon-color` is also used.\n`disabled-ink-color($color)` | Sets the ink color to the given color for a disabled button, and sets the icon color to the given color unless `icon-color` is also used.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color)` | Sets the outline color to the given color for an enabled button.\n`disabled-outline-color($color)` | Sets the outline color to the given color for a disabled button.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web button component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"@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/density":"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/button_8.0.0-canary.08090126b.0_1596742383457_0.5639934826315949","host":"s3://npm-registry-packages"}},"8.0.0-canary.e8bf5b2ac.0":{"name":"@material/button","version":"8.0.0-canary.e8bf5b2ac.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"ed208a33575f4cf4f22b13cfdf67890cedd4433e","tarball":"https://registry.npmjs.org/@material/button/-/button-8.0.0-canary.e8bf5b2ac.0.tgz","fileCount":26,"integrity":"sha512-WxHyQqNu78urZxUTS12wUsvPBrCIwz0aCLmMtWLJk8rjTnmU+ZSxtADvGtSwRmJZOFgvOgiyVNIU3A39WZ1O7g==","signatures":[{"sig":"MEQCIHJ7SY4Ls240UUdgD+bfLVj9nudPUTKIx2vMRSfilXZ2AiBxAGehYjy3n+xWOZK86FWstKqwdPulud533aUZkh8Wwg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":409035,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfLHskCRA9TVsSAnZWagAApH8P/jolGgnJ9aYx2UynxgDg\n2ZuIseZH5MFo+UeiJDvFrzLZgFi7TUKQZvwoqjyiJeta79Z6PqTj+VOC1l5s\noic9VKksqHBu9ibUTPm5nbDG4nxYZPOeCceZmCNx/WKbTOhZytnubawxEkWs\nSiJN0R/XQZnMU9ufqrz8BoUsy77nDpKwfuz+rsoBVu/4YaPm+hJFt2VK5a3t\nNbQcjRREdE19+wfbX0ZG7zHknDO//dCBUy2JFzA2E+dPQ63n0HK6LMQ7LwYW\nNqun+719fRPygp4kIlM6YGbHTUnlDlWO0l4TWxRFuyuF66ZaqF6yCE7y9p/O\nCtYsnWg6NS6Q9x/nhdb9pNsqpLmvBwQBSK6gN44YIlsTYaGGoGu2rXO11Sei\nZKDG03uesvWo0DZICgGzA9lXL/ZJI9uvUIlrmQbYxpmLNvu85kBdnqQlB1Ux\nCxXsK7mOrFsbr4BtYUwGBhs6lCsBlHRuX6pYZeIPvaEwJdk7Lap2E8D0FmHw\n6yvheujze6RtBiC6T7ztlCQvIdxOmV9CZRo5TGx2uRQHX/oQ+3OU+ZP8jMbC\n6nb8l4PDDGPzjbk4MncZ1LSTt73FxwuYxNh5+AH5vkTofhcSaHv5CzlXNc4u\nlu+Pq3jTh7dSQMfdA9xhh6S264BZ7wGP7GyofIV0o/ifg/qvAUUkU+Wu+Gek\nSe3f\r\n=iM6R\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n#### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.**\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n**Note: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.**\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n\n**Note: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommended to\n always include it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color)` | Sets the container fill color to the given color for an enabled button.\n`disabled-container-fill-color($color)` | Sets the container fill color to the given color for a disabled button.\n`icon-color($color)` | Sets the icon color to the given color for an enabled button.\n`disabled-icon-color($color)` | Sets the icon color to the given color for a disabled button.\n`ink-color($color)` | Sets the ink color to the given color for an enabled button, and sets the icon color to the given color unless `icon-color` is also used.\n`disabled-ink-color($color)` | Sets the ink color to the given color for a disabled button, and sets the icon color to the given color unless `icon-color` is also used.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color)` | Sets the outline color to the given color for an enabled button.\n`disabled-outline-color($color)` | Sets the outline color to the given color for a disabled button.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web button component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"@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/density":"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/button_8.0.0-canary.e8bf5b2ac.0_1596750627911_0.20792202346819555","host":"s3://npm-registry-packages"}},"8.0.0-canary.e3b746208.0":{"name":"@material/button","version":"8.0.0-canary.e3b746208.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"395921d6303ad8291e4004b8ff9d4c37a50b1c1b","tarball":"https://registry.npmjs.org/@material/button/-/button-8.0.0-canary.e3b746208.0.tgz","fileCount":26,"integrity":"sha512-kc13ODz7duQ9ZjcdiF2QC0VG4uDBdQZ24K8dqAZ/no7o6czQ7uMDUx2Ejg1yQQvL5B5sUcwDVVN6Z03EJn95rA==","signatures":[{"sig":"MEQCIBQ0o7tQxpyfkb5rnxHW4AyHvmt43XS70IKlgIHfIydQAiBCgT8VPj4gYr8NKiLCSn12o86NWTf0Sk+lhotzUie3dA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":409035,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfLIPACRA9TVsSAnZWagAA0cAQAJRa1zg8pGE759XFJalF\nd7bID4mp1OPfHUS0QtmMKGorI5wZplRSN94tOmpNp2BsWLi7Kdsas5nVmOAu\nIERdU4k0s22OFSYqTcJ3HPPHR7LuhJ9Ae4VWK2BopZ7TwyANDgXyuVZhJirG\nmPtHXRImhYAYKrKnCfvTEzLxinn4gpIvGzS8N3G+ZIRLstvY5tWvYk/wW0lS\nywgw1Abfwg7ry6SGLFzERDu/VilEghj19T4nFnOvTWNDoGCO0oUzdLlqEjQ7\n4r7o6/SZoq3XY28eMG2+oB4tK2mCaGInVnkaai28d3b0aHsU+iQ71i6QeJ4v\nWVl5PSQ6xfl27o7luCTmhiRegKvJA2GS3cLZp6VeGVwzx5iYUm+SqIym0wNl\ngkhnAh2P2OWk7ooH+0689MzSLn0z9StKxczFD8gQZofgfCbEvT40sq/HVaNI\n+tfWtsan4V/QU/zisW9Yse2NMbsZNc+SJDRmrN573JGHhhyHYN1O8UKBKPVP\nmcfOaLsxq8/iZ1UYsQXwqyJXjhwFd4siG/Tum/Gdu2rprS3lyFkvOzXD3Bly\nIJAwqVGkSj/pvmP7D/LlTQduydmnwr3aRTizH2Z6kQ9xVxvYHLOsjx1rohw3\nzpeUDoPQpC+rkPCCXvC4bhxQWLlYNGnqvcv5gZo1G6ONdgY/Q4nMIYhhqbF9\n9T9U\r\n=PLfo\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n#### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.**\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n**Note: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.**\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n\n**Note: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommended to\n always include it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color)` | Sets the container fill color to the given color for an enabled button.\n`disabled-container-fill-color($color)` | Sets the container fill color to the given color for a disabled button.\n`icon-color($color)` | Sets the icon color to the given color for an enabled button.\n`disabled-icon-color($color)` | Sets the icon color to the given color for a disabled button.\n`ink-color($color)` | Sets the ink color to the given color for an enabled button, and sets the icon color to the given color unless `icon-color` is also used.\n`disabled-ink-color($color)` | Sets the ink color to the given color for a disabled button, and sets the icon color to the given color unless `icon-color` is also used.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color)` | Sets the outline color to the given color for an enabled button.\n`disabled-outline-color($color)` | Sets the outline color to the given color for a disabled button.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web button component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"@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/density":"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/button_8.0.0-canary.e3b746208.0_1596752831804_0.4252264108006598","host":"s3://npm-registry-packages"}},"8.0.0-canary.96a640534.0":{"name":"@material/button","version":"8.0.0-canary.96a640534.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"4928eedc39200630249422126ea8e12ccc6191f9","tarball":"https://registry.npmjs.org/@material/button/-/button-8.0.0-canary.96a640534.0.tgz","fileCount":26,"integrity":"sha512-Hvv9urGuSKm3hocstnVaq3Hf4xFxTbvwbRC1UD/goxE8GWtp+AFt4++8p1EYrH3axONltXZwfpLnsoQeQ/l1GQ==","signatures":[{"sig":"MEUCIHGEeezjPAP+5DZ7vxBYmXk1ZXnNk4k7/xbUzv/2eoJFAiEAmdkKs/NzldbwlUZOMm6WZrhSpijEPbp5kmsGQpnBnsQ=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":391150,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfLIczCRA9TVsSAnZWagAAZEIQAJNqyFmZ5LxOPvr2+pVO\nrOZNysuu+SkTY8SEsr4IDckBzaCzHC8+97bUb6DBp4sZFuxyXDa+j9mUZA9V\nkwtS8ZJCEOA6KzqLCzwg+32PXA2+YTn1chJl6LlEC8H0tXerPkFtA9FDFMce\nOA4rgALjn01+V/5BtejixgBY3pDic2X/uyWgxSA3XsSqdQSdSPXyc5HUkQrY\nGJGFKDGxjehYToTiKvCn1FFVIY8mrcyBAKnpJO2soCbOIbpG8/Qc6JWgnV7m\nb171+hF5ntStCEXI3P6LLszjOB98ZiISFIttm6o+8HL47S6IrMGnHF+DH+0G\nuRa1xTS45Z8ZL3By/L24cz0YLHrPkfCxSEROD4jmnA7WUMAd+Ffo1mneDNt7\ndDcK/DLnqFO0DdYHNDCiCcHHj39rIJwfrSMW02jMtjGcj+LPYSIDNjLuWEly\nxu2XaEnUXGPLKA65FWpdmDZVos6xYgUnD9hhQTehr+JlDH4YTms/yXXBYoQh\n5MrjgFxIUcmNaa2tmZAHEzHCgqORPdswApZc0bsw6D09aGjDcgFZNDEkcggV\n4sQi39mYT30VOEtCO1AhPBCphgFTGCJOgcjAOwThvfrT837VuLFuUamTit8n\n4zZnuP1Dy3mdl2Ue5uEifkZwMAF6P4jPslwu1CUUEY8xOYZt/3N3F5DEFY6J\nDBfl\r\n=0w3g\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n#### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.**\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n**Note: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.**\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n\n**Note: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommended to\n always include it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color)` | Sets the container fill color to the given color for an enabled button.\n`disabled-container-fill-color($color)` | Sets the container fill color to the given color for a disabled button.\n`icon-color($color)` | Sets the icon color to the given color for an enabled button.\n`disabled-icon-color($color)` | Sets the icon color to the given color for a disabled button.\n`ink-color($color)` | Sets the ink color to the given color for an enabled button, and sets the icon color to the given color unless `icon-color` is also used.\n`disabled-ink-color($color)` | Sets the ink color to the given color for a disabled button, and sets the icon color to the given color unless `icon-color` is also used.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color)` | Sets the outline color to the given color for an enabled button.\n`disabled-outline-color($color)` | Sets the outline color to the given color for a disabled button.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web button component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"@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/density":"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/button_8.0.0-canary.96a640534.0_1596753715049_0.7353258209400566","host":"s3://npm-registry-packages"}},"8.0.0-canary.9f9aac825.0":{"name":"@material/button","version":"8.0.0-canary.9f9aac825.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"40f9fc2a88eda69e09917181598cc31fd50fd25a","tarball":"https://registry.npmjs.org/@material/button/-/button-8.0.0-canary.9f9aac825.0.tgz","fileCount":26,"integrity":"sha512-qdLz2747GW1CzfK61YDs7ErfC8SE8aT65aJP2GNnhwYh7wL1E+dCtWh6Soszpgccx39IlEZOtNPI32Eunnrcow==","signatures":[{"sig":"MEUCIEd5R78PPntfgpxTSDlxm5CbXJ1FasKyAvMA2U2mC7LCAiEAq8MS68/5bnDR63xP32+WDvqi3Br/RU8FVI66XvgaaCo=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":391150,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfLb7kCRA9TVsSAnZWagAAxQcP/1Keg0ugoRK268M2Yp9o\nV+E3bSNDwNMqzcLpaobWld0Fm9i0hU//zx+LWfO+ZAsalBS0sbPSZN2LBnj9\nLROmmFoJItV5O2ywkBKk0z7cmHoRZrRo/7bWVmUp07jWTQrtWBjOBHRfT+rt\nc+M3XqHMe1/7Zpw3RlKkW0btdibugKhs+z2ucMb0kObgxaXpWNFDC/a8hoO0\nBzN7gsjOOoObf9LjXUaJdi+4fANs2hURXSR9/xyk/4VTo4pX60lyqT/NSqFx\nsHVvtxI47JSGckImwlyeAmiVSDioY6di09KhMWl+l/n51WhGKw1/b+3RwoLv\nfQMLwCSGXcN023a6BjKpcEBJ8ZHsbEjWRfiG8zuRajXzrkfISiiElh1vtUGt\nVreoJqROmI+kGo0ucf4ZJvzNLQNvHnRwAu12vukkmiG2E0J4MBgXnK63kneE\n8YNP586pUisxVehtfjEdlekZuPJBO/u53gp0sqqrQxWOvY4gvsWWARpgydIS\nH0I6X+5EaJNM+arPssxyZYP7j7s3+iclsvK0jZv1FhoY4jT3KkAPgPlgxk+w\nVDin+dD9Gjoh3C0hcHa+oDLKIym2ptrGRX7tAt6UjoJJ1ElsmPUgDoWQej8G\nx67LizjCJvOBX7HtxaQ06jNvR/tjOLg8Lc7rHArxV71boyZJnysvgfximU/g\n/kRq\r\n=9Dgn\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n#### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.**\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n**Note: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.**\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n\n**Note: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommended to\n always include it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color)` | Sets the container fill color to the given color for an enabled button.\n`disabled-container-fill-color($color)` | Sets the container fill color to the given color for a disabled button.\n`icon-color($color)` | Sets the icon color to the given color for an enabled button.\n`disabled-icon-color($color)` | Sets the icon color to the given color for a disabled button.\n`ink-color($color)` | Sets the ink color to the given color for an enabled button, and sets the icon color to the given color unless `icon-color` is also used.\n`disabled-ink-color($color)` | Sets the ink color to the given color for a disabled button, and sets the icon color to the given color unless `icon-color` is also used.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color)` | Sets the outline color to the given color for an enabled button.\n`disabled-outline-color($color)` | Sets the outline color to the given color for a disabled button.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web button component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"@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/density":"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/button_8.0.0-canary.9f9aac825.0_1596833508195_0.005094033662339514","host":"s3://npm-registry-packages"}},"8.0.0-canary.fc65fd00b.0":{"name":"@material/button","version":"8.0.0-canary.fc65fd00b.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"5646a8d7c6072703ac6cdc4e6f25cd70b0c05598","tarball":"https://registry.npmjs.org/@material/button/-/button-8.0.0-canary.fc65fd00b.0.tgz","fileCount":26,"integrity":"sha512-nlfWZpfWezm2PoeUwtoA9ugMuj1f7ZDcWLv0AVb6FFAvWskwms0xXTYD7+9xyHD0IxcgabvCEicbFoPGgfQLvQ==","signatures":[{"sig":"MEUCIQDEkd1jxprcCF7VbHl9rIOeniueig1PM0x46lsB/LfdGQIgA5sGHVB9PEEV5oESpRUXMZKfpPf3O+JH5re1thki8p0=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":391150,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfMWXZCRA9TVsSAnZWagAAcKUP/33hWnp7FharGiODkADR\neLIWlJhTqp65Y8xkAgFucUn63mUGAbtz4FV+IahIs8rM2dA/moDGCIO4xQYp\nDvm/XuH8vBM0hGzfvdPufH0Oxah+mHBqSVW1/cBXqIijAAvIBodGti4NXDiz\nVp47Ntl5HezjcXPgJxJRixtJX3QTgt+0pKtv+Mh9LMkDI15HMz10WDoEKtlz\ndbfv9BneM4fUc4HBBdrTDWvF0dgp5s5neT50ysbCNGuCPFfIyDgekhGcAGBm\nTGS6vgxhFDyntUJgYxEWsS9iwuQy8TY/DlOZ7PyQbGUJnw3W2WxhbcoiEZo8\nTIG58ppmGj8JzjVabpEsExrsr1e96tpnPTMD5amscp/Px3+flPyDwFuC5kAS\nvz6i80OTRCB1rSS+iTVd1bdCkQNOxSBhZEPgkFUS3tRXPVYNUwXJdi18HLDG\nD8951kB9LsIZ2DodkBFk73LS3vg6lbArGX/uAf3xXXEO5Cl4soEj3yRTA3Ol\nch9PicyGspmzZouegzqnbeuP3PcISsVqUM3s6k3jCZmmAlo+8fdJt4Aoa+lg\nYS6LCamuFifPQlenj14ykv0W6lTWZ/fkXGAvYsEnWW3PGqU/YiHNj5LuMKgI\n4QoOxJCknPcC4+HCW7tuPgUM82QMBbN9d32sHNF3G425uqLtoQwknY22EqmO\nGI3Z\r\n=xahf\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n#### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.**\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n**Note: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.**\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n\n**Note: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommended to\n always include it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color)` | Sets the container fill color to the given color for an enabled button.\n`disabled-container-fill-color($color)` | Sets the container fill color to the given color for a disabled button.\n`icon-color($color)` | Sets the icon color to the given color for an enabled button.\n`disabled-icon-color($color)` | Sets the icon color to the given color for a disabled button.\n`ink-color($color)` | Sets the ink color to the given color for an enabled button, and sets the icon color to the given color unless `icon-color` is also used.\n`disabled-ink-color($color)` | Sets the ink color to the given color for a disabled button, and sets the icon color to the given color unless `icon-color` is also used.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color)` | Sets the outline color to the given color for an enabled button.\n`disabled-outline-color($color)` | Sets the outline color to the given color for a disabled button.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web button component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"@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/density":"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/button_8.0.0-canary.fc65fd00b.0_1597072856901_0.1298577608328384","host":"s3://npm-registry-packages"}},"8.0.0-canary.02e372c5f.0":{"name":"@material/button","version":"8.0.0-canary.02e372c5f.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"b8f2ccfca6b6884a88c4abe05903f79281f93b2c","tarball":"https://registry.npmjs.org/@material/button/-/button-8.0.0-canary.02e372c5f.0.tgz","fileCount":26,"integrity":"sha512-eToHI0I5TyT4iHm8YfqQBoqwWE/i5O1E8ZejY6xMYScgXyJZtC+bWow4NcSKK5dFtR7+kOotEhfIcV+1TfOG0g==","signatures":[{"sig":"MEUCIQDo3pi2WD8axtoKmIfipuyuaTzKnlChJAWPOvEMI5dAVwIgX5ueFKQ1dnWPaaH1yct68QL3uaFu+QJSb7rK0UoUdAI=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":391150,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfMWxuCRA9TVsSAnZWagAAWlQQAIJX18GWaHswuny3/9Si\neQnOaSYSbc9XzCkQ9zxqTAGjNWzl5GqRHXx9n+irb4RvJXQ/fnfO1DzLxz9K\n/NhmmG1yIug5M8rj3TEVnPeOd179ImFwXDSuBIKHo6Fq75MoKDrmzLt9huQw\nx3JaHPpNlD1IZwAPteoVH2ZOyGNCRX4usP08qMS4IeSe+kFpc8Z1daswQOQ2\no3WrelaUZKFaIkkvsrY/ZeJzpE7D0NBp+ss+V8gdFCPIRCl1K54v5WRjD5zX\nklS+/4rZ8JZIzl/yT9VA2r2Mz6RivUFBjKJn6nnGwvkTpkeEyUwNSKPKG018\nhW3JUteRD5PdrfVNXukeAZ/URiMM/Wg3Ra+GrZ4WJbWwDnYjLqHTxmy7jMTc\naweCcPR6x1QHxy3ZeOdSaXBg1EJrVXBS+0nDx8gQOhKXYtEMKvwqbe14r+S0\nHc4Qft8a8rT17bgrv0wQOSi2Oo1yOjjP0+/hpu5HhIgfXphirp3bFkRCzG7j\n8cD0BCUkyVgRtz2xjRiMZ83+1aNxaLtFuQYrVonBhmmpatCvorxqX4PMU2+f\nFNiz8emW7PmIP1o7YfAzCHLVGdUjxrWYgk2Q2X5kKnEpZEuUQ3FFyPWckIM8\n1uG1pLUZK5wjRGbjIqdrkeOsozHHdIftXrks/RoUXg0UPNwF+Da0zchDVh8i\nC18v\r\n=GyaC\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n#### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.**\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n**Note: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.**\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n\n**Note: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommended to\n always include it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color)` | Sets the container fill color to the given color for an enabled button.\n`disabled-container-fill-color($color)` | Sets the container fill color to the given color for a disabled button.\n`icon-color($color)` | Sets the icon color to the given color for an enabled button.\n`disabled-icon-color($color)` | Sets the icon color to the given color for a disabled button.\n`ink-color($color)` | Sets the ink color to the given color for an enabled button, and sets the icon color to the given color unless `icon-color` is also used.\n`disabled-ink-color($color)` | Sets the ink color to the given color for a disabled button, and sets the icon color to the given color unless `icon-color` is also used.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color)` | Sets the outline color to the given color for an enabled button.\n`disabled-outline-color($color)` | Sets the outline color to the given color for a disabled button.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web button component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"@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/density":"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/button_8.0.0-canary.02e372c5f.0_1597074541996_0.9171508809316258","host":"s3://npm-registry-packages"}},"8.0.0-canary.66669e3b6.0":{"name":"@material/button","version":"8.0.0-canary.66669e3b6.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"fe147e27bbf5c23230fe845da91e1c5e6d36c51b","tarball":"https://registry.npmjs.org/@material/button/-/button-8.0.0-canary.66669e3b6.0.tgz","fileCount":26,"integrity":"sha512-vAGAGS5lgUNRqStjPkkUvN/XzpndqXVvRWQk1oEn21TpTrFD25x8/qlS5S9CfB6OM4SqIXJwY/rcxOuADS0EhQ==","signatures":[{"sig":"MEYCIQDwl/Zgd7Q3uPmUuV00hAFFDakJxjyzWJX6Kira9uykkwIhAJAL523dGzAsTKXN+STMDC+NxA1ub0ntj4MNQtq6F/Fe","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":391150,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfMW1dCRA9TVsSAnZWagAAc8gP+gMR3+EmMs/1r0Z0eGup\n51Fp/8yuBpfYpCs+ZuD06OPaVGMj2Dpa48/yEe3xiCNRISyeNNquR2u0uE/t\nNzU1YGnOee8kpYDoW4tURdKBfK69fj0/pbmvCg1obYr5WLd4i1pxjgMJnSA2\nLN+o7eC+cMN2gra0LeP252004r3LZm01m8HKr1oPzBI3h8OoFxnVtEzWJwHc\nSNsmdSPA6LGkH1ytzZn7Sj2wl8VZTDx403kmwqVaqO/O6RFfa3R1kykN3+DC\nNRexkCRA5RJnb7vJpC5GrHSVlo1nJf5fN9t+NTyeZIN1t5cYrD7x9Eb96Lcd\nADSoQaQ049uwzu56zvwC2EXN6jz2EID43r1A9yps7Hi9aoGS13ulCjkHe/ja\nTgiXM+Y8NqCGRWO8WKWDf5w70pKsJ6bIbOpO45Q67UV2BYhkdo1gMEMhOh5C\nr0B/JDVKVDfrK0LaZS2z4bGGpk7E3vVvzbUodbDlqaNrv2y9MPunfK+1f6Nd\nm7c4AvIbopwQWBeeGyfoOoR44pyFUDEp8wOThYDwEPulwoHcan687YLB25gk\nhNFNfMjWXgD2PjGuW+9+AG9JY3sJ83Q7M8VVm/OMD/GZ45LF9bSj2/XoOwZN\nmQ7VJQNjgaontUJ4xjcXdBGLUGJpwNeYFwPVFkmuKIMTosb+peIBh4Oz5e/W\njG13\r\n=IH5J\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n#### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.**\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n**Note: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.**\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n\n**Note: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommended to\n always include it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color)` | Sets the container fill color to the given color for an enabled button.\n`disabled-container-fill-color($color)` | Sets the container fill color to the given color for a disabled button.\n`icon-color($color)` | Sets the icon color to the given color for an enabled button.\n`disabled-icon-color($color)` | Sets the icon color to the given color for a disabled button.\n`ink-color($color)` | Sets the ink color to the given color for an enabled button, and sets the icon color to the given color unless `icon-color` is also used.\n`disabled-ink-color($color)` | Sets the ink color to the given color for a disabled button, and sets the icon color to the given color unless `icon-color` is also used.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color)` | Sets the outline color to the given color for an enabled button.\n`disabled-outline-color($color)` | Sets the outline color to the given color for a disabled button.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web button component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"@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/density":"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/button_8.0.0-canary.66669e3b6.0_1597074781454_0.5413803986540617","host":"s3://npm-registry-packages"}},"8.0.0-canary.6d1ea9761.0":{"name":"@material/button","version":"8.0.0-canary.6d1ea9761.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"479ac2cc253cd4452171c141f0efa01821a88ef3","tarball":"https://registry.npmjs.org/@material/button/-/button-8.0.0-canary.6d1ea9761.0.tgz","fileCount":26,"integrity":"sha512-nWceF5VxICgZmJicOV96MVH74pW5T0SRdqU7WNDEv+T5aPPWklHYnLQbTQqVLHaw9DhCCzYlTsPEqn2Fdewn0A==","signatures":[{"sig":"MEYCIQD0PcAM2p65XXiLxaZkgZuArmr3Kt1/2fEx79w3Fo+A2wIhAI5WHnz01WEhY+RihzIyqyih8rwh8y8v+LlwwEqQ6XvJ","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":391152,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfMqu1CRA9TVsSAnZWagAAeZsQAJVpdJ8GrTfjXh4buSgw\nkyJasLcn85VBW47qHyd8cDoRp2YlLW8LPzzrQp2HxJYEy1Q+Ccv/LowVphDN\npIimZrfvaSYb5FBEbaJyuzdRD1IhALT+be0teIb+WW41t/mBxlJtPPolh21k\nhrInEi5UkRoZLja8aFrBnTxrdIG+FQ6hIgS9CaTL3romj7vUTOn35q02WeXK\nbT0GEuXy3bj964AvVpmHyZNhZiTKnL2fUxBLS/4FO7DRCKPC41U+7v0Ph+Mz\npR7syk3M1e1758lVgKnU7nMsYhYrlb+iSps/V6ZPx+DNJ+59RBVbXHBHp9tS\nZGD5zzEe34yyEUl00zCo5J7ioE3gmbvgB/Tf62pM0Lxu5uLXgUNSQuMp4i8M\ncXPGjwZG+B6oGrpJ+Tzag7qKUkoaxZbVYL816ghDiyBo9aMF+F1T8UeCA3vJ\nwCS4NCZY8k79miC2DfkKu9csI4oEC3iga9xvwlscmCS26e0vV6+T+4F5uPi9\nbR6RA81ycqvVGcZdmrOZ2tiZ8iqIO2jfbs0+RsBOHOL0u/yyxl9miaOaHTK9\n9fN0YZbzgs7DEPJwrQxleBm5/QyEJ/t0DYWQBRRXOTebkIfkOA5jesOWOUEl\nSJ30EYiCoM68F7VWzzS0ExF9SG8tSen3jxlqTPl7yqzs1T7zMG6SZp4/G/sz\nqyfw\r\n=aNYu\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n#### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.**\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n**Note: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.**\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n\n**Note: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommended to\n always include it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color)` | Sets the container fill color to the given color for an enabled button.\n`disabled-container-fill-color($color)` | Sets the container fill color to the given color for a disabled button.\n`icon-color($color)` | Sets the icon color to the given color for an enabled button.\n`disabled-icon-color($color)` | Sets the icon color to the given color for a disabled button.\n`ink-color($color)` | Sets the ink color to the given color for an enabled button, and sets the icon color to the given color unless `icon-color` is also used.\n`disabled-ink-color($color)` | Sets the ink color to the given color for a disabled button, and sets the icon color to the given color unless `icon-color` is also used.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color)` | Sets the outline color to the given color for an enabled button.\n`disabled-outline-color($color)` | Sets the outline color to the given color for a disabled button.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web button component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"@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/density":"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/button_8.0.0-canary.6d1ea9761.0_1597156277297_0.7723180677362651","host":"s3://npm-registry-packages"}},"8.0.0-canary.79414bf9f.0":{"name":"@material/button","version":"8.0.0-canary.79414bf9f.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"82bfbc7651f5bd7beb392a53c281d780603ffe98","tarball":"https://registry.npmjs.org/@material/button/-/button-8.0.0-canary.79414bf9f.0.tgz","fileCount":26,"integrity":"sha512-6eopSnvZaTXxVHTaeuZTj+lHdWyk50Md8knLWLnlqTfuWRbYWL+HltKT+kzYRJGNYbw/oZ6XsKmITlBXNfVlfQ==","signatures":[{"sig":"MEYCIQCNw5MywEYHAnak6e02KhpeZgt6YP60Zt8+2Pk3TKbE7AIhAOcTIgkROkGK+pms+EoDQLpekHRvwHQUASsbgnzWaQs4","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":392791,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfMus+CRA9TVsSAnZWagAAJDwP/241HOcJ/HmT10vRs7Fg\n04YrhFfan2FVTNo+SOekvB/XONdxky64/7COXpdyFH9vu0f12KD8X/J9W5Xn\n5ELC2QSY2vv37mVKW98NTWWnru7GgnFdV8oBbtDEQrtyTV3gsX69ues0Tei8\nI5e2fAa5Uod+cq56f96CgueQK8PhqX6NoaV5LDenBn/0tvDRyFi6NZqHSkqh\nQiHhHuDXiJDwPY73jW+JZU8JmNIU9LiP+B6h2bUnYl1Z1RNQ2y61n52kFCHw\nf3k5M8baCU4RDDoW/Bd8CkI0ZyREBhSvO5LjJdAUCwYsKiz1Yg5q1bxpvGoq\n5CWRsgUHw77F9gLTP4qlcN8agIzn4PaAQVvr6VZFeTIx31zsid6ez94JfRG3\nXz0lw+skCNYnBBJvLUAtO2CLBBybX4GGkc+LbflRfYjkvlcZTDbQvbc7lmHZ\nFNKyogR+E8C3omuouv0mn+CbmDOcU0pEad262RvHsxKdJC84EbQSkqs+HI/4\n/ilvZQeaVOmDuNyn3if/AtZSOEmrXsr4h4YPLa5+XEmHRbevqn8GXS2SUjlT\nLEG5whNlBBg7kenkXwN4zwOvuNNYFWvhlXbhMAZqh/ZVJbyHl9hBoaWFFjPM\n36c+cSQpEkweeXgX15ceGoNvGGFTv9TTQSz847rUf6wIyRt5YHLFe7gcJITd\nYFii\r\n=3Twy\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n#### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.**\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n**Note: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.**\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n\n**Note: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommended to\n always include it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color)` | Sets the container fill color to the given color for an enabled button.\n`disabled-container-fill-color($color)` | Sets the container fill color to the given color for a disabled button.\n`icon-color($color)` | Sets the icon color to the given color for an enabled button.\n`disabled-icon-color($color)` | Sets the icon color to the given color for a disabled button.\n`ink-color($color)` | Sets the ink color to the given color for an enabled button, and sets the icon color to the given color unless `icon-color` is also used.\n`disabled-ink-color($color)` | Sets the ink color to the given color for a disabled button, and sets the icon color to the given color unless `icon-color` is also used.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color)` | Sets the outline color to the given color for an enabled button.\n`disabled-outline-color($color)` | Sets the outline color to the given color for a disabled button.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web button component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"@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/density":"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/button_8.0.0-canary.79414bf9f.0_1597172541816_0.3993608112791971","host":"s3://npm-registry-packages"}},"8.0.0-canary.85a5272df.0":{"name":"@material/button","version":"8.0.0-canary.85a5272df.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"4b8b76d22c8d806ed492ce6b5cb439c8fdc45e64","tarball":"https://registry.npmjs.org/@material/button/-/button-8.0.0-canary.85a5272df.0.tgz","fileCount":26,"integrity":"sha512-FtqNYVg5D1hBiCTYAExZe71w8MEU7ge/oGO4f560vHae1afaRRYzv3DRunRDZyaXUct0oSC7JgbUe9fVA98NLg==","signatures":[{"sig":"MEUCIQDaSvBi3yPK9SK27DqAQtai+x7qENBkW5AtTMm8h8aKIgIgTDi0oBXNN/afVE8O+d8X6sGvtTrke4V50+sYV6tnKIE=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":393426,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfMvrGCRA9TVsSAnZWagAAk5EP/j7rxhGAbwVYSmvE4SOw\nd9mhnTJqmOodu9D/idyXtiARYfGkeGv9jw83ER+AYTz7ZZ3aC45SIMOtdrbP\ni2p+huTMj9cbOiVuuthO597pR2w1/uQxjDdbHXmvUj79B0uksJXUeVfta2lJ\nGcVz82WnIwFAMix0lt1PSeGWRUeMJMPwi0vECU9jGnpOONs5mBgbwqleOEGu\na/WlSeCExO6Rk79TH957PbocoXfORCVj1MkLh15gOV/xwP5t5i5hL5Tgky0I\nSOpQMey8NrKJ+SCTYk+gZ5IQ3v9xPYuxgIxEUqEmTHK9zg9fBCccxTYSJIJ7\nD7dYy3OVvuyuW2fUQ7Yk3sSpl/VyGkeApFGIqEeIjEW2QrG7WmY+Y5AKZ4cM\nmRSK2v4LWVCh2CL/5AW70+cFS8//4THGjYxgvjpQzhEno6l4pIB4d3K6wMr2\nsWLV2+QYu7j8KP72NE3t82ncrceD+W44L7N7OuO6hXRzFfw/rEepEKct3jYn\nn8ZVPvAp8LLQrFfIDuE9zMjptM3Btvldl++cz37wtV52TswjfNDvjiSB2VwF\nMLdr026ve0XgjOFl+w4Q2Z9EZ5Pks2tjK9zOQo35aSNxmn44VXKEl5/n0qMt\nWkYPDjgoEqCp3obwW5mf/uStTcTybHdCSjb3zAB3nOMFBDtBy+VVoP6zfhJ2\naejv\r\n=KLSi\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n#### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.**\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n**Note: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.**\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n\n**Note: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommended to\n always include it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color)` | Sets the container fill color to the given color for an enabled button.\n`disabled-container-fill-color($color)` | Sets the container fill color to the given color for a disabled button.\n`icon-color($color)` | Sets the icon color to the given color for an enabled button.\n`disabled-icon-color($color)` | Sets the icon color to the given color for a disabled button.\n`ink-color($color)` | Sets the ink color to the given color for an enabled button, and sets the icon color to the given color unless `icon-color` is also used.\n`disabled-ink-color($color)` | Sets the ink color to the given color for a disabled button, and sets the icon color to the given color unless `icon-color` is also used.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color)` | Sets the outline color to the given color for an enabled button.\n`disabled-outline-color($color)` | Sets the outline color to the given color for a disabled button.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web button component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"@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/density":"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/button_8.0.0-canary.85a5272df.0_1597176518478_0.28301891441682536","host":"s3://npm-registry-packages"}},"8.0.0-canary.fda053eb8.0":{"name":"@material/button","version":"8.0.0-canary.fda053eb8.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"0cd1f3f3b8bde0bb6b0f3e7d1bb2b860a1803850","tarball":"https://registry.npmjs.org/@material/button/-/button-8.0.0-canary.fda053eb8.0.tgz","fileCount":26,"integrity":"sha512-cbwDFbEYsr0wUuX30kXib0o/cY6Po2iZD9h9Ztzj9uNYVeQfMwi9URX5bo25TOsBGhlwBEBUZd8i1vMCa3OTxA==","signatures":[{"sig":"MEYCIQDjE5gi3EgidGRMPigLxqIkMz4bNuGAJSJkrUpe51wlhwIhAPq/PZANk+MUvTGlxJU/ZuLd4fkrMqy03CgSejaAjqA3","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":393426,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfNEtWCRA9TVsSAnZWagAAADcP/0mdCCnXoC9x/UQNDcak\nrQSrpOLhUNu39xo8QPm3TYnLCO0VaZBB+LtSsbgO46ZOczPenhzduShcDf4d\nD0f9Odz0qLAe/stjaCGRKUXcVWcy1X1R62GHx0GLss8cMWxllKxJs8yUwne/\n5cnAeB+BXJXftY9Q6gLqMehDDQazuSskpgCJfXXylcG+G3rNNKDIyE5BDeTl\npQHc1JOwfIronHekNfQi3d4ADgjRIXMZGJ2g3jZJMRnFv9/TPWOqVGRL2CKj\nVP/GhbGsdUrqZt7lrWAMdSENotHBAN82+pfj3yklk6W0DXLZjGfm/Kukjlpw\nCvlZTGaHtrqJP/kT5YzWMQt4SOsOW8VeJucofYGWcOuX/RoBVVwALA3w4VbU\njDPYS0+593HmMjC57L4fXOuDUmRV8Nfj8Q4pPKlbArcBvsnSt/q6QpQZd7OO\nbmrIfVRzFRIuSX92J23PxIqsApSSGipn5QX2EKW3M/wxn/7smNbfLY3JIKKX\nBZJF7mJicmC+haOLHgRp3nMZyAHVRH3LixsRyPaUtBTIHTVMj5plaWNy8bPF\nMdKp6ZkE5vOt3lEQoxSlrGs1veVAW6/4+UuaVDqULa2hSuHP+icZG981Y8MM\n2nJLIOkh+zTSWcEmjhLh9Efr9Nab83J4yiru7BIUFqOggh8859DOW/WwyGqq\niN/H\r\n=YZWL\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n#### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.**\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n**Note: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.**\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n\n**Note: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommended to\n always include it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color)` | Sets the container fill color to the given color for an enabled button.\n`disabled-container-fill-color($color)` | Sets the container fill color to the given color for a disabled button.\n`icon-color($color)` | Sets the icon color to the given color for an enabled button.\n`disabled-icon-color($color)` | Sets the icon color to the given color for a disabled button.\n`ink-color($color)` | Sets the ink color to the given color for an enabled button, and sets the icon color to the given color unless `icon-color` is also used.\n`disabled-ink-color($color)` | Sets the ink color to the given color for a disabled button, and sets the icon color to the given color unless `icon-color` is also used.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color)` | Sets the outline color to the given color for an enabled button.\n`disabled-outline-color($color)` | Sets the outline color to the given color for a disabled button.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web button component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"@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/density":"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/button_8.0.0-canary.fda053eb8.0_1597262677544_0.37953327011621196","host":"s3://npm-registry-packages"}},"8.0.0-canary.760873445.0":{"name":"@material/button","version":"8.0.0-canary.760873445.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"5a381856fe703077a194160241611170fd7a5738","tarball":"https://registry.npmjs.org/@material/button/-/button-8.0.0-canary.760873445.0.tgz","fileCount":26,"integrity":"sha512-5n9gxTEqGtUx2ING8ab4EPv1bUbsdHNqvqwPnxHIFKiE/A2Suyi+lrWMP+ucKsunS+/lY0T/pBCZR48nyq9ePg==","signatures":[{"sig":"MEYCIQDDz8+QpH8uNCKiZy6PrBR/XJziw/GtcX6P18DAEJUn2gIhAPO9R0pzki6/sG1OWkpg8o5IDSkRlT101C5dNAXT2G9d","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":393426,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfNGKOCRA9TVsSAnZWagAA+FUP/381iqc9JxDWwkzLx+ON\nFsqz24aNuaip4xMzONTsWW1hlBQUuGDdk90IfeXRkRZ/+MuV/zDoGFOcvckm\n66LVp8WUt/GYJkQZ3DMsLtzUmIUl17WWrNnECRMmMiEQyreT4HZvv7QWK4Ca\nbeveeaBzcyjZ8K3LQG2cpTNwbiQ0hfGOQQEvUhZgVgOkhBSJpQJMa5FyHXsP\nTOyVuIZb526b6UPpS9pkmzbvxOCbX+yUeogMfOOKXRnoiJXbQBUEuHuLqwE3\nrSn417GziWwwM1nBAe1ZuhJYaf0vw/NLoiWtVaGBHwubNKTh/hJo09eLTbfg\n1OSdg0AtzgbqYKZK3lebffPzN9sHXbdOuBr/gyjqAztb52ccEQt2igm4xQ8U\n9Ns51cUo50c+LKdu3ODurxKS4u41Ensh490/PE3CZ79gnc1FH7Ri9zT1Sd/4\nt1tx3lUAQNB2iVcwNn9xkwkE+g/KsvfURpboE5flPr/srdhhufUYx52Ur9+z\nT7BbZbpCZlWylRTlYFlQZ/a7NiUCXKNWOwEtfV62BBTbQtYD3sfPx2ZjDlbM\nUBuh6KGnK2C4G6rTUAVMj/za04/Uh9buCAeHlXd7bva84ppSAZwRs+HvByLY\n2ht8fEGExZeJYc/C9+9WMLlIZxJtMcEGdNYP8/drsPfQbxSgsrLk23hXYECh\nAwh6\r\n=XUx7\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n#### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.**\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n**Note: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.**\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n\n**Note: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommended to\n always include it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color)` | Sets the container fill color to the given color for an enabled button.\n`disabled-container-fill-color($color)` | Sets the container fill color to the given color for a disabled button.\n`icon-color($color)` | Sets the icon color to the given color for an enabled button.\n`disabled-icon-color($color)` | Sets the icon color to the given color for a disabled button.\n`ink-color($color)` | Sets the ink color to the given color for an enabled button, and sets the icon color to the given color unless `icon-color` is also used.\n`disabled-ink-color($color)` | Sets the ink color to the given color for a disabled button, and sets the icon color to the given color unless `icon-color` is also used.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color)` | Sets the outline color to the given color for an enabled button.\n`disabled-outline-color($color)` | Sets the outline color to the given color for a disabled button.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web button component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"@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/density":"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/button_8.0.0-canary.760873445.0_1597268621931_0.6615013359735389","host":"s3://npm-registry-packages"}},"8.0.0-canary.2f4711a30.0":{"name":"@material/button","version":"8.0.0-canary.2f4711a30.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"8b6fa1f0a4e52adc6fb6185230d68b3e7fce72b2","tarball":"https://registry.npmjs.org/@material/button/-/button-8.0.0-canary.2f4711a30.0.tgz","fileCount":26,"integrity":"sha512-eP0bUKBpaH7pKkcGOcv98RfsICveXtqIkJ2+PUHIpqazIgcF8AoP/gOwA37Q7YgpQlCRjuSb/0ppTZtZjsI8dA==","signatures":[{"sig":"MEUCIAmecv+D3rp4Dx3sSZyXr5FKfY6krABo4O6mewH71WbKAiEA0eT2TVknVSIZM5v4S0y3kM2beZUR6FeqHgsbg6N9isY=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":393426,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfNGTmCRA9TVsSAnZWagAAVVQP/2IX3Atk+sGNHafvGxFU\n3sVkZI8q55M1zMzB4CwSxYyqneeuZMEEVxKo+ar4Lasw2oiWEmAzCywlrBL+\nKRr78ompCaoJsfbq4On1849PveN8JfyQtr+w7dJiKW91P1MnrpBJslDkyWXR\nWatw58q7Sz32dN1ADRHj/rgC0mf3sGoE5l/2r6U3IiiHG3YGp4r5mvcgdf7Y\nhSc2Y1rrvlRwPDfXaSzzJx10VPkNGJLIlHRIGnHh4X+qKZawyxAbULtwYaOa\nFmxNCVQSMbdIYJArYZfUfnVUB3gPwwSPMdKk0tQ/m9Lr7muVZzNUy4eqVaHm\n1O1rrcN9ObAZWWVana0zFyCyGm0VblfvyK9U+3+qvaFC1aB7puUl3B92GcYS\nkXC+kjGJ2py4/MgVtPdCm053WA7wgXRx+yH/tjKbKfY811zZMstZuYXuKgjs\nCSyTRuSWXghC1701XYh7JiOf7jHQk0GcXDwuqPIS8TVKnMWM3uFT0G3u1q+x\nVKpL4KapfLS23kiYAJVOGGQ8g2kfI7lindeEq5jQhgrYdjG7jgHnfuwGenUO\n4ubKTU2Pu81caMWIA4yCyo6Wc3R6Lsz0PVZicd61lhjd0AXOy25YwoZ9aHTO\nlKpU1NHWuriT6PlL6NhRo8lIFIBIQjacaODYsjtE+z/1wHVdtMltLnoz4YE7\nGWGC\r\n=iOtd\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n#### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.**\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n**Note: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.**\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n\n**Note: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommended to\n always include it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color)` | Sets the container fill color to the given color for an enabled button.\n`disabled-container-fill-color($color)` | Sets the container fill color to the given color for a disabled button.\n`icon-color($color)` | Sets the icon color to the given color for an enabled button.\n`disabled-icon-color($color)` | Sets the icon color to the given color for a disabled button.\n`ink-color($color)` | Sets the ink color to the given color for an enabled button, and sets the icon color to the given color unless `icon-color` is also used.\n`disabled-ink-color($color)` | Sets the ink color to the given color for a disabled button, and sets the icon color to the given color unless `icon-color` is also used.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color)` | Sets the outline color to the given color for an enabled button.\n`disabled-outline-color($color)` | Sets the outline color to the given color for a disabled button.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web button component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"@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/density":"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/button_8.0.0-canary.2f4711a30.0_1597269221793_0.09746043062546206","host":"s3://npm-registry-packages"}},"8.0.0-canary.2d72f3659.0":{"name":"@material/button","version":"8.0.0-canary.2d72f3659.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"7a7c5c478280537fe4dfadd4f40db5f1789245f1","tarball":"https://registry.npmjs.org/@material/button/-/button-8.0.0-canary.2d72f3659.0.tgz","fileCount":26,"integrity":"sha512-sOHHoVJ3T3Ix71KDhhHIQz2KaZiwOhFapJzFpgnHHepBF5Lue0rgntgFeTJpfs494JegdJkdLWjS34ANLeTfUw==","signatures":[{"sig":"MEUCIFeW8XEAeVvXokY/rIFZnfcgXloGuUaLYavLaoKHlJc7AiEAoCTvFw2zWJFf1ZHVajHlH4n9g/SulFSPCWYxkVQMiLU=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":393426,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfNGamCRA9TVsSAnZWagAAjloP/0Z8kL72SEJFoi3GtC2S\nbI+y3OkVW2iy81VfzqgiAOFnVYvEYvKC5mvjTv5Guk2eRWC8UjJsA3hyGnZs\nq/H1Tcftz0wLo+jnt7xUdFtsMZ25UCIrawQY52MuHfUapne77wZONoZ4QMFD\nBkdJGvePq09hUkIFPI+5EG+X81rewvkWQZobroUPBvvssfKwTvgQPrbLsdwl\nuwQZEIUXD2UY+FdAQRid/2q5RAgLfew3QilENCNrzACcaj2tXwU7YM/j6sf9\n3Mhtc2xw2pkmPN1K34N/5ps8YK0FbZawjoolxMOYmLM133922eWezIenuvHJ\nRWLyvB0IN/oW6NgatG7UZnsgNQ9PDt2FM0BfIWWlpiDgf/JCu26ZFIe3SumW\nSxfZ2PRabzmd/IPJ9Jq0azHYusDII7pvSpA71QF6oRVkQmT3ck6NEg/l5ayt\nKVLobkvgyNdAJyfrBZXXP9ugOLcmyZuq7TTMrNW1u5SHIM9kD59gFReBUhfL\nav85eu2O6k96Z+VzgkM/D7D5sPM9uH7UXo44vxi31ZAHYTu/sUbQ+CdhgUXA\nfqvkS1LIm11rek80lQh2CWO53xdCHlHveO3nZeOJrKr7txe2saW3OcpHKP7k\n9ZEncdxULU+yYYOF4ZR2NnXZGp5+mC5GQ4naPxw6O+XcqPIB6ntRzH9zVNn+\n1We8\r\n=UY0K\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n#### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.**\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n**Note: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.**\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n\n**Note: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommended to\n always include it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color)` | Sets the container fill color to the given color for an enabled button.\n`disabled-container-fill-color($color)` | Sets the container fill color to the given color for a disabled button.\n`icon-color($color)` | Sets the icon color to the given color for an enabled button.\n`disabled-icon-color($color)` | Sets the icon color to the given color for a disabled button.\n`ink-color($color)` | Sets the ink color to the given color for an enabled button, and sets the icon color to the given color unless `icon-color` is also used.\n`disabled-ink-color($color)` | Sets the ink color to the given color for a disabled button, and sets the icon color to the given color unless `icon-color` is also used.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color)` | Sets the outline color to the given color for an enabled button.\n`disabled-outline-color($color)` | Sets the outline color to the given color for a disabled button.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web button component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"@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/density":"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/button_8.0.0-canary.2d72f3659.0_1597269669644_0.8763135116671856","host":"s3://npm-registry-packages"}},"8.0.0-canary.1fee70a5e.0":{"name":"@material/button","version":"8.0.0-canary.1fee70a5e.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"423b7a89cfae33615f9a86db0a3d041146c507f0","tarball":"https://registry.npmjs.org/@material/button/-/button-8.0.0-canary.1fee70a5e.0.tgz","fileCount":26,"integrity":"sha512-+fjPvx2N1xBJtVjTMtwHvGQyKpgsKoiwv/2hDhjJXvzCVbvhIm/PZbEM8Ikhjzs/eecKyp1FCeKXYvHs72mOpQ==","signatures":[{"sig":"MEUCIQDmAY6sbnKF6tbzZQ4yrccOx1/3m89kH+3h7ztWQFJHXgIgBQSbGSbnS2Ar8kDYm00t9j1LidZ+1TqjJfu3XmTvjdo=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":393426,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfNHtECRA9TVsSAnZWagAAIkAQAI/eWRNojvEfcAjeLpGY\nZ+GOQPw+9Nsehrxh1YIH73tCRY7NciZGbDLhoYayPtgTB5YdvBLdYxz3vZm4\nO0O8MxUERnxVCJNkH/hRM+LLEMIO1q7oju3PdX6DvxJnU5wJoXwifpTdi6nV\nzX+aOPzrqCS+xLxDEnbyFbNDsD2rO8bB6y77FCj1zkpGDS4NzXQfBRpZum1w\n8mOJsorZB5udLLe8WuXH6/N8alip/4x9QLz75Jyfa1uanSUQRPkzO7AbOctg\n/qZD7gYPBnpxSupt7stBqxv5kbmBeIkv8FN9MGVpSl8UrvxswYLWSGuDZqCX\n5v0lAXKIT8Jerrk72rY2UQh+t54Nqje6lFgqRFGMlK/76O3hZzkcGLudFJ9V\nHIRZa7kIRB87yjaHR9anyOokWLlyU4HxMJXMudKVvggcWFO5mHyzJsCA00Go\njnBlq7PXjtQ3LuPHVOQU9xe3Wr1StgB5iscjzVYoGQZuLqdHATo7G2qJXhgz\n0Tj1w93ZRmqRuW6+xaW3tCWKcbU0EBb2dUtr2Ny8kMXGgynz206qGTwhns7y\n35MkwfwzMay3ReTU0bGjC1OKeolN5MXrJfbZwqyHNsoyZ+OeyuXDDDgoR2Eb\nViT8zIcTg+kJDvjG3v3J7u2MFUqlkCdyOBMOrlNcAasLVkvbyOj+m/vf2hmN\ntUOM\r\n=Aun6\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n#### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.**\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n**Note: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.**\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n\n**Note: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommended to\n always include it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color)` | Sets the container fill color to the given color for an enabled button.\n`disabled-container-fill-color($color)` | Sets the container fill color to the given color for a disabled button.\n`icon-color($color)` | Sets the icon color to the given color for an enabled button.\n`disabled-icon-color($color)` | Sets the icon color to the given color for a disabled button.\n`ink-color($color)` | Sets the ink color to the given color for an enabled button, and sets the icon color to the given color unless `icon-color` is also used.\n`disabled-ink-color($color)` | Sets the ink color to the given color for a disabled button, and sets the icon color to the given color unless `icon-color` is also used.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color)` | Sets the outline color to the given color for an enabled button.\n`disabled-outline-color($color)` | Sets the outline color to the given color for a disabled button.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web button component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"@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/density":"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/button_8.0.0-canary.1fee70a5e.0_1597274947969_0.8186166636892365","host":"s3://npm-registry-packages"}},"8.0.0-canary.023f3fa34.0":{"name":"@material/button","version":"8.0.0-canary.023f3fa34.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"8f9c1c6f91273b59bd8261dd2fc14f71b61620f9","tarball":"https://registry.npmjs.org/@material/button/-/button-8.0.0-canary.023f3fa34.0.tgz","fileCount":26,"integrity":"sha512-clT+dBSVXmt1V2tIaAAeQGr8D3ES/YeufOCsq0f+h4lXltBxgqjNUB7t22sURUFA4J1lenQUkdLo/SGghlRwjg==","signatures":[{"sig":"MEYCIQC40zL40DmtY6U6A3nyzPhzDBRSFApmt92tPwMR1/G9uwIhAM+a9Q/a/DFDoOskhdbQtC1/d5OeJEGiRL9GaFpUPTLY","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":393426,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfNJOTCRA9TVsSAnZWagAAFIQP/AgVVGQMWsdC+q5/s8AK\nzX4D7uLUQ3bER3UihPzVVgejzr89E8OKbWkLJ+P9N/LXFMaYvltLMVjroZKK\n4qq6xSHF+n7u6q8WWK/S5+VvvrLddQgX9AXplKZpXJTJSj7vmUH59iVNBCA1\nL2rnNPW37XnZWh+MaDwGFrudPUks1tLFEmUAa0jmD6k0trQNpPcZXVEHyBxe\nKhxWngGi/yiSQUhWgcsl4vCCHCPK+RMcD1+AjydCKcBZGjV1faQGqZZTdzl3\n3YQ2COCagEoVyjOJAauxBXTlauZVGVnO+dlVO65B40SeHSHHr2k46lSV5bJc\njfXL12qeLCzlNt3HzTOtoAo06pX1rko/qec5guL15iXELJsX3ua/1nbYvvNc\nXeZ9UWifNvVggrUaJIIZ8BYVmYwfiP0ps8oS7QWuFkX+PLMJs9f3eG5j043/\nFFpkuklxtY/m8d0tDk+UWOuuYpRn0MM3g6/9fcRkB8L4ebriAMrlAelsbkMy\nTAN+wnhCL03nDHaI2oIZaHy30Jfu/srPqXTnOzrrnuOYkUsscLRJtD3CFVjd\nKz9Tubrj/ELRbPTQgQiRHmmanrWYORmPO4T2kTI7vOIWp8RrZV7hsIADONeQ\n7396qfvePXJS6M5bN44WZFZJbNrO5CIqs6aRoZcVVOFXYmUN1TMEL5oN0F/7\nH76H\r\n=7Pnv\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n#### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.**\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n**Note: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.**\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n\n**Note: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommended to\n always include it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color)` | Sets the container fill color to the given color for an enabled button.\n`disabled-container-fill-color($color)` | Sets the container fill color to the given color for a disabled button.\n`icon-color($color)` | Sets the icon color to the given color for an enabled button.\n`disabled-icon-color($color)` | Sets the icon color to the given color for a disabled button.\n`ink-color($color)` | Sets the ink color to the given color for an enabled button, and sets the icon color to the given color unless `icon-color` is also used.\n`disabled-ink-color($color)` | Sets the ink color to the given color for a disabled button, and sets the icon color to the given color unless `icon-color` is also used.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color)` | Sets the outline color to the given color for an enabled button.\n`disabled-outline-color($color)` | Sets the outline color to the given color for a disabled button.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web button component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"@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/density":"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/button_8.0.0-canary.023f3fa34.0_1597281171074_0.846366451903986","host":"s3://npm-registry-packages"}},"8.0.0-canary.80f3a9e5d.0":{"name":"@material/button","version":"8.0.0-canary.80f3a9e5d.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"46b7ac73cb26e42bc4f4628a6c2b177150de2eb3","tarball":"https://registry.npmjs.org/@material/button/-/button-8.0.0-canary.80f3a9e5d.0.tgz","fileCount":26,"integrity":"sha512-97bnvLjW8cbHMfdpiuuODVIjvBsCfyKHnFAi6MQfErT8k5SlLbvLjUJU6VhLw23qHLK77oXuP/AjHkmz0hRlrA==","signatures":[{"sig":"MEUCIQD1u5Drk1UC89uw19erhlfllNDT3FqPT/4RqREBpDgL2AIgBLX7tO4P0OcnYSBTFugUbHlkrkAgGOa5GxM9KMX65Is=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":393426,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfNJd6CRA9TVsSAnZWagAAVu8P/0yn7yGYxDuUw2IoEqlL\nrifg2bH/jTUfxP0S/W3mAVUv1hR+WaDA0tSK3RO5aVcdIq5dJE6zn/wBS1r0\nRPznpE5/kvMMk2bSock+ArPqQB7gBvb2egl+gfaHGNe+EPnawuDOj4qmS9vu\n8KekdjVGKoxZoPJyHfX22IqbexAGTL3dBflAVNxwGmBDICuVBt6/lVkYdq+4\nFSk+AjgfbFFjCARXssXnEcVAfFya8vtOIryiHgOSx1ke0OCy3jxTGDIu4D29\n+mk+hvsh3DAbVOE7xDlrOYFhmg0tkti2zoJiCq0gl8IeSpCPxb14wZ9Zunnd\n5k+6DVI57CIKmR71x0UNLRUhXZQUknquQWwq3Rc/HDTqbxDOCrQpgqyArNek\ntoUW61L1eD8i9aQrexYgHhBZr9rrPmeJjEP+/8wnYgv/bcJxej+6k3lYZoiM\niU2qGYiG6NK9W32WwWZWyfFauALUMMA8Ev5VzVlxGygn2vELRtwfv35ZAaVo\nqIvB8WaQqnXJAmwl1QaIBedeYszk0lNAW1Pt8Fwqq15+w5liPpZDvYh9nvhh\nPtsQiHRdwAJo5O5DpoGpzapBgST2c5jENroNx0H86Nurf6zbSFxzlR9yfjy9\nXKsh7J3+JL73Dm2jS2TiXM7g31ci8NBWaWg2ypYCDtWndgsHBoTSkdKxP29u\nuSmY\r\n=orT/\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n#### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.**\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n**Note: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.**\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n\n**Note: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommended to\n always include it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color)` | Sets the container fill color to the given color for an enabled button.\n`disabled-container-fill-color($color)` | Sets the container fill color to the given color for a disabled button.\n`icon-color($color)` | Sets the icon color to the given color for an enabled button.\n`disabled-icon-color($color)` | Sets the icon color to the given color for a disabled button.\n`ink-color($color)` | Sets the ink color to the given color for an enabled button, and sets the icon color to the given color unless `icon-color` is also used.\n`disabled-ink-color($color)` | Sets the ink color to the given color for a disabled button, and sets the icon color to the given color unless `icon-color` is also used.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color)` | Sets the outline color to the given color for an enabled button.\n`disabled-outline-color($color)` | Sets the outline color to the given color for a disabled button.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web button component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"@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/density":"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/button_8.0.0-canary.80f3a9e5d.0_1597282169469_0.8373689026657603","host":"s3://npm-registry-packages"}},"8.0.0-canary.a1dcfe97c.0":{"name":"@material/button","version":"8.0.0-canary.a1dcfe97c.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"c0c5af95207c634db16dff2a9b5ebee00be3a045","tarball":"https://registry.npmjs.org/@material/button/-/button-8.0.0-canary.a1dcfe97c.0.tgz","fileCount":26,"integrity":"sha512-8W+zKO1DA8dY/pRaBidrAhXLZQxSRqPrnxr/dh8Tjw/I2xQG2jOxK1bci903rVfONCSacqdSFaCTW7F2MA89Dw==","signatures":[{"sig":"MEYCIQC4DPNa5jjIPyJ1mhGmFO7xOPzV0unEfOSWhw1rLbHjyQIhAKbUZ/GTrVA7aU1vripvGihtZpvLODezZ0BSaEm8oUoL","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":393426,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfNP7OCRA9TVsSAnZWagAAl5IP+gOA9X34AVIKVOIUIjLy\nLxDITT0eSQIbXvhLDFG6E1o8aKYVu4n/OQc2wSBTWMy5f2V9U+suuDitaLps\nAJrqJWdSv43ra+DH9X5lLJplf8vfu30wA5S301+ufd+gVfxsBO5JsF2ctLsT\ngaKEkXS0n/Pj9GPwSiC+pDoEogpg3wZAgwZfp1QN4O3YabNW2JM8/gtxgZK6\nAavcGg1J/Y1LIArUq/uxqnm6+FlyoCNJOfS+rBljH+pLHa6uAJ7qomp/MkBL\nt/eGpxc8kj/7GwcphhGtU8otqFq3ICwCK18im4qslL+bAsANBOt1Zex7WEv/\nWKNb10rkf1MnaWmV36Ey1EOA3nUkOWHa/RIBMKslO9UOE3zD/8Nj+yDogj9X\nFXunQndgS1QvuPKmWZXXNR0VEX/Bo6/Y0fftB2bvmGHvaZft5FIANJKN4xZr\nUN3tqeOVTE7vDMTarjr1gPSmDAOwxEyn7hPGcO/+HPlI2EHi54/2n68rQpK7\nG6kXLbal07xl955+kDt2aq66jNKVIbmGJ22NFUd99AjfzVK7Br7u/+3WETjy\nOaRuWjH0Hdp7naGbx56bAMBrxJSDH2eIBAN4ttSX1IGR0WgtsNwswrwicTmy\n5veP0D8i7Vujg6V3iYfbp0Mx08gCez6LJJIBxr1VzWRKaqSiIWPf52OQhXMD\n2YPE\r\n=aT04\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n#### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.**\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n**Note: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.**\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n\n**Note: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommended to\n always include it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color)` | Sets the container fill color to the given color for an enabled button.\n`disabled-container-fill-color($color)` | Sets the container fill color to the given color for a disabled button.\n`icon-color($color)` | Sets the icon color to the given color for an enabled button.\n`disabled-icon-color($color)` | Sets the icon color to the given color for a disabled button.\n`ink-color($color)` | Sets the ink color to the given color for an enabled button, and sets the icon color to the given color unless `icon-color` is also used.\n`disabled-ink-color($color)` | Sets the ink color to the given color for a disabled button, and sets the icon color to the given color unless `icon-color` is also used.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color)` | Sets the outline color to the given color for an enabled button.\n`disabled-outline-color($color)` | Sets the outline color to the given color for a disabled button.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web button component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"@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/density":"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/button_8.0.0-canary.a1dcfe97c.0_1597308621554_0.932458776582676","host":"s3://npm-registry-packages"}},"8.0.0-canary.af332d5be.0":{"name":"@material/button","version":"8.0.0-canary.af332d5be.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"93fbbfd8c219e701204e321872349c540703507d","tarball":"https://registry.npmjs.org/@material/button/-/button-8.0.0-canary.af332d5be.0.tgz","fileCount":26,"integrity":"sha512-PSTL78+hqD/EIxOPkgtlJeg9QELfUjfTNWEjsyrHVdl47/PmrNsE7oiLK8kAXigkaL9b8Uy8CpCcTtQ+QGCKng==","signatures":[{"sig":"MEYCIQCdauqlsK7aGQn2/jgcVWo6y19Dh/LsCzXy9+k4UI20nwIhAOVBQozZzU+8qIFkMPKlheB9SCAV5RpboovOcMdmTzOm","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":393426,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfNa4DCRA9TVsSAnZWagAACRkP+QGGfZc+9f/Xp24YulPI\n335Ht/Ro899AjP412FOm5gRm5X01INMZW4Z9mKs0Ugsrr41dmYIKx9iXqD5W\nzVe7r1RJM8OY0P6zRrDOYcwMblQrbQYIzyoF+4ArkbEOUw9rewk4C0dKUWNc\nmyqVQbIRNNBLp/Dzfxy5Rrw+wkflFnUVgLdQuCc7pQd4k4wdXzlMWvsp1aAt\n1YNJIHE5HnJJPjWRHfyj+0fVsjLoFAZQHscjFmFvj3qs2YlPoUg+LRc3/kJW\nb2Qy9fgGlhjHRP8/A225B4V7/dUA+6iyFL75wckn6mDetYhtm0oig5076ejS\n5nsByvfFkvu32PJx0D/9CDE5EMl8NslYPAAz3YhDicc+l2RdERhSRnCXGhwA\nlxjZfPk5gF9Bep0tr4fJ5Ss/j+Xxhs/iOVjdfPlVo2h5+A4XQLeLjPWl+oCl\nuvVpLHuzKbVF12kLUFO49XFjSXj0b7orL8GlTU9ysIADe8KDtI9wYswz/IpF\nXdx1a88tdaR5OchfxZ0GFdPwMp0IwbuKZ3DVQz19ZxHXUSY4dnkPcTpZsTd8\nKZ17NUj3vl3x0hNI/eGYEqhTrZgOPCKBHr88ovLdxaLW25o1v/Ebyd9BqQxH\nzq0y2i/uf2xvgaVqGzSmbPvPs0A3yxKv5835EseV3NNjoavEvccKMrjgXdn4\n5H+4\r\n=glrA\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n#### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.**\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n**Note: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.**\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n\n**Note: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommended to\n always include it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color)` | Sets the container fill color to the given color for an enabled button.\n`disabled-container-fill-color($color)` | Sets the container fill color to the given color for a disabled button.\n`icon-color($color)` | Sets the icon color to the given color for an enabled button.\n`disabled-icon-color($color)` | Sets the icon color to the given color for a disabled button.\n`ink-color($color)` | Sets the ink color to the given color for an enabled button, and sets the icon color to the given color unless `icon-color` is also used.\n`disabled-ink-color($color)` | Sets the ink color to the given color for a disabled button, and sets the icon color to the given color unless `icon-color` is also used.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color)` | Sets the outline color to the given color for an enabled button.\n`disabled-outline-color($color)` | Sets the outline color to the given color for a disabled button.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web button component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"@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/density":"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/button_8.0.0-canary.af332d5be.0_1597353473960_0.610049957758267","host":"s3://npm-registry-packages"}},"8.0.0-canary.7dd4567c4.0":{"name":"@material/button","version":"8.0.0-canary.7dd4567c4.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"c3289d06911f9395dd1218f5fc64a48c49b0b441","tarball":"https://registry.npmjs.org/@material/button/-/button-8.0.0-canary.7dd4567c4.0.tgz","fileCount":26,"integrity":"sha512-3cIRnH7qNyu92QlUCf8n4TeJSQEMAJ4j7YkY6q9jPxhJ28KrVrO/ZXGflqHUDWBbFN1x8PAeDXBhWieg1y1AqA==","signatures":[{"sig":"MEYCIQDm/2BGGx1pojF1wFB0/91WqE8X8pGvxpIoDu9IEFvf0AIhAITv52R4IeMalks/MdLXu1OWV2Bg85NxzsLshYyyih53","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":393426,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfNeAQCRA9TVsSAnZWagAA6pYP/jOLUQTv6vIF92kxXlQs\nL7Eqjv1Azo1odZaRS8NWAM5W1S115Mxs97iVLehaFnrvx8JSA6yZBnADr+Aq\nK83I8Wauj8kHLMARub4o/PIxeT1+7iFZNXqn+k4ICjwS4F6vmAaYay952Dq7\nX1/b2eUN3DVS9Dx/NGlVXFV1HTPtCy0nfl2ih9FbTeViVFoHP6JOrGQA0IXZ\nHwqEyoKmvP7RJnQ3c/PUZzuN2nlP8yGipZkZjplG8D7a/1xkUXwStu1StuOf\nt0yj4S99YQNhzijdYUNVUfZGv5jzA5Zq0NqPtMQbErXsgT129KSUj3eAOVsh\nU5WynhLsgu4Q881sLZGhOVn+csMaBPEwR7ABl6UnGIcYXAFNTrMDt1HLh4W0\n+wucVFEB7TX37dQ+dNFrd6YXB0azpypi0BvEboctk1HjgMAxyYf0Qapu6BKW\n8wQtYkCZ0cIgEFAwGHKqXwkmzIFonZZ99+lFPzWMQE2e3m4dlhhWlJGavlLQ\nIBhUciPfjCxSW/TK9VxusdcxDb4W1Rld5k24EEVUqKTot8JNahtcQG8JPa4A\nz6Y+QJ3JXNWYOph3rqsSNZu8WmRITycy2PRDs1n8MgiohEopXAogU+uNLQs9\nkXD0JXEC9QX7MbYs/NizsWjOww9OUiusqaVZTMt3RVqJE6FeDDLFtWcXKVEX\nnUcg\r\n=ha5I\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n#### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.**\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n**Note: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.**\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n\n**Note: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommended to\n always include it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color)` | Sets the container fill color to the given color for an enabled button.\n`disabled-container-fill-color($color)` | Sets the container fill color to the given color for a disabled button.\n`icon-color($color)` | Sets the icon color to the given color for an enabled button.\n`disabled-icon-color($color)` | Sets the icon color to the given color for a disabled button.\n`ink-color($color)` | Sets the ink color to the given color for an enabled button, and sets the icon color to the given color unless `icon-color` is also used.\n`disabled-ink-color($color)` | Sets the ink color to the given color for a disabled button, and sets the icon color to the given color unless `icon-color` is also used.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color)` | Sets the outline color to the given color for an enabled button.\n`disabled-outline-color($color)` | Sets the outline color to the given color for a disabled button.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web button component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"@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/density":"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/button_8.0.0-canary.7dd4567c4.0_1597366288322_0.697098025204534","host":"s3://npm-registry-packages"}},"8.0.0-canary.ff870005a.0":{"name":"@material/button","version":"8.0.0-canary.ff870005a.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"07e8ac1b1a9c31da61dba2a1b08676cec119340c","tarball":"https://registry.npmjs.org/@material/button/-/button-8.0.0-canary.ff870005a.0.tgz","fileCount":26,"integrity":"sha512-hYiEZBd88UZkMWhdpA481KFGZC7eOJIKfZmyIujUkkUeT3Ohv//Z+1zO+qUGWcNEfMcaX1h5FUK0N0fT/1A0Sg==","signatures":[{"sig":"MEUCIQDiHha8BWtHuGKZImfdtE7Phu2y3Fv3oxu8CJUxMnaceAIgf3elCRS56Uiofql+YpHVqSquoFWfOJWC7Dg+dYWdhug=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":393426,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfNeX3CRA9TVsSAnZWagAAlfoQAJj7sAVZnf+s+mv+fZ4q\nCVjTbUbDEGbxsIynZc+c/zWhBMg7LTm32RiTG2ZY92bc8KHkSqLu2+U4ko2b\nNAUQR81eThiNOxny/Y2Ie/V28uJG/4SWxutM8mncbuBVO6oD/Kt5QPaGhmdK\n6B6Q+CJaWoXxbS1M/wUhJWOxD0DNYdoxoBlRvRNH7KZOcStUiOH7SRlCBqQV\nnMNR6DNpC2XOpgiUd1G9HHlmoWt0pbq5HnGcq5gkw9NR27X+OYDcF68HoilQ\nfEx/6kOlkD0vaRNPETRrKzjl0pgkBvApJnQ/yYPuVdTrH6/XRhjAWL3GTwhL\nxiONdy11zBhPBK6AxfFXnmjRON+iGGKsBSPfpelbuf6L+dtvs8vcT1X1yXzZ\nPhgIi4X55grp1LeOTbFBPnr5gMfYiZ2eLAtGQPwj8ipCXemmU68OKDa+SuVw\nsglY6eWsPnDPyKu4SaAVvXb51xMplJUiycqYr0ZvYj7FoyEMlGHzFYOIVAYo\noSYp6H/VMd02I9wHn4C8+vcx6jGssAhgPROatYLmn6471s8cnGMMhgzCaTjV\n9fYag/5ryGI6R43j1CqCNZd785TNfEYpDJC1skiyh+kiWSRQnxykylp+kpG6\nk+m26cSS0D+72FsFQKtRUaBwgo9ig5NW1PZPa8HA2aInwRb9oogC7osr2/wd\nhA2C\r\n=JS87\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n#### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.**\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n**Note: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.**\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n\n**Note: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommended to\n always include it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color)` | Sets the container fill color to the given color for an enabled button.\n`disabled-container-fill-color($color)` | Sets the container fill color to the given color for a disabled button.\n`icon-color($color)` | Sets the icon color to the given color for an enabled button.\n`disabled-icon-color($color)` | Sets the icon color to the given color for a disabled button.\n`ink-color($color)` | Sets the ink color to the given color for an enabled button, and sets the icon color to the given color unless `icon-color` is also used.\n`disabled-ink-color($color)` | Sets the ink color to the given color for a disabled button, and sets the icon color to the given color unless `icon-color` is also used.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color)` | Sets the outline color to the given color for an enabled button.\n`disabled-outline-color($color)` | Sets the outline color to the given color for a disabled button.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web button component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"@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/density":"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/button_8.0.0-canary.ff870005a.0_1597367799171_0.6769406849559412","host":"s3://npm-registry-packages"}},"8.0.0-canary.150f427a0.0":{"name":"@material/button","version":"8.0.0-canary.150f427a0.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"620e1974cac085f25010d6f32c10da8ff96e233a","tarball":"https://registry.npmjs.org/@material/button/-/button-8.0.0-canary.150f427a0.0.tgz","fileCount":26,"integrity":"sha512-WlXll+FpRB/wAECXq0VgA0O5WqXUgQFE2EeORoWOorCR+t3REMtCNpVP9KaxWEx9ou5WR+wc3scli1B64P0qTQ==","signatures":[{"sig":"MEQCICYGLWL8fZAAB6LS5fZUO5/lOtEVf5yZXtibLoNi+y4bAiBEW2iQLRuJ78Wg4GA+H35DkKISegFHqY6b32Oh6MBCBA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":393426,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfNpHqCRA9TVsSAnZWagAA5/4P/AwySrASQS2AzWkCD9eM\n6lo6VB/RHjVe9h5BTYGfFhxciNt1wDAf4AfFsDMQ8/hG5Fg64v7jtSDi21sW\n8fKEm/Gr/ZEGP6oDSVJKFuX0yffk2LSAQAhzgpCkL/MDyTH8G+SJjAio2Xz/\nvBpBt3VjvQY7KUxDv+iOCF/ncVLtpqP0PRABOpDiBC32pYDw2lAd2/mbEq0r\nftc3jLf630dSet9hsKSUU6aGTQ05Fp6Dbv++thuk4GtGWByJ5GQiZktAlZSk\n7V/iE+KH43ehtqIfQ9LJjHeh5e0co5ofN+Ry7Oid6N4rW4YbYym4l1IBh/nk\nL9PFcftcJsSU6/PMbu9PvxCICxfRtxo32zkPUoB9Y7Mh8ckBikSmdQRijFYr\nGmSZCkurcm5UYCrN6Db5AkWclS27kabRLDMNr8SL3qjg0W+z04p3jLu1PH8Q\nUXVkwrvGtqUD3WPAGkf01gmOD+fvyAQwUrxmMuUIlwds1K8KQm8MNkCPrUd1\nsAcqMoUN0ZuAfr1L/YzVzJH7Fr2a5HZdglUfjsfE7UwQB5QcstC2qGsIP4dr\nU6lGI8OGhGygI5PPQN+MhzFvympatHmX4UmIUivk1GoZifgDCkAZQ2Dr2/8P\nczkmoDhMobQei1ir9uplYpGN6YtF0JuVtoKccUb+E2TFezMqAAzkh301TSFa\n9tlI\r\n=4LHs\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n#### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.**\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n**Note: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.**\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n\n**Note: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommended to\n always include it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color)` | Sets the container fill color to the given color for an enabled button.\n`disabled-container-fill-color($color)` | Sets the container fill color to the given color for a disabled button.\n`icon-color($color)` | Sets the icon color to the given color for an enabled button.\n`disabled-icon-color($color)` | Sets the icon color to the given color for a disabled button.\n`ink-color($color)` | Sets the ink color to the given color for an enabled button, and sets the icon color to the given color unless `icon-color` is also used.\n`disabled-ink-color($color)` | Sets the ink color to the given color for a disabled button, and sets the icon color to the given color unless `icon-color` is also used.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color)` | Sets the outline color to the given color for an enabled button.\n`disabled-outline-color($color)` | Sets the outline color to the given color for a disabled button.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web button component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"@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/density":"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/button_8.0.0-canary.150f427a0.0_1597411817714_0.18305518116386943","host":"s3://npm-registry-packages"}},"8.0.0-canary.bcc58290a.0":{"name":"@material/button","version":"8.0.0-canary.bcc58290a.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"96b0f4caff4d080e9c0af7f010b493d85b52d465","tarball":"https://registry.npmjs.org/@material/button/-/button-8.0.0-canary.bcc58290a.0.tgz","fileCount":26,"integrity":"sha512-vtR1fx2mjiDl3E34zw4BQdJScHYf/WkzPmKoaZRBHppUkgZ6G47EnGUkkqPv+p9v6LRLvDnHUuBEz0tLyWJKLA==","signatures":[{"sig":"MEUCIFqfkHuiagKmVpmQaOR50SYfAMqBzMiJ32t4iRZoCUwbAiEAoTXFxzpaJB9KoGy6vATLMZOmVu98YoD6aZ8owYjEBCU=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":393426,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfNxzPCRA9TVsSAnZWagAAGI8QAJCy4uy6ZEToECYSa/4L\nWbcR1+/SQWGqWpRoV/V+2hfeat5s4ARfCZ+oLJWk5+qj+J7X7N/tzW+5N2YS\nXh0cM1nos+iRWmpfLv3E0Vm+abUBbM03QSGfGB+BEEh3kMKciKQW3sZNs0Hb\nlmrKctX5Ay9tqSv5EPJCL+cYmpkUHvx8qm1/8HH/L3HiEWZ4OcKbM6d0Wdop\nb5RNS43Ew8wQ8UG9Zm/4Wu+UdqV2hmRNhsffgVZza0X7q+HX9GWU5T9bPcO7\naPzT6VbkY9Q7ok2xP1czqB5wrhTUAMlgZgpdnDCbyyfVoHtrIxe5eG/b6/e7\n4667s60kglwySIvGmdURLj1z1pUwullyRe1inA927yktk2HHYxEUmhD5FoTL\npRicq+fJlNpwkbfS69+zsnQsRm87Rq61Twq4OtMnOkKYijz6DvboVBPHKjBp\no1oZE0xJn4nfWwQ59oK/9kAr/65aUQlpwFkzYUhx15NAkIavxGVUb2Kaj5jJ\nsU9pfdLTxsgcm0decmjcg+lg9/+ZjEs1yPniFHdd5hhygBCm5DvMdNP+0t+/\n9LQBs2isVqe1AFp/IWOtj5JkY1vM94tdIu9fpAx26baMH5/++ImQNdSh1PKW\nOZgSFJa/BNsMIJE3RSfaTgHNP83RQNGuLrnTHxMwEPVWSzJlJ++2povH6eQI\nDkG5\r\n=JHeH\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n#### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.**\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n**Note: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.**\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n\n**Note: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommended to\n always include it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color)` | Sets the container fill color to the given color for an enabled button.\n`disabled-container-fill-color($color)` | Sets the container fill color to the given color for a disabled button.\n`icon-color($color)` | Sets the icon color to the given color for an enabled button.\n`disabled-icon-color($color)` | Sets the icon color to the given color for a disabled button.\n`ink-color($color)` | Sets the ink color to the given color for an enabled button, and sets the icon color to the given color unless `icon-color` is also used.\n`disabled-ink-color($color)` | Sets the ink color to the given color for a disabled button, and sets the icon color to the given color unless `icon-color` is also used.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color)` | Sets the outline color to the given color for an enabled button.\n`disabled-outline-color($color)` | Sets the outline color to the given color for a disabled button.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web button component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"@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/density":"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/button_8.0.0-canary.bcc58290a.0_1597447374775_0.14232113861944495","host":"s3://npm-registry-packages"}},"8.0.0-canary.4f55400bb.0":{"name":"@material/button","version":"8.0.0-canary.4f55400bb.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"46e328b2d32b0f43f4c59a12a446470671cc55ab","tarball":"https://registry.npmjs.org/@material/button/-/button-8.0.0-canary.4f55400bb.0.tgz","fileCount":26,"integrity":"sha512-EUFEGXPsgS7imaUxlxssK8mcJOMv6wQ4bFtLO2rol68B8bo+XqgbgJ/fe5D8i+0k6c6ho2fLQODnhEgQex5bzw==","signatures":[{"sig":"MEQCICbGx4tHIESZa61CzHx3jTdCga3sLTTo9m6a+1h9FhJhAiBwjOp+zVAhk0ExC3gWegzmY84eelcHpvacuTySYJv3Aw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":393610,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfOrKcCRA9TVsSAnZWagAAH4MP/24NbRHkRialUqCQmKlE\nIVfR9I0JM4eKF8oPA5lHbp6NfCpLTI/mOp2aHJoAGtAPRoCxd7smHZxFmrF3\nhN7hScEcLm+tsV2zferK8K12tz+SDGtsOaV7pxoYUS6UFNS0MRz4Ih+QpxEI\ngQeaNDzmjmbOGbBrec/8Fl+9mwSNhWiv12HKv7H5c89AOsmFNMlAjPz0Mcs1\nFmuWAQm/QW4E+Ckq8fDqnjhJ5b1TTYrZBaRzFIdkULPow/psjuSMReK0EW4c\nfaw4uER/og57+J5/pvm4cmeRL5vYJI0uTXuos+W8/GcA0+fYXKOIJW6adjW0\nYaM/Bnaaa8zabPqsUr8ZswOL5bqEDiB/NsS3ZLTXOjuq4kOh5ZYvHRqWwn5W\n2kR29VNatFY1f5Z6+6ge95uCDBJAPp3n2dblB2uSwiSsiVtf/TP+KCC6Ib1L\nmk5HvBsMqDXBLEBBQ5avlzc8D8grJCNgJKqC8LaFFqXrbbE+08PTXyAODmVX\njc8vj4v0JnN12aUUYvKNnjgvqj5qBL48JJfgJlWveD2P1POMh+iH3Z6XvPlR\nHnCEq3SYz8B4U0+PH76eXCXUQ+Ug1U/uDQ39mb7aFgWysYEln21Xe/RmhL3j\n1XVqRCnF1X4PMLkrn1ALUffJb7ep71Wv8OwOuoq7xyVT/TF5W+DTZfPXmWuC\nrCF/\r\n=jtGM\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n#### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.**\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n**Note: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.**\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n\n**Note: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommended to\n always include it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color)` | Sets the container fill color to the given color for an enabled button.\n`disabled-container-fill-color($color)` | Sets the container fill color to the given color for a disabled button.\n`icon-color($color)` | Sets the icon color to the given color for an enabled button.\n`disabled-icon-color($color)` | Sets the icon color to the given color for a disabled button.\n`ink-color($color)` | Sets the ink color to the given color for an enabled button, and sets the icon color to the given color unless `icon-color` is also used.\n`disabled-ink-color($color)` | Sets the ink color to the given color for a disabled button, and sets the icon color to the given color unless `icon-color` is also used.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color)` | Sets the outline color to the given color for an enabled button.\n`disabled-outline-color($color)` | Sets the outline color to the given color for a disabled button.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web button component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"@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/density":"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/button_8.0.0-canary.4f55400bb.0_1597682332268_0.982761399571568","host":"s3://npm-registry-packages"}},"8.0.0-canary.000d64815.0":{"name":"@material/button","version":"8.0.0-canary.000d64815.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"31a32c76af1782c123a18788ab9994336b75c225","tarball":"https://registry.npmjs.org/@material/button/-/button-8.0.0-canary.000d64815.0.tgz","fileCount":26,"integrity":"sha512-IsXnr5OxriSmjLSxe4FydkhvnwDUFDNbV+Ec+VQBMzypJQgsINzbeaRFeU7W2RcuqLaUZ6uvn29JUQyUVdVG2Q==","signatures":[{"sig":"MEYCIQD3f3dLSNUVOshtm+iMiMEnREufiw81upSAaQi7tKY+hQIhAJtpMTjwysaXGbS9jhSnQPhICRngFOEk1G0k9pOEbKwJ","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":393610,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfOriwCRA9TVsSAnZWagAAQDQP/0kEU0AgXvctc6e62F5C\neu5hm+9KsukQXotdt7PkMxUYXDAiIbCxIeCW638awfAeoSX9ra2LpVw6FTHW\ntN08pQPyXPzKlTeMmmFFRVm89VPbj0qX3ZpKMecO14eZoEoc7jwCMEhkGpTk\ne6PlH3SompKz/vFr4+ISDUgGP1ZJVK0BE1omnFPYFlgnfmSxBevtQqkcDZfT\nJGQR913CqJttymUDNKXkd4/qhxF5TXnaKGOT3SoqlGfB8sFmbVnbzPs7UXK0\nH9f/HWrV+GcgIbkLcUxWFrH7A73F2oPJL6y6b2EyWiHVLZ2wGuMBpYm8CbsI\ns+89cTsK3W1hh/RUBsiqqkX2M35BOBPZBMjTRqvI4H5Giy0jGPoLVmyU+F9o\nOsdX/BSIlr+CMocky4QNKlKo+bNJ5kUZMbcnuCBs0b7XFq4sFD/Oua1wklwf\nDyOglqiArPX+6BGlU6Xkby1uq8qRdfOKv56yZRSqLOcaMMBVq/YuYPygTC9/\nw5INSkF6q+zirxEhfDBfXG9fcUZSjrC/coS1pfnMztB6JzAxjvfvwM0vbpzC\nMbK6Ds0NetSUGWZREJscmbuBEzYSxPo5g24voTSUkNN1rW/lwv+b3EPjfqo4\nPFwF3VaT+2lwbbJw1FlR8hom98nhAQQ+yVxXQAPfPWeQyCVUkUeQZnLNZwT0\n9dzJ\r\n=88Hw\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n#### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.**\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n**Note: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.**\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n\n**Note: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommended to\n always include it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color)` | Sets the container fill color to the given color for an enabled button.\n`disabled-container-fill-color($color)` | Sets the container fill color to the given color for a disabled button.\n`icon-color($color)` | Sets the icon color to the given color for an enabled button.\n`disabled-icon-color($color)` | Sets the icon color to the given color for a disabled button.\n`ink-color($color)` | Sets the ink color to the given color for an enabled button, and sets the icon color to the given color unless `icon-color` is also used.\n`disabled-ink-color($color)` | Sets the ink color to the given color for a disabled button, and sets the icon color to the given color unless `icon-color` is also used.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color)` | Sets the outline color to the given color for an enabled button.\n`disabled-outline-color($color)` | Sets the outline color to the given color for a disabled button.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web button component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"@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/density":"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/button_8.0.0-canary.000d64815.0_1597683885171_0.8049321488077299","host":"s3://npm-registry-packages"}},"8.0.0-canary.defa599a8.0":{"name":"@material/button","version":"8.0.0-canary.defa599a8.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"89d2dd2cb85c7fcc4e9293557cf4ff06a2d227aa","tarball":"https://registry.npmjs.org/@material/button/-/button-8.0.0-canary.defa599a8.0.tgz","fileCount":26,"integrity":"sha512-j6sdfcamS8hHOEKtiQuxrK8+iuSPyXqqrlt3Iu3QFjXPENvc/OcEYHqhBkTgaBBFXizFQsFY7nD3RYiXNsS8IA==","signatures":[{"sig":"MEQCIB2P9IqkPOfqTK/TIPyT0pdNsmSVtfgticpfniu1RtTQAiB/yqIGzuKj4t9PF9XKB9ceU5PcBDUC6riAh026a1MdRQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":393610,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfOulQCRA9TVsSAnZWagAAUCYP+gLpcn7yMjsRFL66Lt8/\nxz5JWWT1JIPe86n2g07iNovBGUiS8hJmG+fOb15M9bJyBsIcRm/UKCghkxih\nKxxK4rV6COhvpE9hPOcKYKBqOboCkUEzX9R5QBj77v6SeSUsbhj5Xa+GvcM7\nYKQZLcuj6iatSsxVOaiZ9ySivWd0Oha1Cq7GC7MkmJ0RXAxmlF8LdDnT7d39\nUNGfu0/+wu7gbZlZCWEstgfCICvur+4GDN/pnoISXMHXmJurCj2i08+Jofg0\nzLvBgqSXgxx6JpWZYhkKiW/JVCxuINFoXb9Wg3aj+Pb+AqMC7Y8a1+h5DENM\n466tpjp0EEXExIw6CIQWMxGum15AmGOaPadc9sTcghE4W2obljhxk92ZgjRC\nGsLzy00B2KW8yNNANZ+zTLMEWWb+ZYmsGfw1Fs0f2efONH7FweX8ZBlZg1qi\njwThL0YDuzjGuXJzN87vWJ2C+C28cNaiLWz28/Wu9rGD2Rk9+v3mm7WBtYFM\nSncRQnmdQrxkqo+JCnj7cdCjSRY74AaweFl1DfatKBxAmHtlzDhqWZuUYWJt\ndFqAvS/RgCQX9NKtgLK6XRGYs69gxVLoW5zfmgGcXzTTAlr7M3UeLAsR62MP\nm+PoBJy79PF4L0fSK4Qh+Qr72/zqfGmdzm7JX9nrJgxkYgt/VkL4M5M2leQF\nA+JC\r\n=jMqW\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n#### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.**\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n**Note: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.**\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n\n**Note: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommended to\n always include it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color)` | Sets the container fill color to the given color for an enabled button.\n`disabled-container-fill-color($color)` | Sets the container fill color to the given color for a disabled button.\n`icon-color($color)` | Sets the icon color to the given color for an enabled button.\n`disabled-icon-color($color)` | Sets the icon color to the given color for a disabled button.\n`ink-color($color)` | Sets the ink color to the given color for an enabled button, and sets the icon color to the given color unless `icon-color` is also used.\n`disabled-ink-color($color)` | Sets the ink color to the given color for a disabled button, and sets the icon color to the given color unless `icon-color` is also used.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color)` | Sets the outline color to the given color for an enabled button.\n`disabled-outline-color($color)` | Sets the outline color to the given color for a disabled button.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web button component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"@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/density":"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/button_8.0.0-canary.defa599a8.0_1597696336355_0.2391195699019426","host":"s3://npm-registry-packages"}},"8.0.0-canary.66b8ed7e6.0":{"name":"@material/button","version":"8.0.0-canary.66b8ed7e6.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"5df0964738b1dc2b1aea8ca02f58faa1a0608d4f","tarball":"https://registry.npmjs.org/@material/button/-/button-8.0.0-canary.66b8ed7e6.0.tgz","fileCount":26,"integrity":"sha512-eDFGHj0LyEcCfOYx3EMXB3xI4x0orMPVWEji2NprS2XS2PhGQRCT3Wz0LAJKSATaMk6/SHmjICST1GPyHympBA==","signatures":[{"sig":"MEUCID5CDkbVMXofseyGT/6eSUE+DGeiVBOwAmPUsrl0CvZiAiEApC0Sm1+ph+QaoCGW+C6MI5K5TnQEuo6l2Vosdte1Sjk=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":393610,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfPB/dCRA9TVsSAnZWagAAuPEP/A2h8iKllfBRdSWp9HgU\noD8HclilSzgGZoDsUIU3iNrbzgxLCfpLzyUgz0gySJExvX2mSkpFx2TX/Z8p\nYMtP5R7WODbC2XsYUm4X4B/WaMfOw7lnD925vAhFbmh4ziZrR12R10ubk+Mb\nF3sAvKw2KwOkE3TA7Zfw7JCbnIwEgwIEmuZTlQ7ku7UN005YFMMeunMLXs8c\nt+zvfxXotxTtYXaAUrGBnMJEDFCpBEdm8c8ejmDESlWODKVg5bW+09stkqM/\nw37u28gkskbdTUxhdKa0Y5F8owQGMcsHNuF3aKIDrtWDwGBB2VEwA3uCCXI0\n6y4CTU7jJMI4y4Q/BSEp4uI/NUEVXvlO28r6/MhDW1yGswkLnyyXyTg/XgzT\nEwLVdUCuAXzeYaWLn9cq731edWXRMaIP4uIw0q0eNiuH/k0cF+MRTdJFBWcv\nlQsOZzpdNsBBw+jU/VmFk90eKuFmvKbv7vSQf2QcCTuJpQByXkBItBpTdgXd\nlnWlD0TdaTuBuUiPACNauHMrLysnaFQ7sw6wlVdAIXvGPase1G+3cOMjQeg4\nI3rgDwnVw7cyBNJcrcKsINXMGMJd+nAGgbvzBGxlG1zO6NwKioZaJ+ctopkH\nXvQ3bEtqscdUWktASPLB95w13jM1UAuZB35mjhbB9BYwnf5EMtrh9c+Stp3Z\nkoXD\r\n=zZy1\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n#### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.**\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n**Note: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.**\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n\n**Note: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommended to\n always include it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color)` | Sets the container fill color to the given color for an enabled button.\n`disabled-container-fill-color($color)` | Sets the container fill color to the given color for a disabled button.\n`icon-color($color)` | Sets the icon color to the given color for an enabled button.\n`disabled-icon-color($color)` | Sets the icon color to the given color for a disabled button.\n`ink-color($color)` | Sets the ink color to the given color for an enabled button, and sets the icon color to the given color unless `icon-color` is also used.\n`disabled-ink-color($color)` | Sets the ink color to the given color for a disabled button, and sets the icon color to the given color unless `icon-color` is also used.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color)` | Sets the outline color to the given color for an enabled button.\n`disabled-outline-color($color)` | Sets the outline color to the given color for a disabled button.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web button component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"@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/density":"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/button_8.0.0-canary.66b8ed7e6.0_1597775837058_0.31614745707258574","host":"s3://npm-registry-packages"}},"8.0.0-canary.e2b1033df.0":{"name":"@material/button","version":"8.0.0-canary.e2b1033df.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"fed2efd05f03aff5f1b4ae3351a8597e87b6d0d6","tarball":"https://registry.npmjs.org/@material/button/-/button-8.0.0-canary.e2b1033df.0.tgz","fileCount":26,"integrity":"sha512-zzFTRjGmKCnMKO9/JHwpvehMgeQ2deOMIK7ID4jlzY5t/ckTXfz6AIPlJRFb5908dbJ/XD1+KBnou56XN1lw0w==","signatures":[{"sig":"MEYCIQCgffeFqiXQY6Gz1BNv7A2vLlmdIhaLbc78ualjLIofGgIhAMvcH7Z1NTb9GZn0ktlf2o3XzNOBLyftpFsUunK5djPM","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":393610,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfPXKSCRA9TVsSAnZWagAAbFwP/i2zZxhXsXC5R19cYp7b\nIcqMS1szo7c0NzMpkU0wEamt6w6yXMXoOqf4gXY8DX31NJ6e5lfbvyxNB3Jc\n7W9mGp9eztHo3fxuoK2cL2ffeGV08+A8VYCrWMW+xZiHyxYmFUDZ1E1FFIqH\nuyIMTgXcf7CJ/5KIl8WmcoAcaNctYR9z3O/1olNsn4UQnbuN3KCNjDaBhKYx\neexVXK+LfSawEP1moZwq1C+9ULq8WRs69R20RXthh4U0BgmLSQmeE0k+somu\naH9FwNNq6uhc0HK4w+IBhdPUta8W9R9LX9HRFADI9OmdZYj86wYMG4lciQO/\n21/NaQ+WO4Y3rtXP0mrtcowDeqPUB+F4JBAIvYZwZWsNUKfHMpywarPuEHOW\nmr4xEtI8wc3sRHUZAeuwqsAiR/xAW5TBeiNRzvUFZDUQIDakmZqZopgL5fy+\nsOSZEW7UfxOEnPrj2yBrS4F1jLH6yQBK6Y/qhSL77gczH4/8hHb7TRNTOsV4\nikcV7OF110544aRr1bM9teF/jhvT/kcG8b/IMNSgq2YjuXQkLXBjUbd7XdBs\nv7d3xR6irkwsKEBoCsWw7IvzWAfOrXpmnRbVh6WZPNvV7i3F234GVX7jvDnD\nIQnKY2RGWyTD198DwhXhI67lkg/iPQ4qzt1W0TsEy1kADVp6Bjd1cvBoUJzC\njtNy\r\n=gDog\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n#### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.**\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n**Note: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.**\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n\n**Note: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommended to\n always include it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color)` | Sets the container fill color to the given color for an enabled button.\n`disabled-container-fill-color($color)` | Sets the container fill color to the given color for a disabled button.\n`icon-color($color)` | Sets the icon color to the given color for an enabled button.\n`disabled-icon-color($color)` | Sets the icon color to the given color for a disabled button.\n`ink-color($color)` | Sets the ink color to the given color for an enabled button, and sets the icon color to the given color unless `icon-color` is also used.\n`disabled-ink-color($color)` | Sets the ink color to the given color for a disabled button, and sets the icon color to the given color unless `icon-color` is also used.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color)` | Sets the outline color to the given color for an enabled button.\n`disabled-outline-color($color)` | Sets the outline color to the given color for a disabled button.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web button component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"@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/density":"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/button_8.0.0-canary.e2b1033df.0_1597862545840_0.940392560982354","host":"s3://npm-registry-packages"}},"8.0.0-canary.2e8c3dd2e.0":{"name":"@material/button","version":"8.0.0-canary.2e8c3dd2e.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"2170ccdcd6c127ddf96f70c82cc2fdfb83420bea","tarball":"https://registry.npmjs.org/@material/button/-/button-8.0.0-canary.2e8c3dd2e.0.tgz","fileCount":26,"integrity":"sha512-FymEZZulegjlKDYz8O2zzC6k5TeMhRmXxLP3pCMi0A+YCbboaJHVheXN5rO+aF+qf3kiGYVWTYYZrd6wCkQGjA==","signatures":[{"sig":"MEYCIQDvqhl7MvS3Cy82szMjs2czdgpTJ9+yzym4sbLC9Nk2KQIhAPRAe6AAC/2DU8NNAa1hGXQxMDAm/y3M2QFXxfltLBwA","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":393610,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfPXxmCRA9TVsSAnZWagAAnOUP/0QpnNKc6CLV3GjfxQtL\nj1JuAhscJV8elROSWsRKMAp63tuHBsHcDrBbyzDNGTfnfgQP8uddHaDUmVMT\nGax60S9m4Qlckz33IE1wolXfs1sGyPuuGgAhKHp/lmj8rdsiD8NdBPXNA622\n0Wwm7D1U/NCQxGSSYeIWPCHSxYr1GZVrYcd6PJPp7bBJJ+cLw3xgG625UE2L\nMDCigBGuW/54fVCZ1s0kOZTfV4h2BmxZcJ4ZwVQUvAJxMXbtADQu3uY9+urF\ntr35DPkdVIx+T6vb3MY58/YcIJ1ugycMVg2Dh/rz1ofMSt+2dBQPb5BJo8ut\nYo0u424lFUG3e7I0O2ONMUS97KEO2/xzez08Espt6CoNi8oRR3kXC+uzhFUt\nmPKCmcO8b83lYqZflVUteL+OeVtD97ndRHZt/DplnPGfPaMykhTUu3wBgFFI\nXMJh+iHwPVEA7FkXO0yiAO8eunuqLqFhDXBPFJK7+4qBIC67KlMoS56OW31F\nJ9MYvGMwBHLWAnbKek/yfcrP8AlU5oqQ80lzd0qdHX8ACqIH9Z88Ozbe+R6c\nxvgBiPlYgBvLWCK2/Lmj01DGe8SWpNSZRbit6VZolwt6RoMzOEdvDHMiDLHi\nyyi7Sz4Gp4QfasOU0EcoYK9A29V+3zBygHzztkJtiVlsPAhw3W0Xzg+hUaE/\n5SRx\r\n=Rv0m\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n#### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.**\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n**Note: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.**\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n\n**Note: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommended to\n always include it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color)` | Sets the container fill color to the given color for an enabled button.\n`disabled-container-fill-color($color)` | Sets the container fill color to the given color for a disabled button.\n`icon-color($color)` | Sets the icon color to the given color for an enabled button.\n`disabled-icon-color($color)` | Sets the icon color to the given color for a disabled button.\n`ink-color($color)` | Sets the ink color to the given color for an enabled button, and sets the icon color to the given color unless `icon-color` is also used.\n`disabled-ink-color($color)` | Sets the ink color to the given color for a disabled button, and sets the icon color to the given color unless `icon-color` is also used.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color)` | Sets the outline color to the given color for an enabled button.\n`disabled-outline-color($color)` | Sets the outline color to the given color for a disabled button.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web button component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"@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/density":"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/button_8.0.0-canary.2e8c3dd2e.0_1597865061928_0.555330901653297","host":"s3://npm-registry-packages"}},"8.0.0-canary.b2e80a5d9.0":{"name":"@material/button","version":"8.0.0-canary.b2e80a5d9.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"bfca672dd3e451ba59459303e295e51c387c1ed3","tarball":"https://registry.npmjs.org/@material/button/-/button-8.0.0-canary.b2e80a5d9.0.tgz","fileCount":26,"integrity":"sha512-scBL5Ji3sJCdvE5uUPDB/wF/u94tgq/+LTlrUmtNpIdiR10pKYpba73Ln+cU/Mq1vOkCxl63ehz11SLNc98vNw==","signatures":[{"sig":"MEQCICpI265fOEyguM3RiNRo9FxD5vgIfGDMRGfy0u4f2iAgAiApGVDyYR5Ynt7bnnU4QeYWse3NfZFtOk+HP3qhj/aYJA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":393610,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfPaXpCRA9TVsSAnZWagAApWcP/0MXcMu8ZpDSmim94EYt\n1EKtjVyaZKhvZwpQlpBC96azSO+GV4xw9E+VDQ3nEoZxzWozNWmNimL7Gk6Q\nqjStp6jGQFssAxI1zJ5z1KEs04S49s/+LOR2eDT/84MOGenpx62me5rpJl5G\nSG3ptFgQQVL+yXK6vlWy+2kcta4BVbEQ/n4AMIl8JlKmkUFR2siqYpVLP9xq\niWeFzLeaUMJd/+DW1Vyn6yxBPjmhxM7bu1DamS7+y5ocJFUSDPO6YlO8/w0o\n0Ng56kQqx4yqseEncqu1eiuGw5+yrIfkfE78y3mIixmTbnb31MhfxUbxAgeM\nNSNuvqvM5z7MN6bXM/IxE+fpY48Dn897M5ajGnwaiI4DPfubBIAECgpgTzjN\nQWL7x3UH/gQMTLj+rGMjRBNSWYYAv+Fq/LMuEgxBZdWaKRjv16FvpXp5boNA\ntAr15SV8N/03UzlreoUaWVSl/bbwC0RobHipBBqdf/6fxfurhIHgs6TXpIRa\nu1NLY0507ztxkvI7BeX0tKqT+khLTYIgZ8yGuVJJtrx8AIYAFfmUmT83czS2\nYL6AFBaVTmuF4VH2LpQ2LGUQPmmRnwA12l4128Ko83NBozfo5ZEXISFO9l7A\nMNEXSzDcGHGQH48qj0Bm/P3HA+1FLpelbnpm3dpM728echTF8UzfgUzeDO1q\n/iJ9\r\n=7No4\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n#### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.**\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n**Note: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.**\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n\n**Note: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommended to\n always include it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color)` | Sets the container fill color to the given color for an enabled button.\n`disabled-container-fill-color($color)` | Sets the container fill color to the given color for a disabled button.\n`icon-color($color)` | Sets the icon color to the given color for an enabled button.\n`disabled-icon-color($color)` | Sets the icon color to the given color for a disabled button.\n`ink-color($color)` | Sets the ink color to the given color for an enabled button, and sets the icon color to the given color unless `icon-color` is also used.\n`disabled-ink-color($color)` | Sets the ink color to the given color for a disabled button, and sets the icon color to the given color unless `icon-color` is also used.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color)` | Sets the outline color to the given color for an enabled button.\n`disabled-outline-color($color)` | Sets the outline color to the given color for a disabled button.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web button component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"@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/density":"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/button_8.0.0-canary.b2e80a5d9.0_1597875688479_0.3379608009711659","host":"s3://npm-registry-packages"}},"8.0.0-canary.ff88df637.0":{"name":"@material/button","version":"8.0.0-canary.ff88df637.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"891aa723a02175ff7ef1e07809f5ea472ab73d60","tarball":"https://registry.npmjs.org/@material/button/-/button-8.0.0-canary.ff88df637.0.tgz","fileCount":26,"integrity":"sha512-oIKZ+r1CEUvT2sFkN57uKNRp6uY1WFJL/Yrim3/wx9GTIYRWxr9+XLTAMCLeiIXjblfYdLj4wHNrD6owne8RBQ==","signatures":[{"sig":"MEUCICWnB4tOjg2SUjGhVqnL615bYGrIoBGSDVH0iKLKGxwNAiEAki3Gr+422Ztcd8OUml9/o9A+AVXv15aCNLfl1ck5ms0=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":393610,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfPai7CRA9TVsSAnZWagAAZxYP/RWJM6PywvpOxg963x+a\nwgyk0tM0tJlyYTy8BKhm5JKLzx7YR0XtEraTG0VagzzkNRSEjf71yEplbnph\nYCrywX37AnKD32cHkGtsx3ND0Vv+3YuwDegsiaxZ0Cy7AeKEltyODTXWcLjc\nr/UlT7bOWE/rrnlWXuAhWDj0GrBvL+zoU3/kh15UHpc2takTVRT2VbLmjYCy\nGiJAzdDtDtDMoqdeR00EqC93+Zmh0JShnaENRsiRsX0TEWxxBZVHoR+4ptGP\nZq9ga4hstfeI/KGROJAK7ywNqcUNF5lXb7nhMmCGqMqKWOfgeBa6P1YXE/jr\n8gBsQGlXY/Ev+PLZlOpXVT8Na4IbQEKSY4hFUOjc7QUJnZE8qUf7tZf/xUT4\nGnjvKq4KbHODwLRb6LgPha8EBCoDhbPmmZPldsQfFJUjAFAot5cYty9a6J5L\n6hfqhHPON7oRvzR0leY08TXxwdNbYyBKo75VTjwLrjcs6h0I6smTPTvDBKKT\nPmLSE4IgOooKnPtf8yeT33LOlB9sRuGGDvU5SxBzlRu1w/UW9S5UWd3dRPbQ\nJ89hCmwxVW85n7EnQAvM/fp/w4yqDUBgL5vnBZENPdApVMePF1UkRMq7d71i\n5sSH1Rj/edwvyYhQ5dMeAn07jkd3rYskrkfr4xua/mW6/SdZ5Fc3+Y9ahgz0\noMBU\r\n=OixD\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n#### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.**\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n**Note: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.**\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n\n**Note: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommended to\n always include it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color)` | Sets the container fill color to the given color for an enabled button.\n`disabled-container-fill-color($color)` | Sets the container fill color to the given color for a disabled button.\n`icon-color($color)` | Sets the icon color to the given color for an enabled button.\n`disabled-icon-color($color)` | Sets the icon color to the given color for a disabled button.\n`ink-color($color)` | Sets the ink color to the given color for an enabled button, and sets the icon color to the given color unless `icon-color` is also used.\n`disabled-ink-color($color)` | Sets the ink color to the given color for a disabled button, and sets the icon color to the given color unless `icon-color` is also used.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color)` | Sets the outline color to the given color for an enabled button.\n`disabled-outline-color($color)` | Sets the outline color to the given color for a disabled button.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web button component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"@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/density":"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/button_8.0.0-canary.ff88df637.0_1597876410806_0.5085579973122167","host":"s3://npm-registry-packages"}},"8.0.0-canary.32fb314cd.0":{"name":"@material/button","version":"8.0.0-canary.32fb314cd.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"30c673b919431ba7f16af4720321104eef0b943f","tarball":"https://registry.npmjs.org/@material/button/-/button-8.0.0-canary.32fb314cd.0.tgz","fileCount":26,"integrity":"sha512-5hRjqsZkJECX9+v3ke0x7dyDHDUR03KTSs8WSfZOmCoNRgc7gQ+M/M+McVSj06UBwrUa43+xifFqpcN+6m+0xA==","signatures":[{"sig":"MEQCIEroSciqIPRcya+ir6qy/Ejucc/4yIfezonkZlwcJQiIAiAxcWxHrDONBQtrtkSKuJiZHxN5dYuE2I3kD4RHlQOMAA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":393610,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfPlKQCRA9TVsSAnZWagAAnBAP/R3UeT1KARoB+7Pc8VYD\nw7KBxcTiywzlNtDXWCbpzXU3QAvh9tajxTkrabn7f5Ty91dH736Mztyb20z2\nO7W/uARrhTKBUtIJ0u1SmWy09iMyGMVy8j83mYSVfKq4rJ8SuEVy6wU2n+Zi\n3Dl1A0IanylV/IM6GfHYNajPBVUX6DgAlbU2qrEim9ubDy60TTZWd30TzikI\n260tjXNNtpV35PxPVjJdLfp/DCUiOmeC0PgqDWas1ym/vSYK9jSyT6QVdpCm\nVOGZ/xpxuE7rHUWEIKRLtPZHVoPCYCcybmDLCzviMjRJypuwTwxv9HIao7b+\nCefSI/7/QAi+plVB/E/91pOZPi3F/eJQzptxR/pauLL/i8Y7uYYGGTIYoUKM\nZ1Kr7mSPF/kXZJ+ajGn0iLMYvwwjGosw4tNfVfXgLy8AX3LkYE09xvy0GADV\n9wsWpvPm2rSU1NG5sSBDCB5yYzxlRG+GVbR+vXpSPXR6uQKazcwphiUo1SN4\niVAzXjVVb5dVOncuzqtWUCX2OrrF4nbGsBpH4tRTO0YjF1ipDyAtgjMIthGw\n85doIdaUvch60tYVUFPdDWgpl1DoYL1Jlc+Ft0iPa7OGqmbu2ANwVN8iP1MT\nh2tDqEoba5K6XToNO7mDOArnFv6U5ALYS6cK4pP2xOwHdfk+H+yGX8Uy/der\ngl5e\r\n=NaVS\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n#### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.**\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n**Note: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.**\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n\n**Note: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommended to\n always include it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color)` | Sets the container fill color to the given color for an enabled button.\n`disabled-container-fill-color($color)` | Sets the container fill color to the given color for a disabled button.\n`icon-color($color)` | Sets the icon color to the given color for an enabled button.\n`disabled-icon-color($color)` | Sets the icon color to the given color for a disabled button.\n`ink-color($color)` | Sets the ink color to the given color for an enabled button, and sets the icon color to the given color unless `icon-color` is also used.\n`disabled-ink-color($color)` | Sets the ink color to the given color for a disabled button, and sets the icon color to the given color unless `icon-color` is also used.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color)` | Sets the outline color to the given color for an enabled button.\n`disabled-outline-color($color)` | Sets the outline color to the given color for a disabled button.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web button component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"@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/density":"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/button_8.0.0-canary.32fb314cd.0_1597919887467_0.6321375015378394","host":"s3://npm-registry-packages"}},"8.0.0-canary.546277d32.0":{"name":"@material/button","version":"8.0.0-canary.546277d32.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"ae867ed2a743dc32046e83a9fe4e5c491917aa3c","tarball":"https://registry.npmjs.org/@material/button/-/button-8.0.0-canary.546277d32.0.tgz","fileCount":26,"integrity":"sha512-nu6bSkdUwwVLW18U3mT6Otyo2xrb/NMzfibuxfptRFbhVFu9IYglPnmfR3afAzyYYt+Xe39TpT/jvoXqitjY8w==","signatures":[{"sig":"MEQCIBEIDcUMXuHDXPzq3WnBvFL4NXtlfaIsIOIcxXj+a4cPAiBrChxfw8FaJOLS61YfOPA3CGaiFOWB5Qwf6iuE/n/ACg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":393610,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfPqhECRA9TVsSAnZWagAAdzUP/iHKn1NWVozV7yM+NeGC\nnmeCUK4arNBjhe1os1fogjugpwzSNL3EZBrTC5TNg5jAgYc/Sf6g5PaDA3Oj\nwfVwEa5y9NGZ0GyrwkUoU8sMOVe7h74yC3gb9aqy+yOgplllJqSYtos+zd4h\nw9nyngfJ4owcT/LXTBNBdc5GM/SPYISHud03FxBkTvUnDEEvVphhvLqFG/ht\nxFOh0naJHD3UPhAUcCvDfNXZuL+yMEPK74/aiR2SOv7YVknTyDg409PRnUob\n3KujkPGiGbWaul6sGpjXpsf4+GBQytKuLa0/G+3hqj4hTJkLVpaywO671yFb\n4uomKSYOVSilzX3DX9WYSkLuR7VnUBdp6G0o4VAXiVyYRfJpXqUrwyauUCnS\nI0lYHAmzl2sDxJR5H1xGYx8pIFSHP/+hNAmMliiILC1k0i+DYAqQtqbapny5\nJ3d5jw3WkiU+wZ9NpZQSjUez1m/VM//Wd/eQJz1WP+WmPMw7CRQTCO/zx0n1\nmXc/ZhfkUYo7tWktvcNjJPKFD6wAJx3jXP1he+PePCh5m7H4Q2jA56n9NYIX\nxn2XpM/aWKvFJKuH8wBuQtQ6v2jaUeBSGI931z5KsqSworxNXIdIyPMHeMwa\n8dUq4dS8ZOh1Wc7IHNbVDbkG4EykSMFL2wMV3/NeAUUr7ApTlESzwo0OUJle\ntqkV\r\n=r654\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n#### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.**\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n**Note: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.**\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n\n**Note: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommended to\n always include it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color)` | Sets the container fill color to the given color for an enabled button.\n`disabled-container-fill-color($color)` | Sets the container fill color to the given color for a disabled button.\n`icon-color($color)` | Sets the icon color to the given color for an enabled button.\n`disabled-icon-color($color)` | Sets the icon color to the given color for a disabled button.\n`ink-color($color)` | Sets the ink color to the given color for an enabled button, and sets the icon color to the given color unless `icon-color` is also used.\n`disabled-ink-color($color)` | Sets the ink color to the given color for a disabled button, and sets the icon color to the given color unless `icon-color` is also used.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color)` | Sets the outline color to the given color for an enabled button.\n`disabled-outline-color($color)` | Sets the outline color to the given color for a disabled button.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web button component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"@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/density":"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/button_8.0.0-canary.546277d32.0_1597941827918_0.2654281218773602","host":"s3://npm-registry-packages"}},"8.0.0-canary.da72839f4.0":{"name":"@material/button","version":"8.0.0-canary.da72839f4.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"3781ace7b579a9df557a6e5ffecb42220e9458e2","tarball":"https://registry.npmjs.org/@material/button/-/button-8.0.0-canary.da72839f4.0.tgz","fileCount":26,"integrity":"sha512-m2eW4SDdDlQD+8cKd1lcnd46cLXXW0MuExcCIAx2zi9N7fLWlA12vaRIy3O/IRhQ0JSojaZtyzusbsw5IiX9lA==","signatures":[{"sig":"MEUCIQDI8QqyXhArzGmCtswfVlqjeRq63lhxaT0t6I4Kj4BXVwIgddaZ744zwiz2go4pbrZLFfzXUtJTcMV0g8P+vbdLz1A=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":393610,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfPro4CRA9TVsSAnZWagAANe8P/1eZR7Xx5D3ct7PV8h93\ng0VUSZt9PUCeGbDDAPquvFgMqSLrvPad4qHKwwC0SurHi5QZLUrah1qBfJRZ\nVGO1WystFbwn4dxofJCBK209lqZBZ0LY1RJPoXcRpfPbYh8AhsGA4oUMqSuX\nSom2lpKQZiW0Tt4NOY8GE+KRChcPPkGG5dE4Ha/+mhig02ZDnSA0O53jihdA\n+lmpbjYnOFsMvSOL1P9KR3SAm8+6/oFe1LkUivU6KN89fO7VT+3XoFspFGOw\npFYop6beCUlQof/1HiJ3NWbZyWsOxcV15TLldHqXCTqlztq9LN2OvjJRM+wf\nykP8Egm8LFOrBcht/qFGPzR/qJjr6iD+PHRsb9xUHK1Mih+4eLfvw1y63Bk3\njce49Nlhkl+cIqOcZxiAqLtPp9Din1jO2Sp6bE8F4ow8S0DHfXn5gzBwVvmm\nNamDeJSvhUqMb5sedpy/P9Kp9a8moW3GzgLDwKOTrm97dptFlOC4OheMpFgg\nxLwKbE8rfwxQhiWENKJ68A/Vzs+74oWcdEL4K1e/5e8TmR8srsU3Ld8mVx8d\nLLiXAGM3YcdqOeLXRIGbvcVSec/n/CWkxlWEWRLKBeEcX4WNQOPn0vKN9Jep\nhSqbOcQOxQFu8CT3vvL2/+eb9cWvvtQFKXbe0iDvfHDLtuNJLISLcG/OcWwq\nuJGh\r\n=Ss0x\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n#### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.**\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n**Note: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.**\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n\n**Note: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommended to\n always include it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color)` | Sets the container fill color to the given color for an enabled button.\n`disabled-container-fill-color($color)` | Sets the container fill color to the given color for a disabled button.\n`icon-color($color)` | Sets the icon color to the given color for an enabled button.\n`disabled-icon-color($color)` | Sets the icon color to the given color for a disabled button.\n`ink-color($color)` | Sets the ink color to the given color for an enabled button, and sets the icon color to the given color unless `icon-color` is also used.\n`disabled-ink-color($color)` | Sets the ink color to the given color for a disabled button, and sets the icon color to the given color unless `icon-color` is also used.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color)` | Sets the outline color to the given color for an enabled button.\n`disabled-outline-color($color)` | Sets the outline color to the given color for a disabled button.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web button component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"@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/density":"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/button_8.0.0-canary.da72839f4.0_1597946424398_0.6747488928466587","host":"s3://npm-registry-packages"}},"8.0.0-canary.346069ccb.0":{"name":"@material/button","version":"8.0.0-canary.346069ccb.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"140fc7c8950f010355f44c368e77040891b24bde","tarball":"https://registry.npmjs.org/@material/button/-/button-8.0.0-canary.346069ccb.0.tgz","fileCount":26,"integrity":"sha512-t8rb9pLOLF8ffs9muV4QUZ5T4aFSt2VpU2fVTlQIhbT0y6yvNd7pNzvkp0ebi8ngapc8PEvVcCHBP4sDXSk54Q==","signatures":[{"sig":"MEUCIQCIJ8CgfzzIA9Z1+fQYNZGEY/IC364gYpoEq+mKFv3bvAIgRtRu8Z//9/Pmsp9wILk6w0JlzssAWOqYdhR6iEQOtig=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":393610,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfPr6QCRA9TVsSAnZWagAA3aQP/ia7rdIs3OvZbUkgHVF0\nxhpAtpURp7sAUkMDk+KQPcgL/XTQ11xn8X35OoCs8dni3VGhbN8KKMZTkg6A\nzRrUXQOS5gLvyHqA6JAOVEX/wVJKWQTexHkjM1KgdP3AR7OCk36whI/qjMnA\nToamnLsaj8oPy/BBfLDBDX6jvJfCKU+Flm4jFF+UF+BAr1OquGusCNHLK0MS\nUUViIEb8Bq+rIthux6kE2+LaF0h0s0wxOlPaM0AdtOFKzcbURBJhghYprKVz\nsgrGs/MRvvu7kbrRo0PanVmM8E/Y+Vlmziw7UhsgA2AjXKRXxwbuCF1LbRfO\nEN+KD2CqiNijuxaw0O+gUmmXXm+W5j4+E2TouB+k4NrLo76dfbf8MyGyf5z7\nTurpmw6ggnGxO4qS0G/gR2DBBftU/orBCgt8IMuMncx1ACTI/SDPID6LFdrf\n04HJbulkhaLd8QZ0GQay5HXj1RyRSFuyvoo+MCRUYLJ1O9Sd0tMbxEmgAeqh\nvO4tP3/Atm8dJRX5vzoNK/frelCGlT0vqvtCSTmvrLCTBhM0nqJ8VK9j4JRR\nITfbx7sOY8hbE408bwyTihxQvMNcMtrqmseXEUymtY37DacufvD81t+hhxZ4\namSVkCXadCx0XD4cNd4PAH9pL5OfDxFPFPZxaIDkYgmmjfEInn16lwsk/62s\nui7a\r\n=+Avy\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n#### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.**\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n**Note: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.**\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n\n**Note: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommended to\n always include it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color)` | Sets the container fill color to the given color for an enabled button.\n`disabled-container-fill-color($color)` | Sets the container fill color to the given color for a disabled button.\n`icon-color($color)` | Sets the icon color to the given color for an enabled button.\n`disabled-icon-color($color)` | Sets the icon color to the given color for a disabled button.\n`ink-color($color)` | Sets the ink color to the given color for an enabled button, and sets the icon color to the given color unless `icon-color` is also used.\n`disabled-ink-color($color)` | Sets the ink color to the given color for a disabled button, and sets the icon color to the given color unless `icon-color` is also used.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color)` | Sets the outline color to the given color for an enabled button.\n`disabled-outline-color($color)` | Sets the outline color to the given color for a disabled button.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web button component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"@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/density":"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/button_8.0.0-canary.346069ccb.0_1597947535359_0.8747474695689768","host":"s3://npm-registry-packages"}},"8.0.0-canary.e27c5802f.0":{"name":"@material/button","version":"8.0.0-canary.e27c5802f.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"d14fd1eb5f147b0854df13fdb85c8dea9e2e7f10","tarball":"https://registry.npmjs.org/@material/button/-/button-8.0.0-canary.e27c5802f.0.tgz","fileCount":26,"integrity":"sha512-BCTFVIReWIqOzYa3jwzIEDY24wPEZccpoxRe1jd5YSgzDdvQKQtFHVJQD9ds1H6qffOSk7DPW81bhvzAmz5DUw==","signatures":[{"sig":"MEUCICCmZyv68WErjGRFYZWtDiisJ/j23WGziuUZ63IHxBB5AiEAvd7xuJSwFmU3LmMTPCEoEI/P5HkAf3jMVnWl/coQ22c=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":393610,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfPsvXCRA9TVsSAnZWagAALr4P/2CTggt+NEfYrn9zbPYx\n5iqcpOf0ZfubtuhGxEgsIjvVjyUwhIKmRkfJ5a7+Cs3cZdVmB4aVmU0by3+T\nVawzxdsWRdAElqz1NZQyWmmGR5LyxcXLJd7s95UvEDM/E3ANbLakYcnP1GvA\n0eU+krU7VqWzt8s8ghKHj+KJLhJJe1+4SMwd96ITv48dhAgB2c7h7LMBd9kY\nLymMOvAtrXmaUD3vDQcqsQxU0uZVVt7oRcUtQvAHi6Q7udj1snvybYiO8J55\nPdIw6jKfEKYZtvvgMTA/oRlWPzuljjWYnMPeKZaW+dd2qcPjo8RoGNtxr2uY\nYb0RoNNeQX5sCwKaSheues2fm1BUmvIY3fclDNin08eYedQR3/5Uaa5JlAAt\nvpFCmwdF6JfuP2GeJr4S+MS7f+PbRuLy5OtGnRPFter+8p6ifUHyPGCDce9j\nkf1q+yQsCgiLLGIMzDf8poyRmKXTgkdTUmbsBPjblKsU7TObLReWLwsC05Ra\nbxrH+pDSH6dsx35GflQ/67BRU6CpVgjH3mvk7adX3IZPB2Sruc6kRmroEl5D\nNYx2oqBtsugPqHgbayvY8/Uj1Tg2v1PSXfGqGaDUwxGG2K5zCGqGWf65kBRI\nYENeFZJl3gUt2D68Wlv5YFmVVxasJ3pzHvk7w0Mh2ZgxvRKaeWQBzPLhFseU\n5Qsj\r\n=cqYl\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n#### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.**\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n**Note: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.**\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n\n**Note: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommended to\n always include it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color)` | Sets the container fill color to the given color for an enabled button.\n`disabled-container-fill-color($color)` | Sets the container fill color to the given color for a disabled button.\n`icon-color($color)` | Sets the icon color to the given color for an enabled button.\n`disabled-icon-color($color)` | Sets the icon color to the given color for a disabled button.\n`ink-color($color)` | Sets the ink color to the given color for an enabled button, and sets the icon color to the given color unless `icon-color` is also used.\n`disabled-ink-color($color)` | Sets the ink color to the given color for a disabled button, and sets the icon color to the given color unless `icon-color` is also used.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color)` | Sets the outline color to the given color for an enabled button.\n`disabled-outline-color($color)` | Sets the outline color to the given color for a disabled button.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web button component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"@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/density":"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/button_8.0.0-canary.e27c5802f.0_1597950934686_0.21829212050034652","host":"s3://npm-registry-packages"}},"8.0.0-canary.f4532b9c8.0":{"name":"@material/button","version":"8.0.0-canary.f4532b9c8.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"41c5c3fb47895017d117b51d7475d867ce113c93","tarball":"https://registry.npmjs.org/@material/button/-/button-8.0.0-canary.f4532b9c8.0.tgz","fileCount":26,"integrity":"sha512-/NA498+cpaJz6vpq3jgZEwVi2of5a6ZU2/zs7+tPaubWaDX+o0eU5uesGFNIxKa09Tn2TOpTbX1u1NDZtZqNPg==","signatures":[{"sig":"MEYCIQC2xn6uLTCwYebxCRY20LxNyCL4D2zbx84kdNXlzrF/xgIhALkej9iVG6afV+KLgV4CYdzXX68iuvNhVTMqyWupvZXC","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":393610,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfPtXSCRA9TVsSAnZWagAABIAP/1QNN/Dr+pOhEEbPKPIc\nBaB9rtfrMr0gspTo10rrIL/ndxbQN6d77gEGluYFG1DYWcuPgx+lLoAa1BtN\nhfv8x7CgV1Yl6KYsaKaFeJhExaH+1g8mV2JomoOdSkRVSW3mJR0b+Qoa1KHS\ngx24baC/vepCcF9DVNO4XZq4dwJr887CrNDIaC68/JBxXNm2y8SFU0U4EgkG\nTW0et9Ef3HY2B8ACdSTMhMsWIIbnJjoxl2AMVIhgzTWe47WWQ4OIRcOFD+kC\nXrcRWT9P6lGzdLMxVmd7WMR2T2ug+v4olRPWT28LCHyXlmJa+8drrUwXx2mJ\n7FoAGNVHEunyRfh9t5ZGFbYrqoVqhVmkLJsE6fyZFCPatfDAMo8Ay5TYr/X3\npPkfLEiuHNEjc+bRGOFcI8+G6maj7o5HfYa74zJLUfKDszZTjhBzxUDnKGPi\nPIy9uAuJuluhhY9vnt1rZz4mc5M1byUf2sjjqJsuaNLsRUgu+4F/3Gl4MjgV\n6Hdv0h3KiZbl7SVOLyYwJoEdXYVubOcv/Ikj6I3OLYObgRqZKWUiJhpiZ3O5\nsruuYyEcbRVXuZHwtJx0+EnWC4ZloEdYRtYTgMHDmPycume4619uFF1ngJbg\n8m9vuxro8QJtXoMRjwI5FrG1Dbqs7CbZey8sIyEZB90wXlReCchYGC7i3B2i\nupdj\r\n=bcQz\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n#### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.**\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n**Note: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.**\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n\n**Note: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommended to\n always include it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color)` | Sets the container fill color to the given color for an enabled button.\n`disabled-container-fill-color($color)` | Sets the container fill color to the given color for a disabled button.\n`icon-color($color)` | Sets the icon color to the given color for an enabled button.\n`disabled-icon-color($color)` | Sets the icon color to the given color for a disabled button.\n`ink-color($color)` | Sets the ink color to the given color for an enabled button, and sets the icon color to the given color unless `icon-color` is also used.\n`disabled-ink-color($color)` | Sets the ink color to the given color for a disabled button, and sets the icon color to the given color unless `icon-color` is also used.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color)` | Sets the outline color to the given color for an enabled button.\n`disabled-outline-color($color)` | Sets the outline color to the given color for a disabled button.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web button component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"@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/density":"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/button_8.0.0-canary.f4532b9c8.0_1597953489801_0.6093029178275637","host":"s3://npm-registry-packages"}},"8.0.0-canary.fbf73c2a6.0":{"name":"@material/button","version":"8.0.0-canary.fbf73c2a6.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"012b891c8eae2b7e7f3a3412b7f4b28dafc6e6b4","tarball":"https://registry.npmjs.org/@material/button/-/button-8.0.0-canary.fbf73c2a6.0.tgz","fileCount":26,"integrity":"sha512-JhVrUTlz81F080yLV/CYvP0odqw8aiU0URX0gV8rdUUIbS3Ruf7jUwM/3RclwrTSxw+v9e+Ju94UfEUtFSz/Fw==","signatures":[{"sig":"MEYCIQDZ5zdtWzG/dHGEKxzOS3bIx8qRqRvq4JplWKWvx7t9PQIhAKpGRGlBLma15pSlCupv7kCKkEKMCSZAc9dAX2qCJRQH","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":395386,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfPuXwCRA9TVsSAnZWagAAvX4QAJ6V8DPicb+yk+x7yZ5f\n/8RBpMDyR3f00dX1Vmmy1snPo3Lg11j0K3vsbjPdF/CHyzOs2Hf/T21xgG0l\nPVALs21xj+M6BrBL+COSpUryR7fLGNOZVrPqd2T0/ZSBlbMjQAJcKxqPaTgQ\nPZjPjxySbiqrKNSAbO47hcUm/3U4OkyDEaDOblHvle9ESJGDouOcj+XNNdMg\neX/ASwZ2KWN1AsFymv3F+ZqBdoFrnzjOzCdHc4u5xvgEB1GMCVad10WtIngG\n2oc1bsHdAY/RZFWqfHVRwd7kDLjg1bHRtuwSbq6BhCfH+uFDouGkFONpnqrv\n4afup8DXXG8eAF7JFHFXPGMLlQRXGyTpO/5MY3WfSJO8mGYvRewocpGa2pGq\nXrtTIscQAqtqMR2DGAI8CIWDHQyyAb7UkHDmmYR+SOhq946Ln7+yLTGQsWPI\nypn1sx5sLjoenobDdXZb5tUnUpRqfq6TEeCsYHVVjCfqih+Tr9hkvBR+nkvN\nbvN9qjDJ6474N3v1JhUBAKzZKyvRM/iSlV74/nR6Omuu8X66xfDGTSmT7k6n\np+bqwSq2D/V6xHeKGjmf7pyoFruHo0W+pwqwjHVJ7BGR+Eb3A+oD2FYDtm6W\nr0qhavvp368TIDdNI0mM2wXfmzl/cGL/oMRwe5TOt7eB6yQraBi2XIAZz9BY\nnid0\r\n=lqnV\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n#### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.**\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n**Note: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.**\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n\n**Note: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommended to\n always include it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color)` | Sets the container fill color to the given color for an enabled button.\n`disabled-container-fill-color($color)` | Sets the container fill color to the given color for a disabled button.\n`icon-color($color)` | Sets the icon color to the given color for an enabled button.\n`disabled-icon-color($color)` | Sets the icon color to the given color for a disabled button.\n`ink-color($color)` | Sets the ink color to the given color for an enabled button, and sets the icon color to the given color unless `icon-color` is also used.\n`disabled-ink-color($color)` | Sets the ink color to the given color for a disabled button, and sets the icon color to the given color unless `icon-color` is also used.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color)` | Sets the outline color to the given color for an enabled button.\n`disabled-outline-color($color)` | Sets the outline color to the given color for a disabled button.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web button component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"@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/density":"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/button_8.0.0-canary.fbf73c2a6.0_1597957615783_0.4082639569063309","host":"s3://npm-registry-packages"}},"8.0.0-canary.cf800124f.0":{"name":"@material/button","version":"8.0.0-canary.cf800124f.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"19432f833efe7539bdaa4896aad0effa2bb14ec3","tarball":"https://registry.npmjs.org/@material/button/-/button-8.0.0-canary.cf800124f.0.tgz","fileCount":26,"integrity":"sha512-YjxJj88mlwC2dN3QbliAhydRQuBwTNiZ6deVN6zb7CXSboEpmT/pni+L3wYxecgAzgegh/h/OYJE2zBtD6rGHw==","signatures":[{"sig":"MEYCIQD4bmob8hWByb9lAUWcjtAYNJNKNX5uqgrTPLndN7R4TwIhAOszj5EwEzrk7Yu1WptHp3JWNbADUjhc1Y2S1vUSk9NE","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":393610,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfPvC/CRA9TVsSAnZWagAA0bYP/jzWT9pX9tdDPWVL444W\n00AohtkumChfa5i0dvVaaYbGxgR2Z834cueGSziBV920LQDuZTFnw0vyUUCO\nxdsj1jx6dFEkBqcHzTlwFY76gzXEt0gXlT/rMr4mUF/EKc9Y0E6hg3uLSFK4\naLl4G9W6GuI2GpuuPmgjk83PA9H2fhAPtbd1wnB0YR64z69EIJMTP4LcsUJw\nJtemaNjA1IjWd8zXdteFtS1iRS6fZ79ApL8tNYfiTfNr/8amzAZ51vPtD2nB\nTMsj5TWwNdHhoQ93iDtUK/K7u1++S343LKH567yXJKvh6eza0yTSvDoQEmvm\nAN8uznkOYly+6XrxMqfac8xjdCHW/TtuiDT4Hcsr0YSMxI1H8waiGzq7Ffvz\nmWc43b9eDMyu4ySdR8pCUQL4CQINmE1If7YhrXWZMywzvrW5exugr2/a6VJC\n4qMiiEphjK6RGNFsar7A/N6DRMWnzMP9p0oxfyJqlhJqCpmJ7TKjjJE2wSHh\nHsSd49C1QF0mM7sOf+ffmO9Zq7yew/jQs2hVmeMUXIPKsG2O0KihoSnkK7iH\n3I6JuNoxQv7WuUd457CqWJYrbUUQuuC/Pu9ho3jD5nLCV4jZLUtyQaxbGZ09\ngZT5Q0Kf2v5e+Ov/Ncp04ucQxaszlj5+vC0dx2H+TGkdDQ5/iaN7q6tlyFsH\n6QIJ\r\n=BWu0\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n#### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.**\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n**Note: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.**\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n\n**Note: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommended to\n always include it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color)` | Sets the container fill color to the given color for an enabled button.\n`disabled-container-fill-color($color)` | Sets the container fill color to the given color for a disabled button.\n`icon-color($color)` | Sets the icon color to the given color for an enabled button.\n`disabled-icon-color($color)` | Sets the icon color to the given color for a disabled button.\n`ink-color($color)` | Sets the ink color to the given color for an enabled button, and sets the icon color to the given color unless `icon-color` is also used.\n`disabled-ink-color($color)` | Sets the ink color to the given color for a disabled button, and sets the icon color to the given color unless `icon-color` is also used.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color)` | Sets the outline color to the given color for an enabled button.\n`disabled-outline-color($color)` | Sets the outline color to the given color for a disabled button.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web button component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"@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/density":"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/button_8.0.0-canary.cf800124f.0_1597960382707_0.7201469198930417","host":"s3://npm-registry-packages"}},"8.0.0-canary.95e4eeea7.0":{"name":"@material/button","version":"8.0.0-canary.95e4eeea7.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"993342073d87ed6a3a6813630e7ba0887f59a6b7","tarball":"https://registry.npmjs.org/@material/button/-/button-8.0.0-canary.95e4eeea7.0.tgz","fileCount":26,"integrity":"sha512-bVnGnCChMIpuvgKbi3q0ongvwG0e0L61PJMCTMgpMjDReQn1Ijqqsa3tL3jjMPbn1p1WAdMKxv6IuBWVExOCug==","signatures":[{"sig":"MEQCICnY1G3KOQ/KV+MK8viAxJiqTdMouG+Jt/FiEesnmc0oAiATtYVBE5tZmFt5rh2adEzUA1j7tRi45JWL/5uAHOZFGw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":393652,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfPwdNCRA9TVsSAnZWagAAv84QAI/KRhwMA4KnNvi8Jkek\naPPRWPwQsJTkF3SzwUnMe+5A6ulqa2gMPWKr35p8KgzhkT4M8pDmdsMIKEBR\nhxkP/WD+OO4L3PB+CXRlnErEc1z8j+tVPPqFecl4J9dQwODUNXjbSiujTrLE\nU1Tb2ZIKhQ8W5j8F2z82PNXnjbQ/zNjyieVbVzVGoeE82jpk2wNR3lqf2nR7\nPJgOXLoutsQ6tcQ4b1ZJBj5BZb48rfLS4lyjVd4tp7mGmVtEV7bu8U/6iz10\nsKPCNC9tq5VN2FxGhQ2Ow0W3n6fb7il9OT274DvTt2mwFgVVtuaTCujjCpfn\nkWkJSLxXGQBAAGu4VjsQOHcNNmlaz+7N0DTKDuAYBn6w49MgCqlJeXCro7L3\naAEQNcjvR/J4L2JTbO/ADhjTS+QY0ZH438QUohn/E2VNLnVlsfPF++gxZAIX\nXGNBYPXSmihYmULSvjUq5GFyTlCJ9b18bUBaci+yPmWP79T4kLq8qLwyTSfU\nHVlftNdDrRh/f2HJ8t00TOkyTr8VJoycTbpXcQEMYUoMxznvMmNEfVYohbcY\nkEBpy7KVdFBK8Ugw7+ZQFPBvCu9fB+lUgcbR108BSyL2BRpw9Lg5H+sfz7vY\nhFK+rGVRJuDZbZSQxbBGdmCAvqkGeuAX5NujRxR1JSQDa9IVQXrIuefQ+hpJ\nI+g8\r\n=aLSJ\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n#### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.**\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n**Note: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.**\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n\n**Note: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommended to\n always include it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color)` | Sets the container fill color to the given color for an enabled button.\n`disabled-container-fill-color($color)` | Sets the container fill color to the given color for a disabled button.\n`icon-color($color)` | Sets the icon color to the given color for an enabled button.\n`disabled-icon-color($color)` | Sets the icon color to the given color for a disabled button.\n`ink-color($color)` | Sets the ink color to the given color for an enabled button, and sets the icon color to the given color unless `icon-color` is also used.\n`disabled-ink-color($color)` | Sets the ink color to the given color for a disabled button, and sets the icon color to the given color unless `icon-color` is also used.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color)` | Sets the outline color to the given color for an enabled button.\n`disabled-outline-color($color)` | Sets the outline color to the given color for a disabled button.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web button component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"@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/density":"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/button_8.0.0-canary.95e4eeea7.0_1597966157122_0.10673015332220737","host":"s3://npm-registry-packages"}},"8.0.0-canary.91ab1c62a.0":{"name":"@material/button","version":"8.0.0-canary.91ab1c62a.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"c9ae0728748da58a93ce367e3fd08c2cc0b17b03","tarball":"https://registry.npmjs.org/@material/button/-/button-8.0.0-canary.91ab1c62a.0.tgz","fileCount":26,"integrity":"sha512-My90qJTOBT7cKpbvD/mMZ9Sa3VRwbo24aDFeC8Jf0Y9X74DzyM1RHbxwfjhQpEXi4doQowQwzrhV9AOeSNUZKA==","signatures":[{"sig":"MEUCIFzZZHP9lLotT+4iLO7hwevdK4zJ4L3RUgVDqx2X1I/KAiEA8csMwns+ll2PKnsxIvuIZNeWnNmhBInZm40sWZkRjXk=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":393652,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfP+RMCRA9TVsSAnZWagAAChMP/1Yn+iIg3yPL3pDLJsQW\n5yy3fsaWe9L1QUgXutb/9R7jZWHc3jUNB6JHcqwMhb3nRx+oedm2imgolCjD\ndkAb3ANhzDLl1yt8UUw8nKCxQCJQ7kxqQHSQkYw6uxiPQ+8Px1em8YXu1DGH\nh/BemGhWo5m+/+C5Vhy2S3HXMM4LGKIFF/CvFlV56AkQ6EuxoeU87UqzwUPz\nX9rfVmjt2ggD8DhcUqyReWI35EVy0NWCtpYCHiphNDfGmhSdVMKF9LhWlPEO\nTfQnJHIxSxJB7eIk+CEjUfsCYJ3zQ33wmHnwkf+pvOqUEJ7Uy0SBrKzlrCTv\n3eT/24IilNlo8FIFpOIH3cQ0MmHZEY8FrMsuyaep1SkgZdx+TggaA2WOsK6b\nfcRPul49K23dAS9BpExU9sRDo8+Dsy2uqF9HfeF7dLzX8ScbK9Kwnva0jMZI\nShK0OKodTkHRYB0U+WM8ZZ1jGWbrPFjKJdAXml5ztz12ZBbNiHvTJY3iH3u8\nyRsnHbiB7BVdIoSK3Q+Ur11XX4DqYE/IBh8sUd6d5iziKRnehnE14YMUvfdR\nR9WCmSctu+zeEGs6oLhZXuJAfLLRcPuZGaSB4XnkVbkFMWy5OWz8lCHsrQ+q\nBUZ+LT6wEQwzFIwDD6w9EbSedUWNs7AOQy6aL3t+Xp3xD68tfGsKHSIAVdYx\nrHeG\r\n=yWz3\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n#### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.**\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n**Note: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.**\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n\n**Note: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommended to\n always include it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color)` | Sets the container fill color to the given color for an enabled button.\n`disabled-container-fill-color($color)` | Sets the container fill color to the given color for a disabled button.\n`icon-color($color)` | Sets the icon color to the given color for an enabled button.\n`disabled-icon-color($color)` | Sets the icon color to the given color for a disabled button.\n`ink-color($color)` | Sets the ink color to the given color for an enabled button, and sets the icon color to the given color unless `icon-color` is also used.\n`disabled-ink-color($color)` | Sets the ink color to the given color for a disabled button, and sets the icon color to the given color unless `icon-color` is also used.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color)` | Sets the outline color to the given color for an enabled button.\n`disabled-outline-color($color)` | Sets the outline color to the given color for a disabled button.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web button component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"@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/density":"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/button_8.0.0-canary.91ab1c62a.0_1598022732230_0.6859349872206504","host":"s3://npm-registry-packages"}},"8.0.0-canary.58eaa9f02.0":{"name":"@material/button","version":"8.0.0-canary.58eaa9f02.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"da18a42adafb9da58f88376269fb9ab887b521c4","tarball":"https://registry.npmjs.org/@material/button/-/button-8.0.0-canary.58eaa9f02.0.tgz","fileCount":26,"integrity":"sha512-05D05cTuAVg6z3I8en6UK0oE2TatrRJy26rCdMIjFlxOwYATsB6Ha59ztPPj9BDKMbj1lhE8GV+ispwm0f7ZOA==","signatures":[{"sig":"MEUCIHwpdj/uUKYuE+iS4oXBXgq6viqx8HDQj7YVezDDF2FHAiEA4Jy0QEI1/0sNf5nH61DkfKzdgkwoozWGTN43QlHwdCU=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":395428,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfQCfwCRA9TVsSAnZWagAAHHgP+gKDZZmiMRzXHBiK3VhY\n7jiBoz6sAdN012h9F+w5xRljX2UqGa9SNW/QZdplNDjHjlIgWiPnNz3xwYbi\n1qAUT6YLCss2H4dQfRjQU8e9tr60mL4CDSZb2dpCoYtqkki6xGjq9LIImm9f\nywe8fNsc4YIS815M+wYdrT9n+uZW+GDPWi2wnOThR/tVFmeMcz2vRz61H7sH\nV24ctuJ4O0+DN29Fa4f67QsGJrubI/mRrxlSi4YaQmyHgFLQ0GMtUfDZ9tWs\nc+gLEZjQWyp/WS3L+UDQOHCpaRqcXWiDkr7BUMuDYIqE/ZS50UReW8eDZdbv\neEqNwOklWJGsGHTr1LQKCn8YC7EldLIEkk0bS13O2Fyg/lmPJSRVaket3/a5\nAUjqjeg68IbgKAobmRfJG1fD/oGFAISupciLafMTIu06AabwN5Ie4zUDb3XB\n1+ojAMAfYTPX0xz9Xd7ciUr99GzYmnioCHqAw0s2YJdLFrID2S5xWY4DP8N4\nMRGf8JvQgHCNKDRl4H29xmtzwRbS1g1wnoFJYHOL2Qm1iNTAxQQXgW0MXCiD\nHvzSAcozc9wf4ehVGB6Qq4ulh0tkGm6fOQT52cqCHzuuAEsg40T40QsoAOdC\nwkXvK5L0/2UHnHRonKsScjioZZ1w3vi2iTUf1Tg9R4YyZzUas/tSianSy2Qr\nGIMP\r\n=dKPX\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n#### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.**\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n**Note: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.**\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n\n**Note: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommended to\n always include it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color)` | Sets the container fill color to the given color for an enabled button.\n`disabled-container-fill-color($color)` | Sets the container fill color to the given color for a disabled button.\n`icon-color($color)` | Sets the icon color to the given color for an enabled button.\n`disabled-icon-color($color)` | Sets the icon color to the given color for a disabled button.\n`ink-color($color)` | Sets the ink color to the given color for an enabled button, and sets the icon color to the given color unless `icon-color` is also used.\n`disabled-ink-color($color)` | Sets the ink color to the given color for a disabled button, and sets the icon color to the given color unless `icon-color` is also used.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color)` | Sets the outline color to the given color for an enabled button.\n`disabled-outline-color($color)` | Sets the outline color to the given color for a disabled button.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web button component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"@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/density":"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/button_8.0.0-canary.58eaa9f02.0_1598040047856_0.11798814832531335","host":"s3://npm-registry-packages"}},"8.0.0-canary.238216fc4.0":{"name":"@material/button","version":"8.0.0-canary.238216fc4.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"456ac601e40b7e38aca807674231eb58f330af67","tarball":"https://registry.npmjs.org/@material/button/-/button-8.0.0-canary.238216fc4.0.tgz","fileCount":26,"integrity":"sha512-rxj62ZMJBuPaTIQpy4pH75Q+IByUJkgMIC2lBne1yNL0JRxMEgDLG1lPhpB+5wIqwOPo4QZnldJzGhYF9GdYYg==","signatures":[{"sig":"MEUCIQDS7MnP+Mebor6ZVgzgP50gpWf/8wTis3A45KA1mAdA7wIgUJeH5v2ooQg2/ErvbQ9JV8piuwhODNa4B0YzORe03/A=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":395428,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfQ9+eCRA9TVsSAnZWagAALlcP/i7ijg5MKFbXzOxybcbB\n2LzZTWDD1P/s9Kq5kpwE+CUZAR5F/ulAuYpTZrBfghWs+M41TA2tYwxpzmor\nkaA5pHSLeZ0YaFCQ4ASJKUb7VF5SOf4705enbfwjA+SJdjw22TUNTwY54200\nfMv/wNOjSjyEg0xc60RUiOpfkwrK3QPSAAkD44VNqFriACFND7aVF+Ye2bIF\nzmNJKrDokMhXMuiWtJHVdZfbOldDrjqleE/0EozmJoeGCxR7XFmcaE4WKLBT\nPlrjTntpiRZJTeMyJBPfFHwRQDjTV2eNf1NGi3LrRp1dEuwHcGPvPo7U6Luw\nFIo+2cmK3XoNzjRx+m4YQsUX/cxDEby/B/b83OvRXq9o4jbgtM8R2uCieDQQ\nOWzND4qQVzC+4KQOTMF682kNqVPIwuEu7WHTcpxSFOCxebWhigQbiu0Vu82U\nBbkYcdk88qZjMP5LrnomoFIneBC/WZtBzuX5gTffb55z9HefkOnf+s6f1GM4\nS+XMAt1UMBGvjEtfg89IVo/aa8Mf0PThsVxUIj1U6w5LcYOL7s5UVtDtHXg7\nnzzD8wetXtry1aAomc7GLHdvNwmluzLgZrANAy+WolDHaBq80l14q2Gd9JaK\nQWvTE5OBPl+NCPuPUe8x7V/6G0WO4cdmRWRmbDIGTY4BGJZf87xhZOzOOH+J\nG9Rb\r\n=5JMs\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n#### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.**\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n**Note: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.**\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n\n**Note: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommended to\n always include it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color)` | Sets the container fill color to the given color for an enabled button.\n`disabled-container-fill-color($color)` | Sets the container fill color to the given color for a disabled button.\n`icon-color($color)` | Sets the icon color to the given color for an enabled button.\n`disabled-icon-color($color)` | Sets the icon color to the given color for a disabled button.\n`ink-color($color)` | Sets the ink color to the given color for an enabled button, and sets the icon color to the given color unless `icon-color` is also used.\n`disabled-ink-color($color)` | Sets the ink color to the given color for a disabled button, and sets the icon color to the given color unless `icon-color` is also used.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color)` | Sets the outline color to the given color for an enabled button.\n`disabled-outline-color($color)` | Sets the outline color to the given color for a disabled button.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web button component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"@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/density":"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/button_8.0.0-canary.238216fc4.0_1598283677910_0.18715896085178918","host":"s3://npm-registry-packages"}},"8.0.0-canary.a1c65593d.0":{"name":"@material/button","version":"8.0.0-canary.a1c65593d.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"154301fe004ea217849461ebfbba12f32fdf2a57","tarball":"https://registry.npmjs.org/@material/button/-/button-8.0.0-canary.a1c65593d.0.tgz","fileCount":26,"integrity":"sha512-X6wM63LLQ0yXuHLKhz/CbCPgpIRhbE44fiyFvXt/qdqGJFPIsvXSOz/8YbDhLHUUxL7I+PLP6/ssSc3Rv9mtSA==","signatures":[{"sig":"MEUCIBhHHknzg6NGpn5eggfsXdwTXfn9VcjfwQviuEuPYaiuAiEAoQ99m6gWGy4/EotIGiLJ4HZ9PokICvQn+UglZS+wZ4o=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":395428,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfRH+yCRA9TVsSAnZWagAALTkQAKDc2Yh74sGFUUtJ7Wof\nRyq7ppeE4xnBcIljaySKBZxQ/TUs9JigQgkZp2eRyjqfDpCwDzy1iwr3PvNn\nlfcgUi3FLsYqjd6RD8zM8qodydal6j91aQohYYQS1kDXupGQ3GCiIaqLk/a2\n52pMdxXuchzUujnubNZTcJFeUS9ym0QPtsykbMzRkFRw/DkfEwm2AaZyep9c\nFmiGw5wtVjyGUqQhAIv7COSPn2dW93aUrywwpeB2auDij3ATD8Pf5nkDM6sE\n95N1fzxjAdneU3hS/ga0Sm/1q85vcOVjvo/BOe5FXgGqvG2eJYfMDLV/CO7c\nSpuByWiIuwwVmnZWcSEDMPlsJvJKF+nEazp6MENKgev3p58SG/qXR3tSqeKU\n+3LcfY5ilndW4WRjD0OpvGKlRpOjdfX1V+mnQeBVl2t6IJFNGLNZq1aoeI8c\n95toACBF050ltZPqmhIVyphCD0F+lfpy8bceqN5PVcIZnD5dDyQZT54f/Ky1\n3qa1SEsMWmUdKgpb1drZmrwVElZtcqlZJcH7I7qz+c91e/ahv9N25nmy9ztL\n8i1BqXn9KMD+7Iowgdu6Ni7H3agZ3PMo9U8DG1MatIS5ASxvH8CFZL2AhO/W\nn2bhT7qcANg22FYSkxucf+jz3ghY4WeO9IX4Rkf+tdrEUQ9VFSZ33TolDTdK\nMsOV\r\n=qvJ/\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n#### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.**\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n**Note: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.**\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n\n**Note: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommended to\n always include it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color)` | Sets the container fill color to the given color for an enabled button.\n`disabled-container-fill-color($color)` | Sets the container fill color to the given color for a disabled button.\n`icon-color($color)` | Sets the icon color to the given color for an enabled button.\n`disabled-icon-color($color)` | Sets the icon color to the given color for a disabled button.\n`ink-color($color)` | Sets the ink color to the given color for an enabled button, and sets the icon color to the given color unless `icon-color` is also used.\n`disabled-ink-color($color)` | Sets the ink color to the given color for a disabled button, and sets the icon color to the given color unless `icon-color` is also used.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color)` | Sets the outline color to the given color for an enabled button.\n`disabled-outline-color($color)` | Sets the outline color to the given color for a disabled button.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web button component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"@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/density":"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/button_8.0.0-canary.a1c65593d.0_1598324657544_0.11316152657160217","host":"s3://npm-registry-packages"}},"8.0.0-canary.708cc09c4.0":{"name":"@material/button","version":"8.0.0-canary.708cc09c4.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"1e2dcadccc0b70691a6cf3f78b57772e314daa6c","tarball":"https://registry.npmjs.org/@material/button/-/button-8.0.0-canary.708cc09c4.0.tgz","fileCount":26,"integrity":"sha512-CL1TcVd/DijIm1/HyJJYEWAfzGZgTPgP2APP6FJ4hIwKJamG2lBxp7f6e4j92klADsmAzCSbhT19vJwnDZ8CmA==","signatures":[{"sig":"MEYCIQDhwL3vzswDFy5Ga/LYOTn6vC6ve0l4UTH7yYuQ5n6CygIhAJN9C3b01u+KlNpTV31Zvhs0Dez+GhIlUM7+Sj3zV4JD","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":395428,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfRTTDCRA9TVsSAnZWagAAxPQQAJoLe0st5aRpv2MwWqU4\nAwBLcWVb0SlgT/JjML9gsP/H/1UuIQA6ykpV8YPdxrC5+6T0s8+GUe7GTOae\nw8/IEIucfRcx/ehp2zFl0HM4BOvnsncVXBXb5XyqF8QeMdZRVcuqG/MVJq4h\nMEh8IZ11FT98DEYpdnjjF01QBNKKC3rXyDZsxrxM1wLFPzoaC5FnH9vrRJ/P\nJhhkFWmmHgoh4NBPFUxH46Y8os3TP3cyCCJLoHvZM6PQdk0l11kYByCBnfW+\nyf/xHHAaWFnar6q03JK6sf2e+RiN8yiy2I+cp3pkU7z3DZBcb+Vdob8WEWBh\n1Lv0M0KWudo3oVqs+VxbJlAVxjWLGAkYHdNar1MExEr1141EPiCGQc71KGN6\n3EdI8UC7UQEc/1VcnHBrZyFvZci5NYUQw7q3GK4hSshjmWoyXQoLKHqCM8pb\nLcwH2r/wnyHR0I9SwDZc9dVwGgshbdOqYNeGf2+W1qPo3UO3pCHtmNqK+uEj\nmtDIwIxGbcBpgm/Nk0OdaU4FDbMxn+NV+gTLD88sk6trQOiVKiQ/PVjOPpJg\nVWGHExycREHbl9HRrz6aZbgBkPMrmIZ4KhdeCxqbFL+fqzwIXPfWI8xo1woG\nj+976KvWSdxlAE4dg7bFzTCBsCxVKtqrDanWggK/t5ZnpZHJ//vq3CNkjDta\nsI1z\r\n=D2DZ\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n#### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.**\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n**Note: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.**\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n\n**Note: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommended to\n always include it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color)` | Sets the container fill color to the given color for an enabled button.\n`disabled-container-fill-color($color)` | Sets the container fill color to the given color for a disabled button.\n`icon-color($color)` | Sets the icon color to the given color for an enabled button.\n`disabled-icon-color($color)` | Sets the icon color to the given color for a disabled button.\n`ink-color($color)` | Sets the ink color to the given color for an enabled button, and sets the icon color to the given color unless `icon-color` is also used.\n`disabled-ink-color($color)` | Sets the ink color to the given color for a disabled button, and sets the icon color to the given color unless `icon-color` is also used.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color)` | Sets the outline color to the given color for an enabled button.\n`disabled-outline-color($color)` | Sets the outline color to the given color for a disabled button.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web button component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"@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/density":"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/button_8.0.0-canary.708cc09c4.0_1598371010806_0.9879096918720356","host":"s3://npm-registry-packages"}},"8.0.0-canary.19bea2ad3.0":{"name":"@material/button","version":"8.0.0-canary.19bea2ad3.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"6feb0c245c347189b37dc2e03106a14b9caa6f59","tarball":"https://registry.npmjs.org/@material/button/-/button-8.0.0-canary.19bea2ad3.0.tgz","fileCount":26,"integrity":"sha512-L3idkRZS0vrKY9zOzynFA6kWACii2CSzbXWhfgfivOB80QnEWO0Sn7qLjJG1SApWodulyNA3WSmaLTDuVJpF9g==","signatures":[{"sig":"MEUCIQCVbaXvjdRo13Bnpsnv8D8PsDHT8G6uXlgp3SNMwbAf5wIgMilkatPJ5BbcqVTpGeHPPrABf9SceINSj1bfzq48kOM=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":395428,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfRq7OCRA9TVsSAnZWagAAdl4P+QECeQtX2fIyWem/QSnt\nsNpsf48rdpm7bMMNjlJAoVFqy7QRLzDZYhAFW+sVw69O85ZX5UZTiONjQ2oa\nP2WtJwMKOBpo1NPmM+fzbSpPex5lj+xxWPNfOrlVZ6OwNicwnFXbDKb04Xi8\nlG0qC7xbkGsjaevDTQi6xgKxRo98bf5yQqRSYposaOhyPTywabRKPWVwbQ78\nu+xKG1IV5QMpuXILTYPlD25Bvf/b+lObmTXlI9SGPR6PGEUJaIPrFFCLg2CB\nZ/cX9uLQzVa2UcISDPceL1QMI1hQPqzcFuiNjF1ci0PkDIRo2Di5CtscgQnp\n2eme7RjlrbgLXkGdcQja1g75AlwMntogr6DE9RWvVVwt+0JLkuYMU4yz2ARJ\n1xSDpFloa8LBa6wLru2QhUmn0r8k/WX6/MfNQoqMtTlqRi/wSvAoHcA9Wbyl\np+x8JbCEkuxOmsb7Jf0bs2erE485PqJEBr9ebw/HVSiOrU07zTm7vmFCRuWc\nObLoa1s4VXc0v7Wgey4gv03A3Yc4Rxr9tzoq6czzAz+l+8KkV4LJfNWoc0B5\nGbQAM6c3Kfgk05ytaFks0NHP3c4ngo1YERl+qg22gMFNKmPPR92GlYo2mHnk\n4QAgmZCdg4umtcmuQOt+jw/p3XekjFoe2NCYbnXj6YfAvpLANEKE5SwEKVPa\nfXg2\r\n=fhqd\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n#### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.**\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n**Note: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.**\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n\n**Note: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommended to\n always include it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color)` | Sets the container fill color to the given color for an enabled button.\n`disabled-container-fill-color($color)` | Sets the container fill color to the given color for a disabled button.\n`icon-color($color)` | Sets the icon color to the given color for an enabled button.\n`disabled-icon-color($color)` | Sets the icon color to the given color for a disabled button.\n`ink-color($color)` | Sets the ink color to the given color for an enabled button, and sets the icon color to the given color unless `icon-color` is also used.\n`disabled-ink-color($color)` | Sets the ink color to the given color for a disabled button, and sets the icon color to the given color unless `icon-color` is also used.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color)` | Sets the outline color to the given color for an enabled button.\n`disabled-outline-color($color)` | Sets the outline color to the given color for a disabled button.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web button component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"@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/density":"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/button_8.0.0-canary.19bea2ad3.0_1598467789511_0.40927716259344127","host":"s3://npm-registry-packages"}},"8.0.0-canary.911014711.0":{"name":"@material/button","version":"8.0.0-canary.911014711.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"106adf6d83d54979c9183c1694b9d4ebf97c2106","tarball":"https://registry.npmjs.org/@material/button/-/button-8.0.0-canary.911014711.0.tgz","fileCount":26,"integrity":"sha512-U8/c6i66/9pNUR0aO9Zk9tJnYbdhxAsOfSunTl9DHC0qY8JDe+pNi3Ol54DvlIuN6FtVJFLNVzcjDk019aoy8Q==","signatures":[{"sig":"MEQCIBjuh9PqkfoqXZQr6bBfYbtFaqIf2LCwSnRID5RfFHeNAiBsdodiHXTV15MbinhNKoNcKBmZIsPsjiRmrwTnLHIWOQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":395428,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfR9p/CRA9TVsSAnZWagAAQCYQAJTpZHAvx4ue/0NgKRKw\nD2ZV0Upk5UBdqBy7+zf/WQwq40upiROX3poWoTL87yJMqJ0cZyyVL5cT9Kgc\n1gCYbd4f6cGeB568LQOsjqn8H+//kq1McRkzILVpdoCDWPxPe5x21YrBXgxU\na8jfoO90DcKTk7ktdG7oasd0uHZLgphYneUhcgdKMRBZLWAcxcLiwJ7eLE0W\nrcAtUmlhwwAAUmNXKvUa917ryL14M+Vd22eaHinyNyqyap8IIxbD1xFSiNcm\nE9VBs3cc6ovDZo4kgbLnDKvHz2idmhphygPE5UHnfnltP7qSCaXoMhm+EQGp\nn36gJb19b+kcxHMtia3Uh/P8We6TSeE14RCbYHXNF8ViD8bHXeq2rVSLIn6c\nfibBFNzFwnbSmKuvsAX5/fcizP13w9QvtzMvpZhBBlOd00deCP8TCssY+xgA\nOxwGLa2AqMhzQWfHhk/Y+tGZ24t+nO6FebUReqSNO51D5yRk42J8QhuoYSfe\neZOOIYUOcPskU4JSN/yqy/otv9MWsgcvnriyvrznJ4+ZVvYmZgsa7FsOfBFw\nVdYzCYwN83mCchl0BJLmHvq3Stu/xmoFjzn99cblyoRbCVvl1TqW6FeznYB7\n7HaKXF/0TMt/LaYnaL2X7wC66SO5A67jPqdijTkaF+Rlosf4s8WFdkYOo9BG\nxWLY\r\n=kuVX\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n#### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.**\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n**Note: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.**\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n\n**Note: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommended to\n always include it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color)` | Sets the container fill color to the given color for an enabled button.\n`disabled-container-fill-color($color)` | Sets the container fill color to the given color for a disabled button.\n`icon-color($color)` | Sets the icon color to the given color for an enabled button.\n`disabled-icon-color($color)` | Sets the icon color to the given color for a disabled button.\n`ink-color($color)` | Sets the ink color to the given color for an enabled button, and sets the icon color to the given color unless `icon-color` is also used.\n`disabled-ink-color($color)` | Sets the ink color to the given color for a disabled button, and sets the icon color to the given color unless `icon-color` is also used.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color)` | Sets the outline color to the given color for an enabled button.\n`disabled-outline-color($color)` | Sets the outline color to the given color for a disabled button.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web button component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"@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/density":"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/button_8.0.0-canary.911014711.0_1598544511236_0.15193030317150624","host":"s3://npm-registry-packages"}},"8.0.0-canary.d3387f54c.0":{"name":"@material/button","version":"8.0.0-canary.d3387f54c.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"a987b25705aabfaf55a6824cfffd890520a1bf99","tarball":"https://registry.npmjs.org/@material/button/-/button-8.0.0-canary.d3387f54c.0.tgz","fileCount":26,"integrity":"sha512-OkkpgZS1S3LKryg1Rto8M7V4qXt05f/kn6jtmFeQ6knVdp1wdHCSkk0eRGX1zyXegrEHWv7NyvJxI+tB8d7Dpg==","signatures":[{"sig":"MEYCIQCjG0yoFZg5XYzl9pktstpH2QCbl3ZenmK29WIK7eQXkQIhALg3DECZYP4CeE3P6K/BIgkFv1ZIGuVpR8yHDrmRSYYt","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":395428,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfUVhlCRA9TVsSAnZWagAAxhIP/RFGHtBcav44uF1mHee8\nfOeFz9y6cK+AAgs++TYT52+Hg9ueD77wyi92WQ0KiqgpBrK/HG/aH4MenS83\nDH4vC0wL0swPCCLG85s/dD4ioK/UihFnpD3kv3jEGyESLkzhkeHH8aQbiE4C\nlhCsfc4H/G6DbBmC0a/Y7nXUNRWq4v1pPm9TLoAEAnwyci3T6oN9IPfihCQI\ndygxnMqv5nY3C13eSlR1vxmXvp2m0AGXiNRda9TwRkX0v7IQiSj37CWV8gK4\nDHwRSodss51C8RVTT5mLSaX5duMOnt9D4IYIdbZswGXCDVCpFeY0ToHGj+Tb\nlgwHl93qHtGT3xQjh9mWP21pxoKcFEPUKbY5GOnDoMsrqAdztRWHTb4w5fRt\na2qVrTb01sQNPsZQMqwi95wIxeACvMe85cz2acIGfcea+XTi0g62czTUr11i\n+g9fbN2O/p8vj5eFglICbzximESgv6VqSfAldTd823tQCM6bqMJ0wvUEwoRb\ntoSNlN7OVMVYpBnFSLR3bZKWj4Vd1fmdby0bA4tkFn1g3V30etjrKXJiQjNG\nbEWgwt9LLQL87AFCwh+w5dh2+nismPbS6A5Rp/i8sfoMxgU2qfoJuC4Ny3Qy\nV/ks8JimsmVnnPmzgSmgbnCgAeL/YTzTrVfm3mmEzjH+Eyu2SFmijfbeeAKe\ntixW\r\n=m9ly\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n#### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.**\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n**Note: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.**\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n\n**Note: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommended to\n always include it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color)` | Sets the container fill color to the given color for an enabled button.\n`disabled-container-fill-color($color)` | Sets the container fill color to the given color for a disabled button.\n`icon-color($color)` | Sets the icon color to the given color for an enabled button.\n`disabled-icon-color($color)` | Sets the icon color to the given color for a disabled button.\n`ink-color($color)` | Sets the ink color to the given color for an enabled button, and sets the icon color to the given color unless `icon-color` is also used.\n`disabled-ink-color($color)` | Sets the ink color to the given color for a disabled button, and sets the icon color to the given color unless `icon-color` is also used.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color)` | Sets the outline color to the given color for an enabled button.\n`disabled-outline-color($color)` | Sets the outline color to the given color for a disabled button.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web button component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"@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/density":"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/button_8.0.0-canary.d3387f54c.0_1599166564873_0.9381858118678823","host":"s3://npm-registry-packages"}},"8.0.0-canary.2ccf996cc.0":{"name":"@material/button","version":"8.0.0-canary.2ccf996cc.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"8feee791b8ca1ead27e5b8687888d445ec926aa3","tarball":"https://registry.npmjs.org/@material/button/-/button-8.0.0-canary.2ccf996cc.0.tgz","fileCount":26,"integrity":"sha512-89VuaGGBJrXuJnrsfyvqcAD/C52R8HiGMTwC6b7Ai0vBaUCUmHxMRmPvGdAF58f0CkA8joiifR84iI7WZGnTLg==","signatures":[{"sig":"MEUCIGjro7I/sCm4coBiuyDOUBp5euSu+5HNnfMp70untUAKAiEAybp9mA0vCzDBjPzBXG/Xu7ry9wwSptsZUuDsFiaB9po=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":395428,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfUVhzCRA9TVsSAnZWagAARQgP/R12zPeq8AvAShIXGGCU\nEDfkjNilIsPDjNU96koo68Bq3F57YUSsddfLycd75MevzjhPzejGLJxW+K0v\nq0WENE4Upv+CNyjKiJtmHjl+0OdE37sT7cGR9H6uB6xDQSUb0kVLCoBXFu3M\n96UZ7NSUHgxCYcVbzMXDnkDTxWv+PdF26qcJPkMP84bGtt8URVg6vdZ7SrEb\n9f3boSS24nbJA0z1zeHGPs3KX2hNJdipMS/T0dz2RNkVNIkWNnd+5PLHr0g9\nWjTw5zItrTX8ONIKQzAUEnpe4bxCB+qPdTn7Z8bVIwcn0QCPhePmXzxc6+Ku\n9hlA8AiC5Bp9egAI7R+QStEO8JZ0kUD9WXX+viyTpHlLHY8aYbAWxIYvigU2\nILeBHHxzZZ25D4vlO0DSf5MhntF94DycrwqyBtiHkftp003H+5TYpcZEWiOV\nX6DDYNgIE3U4t1FhTiuYkPrACJdIzr87Ed7do8AsULYuLvS0e3DcU0QaqRvC\nKWRS03DDqiDbsmd4sWuVt8DQ5waNTSp9VGTFzfdPFuywsSKmfwsrXkL4zHTD\nXQ22H88TxLAmjXKKtRxgPqSnnoLiBEpOQvpflFbbrLKQWyJieR6bio9c43Cp\nM50auYVPOJQaPitnM4m3bmQaTUFJoP/JMBn54ZXCQoCPgUa1AXX/bPQbDvV6\nDn8k\r\n=/9Yl\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n#### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.**\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n**Note: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.**\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n\n**Note: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommended to\n always include it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color)` | Sets the container fill color to the given color for an enabled button.\n`disabled-container-fill-color($color)` | Sets the container fill color to the given color for a disabled button.\n`icon-color($color)` | Sets the icon color to the given color for an enabled button.\n`disabled-icon-color($color)` | Sets the icon color to the given color for a disabled button.\n`ink-color($color)` | Sets the ink color to the given color for an enabled button, and sets the icon color to the given color unless `icon-color` is also used.\n`disabled-ink-color($color)` | Sets the ink color to the given color for a disabled button, and sets the icon color to the given color unless `icon-color` is also used.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color)` | Sets the outline color to the given color for an enabled button.\n`disabled-outline-color($color)` | Sets the outline color to the given color for a disabled button.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web button component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"@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/density":"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/button_8.0.0-canary.2ccf996cc.0_1599166579398_0.47928740322800834","host":"s3://npm-registry-packages"}},"8.0.0-canary.744bfe5d8.0":{"name":"@material/button","version":"8.0.0-canary.744bfe5d8.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"24ffab87cc873a97d277170d04521ac9a6df7694","tarball":"https://registry.npmjs.org/@material/button/-/button-8.0.0-canary.744bfe5d8.0.tgz","fileCount":26,"integrity":"sha512-XnNaWjZYel5uxTRI4a3BGtABTA9pCdNEy1MkiqwmPaD5DnQi8d235EXn+g7t5QeCpPIAWmkEkFCuMHCk9DFZlw==","signatures":[{"sig":"MEQCIEiNYwbHfy2Cmuv9bvvwWYCPtePG4WFwPKKNCr+zh9S6AiBpZTa8XPZdaur6hrdy4fVb1vNFcNoOIo8bEYGokDbLMQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":395428,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfUVijCRA9TVsSAnZWagAAoOYP/jH/4cgJ9kHz7pSm3UHL\nVJ1RhFLFlTksSWlx6DA/6CRb2erFwvRWpzb7/JfOMACZ8ihFlfpfMUZdXOF5\n4K4cRluGuOXXazczI2bUamyLjS2FGc+3yq/j7AsHJg8ORzNEeLRtUzp3cgwC\ns282iZvTKMAmebHSyp5wL97FeQQGoTaishx/lOPVTtUXhthNpUE086tFj0dl\noMaiWRWLrz/XeYdzMtFiCmXnglpXHC4dAIi+Dz9m19PwNQ9B6Sx2dx7Fw9DY\nGyoRMJqlJ+eHIxfDzeOPOci64LXupFtEAPMko3rqoWfbNW0EEVOi0MQqHRdp\nF5t4LqomJ2TDQmcXtJB9pkfw9W0pLqWESa9BOnZZpO9nrsrysULbMdcMyobP\nxXoU9rYvIPZAsOJ7KgSV2PjZ8ZItWgvBT+ThINODpU0wB8mccdszn14tht9U\nKXccvO+BMry9gplZgAx/FvzGlz9VEpNjqanYfRK2zNat3o3B940n64G5xW/i\n69TMB1N+cOWRwisJyxv0X+kv8dTTf//JMSZ6uMHG1q7xk0Hmf3W1upeNfECv\nHmhaxjcJBcxdnZxOUIt9fkdexQo6q0LTjhUzwSsggl9SrxVnUrYc5/ma2w5h\ncu+b/odZyRlXY5LEOEV0oAwWIPggF1fn8Bu5F31a3LbA+LoqrCarw4OXGTIO\nxkRx\r\n=Dkh/\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n#### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.**\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n**Note: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.**\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n\n**Note: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommended to\n always include it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color)` | Sets the container fill color to the given color for an enabled button.\n`disabled-container-fill-color($color)` | Sets the container fill color to the given color for a disabled button.\n`icon-color($color)` | Sets the icon color to the given color for an enabled button.\n`disabled-icon-color($color)` | Sets the icon color to the given color for a disabled button.\n`ink-color($color)` | Sets the ink color to the given color for an enabled button, and sets the icon color to the given color unless `icon-color` is also used.\n`disabled-ink-color($color)` | Sets the ink color to the given color for a disabled button, and sets the icon color to the given color unless `icon-color` is also used.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color)` | Sets the outline color to the given color for an enabled button.\n`disabled-outline-color($color)` | Sets the outline color to the given color for a disabled button.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web button component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"@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/density":"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/button_8.0.0-canary.744bfe5d8.0_1599166626610_0.5385256865492911","host":"s3://npm-registry-packages"}},"8.0.0-canary.78da96eaf.0":{"name":"@material/button","version":"8.0.0-canary.78da96eaf.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"4530cb52aa65ccf1345e493dd80e07b793837e3a","tarball":"https://registry.npmjs.org/@material/button/-/button-8.0.0-canary.78da96eaf.0.tgz","fileCount":26,"integrity":"sha512-fOoP3ujT0lIwvUCD+lW4byiK1R7POXMiNG491bv3Btz6C/dPID8w3LUe8UZnkgraHLwkDXg9ndwrDl62BgANog==","signatures":[{"sig":"MEQCIBRIcHxJSoWNiuqPheNpvCtpFdEfv5rGpjzQ/LFb1w5CAiANxTNKyKIFxKuNCSfaFrUTY+dKRWgeyapo0r8Pdgc1fg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":395428,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfV9fOCRA9TVsSAnZWagAA+6oP/3Kk5AfrtBLweUCqNTv3\n5HggzreXgQB+QJrf4ygx0SN3rl6NchCchXz3AlaYmxkGOeubJ7ahtKZwuD5I\nOOXx/CVHwEjz3Xf72PMvAw6Ap4P8LEPXwNI2uuibaoWrAilaGl508V3oCCvw\nQU/NeAgquYtDVlFa8Qqz0D+gMwjnqyafgcVYg+gb7PPKSsTkuxOH7DzNWkjV\nutrKyH4geNfSA4KX+3YzLN79fN/Ffs4O9pme9DAw+1QMAb8ETazXOiAvW/6G\nF+LTWB9QeR7D4unplHc/HsfusRMGMsv1VgyfNho+Ym2sVN7JkzByuYfk+wRP\nZbU/asG5GwWxrS5Fmpn/wDhazZLx03iuTKU+paTFX3nFP4ABgs/cKEq/jeso\nA92En0o3fXXeGb1KIphoPabBC3aOGqAJrIh0eT2zd8aEwM7ove7bwoSZBK99\ne3RFJTiuPUMUEC59hZBCpPIhtbCEBXy2onwQ5Z2ztXMt6YbGVkf1njPVvAY5\nOiPFkYE1mK0leCNNMnkvfbTBvGcfiSho+tBCdOJhForlaBw7ZpixRlSJAR1E\nlhSh2M15KlPgnD4POUPPiWqBqZ/Pa0g+vA1ZXivWBM3v3OHs00ToIxeMWJnX\ndi7GMJzHPFLNMnwhj1aMlZVr5Cghg+1FhKrql4/oXUfVKKlKrIswy9bsIQqp\nLfpu\r\n=0mQ7\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n#### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.**\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n**Note: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.**\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n\n**Note: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommended to\n always include it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color)` | Sets the container fill color to the given color for an enabled button.\n`disabled-container-fill-color($color)` | Sets the container fill color to the given color for a disabled button.\n`icon-color($color)` | Sets the icon color to the given color for an enabled button.\n`disabled-icon-color($color)` | Sets the icon color to the given color for a disabled button.\n`ink-color($color)` | Sets the ink color to the given color for an enabled button, and sets the icon color to the given color unless `icon-color` is also used.\n`disabled-ink-color($color)` | Sets the ink color to the given color for a disabled button, and sets the icon color to the given color unless `icon-color` is also used.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color)` | Sets the outline color to the given color for an enabled button.\n`disabled-outline-color($color)` | Sets the outline color to the given color for a disabled button.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web button component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"@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/density":"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/button_8.0.0-canary.78da96eaf.0_1599592397565_0.1844332727239204","host":"s3://npm-registry-packages"}},"8.0.0-canary.b0ed593cc.0":{"name":"@material/button","version":"8.0.0-canary.b0ed593cc.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"f378fa112c722ada209a90269758973acca38aaa","tarball":"https://registry.npmjs.org/@material/button/-/button-8.0.0-canary.b0ed593cc.0.tgz","fileCount":26,"integrity":"sha512-M4sYChN3vmD8Yq7+FcD6KQmYFX2kmIy4LpVeV2PToPUG8psc11cExIPO2tSgPvQF62Fdu89gZ+CNyoz7K5HXsw==","signatures":[{"sig":"MEUCIHImRgeYHCRz8ehBASr6YtiMJrrzMjF53+mwjpja7VjwAiEAjVrnKNuq4+lDWv5MajRTUOP/9zIf/l+3VXOdz5veuGY=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":395428,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfWHM7CRA9TVsSAnZWagAA6xQP/3hBOXjqEIpEe6eu7Jzg\nj9EjSH3ZnT1rCT9K69O/T5EYV40Y/d4jInothQA7B2UDwA8/47V0tb5E1ISU\nXnBuAMb8rPq3bLfSrSnRSwu3z4HPllvWdstYZisvX8lYlCCbdqXrJ/U3QFDe\nKny8r3Mw4h742wcw7p2Gzyuu9AyAIhHq4I41WmC9Yd7aGKaV2bk6/N4IZABD\nlVkWWwsabxiK+b3yT417w/2OkP1EQ4oAktLsabNzvJg1lDVqkGCudVro1NRn\n3t3oSVlhvt1YVziGmWeBKJfy4K0JZsfLVn+S9/6dAmBUz9uyOVrBUvwWODAW\nOZXJsoBsayoLl84hVjjeQzlUUUQB2AMUdYRuyTKdwQhmuEg0s3uDT+uAaDDH\nK9m7iX298tvUudPG8o3BxI7btIMGV4fGV94W6JZRTAEfMllhn4cwB6knImJG\n6foDUpniIDo7YxfVknywemXIF5Ad5TNPwJtfCNHl9fnzFbN7XC9e4svW1XmW\nFYMd6y1HUh/yJVHO6Cs2v0yBsudzpKnp5ZWA0XrZiA5ykk/x0/ihcQ4MqXIx\neBGpItFtMFm6Y9ggkNMLqyTNXgCDAVCTmgFrcGBhimp71cLJnPSnggh2FEzo\nR5MB4e9YealD4MWgBQc5CEGYHNGGfPIHXkQj178Pw+QX0dzwFkOvrQ7mGaOk\nPQy5\r\n=Z9m5\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n#### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.**\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n**Note: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.**\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n\n**Note: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommended to\n always include it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color)` | Sets the container fill color to the given color for an enabled button.\n`disabled-container-fill-color($color)` | Sets the container fill color to the given color for a disabled button.\n`icon-color($color)` | Sets the icon color to the given color for an enabled button.\n`disabled-icon-color($color)` | Sets the icon color to the given color for a disabled button.\n`ink-color($color)` | Sets the ink color to the given color for an enabled button, and sets the icon color to the given color unless `icon-color` is also used.\n`disabled-ink-color($color)` | Sets the ink color to the given color for a disabled button, and sets the icon color to the given color unless `icon-color` is also used.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color)` | Sets the outline color to the given color for an enabled button.\n`disabled-outline-color($color)` | Sets the outline color to the given color for a disabled button.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web button component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"@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/density":"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/button_8.0.0-canary.b0ed593cc.0_1599632187249_0.23393895495175143","host":"s3://npm-registry-packages"}},"8.0.0-canary.85a1fa9ea.0":{"name":"@material/button","version":"8.0.0-canary.85a1fa9ea.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"766c699f338710e0d82156158e0212bb120397c0","tarball":"https://registry.npmjs.org/@material/button/-/button-8.0.0-canary.85a1fa9ea.0.tgz","fileCount":26,"integrity":"sha512-DQyKI1KE2d4CCvIU1H/c+8zl9912+/ZgL7kgyCJ1armIa+WzK/9aDTsBkb5M0eNGp8meM1rAkeaPVllFbmN3kA==","signatures":[{"sig":"MEQCIGh3GBorU4X69S1QlItXUrf00CNHyoHS/Iu3WVlMGZTrAiBqHEh/fNjZuq92L/dlP13G/cOzL0q5VosDQSFx5SoHMQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":395428,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfWpZkCRA9TVsSAnZWagAALVMQAJeiXI69T7D7OuiRaXbA\nzgM+0ektmrNvXhzdLV7Rx4WbDEyTJmSy7pHDyjZEhifDuLrH7aWv+umLDizp\nApX3KBEeko2y7cBrEYnLDHoS1OIA3u/3Ce5yiHIOzVtU3nAEuGllqWj5znsF\nYypr3ctA2jVhxNf8uQVnhFMVLRrDMjNqSZtBZPrjLHQ/lA/nBv6UFFllRH+W\ns1Pzc6KBrqtz9qEmsSiKCnYxMqx0+k1Urawh7zpaw3UnCGGxGnDfmFs7jigm\nDPd9HgM0HkmPCgy0NxYHnJletoKf+QCEjeC/c0NIYdpzXsRkzPDkg/vkyYZp\nU7lu4TAYhw5Z1jq7p4uoSTZwKQs2+FAR2roEyh7agR1H89KY4SL8E5ddO7tt\n0P6IJ9gBxZ8uNuF87mL8ts3a4XefBm0Ut/XUiLtZRg9MsIEhN1uGDltZqdhI\nRcge48nKPZJjDU3jJyB6C38FImpg5Il047OC5fwOZ+w5PxxuGn24XDRc7/us\nOJ4q0mCrh+ZIS+ptAl1ilNScRirzjo21g9Zl6eo9G31LKlNE1o5Dr3tZlh5X\n5PiBL7ofCfO54vReURo1/FYZH0bN9rDdEaSy72UrZYKLNwHLprEHWui103xy\nLjPkGXS7SqFpg8W/jTKUcYI39xwzb8DoHf6WjBRw135Z2ykKEPItlbb3Um7q\nG/AF\r\n=wLL0\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n#### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.**\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n**Note: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.**\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n\n**Note: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommended to\n always include it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color)` | Sets the container fill color to the given color for an enabled button.\n`disabled-container-fill-color($color)` | Sets the container fill color to the given color for a disabled button.\n`icon-color($color)` | Sets the icon color to the given color for an enabled button.\n`disabled-icon-color($color)` | Sets the icon color to the given color for a disabled button.\n`ink-color($color)` | Sets the ink color to the given color for an enabled button, and sets the icon color to the given color unless `icon-color` is also used.\n`disabled-ink-color($color)` | Sets the ink color to the given color for a disabled button, and sets the icon color to the given color unless `icon-color` is also used.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color)` | Sets the outline color to the given color for an enabled button.\n`disabled-outline-color($color)` | Sets the outline color to the given color for a disabled button.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web button component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"@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/density":"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/button_8.0.0-canary.85a1fa9ea.0_1599772259906_0.7095407228659296","host":"s3://npm-registry-packages"}},"8.0.0-canary.0bc41a9c7.0":{"name":"@material/button","version":"8.0.0-canary.0bc41a9c7.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"86680f51efab4395d6a804dfda27a8d7e4cbef37","tarball":"https://registry.npmjs.org/@material/button/-/button-8.0.0-canary.0bc41a9c7.0.tgz","fileCount":26,"integrity":"sha512-DpYosvNbBjTWfzOlZbv1pJAHLcZvoSNGK8sC3UDDTFzrW3ZgApQmVq+jbJnacyBCY9OJ4p4vQYSjyATa2B27+Q==","signatures":[{"sig":"MEUCIHRKPjOpZpAPhrlu1rd3T42OQbaW7SpJtPo3FrilF7k5AiEAvIg8axYGbVPk+NV+R6YFPspSQKm8+4gFbpwUxXkQX18=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":395428,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfW7jWCRA9TVsSAnZWagAAP4QP/ihgJ0fHzND2sbU2bmw7\nKhKYuGw8C5/E4agks5sTjipKOsatj3yK+IJLWYW3qixDi9+rFHeGRTLRUufb\nIiKDqJSZ32OFkXbv8CY1fDNhKk/67Mbeowy36mjkcstIx7lcJufRfYhs7NwP\neiRS0bjY7z3GP7j8uj/qBJbepx92Q/lJw6jxe72Vt547+uj7/+LsfKMpJaeA\nJPpNouEFnMQHTl2J11HUxtWzMBCpAAo6RrV3HL9YGvmWeFNMZhRjVMHABzPU\nWxYOmfWTPCg0o0DfzKJtGiBxEHiTlITrwoV6KwWYcT/VI+fggZEzN8k4USYO\nvY//BN0cxWmy/QaWKToK1vtSq4COfzBap+XrYZ8DhoNc4lpGmcnsVjuL/Gns\n/jnPsXpx5rmnnvTTeJoDzYz/FF8oGEIFWikMDOmDo2ThA2UsFzgMH9mY0O6c\ncHxkp7zx9PSi6h0YiW9KSFTMf4BaOPp8myaSa/BsFTq65wN5zbZEA1bI4jxY\nWh766VAK32ZSSTjZn6vc+ynz5o6JFpqPiI+aaVvYKhGW0AQNtap5j5HE01bH\ncUFvzXUixf1Vx6rGco4NhC9l9PSklQxbhfKvaa24Q37CFWaGfqHaS0ChV3NE\n5HVj5du6nOIYh8sfq290sE6EBRBi9SXs/8scBu0FETQxCViC/H2zuRpDz6Ro\n2nIh\r\n=fmwc\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n#### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.**\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n**Note: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.**\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n\n**Note: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommended to\n always include it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color)` | Sets the container fill color to the given color for an enabled button.\n`disabled-container-fill-color($color)` | Sets the container fill color to the given color for a disabled button.\n`icon-color($color)` | Sets the icon color to the given color for an enabled button.\n`disabled-icon-color($color)` | Sets the icon color to the given color for a disabled button.\n`ink-color($color)` | Sets the ink color to the given color for an enabled button, and sets the icon color to the given color unless `icon-color` is also used.\n`disabled-ink-color($color)` | Sets the ink color to the given color for a disabled button, and sets the icon color to the given color unless `icon-color` is also used.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color)` | Sets the outline color to the given color for an enabled button.\n`disabled-outline-color($color)` | Sets the outline color to the given color for a disabled button.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web button component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"@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/density":"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/button_8.0.0-canary.0bc41a9c7.0_1599846613846_0.8508119133717893","host":"s3://npm-registry-packages"}},"8.0.0-canary.fc0eb5013.0":{"name":"@material/button","version":"8.0.0-canary.fc0eb5013.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"8778a992def9dc0a19d4d9482be8bd1a5f364c93","tarball":"https://registry.npmjs.org/@material/button/-/button-8.0.0-canary.fc0eb5013.0.tgz","fileCount":26,"integrity":"sha512-+1KtJkEkhTrJnscMBN6dw/Ts/mLQv23VHR+f0fIqipsBge+vaQlSeFDL/J3wtRbBybcG3JBy+0rn42rrbp4kuQ==","signatures":[{"sig":"MEUCIFGLPDax0uBWCxhRUKDnkeZ8+TakQ09tWA7KtQNRH/rhAiEA9FbJPKwVQy+tVJDOH1W3C15H7mHnWBSHD7CKj7TZOqg=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":395428,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfW9ZVCRA9TVsSAnZWagAAq3EP/0UpCXZKdGch6kqIWCtm\nLAcpNxqt2bcdA/ycbt5Ylg0J5T+hCfWLmznuMEPrUNkBgPuBhZNF8fj3l81L\nsYjFLAaoyHtjPrBojejs0LMEVT2m+tefErnlHGnQnYBDoCyKoToVJXAbLwzK\nZw+Y2GuCAojy8T0ukUOkWi3o4l5Atd1YiptYuNMOo/w/r+OADIfNWmgA1EHZ\nHKqVABVV2hdjPD+A/8jp1ZMk1FteyAIu1LLR8ffc9Jow9iF3YLozhfTJu8jw\npx00wEt0OTmodvHkw7deZcL63ZxPnqfYDtns/WaXv/LVVt++BDpGkOA4rjER\niC/GPuL3ykEUfSLIJ8bi7+DTG7jJw79aiHuTPjUXagza0csEMAHnou6RulMb\ncUFJGMvovpp3sXtUVJNTAbAZnMKZMWIWuiB4BGWoiV97ZQnr3YKFibt4tRBu\nx08Crgfkf7aQalr9BtIpBZl3JaZ+tRHO/mP5bT598k2LTu/y/+Bech8ifUrw\nispkTRffy+0HqD8/wcC5+nB5YxqZB7U1t7lxmg4tLyrA1VmgJLHORvJYyOCa\ngcVvDUzZRtAbrV3PDOQiqpqb3fDHzEUe+0MV7MVSDHGAs1hCahp60uYHeQq/\n7Acf5x+wKUPu27xgumoDkY3vMNkQgCjRt/Oh8+ngKiJxWJhZ2n+TP/lafC1F\nw6CA\r\n=5b5/\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n#### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.**\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n**Note: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.**\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n\n**Note: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommended to\n always include it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color)` | Sets the container fill color to the given color for an enabled button.\n`disabled-container-fill-color($color)` | Sets the container fill color to the given color for a disabled button.\n`icon-color($color)` | Sets the icon color to the given color for an enabled button.\n`disabled-icon-color($color)` | Sets the icon color to the given color for a disabled button.\n`ink-color($color)` | Sets the ink color to the given color for an enabled button, and sets the icon color to the given color unless `icon-color` is also used.\n`disabled-ink-color($color)` | Sets the ink color to the given color for a disabled button, and sets the icon color to the given color unless `icon-color` is also used.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color)` | Sets the outline color to the given color for an enabled button.\n`disabled-outline-color($color)` | Sets the outline color to the given color for a disabled button.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web button component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"@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/density":"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/button_8.0.0-canary.fc0eb5013.0_1599854165066_0.7325371768075648","host":"s3://npm-registry-packages"}},"8.0.0-canary.319bf66de.0":{"name":"@material/button","version":"8.0.0-canary.319bf66de.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"7f6ba841847e71c199fe887e155a87ce97984dac","tarball":"https://registry.npmjs.org/@material/button/-/button-8.0.0-canary.319bf66de.0.tgz","fileCount":26,"integrity":"sha512-VEiOIlIVaugAvKBNepYYFQxSW2ph/GpEw1IB5mp6tKuynPX7FHFENnMSVJb0p2MQ4R6sQaEwLBt9hiYj3bMEDQ==","signatures":[{"sig":"MEYCIQD9gyj3EOgM1GeN0Kfp0FyjwveqamRaEVFty7xeD5oewgIhANDzOk/Mxh8PKkR1bYyd/IAbwjSwjP8yRmtgxojp3FAP","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":395428,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfXAPwCRA9TVsSAnZWagAAch4P/0s2sxpyAU56K3GmHW3q\nk20CxP1JLEwJ6+QlYynsEzkuv9m5KVOfM1ATPnvlOtCUpPQEnoBDVn2N1ZjO\npYDfcHcIu8vmyznb6A/yDTP3WWV6e1DbTdmjB0mutSlOWcyA5NrrT29207LX\nvJGJCFmrKZ8ewbKPWFMuHGs61PiOsCVAJnKL502mteefwgRGjZ8pZlrBlb5p\nuGZel7ru7EoLQh/iXuFcS/4AIoGDCSrSldxYF2QOchRaPXjhpI1u5NE3A7dE\nOI5AXtcs26s40ezX4Vx+9THtHlsYHj5kjniyOj8BkHc76boPG8uujr+v0vBG\nMwcpgeg+7+7FYBRuAxie6vfPa0mD3Fb9AL9ZAF8EXBnW+mi9UdPxPZFHm/wX\n6/afQ4jGEaZwGEBruJ0BIcj+lh1hhV+ghERwvunEGIJQFt93rMLToNdNFUtf\nCbXiPdSoBQL1L2aZbnoO2R3ZxfCX8NhPc6oQK0RXlFBTK4jbHBXDHKDUVw2S\nGMsSXrVp7bcvotH2NVGcuSjbvSfWeBqi7Ds4TrFr5sLbEY4N5gDOyQlMCPsM\nAJH5xnS5leZyju7cRN5rY6sEp4n/iQ39Yp2+zC/ecva7M3BnbgsCDVq5rRTL\nEMcE7Jg6WrRm33mioReIwze+Gk8na7E+OuXQjgwcoZfRugqbHKZQBYkyRtCr\nmrup\r\n=YCR/\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n#### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.**\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n**Note: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.**\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n\n**Note: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommended to\n always include it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color)` | Sets the container fill color to the given color for an enabled button.\n`disabled-container-fill-color($color)` | Sets the container fill color to the given color for a disabled button.\n`icon-color($color)` | Sets the icon color to the given color for an enabled button.\n`disabled-icon-color($color)` | Sets the icon color to the given color for a disabled button.\n`ink-color($color)` | Sets the ink color to the given color for an enabled button, and sets the icon color to the given color unless `icon-color` is also used.\n`disabled-ink-color($color)` | Sets the ink color to the given color for a disabled button, and sets the icon color to the given color unless `icon-color` is also used.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color)` | Sets the outline color to the given color for an enabled button.\n`disabled-outline-color($color)` | Sets the outline color to the given color for a disabled button.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web button component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"@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/density":"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/button_8.0.0-canary.319bf66de.0_1599865840370_0.410327117899703","host":"s3://npm-registry-packages"}},"8.0.0-canary.5bfc305ec.0":{"name":"@material/button","version":"8.0.0-canary.5bfc305ec.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"9b13f32ec476eda68c350eda3db89deb97ccf391","tarball":"https://registry.npmjs.org/@material/button/-/button-8.0.0-canary.5bfc305ec.0.tgz","fileCount":26,"integrity":"sha512-CTqKv8z24eFA8YRUJdseVQhiEIrjb8j85l8dbeC7oFC8LDZy/GNW4eeh2bOCvRIIlgXnn+RhFJ+x3Tp0JShmEw==","signatures":[{"sig":"MEYCIQClNaEenJO4QoTmck0DpmwKrcTxcEdpIT7I8XBydNNe5AIhAKuSho6UsNZ8LgdbIofwPzRTEeBnImLgnFzMtidtH77f","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":395428,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfXqSYCRA9TVsSAnZWagAA5doP/RitZoHhLIaXQgbbqkPg\nU7AA91X9UF+/FkJYroOaeh0FV2zDD0hQd952jzc+cj5gKC+jsQeYdwc3ZDYi\nDwzC1VLIF/BaVLG9zHM5oPUgeRwYuzmHM5Qibm4yXxT3RnCk50/mNKqbyQ/K\nG1YIu7F0LX7r4hiYThYeTn/fyHLZXJw8xl1/xvnPNiEp+4HhBkxSbUodFY6K\nlQo/VQePCYtWV23VtRV6ORULpoTp8uVTlqGICW1/TrAZBo+71sGEyUMd8gaT\nolWkPUhWDjdpPCUgWIMRNYxn8+Ebs3AOuB9RJ+q/UBdDKrGuUipBKi5a4VG0\na+RTZvNH0xOFzY7zGlDgQPctEYmYHPQHKU0uBTnDzgv+gJjaofJnjVRXcj5P\nPJ1HDQLB1DbGxDDywzMZmUdWhUe2jhOHorAbCCiaL8dcD764C2Vu4TgEEBFd\n+AfsRgXHVe8ErjrXoA+MWFNDB0JvLQ1glN9LUBlkpVjrc7xah6kODn7W4rwX\nHMgBuY4t+6KhzWSpbn+lFzbBjRa/2F7xo7/3Tyq5755kOdnVvo/EijV0YBwK\nIvCPDwro/qxYvZA7qc+Hqg8XYCaST6LfbCmLmBcT0eY+86IT65JOzGVdphU+\nLfUiN1S0zFSjEyjvoL1fgla3WX3z2j/3QwK2PIiNuGtVX0OEEG4+GequEO6C\n6zHx\r\n=hrod\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n#### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.**\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n**Note: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.**\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n\n**Note: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommended to\n always include it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color)` | Sets the container fill color to the given color for an enabled button.\n`disabled-container-fill-color($color)` | Sets the container fill color to the given color for a disabled button.\n`icon-color($color)` | Sets the icon color to the given color for an enabled button.\n`disabled-icon-color($color)` | Sets the icon color to the given color for a disabled button.\n`ink-color($color)` | Sets the ink color to the given color for an enabled button, and sets the icon color to the given color unless `icon-color` is also used.\n`disabled-ink-color($color)` | Sets the ink color to the given color for a disabled button, and sets the icon color to the given color unless `icon-color` is also used.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color)` | Sets the outline color to the given color for an enabled button.\n`disabled-outline-color($color)` | Sets the outline color to the given color for a disabled button.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web button component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"@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/density":"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/button_8.0.0-canary.5bfc305ec.0_1600038040265_0.6371441018334512","host":"s3://npm-registry-packages"}},"8.0.0-canary.83d83f131.0":{"name":"@material/button","version":"8.0.0-canary.83d83f131.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"dc6c1188746f3246906481378809a321a874355d","tarball":"https://registry.npmjs.org/@material/button/-/button-8.0.0-canary.83d83f131.0.tgz","fileCount":26,"integrity":"sha512-YCoRZ55oezu52G8jVy87nKr+ASd4DMS5DMWS0Ig4rj7uRpdK9ga9EvDByRb21Odn+aAfgYWTUvB13bFY5rJzEg==","signatures":[{"sig":"MEYCIQC0s2d2e7l1v9mNphspUzcL8zAQVykexIhhkSXM2KkI0AIhAL2C9K6E5FCh0By2Q3vKVeXol5h8paP3rHN4vaa2RELz","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":395428,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfXrpGCRA9TVsSAnZWagAAeVYP/2+Rhjp1z0B7V349RZXX\nSSUKvdW21m7j9MeddipcFqGwOmdENQP8jHZ7SxEF7fE3mIsg5yAZqxK/k+hG\n3fWolg4wFhS3Qk2bGW59T6CiYDvk6WwfaaGenYZgvspHcWg1QIq3DVSARI42\nHQgcLrhFyEwHCZ1Cb2PIesHCtUSa6OxSbtanNNQ/57/wMEat/xqxI8v55vyx\n8aMnEwa1GMydAWnEgfosPqHxIpxi6e+eXE7cwz9QjTuPu7zMMEMyGjA878CB\nqnwfT6S0nOMTIZLeiwrT/8PX6sEQGCnqSaXyLmOT4ncq9F9wOmLh6eJap5RG\neXULLhSVpaTyxer60sYnLhknGNbm/akssXEsFtOnLKPh5jVVebbPCHp9RgcR\nc9EvM87m2wW67/JhqPxeX4tRZdaBsi+siQpq7A2JlkD49+z9qOLD6Yn37Q1e\nAN5JmRcklTMhBH7LtCr561FBNKXVl4lrMInu7F4iImY3odDJ2VyIuj7vsebj\n+vxC7bxlg63VyAV1yMlfdHl5wh3mp88BltJhQd4annkIwLSrWjNZuw7DNa2o\ns+UJ1UaMTNSZhpjNREhMOZA2EUDqgBa8M/FGe81m6rHAYF0pIH6U60BdQIpB\nwmcM+AHyNH+Gxq/uFEdN85NGV51KXKsuvj2yYVKQwC1Vg8M7dDzPQyfmOX2P\n5iCU\r\n=ibre\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n#### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.**\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n**Note: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.**\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n\n**Note: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommended to\n always include it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color)` | Sets the container fill color to the given color for an enabled button.\n`disabled-container-fill-color($color)` | Sets the container fill color to the given color for a disabled button.\n`icon-color($color)` | Sets the icon color to the given color for an enabled button.\n`disabled-icon-color($color)` | Sets the icon color to the given color for a disabled button.\n`ink-color($color)` | Sets the ink color to the given color for an enabled button, and sets the icon color to the given color unless `icon-color` is also used.\n`disabled-ink-color($color)` | Sets the ink color to the given color for a disabled button, and sets the icon color to the given color unless `icon-color` is also used.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color)` | Sets the outline color to the given color for an enabled button.\n`disabled-outline-color($color)` | Sets the outline color to the given color for a disabled button.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web button component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"@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/density":"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/button_8.0.0-canary.83d83f131.0_1600043590257_0.5777447136932683","host":"s3://npm-registry-packages"}},"8.0.0-canary.d52b165b5.0":{"name":"@material/button","version":"8.0.0-canary.d52b165b5.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"31b1859fdb70f88b4f9579e87e0cd1b606e6ab4d","tarball":"https://registry.npmjs.org/@material/button/-/button-8.0.0-canary.d52b165b5.0.tgz","fileCount":26,"integrity":"sha512-wdegthwDgoAnUL39Crn/E9d8WMfeaY0Jfo6d/WGNWWRiTyK6i8X0u73eox2fz2TPBUcKhN+Pi6F9ywRfuaiGrg==","signatures":[{"sig":"MEUCIAQoFU8XzVqqumn5lL5GPEyCXylSiAQWrcTxdm7PPeXnAiEA6R1y3qKatg3G34puAryyU6tmPIazHL3CRluRu4nCYHI=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":395428,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfYNW8CRA9TVsSAnZWagAAlkoP/1qLl/cB4qCVbT2i5jX+\n1B89Qi9y6aBE2Dz6bYe1uuloj/fG4ewTCenRW/k6bwx0vHOvv5jAVl9VVqoK\n8Wu1Bjv5D02IN+DZ2z4LyNI4wQy0Ds48WhPatmhd4Ux7Y+0cfA0z89RHDDb1\ncoftrI+JRVs7p4tfQ06oGyGbxM0VBMFoqDOR3zBmQ6uXfOT9uc69UdtxttE8\n766jxSONAJZS6OktnEMskUjxwpHgWG9cUHmo/IUylut42QoUaPKxgDmWSBJl\n2WFKbLk8zATEpRWZBZmOiU5tr2QtH/qMVtuDwtn5qHeXoBPSiVz0hJqk9zzT\niG54YT3sJF5oV6prx2wDPTn0NI7Etv4HLA8QM/cRjCTXCNyFhOEbmi6K7HIJ\nTOcBxw5+5SvPFHv0HclK1nPfMZMK6rbwz9JhkptoGYY0wtfwYmx5RExc2+ZF\nA+z6VvYSJUNpeSkcNk1Wj9cF4LCkwitpdGpIR49KkiZe53MtkYXtkpcfm2yL\n01w3MC9cOvZXM8ik4BD+LR7mpxIn5Dw5PM9ziVjDNLRMKYt0BMono0qqRrLM\n3bGc+nVvH+HPtD3ZI+gwMvHwbcPSX0qiWCBHcauGhV09iYxEmiMaAMFY+W4E\nv2KiPy4rdIn7TE/LgWXTMjrA2eZL6BXr4hEMuFX1jKjdIrA+JN0gRrQ+bdco\n8kwE\r\n=BMsJ\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n#### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.**\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n**Note: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.**\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n\n**Note: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommended to\n always include it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color)` | Sets the container fill color to the given color for an enabled button.\n`disabled-container-fill-color($color)` | Sets the container fill color to the given color for a disabled button.\n`icon-color($color)` | Sets the icon color to the given color for an enabled button.\n`disabled-icon-color($color)` | Sets the icon color to the given color for a disabled button.\n`ink-color($color)` | Sets the ink color to the given color for an enabled button, and sets the icon color to the given color unless `icon-color` is also used.\n`disabled-ink-color($color)` | Sets the ink color to the given color for a disabled button, and sets the icon color to the given color unless `icon-color` is also used.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color)` | Sets the outline color to the given color for an enabled button.\n`disabled-outline-color($color)` | Sets the outline color to the given color for a disabled button.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web button component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"@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/density":"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/button_8.0.0-canary.d52b165b5.0_1600181691561_0.08280443561795625","host":"s3://npm-registry-packages"}},"8.0.0-canary.a831d4799.0":{"name":"@material/button","version":"8.0.0-canary.a831d4799.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"e2ce8f5d289819d7dfc1bc531aa53fb8d6f00e0f","tarball":"https://registry.npmjs.org/@material/button/-/button-8.0.0-canary.a831d4799.0.tgz","fileCount":26,"integrity":"sha512-2cO61mtTEDksuX49iDokQ2EhfP+NdmUCZxV0TkcmmEps8HrhfvI1bve22mzuHf0RB5H5WWi/ciFqui7OkeOa8Q==","signatures":[{"sig":"MEUCIQCZ+E85SO2AgEAXuGb/Fh2kOUWel8qGZ7XVDUnDxnkLbQIgcSCEj08Q1uOY3vBGxKM4HNTfktcUvTMslz9AABkdoJ0=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":395428,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfYP9WCRA9TVsSAnZWagAA/bQP/RGjYVrb4zryCEOZvDag\nv/KJswdjY3dLRSgE0nRz+Ugsb0OJMg4q1ubS3T/oBRBo3nbmGaAO8cTSYgQU\neAqkz9WLOrviviqLwMiwI6i8BbJV7oLHpSU8BYCCx1EJk+iSLPi2sZ+ruyZK\nvkanxHGFfWE++BBLtet4CNS/vSr8QlXWU1Pr48sEPRNAXAR5Q3wOBc1jfx6X\nN3/E1KyK0pN3H+twIK9rG4rsLKdNHYpZdYhiL5Ts0wEKZihnkQRgax8CoWnT\n8RRnwn+QZURxK6AR01PmGxugdvk8vhk1SV4Rnm2ecx7fdaWQNE/XzC1f4Cb8\nNLjadoFsLrgogjikhFmAOiq0ifRL2b6+/tgYY0jWzj9bCDG+Mry/x3Pmpg+V\nuMVsO8F8lAck4K0qvVRWlIAsbTirqVns97eIniqaDeMMAdHJ4NuJyp7bEeF9\nPjNwBYE1+fjLRUhe5J0CHFQTMJHnEW6RIc3hejoHkm1+xCYijoqbkegyVSYG\nb+0zF0Bp/qDnCCq1YgG8IqYOWATx1GJEIe3GIWUmgQAXEXLifjms75SWwRkD\n00fYViDsgnHVZx+fAarRKjVMdmV6PuiHofuNqt+TvurOhrFblwWxtRDAEQZj\nU5WARTWcuhWWr9TjmaLkyUmws6Gz/whsjg0DPHKD5CKPjNDwFIDOeqVZCOsx\n3EDt\r\n=5qeU\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n#### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.**\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n**Note: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.**\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n\n**Note: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommended to\n always include it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color)` | Sets the container fill color to the given color for an enabled button.\n`disabled-container-fill-color($color)` | Sets the container fill color to the given color for a disabled button.\n`icon-color($color)` | Sets the icon color to the given color for an enabled button.\n`disabled-icon-color($color)` | Sets the icon color to the given color for a disabled button.\n`ink-color($color)` | Sets the ink color to the given color for an enabled button, and sets the icon color to the given color unless `icon-color` is also used.\n`disabled-ink-color($color)` | Sets the ink color to the given color for a disabled button, and sets the icon color to the given color unless `icon-color` is also used.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color)` | Sets the outline color to the given color for an enabled button.\n`disabled-outline-color($color)` | Sets the outline color to the given color for a disabled button.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web button component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"@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/density":"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/button_8.0.0-canary.a831d4799.0_1600192341771_0.6350367378750748","host":"s3://npm-registry-packages"}},"8.0.0-canary.a306aa488.0":{"name":"@material/button","version":"8.0.0-canary.a306aa488.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"b302174640f984e4947c9162c28704b337bab3af","tarball":"https://registry.npmjs.org/@material/button/-/button-8.0.0-canary.a306aa488.0.tgz","fileCount":26,"integrity":"sha512-zw2TUe2fTYx9vaBg2whrgkiRCFE8qSTaptllLUcsP+r6P7bhRt9TZ/55947yCutrToSt9iKALbAcYv/Kzc79Jg==","signatures":[{"sig":"MEQCIHCP8DBbZhbB1lOoOarSL6llVcp5O9Tc0O9QFxGQcsX3AiALpD/agqIY9psJcnVfd4qmx5me1ZwsutCnUWRWRhW/Ow==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":395428,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfYrTlCRA9TVsSAnZWagAA5QMP/0I7bFQiIxpVdYqif9kI\n3hjJ6EIiJxm25bLVVMXsArDMa8j20PeOGV29/jSa6TS4uTOEe1xhGhRD3U4J\n1y7NP3KhsiMl3ypXmP9aS3O0Vgh2DwcST5EZUp9FhXFwHMqzdcg9sxgyoKxy\nQZiqKqZCVr7jzxzvXTvnBIvouh/j18eGliDu9lNop9NkRXPccgavySWLk7cv\n2Ik88swaG048Sy1D8c6iB2APJt9hGaC6YS0D1FM6rM5M+xc1KDY8sdbo58zt\nqz7L11q3ytGzQSh35/vLn5s/4HgyRqHy0y3N3qkDqb915PIWG9J2qtb0MvQr\nm9zNPA3++pR/1ad5ZeR6XrBECogwmxXFe4hFF1610WZbdm715tcQ2tvyZrvm\nB43QPeK4HBK65AtVXLPXGAmQ6h2QClpNDkxV1IT5DHYbDZP5WYAFBWOTEOmk\nFiuNq2raDnEJ940IgPpaAsQCv7vOMeIBiUGdOJ82f2o5vBgIhm9QjQB2zrJf\nFlEYNugV7h3tYsGJWbaKjuEVXKNmQxMnzmsdkKpq4uuOHJrTdRKQQbJL2mjs\nYqwVtLicn2I/SjZOse1PultFKa1zSA2WSnwKMlBx4QRWxHmM7ef6ZUkiT5we\nChxFv2FSBII3Ae3G1vXYpL++83RhZj7CTAD6MzoLlzRtSiOKm+uE0EEK+rmo\nHS0v\r\n=u0Iw\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n#### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.**\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n**Note: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.**\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n\n**Note: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommended to\n always include it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color)` | Sets the container fill color to the given color for an enabled button.\n`disabled-container-fill-color($color)` | Sets the container fill color to the given color for a disabled button.\n`icon-color($color)` | Sets the icon color to the given color for an enabled button.\n`disabled-icon-color($color)` | Sets the icon color to the given color for a disabled button.\n`ink-color($color)` | Sets the ink color to the given color for an enabled button, and sets the icon color to the given color unless `icon-color` is also used.\n`disabled-ink-color($color)` | Sets the ink color to the given color for a disabled button, and sets the icon color to the given color unless `icon-color` is also used.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color)` | Sets the outline color to the given color for an enabled button.\n`disabled-outline-color($color)` | Sets the outline color to the given color for a disabled button.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web button component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"@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/density":"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/button_8.0.0-canary.a306aa488.0_1600304356912_0.4247273838177117","host":"s3://npm-registry-packages"}},"8.0.0-canary.fd608ff66.0":{"name":"@material/button","version":"8.0.0-canary.fd608ff66.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"1a31575587eba42f54fae777f10d853c569a5112","tarball":"https://registry.npmjs.org/@material/button/-/button-8.0.0-canary.fd608ff66.0.tgz","fileCount":26,"integrity":"sha512-vQit+AdyqTOtCZBdUNkC2x4Oh91YemWAj6o7uOLVoeUCkg3KXy4GUyVclVjWntGysfDZP4a8bEaqBBF1gyw4gw==","signatures":[{"sig":"MEQCIAJ4sUTGqXB7LuS0ipjDOodKyhcFAt3H2xt/RY7wkexSAiA+FIlmrNngVtSc/WfYuWSTBnwBrXuUBCMIQZisDXS6hA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":395428,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfY3IHCRA9TVsSAnZWagAAoQ4QAI7Eui41asvpKWiY0YEz\ngUSskaPTxCNFrXKXQSsqtr3buqh3NjjGyecv6Qs1GDNL+UP5pvkxXgWlURyf\nu1gx4snlLqq054FBRgCr61xgM+oYXlK9euNguv+KpPXySVvD+wYsqNEii3oO\n664FZpD5gp9DYabNMR0Ks6eoKitbg/EmjgaO4gEfThcVvsUIvDr+z5ICMfmS\n3+7ikzlC7PHQ1KkIqcIbVDqG/BnSkMu/jqQxi5CwFEgVWYt+wqI8oyRjc8Cp\nw8wh4w3OMyKOrNNxuoZAn8DvqekLSSvNIRuNH1iJ75ZAk8/kMRmWHjCmwYaB\neAyOB/WhxVL4iWurIw62uE73DnCfU2UUbI17JpoiL+fb7wIvAl5C21dAY1vN\nsiv1Wt7KjzwIs7HzT4U458XuszWpN2ZvLn4xqDxfnnuRcLU2R7FZjlBmtPqO\ngnzbh4bFknRz16Qrpk2JSQidFvLcI/axcQEqtH5CPDSKysgYev12jenev3jA\nB2r2rRgtcOKQOImqCkVvekYRlV7vX06PVVpm+4hmt4bqQAdfQYAq8os9pGn0\nPSR8WSNC6H1QI6o/Xoq+QEeOH0WaJc4DP3qDFmMjwOfkb+9YJb6fSuEYEmTh\ng5zMosglc1L4dpJ3s+OFTDTrzsL1Cgk/p265r5y25n/+f7asmng+lxemAk+6\nVjzS\r\n=tFgI\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n#### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.**\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n**Note: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.**\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n\n**Note: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommended to\n always include it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color)` | Sets the container fill color to the given color for an enabled button.\n`disabled-container-fill-color($color)` | Sets the container fill color to the given color for a disabled button.\n`icon-color($color)` | Sets the icon color to the given color for an enabled button.\n`disabled-icon-color($color)` | Sets the icon color to the given color for a disabled button.\n`ink-color($color)` | Sets the ink color to the given color for an enabled button, and sets the icon color to the given color unless `icon-color` is also used.\n`disabled-ink-color($color)` | Sets the ink color to the given color for a disabled button, and sets the icon color to the given color unless `icon-color` is also used.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color)` | Sets the outline color to the given color for an enabled button.\n`disabled-outline-color($color)` | Sets the outline color to the given color for a disabled button.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web button component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"@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/density":"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/button_8.0.0-canary.fd608ff66.0_1600352775421_0.8798072699253208","host":"s3://npm-registry-packages"}},"8.0.0-canary.3e435ba57.0":{"name":"@material/button","version":"8.0.0-canary.3e435ba57.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"d1d6643c96a7fbcc35eff610d2501be31d8dfdb3","tarball":"https://registry.npmjs.org/@material/button/-/button-8.0.0-canary.3e435ba57.0.tgz","fileCount":26,"integrity":"sha512-IgewHe/9C3a5ixOZP+pYSBkFai6oBkStdTWSu70g0QXncXhjSuAaoScsmoa03wdvGLfr6Icr9Nohwy1ZeO2TCw==","signatures":[{"sig":"MEUCIGJuYnABzqVsBCV6MAAy0U/eXln0Q4MFNbIXnJnEaiIWAiEA5izf/w0dlvHUqIpwsQiU4g5dsE+ReWD8h+sI6OFu08g=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":395428,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfY3YXCRA9TVsSAnZWagAA9kMP/AoqgPjtBHT3FZUW4fYl\nqsqNsrONFsV+dLhAsM63EgsTbgvtU4TkC6ooONM1C1vUnx66IvvXRSBctg46\nhaz+GFf3UcHQQC5snOqQNFNKq/mYc+NqdhI8CKmoykQbVtnBYtBJlkqRlA37\nHJagJt6N9Az7XQJxzNA8h+aeyqC7AFXLFkvfS62NdGSsbx19iuaC56HcFZur\n2nq9R8hed06NjooBlf3sRx16Z7y40/fWTdXYnUeYPJgmz0Rua7r+twxMlaA+\n0sTWt+/iVOuked7YRkWGHxgdCnVKwkXo07plJMG4KhA6+tjB0ITL5JiFangb\n2m8g51Bd/41VTh8vknJAZrxlr9puIxOhpIyJFtaE8uppe7ZqqHRBLyUwf0QE\nxMeZp85RvHSI3nIK3rPGPIj22Fp5B8EsHgP53cHOEMpmNNtG/I1Q6iT7so8z\n3pa92OBuLp+ZgCq8gCpo6l1DPE87ybhoZDwo7y1zuJhnem/K0+nQhqUuXrSr\n8mIriasKXx2ZYYZhQ822W1iwRBBbTcxZd16JkSL3sS7YjdyCiZWXhEAGO/nz\nVrWTas0aCibkr2kQBvKXTH4VVwxo1SpivYQcTvDIowDjDaUh91Bj34MRgkdN\nUQzbc9JJvl+tPaVgcMO5ojpokn5OkFdFZpl/LQULee6mSXgMsqtrwWC3KG+o\n6EQY\r\n=Uu6j\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n#### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.**\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n**Note: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.**\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n\n**Note: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommended to\n always include it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color)` | Sets the container fill color to the given color for an enabled button.\n`disabled-container-fill-color($color)` | Sets the container fill color to the given color for a disabled button.\n`icon-color($color)` | Sets the icon color to the given color for an enabled button.\n`disabled-icon-color($color)` | Sets the icon color to the given color for a disabled button.\n`ink-color($color)` | Sets the ink color to the given color for an enabled button, and sets the icon color to the given color unless `icon-color` is also used.\n`disabled-ink-color($color)` | Sets the ink color to the given color for a disabled button, and sets the icon color to the given color unless `icon-color` is also used.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color)` | Sets the outline color to the given color for an enabled button.\n`disabled-outline-color($color)` | Sets the outline color to the given color for a disabled button.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web button component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"@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/density":"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/button_8.0.0-canary.3e435ba57.0_1600353814410_0.3103575325504315","host":"s3://npm-registry-packages"}},"8.0.0-canary.c250ec52a.0":{"name":"@material/button","version":"8.0.0-canary.c250ec52a.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"cdb48a58e563087591e44e9eef69a46633e6d45f","tarball":"https://registry.npmjs.org/@material/button/-/button-8.0.0-canary.c250ec52a.0.tgz","fileCount":26,"integrity":"sha512-TkcTdYdFPEFsbsXoiFHoZ4q3U6RnNBGed6bOkuP5JrbSrYmeZrzRqPQAq33ln8hTIAZ9cTLB801WKlLJohrjoA==","signatures":[{"sig":"MEUCICxUmStbQwOEZlOYONVIlD1MJn2rmO/CczibMvtcItFrAiEA0Uybom6fvxvXApiBclCSoGZ7B49IdTuDn3ARDbUHxwM=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":395526,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfY8LWCRA9TVsSAnZWagAAIjgP/3OUs7oZHu+p7ZoxZI18\n1qAHjM11LlMGIQNSLkp2zf+h1aiI//3d0lXvlGQvmrbrO9ZJFt4P1IT9XB46\nhYHztq8RmBc0/NjRLYo8Ai7U/Lek4nfzTAQdYGR2dZsRhXbnXhpLCX3oegKe\nqs3AhDWN5mnUwLWHR3Yi3jHR53cgkwDPeWto2sAj9KSwyZpOWN/YxCHKA1Nx\nXV6tFKic4Z7tWQTcWTFnRKMUrnMknm5+nVGcqTEWIYiuqevqZOPr70WsBBtl\nilucb9Gpxk1AmJka9+Jo7GBQfobkVI+Mls0EKhKylsw6phKXXw06tGpED0Yv\n/rBxRd2YojbV5MQ8Gh4yzDq95MnGyHz2mZHYUfLgY+SGXY59arhrlPjJh+V+\nvjRsdLQCwCzFojRbDLUHuFYzFc/9t9X5nRB2XrwN2GCwRuiDAP0Oe0Tk0Dgs\nwRmfNthHvcP4ef9wxioqCBV9WUPTaQHh3Nr+NeJgZmPi3vVACSWwLa4Ar3wV\n9/bNhmjL9i0kvFOBL8E3YbA48fu8FLFQqccOLx8vATr3UADDW+AN25fBT2N3\nMteM79TLuMl4OF/Bcw2Swcx+FcUTyJparuqXqQQmoJNL8bMzL/kWq3B3R+aB\n234vOizNVbA0S2WMy2Q+GA/lmajhfgKTJK7j+M8osFntgJDbCfae8LDViZO7\n4bUg\r\n=dQvj\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n#### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.**\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n**Note: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.**\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n\n**Note: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommended to\n always include it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color)` | Sets the container fill color to the given color for an enabled button.\n`disabled-container-fill-color($color)` | Sets the container fill color to the given color for a disabled button.\n`icon-color($color)` | Sets the icon color to the given color for an enabled button.\n`disabled-icon-color($color)` | Sets the icon color to the given color for a disabled button.\n`ink-color($color)` | Sets the ink color to the given color for an enabled button, and sets the icon color to the given color unless `icon-color` is also used.\n`disabled-ink-color($color)` | Sets the ink color to the given color for a disabled button, and sets the icon color to the given color unless `icon-color` is also used.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color)` | Sets the outline color to the given color for an enabled button.\n`disabled-outline-color($color)` | Sets the outline color to the given color for a disabled button.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web button component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"@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/density":"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/button_8.0.0-canary.c250ec52a.0_1600373461981_0.09774997327670065","host":"s3://npm-registry-packages"}},"8.0.0-canary.e34e411b1.0":{"name":"@material/button","version":"8.0.0-canary.e34e411b1.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"86aabceee0e790263b91731c83063017255f8928","tarball":"https://registry.npmjs.org/@material/button/-/button-8.0.0-canary.e34e411b1.0.tgz","fileCount":26,"integrity":"sha512-YvOOKP5EEh025D79i+XZhLNRxb00TZi/t5GeKGZ8zIULGBvT/jDBJXfyiBHmfYgdMSQvJnAJTp5Sl7gBqhV1Lg==","signatures":[{"sig":"MEYCIQCOcmNB+32oMSwzQtux7DevRUeLeKeaA7FTuLv2HRko2wIhANmcn8FUgGoCzoKi6bQtd+WeV5O4uHpdGoA2MWaaAmGC","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":395526,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfY8SOCRA9TVsSAnZWagAAvisP/1GGxrx6n4t5hA4/5rgP\nS5H7VDJB3lrG+x8kE9rUktRD7dH+jt00eenYG7vdwcVBQ6KwdRNb+5FaVUtg\nwxK2tiHVKqadQWlevI/lADg3lFxuWUK+aD8Pu5FJ7Q06avPwRldJmcGLL3Xu\nyLHKPkz1Hv1OWwujs8IcjDnN7EatupvAeNSLghC3RHArMi+GGL+JvfddXrD3\nHnZ5Up3PCpfzXsUyquJZjP180YmzQg0YCRziFI2uEgnt+iZ1LMAszEokG0Wf\nK1PjiLWEh291QBMamF+J/tke2ZN2TqbBCG6k62nUasQq52Iy1wKclU5gmPcA\nxoXY5bHsvDrh7OuFSblKDOWudMqg+0zSgfPCgwdL73EybfZu1tydnH44vtKN\nXd8o83+jtt06c6os70LfFcxrlyfiGn9luvLmbO5ybd5BiqMw9T26HmC1gUg9\nGqpAsTwIg2Bqo/EQL6KRn+EhvJ4sXY2J+ybevM/UsSDih13ri1x24UN8ZR5k\n4r4goivjU1udYofTZk1idWsptS95fJq0nHW5qxR3iZhgNz+vYdttDn4tnAF3\nL/SDceQUsptteD1Pg7QzzNP3AFTAVQdQU/1yb96kTyqEUWxAD+wI4AfFiyPV\nvm0vTuUmqEKDFRF12MEXwP6qHPcsK/6xEvBg8f6gA3MOq1dstJpVAxc7lVL4\ncrMO\r\n=bQS0\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n#### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.**\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n**Note: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.**\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n\n**Note: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommended to\n always include it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color)` | Sets the container fill color to the given color for an enabled button.\n`disabled-container-fill-color($color)` | Sets the container fill color to the given color for a disabled button.\n`icon-color($color)` | Sets the icon color to the given color for an enabled button.\n`disabled-icon-color($color)` | Sets the icon color to the given color for a disabled button.\n`ink-color($color)` | Sets the ink color to the given color for an enabled button, and sets the icon color to the given color unless `icon-color` is also used.\n`disabled-ink-color($color)` | Sets the ink color to the given color for a disabled button, and sets the icon color to the given color unless `icon-color` is also used.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color)` | Sets the outline color to the given color for an enabled button.\n`disabled-outline-color($color)` | Sets the outline color to the given color for a disabled button.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web button component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"@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/density":"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/button_8.0.0-canary.e34e411b1.0_1600373902104_0.24873249884563164","host":"s3://npm-registry-packages"}},"8.0.0-canary.4e9343929.0":{"name":"@material/button","version":"8.0.0-canary.4e9343929.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"9912d8d2a553c5fbc4730712932da91152b4c4ee","tarball":"https://registry.npmjs.org/@material/button/-/button-8.0.0-canary.4e9343929.0.tgz","fileCount":26,"integrity":"sha512-DAWtpogSCaFIwXQ/Ti6DcysmS3cwRjxnaKBNBMGPGH4AQQDtdUQelCdtY/pg/0O22Tqss1ny48pDnGy+Mn3XQA==","signatures":[{"sig":"MEQCIDy2jjp/ZFZcffcJ64tThAYeVcMDqIkXXfvURZjwUybqAiBBOzH7TER8fVNNcNsFTw9kq9lXv7NT1oWc/mziwGuGmg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":395526,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfY8p8CRA9TVsSAnZWagAAQJEQAI50X2BpqpWU8+70w86B\nTvkcBGgCa6eIcWfBNcN9JQWY1gljjEq7R0QpygQ5sdwnFno0QquEEAcxakr9\nJ0J5FPODzES3u/So8rBnpocaVnh8FjAbDsZEAmbcOIY3oliSrew38s2X1BuE\nNNTPkpHxGMFBGMJK5mminshv6W8H6aqLiSUAkNVx+KR/7Nl3wyELB4qAo7/H\nRtF9/R71O50dV1gkUbQy1c93/BHNeIJEWcFyLFVT5MwmZSEo4m5F4l5Qkkd/\nSHHp386iMFnFD4IYMkq7MehLXREB1URaYCLtcxO4XWnlU8kJOZJjtfFBbT8H\nMQm/pvwPxDEPCmKT+hqW8Wg8fszfh8O6D+d/aFQXvbFKERzVgO38n3kB8lsc\niAj8vDEa83N5uqMzcVqsTTUjXZcJWKzxYRi3/p1s4I80ZRzdA3bB9HB5JywI\njwbOLVdDqNOP+VJ/ztBx23Sivn9P2aWAxEa/SpKylD1skJvjfzTLbvm69kYP\nwMKAUNtouNnbwNY2TI9b+xHW+cG3dnQf6nTVa/+vDX8qgRxQcYssuhqmXP4v\n3rrJtFPIq1hvsxSXKKuH60t993ICf7ffzv5anv/89AiHQeH8YLy+R+lMKwy3\n1CmBQmKDmEsLw5DGsQF74wYamS0CyDYecBVcPqJ5/1vydZVqVxGy0dlmPUO1\niLmE\r\n=O9Vs\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n#### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.**\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n**Note: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.**\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n\n**Note: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommended to\n always include it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color)` | Sets the container fill color to the given color for an enabled button.\n`disabled-container-fill-color($color)` | Sets the container fill color to the given color for a disabled button.\n`icon-color($color)` | Sets the icon color to the given color for an enabled button.\n`disabled-icon-color($color)` | Sets the icon color to the given color for a disabled button.\n`ink-color($color)` | Sets the ink color to the given color for an enabled button, and sets the icon color to the given color unless `icon-color` is also used.\n`disabled-ink-color($color)` | Sets the ink color to the given color for a disabled button, and sets the icon color to the given color unless `icon-color` is also used.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color)` | Sets the outline color to the given color for an enabled button.\n`disabled-outline-color($color)` | Sets the outline color to the given color for a disabled button.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web button component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"@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/density":"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/button_8.0.0-canary.4e9343929.0_1600375419484_0.07186550742834452","host":"s3://npm-registry-packages"}},"8.0.0-canary.4e5c350c2.0":{"name":"@material/button","version":"8.0.0-canary.4e5c350c2.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"52058065b08181c239a8dc9db280dc947806d608","tarball":"https://registry.npmjs.org/@material/button/-/button-8.0.0-canary.4e5c350c2.0.tgz","fileCount":26,"integrity":"sha512-xo7OFX94sKNTylvGhCXYAmTUezLJDBFePDpor1s966BUNfEN2lwEP0R0crVg2/PXNcDSU+d9Qh828AmlaN/VIQ==","signatures":[{"sig":"MEUCIFjBXa0djOFf6L319icveePdf/3ykFuRBPrD+FEyDQHkAiEApExKNjJM4YbCpeCTHcyZwwUFBQguP3gl1g6esnYez9s=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":395526,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfaRfACRA9TVsSAnZWagAAfd8P/0zMcaw7bdepwxgY0PQB\nA5PhrCgqERcmpxaPxV12VEu+MSm7yPQNJN4JtfGqf22aLKAOPSg11eDdGAnL\nLJ/+tz8L0pTh9xVx1jem0LyVUYWMqCkdVOI0CuIzcE3EZLNjxYEO/BNcTPeD\ntpi5DEAbAO93VdJsnjRuWftTPLjX0gLtvznmndO1jB1xe1OxIFcxnDpbT9+m\nnb66IISoSbE1zKYYLXVFB8yyJj+NUVqr+cTJi8Lk+ESJ959E4TjGecZIZqqn\nUxz8+VlK0YUDpejO/e3GQMSeVfzYSVBXICNv/GSpI3thRYizN6+9NxSbSCs/\nbfbIrHXlcjno1D9z5Wyd6thNYQzwkFKz3BcykodR6UpAvtLVVRtoTfYasi/N\nnbhpvkxwpo8yY9qernOIEsQnQPkGCwcj6BRwIgopX0d87E2KOuq2agJXKyBE\neB5dDJWKSRNexsArv8iudQOIcYMS5cs87aeelVhwYBsBN8+xNSSV2O7b15Qb\no7OXPxNSz7n3i/uFwP5/r9OQLLpvPO+mRlJvvLrMqPagDlX8npjc7Y+TiFKc\nIjps/IPtrIlJXIgMZEjeWRsdztKODnlOz1Zlc/DX3Nw0sHkq39XXpe6d0DQ1\nU4+r8JE7DAfa7Td98KEAzCh8hYgCgj+M4osgSdsrrDSrCXM6GD6JEloyxppX\n+k/g\r\n=/dgF\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n#### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.**\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n**Note: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.**\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n\n**Note: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommended to\n always include it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color)` | Sets the container fill color to the given color for an enabled button.\n`disabled-container-fill-color($color)` | Sets the container fill color to the given color for a disabled button.\n`icon-color($color)` | Sets the icon color to the given color for an enabled button.\n`disabled-icon-color($color)` | Sets the icon color to the given color for a disabled button.\n`ink-color($color)` | Sets the ink color to the given color for an enabled button, and sets the icon color to the given color unless `icon-color` is also used.\n`disabled-ink-color($color)` | Sets the ink color to the given color for a disabled button, and sets the icon color to the given color unless `icon-color` is also used.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color)` | Sets the outline color to the given color for an enabled button.\n`disabled-outline-color($color)` | Sets the outline color to the given color for a disabled button.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web button component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"@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/density":"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/button_8.0.0-canary.4e5c350c2.0_1600722879707_0.029859072665882058","host":"s3://npm-registry-packages"}},"8.0.0-canary.16c563ef7.0":{"name":"@material/button","version":"8.0.0-canary.16c563ef7.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"65bfe6c09008568298c4c8971cd918e31dd0582c","tarball":"https://registry.npmjs.org/@material/button/-/button-8.0.0-canary.16c563ef7.0.tgz","fileCount":26,"integrity":"sha512-e78KDAMr2R7WY37OrxXh2VzuET9ZzgUAlM0sPIRUOrx5haZ1R6WUISBPuVdbnpALY92eKkzfA6rmvECpAPIwuw==","signatures":[{"sig":"MEQCIEc+Y6ALEViFDoh7K1kuarWE99BC+5wzmh3cjMl07JgcAiAIakMuJtNSa3Dy/EdwltSBdOEeZC+owGM9KGNpXC7MhA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":395526,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfalSpCRA9TVsSAnZWagAA+BUQAItqIo1LKxHEd3DHcTtk\nfl1aHDcYCVxSSzdrN5mM6iSY5PYavy9tW8yKs6ERmFtW6S2DJSQJcpaEhnAm\nxcvvZXXH25bEhNdQPXl101vv/B4CrjO3OtsEMe3WZO1M88+TzPja2FqCGx2p\n5bXkhJG2tDFTq8DIBCPHxK45ux3F3oSFuEigWTrpiXmG493wyTccBtNofVzJ\nsld85f10uKgQPs7NUIwrkBLMBqQ8vmr4b43adTIhRGAl30GGeOxcuQ6SP4Dz\nP4xa5QRTDMDTPBONIJnn9MgM29pIKoLYExcvtkyOBGH/w5xilA0pyX1ipRtW\nmrgcIpy8tFt2x8Lb9VBF1tmcD5dDoFdJFuQpMiDqnkFZdcgW9ZhCigdS6Xol\nVLNqLnimGDrLaxzFpswytkNW+lr/Y6tImQSL2uL5diDeGaEZlyk8gKaww2RD\nNyqR73OBLPqCBXn57ywXI2f+oLF00B2/WPnzk+s8z7LxNjTt4U+AY8yEHJfR\nNII9GMP7VBkghg7G61tPxVsHJGC+UFREVItmbelfUcK0DVDqlqBW0+mb9GV0\nZpD6gfygNlrPVgGD/h5SJJBmq8+d+2aLLxv/KPYKxdQLSFSdYhItNzWU9xnz\nRe9XkpBR9baj3v6KUrNmYbYdZfH62l48t38zze6X9gNAlL+6wFKzSFE9ncaX\nxh2H\r\n=stGl\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n#### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.**\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n**Note: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.**\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n\n**Note: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommended to\n always include it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color)` | Sets the container fill color to the given color for an enabled button.\n`disabled-container-fill-color($color)` | Sets the container fill color to the given color for a disabled button.\n`icon-color($color)` | Sets the icon color to the given color for an enabled button.\n`disabled-icon-color($color)` | Sets the icon color to the given color for a disabled button.\n`ink-color($color)` | Sets the ink color to the given color for an enabled button, and sets the icon color to the given color unless `icon-color` is also used.\n`disabled-ink-color($color)` | Sets the ink color to the given color for a disabled button, and sets the icon color to the given color unless `icon-color` is also used.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color)` | Sets the outline color to the given color for an enabled button.\n`disabled-outline-color($color)` | Sets the outline color to the given color for a disabled button.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web button component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"@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/density":"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/button_8.0.0-canary.16c563ef7.0_1600804008577_0.1956238485963253","host":"s3://npm-registry-packages"}},"8.0.0-canary.fd8af3d43.0":{"name":"@material/button","version":"8.0.0-canary.fd8af3d43.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"70a8e599ffc7e97296008ebb8c5c689327057f66","tarball":"https://registry.npmjs.org/@material/button/-/button-8.0.0-canary.fd8af3d43.0.tgz","fileCount":26,"integrity":"sha512-EpwFGlILiTYRAZXpuNke1r9C3ZKYTsRhBXfsN7zztx9mCDS7obHsR7QMukAnsCgknovGNS6tvy7MIb+z4rjR4Q==","signatures":[{"sig":"MEUCIQCbRBoxVRwFJMhK477K2NcTY3aX4OpUweauas3GSfL5nAIgH1greqZ/cMbU30UA39z/+TO2Nu4zvapKEvbRA+xsoBE=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":395526,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfa6LjCRA9TVsSAnZWagAALnoP/0Z4rDmGPPLejoDfzXRc\nLueHhumx6eVeVoQbjiwvMSA2RSMC0GV1MDROJhmkkpTtflt7FiEjqo3sc7+U\nsqBz7A3RCIfCm9jSnGu5icb48A5FvjkgIRNlFfOPzrii1TzVLi6MmEEg6YQ9\nzdUi5t8Fum1Oi4VZa+dho5Gxr115hM1DHutO56u7RfA+f1y9pGQriw5h89nW\n5Av6nI6Hxh+Qght9fvu7OAQptsBeqzGmiI2a30w3eNtFQcYCGBa0OcJilWMF\nIQHQh3CSwCLxe+PDHG6RpZ+gjqZch0HSZDifrLeRk19JXS9B8Xoch4aAqMD+\nDzlVihdMkvq0B6BJrL4XGIQEStuYVjzzE848KySArZq4g3xDjHFf2Waz+ORL\ngqaf50/ny6kilVAe5iofJfI89n1hMNqjvAr1j3AW+vBTwXfZcPA9QTHZ6eUa\nZD8uYmva7AVM2NGEznoGTUVPacdE6VmoAOS69IqFqSKPNP4MuVKktJjrHC0g\n7qOgeDF+wa2NjR0xIydUQ01OmVFf9FUHV5S7ZkbO4FIvH0ypRRzcP0d03//m\n2MIa0H3pq/wAxhuq/KREq6f0YN3es8sLmcnmiLeN7ymJq3/bz5ZyHRIRDIUB\nruA4kxf9fjX4n9tRCfiJDd5O35+1ZLEQzd9wIDNx+ly0v4CWxl1ZEvytYTx1\nWxp+\r\n=CFmH\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n#### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.**\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n**Note: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.**\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n\n**Note: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommended to\n always include it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color)` | Sets the container fill color to the given color for an enabled button.\n`disabled-container-fill-color($color)` | Sets the container fill color to the given color for a disabled button.\n`icon-color($color)` | Sets the icon color to the given color for an enabled button.\n`disabled-icon-color($color)` | Sets the icon color to the given color for a disabled button.\n`ink-color($color)` | Sets the ink color to the given color for an enabled button, and sets the icon color to the given color unless `icon-color` is also used.\n`disabled-ink-color($color)` | Sets the ink color to the given color for a disabled button, and sets the icon color to the given color unless `icon-color` is also used.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color)` | Sets the outline color to the given color for an enabled button.\n`disabled-outline-color($color)` | Sets the outline color to the given color for a disabled button.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web button component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"@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/density":"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/button_8.0.0-canary.fd8af3d43.0_1600889570601_0.5054438003122317","host":"s3://npm-registry-packages"}},"8.0.0-canary.d4cd83a85.0":{"name":"@material/button","version":"8.0.0-canary.d4cd83a85.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"8174338b05cf1ef1b234eb2295e3b8c67d0bcd08","tarball":"https://registry.npmjs.org/@material/button/-/button-8.0.0-canary.d4cd83a85.0.tgz","fileCount":26,"integrity":"sha512-YVazFI3b0shsCX1Sg4crFfOJY77YN68jjQ924w86kXZLm78YZ6uzOZx7r7J0jvFTqUlErmx7zdeacVF26TFZGQ==","signatures":[{"sig":"MEQCIAVrVVGTUAMoh8VIUb5DAb/zcosjnmslx2XnHW5w6b8MAiAmVEBCZ+2UhVE5F2c9iXksjT0yXHI/3pyeJVsdNUntlA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":395526,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfbTt/CRA9TVsSAnZWagAAWbwP/0Rzin5N88byuNZ1kxzP\nz1w7m5whSoUJn4vN6FfadpZHxh2yxf3iYHyz5lPebnOUP4smgXsXUl3E5I4D\n9cADXZv/R9Y/ij/5Cjxvy5GCumgdW9zrtayFE5OnRjjwb6nWAoKpj/5kC0kP\n4fceN+BgRuqzbdtSi7W2ZvMel7DKEcVfdS4EXVoSju1gftvQCaHYaRvJHMC0\nQQTSf4wcjxsVhuYZ4uLtaSpqLcjHibB3KTn5arzlPe4AdRDIi2k/Ofac2vyi\n4CRQCgYHJ2qBG7OldBQl/PWcwy3uvvQUDTg2agSJLQVRPX9CNJwpTftIdGoh\nimWxUMceeRKMDawTEFQZDn55U1mvFdDgaUTToZXCdfTIERZgTegY2PQO86Hc\nXZYqutx55SVFPaCF+SoPr9rlGG3bKHFfKjUijLFn/jiBelbnXoCnH9fA9wmF\nSTpk+zP/cfPHlwRZF/wC4ZQVruHsn/5i/nZiOs7KNbnWn3hnV0zoa94U5nco\nQ6EVvdpx0bxNi4h981EQOdxwq5GvxHUjiq9Si5egD2jATjJ5Mou6mf4Ht8JG\nhxHADtB7+T2JEs6bCCz//biDHTWbVBRQVTmW5/7y8psTPc93N1lyNZFDA37k\nTwA0asTLsBdkP88i5LYMCnVnD2vyChZ8giOH2oAum8u9B58ih6NE8+oo3FHp\nj7zp\r\n=xwI9\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n#### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.**\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n**Note: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.**\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n\n**Note: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommended to\n always include it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color)` | Sets the container fill color to the given color for an enabled button.\n`disabled-container-fill-color($color)` | Sets the container fill color to the given color for a disabled button.\n`icon-color($color)` | Sets the icon color to the given color for an enabled button.\n`disabled-icon-color($color)` | Sets the icon color to the given color for a disabled button.\n`ink-color($color)` | Sets the ink color to the given color for an enabled button, and sets the icon color to the given color unless `icon-color` is also used.\n`disabled-ink-color($color)` | Sets the ink color to the given color for a disabled button, and sets the icon color to the given color unless `icon-color` is also used.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color)` | Sets the outline color to the given color for an enabled button.\n`disabled-outline-color($color)` | Sets the outline color to the given color for a disabled button.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","description":"The Material Components for the web button component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.1","dependencies":{"@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/density":"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/button_8.0.0-canary.d4cd83a85.0_1600994174623_0.33189606129768556","host":"s3://npm-registry-packages"}},"8.0.0-canary.199aecdfb.0":{"name":"@material/button","version":"8.0.0-canary.199aecdfb.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"106bad798e08896c58c0ea0faa671aa832c7638c","tarball":"https://registry.npmjs.org/@material/button/-/button-8.0.0-canary.199aecdfb.0.tgz","fileCount":26,"integrity":"sha512-hzOTcKhYPnvU6gZAze5wnFXbJnLpc0CSBo97ZSnK1yb41H4o0GklozbveWZ9G50Y8/wJ1PVH5/eZIQfzq7qzmQ==","signatures":[{"sig":"MEYCIQCULBGyecwQBwO/hex9sT4SYMCmxScynEafCyMJe26UIgIhAJK4c3WSmMk0IlYAK0rtlMtRmBg+Vyt2EKBikFHuCOC+","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":395526,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfbhIYCRA9TVsSAnZWagAAGe8P/3CwK+YoxTGjDerbuHe7\nMkBKl64vm3o7p2bs1Tz/BtD9hqbQsHPUaJ/F7YhkXdJbIaZdjtzYHJC83JVO\n71o/nFZTNhZQ60RhblK1WX9UB63Pmf7LZ6HCxEm7kLV4EhXkpAODN6yT1u+R\nItlYMWOrekvr9+aN6mFpgycJa0N8mqcClRNjVr+Y5zWiwitRILcHIvwD7DSV\ngRx1FeCf4bNCpVZ4yu+CRiVutctPO0krLrWyXPPYakDNOZCNROuPPiXr2dkC\nyLMpO0olk2XEMpGAlX0FoUY0aVwkhW9iBE3Cl7Hw4yIiJCHtZCsIMhZNHEWT\nnJx6w16DZQr9tcoQbqKTXMcyiegoDO816iCBAp4XERTwMLzM+Rifjkr1rcag\n1Tj15/pBzcbOh6PjZEpQPC1TvXWrB23QdWqjn4+y00i5BeXMHfPW2eNmdUce\nqTmh2ohgQGNNJTK6MRjiUiIzr6QijQ++tXF4Qj+o6kllcD1Ku5+ZtK0W4b0B\nHrhBvlYWrryDQv/W2ZmuPVbgAMFNmBfZ7xSIUGZmSfVoqmDnDTM9XBQO7Qov\nkmJh0Drcdg60F0Rlu4SCkzq2XVcxQYOWlP2ygzkHnZN+3boeu0eD0Wqzulee\nzN32E3zhDd6HdpF3YudAQvdhHkldyblyncdN1DunBxhhgbcKQWLopmgjOHFH\nF0xK\r\n=lirW\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n#### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.**\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n**Note: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.**\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n\n**Note: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommended to\n always include it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color)` | Sets the container fill color to the given color for an enabled button.\n`disabled-container-fill-color($color)` | Sets the container fill color to the given color for a disabled button.\n`icon-color($color)` | Sets the icon color to the given color for an enabled button.\n`disabled-icon-color($color)` | Sets the icon color to the given color for a disabled button.\n`ink-color($color)` | Sets the ink color to the given color for an enabled button, and sets the icon color to the given color unless `icon-color` is also used.\n`disabled-ink-color($color)` | Sets the ink color to the given color for a disabled button, and sets the icon color to the given color unless `icon-color` is also used.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color)` | Sets the outline color to the given color for an enabled button.\n`disabled-outline-color($color)` | Sets the outline color to the given color for a disabled button.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","description":"The Material Components for the web button component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.1","dependencies":{"@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/density":"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/button_8.0.0-canary.199aecdfb.0_1601049111678_0.5566006143590112","host":"s3://npm-registry-packages"}},"8.0.0-canary.38ef4501f.0":{"name":"@material/button","version":"8.0.0-canary.38ef4501f.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"88a06c21ec8a52087f838bf025c61231a128e6e4","tarball":"https://registry.npmjs.org/@material/button/-/button-8.0.0-canary.38ef4501f.0.tgz","fileCount":26,"integrity":"sha512-0BUKua6+RCWwgrkcHzhZJvOdA+hyFv/szsflJNfMEW4+bu3ypDY56XALxo/kFr7mcdw6jjzC4nSssPnzBfPuxA==","signatures":[{"sig":"MEQCID4TlkJKz6a5TDlkxX85b6JQYPzDRObdfK0o9dxuAQcdAiB4Bydk3wVJZzrQa49Qk2ZRJh12sjQwj6eGbv+8d1b+rw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":395526,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfdM2CCRA9TVsSAnZWagAAnt0P/AnCgmt44xEmNdWDdnrD\npex2nLvVzQnfeBAlN5MAcUUsbCWJWvG1WKPLlJydaSxlBXK/3H44W1IvCFDB\nv9zb2zn2FvumNsHV0ZQUcwN8+xYJN2sUBiRmXUeS1WN4wb5rpzoODAZznHc1\nFOqCW6i7/vGgwgPrGcQYYm5tSkexkW+5aqay3Ua62glKuo6+EKx44FA+Kigq\nUY0sR2YQUjFwr44006iO7641HRI10QLwvngoTFlZc319L0Gp8KS8UOuuV14x\nHvM1cciYbj18hVoDYdPRhAlSZEt1VX21BnaZtBfliHAi+7UlKAIukhRchReu\nNX2ovhDnyCl8sp4fUC0Q5oAu1V1PsAnEw8eJyrWPFR36ebW2xJZ9+cnI7kPL\nVBw50IDpl/H2GYQUUbF0zQFOlxCcjpFXuPouUiOmxYhh50qrEyjuORhAxYcQ\nauU0/ysXL1Pfk7wSmbGGT6VeXdaa4X1B99uNAPML2fegYQmONqXLdts0+F6b\n1P/Xt4NVubTCxg/qvsAX5v1KyyhX9UO8yGnm6WY2jhVlzB+JeFYDfk/B+CIc\ndHOiIjLwmCMtJdvxFGaROZ9XFy265Sa67f04NUzP85xGq2lM8YSzSbgd6ArY\n1cuQydJ8gBvqsClfPx/4UfkfdWyOsfDk/l+WSkxSmB8PJzp5KGwbzYjZq4AF\nwLHH\r\n=Um9P\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n#### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.**\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n**Note: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.**\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n\n**Note: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommended to\n always include it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color)` | Sets the container fill color to the given color for an enabled button.\n`disabled-container-fill-color($color)` | Sets the container fill color to the given color for a disabled button.\n`icon-color($color)` | Sets the icon color to the given color for an enabled button.\n`disabled-icon-color($color)` | Sets the icon color to the given color for a disabled button.\n`ink-color($color)` | Sets the ink color to the given color for an enabled button, and sets the icon color to the given color unless `icon-color` is also used.\n`disabled-ink-color($color)` | Sets the ink color to the given color for a disabled button, and sets the icon color to the given color unless `icon-color` is also used.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color)` | Sets the outline color to the given color for an enabled button.\n`disabled-outline-color($color)` | Sets the outline color to the given color for a disabled button.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","description":"The Material Components for the web button component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.1","dependencies":{"@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/density":"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/button_8.0.0-canary.38ef4501f.0_1601490305820_0.2834880800978403","host":"s3://npm-registry-packages"}},"8.0.0-canary.774dcfc8e.0":{"name":"@material/button","version":"8.0.0-canary.774dcfc8e.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"778298eeb48f4bda767283ac35c45186beec9ac0","tarball":"https://registry.npmjs.org/@material/button/-/button-8.0.0-canary.774dcfc8e.0.tgz","fileCount":26,"integrity":"sha512-zwz9BNVJitc7sQqSErRcrKnPexnvS4s0imkBD0DNnwzus1XYHDb750YRHZr65rFWb1j1Mc6DNHPj2vNqsF7Yhw==","signatures":[{"sig":"MEUCIAwgdMlIcfwpwgOHcNDPot29Ir5/H1imXfcmJOBSW/owAiEA97RsEx3MQHfN51ENUfsms3HoAMcynVZB0gE9AAlFL/U=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":395526,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfdadjCRA9TVsSAnZWagAAGAwQAIRjxe4/Z8cQrkCg4s/8\n6C6f846L9Zvi6hjGByuRfnstnxD9mM5q0D+nnAriGZk+rL0vEW58GpheH7sL\n5pWBPZMBgkEXw5HrM5TureTm1nXez5GcZCh+p1Zh4HSHP3+6bNxsSGhigQ6x\nuWjstZnmXjWJSYHdaaaB+mp9wMtYRWZ5x6rjjBItrWobwf4kStBoum3P5vfa\nTe32F/iWxZawjSkWw2DdgeVAv2Dv/sSfRSJJFkXsYiGd4svx0Ta0lHRClHcU\nnzSztMPtb9pU5AQuQ1e+ME62T8jMenVqEPzfc8euSuV8/Frp5Zknymqcb55j\nWTTjgH5MMdw2/28gs5Wnn+3KP6mYEel3PL6eqmHZ5XSGIGv0cI/eMEYefp5Q\nkUmDxr23OXTfTJTKrpCymkLgOJLzdkGUhcLEVpDSOFNsx3UEWcLiSvR+NXKq\nT/MRD/I6WfRii7dkm3hs55gQQR6VhHfph5g+5aET3fvP09MKoHUVpT7v46su\nF+ku18drA0s+wS9WZAVgW3YepG8A3g5jeA/pmoAZQjcI/OuudGoGfXu9FEyu\nGZ/0FG4RASZBYrAhdtKF4MEH31ZVKcI3DVKWCbUqFoe5JFrgXeCpOWDiM58O\n6N6qON0Zu4Pr4zF+BapJnetLP1Hd/mSiepMLRkd2gqMm1Ax6zoIVmKfQ655t\n33Rg\r\n=oi2V\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n#### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.**\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n**Note: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.**\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n\n**Note: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommended to\n always include it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color)` | Sets the container fill color to the given color for an enabled button.\n`disabled-container-fill-color($color)` | Sets the container fill color to the given color for a disabled button.\n`icon-color($color)` | Sets the icon color to the given color for an enabled button.\n`disabled-icon-color($color)` | Sets the icon color to the given color for a disabled button.\n`ink-color($color)` | Sets the ink color to the given color for an enabled button, and sets the icon color to the given color unless `icon-color` is also used.\n`disabled-ink-color($color)` | Sets the ink color to the given color for a disabled button, and sets the icon color to the given color unless `icon-color` is also used.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color)` | Sets the outline color to the given color for an enabled button.\n`disabled-outline-color($color)` | Sets the outline color to the given color for a disabled button.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","description":"The Material Components for the web button component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.1","dependencies":{"@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/density":"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/button_8.0.0-canary.774dcfc8e.0_1601546082474_0.6888471093222126","host":"s3://npm-registry-packages"}},"8.0.0-canary.0f60323a8.0":{"name":"@material/button","version":"8.0.0-canary.0f60323a8.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"650ebaa3f769080cfada6c34cf286f5d22fb112e","tarball":"https://registry.npmjs.org/@material/button/-/button-8.0.0-canary.0f60323a8.0.tgz","fileCount":26,"integrity":"sha512-yAMccxwU+nzyLaZOoXZOt1rXBC/5DGa5MgjEKUIe9GS2N1BQRJjwa+ldKKuwzgj8qucj+fMkx2okMAY7phNDxg==","signatures":[{"sig":"MEUCIC/xTE8wLGx2VjLlVD1e7M5UtW7xR0BaytEmwYd1LwgqAiEAzFVkCKOEPlf+x8modflVUdUAmW5aAJNiOmXSP1n+Fkw=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":397711,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJff4BOCRA9TVsSAnZWagAAF0QP+QHdauUDUoTZ6ptk3AnI\nb936/DF3DIBstHqBL7c0kRQ6/Tb1iewPk+20vX0VnbgDG2zj13SvisDxUmbg\nClWtalkmVObyBupmv68D+nmlNbvRHTWTz5p0HhgNDne2zi9bu1X9cAPVCAne\nwY2qvnE1wsiez24sUpCBms2jrwvHsph3zJIMmZvkVSiI945JzXT7oZTGfgrk\nLa4CGQ3y0X2DrgZougGdFwXFuy/+lAUedtW5TDl4i7t70lyQOlmJajwBVaJ/\nO/9x1u6acitSj49odAW9/abQJQvRxGMK3F3EAm7lcYqIozwDsmDMsgfZMKf5\nzCZAWOYvfAhPuS9rAXP4E6mgu3ls5a0W/iW+zJVNP0nryqtiZKmwIYswDzKo\n5RTWVxdoGSuBlJ+IRd8lWs55jlgayIEt5d/d/iLKkYENC0lOwM+ST7iNTXNZ\nFJqee3aHyZ4MkcjxfS/kZgswoFXCiE7t7gK/DjT1cSn4ucr4w1RRy3V0DRhc\n8c87V263M9iJS3dvPgnDB99f+37u4EbmLI4/SnyUDCaZ3EcNqg0gwG/mGU4G\n/m/HHuwiYSTiRwKupE2EwVZC1TX6eECisho4i5nT6NSQzPDqlhXw/PkMt6CN\nQTjlPz2rE1cnF8ke6yG/6n9HtCb95vaY8UKfn5uKilyhrS6O6ADgENWnMrwV\nX0B7\r\n=sOfZ\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n#### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.**\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n**Note: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.**\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n\n**Note: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommended to\n always include it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color)` | Sets the container fill color to the given color for an enabled button.\n`disabled-container-fill-color($color)` | Sets the container fill color to the given color for a disabled button.\n`icon-color($color)` | Sets the icon color to the given color for an enabled button.\n`disabled-icon-color($color)` | Sets the icon color to the given color for a disabled button.\n`ink-color($color)` | Sets the ink color to the given color for an enabled button, and sets the icon color to the given color unless `icon-color` is also used.\n`disabled-ink-color($color)` | Sets the ink color to the given color for a disabled button, and sets the icon color to the given color unless `icon-color` is also used.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color)` | Sets the outline color to the given color for an enabled button.\n`disabled-outline-color($color)` | Sets the outline color to the given color for a disabled button.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","description":"The Material Components for the web button component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.1","dependencies":{"@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/density":"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/button_8.0.0-canary.0f60323a8.0_1602191437768_0.916580391459221","host":"s3://npm-registry-packages"}},"8.0.0-canary.d71622574.0":{"name":"@material/button","version":"8.0.0-canary.d71622574.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"0ea2fb72a8859819f4d5151e3b6e6ab7bfb1defe","tarball":"https://registry.npmjs.org/@material/button/-/button-8.0.0-canary.d71622574.0.tgz","fileCount":26,"integrity":"sha512-pd0wYq5lmqS98hva9kibbEYiKhlj1fMVKOQBf08xqlxgtlgfXJ5JFcK+J+im4PloG5TRHtwMJ2Ht2AdGh4nDUQ==","signatures":[{"sig":"MEQCIAILX2+aVP6OZnLzQzZicYph0q5Rp1T8gkH0qpx1lSH+AiBy2bJai2qwqtGWUv0x89Rv8ey+hXZTtwpV/fT5BbAwbg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":397711,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfgJCWCRA9TVsSAnZWagAApDgP/24vB1ScbpwfCbA5x+Iq\ntKCLAz208VeZ8u6yVufVyZeCB8ywKCN0hfAdc3CR0WexXWUJU9CV+JghYyZv\nvgWqsRhdpQb9eaUlyKO6HqJIv1DTwuMw9WmwLseAoHOClkxhFlg7vMkK4xx5\nFMAVIhNDWJFwwZv/Vzm6mumQXRoBAFuNtUtYG8WFVjwQtSAaKduN0ud6vsFX\n/uReiPWMCgaLHY2F8ycEs2cCRSFk2JCCdZVE0LIHtwzwzYg3zJHPfMGmlI6q\n/YqwJJa40Jv8zgjwh3ZCuWzykJRiCZvf5DwW5d/lucUk8aQiGODK7UDfYqEA\n2OmK9fWsVpMPvQNrDhgNG80djQCN6Ysw9SdUN/C0lR1A0mb/VjvDpm/oAy8D\nJs5Wt0ngSFO8tV7v/CH7hLPPVTrexSjrjhgNkh6RamkiMoCVS/UVVWTgOau1\ni6UC/w2xB+JYh7WUWeT72cFEsH8/f7LioazBG99gPh6UKWtI2YgW/tAWeEzd\nzedofxNcy289eXep+4oP55D3IG9uVR3u02AWPGARFCS4beObsm4ANqDtIZXF\n8zpqllQ9Y/RmGv+m++4rYqTJQpzMgZn388YT/1aTUNTp7GGAT1/6W+yXw0Fu\nf2PzeLt8FwSs739mryJiC5uk7Dq4bALCxkm73o7nxXtp8VXvhQYueiQqBJ1g\n0+t8\r\n=oicq\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n#### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.**\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n**Note: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.**\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n\n**Note: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommended to\n always include it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color)` | Sets the container fill color to the given color for an enabled button.\n`disabled-container-fill-color($color)` | Sets the container fill color to the given color for a disabled button.\n`icon-color($color)` | Sets the icon color to the given color for an enabled button.\n`disabled-icon-color($color)` | Sets the icon color to the given color for a disabled button.\n`ink-color($color)` | Sets the ink color to the given color for an enabled button, and sets the icon color to the given color unless `icon-color` is also used.\n`disabled-ink-color($color)` | Sets the ink color to the given color for a disabled button, and sets the icon color to the given color unless `icon-color` is also used.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color)` | Sets the outline color to the given color for an enabled button.\n`disabled-outline-color($color)` | Sets the outline color to the given color for a disabled button.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","description":"The Material Components for the web button component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.1","dependencies":{"@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/density":"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/button_8.0.0-canary.d71622574.0_1602261141666_0.614983608738374","host":"s3://npm-registry-packages"}},"8.0.0-canary.7a9afaf4b.0":{"name":"@material/button","version":"8.0.0-canary.7a9afaf4b.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"fb57298e83f49d85030efaa4008e1314e94567b6","tarball":"https://registry.npmjs.org/@material/button/-/button-8.0.0-canary.7a9afaf4b.0.tgz","fileCount":26,"integrity":"sha512-RzqCneiSja19Z94mTjdbbnWqEHbirn/Uk4m/LEVepCFp7AeJuQPIwXj18mufgjZHUT2K/FJEnI3PvXDwRWXESg==","signatures":[{"sig":"MEUCIFCjwMcXwFyoxMEWt+4+1juJFbxoNW6g9Ot9kQmOvPbGAiEA+ApOM9QNDhEzjSkS11HbEjbhafkEEm6RoCniG5CpmrI=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":397711,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfgOooCRA9TVsSAnZWagAAIFQP/RPZ0tC07Pgz/sMdyNge\n85Pj99AjB3Jt6h5aVaikQEjXEBgGGRoynZzHv1S1QPU5yv92f87qy9bl7Bvd\nnbMLZJfNCLzASbIY5/5vIBj3HUmfFSHnUa4XapWbgI4i+nkIusVgfrL+fAmJ\n1v01C3OjEDGqsMcAzqnDD93Q++rwx0Ib4ofhZrWQJKoS9vhlFRGIC3QCtIFJ\n7tfXsV3T4qCN4IZPqJhNRiEK4SJVUBgO5CQzfgi7C9kFHlrnLfL/iKTlkVPt\nSpc6RYREe7i+ESvC+Tss7dsm2PWv2w4WyZeiHREdpqbuxAq4M4VQizR27VLG\nYKfUI4xvNjsmEGgdH0tswIvey2uxCUTbKsp5a+29AHr22G3AAaZx8TKeRwYy\nZtH5nbv7y/6lKmH4dT/EeQLAJWJPd4WnoNPTTMQT+tuV8EhlwN2g2MSibhuh\nyeCdo+tx13ZNkPQh6YyqHRTPknyhCX2B59dZUCYnHQIlQ+DNpfv9XDuBAPXB\nXpz8Gm4qLfCVSigqQb4m6Guk7sP/sZYMna0cmrUpG7+2cseDXK34d5NwKiqb\nMOMNgpmltzCNYXOthcyGahTPoFia7fjbS7daUGl1BbZpHT/NyBKEZ7c56/tC\nMbOy+KrKP4GSPdi/VUHKCD0O9lGLj5ryQ4eL5o9SvdEalg6Q01gOveKPF6Ap\nEGGO\r\n=tVjn\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n#### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.**\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n**Note: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.**\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n\n**Note: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommended to\n always include it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color)` | Sets the container fill color to the given color for an enabled button.\n`disabled-container-fill-color($color)` | Sets the container fill color to the given color for a disabled button.\n`icon-color($color)` | Sets the icon color to the given color for an enabled button.\n`disabled-icon-color($color)` | Sets the icon color to the given color for a disabled button.\n`ink-color($color)` | Sets the ink color to the given color for an enabled button, and sets the icon color to the given color unless `icon-color` is also used.\n`disabled-ink-color($color)` | Sets the ink color to the given color for a disabled button, and sets the icon color to the given color unless `icon-color` is also used.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color)` | Sets the outline color to the given color for an enabled button.\n`disabled-outline-color($color)` | Sets the outline color to the given color for a disabled button.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","description":"The Material Components for the web button component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.1","dependencies":{"@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/density":"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/button_8.0.0-canary.7a9afaf4b.0_1602284071713_0.1114712233108246","host":"s3://npm-registry-packages"}},"8.0.0-canary.8a39352c8.0":{"name":"@material/button","version":"8.0.0-canary.8a39352c8.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"371e85129cc15d56519c75843fa066523e1cc4ac","tarball":"https://registry.npmjs.org/@material/button/-/button-8.0.0-canary.8a39352c8.0.tgz","fileCount":26,"integrity":"sha512-+7glIfDW8BDrB7uN+AjdLQ+t+bj6vLjC6LYi0s5zawGaIeCofIOjlxrZhalA3rhD9vrGOjvFSef/UeHck9jvSA==","signatures":[{"sig":"MEYCIQCb41GU97jlTuhvmFxrTDrcZ8Drb/DdYhu0gUBV0mVBNgIhAJMFeKzsuV7Z7LNZLWCDFBIXk6ZBpJF3TPurIISQQQxp","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":397711,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfhJaVCRA9TVsSAnZWagAArvAP/1VjTFkJV9kn6o/hFN0k\nWv5LKweVzGT4AOFoOXjJhcXjl0HWKK9vv6cJvJul/YUVSzVaz83zDY+8VaTc\nGqVuXlhntvrE8b83qy7QJYqZD6UnxyLJEPn/lNZyj55CmMDisXQzIO3NvVXV\n+NeXhkjO+EwsjaTVpqUj8sIgnHJq3nS0j+2a04y8ljJTmK+EMk7coKTXphEH\n28aNT3Ri4ghpOdzSzJCN/L9CumFSLaCHXnjuS/GC82YJc1FLxDd9QLa5krEB\nS3Ci/CYnbFkt+5R8YjmxSUcmasZjghokUt4TQDNSRMrm5f4wqFe1NesibHjN\nJctw0ZxYE9cKGQOp2ZJ5/Ez8Pfz/2cKfZsuUeItmikpQVDNscU54rAuPkP11\n2cQ4rnc+Zm5PDb8byXqlgNMjPoCLkdO2U4/RqYPVt6RxI1sVj86Owngc1h5N\nmCR1ZTc95l2hEMgEn88HVwzaJMy+cTEZvL+dgQgvGDTJ2SsmXLggtIOfWFZP\nT6xDIEOrHwFYuoWAeaJykAcAz3G6fQ99+iZE23L1fHU++P8iBwTPk7nL+/g1\nc25lAYCLkHe8C/AEz/YnnilyUWV78q+ds4QKbht9eOeGsxng/+8aqNWoBePC\nisYuQQXIE0ts5BxeVTbBsJ690IRjgZbHwNHg11AItq4wzHA9ML9ojGP6kU4e\nsvkh\r\n=npk3\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n#### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.**\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n**Note: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.**\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n\n**Note: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommended to\n always include it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color)` | Sets the container fill color to the given color for an enabled button.\n`disabled-container-fill-color($color)` | Sets the container fill color to the given color for a disabled button.\n`icon-color($color)` | Sets the icon color to the given color for an enabled button.\n`disabled-icon-color($color)` | Sets the icon color to the given color for a disabled button.\n`ink-color($color)` | Sets the ink color to the given color for an enabled button, and sets the icon color to the given color unless `icon-color` is also used.\n`disabled-ink-color($color)` | Sets the ink color to the given color for a disabled button, and sets the icon color to the given color unless `icon-color` is also used.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color)` | Sets the outline color to the given color for an enabled button.\n`disabled-outline-color($color)` | Sets the outline color to the given color for a disabled button.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","description":"The Material Components for the web button component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.1","dependencies":{"@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/density":"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/button_8.0.0-canary.8a39352c8.0_1602524820754_0.7498217276794088","host":"s3://npm-registry-packages"}},"8.0.0-canary.790ca85fd.0":{"name":"@material/button","version":"8.0.0-canary.790ca85fd.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"bd836efd4f59571ee02e7e9706074478be056733","tarball":"https://registry.npmjs.org/@material/button/-/button-8.0.0-canary.790ca85fd.0.tgz","fileCount":26,"integrity":"sha512-30sfil2sZBAIj6ZxslyLAkdswAO4D9ah9kGTPWqAR4JtQhRwxnh7mKpgpZDpuNmXd+8ovAo4Z/7Vsn6h4iibhA==","signatures":[{"sig":"MEUCIA2ECDQphNEn2cxCaqR95Y5P1+4OFi7eU8pYa2PWAFH4AiEA85nnVlfS2NONbRSxOZ9NvoaEyPg32p9o3HMyoVU4dQM=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":397711,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfhNFBCRA9TVsSAnZWagAAE7EP/12+udDyE7hrV+tvRRte\nYqWW35orQgMdqhGMt27u+c3SEb8UTIB2wy8BJ7U9K0ahOnQwHdghDaQHM9Jv\nsEV1cZD1yeTLypNPAIG5JJ7B6XdIJgcfqrTwXbyUtF/1hT7rT0m2T42tNl3C\nLRQshRNLHeTNgq1y8jYWfNWt4N4Asui9NRviEGiYKZn8C2oxQ+paI6aTNgLc\nn2MCMt6oCG6lgaO23mqoobmJvqIYRWKdb0daDK3XvdMB/deakLhv44RPMnbO\nuTQNIfkj9IHzkhhd8JDIEhe0Pv/6cu5WrDzXhylXWQArEt+Hzr51dGRooRlN\n8UnlmUFDQRGattgqe/FJ8NSTLUKDGOwJXhtO5unTygE7frUbvYp6x+H5mwCg\nPoTCrZD3d5tiBbAtYaI/trMS+jWTJ2PZRXbqzFZ/CJhQqgWRfKA0X5gpLrd9\nJkcPi2FXk0On9QtozrELkg2A54eCZh6s2GafClk2wAbDgoki+Pb02Vf2rj/V\ntdbg/6yc/FJwO2ZV8r2cniwHpZV+HUFE0W3O0rciwQE5AbdiOe21chR+5Zg/\n5b4q7NbeiECTPdn1X+u3doOR8eXu+KuUw69JY2GVOePIejAcVIbJ9R8Kxkpn\nPDgrF2fQobEvdfdPZSShjHuIaa1no/Sg3H0dW6kOnLYCXGD49LEcX12BJhar\naBTj\r\n=Aztm\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n#### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.**\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n**Note: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.**\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n\n**Note: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommended to\n always include it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color)` | Sets the container fill color to the given color for an enabled button.\n`disabled-container-fill-color($color)` | Sets the container fill color to the given color for a disabled button.\n`icon-color($color)` | Sets the icon color to the given color for an enabled button.\n`disabled-icon-color($color)` | Sets the icon color to the given color for a disabled button.\n`ink-color($color)` | Sets the ink color to the given color for an enabled button, and sets the icon color to the given color unless `icon-color` is also used.\n`disabled-ink-color($color)` | Sets the ink color to the given color for a disabled button, and sets the icon color to the given color unless `icon-color` is also used.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color)` | Sets the outline color to the given color for an enabled button.\n`disabled-outline-color($color)` | Sets the outline color to the given color for a disabled button.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","description":"The Material Components for the web button component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.1","dependencies":{"@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/density":"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/button_8.0.0-canary.790ca85fd.0_1602539840437_0.20367503052119273","host":"s3://npm-registry-packages"}},"8.0.0-canary.174c0becf.0":{"name":"@material/button","version":"8.0.0-canary.174c0becf.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"6910a6753f7b0e02429e43c6e333ccadeafac2e7","tarball":"https://registry.npmjs.org/@material/button/-/button-8.0.0-canary.174c0becf.0.tgz","fileCount":26,"integrity":"sha512-50dv1HVU0TrhWaqenmkxKuvbNm6OtL6dzirS0dtBDeWs6WkShNK0C2nglyq9zphmg/ZH1OfWnys3TaKjSbVuqQ==","signatures":[{"sig":"MEYCIQDQMtP49zu8v8Nw9ahNLYInMkTmzltKQl292BDvJdy25wIhAIv4R5v47u+DY+GsrZLcxbZQIrZdoATyP4MBJbVPZgV0","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":397711,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfhl9vCRA9TVsSAnZWagAAW+AQAIue9NLdpmVvuuDCQeXV\njUMidPbOcp2RvxVKGXI32lZIIuIZNb4FzYi3W/tnRWiXnOyGAlUv6UJnF72u\nU1nKX9sxbz4VIdCUowdoZzgXovmEubKANs0hXvu82kQ70JuXZllPK2kJ7pSO\nT3ONKVkGf/IYtN7mPBb1xn15ZtL0KsK3xqerWBtfD/vEXODc6DKug+St8Z8C\naTs0+2NUV3hbGkza0AFn1F45qsw3FRUvea7jFMeWsT0AfgO79Y9EWK+HRGy0\nPkODi+b7TCXPxBKTlaIk+bnmHeK4zYuJmznNw3ZZjBmJA1Ch8yIoW8Bv9XJ6\n1LRY0xP5p4WFGt83X6AQMa00CYpcPLnyCIb+t0/er+VWyfgLQQH4ofhfNOHv\nIJO70ExgZ5zakwO+0QeBRGXmUNcpz6MRL0MDtvnbwSYZ3HkEBoNpakPXBsvr\nPHhcbUEnUaaTvl6PlKl86oLY0NXpcCQ+m9eU4yaWARMoCEqbEwGK4fqKpqHl\nAaobzoUVEbB8i4xZgfD55YDkFmt7000kQQgi4qnft6+2pzkGG/XyCeiT78Ku\n3JS8cM/sV3NVCGoon1ka5e+3lVPXj4SzBxcvubKQg5UBXkcPrplOpz4uuVeo\nRjJM071OiOSFNUUhysVtEnjx5v6mvIaEP/UiRCafGcDPDi1G5Q8tthewO2K7\nVJnn\r\n=kVjx\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n#### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.**\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n**Note: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.**\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n\n**Note: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommended to\n always include it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color)` | Sets the container fill color to the given color for an enabled button.\n`disabled-container-fill-color($color)` | Sets the container fill color to the given color for a disabled button.\n`icon-color($color)` | Sets the icon color to the given color for an enabled button.\n`disabled-icon-color($color)` | Sets the icon color to the given color for a disabled button.\n`ink-color($color)` | Sets the ink color to the given color for an enabled button, and sets the icon color to the given color unless `icon-color` is also used.\n`disabled-ink-color($color)` | Sets the ink color to the given color for a disabled button, and sets the icon color to the given color unless `icon-color` is also used.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color)` | Sets the outline color to the given color for an enabled button.\n`disabled-outline-color($color)` | Sets the outline color to the given color for a disabled button.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","description":"The Material Components for the web button component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.1","dependencies":{"@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/density":"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/button_8.0.0-canary.174c0becf.0_1602641775312_0.5047346608443004","host":"s3://npm-registry-packages"}},"8.0.0-canary.c71ebfa02.0":{"name":"@material/button","version":"8.0.0-canary.c71ebfa02.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"ba80fe78f5f6cc1dc56208fd5879b46611fb9375","tarball":"https://registry.npmjs.org/@material/button/-/button-8.0.0-canary.c71ebfa02.0.tgz","fileCount":26,"integrity":"sha512-LqekQcqm/rgkfUehcgSn+mPgyJxZCTykN4bJrsvJnCeBx76T5rRcioJD7DguBpFAX9E3swBP9UJILFdqYfh4+A==","signatures":[{"sig":"MEYCIQDEqb65c8EZThWEteMttrjmWB3Seee0GGrukhix8vwnHAIhALJn00z3Vj5p2StvOpgYk/IKAAFX8xHdjIcJJf/4B8Ig","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":397711,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfhnwCCRA9TVsSAnZWagAAgh4P/05mPvcQ6QSQUWlgWsOy\nuxhpQbtK/sW0BsaX2ipIcesDju++iCEaQ5IbMM/d0M9P0eYWoBpWJ+UgGsFz\n6FPh/6IePZRa05lpYjsJTDQJflhFnpsf058F3+t6DRNS9jpzjUgRAehHhiOR\nBvLHXTDVslZSP/qG/SD0P7Bv2PcjPwnxyb61EFdB+8Sznw2Ik6wmU4UPKDVE\nlzIaguzRp4ausy4fA7m8u+yH+2Af0rM8a9lAUUcA5Kmbq5Nu+NMwb12qZmXK\ngRysojYqzVzXjc7cR3aODED7cRZkMl6QjBjLazjvmgSKxWqp6V7ZN54gDlO+\nz5AWgqUapapsX9oWN95l3Etk0bVkH048/MV1IzQ9ns2V5jjmHGIYdhseTWae\ng6/P2JKq+fORSez/IypxVQBlQfZSSMZB60fTDAunOLOVHMxCcoMc070mQmnF\nebe3VHNuYJUbMiAWv8b5NFD1IbcQDtdFqSdNn/Fi9sj1yLZ/60G3ppk1uYoM\n2WTVck5xsnnU16EniE3q6LLLOU8Na8PxrsiYXRkzvZF5TT4QMWY+zr4KVFn5\nYKGNodh6jUje3dDDQqgxOVEWgjwtdSfumu5D/OxxOMKdJZzntM6GnndbNNeK\nJjJMJ7CdcyT6n+/IViqUHJ53zx9Ds9JBNAmA2LY6m8UhR+BpOoxxfNKowBm1\nnVE8\r\n=JUE4\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n#### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.**\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n**Note: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.**\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n\n**Note: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommended to\n always include it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color)` | Sets the container fill color to the given color for an enabled button.\n`disabled-container-fill-color($color)` | Sets the container fill color to the given color for a disabled button.\n`icon-color($color)` | Sets the icon color to the given color for an enabled button.\n`disabled-icon-color($color)` | Sets the icon color to the given color for a disabled button.\n`ink-color($color)` | Sets the ink color to the given color for an enabled button, and sets the icon color to the given color unless `icon-color` is also used.\n`disabled-ink-color($color)` | Sets the ink color to the given color for a disabled button, and sets the icon color to the given color unless `icon-color` is also used.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color)` | Sets the outline color to the given color for an enabled button.\n`disabled-outline-color($color)` | Sets the outline color to the given color for a disabled button.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","description":"The Material Components for the web button component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.1","dependencies":{"@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/density":"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/button_8.0.0-canary.c71ebfa02.0_1602649089605_0.7656791119989297","host":"s3://npm-registry-packages"}},"8.0.0-canary.2ab716cbd.0":{"name":"@material/button","version":"8.0.0-canary.2ab716cbd.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"050e23c12c8fe88f623ce6a52526db6ef4f06bbf","tarball":"https://registry.npmjs.org/@material/button/-/button-8.0.0-canary.2ab716cbd.0.tgz","fileCount":26,"integrity":"sha512-6jr1YHuZkjUvjjffa6XDupYUSa/4Ro85RldJf7MUP1TVIOvNmuquT7S1bvYt6jWZfp8Z0El5OZfuqzooUT9/6w==","signatures":[{"sig":"MEUCIE++LcHXbDyAlrWOzexp0hL5tQL9R9tnpuyBk7M9YCn7AiEA4jH71plEW6/9rAbCeQOig5u7eAb+cII6vDhTWosYJhA=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":397711,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfiOOkCRA9TVsSAnZWagAAeasQAI9lwySOSaYTdtTdmKit\nEEV4aHM4ZW62hNr4jsVLIWIaoGWZwCPEDSMuTqEpC0hSM988x11C17os57PL\nLjA6/uLrFxIXdmPArCuQ92wrBuK9Ab465biH+YieEKGulrxMo4C/3iwngOZz\n1B6q0gH/UFgVpaXYa4A1sKzFSZU5B+4W+ozbSaJMY5WnukF3+TDki2FDavE+\ncfm+IfIBQAZOrMmyCnjE66BqdTGLhTrukScGk9BWbI6qO6JmYLpeKrqlsU4+\nspcdZ5Jzr2ZwzKiEZnJtIRwpf02ejDfKlSareBqVdmutP4ZPcs8CWK8yxslI\n4dW+FuChCQtZ4Nz/6DEPrD/UDbtbZKOclOOsZYnixngCnpLTZOor5QfNtntT\nW6ZSko32dfBuQSUCRNjJJ28lNqx6WCIQRGF0qniDdJvK6XN0h5+ERyOFh1ln\nGksNpncNkVS7hIftWPjTAGD+uAO44vRqSDnhN4ayjw1dcL40EvIrWxYvj8UG\ng13Jfelgf2qH8fuesudaz30PQOUHG39arxTLtbxwn6P41Twe5wDFyZA8tN/x\nGzYbHMGb17ezflt8XzIy6Vt5OU9HhcsSQI3jZjYUIwIopZm08mLTcxJvCw9i\n3qJM7ZOnuXE/0i4wvnNzIpw6pgeXTOkpDNlJe23PiYaGBivXa+dWxIPjDKJP\n4NSl\r\n=7nsQ\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n#### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.**\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n**Note: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.**\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n\n**Note: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommended to\n always include it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color)` | Sets the container fill color to the given color for an enabled button.\n`disabled-container-fill-color($color)` | Sets the container fill color to the given color for a disabled button.\n`icon-color($color)` | Sets the icon color to the given color for an enabled button.\n`disabled-icon-color($color)` | Sets the icon color to the given color for a disabled button.\n`ink-color($color)` | Sets the ink color to the given color for an enabled button, and sets the icon color to the given color unless `icon-color` is also used.\n`disabled-ink-color($color)` | Sets the ink color to the given color for a disabled button, and sets the icon color to the given color unless `icon-color` is also used.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color)` | Sets the outline color to the given color for an enabled button.\n`disabled-outline-color($color)` | Sets the outline color to the given color for a disabled button.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","description":"The Material Components for the web button component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.1","dependencies":{"@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/density":"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/button_8.0.0-canary.2ab716cbd.0_1602806691486_0.5627566711255718","host":"s3://npm-registry-packages"}},"8.0.0-canary.43c1c5e2f.0":{"name":"@material/button","version":"8.0.0-canary.43c1c5e2f.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"3d4a56dd812d5b350155440b0014d7e1387bb4bb","tarball":"https://registry.npmjs.org/@material/button/-/button-8.0.0-canary.43c1c5e2f.0.tgz","fileCount":26,"integrity":"sha512-FL1JA/2erHfQ44M81Qd+UDD5dZzshA8ecPkVeRPZZ2YcUXMhSs4Uxz3LOhCMszy5ZvGtuPOy2bDtEODql4tK1A==","signatures":[{"sig":"MEYCIQCpTpzk31pYTNgOhpk5McWC4H7//l+41m9S92pKQdlcYQIhAPaJmpnFrE3LOy5OomeMI8LBRq977gZWh2D52Liag0nj","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":397711,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfjZ3nCRA9TVsSAnZWagAAfisP/RQ2Etg7vvj6lAgMVgXG\nMXgPhAmMaPIB35rO45qVd7gDE6HOML4Db5UKc+zX4RKCV2gdXyRbtXmrcHzL\nfavWMgQWBydnmCHBixLd/M7Ez7CsbJDQ0gbaunQEKP2X7uaUB6pWo+X5Ub5D\nGIUErR2yKZ3AjIn/l0EhfUcoOSqshOQdUZZsIDOqc692MaREOpI66oZmSHnI\nS0+DMpLdcy4Kk47/5aYUf3WEcBSz7HDyNfW2K2explQ6fTtsYbyhNuye7WGh\nacgVdgV10XXGzjUds5O7+9TsPJajH3wMdwVOy5Sub5apZMA2xPZ0jwb/rJyi\nVadEG5v+6UKdx0Iz7ZaooI0qXJ7rIWCXpZkg9C8k/bECDItiMvYnDMKdgKRy\nWx9C7gvbhoOzxDw8JxezJM+Q4H/mizOpJfr2+n6U3jw4squww3cELl3JqdsW\nTddnmYw8UK2hoIA9SXAC/GaFwv2mNEVGd+OPXLkPuM9IFcAgSSm9m5jsMRzL\n7TYAGBAzToKC1ANxNS+ud6OyS9tSkcvZ2uQqs4Xb3P+RzwSnfuZ8e80lLXdf\n+dxQ04vl06GC8UD4+FNW3s8yg4TGnTduJ/+Ax34ElB063DD7TKwLGELdQQAy\nEqmJXEvO66o+jHG/iHP3OLB7RZ+AW8enR0kESEgyG8u11ejDy+JCyNU8hlDK\nkaNT\r\n=dbK2\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n#### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.**\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n**Note: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.**\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n\n**Note: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommended to\n always include it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color)` | Sets the container fill color to the given color for an enabled button.\n`disabled-container-fill-color($color)` | Sets the container fill color to the given color for a disabled button.\n`icon-color($color)` | Sets the icon color to the given color for an enabled button.\n`disabled-icon-color($color)` | Sets the icon color to the given color for a disabled button.\n`ink-color($color)` | Sets the ink color to the given color for an enabled button, and sets the icon color to the given color unless `icon-color` is also used.\n`disabled-ink-color($color)` | Sets the ink color to the given color for a disabled button, and sets the icon color to the given color unless `icon-color` is also used.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color)` | Sets the outline color to the given color for an enabled button.\n`disabled-outline-color($color)` | Sets the outline color to the given color for a disabled button.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","description":"The Material Components for the web button component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.1","dependencies":{"@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/density":"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/button_8.0.0-canary.43c1c5e2f.0_1603116519409_0.8893120815695257","host":"s3://npm-registry-packages"}},"8.0.0-canary.ccc64eea3.0":{"name":"@material/button","version":"8.0.0-canary.ccc64eea3.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"2807e6f47ffcda1527a8f65ecfd88f53bd02e672","tarball":"https://registry.npmjs.org/@material/button/-/button-8.0.0-canary.ccc64eea3.0.tgz","fileCount":26,"integrity":"sha512-gOk0HnC9s+64oWm+IuT16VH9YYkxYYWDiRYCe+32VufK+q0KTuSCborLLEFf0ONbfA9eBqmwG0HHOB8fNTWmug==","signatures":[{"sig":"MEYCIQCnVlg+JccvyttDxfuBxqL5yjmC+4oNcRZfWKd9ojEJ3QIhAKiWJaOJDz18dJcQpwOZvdFpHM5JqpFzR6SQ8Pd4Q9U3","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":397711,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfl1MaCRA9TVsSAnZWagAA68sP+QBe6ZN9rWkHTIWbMxSt\n3bDHaKTvrl+ZHYCsJbnZj7ZqJFCZe9JbcUVp9of/wbn4BZl8ZkqHOo/wm97s\n0vFZBJk+Um8cXO6RxL2t29SzpWeVIedQ6+P0oLehk4o9kJfa8/PDQpc9GE7P\nBzAzWVnVbAeOZkZKvpj3KLkWsC37CoxVHRKPDjFG82TrbJJ6JjmHItlTniOn\nkShJsFA2Tx3w4IRF8UqA1x+mP3daojgzKwQ6eFeFJn0xPzl1dAG90+VYHFh6\ntgsQgH2YECcBwNvV+DoohM/QGoeUkjUU5/kmXXE6id1iwvOx7GEy/pBjX1mC\n/yCAbGFQD/YuU3dYZqK6yVm0vcd95pAE9BrbNji+gQmydRznwCFUNgnlIQbv\nHRra1Vs1+cceLRE6zaqTFFP2dym4JdWBehzPEDCuna9wVBDnoUzRPRzfVW+C\nV0alEA7wgsvyU8TfcwtVZOxU43+4Z6RQaKqvQwtHmxv9pErwMkV47NADHu1l\nA/rHbwtBjiL7lLZlq41EcgEkh4HgyXLaG5jOj/nlnv+G6YQK2yNmO+Pen414\nZLL5Q2TFQ48aCCnofroYfvbtth8tzYFHJmNb2iXbEf4Niv96fnF1U5L7Y2WW\n/ctyB1Mz9QqpardlsEt84VSZa+86rePaA1/vY2SCyE/ycODmUhY7BIzg0dvY\n/J4E\r\n=N8Rl\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n#### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.**\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n**Note: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.**\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n\n**Note: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommended to\n always include it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color)` | Sets the container fill color to the given color for an enabled button.\n`disabled-container-fill-color($color)` | Sets the container fill color to the given color for a disabled button.\n`icon-color($color)` | Sets the icon color to the given color for an enabled button.\n`disabled-icon-color($color)` | Sets the icon color to the given color for a disabled button.\n`ink-color($color)` | Sets the ink color to the given color for an enabled button, and sets the icon color to the given color unless `icon-color` is also used.\n`disabled-ink-color($color)` | Sets the ink color to the given color for a disabled button, and sets the icon color to the given color unless `icon-color` is also used.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color)` | Sets the outline color to the given color for an enabled button.\n`disabled-outline-color($color)` | Sets the outline color to the given color for a disabled button.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","description":"The Material Components for the web button component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.1","dependencies":{"@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/density":"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/button_8.0.0-canary.ccc64eea3.0_1603752729851_0.7289988839273862","host":"s3://npm-registry-packages"}},"8.0.0-canary.a79cdd019.0":{"name":"@material/button","version":"8.0.0-canary.a79cdd019.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"5112ceaeebf8fe29fa35e20f676cd62d036ba17a","tarball":"https://registry.npmjs.org/@material/button/-/button-8.0.0-canary.a79cdd019.0.tgz","fileCount":26,"integrity":"sha512-n6X3d8GK5+SWpC1FQx2t92g8KvtbXBy25RY4v4AyGeV5WmWKEF0/fwJ4FAsk3MbZrXNiiHjJD5slj17MA2PhoQ==","signatures":[{"sig":"MEUCIFfhLjicYIpcWjDjo6VsLDtPjH/5ltr1D+jR20OEAgzLAiEA244zmufOLNWKQxJGJB+LW1fbgZY+1HJx9NL840A3FLw=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":397711,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfmEuLCRA9TVsSAnZWagAAGjQQAJf+ZgAoB16wicRUIRgp\nYY9uKnnjNo+ySwlLF+ZhQa891bIQl3HwEMjS8ecF9TmMfP/0y0INaoUc3IJ+\n8T1dc89piFnlby1b+3E1jg505AOMqFJdGWGTt+YGnHlMhYIb3awXkmnF1wP3\nQz7S27tjaCk1IApq6GOeU+QE9Gwc1B4zDwb27baG4zac/WGMSvaQXH8jBdq8\nY5Emj7mOSHJOCrie92oGlmmyaghEG0LnkDcRNryOxBbhEiVnhJhUriPuPL6t\n46qOPW26L5qKoG6zLUPReL3LWxnNSVVjYKN7s2O5/kvAE3JJLrtseCulBySL\nTfwlVaJH52ij9lj1lIQXWUIx5kSDBpBkhq9hPBNeeRuJEEAYBAUR+oXtEAh3\nYEfsH5/h3K1Jfmhx9727HZyN34lPud8YUFpkRWfzpFhJ0snMr/vG6GWJdrJE\npEvB7ismoChdsC2PtPg2znb6/9w26+TZpI/25tXGz4gsT3hvMojrhmg1Yiom\nvu0JvRDV+dFoy6dFdadVGgKo6Yeym9uOAE/T/s0syZ3Sx4WZdDuHXiQqpy+3\ntbzqg9MQH/74JAM15+4/RC1RcqQ5+n2mPd5C1APRrA6QJhtWZpZceg7rpohp\neZ+gpKrf+Kty6HsPqrvp48OAgk+UsgeUdJlUIU8OIR+rGeGewkNEEieMdQeR\n1ldw\r\n=/waA\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n#### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.**\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n**Note: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.**\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n\n**Note: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommended to\n always include it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color)` | Sets the container fill color to the given color for an enabled button.\n`disabled-container-fill-color($color)` | Sets the container fill color to the given color for a disabled button.\n`icon-color($color)` | Sets the icon color to the given color for an enabled button.\n`disabled-icon-color($color)` | Sets the icon color to the given color for a disabled button.\n`ink-color($color)` | Sets the ink color to the given color for an enabled button, and sets the icon color to the given color unless `icon-color` is also used.\n`disabled-ink-color($color)` | Sets the ink color to the given color for a disabled button, and sets the icon color to the given color unless `icon-color` is also used.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color)` | Sets the outline color to the given color for an enabled button.\n`disabled-outline-color($color)` | Sets the outline color to the given color for a disabled button.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","description":"The Material Components for the web button component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.1","dependencies":{"@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/density":"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/button_8.0.0-canary.a79cdd019.0_1603816331338_0.07735816003070428","host":"s3://npm-registry-packages"}},"8.0.0-canary.596e98424.0":{"name":"@material/button","version":"8.0.0-canary.596e98424.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"d969924a4799f829845532646c18968e88418e32","tarball":"https://registry.npmjs.org/@material/button/-/button-8.0.0-canary.596e98424.0.tgz","fileCount":26,"integrity":"sha512-j24LVEpzVXaDNx+KKETJaj1SqzFKXiBTU4wPDTAwc1zq0wa35/+yhqFBbqQ94H9BfDbp/ClBOClmShkpyfkoyw==","signatures":[{"sig":"MEUCIQCQEz3QfRBT9HFWvMIS4s+UKy0jL1tjuifUs6aI+YVWxQIgRB99BC/HpUHMm85fY7VUsp43xSd3LVL44WUnImDr3Lw=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":397711,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfmZZ8CRA9TVsSAnZWagAAHHUP/isDoDEIboEY/usf3047\nZvPMMlut+mdSENcFdpVO3aI3CHgnvJ0rXefvSVR97eesNFJ3DAeVEmyr6fGa\nIDc+JWNtb0g9sZr2DQWT1MapYn9Fjjgcn9kGjI5sS2DcQv4SlBtTOvs978P0\nF8i8es/pbO3sZB/KTP8YArfVgYPpfN8zBjNvrLmPVkStKsDcCsAZl7Q0snAL\nB89IFIrQqMOZ4hnPQBXue0awDve/5jFIMtqp4CnHcoarizOQFitGDkzg1RA5\nDGdk9vNPWUifOIu8wKvMuYCgoQtC9AfQsxnI3sgVlUVRD+wB1LZ8/wS/ln5e\nvjRBTxjAbUQImzwwcrVpZc47cqa/yJgVLoehNkJefj/InA37JVV/cuCnoVKv\nOrdMy07hKZ1CD4Kg1KZKXeTyhgoIZ+7PKY07yEr7T1vq+1bAV4+szt6jYwfe\n1zClCLBdCDYg45CmEY1683cFjRb7313A7Xwc5xaqeAUcpNZvtlx3R1/oGtc7\nSuhm5T3+wnh5XZGN0RQZjQoIuWENEYgxn4feYOmV/CEa8zHC8/RinrJmnfOc\nyGi/uu58rTvNC1D6w6A6xWsOEv+QvL+a6OctU0cpoIZUl/Uri6uKpAE+/Ald\nJuVCGFPJuDHg6DIC7+0cLOQyTcUur6nSsZnuEGE9oH5RsfayZnY0TFutsQhs\nwtvA\r\n=SavG\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n#### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.**\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n**Note: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.**\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n\n**Note: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommended to\n always include it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color)` | Sets the container fill color to the given color for an enabled button.\n`disabled-container-fill-color($color)` | Sets the container fill color to the given color for a disabled button.\n`icon-color($color)` | Sets the icon color to the given color for an enabled button.\n`disabled-icon-color($color)` | Sets the icon color to the given color for a disabled button.\n`ink-color($color)` | Sets the ink color to the given color for an enabled button, and sets the icon color to the given color unless `icon-color` is also used.\n`disabled-ink-color($color)` | Sets the ink color to the given color for a disabled button, and sets the icon color to the given color unless `icon-color` is also used.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color)` | Sets the outline color to the given color for an enabled button.\n`disabled-outline-color($color)` | Sets the outline color to the given color for a disabled button.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","description":"The Material Components for the web button component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.1","dependencies":{"@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/density":"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/button_8.0.0-canary.596e98424.0_1603901051634_0.14285527780865115","host":"s3://npm-registry-packages"}},"8.0.0-canary.05d5facc2.0":{"name":"@material/button","version":"8.0.0-canary.05d5facc2.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"98774e6addf560b796f6b1ee3b2d73729271778c","tarball":"https://registry.npmjs.org/@material/button/-/button-8.0.0-canary.05d5facc2.0.tgz","fileCount":26,"integrity":"sha512-pbn7Aoub0VVKZCl0GA6dxi/rK4VxSfsqUL+t0Ek7Tg2dHPZ4B4+zm12DDcDHHrcsvSRxjQggbrRMFDPqTMWfUA==","signatures":[{"sig":"MEUCIQC6TXkpNlzrX8y1Ac87CdcmqG/C50xya4XZ/Z/QVVWTcgIgM1et8Xw4bN6RkwBAhgOc/r8NarMWgCjx+lfgej8fsFI=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":397711,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfmZh+CRA9TVsSAnZWagAA8ZUP/imzJ1R/pKJ49YUVMIm6\nwkmsf0bHxPlTQ+pzkp9ACbwHd+7fppPZLDxIWzvPalv27MSQ1Dz5Z2J2GNQP\nQekRPGPcmGRrtrS1J76cH5oaEV95zAceD15FvnOFwPZIIXz9CwPXT86vaUsP\nWxkGO+NM7tM7TmOgiaeB8NXu/UBvBpxOizT8Mruj6R0oLSkvlgDEBqX7og0o\noVdEXmEk9GT6RmV3I0l50CGHLZC7QqmqP9cce45jrqK+On+envwtRtlmbzCS\nxwMhWBpaxrQM4CaCd5240oz5UMfWBxjiNTJasWJ/CkFjHdCz58dfWYXre9M0\n3A7Su6vK3a7jdeN9oS1a0/o7X2DwgxuRotaskd5vJGkzdk0U5MkWiwZOTeG9\nR3xMGEWOou9jq1I6v+tpyyo5UTt1rpy5XjQpPw4puXUA4BCp2ThHqkIpE8H6\nqEx4cU0VQpXQxj/QL+B/Qeo3JfBHtNX86vC2NbH/Z8ZXmNk7LgeFVniSUuTK\n06UrJwJv/pwaAUJp6JL9vfUMiRYMfv9P/pp8CjWQE1SQqA1UKeae0YIJT3aq\ngVOp6AuH4GRGSbTImyDbufRAjWuZDF73q+YmZwQDyrBHgXNTDTpOt+16AZjx\nLFD1bYYzCMAnW7Thjn9rg5HC26+ALL4WDWN5HPaiFopfR0Bed+tsSogVjPmQ\ncknE\r\n=nOIg\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n#### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.**\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n**Note: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.**\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n\n**Note: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommended to\n always include it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color)` | Sets the container fill color to the given color for an enabled button.\n`disabled-container-fill-color($color)` | Sets the container fill color to the given color for a disabled button.\n`icon-color($color)` | Sets the icon color to the given color for an enabled button.\n`disabled-icon-color($color)` | Sets the icon color to the given color for a disabled button.\n`ink-color($color)` | Sets the ink color to the given color for an enabled button, and sets the icon color to the given color unless `icon-color` is also used.\n`disabled-ink-color($color)` | Sets the ink color to the given color for a disabled button, and sets the icon color to the given color unless `icon-color` is also used.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color)` | Sets the outline color to the given color for an enabled button.\n`disabled-outline-color($color)` | Sets the outline color to the given color for a disabled button.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","description":"The Material Components for the web button component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.1","dependencies":{"@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/density":"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/button_8.0.0-canary.05d5facc2.0_1603901566018_0.035769954256426484","host":"s3://npm-registry-packages"}},"8.0.0-canary.291b3553d.0":{"name":"@material/button","version":"8.0.0-canary.291b3553d.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"f34d8c5cbe0e784e68d7e5851d0bfef00d735658","tarball":"https://registry.npmjs.org/@material/button/-/button-8.0.0-canary.291b3553d.0.tgz","fileCount":26,"integrity":"sha512-XbpHaYbTXRyn9x+unDSFxC2PANrJ5P2GW9DHB2olMP3Piy7ae/3n+nyKqfR8tIU2xBibL1DBTx7HaqhVVVBxcw==","signatures":[{"sig":"MEYCIQD4nThKF52vdy8KE/bv4kPhPcND7XZrfOREABWTXQ81VwIhAK3ICWFGRrUr4QpcPnVNIMnz+hryDlc4MjNtNkRqcMWK","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":397711,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfma5CCRA9TVsSAnZWagAA6O0P/jN8J130OfhQ8Q1fvQN+\n4lPx03nKMpc3y/PKl/Udw8KfQRVxLnVQdbEO+Xs5q8OTPPIPRzVOtpbkJeLM\nhrzbBSMoevha0JaOr+LqtT8LrRHpFWeOz3UOKBnbwvLLD6+TM+l/aqi4214n\n8IEr4bBH5kiRk4SkvrliX+4JVrY6ynshGxg6I6hkj8V5lbaumscMQdfKYJ0C\nndNpWrxsXsShmJsJk0GH90L1Cw37G065TYgAcmCWHfwfkpVvYtgZnaEEThAM\nchwbDMcJ0wAgNSRoRjg7n0vpPFs5/an3KKE5GsXeP2SQhAmJBIh9cjYGG+Yd\ne7q6QsKg+n0qCghzVeS2XPtvWjiKcObeOMbyP+52az+sd/dsz7C2KstZ+F1N\ncHxu7Y7BnodbDA3jmgaraVQDCPPI7yxYWEkcBYEh66n9AO1yXfl/o+pbnz2K\nediwtV1w2fxeq8JEBR/MnmeqABZtr4IxdcpF10JsMp32s6cin9kMTChdry7w\nRFE1JHNI0Kha3a5y+FV1tA0GCA3GEdpnJiSzA+8IE1Kh8A11mG7bSAMGXT2S\nXaGxLcREIgcAeL/Om9aCi79Qt/SAHjqs0Yp1l5Y71RZyWWEjj7lobNKW4BQQ\n3lFL6451i5mMjthVy80Unrxl/C2NPvdl1d9wwCsZOJSFtmC8OYA2D3ceoByN\nOYQ6\r\n=PrYq\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n#### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.**\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n**Note: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.**\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n\n**Note: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommended to\n always include it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color)` | Sets the container fill color to the given color for an enabled button.\n`disabled-container-fill-color($color)` | Sets the container fill color to the given color for a disabled button.\n`icon-color($color)` | Sets the icon color to the given color for an enabled button.\n`disabled-icon-color($color)` | Sets the icon color to the given color for a disabled button.\n`ink-color($color)` | Sets the ink color to the given color for an enabled button, and sets the icon color to the given color unless `icon-color` is also used.\n`disabled-ink-color($color)` | Sets the ink color to the given color for a disabled button, and sets the icon color to the given color unless `icon-color` is also used.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color)` | Sets the outline color to the given color for an enabled button.\n`disabled-outline-color($color)` | Sets the outline color to the given color for a disabled button.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","description":"The Material Components for the web button component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.1","dependencies":{"@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/density":"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/button_8.0.0-canary.291b3553d.0_1603907138094_0.5231615682938431","host":"s3://npm-registry-packages"}},"8.0.0-canary.dbc449b09.0":{"name":"@material/button","version":"8.0.0-canary.dbc449b09.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"76f4fd8077ddbc617cd25e6cd3263458db7279e9","tarball":"https://registry.npmjs.org/@material/button/-/button-8.0.0-canary.dbc449b09.0.tgz","fileCount":26,"integrity":"sha512-7XE3JVRjGHXUY1xIsKVGztOvsvKKQdgNdQJHNYipLk+VwYw70ynEQayrQaNmkHm44Si0Ep8GoPA4ktTuhLPLhg==","signatures":[{"sig":"MEQCID+RjIwehi9iTrLjin+zR9cMnV8m0EADhsnvlpDrpi0qAiBuKvNEgjFxsqIb2J3b2+DE7kUQmOnv7XFL7UVRtQ0Z1w==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":397711,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfmbTBCRA9TVsSAnZWagAAc/4P/RUuRnQmA2UWDO9uLGh9\nxwaFt+byG63+sSzR55mxMBJHeqtE0ITHl8rBOjub3QIVCGPgNQpKYG1Ax9g9\nquKqTo0oFdl6vnQ5bCWBjHOpEQmWKOLu861b2eZeg3QtMWCIkM5eFjW2lZ8x\nImDq3aenY1EQMmBPVLrKm4Nnk4yi7+IIomTUmqDUd2jhtfOgMzoO4IMfZh5f\nUPAtpxDQbt7TS+8pYIHxU8YVmW6uu8djlD1npjkhSrQFssrk4rTn/kxu4S79\nUgTXKhS8y5ASy1eNMC2ZKkj/GSSbiSkysW0SLKhlqWEap0fGOSvaui1Kc1Qf\ngdlwMQ1Xm/2pstU+Io35Gi9w2JJOURyRHKb2o04uqcYgkxn9l7lnJhwevuHg\nmZvH7S9HSv7SXy8QLCPZt3QbSNpyezGLuK9OqvAfSLlIphk5M7qXQdN1nTqr\nJwS3Xczgu2QTrI34f4cbmaPtuo1ug5WzZfTdHQWUeteYRf6wPzMexCRyxmg0\njco5ApdydrxjT0cwEgZc3G3rHKRJQ/A2BhESKeE90lx2/TBcYV3s2vTnA7e0\nZr1GQV3EhzcmqGF6zvVVXLVatjopxWYkHpZvrq3FnUZAaiieoArdZmU9VnqM\n3cnhBj3sel84ZIns0fCzMsnjriDfF3HKgnY/GxufjKWCKKsqupPzfeMSoT1b\nLKTC\r\n=F46V\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n#### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.**\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n**Note: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.**\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n\n**Note: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommended to\n always include it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color)` | Sets the container fill color to the given color for an enabled button.\n`disabled-container-fill-color($color)` | Sets the container fill color to the given color for a disabled button.\n`icon-color($color)` | Sets the icon color to the given color for an enabled button.\n`disabled-icon-color($color)` | Sets the icon color to the given color for a disabled button.\n`ink-color($color)` | Sets the ink color to the given color for an enabled button, and sets the icon color to the given color unless `icon-color` is also used.\n`disabled-ink-color($color)` | Sets the ink color to the given color for a disabled button, and sets the icon color to the given color unless `icon-color` is also used.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color)` | Sets the outline color to the given color for an enabled button.\n`disabled-outline-color($color)` | Sets the outline color to the given color for a disabled button.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","description":"The Material Components for the web button component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.1","dependencies":{"@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/density":"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/button_8.0.0-canary.dbc449b09.0_1603908801375_0.24098593753334163","host":"s3://npm-registry-packages"}},"8.0.0-canary.4794b25da.0":{"name":"@material/button","version":"8.0.0-canary.4794b25da.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"3aa1cd82431afa83647718e2641aba1884def723","tarball":"https://registry.npmjs.org/@material/button/-/button-8.0.0-canary.4794b25da.0.tgz","fileCount":26,"integrity":"sha512-zV6yRT91a2GQMfp9c/Duq3g7DA9p3XlJEjDZLDR+Z8+4Nix/T70H2mLZnMc2gR7savwBVynYoVMNPOXjhlGLDQ==","signatures":[{"sig":"MEYCIQCJBhXgx88Ha/+Ald0Fe/K3X00b7HVr6J55eGjlhe1baAIhAOZbUmM9G9JZ4pKVTuqVv1eiBJJi269dFq383Mcveaei","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":397711,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfmbtrCRA9TVsSAnZWagAA9f0P/jaaCfkbaG8y0hbLCxJY\na4/KG3LhL4/cgoXHuwH9SO5Sx3GaWpyMD7NvfaSg8BbiNHhvTjx0slfwUZyZ\nXDANty5hiPrMVngx84VqMbEyL4afht1P0brStOeZp6jz2boNXMrzaCgtw1nC\niasg+rLH1VOmkfwx8K5WfIIFuWARv19eX1qzda6pSoHZ6TmcmkcfM5N79/Ms\nccSFBr8j127MdL8+5HSkU6C59DPUacVCz9GLO26uzh1NCbkPWVduIqCgDCDE\n+63pqtgHYB5qaO8r6krgc7r6iO4K0T43oQwxdrh5kP2pYBTAghpQC2JOoYaM\npah4FphUU66N5H22Vwhqa9fgMqS7XkuiV6Oe2H6SgSWQ/NZ+kVIDEc+e30gd\nqfU903hAOoZwbeUDW5N6dMO8a/6TKHZcBIoE1pt4m9nt//wGTUgPJvquhGVv\n9wUHqCc+G0bf+ekEcWDOIydN4aoFHN3NPttswKCGMMmHDOeC+ERWYORas+PH\nJNl6b19zZ8/SKkMerstQ7O7/8+ZxuqPnaSUU6RZHl/ZU+0l2gs+xvDjpRZWF\n2kG/VQMSQ+JTlzOZMML6O4hgKHF6PTsSNQ9wkZMtxkLBBJzcvQ09iFby6C5Y\nVLpVSjmprqQ1UrK1tJ9+W6x8G2MklM1WjeBC5keuAyCI4BKz2mHZLkLRsbyz\nC9cX\r\n=9NHL\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n#### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.**\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n**Note: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.**\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n\n**Note: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommended to\n always include it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color)` | Sets the container fill color to the given color for an enabled button.\n`disabled-container-fill-color($color)` | Sets the container fill color to the given color for a disabled button.\n`icon-color($color)` | Sets the icon color to the given color for an enabled button.\n`disabled-icon-color($color)` | Sets the icon color to the given color for a disabled button.\n`ink-color($color)` | Sets the ink color to the given color for an enabled button, and sets the icon color to the given color unless `icon-color` is also used.\n`disabled-ink-color($color)` | Sets the ink color to the given color for a disabled button, and sets the icon color to the given color unless `icon-color` is also used.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color)` | Sets the outline color to the given color for an enabled button.\n`disabled-outline-color($color)` | Sets the outline color to the given color for a disabled button.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","description":"The Material Components for the web button component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.1","dependencies":{"@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/density":"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/button_8.0.0-canary.4794b25da.0_1603910507375_0.6098923516107799","host":"s3://npm-registry-packages"}},"8.0.0-canary.c61db90a5.0":{"name":"@material/button","version":"8.0.0-canary.c61db90a5.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"4cc324907be5e9b6ec5518ebd0ddeafa2c23c8ad","tarball":"https://registry.npmjs.org/@material/button/-/button-8.0.0-canary.c61db90a5.0.tgz","fileCount":26,"integrity":"sha512-/Ne0xIRyTaYBdEBAUlPs6a73FQZZOCwNji7qkgGwkPL330et5xmMehr2gcJlqQhY6i26tOLHka+NteiqPJf3GQ==","signatures":[{"sig":"MEUCIEweQ9UWYSyvIuFA2wIam9aW9hZVH3d4jDh6LyyAsjGGAiEAr+/wkvDtNZA0A82+0HKME/ucuGBwYHuBUPxEeD27fZU=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":397711,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfmb/HCRA9TVsSAnZWagAAUpMP/j48GMj90DtViZgG82HS\no7aSLG/M4KanV4heY000VUNZBueNGPPHCNLT+0srlWs9Ms2fyCeuKuvC7CJZ\nwSAGiDtnZKgzhL8ELL0yktCk0yhoUIkjOcv8KOJH3GOBIdo3JPzK9WucH97Z\nBD5vDDImJEnmXUnOKdeNAX6AqxbeqAQojB4ghMxDLALI2+2SFolYXNPzNR7I\njbTKhuxMUBaRnAGNGWcG0XjDqdbXrpJUg6MjQn9jnRC6xRJ+Vm73wT7rA64O\nLVfaUKlAb5X6M0owKKdU/OmFEVzK8n2XEJzsFRGTPi/cbVvF+v++mAcHJ0Jl\n3Yj2Laqn7mtdDzdawkiKX0czDRcaDa0TBkjB8Z3x2mRIxmoQ1zdg8Za/Ho4F\nWCIvCRaeKE4uonYhYqt7FWOA4nC309+WVNJd78P9K7bwAFUUR5hIdfRkmxSL\nC21xehkNhmETXTq/RRNQc1rdTlpx37E+qtMQHHefvIhupsG4rMSbNYZCDpgJ\nEtBTpBp5SmUD8hxoVmY6KNMGKhLd5/mmDcddiLhbaQO0F4N5bfwJ5qFrxU0R\n2veZG6Z9gtJfnQyLKUo5D6JyA53GVA7c0Psr3dsbF7XrhDCmx6BY7r8T7Nfx\nWdEJfNS+8LoKuUbD98N8usZ8+l4lrFUxYmUCSdNEh0o7j+ig9oP63yurCQ/9\nnYmb\r\n=i37d\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n#### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.**\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n**Note: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.**\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n\n**Note: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommended to\n always include it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color)` | Sets the container fill color to the given color for an enabled button.\n`disabled-container-fill-color($color)` | Sets the container fill color to the given color for a disabled button.\n`icon-color($color)` | Sets the icon color to the given color for an enabled button.\n`disabled-icon-color($color)` | Sets the icon color to the given color for a disabled button.\n`ink-color($color)` | Sets the ink color to the given color for an enabled button, and sets the icon color to the given color unless `icon-color` is also used.\n`disabled-ink-color($color)` | Sets the ink color to the given color for a disabled button, and sets the icon color to the given color unless `icon-color` is also used.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color)` | Sets the outline color to the given color for an enabled button.\n`disabled-outline-color($color)` | Sets the outline color to the given color for a disabled button.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","description":"The Material Components for the web button component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.1","dependencies":{"@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/density":"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/button_8.0.0-canary.c61db90a5.0_1603911622941_0.5949168003109551","host":"s3://npm-registry-packages"}},"8.0.0-canary.6d9648ab2.0":{"name":"@material/button","version":"8.0.0-canary.6d9648ab2.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"4e7380fb231ff1bc3049cc681a281a948ab6d481","tarball":"https://registry.npmjs.org/@material/button/-/button-8.0.0-canary.6d9648ab2.0.tgz","fileCount":26,"integrity":"sha512-sPGT1ZRc/qKgoAHzwq00jG3ZijXWjFj7AUmc4QNDN0++9DVASkFBV6o5DC3T4npWh66u6htmx55jL81ryuwRwA==","signatures":[{"sig":"MEYCIQC7+OwRu0YLGe6VNbswFHandwm718TmheGnVWeQ1H1c4wIhAL6CjULW1rifKVheASviQqQPxgK/YBuTGBpsFOf6Z83L","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":397711,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfmycICRA9TVsSAnZWagAAkdEP/iQVxcKH1gBVsVYBc6PM\nRYbIBGajgjFWLxzxvIEamvX/fx2KowWMxXbIFHlqg6sqZST46e18Ga6u/MQV\n5AGplVnXQhMK0MEsLAxphJlm7kiDzosZW3wqCJY+e8PGn+WzGmKAIAxG2MNx\nq+A4Yf0udBelbFU7WpGI9/MGepV6gfRVV6hyYWC7aanJRF+u236/B/vYLVfr\ngF/7ICCi5SnOy0BO2Tqnv7zs3RkVobmk0txx++7KRWcWjqAhO9PvHkLc7ctz\nbXTtYKHdT0z+kkRo4obmbZfl6c8oH/D3F2Q4lxF+qDoUifeLwzS3zbaUcqBO\n0RryvgVjhXT6cRUvU8EMSU4bB2zLEQxVkWwcruAc9792RDBcG5fq6rHcQomv\nddVzTD3WqAKbwyAR4Z8C+7c4M1GwpTnQhS693Bg7OxAyPVrSFlItgZE5ysHk\nuBBZbeDIWddEnowuhgwVXvAiTktHHF8B4+Yp99y7SjknF/DQVa/Jd2Pw+1eK\nKDeV8GBIPh0IAkfVa8EFfRmjiHkYq9LG919EqOnXidvctlPfHynXK6u+4z/N\nGmQDd8PTizmJEdCC+UslgGPT/BVAnJF/J91LXvULWN8q/0MCgi2jOx7mZpSX\nufN7jeBqdGj5WwPDOzPSEFyt3lj1n1hcR+qYluHtoUYK4vRmD70H7LnJ0L2x\ncnJC\r\n=JdW4\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n#### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.**\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n**Note: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.**\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n\n**Note: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommended to\n always include it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color)` | Sets the container fill color to the given color for an enabled button.\n`disabled-container-fill-color($color)` | Sets the container fill color to the given color for a disabled button.\n`icon-color($color)` | Sets the icon color to the given color for an enabled button.\n`disabled-icon-color($color)` | Sets the icon color to the given color for a disabled button.\n`ink-color($color)` | Sets the ink color to the given color for an enabled button, and sets the icon color to the given color unless `icon-color` is also used.\n`disabled-ink-color($color)` | Sets the ink color to the given color for a disabled button, and sets the icon color to the given color unless `icon-color` is also used.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color)` | Sets the outline color to the given color for an enabled button.\n`disabled-outline-color($color)` | Sets the outline color to the given color for a disabled button.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","description":"The Material Components for the web button component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.1","dependencies":{"@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/density":"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/button_8.0.0-canary.6d9648ab2.0_1604003591526_0.12924836019853392","host":"s3://npm-registry-packages"}},"8.0.0-canary.5511c5254.0":{"name":"@material/button","version":"8.0.0-canary.5511c5254.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"456538965412f7097e819d2b2e5b83489452616c","tarball":"https://registry.npmjs.org/@material/button/-/button-8.0.0-canary.5511c5254.0.tgz","fileCount":26,"integrity":"sha512-QGbIPoQ9C4KvEYiQBDG1gR+CdVKJZjzR35wa2mTKKny6VHmSvXXHKsFqlXlCWHLCN4CI/0t+lVFoqdgHXjO8HA==","signatures":[{"sig":"MEUCIBuygKh5hsL/eyoHwIg8DPcb1y4L08gZTb04ORZP0f8OAiEA1qR4Jvj2YHn4qLY+Cwzk4ytwlQKy452LlNGz9S5BQhw=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":397711,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfnFTTCRA9TVsSAnZWagAAJUMP/1gD/QqS/MXBGifRtAae\ncUXFk/8aRFt+CK/Ygl8HtBtUcumMoG+jrMLkSaSt9tTmRSxu79V3PVxpTvsF\n0QdhpsxZ1Wd5ssbI1XJJUCNK3ZjwQQSK8LDPm3+HKe5j+nzDo0yuxEBbOeRJ\nywaPNCT4tlmqOb3fcHUlgQfHZ83HN4B4bD+CuVMxRgCbTLtICy6XA8r6CNiB\nmXtJZksFW/8s0WZe8ptdOuaE9ChYtKQwPIuqbenaOHK3supvxal2fn8wzhSy\nHtFYMb75gT23lhfbo0MC+FSbxDGDpE9uqAySGjcz6sglGjCrXOw0fn2Rmi3w\nxQBJMxhYpZrbQ4qtfFkjHLUWv+TlsxU5QMn1ijDVwAFPBpFyMPNPDHXkl3xn\nTtudDsO74TH0iJxqBYlKznxkfmehhESmiEccF+K7JQOt3IAIkVEHsIeZLzM7\nWpzd53bDnIYUGL3ZeJLhQ8u9C5zmDZpjaolY5dDy+aB/cassGbYxdP9nNuSN\nIrJcobUQ06UQu7qAPGTOPxK9QV7BwniuFKLMfYLtBxoCm7WjfrFZ5sbHEfDT\n8X9PrMNT9s5eoKM4UTkkB+agpJT4E1OPW1Znjs5MVMpx3UQAnQvCDpPbbZMC\npAGkLQqrStJv4SweV+llRAH7O7fG0L6x0vYjTVmXhimBCjS3geI/f1nDxVZq\nnwkK\r\n=q1NR\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n#### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.**\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n**Note: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.**\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n\n**Note: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommended to\n always include it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color)` | Sets the container fill color to the given color for an enabled button.\n`disabled-container-fill-color($color)` | Sets the container fill color to the given color for a disabled button.\n`icon-color($color)` | Sets the icon color to the given color for an enabled button.\n`disabled-icon-color($color)` | Sets the icon color to the given color for a disabled button.\n`ink-color($color)` | Sets the ink color to the given color for an enabled button, and sets the icon color to the given color unless `icon-color` is also used.\n`disabled-ink-color($color)` | Sets the ink color to the given color for a disabled button, and sets the icon color to the given color unless `icon-color` is also used.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color)` | Sets the outline color to the given color for an enabled button.\n`disabled-outline-color($color)` | Sets the outline color to the given color for a disabled button.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","description":"The Material Components for the web button component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.1","dependencies":{"@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/density":"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/button_8.0.0-canary.5511c5254.0_1604080850956_0.846532003049991","host":"s3://npm-registry-packages"}},"8.0.0-canary.bd6e302a4.0":{"name":"@material/button","version":"8.0.0-canary.bd6e302a4.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"01d2fcc7c5a0f1ae401181fc3ee4f63c5baca987","tarball":"https://registry.npmjs.org/@material/button/-/button-8.0.0-canary.bd6e302a4.0.tgz","fileCount":26,"integrity":"sha512-v7wQMUw6MEb5qn92FeTFOdEN33qD30UXGJXsryZIDErg2QJ7UIgJb4ChgD1hxTBIG2GFjXhXhE92/WS27xrtYA==","signatures":[{"sig":"MEQCICaZt1CMjyU13wOuXTQ9Hk7rCjG8Lzk6Y10kSTDqxCVvAiAdC92nWdiQjr0Dv6TK6Z2tBYyzpSUJsfx/syuKN8WzQQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":397711,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfoDxaCRA9TVsSAnZWagAA9wEP/Rkr2xy9zUbvdy+Wc63R\nnhnOfdzDh8iuE5jtBy2V8l6bCY+ZwW9O2wpynRmaE27AEFBf8qK7ggWX4OfL\n5wQsHMgIDKfXPpHC3acibcls0zTBeT43zkhTis+FNUkvDnR+nWeeL24Ok+cv\nNooJ0RGwnfqz3/Tx+vqobKOXRcxtnhNJDwc6mxOr6GCSHPyXWVkpbOQ+Cfrx\n+y5wJUbvnpLOhxyDUT2fVH2CRq0mjZjBv2rtdmemA1HLN7hQJfnC66LNp6ie\nsvgbUmWphn5ZER+zt1EGPZ02diPOhEWN/9uxJXd7nNa343T3xPc3dBDNmimt\nMhPmnDYhqrZF/gd3p9tQoIQ5HvhzI1D/rigij4TeO8MVwyxjVVYcq9RGdUr1\ncAXizMIMQPc4imCqEos+1hM0DLx4yQnaIcYu3I771gutSJgoASY7e9LZLp7r\n6SNO2GbZEKnZbKgCJnQQ3K6Yi7XGLqmpvKrESCpBx5sWIpAMYkgkOtsaaMz4\ngxbhdu9AQQoCXUoXHpJTQxev3ECUfm+JUc/Rni67CNmIOGyfl5MlwVsvn5nI\nEo3dPf35sxu6hKKUUr61VfHMUSxGk5OEYeUWt2LTXbFW7sOKFDClbR2xnIJy\nqcNCooGWfVLmQJYOFhH11+QePhebuKs7rsDmWcmN2rRnnbHOvF8feaaKbkiA\n0IS4\r\n=dytD\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n#### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.**\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n**Note: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.**\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n\n**Note: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommended to\n always include it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color)` | Sets the container fill color to the given color for an enabled button.\n`disabled-container-fill-color($color)` | Sets the container fill color to the given color for a disabled button.\n`icon-color($color)` | Sets the icon color to the given color for an enabled button.\n`disabled-icon-color($color)` | Sets the icon color to the given color for a disabled button.\n`ink-color($color)` | Sets the ink color to the given color for an enabled button, and sets the icon color to the given color unless `icon-color` is also used.\n`disabled-ink-color($color)` | Sets the ink color to the given color for a disabled button, and sets the icon color to the given color unless `icon-color` is also used.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color)` | Sets the outline color to the given color for an enabled button.\n`disabled-outline-color($color)` | Sets the outline color to the given color for a disabled button.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","description":"The Material Components for the web button component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.1","dependencies":{"@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/density":"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/button_8.0.0-canary.bd6e302a4.0_1604336729572_0.24895187571752442","host":"s3://npm-registry-packages"}},"9.0.0-canary.d6b5cd418.0":{"name":"@material/button","version":"9.0.0-canary.d6b5cd418.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"741ab3d8cae671e0d1e974ab1fe542a613758dda","tarball":"https://registry.npmjs.org/@material/button/-/button-9.0.0-canary.d6b5cd418.0.tgz","fileCount":26,"integrity":"sha512-7SAmRqR7DEJyMNI19Nlc0LVAM/iqhbJVh1MPhgi77wCThIX9N+yaQ8X9jbCxQ3b9nPPWojHFJ0unA9exVh6ArQ==","signatures":[{"sig":"MEUCIQCuwBi1cyvS4eD0l1lxeLlbXx2yZPVmvXFIT4MDLel8GAIgSbG32TXyugTlSGXay1pJ7ZmapaligdrZIgvBQQyWhOA=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":397711,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfoI9nCRA9TVsSAnZWagAAXt8P/AocGtSN251IJpO1Sy05\ngb5P4dkUm6Mfp8PcFi5modLDkkri8MUbwefqUoNYpXzkyh+ZwsHyflSrbRld\nU/gmMfAR1gQ497EojQjFulJA3wQ4kEdbp2vRLKcbwQ6b9ioIzFCA5SsOvq5k\n0lFTuCK1baVXZnxO4EuknJUuWcnvAHnEQY0hFjC8JKyDhFu1GPNUHTcEpaxE\nFMUEPiiocnzMGhp1H1uDcalbP35LG5hAK1cytA5i8+dU47dheh1kSn2Hf9s2\nNEOBqWKvy3Z/ei++1kdoB5rluiZAk7gK/TOVsobRTYWAEEs3YPFZuu+gZT+W\njMq5iRXsH09cPreVZ8B8LUxGGMuFWbRIlft3ZV6LhiU37SRrB5DlGatkUKhH\n3j8rDWONEMUYuCwcmXZb5Pdbdku8nPCWj7mQgicTLcD0sJoBF1fdYKq2amOx\nbog5hqRiM1XvZHEIlLW4AcxpLrPNyYnKxKVTE5k0q4OlGvCTUrg9rQz+NvMN\n4DXsvaPSsxkqkZujfNRGJClnM0i/dMLEf5HqGQ3Hbvt4jqOa0VHMG11b1Uh3\n4b3YrvyQ+56B6zp99i05EPrIx70fnkUxkXncS2VeNsVB3EQdjWtUJORKIu/R\nqHWWJ736k57JplbvwmQm8RFLxqeJJzPgUKzLK3D+2mkGMWP/NQisVQWHavcm\nO65I\r\n=FSFR\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n#### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.**\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n**Note: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.**\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n\n**Note: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommended to\n always include it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color)` | Sets the container fill color to the given color for an enabled button.\n`disabled-container-fill-color($color)` | Sets the container fill color to the given color for a disabled button.\n`icon-color($color)` | Sets the icon color to the given color for an enabled button.\n`disabled-icon-color($color)` | Sets the icon color to the given color for a disabled button.\n`ink-color($color)` | Sets the ink color to the given color for an enabled button, and sets the icon color to the given color unless `icon-color` is also used.\n`disabled-ink-color($color)` | Sets the ink color to the given color for a disabled button, and sets the icon color to the given color unless `icon-color` is also used.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color)` | Sets the outline color to the given color for an enabled button.\n`disabled-outline-color($color)` | Sets the outline color to the given color for a disabled button.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","description":"The Material Components for the web button component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.1","dependencies":{"@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/density":"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/button_9.0.0-canary.d6b5cd418.0_1604357990469_0.6191802235357675","host":"s3://npm-registry-packages"}},"8.0.0":{"name":"@material/button","version":"8.0.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"785b8eb7361e18f7e60c638f5c22d8527ba38181","tarball":"https://registry.npmjs.org/@material/button/-/button-8.0.0.tgz","fileCount":25,"integrity":"sha512-16s11brFwfpWvvJxMtOyUZ7J70TNclV37M4aRlQ1Cjxhk2IUQzeRSADpCl/NdNAZQHEIhrGl2oy21sQqaNhBKg==","signatures":[{"sig":"MEUCIQCqvqLS92WnBTws/sJbiDs5DALWSUEuwTBQiZtsFJLl+QIgGCtJi3APDlCCJdETPIrIqOtpfOB5bxCh7oAbOfdKFW4=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":397156,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfoI96CRA9TVsSAnZWagAA3V4P/1i8gXry5Zqs4tFiQxi7\nP/PmHuouYDenRQL2ikF1JTWXMBAFMCE338cfXN+Hr3/E/T2zNCph4qOsRvp/\n6rFYTknTzPlEtrGKpG1HcZOlmW94hYAoUI0lZ3aFx9D2tifPEwvOs6wa5zkm\n4TUC92YpMLDE7wpn8tzNEYMeyCUBi+8PiFYbTZyXPtkUrH8QI9WjOd1fYltD\ng7vabFC9Ct166SFo0b/hwgLzCJ3L2Kto7mg/c2+Y44shaGMkgpCemiPXcaw9\nH2usou+tKUrMQ9NFjwP8UUaowEMbZwnaEAVcMTh3Djb2yvvG+x/oGz6hMKfs\n10NgUkJgzW4rp1jZcn+sdSUeLNASb3qza0vDgTBMGVxi/bZ+ldNuJUfE3ZlH\ntzlPkwJMu3P6dFuWm+vCIBIfdlIDUIzLEa3tfgPHe2CfocwArFfDdvTbb537\nOWFUuP/Oxc8rNg/dFyMjulEc87gUpqJS0VXfO0Xv8ByA0l2zyOqm4IhHYLPE\nqAeVp27bFP0WSmpzHc0SHj2NtI3tteLC1nY10KNkozF7aABHPlO69YZM27yd\n0QIl+JHFP8G8oNglrbd8VwCpotLjHcQu8+CpAYiqUmnYfBoVi4ljoKjNr07o\nLyJYdKMu4c1IxNkScFD4E8Irzug4vOxBtdLqJuOFUpElwfs9+95T+obwhE1s\n63JS\r\n=il/R\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-button"},"_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","description":"The Material Components for the web button component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.1","dependencies":{"@material/rtl":"^8.0.0","@material/shape":"^8.0.0","@material/theme":"^8.0.0","@material/ripple":"^8.0.0","@material/density":"^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/button_8.0.0_1604358010349_0.4028721428590838","host":"s3://npm-registry-packages"}},"9.0.0-canary.fdf9a2634.0":{"name":"@material/button","version":"9.0.0-canary.fdf9a2634.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"dd6fb5663f1c54070eb17d5d6298b32ecce8917d","tarball":"https://registry.npmjs.org/@material/button/-/button-9.0.0-canary.fdf9a2634.0.tgz","fileCount":26,"integrity":"sha512-+ZELlCiyaEyMw63JJa+FGL/TeFeTJfFJ0Rahy7bcTHJ6uxkh/pbxKPYHGzaJu8wbdCo2YPstPjef0zZTPbr+UA==","signatures":[{"sig":"MEYCIQDob4zbGA0czqS7FGaz1PXRPb/zj+HoAqDBpiB1iYVVyQIhAKkwvgx/tg0eQtKWFTyccM4l+kQQmaJphPoGWiViH6c4","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":397711,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfoeYcCRA9TVsSAnZWagAAahQQAI81hmyBVHkblTODIrn6\ncRV6vzThRpeMDsNVvZU+SdzTwB3iVHQ25MAS9MYlnZChpDt4376GMwqyo5gy\nmTr0TXdEA2LlesiRbA+aR45cMpra+hvagS4RlYkm91l41UVS0cPelvUMcVLo\n4Gibp/3qF1OfsMZ9LAfKcpFaoa3P7OKudRUCfGYQN7lH8tMG8YnzdyMlttUl\nGRU0WQ9TIqPg8UqBZd7Wn6FalCz1FAevvpBH0MeO2zt80+zjgOvqYs5TPOeM\nqs4BDG4zhVrZEPGW3m8TP5kIUc8i3tfqPeJqZTSsv3e9lcTwRV7UuEwMs2xf\nh+/Vbt+qJXaErnjb3OpLzGOFw8xHtS+nbNDsYcwpmRC9bdaTEuvmAjp9Toq1\n3XfSpLBhP6sQGgYxUWShi/v2so+dsnvrBVKQPOcquRD+7A16pfMvWOTyyjCM\nXovMr14Uok9zitR5SqiEC2q+OTKUygiViXZ+4RIReoFmxL4v8PlF8SdGsSte\nTXMdQ1f6s8VFZYQqJqnDIsMfzfjLXd/pwmca8xaalN4ty1Z0rU2sEpQegutp\nL7yUC0ovtwy7L+VN4cXM2yUK0G3wI5Z0uoH4weUn8w6BaTZ6lciKvrwEVRgh\nsdRtXEV9LdikHxNQZy4T/U+gobkrq2PIp8OdZNuL0V/1pyjablMMAkidHl6C\nq6fa\r\n=xD06\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n#### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.**\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n**Note: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.**\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n\n**Note: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommended to\n always include it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color)` | Sets the container fill color to the given color for an enabled button.\n`disabled-container-fill-color($color)` | Sets the container fill color to the given color for a disabled button.\n`icon-color($color)` | Sets the icon color to the given color for an enabled button.\n`disabled-icon-color($color)` | Sets the icon color to the given color for a disabled button.\n`ink-color($color)` | Sets the ink color to the given color for an enabled button, and sets the icon color to the given color unless `icon-color` is also used.\n`disabled-ink-color($color)` | Sets the ink color to the given color for a disabled button, and sets the icon color to the given color unless `icon-color` is also used.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color)` | Sets the outline color to the given color for an enabled button.\n`disabled-outline-color($color)` | Sets the outline color to the given color for a disabled button.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","description":"The Material Components for the web button component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.1","dependencies":{"@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/density":"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/button_9.0.0-canary.fdf9a2634.0_1604445723684_0.8441237041179284","host":"s3://npm-registry-packages"}},"9.0.0-canary.4a86f30a0.0":{"name":"@material/button","version":"9.0.0-canary.4a86f30a0.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"bb9fc406b21c901de58468e4163de9a5d3f39ee6","tarball":"https://registry.npmjs.org/@material/button/-/button-9.0.0-canary.4a86f30a0.0.tgz","fileCount":26,"integrity":"sha512-IDa+j4onHm75srKZ+wyEY/un3+45yXXvC8GbvdWxeKjOkGbNHXLukUYRvCxJ14cf7LyYO7/e0KwEwSRDk6QqpA==","signatures":[{"sig":"MEQCIBMHhf5XcYXWeRPRm4LEu2kQunegPH3XVsOawl7xaXFOAiA1/XaVrf0KBZz6LSJidx4BnbnL87cGQbKBFOgAFa+wjg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":397711,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfoeejCRA9TVsSAnZWagAAT4wP/2586ga2bE4ycXCrS9T5\nZhDNdSQZ63c31sg53MIhfUXUnAJ7tiR1u92txY8ZOVUyAJdjK9HD7Y7DWt4V\nsPAZRLVdAuXN2ZUYA2Oed26c9YIMWD3UhdvmbE6ynPhJ+MHCiVDJPW/xz8PN\nBLfI5PlC3dnBWQuy/8NmR5BI4sYuNLH65PW/ax/T+DmKyJ08qcvK9EO9Bedj\neHMFU1WXBIuPMZ48EQsd7ZByKQ70hOur+C2HRfpZGouzURgx/Xn9a5FxocO1\nxm4rKjLEAf1sZUblCf9sc2fb0n8BETuvf0FwUoFEjyDdDRQ4/6Buteml7bfM\nZJfyHAnIk0CVSy/sOgpsxY9TwffhGp3igg0htF0bsinjcBqNyEW9PMTvC1FH\nKXV4MUeXkWdIclpi4kOclwvB5jy6svXYykuQqTJBDYN/0luVyqfuzIWbH3IO\npm2gXBtpm5dqyCxv4xds/H/4mnJhCqk8vVP3QgrZH/l4/8BkIV+HTdwK63BZ\n13c1yFxln0IMP9mXXaiEkkdqwylXobA+CQKCO/4K6OGjZ4xrts4lzbsH7NmP\nqSpAYxWEu94Un/JihQMIuRLeM5RedPCzQpCFfF7UrBSqeC4KO2SFWmZMm+re\nHCfS/wjbVqRm1KbGODUPyAh295BdnF+RhyFEj+8iRs/x7l42zYsMKoHiCcti\nDwsS\r\n=NLSH\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n#### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.**\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n**Note: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.**\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n\n**Note: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommended to\n always include it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color)` | Sets the container fill color to the given color for an enabled button.\n`disabled-container-fill-color($color)` | Sets the container fill color to the given color for a disabled button.\n`icon-color($color)` | Sets the icon color to the given color for an enabled button.\n`disabled-icon-color($color)` | Sets the icon color to the given color for a disabled button.\n`ink-color($color)` | Sets the ink color to the given color for an enabled button, and sets the icon color to the given color unless `icon-color` is also used.\n`disabled-ink-color($color)` | Sets the ink color to the given color for a disabled button, and sets the icon color to the given color unless `icon-color` is also used.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color)` | Sets the outline color to the given color for an enabled button.\n`disabled-outline-color($color)` | Sets the outline color to the given color for a disabled button.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","description":"The Material Components for the web button component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.1","dependencies":{"@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/density":"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/button_9.0.0-canary.4a86f30a0.0_1604446115454_0.9877752357922309","host":"s3://npm-registry-packages"}},"9.0.0-canary.fc8b045f1.0":{"name":"@material/button","version":"9.0.0-canary.fc8b045f1.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"918fc7c0fb9788dd0432fb76458ba0ca5f3cff0e","tarball":"https://registry.npmjs.org/@material/button/-/button-9.0.0-canary.fc8b045f1.0.tgz","fileCount":26,"integrity":"sha512-5Zsn9aw+m2mb6AD1Wi27qmfk4/FwzLvvGkTNs6nhDC9NQZLbVbnX9dnUjbJL6Kwd0F5wGKr8PGiFTgPUKBW7ew==","signatures":[{"sig":"MEQCIG28Q8r2QM6sjZbtugHQtucEI57Hjs2acWfafiip1vgYAiBr++tFz1E8UN9pkVrmATo1pSleiNJcsF82MG+N33YSDA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":397711,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfoenHCRA9TVsSAnZWagAAulgP/RW9F8fWYuZbD71SSEHn\nFsL5HW1PRlUc6W2NYAl6INF242LPe40Ppw1tv4/Eb1gZuVLo+PyKadn3hIII\nNsRsJrXz0TbJrkGdAxHfV39nS2nRnuD0ez/R8CwmtvVtkXE1gg/y7jXAN73P\nfQf5fmzX3VeXGgOo6/YpPkyo0f1sDCkYr6PEoMmtGcYWmbvvdZQqSgXAqCa2\nVVgFgk0MUzoP25/PWmn//hg7RI1IzwG4kdXl1KR3xshFfBKQa5qwWcV/JZve\nUUTbEKbKGFjhLok9w9D6S8iphySHxcywyN/ytIY5L2z5eJUfzvsqdsJ+nQgj\ns1/CF3lrxVOC6lfNvp7n1+0hQfwk/vCqZyT+dCkcGfN/LFQsKvR+UHwIscyA\ni51NiutiNM6nKxlzYurKQypOwpBpkrAymj7mUxF5/DNgXXaCoShPOzRGhHhA\n0WqFwrwchZ1MawCBdO40/3Q2LIJIfBdjmUBVLzkzmBNdEsEmQRLFOKYE52vc\nfAMhqK55QoIc8NjmG776kjYO22YmJPyR1IKJPqcV6kVr+S8BwVJBL/vw8fWX\nHK0iGc7y4P/SY/1ateHTUaFh3t3zITwoAeFZqNYKARkjGB+0WGNiq+VMJOry\nlPfBweTBRjGdsnT4OdG75+sQhcPNE6qvEpxpwDW2JvS5ryzmg1I3MMT88Amu\niFQd\r\n=dRun\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n#### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.**\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n**Note: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.**\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n\n**Note: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommended to\n always include it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color)` | Sets the container fill color to the given color for an enabled button.\n`disabled-container-fill-color($color)` | Sets the container fill color to the given color for a disabled button.\n`icon-color($color)` | Sets the icon color to the given color for an enabled button.\n`disabled-icon-color($color)` | Sets the icon color to the given color for a disabled button.\n`ink-color($color)` | Sets the ink color to the given color for an enabled button, and sets the icon color to the given color unless `icon-color` is also used.\n`disabled-ink-color($color)` | Sets the ink color to the given color for a disabled button, and sets the icon color to the given color unless `icon-color` is also used.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color)` | Sets the outline color to the given color for an enabled button.\n`disabled-outline-color($color)` | Sets the outline color to the given color for a disabled button.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","description":"The Material Components for the web button component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.1","dependencies":{"@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/density":"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/button_9.0.0-canary.fc8b045f1.0_1604446662662_0.0006206748302304277","host":"s3://npm-registry-packages"}},"9.0.0-canary.a0b2db26b.0":{"name":"@material/button","version":"9.0.0-canary.a0b2db26b.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"a77ea3ec0cb6f1679dd4de02aeed1c68cbe96056","tarball":"https://registry.npmjs.org/@material/button/-/button-9.0.0-canary.a0b2db26b.0.tgz","fileCount":26,"integrity":"sha512-Gz53p9+k00HaCPy2jL2Z1mnc5t4/BYv+0ZC+SjcSjbGWSv8KZWU9AdwAOj8wIzSZDLhe51bBkESgd2vjqUaaNQ==","signatures":[{"sig":"MEUCICoxsAInow4xUnLMNQY/nb52Og2MLUzhq3MVCXPBnM7XAiEArbU3Om3iExE70nSjgbxKCzbWa/2D5FVxCJTqzEPus4g=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":397711,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfofFLCRA9TVsSAnZWagAA7GYP/j967Q5Al5Il0nVdn8Oa\ncSWmAZQqm5fUZBfrfAOBbKrjHk4LDoSrqrESasvBjYL9OL2/N6N7CQIt8f9O\nTlykfh+1BC3fnD4KneHz68TvX5m5qsmlAx1iDt6EvpYqVvql4yvPGWTJ5/Os\nlxpwLE8o3/t4aSkh4GPgWCbgWNWGk6DzYoTje5yhgaCNoWinSuruLfGFmOaT\ngAYDhDZ6GM3ZstpuwuJimG+9D83mBKtdfh0hGfnoLi5yl4aba8sF1PjfDmuy\nikn4RapN711rS1Ocbv+sFXzkUR5uuR/vy3eoFfnkeJjhydr7OQF504gEJaIH\n/tid1SzOnEo7gNADNr9hT7GmTQk63yB1eHectvCZhJx3zhNeO8Gh25WueO4k\nD9DTYiGL8aE7qRNnZwGVxDuujLhjr+0OetFYSbk8RTGSJNqvIEAiOGIi5TJl\nI96GpLRMEdkLrMl+p347pT3MKqp0PAih0W4u+1dATNZ4RtnhofR3GoBZhE7x\nb4lC3k8v20fW95gdcWf/Da5c9Xb5Bu8V6sb9r12qW9Bos01KSw6LoKxgyUxQ\nA+BzqohIAVjA15Al2x5B+UtnX88bJ9Q0d/1QVoOma4/ETWZ8sPMyR7Ks47Xp\nYJbB+iFmGh/xA9jSaETOwm9uSdPlJ1Y/rjmxPabFjlhgYFHL/k/Vq0HY3yNA\ni8wk\r\n=Q4JL\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n#### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.**\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n**Note: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.**\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n\n**Note: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommended to\n always include it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color)` | Sets the container fill color to the given color for an enabled button.\n`disabled-container-fill-color($color)` | Sets the container fill color to the given color for a disabled button.\n`icon-color($color)` | Sets the icon color to the given color for an enabled button.\n`disabled-icon-color($color)` | Sets the icon color to the given color for a disabled button.\n`ink-color($color)` | Sets the ink color to the given color for an enabled button, and sets the icon color to the given color unless `icon-color` is also used.\n`disabled-ink-color($color)` | Sets the ink color to the given color for a disabled button, and sets the icon color to the given color unless `icon-color` is also used.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color)` | Sets the outline color to the given color for an enabled button.\n`disabled-outline-color($color)` | Sets the outline color to the given color for a disabled button.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","description":"The Material Components for the web button component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.1","dependencies":{"@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/density":"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/button_9.0.0-canary.a0b2db26b.0_1604448587083_0.1647481671996076","host":"s3://npm-registry-packages"}},"9.0.0-canary.419e03572.0":{"name":"@material/button","version":"9.0.0-canary.419e03572.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"9777fd9303e48fc69175642581ff038d8b981b23","tarball":"https://registry.npmjs.org/@material/button/-/button-9.0.0-canary.419e03572.0.tgz","fileCount":26,"integrity":"sha512-ioMQTyw1k358nX1imT9efmzlX1RIOsruAtBQ/DIeBwOnXBblTINlkScHUljIqBeCZlcRtw6n0nQ7YlAW8b7Hpg==","signatures":[{"sig":"MEUCIQChXniPPjKjUHCgqkEz78yaIq3nEP9ipnVn+yXLRZXungIgF88AEsyjEFh6qFBjSRtgNVs9PCVgPnyvAyR6+lZlzvo=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":397711,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfogTvCRA9TVsSAnZWagAAf7oP/AlLTu5db7EQe4y4nTCR\nOmvyje9uHvngdS0byisq8zVKGdnSI/J3BPaDzvF24gQL6b34YTaOSCqnRwdZ\nKXW1i3AC6QLNH4i0zwLhIx3YJW21KhGoihqVj6Y61/y3aOYl4B1niZgejywp\n0bZIilH0tXmKQi/oayp34Ti0FhhDa6bfZENB2X6iRn5AoaX+8N3nF/xmbPxc\nXwQXfk7s+G0kqB1McnkJmSNfUsFht67QkPGfdFJ7qhUtxoe3FN3vQ4dsh/tz\nr5x9AmUAekgIBVLQywILBOcisA6GSt0d4wvR+c6/NDa8rejaAiwqRGKSxMQB\nLb31mdATIIAeNNSkd0hIN6yGz3SPN1DO4zTlsAkzGFmV/Vneb/Sg/+uH6yLz\n3do+7IIInvqOLsATtf2d3hW4h65NLOAyFB30Vfz4bLCTHVzwZrVwVgg7MXic\nNeOIUa6XhN3qiqPjg3wk/sz/WzBZSpq2gZu17/FztoXmvX2V+nnBuiFFV4zV\n2H7BlZEv7rTevcz41Nieh8Bj8NpfzBA+FdyDodPBItao5aHqQ2QXFlgtBsaf\nk95l9EpI1Z21NbFL2FrI7NQDay1IxDJVup/oLTvoX+AvnFZLHe9DCMi633b3\nyw4/ecAb44n6MESxI/8+LMU6L3h8/AKLINPFKgZW6PPR6iuZFSEs4WmEnWN5\np5CH\r\n=PHdw\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n#### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.**\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n**Note: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.**\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n\n**Note: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommended to\n always include it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color)` | Sets the container fill color to the given color for an enabled button.\n`disabled-container-fill-color($color)` | Sets the container fill color to the given color for a disabled button.\n`icon-color($color)` | Sets the icon color to the given color for an enabled button.\n`disabled-icon-color($color)` | Sets the icon color to the given color for a disabled button.\n`ink-color($color)` | Sets the ink color to the given color for an enabled button, and sets the icon color to the given color unless `icon-color` is also used.\n`disabled-ink-color($color)` | Sets the ink color to the given color for a disabled button, and sets the icon color to the given color unless `icon-color` is also used.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color)` | Sets the outline color to the given color for an enabled button.\n`disabled-outline-color($color)` | Sets the outline color to the given color for a disabled button.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","description":"The Material Components for the web button component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.1","dependencies":{"@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/density":"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/button_9.0.0-canary.419e03572.0_1604453615069_0.833981624854788","host":"s3://npm-registry-packages"}},"9.0.0-canary.a432ad542.0":{"name":"@material/button","version":"9.0.0-canary.a432ad542.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"9f4a3c2ab91e30c0d2db73d6aeca9e6d0f8adaaa","tarball":"https://registry.npmjs.org/@material/button/-/button-9.0.0-canary.a432ad542.0.tgz","fileCount":26,"integrity":"sha512-UBnDrxYfdLSZP8OX2ECQDrjINkzjefDo2VEygRVON8uGuOISKTt3whmICoHPoUNDdQecL5CPTIkWFWe8yEjJkA==","signatures":[{"sig":"MEQCIFyUclsG369MYdHCImr2N6ZrDNhdAT4EELrl0zsohORqAiBvtHir9B97D1ogHrNRQvUmeUEaWLIc6uyUBv2FAUKUnQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":397711,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfpKrzCRA9TVsSAnZWagAAbwsQAJovSbt/k+pq+Y1x6gKz\nz4Kg0POYgU881X3wNbjJZr9K+t00tFz/Cwxxeo+Kpu5jq57hv7VPhESpDHh5\n6ajQ7OPl3WfgeklJVTy8Qs4KNSwCMyU7GeiCFneY2x6BcNevLmssN2SQdhtH\ns+hhw7YAlFOv4jT9Uh9A+cAh6uhYm04L/AfIF28aLb9riiDFJ0eQoVhzPQOJ\nJwGsdNQnVjTWLRsylIuAEsxwmH4M9xjJLEOpDckSdIpnwA+hxfjOGxFhj67u\nhS2VElgFvTvbbDyigY74nJQ2qEvFTffHMhC5bShZoklN0eUWTzdTfWi9aXlb\nIh1JR8D05ztMbbBBpC2g9dxSpybcJnK7aGA2JudCmDIqB4yxxxSemLgAUiKv\nLmuD176+i3V1aQD+TgmR4XqGUzpsvrFzOjiPlNPYrmkA1NoPwLcgx7J/c74A\nqQhyIGA3QPkzJVnmW2AilZ5eRGZ10SRwGgu0eBkmLL9q5Rd61b94XvUijANc\nJ8MZLi9QFlGLBkLKnthcPRPXQtKgqS1rExiXUj9N0nUeQAWumpbb5lAFzB2y\nZOs7XQJUxyQXSqHzCvsLdA3w6GKrO+f0RhogskQ4TcdE/qb4yDxH6nZ+cEer\nmL9qk1b2Ygfdq/keK0NUeGoDEWpatmpxtqhvLtA2IagjvBg1J5xxUTDi43Qe\n3iUe\r\n=rQmd\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n#### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.**\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n**Note: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.**\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n\n**Note: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommended to\n always include it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color)` | Sets the container fill color to the given color for an enabled button.\n`disabled-container-fill-color($color)` | Sets the container fill color to the given color for a disabled button.\n`icon-color($color)` | Sets the icon color to the given color for an enabled button.\n`disabled-icon-color($color)` | Sets the icon color to the given color for a disabled button.\n`ink-color($color)` | Sets the ink color to the given color for an enabled button, and sets the icon color to the given color unless `icon-color` is also used.\n`disabled-ink-color($color)` | Sets the ink color to the given color for a disabled button, and sets the icon color to the given color unless `icon-color` is also used.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color)` | Sets the outline color to the given color for an enabled button.\n`disabled-outline-color($color)` | Sets the outline color to the given color for a disabled button.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web button component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"@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/density":"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/button_9.0.0-canary.a432ad542.0_1604627187147_0.8296932281649685","host":"s3://npm-registry-packages"}},"9.0.0-canary.e2e8aef1e.0":{"name":"@material/button","version":"9.0.0-canary.e2e8aef1e.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"202b6df6e006523bab83e1a3f8bd02aa6bafbdf6","tarball":"https://registry.npmjs.org/@material/button/-/button-9.0.0-canary.e2e8aef1e.0.tgz","fileCount":26,"integrity":"sha512-7zU+Qd/Fck4dL2+sPJtI1FoCeASsKsKoHfEohGYvXwZBLLJqnGfmkn7TFLVYC0OeO7MSN2s91ALNOos6XjG7Aw==","signatures":[{"sig":"MEYCIQD76TDOBIozTxVy83RbOxqr4nJs3wvCly7qWYekD5VRtgIhAIPYPKRTHBOoveqQRRGgKO+wQsQe2CoSBe5ODTLSh/Yu","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":397711,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfpK+BCRA9TVsSAnZWagAA4EoQAKSAgHmHQN92FZ02QLK0\na7aWmB0xQb4/734Ol44kv5V5CiFFDdq2LCctUCJ73bPZYDfzMnkAnl+I420e\nWJmcYN5oIpvBjhDxistCjh3UNUSxsqggGwBkj0wwOG80AA2vYqCzVkm15Itc\n0dBvf1Qf2398C8seQkRGuFGE/tFHRfoZjyPe13SRCJs0WrPoZdkt3aI5WO9+\n3iKtHtccu48uERMJiC36HSsbZp3zp1esBNmpckzRxQLOXskck659C/xSUgYm\nVhA2ENKadOeGlEgrfpe8nLQwRvFs+UDgfTwDqTadklbV6ec4hSVq5Hzuxv8y\nG/6IYIcLDQQSWjJil73z7DHA5JJMdenxD6FGvhO+Xl9YHR8owEMhh/MY7G2a\n9dt79AH/Wd76+5Pr4hI4QQYe4UrFS3au+NO0a6FeFB8QogPk+IXjAajnqIkd\nGe6LPow7qRz3L2fI2TKVtqa4PLeGTGzuIwR1dSXHm/Ksv5iiNMPW16yzuXUm\nAKTESGeKq2eM/wFzkqfmQxjLymWLWYHo4bWHkdqIJhquyC5QqC5kECUwARlg\nUxDDS0dZWTqqxs3USMeN9hMI8rHg8NOW6yFw4oZJkbXj4Arhd/jqTz3e5Png\nP8p+akQr4UXJtKvMGxaruuD1G9MUhtH4sImRGsJ1q2Aqa4K/p/oM5pKOeCx7\nfVUj\r\n=zYpf\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n#### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.**\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n**Note: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.**\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n\n**Note: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommended to\n always include it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color)` | Sets the container fill color to the given color for an enabled button.\n`disabled-container-fill-color($color)` | Sets the container fill color to the given color for a disabled button.\n`icon-color($color)` | Sets the icon color to the given color for an enabled button.\n`disabled-icon-color($color)` | Sets the icon color to the given color for a disabled button.\n`ink-color($color)` | Sets the ink color to the given color for an enabled button, and sets the icon color to the given color unless `icon-color` is also used.\n`disabled-ink-color($color)` | Sets the ink color to the given color for a disabled button, and sets the icon color to the given color unless `icon-color` is also used.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color)` | Sets the outline color to the given color for an enabled button.\n`disabled-outline-color($color)` | Sets the outline color to the given color for a disabled button.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web button component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"@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/density":"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/button_9.0.0-canary.e2e8aef1e.0_1604628352682_0.3440668995276548","host":"s3://npm-registry-packages"}},"9.0.0-canary.ec6b68b34.0":{"name":"@material/button","version":"9.0.0-canary.ec6b68b34.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"32e4476f5ef19e61ead64fef1a0622101aac1ea4","tarball":"https://registry.npmjs.org/@material/button/-/button-9.0.0-canary.ec6b68b34.0.tgz","fileCount":26,"integrity":"sha512-u7mx0VVrkjebGCx6ZDE6PwGIJ/IO7EJ10c6AzSy6Q4UmD+j2+hSle5AgvMLd7gPn/4mleEGmnSRqJMIVIm/yHQ==","signatures":[{"sig":"MEQCIEPFiR3EAhK1iTlUd1zZhBxEf+PZLzpXamTXP3XnxpKBAiBb/1zpOQGrTrZ/GA68Xc8AZd6axKpZBpmHwNVt7+8wRg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":403417,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfpZyDCRA9TVsSAnZWagAAoHoP/izu9vHaDWovD18jWXjq\nu+FPFcP/05J9V7rKGHEFY6hO2KDVAmVTKIhlAPoCBEPJzUbAYff+D3ZcYEe1\n0EpRJnOO7ufrCs3rLv56lnXH4uJMamfszoLIpcNAxHhJ3rFy1/317QKKXxS6\nu23uL1D+njBlxDYV6iRjn4d6rqhNyArsUCygT9AQWKSK3JMxH7wYYUv1zP7g\niCDcuzNNNeCUdiWhL3ux44QfyZS7WUOs3rsmcphg+ujs7KSFkxOy0DsSj4qu\nwruYVNjEUl7XmWgKDx+2vtRs8V0NxwPEOok5CViuxfT7z3Us71NFlZXLzMyX\narKlgfs+87dg1i5kDdYWPsc5ocQrvzea/93rs5iHuLxNJqW85ohvMWBBLIZM\nOvqrk+xON15fc5GzGw7R0znG4tT/NaKxHgcaa0Ybqt75WLY1oGOAZU+NE5HR\nDPswwytjiXK5c17WWNn5GxC3y71qxI+ngVmOwwOzZ2JKiaLPPggo9Z+NRSBh\ni7YM+i/Sxgv/hJSjWvcZMDtgD4PTrgFGMX0ViUTo0DaO67vJahIM+/Oe/6OS\nw2u54w3XCMay98vV6Gq13xzDLhRj85n8ADWX28ThfDBxhvyWO6o00604KUat\ngmW8o90SLgzeoRIEgo+jlzIBBgTgiA0KbYXt2+N8B5Sm4yBZ34/jJ+71jGnW\nEMpS\r\n=ZIU0\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n#### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.**\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n**Note: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.**\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n\n**Note: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommended to\n always include it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color)` | Sets the container fill color to the given color for an enabled button.\n`disabled-container-fill-color($color)` | Sets the container fill color to the given color for a disabled button.\n`icon-color($color)` | Sets the icon color to the given color for an enabled button.\n`disabled-icon-color($color)` | Sets the icon color to the given color for a disabled button.\n`ink-color($color)` | Sets the ink color to the given color for an enabled button, and sets the icon color to the given color unless `icon-color` is also used.\n`disabled-ink-color($color)` | Sets the ink color to the given color for a disabled button, and sets the icon color to the given color unless `icon-color` is also used.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color)` | Sets the outline color to the given color for an enabled button.\n`disabled-outline-color($color)` | Sets the outline color to the given color for a disabled button.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web button component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"@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/density":"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/button_9.0.0-canary.ec6b68b34.0_1604689027317_0.03804782268628171","host":"s3://npm-registry-packages"}},"9.0.0-canary.b39094d14.0":{"name":"@material/button","version":"9.0.0-canary.b39094d14.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"b05d00b907295f06e95aa3dede3e178c639563a7","tarball":"https://registry.npmjs.org/@material/button/-/button-9.0.0-canary.b39094d14.0.tgz","fileCount":26,"integrity":"sha512-s1fRbsvrFZ6mkLz8EqNQLJ/lQ/V2ShqFDEt5O/X6pU0kjr/RdWiEWa9zjYeeE62qAKmrnRXuscFwUAG7btpX6w==","signatures":[{"sig":"MEUCICdlYgsrey2LsGuN0VW7lr4aFKlxkJyzrl5V1itqxm6lAiEA8g75A6XNL3D+zQCrGxPGa1sOlXmzSXB5mBuRmWESUGA=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":403417,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfpb0zCRA9TVsSAnZWagAA05YP/3535alxEuZ9IDZ4EFQl\n7zvF2Qi5uMKSgI/DDv2LqszRofvKINTV+SDE0b62G+tB0g7Vq6dlRUvmQIvp\nGomBCEbaDW4jZPISXvV4GefKpvbZVn9eEwuG1aoydDrC9r+auvk1IN0A2ehv\nqt9gDzxXFPZhNU8SF6iaRR3hBDCm37GVuuG9khFBibCw1Zr1dmgQ7NJ4CTpa\nw3JBHEnlfWCe7HHoWmVD1l9BA9Km7B99S9VHmrBD8qpEQ22aNBiwH8ojICel\np56Cc1+Eb9sBktWIaq8vskPU7xPMbiDJ7JhH+kcN1cu9SmnDSHSCBXtcU14A\nyij3XYTsJFk8aJ6YdCE7PiSeYF9Nrj+tVB/nmfMKEKGGWvmxsoeS4lDuie8j\nXPOSi5q42Szpk5+FoCIRMPL98Sy+Gwi12ysaQ83OnfbofU5rqlapQyH7dOAz\nAIU28tvkutO/wSdzcb0nH3EIEvJEK6t7k+76AInNq2K3Cw55tBETOrf/4v1H\nRYgut47P91MZ9/9kMBkM+8GZeQXmv6sJzVQmuJPgHxTCNyUCIu8/QTK9xRim\nq/O7OHMk9JMS1XAyzYnieNscMjo6T13V9qRHZjfrRkyBM1oa27cuS9XjZvRg\nnsgd8IByVCXh3KkW79BOpZ+XjLAcVb+gN7DT/k1QhTN+1qL3hUHhOvijSonb\n+VPz\r\n=8uIu\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n#### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.**\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n**Note: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.**\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n\n**Note: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommended to\n always include it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color)` | Sets the container fill color to the given color for an enabled button.\n`disabled-container-fill-color($color)` | Sets the container fill color to the given color for a disabled button.\n`icon-color($color)` | Sets the icon color to the given color for an enabled button.\n`disabled-icon-color($color)` | Sets the icon color to the given color for a disabled button.\n`ink-color($color)` | Sets the ink color to the given color for an enabled button, and sets the icon color to the given color unless `icon-color` is also used.\n`disabled-ink-color($color)` | Sets the ink color to the given color for a disabled button, and sets the icon color to the given color unless `icon-color` is also used.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color)` | Sets the outline color to the given color for an enabled button.\n`disabled-outline-color($color)` | Sets the outline color to the given color for a disabled button.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web button component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"@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/density":"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/button_9.0.0-canary.b39094d14.0_1604697395010_0.3124975960626606","host":"s3://npm-registry-packages"}},"9.0.0-canary.8648b8258.0":{"name":"@material/button","version":"9.0.0-canary.8648b8258.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"5ba34a38d4eea1afb6340e6d61eb3fc5a6279e02","tarball":"https://registry.npmjs.org/@material/button/-/button-9.0.0-canary.8648b8258.0.tgz","fileCount":26,"integrity":"sha512-dXwju7gT8e8klmwiMg5DTH3vfJpjOuO/tQ8+thKnSbYHJGbup9anG0wTBwJBt1V9ub0k7TzbJtRe8yFZaMu2lw==","signatures":[{"sig":"MEQCIADmz96MkPMmnV1ZvBJX3GOG23sb2CEMP+hDYY1dBHBIAiB4m755gpFUlqsIP3VjgRkIbIYTfuZxQHt3l8QGecfrUA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":403417,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfrRI3CRA9TVsSAnZWagAA3GcP/jvVClLaGtRNCCbfx4H4\n0zWzg/j/ih0ULDsLr14qwRnBDqJJ0mgzFcgXZOJwigs+uKCBvt8dxFyThVZE\nWkxm0OpF4Y5l988jQL4Ms4xceGLw+4PYIDJHvJFVMY3oBprYz/CczmPjuHTo\np81DshrOdPYeK0CnWxh7SSt+3QgxYBqLnQVzjcxH+vYDhEVfEKYKOviEjE3Y\nZ0jKguAaO5Bg9QAJidME8kAlXscu/Xregd8DgQagENDdWLupaX88tOh7y78N\nb6P04XSODaPFdJ3eE3LjQPnLFYjODa3VQVVr5h7VXVZLgr1hDsFnrkvrkW/Y\nAkDMvncoCcLOf+HbyC8B46i9Kxgl75rjCl4sVbmEVu0wxZgmDC9I5EyGzfQK\nDqmmqmPhmRv1/TZvF7gvDLRhq16mZ5tEJ/2P2QXAtFewqZBrSzkNpO+z9wEc\nI4ZVkirzX5KUigf14TLwnW4of/FOVryLl1t4WEi2QMfVEwmmc4jlAmxoLIvV\n5HAOBqC5DYX7d05NIhFTZpo/cjZoHx4iTJmkcDtWN5NVHTrn7tPL9Caf8Ru7\nJ2jFSiEUpN3UGphqkbWlg96Lp6MWPqPj6bnPYzSJdsq3yMgv+RNKAv2mMSIz\nJ4Y8XzNtUq9UeOdjYh3mKGQbpJGGO9gC2sq8++pLrmvnSIoJoDUTdyaq0g7N\nlAMF\r\n=87J2\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n#### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.**\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n**Note: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.**\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n\n**Note: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommended to\n always include it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color)` | Sets the container fill color to the given color for an enabled button.\n`disabled-container-fill-color($color)` | Sets the container fill color to the given color for a disabled button.\n`icon-color($color)` | Sets the icon color to the given color for an enabled button.\n`disabled-icon-color($color)` | Sets the icon color to the given color for a disabled button.\n`ink-color($color)` | Sets the ink color to the given color for an enabled button, and sets the icon color to the given color unless `icon-color` is also used.\n`disabled-ink-color($color)` | Sets the ink color to the given color for a disabled button, and sets the icon color to the given color unless `icon-color` is also used.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color)` | Sets the outline color to the given color for an enabled button.\n`disabled-outline-color($color)` | Sets the outline color to the given color for a disabled button.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web button component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"@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/density":"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/button_9.0.0-canary.8648b8258.0_1605177910780_0.46519465742986266","host":"s3://npm-registry-packages"}},"9.0.0-canary.240c5f74f.0":{"name":"@material/button","version":"9.0.0-canary.240c5f74f.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"942211349952be400a9892b2d8afe98c63676e48","tarball":"https://registry.npmjs.org/@material/button/-/button-9.0.0-canary.240c5f74f.0.tgz","fileCount":26,"integrity":"sha512-K9dMjf468oJzo1i7mnubPXiN7beP6A53ySvYlo6WNiZbE9jcldaEP1rceIwpFB/Cx/6U2myLH77wrQuD9pVJeg==","signatures":[{"sig":"MEUCID2XI3Q+urokDBA8SRUfkhLJYNEz9QwICNwCt1wqZLo4AiEA/rUdCsX/HVohQHSFn2qYmWb1kjC7qsjW6eRFqseVcgI=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":403417,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfrZlCCRA9TVsSAnZWagAAsmAP/RT///C6qvcaGVTM3Ai9\nreXXYJ1lwb8PBQTXD09J70Os7kfNdXxwP7psVmlv6SCwB0FM0Bts47zJAwfC\nDqKCk7428tlmNXWACp4lCpSySFAhLlM3MfcqRUtfXzEoG0Cg/qj4weDBuKkp\nHhWAGzzrSIoWbiGJsjwWDLTmzNKE8CcJdwC0ucI3DlEpB8q48DQ8ttimjj2z\n5kHrG0v87nE0aFzvlMv+qUfGbpLaBWLFckGgY0lqMS6F2OGK9vbMsC6vsInQ\nroaQdlqHfGEqf6QScaY8gd6OBSwpfIuxcpGyhR5jEFU4joCJeaFON4Af7Oh6\nyL/1K8Cj2kWluApnS7GOH3pN0aRS3KCPqTkMyYQrUqeSYMy9Ieob2t4Gq97n\nWaXgKrht7ioUjWlrkvTNLga39nkFC2dyNW+SGXfelpL0wbJ/JN5vEkPO/RUS\nnvTNGxBJz8wEIBv8AGVaHGkJOOymcIAgOfNv8+WX5Lx5VApckehtQKajosik\n9ZIYn2m4Hd8tDb4r5BnODF1qF9UagvpWeGg7Fc93nohQACWiTj4FNwTZmRmT\n/R+jrSSeB67Oz1/UpyP+xDIvgH5f6cSWGhu2bI1JGfLQjUJiYZoweLy2BWdI\naySuxy/Dew/vAHp+CLQl67StatSgdodKGF4kVJo9PTdHIGySSfSpH/tad0B6\nFMXV\r\n=8vRu\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n#### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.**\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n**Note: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.**\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n\n**Note: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommended to\n always include it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color)` | Sets the container fill color to the given color for an enabled button.\n`disabled-container-fill-color($color)` | Sets the container fill color to the given color for a disabled button.\n`icon-color($color)` | Sets the icon color to the given color for an enabled button.\n`disabled-icon-color($color)` | Sets the icon color to the given color for a disabled button.\n`ink-color($color)` | Sets the ink color to the given color for an enabled button, and sets the icon color to the given color unless `icon-color` is also used.\n`disabled-ink-color($color)` | Sets the ink color to the given color for a disabled button, and sets the icon color to the given color unless `icon-color` is also used.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color)` | Sets the outline color to the given color for an enabled button.\n`disabled-outline-color($color)` | Sets the outline color to the given color for a disabled button.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web button component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"@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/density":"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/button_9.0.0-canary.240c5f74f.0_1605212481850_0.7690133715352976","host":"s3://npm-registry-packages"}},"9.0.0-canary.6cf6ba4f4.0":{"name":"@material/button","version":"9.0.0-canary.6cf6ba4f4.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"27ae95f4bab86dcc0174d98e02b4d2c123b38a8a","tarball":"https://registry.npmjs.org/@material/button/-/button-9.0.0-canary.6cf6ba4f4.0.tgz","fileCount":26,"integrity":"sha512-E7ZIruBlXPs/SDGWgIlM3DAmL3Q7oOGM7yy3M8l2lWVgZNEDqhJ3ctQeZjSjQOkbRN7iZTxJCnp/osh8Q/IZhA==","signatures":[{"sig":"MEQCIFIHOMO1NtVts+8U2TEk8p4VonFWd8tDOoKrbW6bDuy8AiAaJroO7xvET4dn5G6GoLhFj6ZSB61IbwQP/KDzP/ZfrA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":403417,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfssn0CRA9TVsSAnZWagAAU7AQAJloDThqFrjHUJaq7gbC\n8h7uPuCEUAnR8eGsr0ySGay/WuzCaxnXIP4hHePuI3RuufCSEZcfdnmQLNZ+\ntgp817I/epqWbRF36qMwDN1VcIWiaPVmZkvIvUNiiny5cHnUmZYGxhJfkZpV\nIoveFSxzxaiSCGRGyoAXfDjMdu71U8qCpuIcyAEnMSim7BH+tkFeO9wNw7sg\nosXaZc2yUJuiz7hyjCnktmL6PO3hANotyB3kY0VD/4U33+fwB4vEOZLaKaEg\nRNE6IfxcuEjz1j0+l+8edptQ9h3HKBG7WvqnWkjqgEYD6eAxqy4/9aq9LoxB\nBP6a62/XsG4sReadNSldrHiy/VitRAaGc0ZB6kLU+NDMoq0euEaLiuxgiH+H\nBxmWNzYNxjeS+3BVPPFgmYzbZZIKlLiaCpkj3K9fS6fJ++KXZO49oXM/Mo4o\n8NbywcKRH+gd9DNsAljaFpk/OMWPCSkMnF1WERYfVCU97nJ36HtPAq7c8GSB\n86lUzHK808by2bchBSLxx2mXRwOVIfVf945k7aybfYUytyK955VowPFoV04C\nWVs6CeBSN8JXkEOZFGL/99apqAL5HKH0QQ++UyJuYcT0lkzJwfwe5StNRIp7\nAuieTJvu7pbK6aIu7NrZrrda/2kKIxgXJVSg4Z2kNwclFqtIwqT4+JhTqQQB\nANjk\r\n=8Njc\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n#### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.**\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n**Note: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.**\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n\n**Note: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommended to\n always include it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color)` | Sets the container fill color to the given color for an enabled button.\n`disabled-container-fill-color($color)` | Sets the container fill color to the given color for a disabled button.\n`icon-color($color)` | Sets the icon color to the given color for an enabled button.\n`disabled-icon-color($color)` | Sets the icon color to the given color for a disabled button.\n`ink-color($color)` | Sets the ink color to the given color for an enabled button, and sets the icon color to the given color unless `icon-color` is also used.\n`disabled-ink-color($color)` | Sets the ink color to the given color for a disabled button, and sets the icon color to the given color unless `icon-color` is also used.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color)` | Sets the outline color to the given color for an enabled button.\n`disabled-outline-color($color)` | Sets the outline color to the given color for a disabled button.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web button component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"@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/density":"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/button_9.0.0-canary.6cf6ba4f4.0_1605552628228_0.3849037738915406","host":"s3://npm-registry-packages"}},"9.0.0-canary.07f3e01b7.0":{"name":"@material/button","version":"9.0.0-canary.07f3e01b7.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"a707320eaabca698e0f94efdf789e44fab509494","tarball":"https://registry.npmjs.org/@material/button/-/button-9.0.0-canary.07f3e01b7.0.tgz","fileCount":26,"integrity":"sha512-ZsNvspjhK+9mU2O7bXFRifGaZBSXsIOOwQCEk7LCyfLtthsQ8IIROkoxKtdC7LUfpiPAdldswRuFcNVIFPL8eA==","signatures":[{"sig":"MEQCIERpRLitqnhVbHIP6fkEuckwb9Pgxc7W/5hbIyj27EzRAiAcMMXzH/d1L1311ixIQ10f9ZO9Ukw5MmC1RiWgxC7q/Q==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":403417,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfsvMsCRA9TVsSAnZWagAA9VYP/A2VpfTQDbOzdkPeZkrP\nwpMmiPiXbI/doa3Qr56hPoQDtjBtZGKUWdyDooJcdwn/NY2e9YRT0CBW8iF2\nJkqpAc49nQ+dKTbKev1TePOt4DwQPQwqCPeBburk2arHLDS/UUGEPuxZrXSJ\ntmxuSNmLrOFM7AkSioXOsceFX9P6nKf46f5lBTejvjx71YhbAikBsGOKNaXP\nyTfMeHzb5PCZp3wlwrwRog1X9mH18VfOJ8QJH9q+BAd+tbYYzv4iuwrSSu7w\nxwqZdH6Vp+0UHiqv9zpNf7gxXU4dxUKH60gHYpnbH5vFSPx0wbQ98fjEC7rY\nNOAZOnLyNktJ/QVi62mUMZEAf7haRA1f/AuQEQb62HjS5r8W+3H5I4ZTMijC\nbK4mBqFabtsjxW6XXyS+4otrpKAxSkwrLz5wWDYudD/tfZXWSLSda6m52Tje\nwL5IpnhCKw0roLdlYybyCA5Zidn8IwLKL7aRABTku/tg9+4KRVwA/VwmaXer\nPOens3vIMmopAPcVuEUCKvPlvGJcvT16sDBMc3xXv3N5baiBijbklBxmh+f0\n1rfbykXTMqjkQc7ajDmSJWEfmhG8tExY1Vc0fqiY/uTEdTCjDUMz8TXaXqs2\nVO1QagfYbOf8MiHexcG9hzlmiTwPiTUERaPyWeRtEfFJsQXpbu1v9TX7jOXG\nQPha\r\n=7Viq\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n#### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.**\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n**Note: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.**\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n\n**Note: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommended to\n always include it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color)` | Sets the container fill color to the given color for an enabled button.\n`disabled-container-fill-color($color)` | Sets the container fill color to the given color for a disabled button.\n`icon-color($color)` | Sets the icon color to the given color for an enabled button.\n`disabled-icon-color($color)` | Sets the icon color to the given color for a disabled button.\n`ink-color($color)` | Sets the ink color to the given color for an enabled button, and sets the icon color to the given color unless `icon-color` is also used.\n`disabled-ink-color($color)` | Sets the ink color to the given color for a disabled button, and sets the icon color to the given color unless `icon-color` is also used.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color)` | Sets the outline color to the given color for an enabled button.\n`disabled-outline-color($color)` | Sets the outline color to the given color for a disabled button.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web button component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"@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/density":"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/button_9.0.0-canary.07f3e01b7.0_1605563180003_0.3300084083017383","host":"s3://npm-registry-packages"}},"9.0.0-canary.23491cf85.0":{"name":"@material/button","version":"9.0.0-canary.23491cf85.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"63db47e954af8062b69d71b0bf50c37b7a0c1446","tarball":"https://registry.npmjs.org/@material/button/-/button-9.0.0-canary.23491cf85.0.tgz","fileCount":26,"integrity":"sha512-8BxkJSUJsw6jx4f2+qg7CZd4hCtvbaSv4Po+6FGi/UAPtxc+VsFoB4caOMsdZb58dWM7iC+LRpqGrF2/rhjh5w==","signatures":[{"sig":"MEUCIQCpesk7KV0OmVIUtaN0uhLbeOvovNzok69SBGuc7SwFNAIgEj6DSiTulIgO1pdr9TZB5kjOgFjabIQrAWdr6Y3stig=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":403417,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfsxatCRA9TVsSAnZWagAAS6QQAJ15CZlyNSrJ4E8XjYrJ\n/xYsDSQ89ovv9TmCwJR/1flyuTj7TBLJARYDWaobbmMDNr4YjfpTVs4MbSal\nsUAkz8kUYwqOdr/DWdfZACzO05NgWET9rWhOoanVWzg48JEG1B7poHuUsmRi\nEbGVaSB1a1uyAyhns8n7gtmz7wMcqHQBzVBW49Zsi2kRKWhWJLBWo+rY+MkX\nLRrjlKsrPbLyiUzkS37XO2JFLR0RwLR2Y+1sN2LLDRH979E3cpCwvqvQzP5V\nNbhIW7Xo1kVxgDSCBgv2FuK9uvpiMM2GySrWpA0ahdpYH+4erta7j9zPeyNN\nKicnpoUV9pBPFuARoJRcQTnf9FF9uo2BPjU5vDk6r/Tkcr8+AoDMm8XeJAqk\nkdWi3UdZyjnJzbzVdMzmHAO45lkUgy53wgzRvFG0LDARHEfzGSFS/aj32RPk\npyXImp93sf3OPhiefEJzuct6ZctMDbpQjfX8U5heIrnaGI0P5t+tePL5hbAq\nichgVaHHOF8Hrr+QnFC6WQRQuW1xsJ/gXS4C/zL7lxSXs35uX89VUJQZQ5Y5\nS1JXZlxowSYoXCWlYkMjlGFAyBishNkSpIeBgZ1kI/djvPTx51R2ut80T1AE\n8qhfYLTga+4RvXw3COBYlh72r7eToY9mRSqZtbr70w6gKzWFWbwlObDXKH6h\ngulE\r\n=QWce\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n#### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.**\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n**Note: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.**\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n\n**Note: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommended to\n always include it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color)` | Sets the container fill color to the given color for an enabled button.\n`disabled-container-fill-color($color)` | Sets the container fill color to the given color for a disabled button.\n`icon-color($color)` | Sets the icon color to the given color for an enabled button.\n`disabled-icon-color($color)` | Sets the icon color to the given color for a disabled button.\n`ink-color($color)` | Sets the ink color to the given color for an enabled button, and sets the icon color to the given color unless `icon-color` is also used.\n`disabled-ink-color($color)` | Sets the ink color to the given color for a disabled button, and sets the icon color to the given color unless `icon-color` is also used.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color)` | Sets the outline color to the given color for an enabled button.\n`disabled-outline-color($color)` | Sets the outline color to the given color for a disabled button.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web button component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"@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/density":"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/button_9.0.0-canary.23491cf85.0_1605572268636_0.06883265539266792","host":"s3://npm-registry-packages"}},"9.0.0-canary.b659d4fc3.0":{"name":"@material/button","version":"9.0.0-canary.b659d4fc3.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"5c77274c297a72bac300a68325072234b85705e7","tarball":"https://registry.npmjs.org/@material/button/-/button-9.0.0-canary.b659d4fc3.0.tgz","fileCount":26,"integrity":"sha512-IjLcZh1Acw1RuSiw1qXyPiAcyJYPDGV0ibh/e2uXSB5byOXdrnQTgW6wyqFP24CatqggSXwsRppjTnJgvVqRTg==","signatures":[{"sig":"MEUCIQDG/4+s3FB2Y/8j44YDqa9/M0NpPqQXLKMXvYIapJzldgIgBmLdliiCK1j1t6xZEagfBGYPMRTevDeOJzCu3TZRd9A=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":403417,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfsxiECRA9TVsSAnZWagAAYe4P/2oL0fRjVbLR0X06lq2P\ngBkkJ3OetVKpAjTuZyge5TdhROmZ7hbRQed9aUgFD73PFNxK3ISdD3hODRS/\nuu6Z5+oxDh+i+BURgwg86aU6pYwhtH9/p8wxWGQ2gRP/VudrGocAiGTsrWHa\n39Y/cm+WkMmpkgZAJo2YHbKttkeQVFL0xppEc4LR2Xv+wPTRJsvqdIkRIZDk\npuyPmilW6yUNEju7YwEBnIGYteUlWVeSdLWpN1LkdRRL4yn+cHwJkRES8xUL\n+31ntllhaM1997OLybbn6bafh8DGbdMTxsfJtm9A7mwZKr62ZeJo3pkvQEpm\nFiGyVhQfraZ1QToFqCRwdfODo8Ro2m8AI69GNj3vRT5WsWKsi9gczeN+c3C1\nwvGyl7yNtPdelo/y6yVlPqlB5adLmL4RZsNJSTWFI42cbvjWCalH41iLbwVF\nyzv+Juv+jwETBrTRNt++z6vOj+KfWHAaRVljjKnfJsGp9GqfgSGlxJ7Z6GNe\ndwiT3sfNF8rRn07FRY7QID52geN/P+oZl/V8TV4wBOGpnd7BhLy9wl0oNmvb\n7xoq2ZxH7nOkO2WHvpP10D/uSgMQQ5RTn3i9qKUM841oznTtCVWCOP1NAQ4r\n1eZtSi8SUuSdmlXZyMm2MAmkXzez8xrPEno6IZ0q7JfjGUZuiUpuSsbddVjo\noEJ/\r\n=eAJQ\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n#### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.**\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n**Note: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.**\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n\n**Note: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommended to\n always include it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color)` | Sets the container fill color to the given color for an enabled button.\n`disabled-container-fill-color($color)` | Sets the container fill color to the given color for a disabled button.\n`icon-color($color)` | Sets the icon color to the given color for an enabled button.\n`disabled-icon-color($color)` | Sets the icon color to the given color for a disabled button.\n`ink-color($color)` | Sets the ink color to the given color for an enabled button, and sets the icon color to the given color unless `icon-color` is also used.\n`disabled-ink-color($color)` | Sets the ink color to the given color for a disabled button, and sets the icon color to the given color unless `icon-color` is also used.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color)` | Sets the outline color to the given color for an enabled button.\n`disabled-outline-color($color)` | Sets the outline color to the given color for a disabled button.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web button component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"@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/density":"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/button_9.0.0-canary.b659d4fc3.0_1605572740454_0.4421023852950319","host":"s3://npm-registry-packages"}},"9.0.0-canary.d8a3aed67.0":{"name":"@material/button","version":"9.0.0-canary.d8a3aed67.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"e2bcdfcbaba67127c399ec2d80e05af6c78d035a","tarball":"https://registry.npmjs.org/@material/button/-/button-9.0.0-canary.d8a3aed67.0.tgz","fileCount":26,"integrity":"sha512-WoOeR863X5kdg7NbGQNvB+BRlTVS3+E4G3MJsAWagJWtmQlzzi1MkhW7g2UOMyUi1n21eJ6ZgvWzDBIUEv6cGw==","signatures":[{"sig":"MEYCIQCDJEch4PS7uaWChk5ZyqIMpFPr0OzMp0p16lqW68+gMQIhAMfNDSJt/3xJ4z6dqEkl8lsmK5afruZs1Dxqjpm+UYvf","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":403449,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfs+wBCRA9TVsSAnZWagAAzXgP/2tc4/eW56OAR/wNgYK8\nkQc7KtzoSJ5fdUPXjkkc2wvCDClRlO26kdvaTDKxFLO+WPB2PZ24MKWzFP2d\ntY2XA3iAVyt/1RsqO6Ef21OSnl+wVZj62veQQPGdmueZIU1QyJJHDnSaoQ35\nmwzAq62kTRe6KDObSB+538KeLOTyETpqKaLPQLah2dLaIae9tFJsY+bgreIp\nSl3v8IbeeZsbA/VH4pQ4+SJ8vf1Q6DmIpEHlETypVDREUPRufNQaXjKxmrzT\nfhaYj4Hn7MygHFrzPQusbLctv8UgKG/IQ3qbSnI6Ugz9bqj8ilf3e8dQcR3/\nOEzPhjMbXTttcwmyYrBuZH2/wXCddQ0hzA9wH8e64nHkhlIA8F2FR0JEozhI\n2mBXyCBrqTHm6gILFNAZAdT1Sy/+aF/9rqaVvnEJDiQb/xPs8ICZBez2JXFX\nRF6C5RVj2Ty6iOMCGrXx3CQeyZUTk+bQGXyOCtPv+dzmzIwNSd0FALV/8od4\nqlk3+aLY2BFS0aI4UMUkeP5c6J3Q17MV5WbeYo341rRirdbrBE72EUXJ9DKo\nf7pgi7jbYg9OAsAn+wXmTUX1UomTcepMjEorpqB+am/AYGC+kiT9wbkGlS0v\nMQoJteMLI+v+leVT/E0o+DwY/XG0MWRM2HOh+qMWHXXq0VjR8lXxOrCsAtyb\nJEWl\r\n=3ljw\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n#### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.**\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n**Note: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.**\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n\n**Note: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommended to\n always include it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color)` | Sets the container fill color to the given color for an enabled button.\n`disabled-container-fill-color($color)` | Sets the container fill color to the given color for a disabled button.\n`icon-color($color)` | Sets the icon color to the given color for an enabled button.\n`disabled-icon-color($color)` | Sets the icon color to the given color for a disabled button.\n`ink-color($color)` | Sets the ink color to the given color for an enabled button, and sets the icon color to the given color unless `icon-color` is also used.\n`disabled-ink-color($color)` | Sets the ink color to the given color for a disabled button, and sets the icon color to the given color unless `icon-color` is also used.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color)` | Sets the outline color to the given color for an enabled button.\n`disabled-outline-color($color)` | Sets the outline color to the given color for a disabled button.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web button component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"@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/density":"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/button_9.0.0-canary.d8a3aed67.0_1605626880675_0.211602723228131","host":"s3://npm-registry-packages"}},"9.0.0-canary.482ff9091.0":{"name":"@material/button","version":"9.0.0-canary.482ff9091.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"c0cf4873b28f6a27255818f1a4a8b70b92dcc245","tarball":"https://registry.npmjs.org/@material/button/-/button-9.0.0-canary.482ff9091.0.tgz","fileCount":26,"integrity":"sha512-VPy9rK8xVhzdVCzJ+9N1/xkTN2u3PENDAJeK/fI7TAww2+Q8MUb4WCztTNWi2njCvn6F6aV8GcEBtOHq4b8L5g==","signatures":[{"sig":"MEYCIQCRP6qruYXuUmqB/seB6bbBT5BvJvd61B97GxkzvhsR1QIhALAa2Jq9+ftZO6qPKqbP8pSjRuHFVbfJyiyc7D/w3awL","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":403449,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJftA9PCRA9TVsSAnZWagAA9gUP/1/g5fxpCedENLvM+otv\nvc9VDptFiWsRog023aNGrYBaEdT7HGpH2X6fdwLNbZ5QrR1M53C2dz34PYh7\nqJKfgm4E4a4oyxCLMd6ULbFzFk2kqX8mPeeb5YvCZndjbun0LW4zNF6jYGQj\nt9XYaM9bawPPReKC5aBG1281S4Xp1OghJ8X7Ltj2hfUM/Q92q/TgsbCmQsdM\nRRSr3IlpQpUQ36Vknw14UiM3ZC2eifQVCB9GeBUrdKKt8cQa7+0HAi4jZjGW\njtdBVBTdqNkFW4MIIIq7BG/kaGzghm3BTWLiQAMseDPYgHGdTCmhIOFii4hX\n8N14gTILBqgRFuefrYKmpFY7TA4ht26pPvYfYDKsxsxEdBTfr55SSOE7Fufq\nqugYtkf7OqE9XfzAIOHRhrUXf41H08pME0p2nVSVPBlMN3NrOwjBCt4gx9EN\nOo76tOkLbGmN50MJctLvH56v31aLGy4J1Cvc6dqxKgggZsUoV9koOB5go93k\nk6MC5k8vvMKfCdcUdvDTaByOM6l6px/WsIwV1AYD0nzfAA0fR6Tf7DtApaQI\nF1eT3esBisBwuEuxvPXINt64H82v9U7Nvjzcl71Ozic90SWNqbKpbwnkaHez\n1jfTl/MNc3n2dr7TjLcmqdztnhXbZvspnnYWDayXZQee4Vyr5VpOIeZ7qKKA\nnsVE\r\n=OKql\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n#### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.**\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n**Note: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.**\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n\n**Note: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommended to\n always include it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color)` | Sets the container fill color to the given color for an enabled button.\n`disabled-container-fill-color($color)` | Sets the container fill color to the given color for a disabled button.\n`icon-color($color)` | Sets the icon color to the given color for an enabled button.\n`disabled-icon-color($color)` | Sets the icon color to the given color for a disabled button.\n`ink-color($color)` | Sets the ink color to the given color for an enabled button, and sets the icon color to the given color unless `icon-color` is also used.\n`disabled-ink-color($color)` | Sets the ink color to the given color for a disabled button, and sets the icon color to the given color unless `icon-color` is also used.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color)` | Sets the outline color to the given color for an enabled button.\n`disabled-outline-color($color)` | Sets the outline color to the given color for a disabled button.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web button component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"@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/density":"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/button_9.0.0-canary.482ff9091.0_1605635919233_0.4195730733871563","host":"s3://npm-registry-packages"}},"9.0.0-canary.99cfb6bd5.0":{"name":"@material/button","version":"9.0.0-canary.99cfb6bd5.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"98008e50ea2c8ddccba3fa941564b72fb1505973","tarball":"https://registry.npmjs.org/@material/button/-/button-9.0.0-canary.99cfb6bd5.0.tgz","fileCount":26,"integrity":"sha512-QuoKXwU8AMzEr3xnvVqfRX/Ir3lBMU3SZtAnGaGhomK7VG1AGan/owjJEfxiCVhL82ooBMed9lEJk4p075sq5A==","signatures":[{"sig":"MEUCIHoD1rBGQCjxuftxKZrcK9adxHR5fTZJjGfMNc8OlK/5AiEAxmQXxz45RPc+G++FpeoPnJDccFFbbHGblmAgH6xQ8Cw=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":403449,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJftWuKCRA9TVsSAnZWagAAxncP/jdqAabR68Pyj6VOagEX\nzhnaXCid68GZIGfi7U72+PPaPMcdZraTof6iBLo2ZhFhnDqrEefDOB1l4QG/\nZwPieOn6sWUoLuZWS1VQ2kZ7k+Uf5MhL6AGthAcNYh+OG9xZ2Jb/M+4hCBKm\ndwe2/NK8PrZdn7VRieEwnJ/ixHn4wJDw56KjFkWmeJ3iWRtenu2XaGvU2Px/\nnITQ6OMEG4CZ/+Ggd4bUiaHO+ZTIBkjYsa7mPn/VMbz28YqPwgAa6ZVgNKUS\nI34RNCDbzY/wfDvKYk1ZniWuOaOiLIrSxUGcraIpqw+1vvL0PpfOmjOegyo/\npUs/efwTEjfHh107ZJduN5rhhwOg7bOI6Yb1GZ3+Re9Vtuiv0q67Pqt5IHXn\nO8ikje/y985qLkFznpP5g8ZVaJsF5KFZgct2TIs0n4dC/3D3E2oYBt7QUBPo\n3pnTTwIc9VNw0ohPxXw3hostpPzQJDHOIKRVceZfuWjNMtSPbGD0MVPG8E7T\nlA7qpZaZ3WK+nmVAj9Km7uMoUNncu57HdnOX31JCeU367oaSYTJkYEbQUNKg\n9TijL9+AeTUbSDdUb0HoLjTiRLQY89NjKP9yHzO6f0Wb0/1Bl9zuux5aT0kP\nJmvdnyqzJ19/0zy113zah1/OEh96n8/4X7y+1U6isc+kv7z8afh/afYhpDno\nXPM+\r\n=W83N\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n#### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.**\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n**Note: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.**\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n\n**Note: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommended to\n always include it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color)` | Sets the container fill color to the given color for an enabled button.\n`disabled-container-fill-color($color)` | Sets the container fill color to the given color for a disabled button.\n`icon-color($color)` | Sets the icon color to the given color for an enabled button.\n`disabled-icon-color($color)` | Sets the icon color to the given color for a disabled button.\n`ink-color($color)` | Sets the ink color to the given color for an enabled button, and sets the icon color to the given color unless `icon-color` is also used.\n`disabled-ink-color($color)` | Sets the ink color to the given color for a disabled button, and sets the icon color to the given color unless `icon-color` is also used.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color)` | Sets the outline color to the given color for an enabled button.\n`disabled-outline-color($color)` | Sets the outline color to the given color for a disabled button.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web button component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"@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/density":"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/button_9.0.0-canary.99cfb6bd5.0_1605725065723_0.45592656280819144","host":"s3://npm-registry-packages"}},"9.0.0-canary.b98d15d90.0":{"name":"@material/button","version":"9.0.0-canary.b98d15d90.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"4debea3d035a28a48dabbf8f63530ef74d015f06","tarball":"https://registry.npmjs.org/@material/button/-/button-9.0.0-canary.b98d15d90.0.tgz","fileCount":26,"integrity":"sha512-A1C9BPZiLrZMNTgcEAk+RXWoxe36j3Ia+oiDk4weF2QeBqQjsDKSVQ+BxAbXpIEQOhYDBphFpxVJJr4cxeureA==","signatures":[{"sig":"MEYCIQCXDeVsC8ZhYsf1VJt884U96blCZSfptfKrgFXrLFVtTQIhAOHSCkGP6gBnkMlruQusiG5TQiqc9kFNbaZO4HZHpWCc","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":403449,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJftaGsCRA9TVsSAnZWagAAJwQP/i8XxY9GmNjrRxYGE2G9\nOa7rzWkutX4vS/pczfCk4tPHoKsJnwV/PFV5LSgboDCC5iAFQNHzqCl34ZgG\n4Ry31GqEO6d43FMSefsyMNgUdBUJnE3hgZrGokloMXZHsu4sd36Meo8b80Fv\nHsd3nq8kzgc8elMhTmv0otNk/dOC+0YhPRQDfZ7E64oX8x644trYywQW5dI+\n78uvC+QbW+Kl6Ov7C7eDIq8ZBpZe4CbiVrgOTf2qzxC6IMhot7KmtiKZ3OVV\nl+/idkdCzrbDKX2YeFPPMbikwkwTmH49Go6MFa+kyf/NjvZ8EmszuhEVBB2m\nMfR+rHwWWq2DMjffp5ZYFUZLZeiMQj7kH9pweRrDYtDHq+Mg1kNp3pCQ1YEm\nhS/9GiYPCLTOh+w8qN+Vw/h9q+91ISL90pDXqEAVSTqcfOn+ZgLqdFjVK8GM\nHVLrROcUmet2utxRDR6J1ZXk0UXa+m1ptT2SLNLjCi4MI6wPTXFgZspTachL\nIvYYNjtBA5uUzPq22N7dWkyN6P8tQ6MjaiOVTsKiFhjmbRNsufN033VWPfWu\nkqU2TY+kNfm0n4EJkrD59bgQSFIXPv/cPcVoQn6Qd2QWnNKe8ENO1RvqmxJg\nNDi14UdmeW9+MuoixioY0QglCPC/9sKPwfNqJPoLd/lHENnKdZbnCP9pRwqp\nKGow\r\n=o8Ya\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n#### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.**\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n**Note: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.**\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n\n**Note: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommended to\n always include it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color)` | Sets the container fill color to the given color for an enabled button.\n`disabled-container-fill-color($color)` | Sets the container fill color to the given color for a disabled button.\n`icon-color($color)` | Sets the icon color to the given color for an enabled button.\n`disabled-icon-color($color)` | Sets the icon color to the given color for a disabled button.\n`ink-color($color)` | Sets the ink color to the given color for an enabled button, and sets the icon color to the given color unless `icon-color` is also used.\n`disabled-ink-color($color)` | Sets the ink color to the given color for a disabled button, and sets the icon color to the given color unless `icon-color` is also used.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color)` | Sets the outline color to the given color for an enabled button.\n`disabled-outline-color($color)` | Sets the outline color to the given color for a disabled button.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web button component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"@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/density":"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/button_9.0.0-canary.b98d15d90.0_1605738923916_0.5763463107269944","host":"s3://npm-registry-packages"}},"9.0.0-canary.30c11bfc2.0":{"name":"@material/button","version":"9.0.0-canary.30c11bfc2.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"f3c5210c857207887538256d292a0dc84dff1cd4","tarball":"https://registry.npmjs.org/@material/button/-/button-9.0.0-canary.30c11bfc2.0.tgz","fileCount":26,"integrity":"sha512-92NS20obKxZnuLtAin54ueLvYhNG0QnsJeMFK9N2bToQtNtyEPvqAEORQusGc+9DmzEs5Y210abKv8Uue8b7+A==","signatures":[{"sig":"MEYCIQD7hJzurpErWrrsHJw+ysbV9EFu7qiHymBry3ILMJ8UuAIhAJoEcY9SiDjNakMZwd2EfhN+aW2Bv6E9W1WFPFzpyK4W","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":403449,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJftcnLCRA9TVsSAnZWagAAESIP/3vqtZx8b3KS1tGjTi9R\nfNUVCSUywbMI0Hi+cv/14/bQyOrYiyZrh5YsqV7VehfogYtja2pUVhsXXBIZ\n1cIwKn2ylh2mLrT2+fk/c3E6pKQ0MkW75stpDCnOSDiqOodx21SRmiszIlmN\n4vGqgp9Y7lt0J7KS303V3WsgxJYGCBKhA6DGxq6CwQMuOYzdE0RH8bwTMu9H\nHWFRmRJvMMBK1aDwKFzNh4PoTgjOtANML2KNl2uWKSHttX4ghblLLXuAojV1\nXaGvCueV/4PY3npp1o8TAKcLqMjLerZnDJwgUbB5gfvIxEhtCoBfixT7+kvQ\nyUVQV9qx2uva2jHBMyVzDfL3wWnKZk3+xINdJxoJimrDhsHTB82UAW6hoeBr\nfsWbquVXaL6eaNfZu4rgeNhm84rs14DG81swzaTi4yxeq8FNN5Izi8YRVx1R\nLp4kg849Se3CgRBLiRZTMBLUQXLIBEFZAYSrJr9bvhrI0wPny+xhvw35OYOy\n1wGH4oR0N6XcTmpK3HjyYzbKUJ24z5p3mIkI/VxvFMWtWq9yRiJViQrfkIyk\nF8Nnalt75s6/A/PKSmOeB+kpi4WWZBmlsqC9MLy0CNY2DTLVlZBSP12YZFrv\nEzD5UACZJqWrptm81KsIaiRWaHGyIe/gSgeQnpmO7/eYJXn76qtxMha7x1es\nLY5w\r\n=NLxh\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n#### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.**\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n**Note: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.**\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n\n**Note: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommended to\n always include it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color)` | Sets the container fill color to the given color for an enabled button.\n`disabled-container-fill-color($color)` | Sets the container fill color to the given color for a disabled button.\n`icon-color($color)` | Sets the icon color to the given color for an enabled button.\n`disabled-icon-color($color)` | Sets the icon color to the given color for a disabled button.\n`ink-color($color)` | Sets the ink color to the given color for an enabled button, and sets the icon color to the given color unless `icon-color` is also used.\n`disabled-ink-color($color)` | Sets the ink color to the given color for a disabled button, and sets the icon color to the given color unless `icon-color` is also used.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color)` | Sets the outline color to the given color for an enabled button.\n`disabled-outline-color($color)` | Sets the outline color to the given color for a disabled button.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web button component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"@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/density":"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/button_9.0.0-canary.30c11bfc2.0_1605749195105_0.024777878198090075","host":"s3://npm-registry-packages"}},"9.0.0-canary.1b731d51b.0":{"name":"@material/button","version":"9.0.0-canary.1b731d51b.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"0955ff30fe98d1a2d1eb3b8f058d835c80269005","tarball":"https://registry.npmjs.org/@material/button/-/button-9.0.0-canary.1b731d51b.0.tgz","fileCount":26,"integrity":"sha512-EoiTD+OjNjIImdB1Y3bpa1QOqXj6OfoIEIY5uqCqvaMJEun206Af3lbJuYdWcb+IKVM1oS9LA6Ae5i88d4+d5A==","signatures":[{"sig":"MEQCIBrTHK2R/LVmhNh1DpdWWe9i+cevDJquw35SZPObbmARAiA6zfmXhNb4+484aSOYGws9ERmV1PPoHM3n4Wa16iT+bQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":403449,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJftr8ICRA9TVsSAnZWagAA0/YP/i4vWTqCBHEuh4o0iXqy\n98L9FI7uZFTG3Oxq1PBvkxSN11HZGUJvTiUeR1xAq7bICwyiNRo3iwyYkr7l\n1HIBoM1vyMfVmg50WMcvv2pqyyNKFlSyFu7iQ4YhcLAuwKUALoy+h3CIS8pM\nbBRGSczakwglXrWVh2DVB4nW0XeWvfHsnArVnyX7934yBOuXYkKhLnDb5mWM\ncVGz7ZPRXZcnvDOi3JAfjTRbm7Ez9CHexKshFOcXwR6DDK2m+X/ZkHnta9Dm\nML/we3ZjvPKyo/tlevX8+bSCQ/ggGYo9UvXJhq10+b3f6/KUycgqt+FKYOyU\nm573QAy9DW+h0bKDbkY1wEtIewgcvNvZZ+imAFi+fkLJkLzzlShb8qVuHsFP\n4qMRRABYg3TjJjgdydftxsYE0bmEMkScrxprDiYM/E7Idm9WwmMh6cxlG6HD\nE8ypZoRbd8JNLfziIc/jkTYsrMhFLQKf1rP04HCD533MfofMEsCwEyduYm6d\nR9EQtLTzBEcImqP0e3xuszkOwiqxViWvTU+WZW6iEsQEeRcFhT9nQNuPurD7\nOaNRA4lhkjA6xCZ2NpBe0vci8hC8EeG0vt810QdymSTg7EvjPVAd4PEfhBgB\nOoKKhr1v6wse87WqBpxG8RVShEX2E2J/AEEbaWwg2Z91+hXzqEckJU2SQm+u\n9nWn\r\n=aKC7\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n#### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.**\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n**Note: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.**\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n\n**Note: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommended to\n always include it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color)` | Sets the container fill color to the given color for an enabled button.\n`disabled-container-fill-color($color)` | Sets the container fill color to the given color for a disabled button.\n`icon-color($color)` | Sets the icon color to the given color for an enabled button.\n`disabled-icon-color($color)` | Sets the icon color to the given color for a disabled button.\n`ink-color($color)` | Sets the ink color to the given color for an enabled button, and sets the icon color to the given color unless `icon-color` is also used.\n`disabled-ink-color($color)` | Sets the ink color to the given color for a disabled button, and sets the icon color to the given color unless `icon-color` is also used.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color)` | Sets the outline color to the given color for an enabled button.\n`disabled-outline-color($color)` | Sets the outline color to the given color for a disabled button.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web button component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"@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/density":"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/button_9.0.0-canary.1b731d51b.0_1605811975887_0.9841318262768368","host":"s3://npm-registry-packages"}},"9.0.0-canary.4ae94ff78.0":{"name":"@material/button","version":"9.0.0-canary.4ae94ff78.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"ceaee83707d8eb563d0a95500796fa3106d50d20","tarball":"https://registry.npmjs.org/@material/button/-/button-9.0.0-canary.4ae94ff78.0.tgz","fileCount":26,"integrity":"sha512-VNttp6VE2JLThQyfWMt6qwTWqrx65t8SexExh1o+uQlUgpeCL6RzNAdVzz2Mr7brx0hj5b0FC17P9FurL878Sg==","signatures":[{"sig":"MEYCIQDpFEynGVJsIeJ4yJLHxnhw4hYll+86qQYsxPgWTY+JEwIhALdemlpYo0LpdwdSU7qneA6EZU4s2bum5XvgAZZi+vHe","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":403449,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJftr+3CRA9TVsSAnZWagAAH4EP/0++epQrCXaAi7WOSR1O\nLbxe+II3dmFCGcn7/dIQM4gClq/4aSGj8eyqjhrYDOQtSJozzXJ21eNFoRrE\nEIDrnXiaPdCWBY37XlSsMGmgvfiHeyww+Rmtm5ZO35uNNM5eXbJcDzMv0iAB\ncT+ANXqFO5Nxeot79wQ6KCdno96PfD/2CQRnEw321zSFzVUzdhs5+YGOUguq\ny21Bpe/UDwTam1hiWUcVHrZjAgJYXNC7uFx5C63KhcWd7kXmHi1U0Vh2ws1s\n/q1KQNk1/4BdYdQ4waGChqGz4ri8WyWJ7KApeH6pRrjqfxxEISDnqlvYdJGE\nq52Ga3obCdW8qGmtvvt0U5Z6EI9j6JfkmI6qhrtN7SDLbxD5LlniCw2KQms8\nSlkysPH2zg4LYqoXTm8bjCSw5IIjyKKiXBcBEi0tKSa49kZYOoq8kI5s6rDJ\nSpIp5Ac0zjRBrV5kwbV5Tm2q/zE993m8ih9xV81gTzM8HwPu4QeSgAnyeCIq\nt7mwLS/08U0K4KoKpsgicoXzAbH3ZFh6SCXZu7e2M3ldVBewmvTYw6/rmmhZ\njGrZJvghClSJA6FaRa8cF3PEywaROiDu1DetGe34Wk9CP9bFXBT6N1eQF1Lv\nrdEV7Qs6op/E9f7pfySZuiiqmx/Njd0fMcaG5NNen7stOvgsa5vhuGPeCrkT\nSY8U\r\n=MIxh\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n#### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.**\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n**Note: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.**\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n\n**Note: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommended to\n always include it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color)` | Sets the container fill color to the given color for an enabled button.\n`disabled-container-fill-color($color)` | Sets the container fill color to the given color for a disabled button.\n`icon-color($color)` | Sets the icon color to the given color for an enabled button.\n`disabled-icon-color($color)` | Sets the icon color to the given color for a disabled button.\n`ink-color($color)` | Sets the ink color to the given color for an enabled button, and sets the icon color to the given color unless `icon-color` is also used.\n`disabled-ink-color($color)` | Sets the ink color to the given color for a disabled button, and sets the icon color to the given color unless `icon-color` is also used.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color)` | Sets the outline color to the given color for an enabled button.\n`disabled-outline-color($color)` | Sets the outline color to the given color for a disabled button.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web button component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"@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/density":"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/button_9.0.0-canary.4ae94ff78.0_1605812150724_0.7459718750848923","host":"s3://npm-registry-packages"}},"9.0.0-canary.7ad038e1d.0":{"name":"@material/button","version":"9.0.0-canary.7ad038e1d.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"d8d895730e840732bad9c3173afa72e52223983f","tarball":"https://registry.npmjs.org/@material/button/-/button-9.0.0-canary.7ad038e1d.0.tgz","fileCount":26,"integrity":"sha512-+1+3sM6vY/nEghxlqHmFrDnGYDypm0fvdBWfS9jQm8wqgMIGDxgAK+Ho2WoNykhMRvQXvohCs14tmuwNwIEPkQ==","signatures":[{"sig":"MEYCIQCf5AJgCNHC4LB5axjAzX1ARvBf3atUDHHx4svK9omj9wIhAMLg1NAJB1Yr6+Rz1Uw0QjkMrIshnz4Lc4gVxTYj7h5+","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":403449,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJftsUhCRA9TVsSAnZWagAAuSgP/inaod2/RQMLpBWbj2oQ\nSfBoXmArH9UipcszwQiIbIkM0mzsAZneTgfRkJGWFlrdjCUhcdBvVB51jrD7\nWdHW8I9tj4ngJtZxBTNabrF9I9Mc3PZE2e0tCw3G9j6UXBRXM5ovLCt0LY1h\n0lcSynwa0Tgz0TjMQSlIA5ElNPYNhSCX8PhcFWIIYDxOx+jr1TaBsMWIGyH5\n7J8ykq0CT0rl4ftXCdmYuIqmdA1L/EU2U4K1IPI3JaVNTzAmNeRDi8UgBojN\ntLdAJDgkkrH3Tpr9rNf5MIqyagNNjGU+LMpLpPIDr+7r+mlaDLCVPoxSPpS2\nfXNlJ0Ky0rBUx4DfCoSAGfnMCi6oW/WxghBOpW1koVSNDM2YhzGSaKAZ0NHW\ny/JZgnGkIwtkUGkjWak5x6F9xH7KJRCbONYJiyxvJncRVuSDwBoRgy9ekZ2c\nU8WkENT9JjenjT0HhcSRggaZa1Ge6+/ORZKduHo7d+d5BFaSYWbFdLipeBOi\nvtLiZwskE/H3WP9t95scjck6Gz3I5JlXXiSNwRK3KWwSGCvzbuM7GZCMqbMk\nJspAJbCcovvRH2sBFaFSbLsl1YMzgcD8zhOqTrNWg2SRIcqWHhoM+wLEg9yd\nH0CaztmAuaRotSKBrAXGyYmox8rJdvdKG3NavgVIhfWeu+xjXwgxtTIkzqU4\nMXsA\r\n=+jUy\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n#### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.**\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n**Note: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.**\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n\n**Note: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommended to\n always include it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color)` | Sets the container fill color to the given color for an enabled button.\n`disabled-container-fill-color($color)` | Sets the container fill color to the given color for a disabled button.\n`icon-color($color)` | Sets the icon color to the given color for an enabled button.\n`disabled-icon-color($color)` | Sets the icon color to the given color for a disabled button.\n`ink-color($color)` | Sets the ink color to the given color for an enabled button, and sets the icon color to the given color unless `icon-color` is also used.\n`disabled-ink-color($color)` | Sets the ink color to the given color for a disabled button, and sets the icon color to the given color unless `icon-color` is also used.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color)` | Sets the outline color to the given color for an enabled button.\n`disabled-outline-color($color)` | Sets the outline color to the given color for a disabled button.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web button component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"@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/density":"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/button_9.0.0-canary.7ad038e1d.0_1605813537062_0.7561016149787609","host":"s3://npm-registry-packages"}},"9.0.0-canary.a41527604.0":{"name":"@material/button","version":"9.0.0-canary.a41527604.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"f0652ffe23f247e2147fb340ccf15e44e540fb12","tarball":"https://registry.npmjs.org/@material/button/-/button-9.0.0-canary.a41527604.0.tgz","fileCount":26,"integrity":"sha512-7UmZz8DbUNxXX7gRq1CH0y/P7qdEoolvTJB4IROKXpm2EGpXCjeZ4sK/Fru5raa3rNZjbOg76RNeFtcTHuMRxg==","signatures":[{"sig":"MEQCIDmvO2KB/q9Fm2NXpnmwb99tYZjW8F0PDT5ariIFGHIqAiBMVeTfSsgVJrA/FElG51i+HEkp91SNA35RmchDLx7e5Q==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":403449,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfts7sCRA9TVsSAnZWagAAQjYP/1KKqWtBv4HoFkQMDty2\n9M1WSwt5PVSvoCAZhk7xmbeFKSI3Y8GoEzBMnZqMTALZjYt4HMnp0Xupg8ow\nJoe9W7uM5hcpJbu698ep9U8R9CBKJdWLALB/ts0jqb2XynZ9uZWUYsboW6bU\nnkPC+yKr3s1x+4GzVAfhHBJHzB7Ec2buRX5aSjZXOCHfE4tqNhDpBLX+KiJz\nb8AnvegIDg5GqHQLsvFEC4uZGOKbN4TOCahwYkbY+iAs6FVRVdGiauksCCGC\nxgFLUIm3O8V9k25W6AMLo/9u2W3GopaqekizJRDk+cjRppDEpCBB+kCOGyyt\nU03kY7W1ZfKBxhYKHYQS6unVLBkw4xGBTqOCB7u540KoNbQZnMTBcNlSYR+i\nKR4pdZrATk75dwmknPfBaj2hVKnWbupolqUqaPqNsMXfyxQgMTj3pa+sdxvB\nZj3d/JVLcbk4wReO6eJAekAGaCWlFi7hM+Rorupcxs7R5elvW9vql9pVAEF9\nqv6P1ZOQ2L21WNc3cVL+B0Vf/oooRfhBq/W0RJXVwQCi1MBi0wpfAfbDm9FG\nZU1Tu6w5OcBlWNIkGifTYR550SliX2d9cgUvJ9LIlbPpHda01QzEbiL6Ed8Y\n40TVzbJKfa5X6/p2fTpzPgSpxBxKeCo3KU1UHpesLQXN1BiJNy45JSIR+Wbz\nt87/\r\n=SsgW\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n#### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.**\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n**Note: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.**\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n\n**Note: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommended to\n always include it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color)` | Sets the container fill color to the given color for an enabled button.\n`disabled-container-fill-color($color)` | Sets the container fill color to the given color for a disabled button.\n`icon-color($color)` | Sets the icon color to the given color for an enabled button.\n`disabled-icon-color($color)` | Sets the icon color to the given color for a disabled button.\n`ink-color($color)` | Sets the ink color to the given color for an enabled button, and sets the icon color to the given color unless `icon-color` is also used.\n`disabled-ink-color($color)` | Sets the ink color to the given color for a disabled button, and sets the icon color to the given color unless `icon-color` is also used.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color)` | Sets the outline color to the given color for an enabled button.\n`disabled-outline-color($color)` | Sets the outline color to the given color for a disabled button.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web button component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"@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/density":"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/button_9.0.0-canary.a41527604.0_1605816044187_0.910476232419962","host":"s3://npm-registry-packages"}},"9.0.0-canary.7b0e2b377.0":{"name":"@material/button","version":"9.0.0-canary.7b0e2b377.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"6c6125020ad5f9285414639b6f0754da00cbaf66","tarball":"https://registry.npmjs.org/@material/button/-/button-9.0.0-canary.7b0e2b377.0.tgz","fileCount":26,"integrity":"sha512-BZ/Wp+usGSKQWtmU9xSDjwHx1AoYCHj+T9oq1Gtnk91TKL5P5VHfh+rZSrA0baJIvsstTamUd7WqSOeXLZcBBQ==","signatures":[{"sig":"MEUCIQDdiJgEgfukcs4qTh7YRzwfaBrtiJbTVRtLoCty6L3l1QIgVU2DaRfdVNtYo8lo5zo7DudcA3STCRKf3ezvnR3Yz10=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":403449,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfuEmTCRA9TVsSAnZWagAAEzcP+wRpAm0pcPhdNHBIplhC\neI4Y3MLyJdg3jNnwWyp/f1ZQdWaiccwuhya5JWU1Om4VdgXDOUIKrnPCO19V\nHrcJExp9PNX2I61lrFapbFf6oSb4Zxn4aDR9umvtJ4lZhDFjc1fspXTwivQu\nu6QcejnMShX+3oak+solYsGAdtLR7waW3KsJF+nf2JupAqFZPxwYZiqnzMft\n2Q8cScA+afAIKox3TU8WyN1xtimDkUIPhB43ma+Eif0K5G3ZOy6Fk8cE+M7/\nUfXNUUDKxenDUc3QHy0Nz0U44f/XEkrXlibC6urPoATNiZW+Dg64CKkTztK9\ny4uS8NYizYuzPo9tqVm34d3lIvFw1ejiPJUmOPyI5eD0tsXKnqTVNwsL4Gt7\nMD6jaGixXcCte4CwcQ5fHsUq1gN6W0sdDLJgoXIjk9GgEV7S/G/7dADKdaLN\nUe7ebnKd8HxttmMqT33IoFvehd7AwEmcAaXXvEdvjo1kXI6i7ArmIqcByCMP\niltQLpuxZSRwoo73ZsXz+6u99j7uVTBMEwMZTlW1r9QijGVm2P5p5q7tMsR9\njZnSkzFlTqUe4RjsmsWSjftbO766Q0EkFMDk7PIcPHBGfiqmOvBNBY3IOSL8\nfLV3uzMHs4n/bPoa6Q2i3OVRvzeuFJ7hH/FibmdJTgzWwf8BQ66RrZ2flz3P\no77o\r\n=g0fM\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n#### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.**\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n**Note: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.**\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n\n**Note: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommended to\n always include it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color)` | Sets the container fill color to the given color for an enabled button.\n`disabled-container-fill-color($color)` | Sets the container fill color to the given color for a disabled button.\n`icon-color($color)` | Sets the icon color to the given color for an enabled button.\n`disabled-icon-color($color)` | Sets the icon color to the given color for a disabled button.\n`ink-color($color)` | Sets the ink color to the given color for an enabled button, and sets the icon color to the given color unless `icon-color` is also used.\n`disabled-ink-color($color)` | Sets the ink color to the given color for a disabled button, and sets the icon color to the given color unless `icon-color` is also used.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color)` | Sets the outline color to the given color for an enabled button.\n`disabled-outline-color($color)` | Sets the outline color to the given color for a disabled button.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web button component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"@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/density":"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/button_9.0.0-canary.7b0e2b377.0_1605912978980_0.032482044904763585","host":"s3://npm-registry-packages"}},"9.0.0-canary.c927a5d05.0":{"name":"@material/button","version":"9.0.0-canary.c927a5d05.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"f1ecca8d9a94cfacc5dc1ac942a1a6729e6021f2","tarball":"https://registry.npmjs.org/@material/button/-/button-9.0.0-canary.c927a5d05.0.tgz","fileCount":26,"integrity":"sha512-NPicqcvfSgME1dzwR3pCBjyxEYHukNfCHMajrCwCX00Z59tyor4aKv8FK9wnyRa4ycFw65+1VgqVPVfVpsv9MA==","signatures":[{"sig":"MEUCIHs+Cq32wuUbhBVbiAJm5FN1Dy9iJ3jlXC2SqRseRkGSAiEAj9qjlPP+aE9OCiiDcn6VqwJly7YE0hyAdSHT1Aqdtdc=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":403449,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfvBHxCRA9TVsSAnZWagAAXJoP/0yYBkqdpJF5jmtl8HgM\nkfgi5UolNO4pBrv1ymqu0SbR2SBFs/poT5Z28bohjeeSmfzEQBYXx9nqbWEk\nOBA/zM+C7oDek61aoDR07Hq4t+zOHCC1T43gxqb8pLFTUbjCL8kYihCL8Rvs\nywnF3m4UvMn/Yuq0IZldR1kZq5iQSP3Hub9vGiZCko+M2UhbcSlp/hJFjBGw\n0E9ggZqvWpeezOBR0uaWNM/gZ0BBEoR79lz+5S/6Tma5eYdDelYlteV7Rxqf\nkODkyeB8BZDc9xjZFiPCP6bDO7HtA+qNRN+e3Qda/Tuk1MzWrWUAtrDgRHia\neodStyfFBfjuWEU04ALobWZmMiUB6I4nfiPMBbRNL0EhBvswnDmfVZtSUzyj\n403MuFnUZQ5mvAYj49vfsTuZ4OS7VD6v3pwf00k8Y9J1bwucmirFy7Gr3TAI\n6CBmJlG/fZgKU6i8vuInifWScBXYr+CAm9QzRR7MVGHg59fqeJyRng3R7kwd\nSfIZlxbLEcz2Quv/P8e/wah0oNraIzdgFyk3xaVbByYF2pz9V721vYY4LThX\nMSvtWG8SHekYloBaBbx4OtWr1c1KTDBRoJbseqlLJKWm1FZMXyOmRCvSSsvg\nweD5/RJquB8k1cPdk3hY1zNWM/By5W4eK1/aiNb38CiFuU2UD+e8Il2s6hLj\nZNC4\r\n=6Lsw\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n#### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.**\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n**Note: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.**\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n\n**Note: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommended to\n always include it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color)` | Sets the container fill color to the given color for an enabled button.\n`disabled-container-fill-color($color)` | Sets the container fill color to the given color for a disabled button.\n`icon-color($color)` | Sets the icon color to the given color for an enabled button.\n`disabled-icon-color($color)` | Sets the icon color to the given color for a disabled button.\n`ink-color($color)` | Sets the ink color to the given color for an enabled button, and sets the icon color to the given color unless `icon-color` is also used.\n`disabled-ink-color($color)` | Sets the ink color to the given color for a disabled button, and sets the icon color to the given color unless `icon-color` is also used.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color)` | Sets the outline color to the given color for an enabled button.\n`disabled-outline-color($color)` | Sets the outline color to the given color for a disabled button.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web button component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"@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/density":"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/button_9.0.0-canary.c927a5d05.0_1606160881454_0.11118261844135935","host":"s3://npm-registry-packages"}},"9.0.0-canary.b349b5185.0":{"name":"@material/button","version":"9.0.0-canary.b349b5185.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"dc8a73bd39c2470e54277d02a0c28911ad91fb3c","tarball":"https://registry.npmjs.org/@material/button/-/button-9.0.0-canary.b349b5185.0.tgz","fileCount":26,"integrity":"sha512-rYHQIA2jQzW7Kpn2R0Mxbv3Y8SDkiIC/W2TFrvbXPW+4hLN14FevWMovnYCRtT2CD2V/Ki49gSd3TV6YTr/GFw==","signatures":[{"sig":"MEQCIDUIe6dBf/2oJvgni3mKg2RbrdPtr0D5Wh4hidV+r506AiAQQF1iVP8OK4yCm/swNVe3dUAzye5YATPoMXzdAaA2Lg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":403449,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfvT5HCRA9TVsSAnZWagAAdasP/1Hot1Fp8IqG42qbY51W\nPpq1JxCzGLsH4Rr7pBnV1mVZodiGQ3ijqsnl65vbmB90qoxh+ZQ5lEuEBBwt\naMtzzT3hYg+boJZZTjxCv14CY5AfaU5mDI9MMJXQP6JKf4ogEH0m9+n5YCLK\njvzlHEONrK/vSlF/pCwQJxkg5RtLNV42/yCmQUQsZdEr/VfCHOJX3Oo1k/QD\ndT5eVPTPxlAy6ACv7XXSokH0vaJpyRWfctEy9x0Vit88wtZDxdOU3OOtoW7u\no7T2O71kLJ7uQl0gloX4LcWWgarm4bIRctJcI7vnsjv9RR0ipJaUY2OBOeuK\nxJNJLha0ZYBrkWppF+idDRsuthwcUiTjKrOWu5MRnC55GOWfVYdXrMpiy2PH\n8MlstNkgXWZv7N/yiO0VqtHCH6b6heHaOXB3XeYUndxwEeXI/DBAFWRLT2fa\nidNz4XAGzG6Jgf6i2PcmnlPWttt9/a2b3TUWIlzoNzvcylKUSGgmhrtNI3HA\nNZpxw5o7Wh9w+1fNKcL12Jec0M0R0B14FvFtISVvemmxOoKr0rXhETeMsCoL\n4pIm1EsyIL9Ch1S+DCDWJQGBxdEvPEsuU4D5nnAFSOkhTbfjmid0eo5fNiLz\nFa67FfnvK8bH+oT6ekK30FbdK2q8iAA27mTMK95rRSusRxG5ShT/les4wZvc\nJOMs\r\n=oh4q\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n#### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.**\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n**Note: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.**\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n\n**Note: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommended to\n always include it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color)` | Sets the container fill color to the given color for an enabled button.\n`disabled-container-fill-color($color)` | Sets the container fill color to the given color for a disabled button.\n`icon-color($color)` | Sets the icon color to the given color for an enabled button.\n`disabled-icon-color($color)` | Sets the icon color to the given color for a disabled button.\n`ink-color($color)` | Sets the ink color to the given color for an enabled button, and sets the icon color to the given color unless `icon-color` is also used.\n`disabled-ink-color($color)` | Sets the ink color to the given color for a disabled button, and sets the icon color to the given color unless `icon-color` is also used.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color)` | Sets the outline color to the given color for an enabled button.\n`disabled-outline-color($color)` | Sets the outline color to the given color for a disabled button.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web button component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"@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/density":"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/button_9.0.0-canary.b349b5185.0_1606237766496_0.4782270574829375","host":"s3://npm-registry-packages"}},"9.0.0-canary.9083b7d61.0":{"name":"@material/button","version":"9.0.0-canary.9083b7d61.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"9808306f3ebeb1c63ff702d23ad5f9c99fc9c1be","tarball":"https://registry.npmjs.org/@material/button/-/button-9.0.0-canary.9083b7d61.0.tgz","fileCount":26,"integrity":"sha512-OxQjhZZZ1G6HwlB39dBxQI5k0d8Z9IpG9+74Xi48RYnmfWRE5ZtclugpziZQ9N2rdwht2wj6Ej17DPYmkaGiOw==","signatures":[{"sig":"MEUCIQD+gbl9cmZqgLtA0MpHijSOfHN2fsRY8rSHs82qAof2PQIgKzHpUeEIMLzIuT3vinsl7nD6x6BbbEb4G+Lg0EINbJM=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":403449,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfvXgSCRA9TVsSAnZWagAA6qUP/2XBurpnnm9lqAIK1ZAA\noP57CV/c12vih51D/YLfrXRxQygSL+AzBEUjnHUl4g216YoIDi+GklclWx1l\nAWml17hM/XGE3eNaPhG59gh8QeqNv2+pGi+Ned87E5AM3k/sxDk6XGltuGRc\n9R4UWROmaqovDCajf8r3AFcaeyQkGhF6Rs9H5Aq66evEJ2hfgWRtn5N7s/81\nmG7HknpHzL0pfVFLSLOMk1tcok0Zfqpa9LVcS1tYfWBemJrWFJ1idGAe/1gs\n7zDH8vGUHfEAxylYktrIpzRnDgkBfX8ilIYeu7t+GMiD567oUMkkzbexxqVU\nMbC7wcf2Qdt619KRBZ3OiUjMnZNpnOWvnPOo0UsLrqAUV4yKQtcM7hEFUnjf\nnUka13g6pvxsJbOF3rzxe3YoyTEMeMMD0vIi2IcJMQA4muBmRHyODMMAgtOx\nfEc5vx+AZ7i6kKXzMf8GVL7FGTf4BERIUQNiBRhwBgRbBUZhE0LdvYn2y35+\nmwHWlFVPVtWrxpPmcai7vl4qviOXWepCmf3LxVGShXBAAXilAHQ5L2OUXEeI\n1CgZ7uTUxOClevRGxUJqj/b17k9q4B/hDM14iufIjxXxt4rU+cu9GN4rZltL\nSbOyMiYkrhWKBAh5LK+PqQrh1kDM183Np2A9fUI/fbvWMOlppf+tInC5BW4m\nx9Om\r\n=Lyzg\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n#### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.**\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n**Note: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.**\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n\n**Note: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommended to\n always include it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color)` | Sets the container fill color to the given color for an enabled button.\n`disabled-container-fill-color($color)` | Sets the container fill color to the given color for a disabled button.\n`icon-color($color)` | Sets the icon color to the given color for an enabled button.\n`disabled-icon-color($color)` | Sets the icon color to the given color for a disabled button.\n`ink-color($color)` | Sets the ink color to the given color for an enabled button, and sets the icon color to the given color unless `icon-color` is also used.\n`disabled-ink-color($color)` | Sets the ink color to the given color for a disabled button, and sets the icon color to the given color unless `icon-color` is also used.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color)` | Sets the outline color to the given color for an enabled button.\n`disabled-outline-color($color)` | Sets the outline color to the given color for a disabled button.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web button component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"@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/density":"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/button_9.0.0-canary.9083b7d61.0_1606252561713_0.40694317872367924","host":"s3://npm-registry-packages"}},"9.0.0-canary.eff7b46ac.0":{"name":"@material/button","version":"9.0.0-canary.eff7b46ac.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"eff9845f18e3768d39588ba442e339f25ea4187a","tarball":"https://registry.npmjs.org/@material/button/-/button-9.0.0-canary.eff7b46ac.0.tgz","fileCount":26,"integrity":"sha512-wGT2+/xfB4fN9ekqdNqBr7+YDBcp8r5iH4OWSZXO9P5K5Fb+A7vtufsVeLeKoRKU4mDuT40p7gDAjPprWixi4Q==","signatures":[{"sig":"MEYCIQDcrKWYKJN9lvoHD1yQkOF0fz6c1kYdx2ci1Y5MM1NYCwIhAKk4ldp/v0ceae3Ec3e/4TBMvrIk/D2osYlsFwdOntAP","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":403449,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfvZfYCRA9TVsSAnZWagAAunQP/1+6f0VIoP6KR5BtVyBe\n2WKJMUfe/DBFCCYYt/z0ISZHW26QIuE20B20DgHYXPlmmQJT8b1hoQW5Robf\nFOid2G6RqFW51TeKmhonSa1wGCgeAMwa5LhisA2u2ou5Q1/htKqWvDk1wrXH\nK0zxj3T9O8z9oe56fDRh0oNDDglT5mvWsVdlTON8zOGeOciqD7IGBqkzPPDk\naX22B5/xsZKC/qZu5ofsW7UM89iIH9kUj2WPbQG7zm7KfYi5tOESuGEdRMwz\nTAjv+T+NwqsxdkNzJXk7dCO5QCfbGwtSbaAL8S6Y1KPj2TsB+BG5w63kvLak\nyzjkvXqdhNWqgyIAL7q6O/YOK4QH4Pj3JHCyrU14KS36tXTNZCNkuGN0VXlQ\nNlOX1sZ8kcJ54bMdhelekbTxp7Y0jVgci8+izi24Z9zvCVo5Sse64RyyVavs\nV17xcqArK9u8e4I9mweZaRGNbDG4TeH8NKlOVoKj4DqbNkMYUtmUdKg+O31z\nhp0+Q6C33kDB8L4w5hFUra/BvOHdYCh4YTjMZdrw7ZEIfp0LcROCTd4rtO8Z\nL0ab3GfYQk1PmD200Ys1LVlxufSembdSv4kYv/Eyz4aJg5OEgumuaKQtyaob\nYwFaIERkEMbEBVdbb6YBVy2NjEJiSxEblqjc/lks+FaMY2olH1Rf8KkYJ9N7\nlQU7\r\n=DHex\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n#### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.**\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n**Note: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.**\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n\n**Note: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommended to\n always include it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color)` | Sets the container fill color to the given color for an enabled button.\n`disabled-container-fill-color($color)` | Sets the container fill color to the given color for a disabled button.\n`icon-color($color)` | Sets the icon color to the given color for an enabled button.\n`disabled-icon-color($color)` | Sets the icon color to the given color for a disabled button.\n`ink-color($color)` | Sets the ink color to the given color for an enabled button, and sets the icon color to the given color unless `icon-color` is also used.\n`disabled-ink-color($color)` | Sets the ink color to the given color for a disabled button, and sets the icon color to the given color unless `icon-color` is also used.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color)` | Sets the outline color to the given color for an enabled button.\n`disabled-outline-color($color)` | Sets the outline color to the given color for a disabled button.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web button component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"@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/density":"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/button_9.0.0-canary.eff7b46ac.0_1606260696354_0.9111611425867248","host":"s3://npm-registry-packages"}},"9.0.0-canary.ae27b44b0.0":{"name":"@material/button","version":"9.0.0-canary.ae27b44b0.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"a727c06fac2b4cd0cad08be052014ead1dcbdd53","tarball":"https://registry.npmjs.org/@material/button/-/button-9.0.0-canary.ae27b44b0.0.tgz","fileCount":26,"integrity":"sha512-COn6c3w6ab9UzZS7+0ZPeYdYq9u21VIcCs0dOMR22REcFGcbNS9aG4VS9pRv8HnjNeZYlEa9LZDJ+xv/LItRZQ==","signatures":[{"sig":"MEUCIQCbPHARYmyGPkSHSjC29xLwFoULBKyKbuCWr6hxsFqB9wIgb+tOWQEQYe0eLrg1Wy3gT2GNtOpJxc80vUTbVt1vTRM=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":403449,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfvnl4CRA9TVsSAnZWagAAukkP/1DelgQ6NGQmNicNDcte\ntQdv3YZNP9IyOt6AGBboUBVTGdxiaDgQvDmggPWHqlFnXV+0qP0V+7ZxwJ9P\nzPPKO8gjjw4VF32NG5+DamoBHHT1cqVLuaDzTcygEscd4px9OM0SgFl/iCEQ\nRqOlteR0de5Eirxhe98Rqw1SJ3/eF+zm8VXh+PZaH1SlT3gLTvkJFnLGWIlz\nOvRvQfUVo/8fCuwSbciIwGEdAVfuiN0AxRvWpzfUupd8UydRvooR85IlSDcT\n4Uuted30S2/ataLXhISv9h0dl6t4RnR10ncSYlvKXCrdhD8pXAP5DejEYNdX\n7urJ3RJhudvgD6Z0ZGsKzmXobKoi3ZetvjKGGeS2IFXbeZNgodCp3pIHirRS\nDDBsLXq2pU9pYP+QIH8mlcKiW7kNuM12MKJB1OB/n+ujp4VCqS1YISkPHO/6\nMJldG9B+46H+s7YPpMtP+cHQIk4y6s5862XkxlwxhDpxwB4Cz32On0mSksaZ\nT3r9wXg0jNChiyNA7hCJmgu8ZbVesmiQQTD3EqoxJokefVCKJf7VoX/v8adY\nrasP1QlmJL1wsXs1TXo5jnEC2jD4ZR/Qnz3I9GUPSr7ZzyJReQme58DpRtoM\nt8wSYZn/m0DBn5L3wQunNdhKe+hL3bzjehp9RIYg4K4uquQmkdXD+JYtNRx9\nfDkh\r\n=cYP8\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n#### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.**\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n**Note: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.**\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n\n**Note: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommended to\n always include it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color)` | Sets the container fill color to the given color for an enabled button.\n`disabled-container-fill-color($color)` | Sets the container fill color to the given color for a disabled button.\n`icon-color($color)` | Sets the icon color to the given color for an enabled button.\n`disabled-icon-color($color)` | Sets the icon color to the given color for a disabled button.\n`ink-color($color)` | Sets the ink color to the given color for an enabled button, and sets the icon color to the given color unless `icon-color` is also used.\n`disabled-ink-color($color)` | Sets the ink color to the given color for a disabled button, and sets the icon color to the given color unless `icon-color` is also used.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color)` | Sets the outline color to the given color for an enabled button.\n`disabled-outline-color($color)` | Sets the outline color to the given color for a disabled button.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web button component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"@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/density":"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/button_9.0.0-canary.ae27b44b0.0_1606318449017_0.9963824906401939","host":"s3://npm-registry-packages"}},"9.0.0-canary.2fbba2554.0":{"name":"@material/button","version":"9.0.0-canary.2fbba2554.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"86aeda28acb3a71b903fd8d4d84b9ad7febbdff7","tarball":"https://registry.npmjs.org/@material/button/-/button-9.0.0-canary.2fbba2554.0.tgz","fileCount":26,"integrity":"sha512-jPhZFzGgBwFCP3qta3kahCPjsDn+O1ZzvdRFilDq2tAdHIxU0I54EXPV0/bPl9X5R3bwO/QImyXlnuP2lcGl5A==","signatures":[{"sig":"MEQCIBdtNettFMG0MOWlNzEULvYU9DSEXlVDe4DrJoW9LzNZAiB+QcWhuYTx62NhUM9Dq8NUJ8nrv4qTtnqKDWiAwqVcSQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":403449,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfxS6nCRA9TVsSAnZWagAAQHYP/03d28s7WN7scj2CaruK\n0uqsNqhm1Ac7bFhCNRPsQ6Zlp2hLswe/1yi671RvuIRauxZuDzCJ7pEuLlcu\nEokx6Drgf/12i9WCwQs7pju716hjHsV4axQUGhbs8HJf0qVwzKSlKHvMSvxq\n+p2Q26nlILat1lf+zYjLTxwoxGCKBSjc1pgBnr7ekx9pv1/Ics3OhPakTFUf\nTNPWUfxWhzd/Hops3bB1qd3P0pW6SzRsP1tGAwF7Ahbwosteq+Zt0T0fIpXt\naKQU++oSeIv/pNhkk+nlRLTmqPUr69GkdZd9BKRSfuK2VsmEGG8tyD/IFzAA\nTlEjCkpS92n7Ehm+dYUvopvMOOwt9gE5LMBGwDkjA0PiHtdWdn4LKLm7L5Gk\n/8kudDUPqqRdxU3+lgs7GUMQySzsDcgEBhuwQIzyli42lzfKNjdiPdgh7wFC\ntg1KMbSdi5KlDCHc51QqE+mp36o0eSxsxnirpZjTS7Ep1RuYilawMkatIskq\n1FOmycX3SA4scxVv8Z/z1jJd0RAFMDIVb4HzfR9IEaaUoRVVrshKuCI+sR2F\n/+TnluW4CrMly96wSQA/3WS2xHq+kKZNq2XCCFPPlk9sFUdyftMSigQppIJJ\nDe/jtsbL1145WApZf8kx8oPRZBTL/V9PDn5se7gudHYWbpaUNkUGFhzwctjm\nsweR\r\n=54zA\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n#### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.**\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n**Note: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.**\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n\n**Note: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommended to\n always include it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color)` | Sets the container fill color to the given color for an enabled button.\n`disabled-container-fill-color($color)` | Sets the container fill color to the given color for a disabled button.\n`icon-color($color)` | Sets the icon color to the given color for an enabled button.\n`disabled-icon-color($color)` | Sets the icon color to the given color for a disabled button.\n`ink-color($color)` | Sets the ink color to the given color for an enabled button, and sets the icon color to the given color unless `icon-color` is also used.\n`disabled-ink-color($color)` | Sets the ink color to the given color for a disabled button, and sets the icon color to the given color unless `icon-color` is also used.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color)` | Sets the outline color to the given color for an enabled button.\n`disabled-outline-color($color)` | Sets the outline color to the given color for a disabled button.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web button component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"@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/density":"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/button_9.0.0-canary.2fbba2554.0_1606758055099_0.9452702760965548","host":"s3://npm-registry-packages"}},"9.0.0-canary.6d8574fe1.0":{"name":"@material/button","version":"9.0.0-canary.6d8574fe1.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"042d3bdc5fe35d33c90b2edb80b78ea383b04373","tarball":"https://registry.npmjs.org/@material/button/-/button-9.0.0-canary.6d8574fe1.0.tgz","fileCount":26,"integrity":"sha512-aC64ixW0RRbAzG1+cLcXtSuhhS2FPDQS+2eKS9oARdYJ5rQMdZnKqTki3UmPtSoPmpDe8YBq2xKEMiRpuLfEFg==","signatures":[{"sig":"MEUCICQFcBVLvzS2PuRy8isvOH5ONG4DtdobVI+6SKy28G3tAiEAk1zRp9+CpcRAtEUynm5+CBAy7cRpzOgIyZ1LgVKMu8A=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":403449,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfxTE5CRA9TVsSAnZWagAA2JgP/16GJNRwamnqPB+d3L7u\nnsdfdhBclPou4H4eZJiqS2VhZxE3U7MuSpJcosjKuchnKVVoCEjpw1T5OpOS\n92ZjwPw7gCmFvodVaL68rTIkKkqPXqRmOl1OAZunoTo45mx4Z0NFNh5nWSZ2\nd7qQxqvfrQPXi1/aM/XCt5TzF62GFijul1QOnQnwNONmJDXchMpFy9i4sHMa\nY6/BkvZTV+dzGK38S7ML6/s6oIRizhw4+Lm7R9NuDpUwLcKYPo7HgfqMWRxq\nVLDU2iPZlxA75vSG0QoIVNVarH/HvTI00u+ktwHt72GemO9m1BZ40FzZADuE\ndYbIDBG0JPvKzGrWWkiiEVdDXXq/hoHbxxQzm0+YRcP5k4GyEGtbvoeyDNBK\njfLW4r6qVtdVwCMBSV0u9aPW5C5Q+HDu5/jvQyi9Eo5gCcS40MzOX0WsQmED\noC8Y7VDLY7VAsRsotkLqwM4y+W4zJw646tUBKqjIiJ5pq+GQ9cGNDqUOnXj2\na1oua4utRK2pwovcJTjea3tE/paiyj6l9yoramy7ho5zn4qZEEcGw3XfU429\n2kHFzLiNqYPgfnaAqPvVOJX2Y1SdD9QJTLvi2F0CunUMIdwlOUSAX42K/9/5\nQj+hZgymodApiyzn+oXTOToZFKjYB0Pu5AkDnV00J/8W4lpR4wjp14M9jErb\n1Jq2\r\n=DF5c\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n#### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.**\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n**Note: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.**\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n\n**Note: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommended to\n always include it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color)` | Sets the container fill color to the given color for an enabled button.\n`disabled-container-fill-color($color)` | Sets the container fill color to the given color for a disabled button.\n`icon-color($color)` | Sets the icon color to the given color for an enabled button.\n`disabled-icon-color($color)` | Sets the icon color to the given color for a disabled button.\n`ink-color($color)` | Sets the ink color to the given color for an enabled button, and sets the icon color to the given color unless `icon-color` is also used.\n`disabled-ink-color($color)` | Sets the ink color to the given color for a disabled button, and sets the icon color to the given color unless `icon-color` is also used.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color)` | Sets the outline color to the given color for an enabled button.\n`disabled-outline-color($color)` | Sets the outline color to the given color for a disabled button.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web button component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"@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/density":"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/button_9.0.0-canary.6d8574fe1.0_1606758713394_0.032807523434179364","host":"s3://npm-registry-packages"}},"9.0.0-canary.fd22355f7.0":{"name":"@material/button","version":"9.0.0-canary.fd22355f7.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"712cbb91a159ce5f8310b755081ee0d5f43a8b38","tarball":"https://registry.npmjs.org/@material/button/-/button-9.0.0-canary.fd22355f7.0.tgz","fileCount":26,"integrity":"sha512-2u1HxYW0XfyLezO7Q6e7A6qgSIu5PMX+iGVP0EjQFDz3KZO1ZBWnhS54/EHAZyNzBN2skbDsa8kvCd89wNeUlg==","signatures":[{"sig":"MEQCIHyEV2+3H+glZYtuhMG6b6hKqK8HAoIh+JHKAzSZWyMHAiBeTlSLl7Z+Lfbo9ylTSEgOEpGeCzc+tdn7YHYK+jzk9w==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":403449,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfxXl3CRA9TVsSAnZWagAA3p4P/RP7F1EzIhEs9jqkATK7\ntE3SMzaBYg8xnnHYl119reOhzZA24xblmWiCQsYPswPyRMF6uB85jyBFRA4l\nw5Z2Ti3gFThqaDSF6/qDCj7oiEgBbkTh7nwCiJ/3I6T/tf7K5NqIejtdYnf1\n1GLPcO2sQZy3T8afrQJS8jwoQB8GlsMbN8hiCXs/5EGv4L46/HEk3yytgF+P\nAVXkaZ4ukjIwhsI+PuSeEoa0R92sQqbpBMnb2NPuIbLf/qfUufFAqLnvlMWs\nf3eG949n65czZjbJLZIVcTJlMMJssVxIHufgvF24cnT4YB2RsFTed0YQIEBF\neCIJc18odM+dGNT1hU2jmIG9eufQiUr+nd/+LYaZV2UcHVjL+xprH6T1W3Zr\nbtNKuvGC3jzKamwvaMlD8S6p2zbRAmkOc8yONl2+oFygeAUpYVxN9zMrEhMP\nEZp3gO8+QGqydqDgqVfV/XNgOkvgvwPhLZpf+IUwE/dAu2zPoQCGp+VuKqoN\nVLpX4o/4RfLWh6Th5CZgghZ/p79RA53sSdXddkrbuTuTQDG5EyFORX3Cz37p\n3wpteWP64oSSk7JcogyOtkmkdX42zfqxdblGgPdQcn705b8FIB/y8EZo7V07\nlizqKVC4Z+yjynul5tAsjT/FGqxLlJ+1ZBYecdi4J950vxYuaUdcrdKy4ZZP\nwP8u\r\n=hu8A\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n#### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.**\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n**Note: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.**\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n\n**Note: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommended to\n always include it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color)` | Sets the container fill color to the given color for an enabled button.\n`disabled-container-fill-color($color)` | Sets the container fill color to the given color for a disabled button.\n`icon-color($color)` | Sets the icon color to the given color for an enabled button.\n`disabled-icon-color($color)` | Sets the icon color to the given color for a disabled button.\n`ink-color($color)` | Sets the ink color to the given color for an enabled button, and sets the icon color to the given color unless `icon-color` is also used.\n`disabled-ink-color($color)` | Sets the ink color to the given color for a disabled button, and sets the icon color to the given color unless `icon-color` is also used.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color)` | Sets the outline color to the given color for an enabled button.\n`disabled-outline-color($color)` | Sets the outline color to the given color for a disabled button.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web button component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"@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/density":"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/button_9.0.0-canary.fd22355f7.0_1606777206712_0.8893478845826037","host":"s3://npm-registry-packages"}},"9.0.0-canary.c4ab98722.0":{"name":"@material/button","version":"9.0.0-canary.c4ab98722.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"bbb0bb7eed6d3f26181a9b86afe9807bebf17144","tarball":"https://registry.npmjs.org/@material/button/-/button-9.0.0-canary.c4ab98722.0.tgz","fileCount":26,"integrity":"sha512-Dg7o/s9hXRMS97janhsTjaPCub1hisNZqPAKMHS5OWAS1Ui4lqHhiz1BxkLKBjl9kU6p53SBe5uecfgikzV/oQ==","signatures":[{"sig":"MEYCIQDlKSA1Iw/I5eHycyJussEb79XMjQb+8QMfhLpYT6XVMAIhAITNU5guzdxoe7ro6ArzXJZWTHMMIGTyHLPBnN6sEbO1","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":403449,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfxuZxCRA9TVsSAnZWagAA+qAP/1AU/uK6L+xdeHVE9N7u\npHgr7Qn/J0Zx3N61vt+Xn70rNgC4rWJ/znlpwX//PXHZw1Iabd8BxDyxME3c\nVwWFq+l+vN/YYI4f0Rp/LWcZ3VCznr9YuAkgc1HAeyMY6sUehycRlfoWrxQL\n0nKHux2vCo6NrF/LoWV3T20E7KpqVwgVQOSUm+lyQmQJbLDPLe9fKsDEeEpR\nuLcvh5L14Ey1q80VpH0xHXRqcmOc/AcPLXBmLJSAA3gnDPWE29foM8mQeDrS\nyK5tcl/OYvzlX2XJHOE1x/yNXTRRQ0lT2rvLQ8h023k21H7PsttwfmWW8SBW\na4+zUaSbgA1jj1n8qh4qNP2ZZREzDVK2AVkGcW+3LLkjMkqVYiMVKWYNq351\nILx9U3Sa06cH3EFTXD2bu3gXYyrbx3AkKj+zPFhMJ75Pi9KdpcQMAVfaFxVG\nbDZnyxjF/DQp3OMJlZIy2Xzt0sikz6boUYWiLQzkQQIeafcxBL88tzFcPsMq\nKdhaUwmBljx00bnL/3pkEX3QftHiXQ7mrGt0ouNoo9hrWun5E7OPV6BwWqVR\n4o6tWQQYvOcDu1FFrIhRhSyhJPCVuGEOV/rM/oNFg5eOQJ5xHTwabGIahljE\nyk12YXhBFxVoZ38y6TATRNNd/byS5gEgzFZqW143UL6BS/exCJGXFvMOUkq+\n4Nhz\r\n=7KNj\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n#### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.**\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n**Note: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.**\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n\n**Note: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommended to\n always include it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color)` | Sets the container fill color to the given color for an enabled button.\n`disabled-container-fill-color($color)` | Sets the container fill color to the given color for a disabled button.\n`icon-color($color)` | Sets the icon color to the given color for an enabled button.\n`disabled-icon-color($color)` | Sets the icon color to the given color for a disabled button.\n`ink-color($color)` | Sets the ink color to the given color for an enabled button, and sets the icon color to the given color unless `icon-color` is also used.\n`disabled-ink-color($color)` | Sets the ink color to the given color for a disabled button, and sets the icon color to the given color unless `icon-color` is also used.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color)` | Sets the outline color to the given color for an enabled button.\n`disabled-outline-color($color)` | Sets the outline color to the given color for a disabled button.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web button component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"@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/density":"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/button_9.0.0-canary.c4ab98722.0_1606870640682_0.3020207705188609","host":"s3://npm-registry-packages"}},"9.0.0-canary.977585650.0":{"name":"@material/button","version":"9.0.0-canary.977585650.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"9b19fccad995ed4f7cad1847791f08980ef4e09f","tarball":"https://registry.npmjs.org/@material/button/-/button-9.0.0-canary.977585650.0.tgz","fileCount":26,"integrity":"sha512-oFf2qkSMb2WqJ7zwAf62e4lltR1iPSBk4op7KqfzltRNZjk0+FLx7huBcnC80bjfeVBUV91DcczpDo1OqABrzA==","signatures":[{"sig":"MEQCIBA+rwLKByeUuTtT8XKIAMKPPaL7JCW+tfQ8UggIH8uWAiBiuf+dTiE4BPXM0lPtlVGuYSIUr4yDcFJwdfBH4rrdfg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":403449,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfx6fqCRA9TVsSAnZWagAAC7QQAJnAQucB4YvEmDyyQMDt\nKcIELXZ/h6bS0MqfSTu3d4ZSvAH9WbpXdY5nez3A3UySY84UhstwuT0Jd6P2\n6Wi7FYtzk34NHSn2INH5M8Wv5nHnTfiN9MGJeoNF6mNEOMNNkhrWo4cWyHjD\na4/G4Hl+Qu89lXlLiJdNtq5ZCojfpFWd3Lczof6rjgHu5B5RL0eS/A4tGhWd\n2qGqUyN4Gr4ARZPIhQFn+9Sa9or+TTxHu+48F8tg19JquQokaho7FuyJ9SiE\nuAkwFGjPWLYJYE/aA5pZUXlwR5Yt5W+COIrMfmbQbgNFf5+pgIod8wKNK/H0\nji21DAkQKzSaYMBwcw1erwY5B/4Wskf7pyn92hqfavSJjOTlb6g2eE3aoOfS\nXprJGY4tjBzgFY65nPlMuEB5Vj+4L7+1KSEuCRP0EYGyiw164a0LZLa6riYl\nox26zKy7ok+zqdSMuyvZyE62QrkgDp6KxX9m8vgF+pR0EhhJ4RogIujV4ziI\nkbDDtn9WbMiCymoNiLYsKv8QNj+gebktL5dnmlPM/EDIRAnOX0SPVul8F+rg\n5yeaOTG48sQmx1wIV4ILdU4eaj1TL1nQzgjh5vflk64olodZmWl3ki54Tttn\nvo2KNHnlTk+QVOtI39OMLLobWjJNCXeikTRvqP1UGwyl3VYR+YTaoVafHnbV\n3FOn\r\n=PK5M\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n#### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.**\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n**Note: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.**\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n\n**Note: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommended to\n always include it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color)` | Sets the container fill color to the given color for an enabled button.\n`disabled-container-fill-color($color)` | Sets the container fill color to the given color for a disabled button.\n`icon-color($color)` | Sets the icon color to the given color for an enabled button.\n`disabled-icon-color($color)` | Sets the icon color to the given color for a disabled button.\n`ink-color($color)` | Sets the ink color to the given color for an enabled button, and sets the icon color to the given color unless `icon-color` is also used.\n`disabled-ink-color($color)` | Sets the ink color to the given color for a disabled button, and sets the icon color to the given color unless `icon-color` is also used.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color)` | Sets the outline color to the given color for an enabled button.\n`disabled-outline-color($color)` | Sets the outline color to the given color for a disabled button.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web button component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"@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/density":"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/button_9.0.0-canary.977585650.0_1606920169576_0.027307556930599164","host":"s3://npm-registry-packages"}},"9.0.0-canary.c7edfc7b6.0":{"name":"@material/button","version":"9.0.0-canary.c7edfc7b6.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"5d00a8aefb0e9d84018f8a9901ae9444cee2cc8e","tarball":"https://registry.npmjs.org/@material/button/-/button-9.0.0-canary.c7edfc7b6.0.tgz","fileCount":26,"integrity":"sha512-DqAYk1vTY+I3PLnWgTorVz8MGz4GZ9PGVzUt+J5DTfkXi9/jOmQar36djUDfl4cxNlPkmqjatuWOz4AqZE1euw==","signatures":[{"sig":"MEQCIEuUZAUfTmjeXWGSZWFeK9RPGwcQyxQyL2KRfXkf6EihAiBhQcIaWvWSQjBKlfW81IAcGR35xBEWegyp7eg1Ugq/Lw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":403449,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfx6miCRA9TVsSAnZWagAAVIcP/0PziXJgYADlDmoJ9+fy\n1jY4oDypV6rPVUB2Eg4IZhXcyCiciC4V5x3lc+mw2VxSwCpdvIuCbsatjyn2\nIdkuI6omA0+jFWhVxbwJ3deys4M4C+kSnSjbsTloiFvLtiP+TwbugehbDSN/\ndNND5T6KWoSCkLXDZml3sUryakQ3kQXh6fXB1uPRwTDd6Q4QeQCCZrbiDMzn\nlDWMyEJ3WUIEdayHIGWk3q+wjVq3qjr1fZlh8RpCZhBwT6oXQCSGWy/Y3fbP\n9B4gymcgqd8g2ZQ3uSp4oSv9BRXJ08ndykG2BiFYj64ctMsxxrwQQZkRxJ5u\nO8C7WK4qe1iU5lnU5dKE1tYYf960Ag0ASOwtOLWXiOj6qr35J+5KJTkrWKbg\nlN9U9eMcRmm/tU8FRewM7ipIfg3KMPqk+cKp6WRdhaj3n/19h5gsw8pl8Bkg\ncSSF21YIlnOm95QChhS61FFZ7CFDwiJgY58t2XI6WY/QcJRwZyNgb0/jmxKB\nMRuN7c2arQ8RXuGViECTMQ3/Ba/ooeMonG3JMku+yIR0DC3qiqNmt6z3dMMD\nVzF/JDsfB2mxC3sDJuSoj03aeBVsbXsze0nXUIPKCC9ybE1GJQtlyBEdlFHT\njWk0CxFfavq//yreiYbQKaqa3a1wAXP4mCLUvyp66jlEcF2pGptGY5P7DYC9\nh5ry\r\n=rjiw\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n#### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.**\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n**Note: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.**\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n\n**Note: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommended to\n always include it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color)` | Sets the container fill color to the given color for an enabled button.\n`disabled-container-fill-color($color)` | Sets the container fill color to the given color for a disabled button.\n`icon-color($color)` | Sets the icon color to the given color for an enabled button.\n`disabled-icon-color($color)` | Sets the icon color to the given color for a disabled button.\n`ink-color($color)` | Sets the ink color to the given color for an enabled button, and sets the icon color to the given color unless `icon-color` is also used.\n`disabled-ink-color($color)` | Sets the ink color to the given color for a disabled button, and sets the icon color to the given color unless `icon-color` is also used.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color)` | Sets the outline color to the given color for an enabled button.\n`disabled-outline-color($color)` | Sets the outline color to the given color for a disabled button.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web button component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"@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/density":"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/button_9.0.0-canary.c7edfc7b6.0_1606920609695_0.0940289267633867","host":"s3://npm-registry-packages"}},"9.0.0-canary.4f3347306.0":{"name":"@material/button","version":"9.0.0-canary.4f3347306.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"afafc9a502fe45f6181bf69db6db92b4c9bc71f6","tarball":"https://registry.npmjs.org/@material/button/-/button-9.0.0-canary.4f3347306.0.tgz","fileCount":26,"integrity":"sha512-YOVz1bclq1WUkXor8aAL8M+hSMtTTpSYYMuGneVJB7jH0cZNx+lm4b95F5Hqp4AnGZzyw20g3abwus5N8rNhDw==","signatures":[{"sig":"MEQCIAkAzvb02huQmLghPO+f6nWOesUPdkoVKicPyiD49HvbAiBIwqMR4lB0O8wdkVAhqPUSjfOUWDY6UeLWTklrTMdv4w==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":403449,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfx63UCRA9TVsSAnZWagAA1gkQAKGep6Sm2mbDccNXc8Me\nBwd0tI7pW/Gp4XEHgiHJv8A1+R5N7qsm2biueaayUoA8FDdS3jrICHoSj5oi\nNM6IZvcRyAwRY229CNXtwPFZFEXvb17jZqMAbimtP8l2Du8UEj8muVweFYXe\nBTC5qzR86/LT90ZUlodKasyChsoxIAzuLGDnlu+ajK+PBA0Xzno3rw5GYVZe\nOO8jAO6VnVIHbjhqyGi/OB5SN4ytHKOW3JvM2JSCZdw/YlKom80OhbGiHIPS\n4xbe0YzNM1HcYWQ7Xxs4fyo5Q//SLFKAi2ivymSOBg0Jo8c2Zi6r9Fpd/CtN\n/b5brtLAwq5pu125za7tpTcefrGDx/Fc71oSNd6wCyUNWyL7Ha+WGzP/RuLG\nmK7DsQKbLGSVDFwb6S1cvf9cjnRWv+m0UMNL432JfsMFRWU4m16BavdOlDz1\n0/kI/DJOIByxL55AaQApzoyLaryK5P5Y0DXWJEV4kGjxZZbUOX56u7MmE49S\nE5Y8XIe4ALgVCvhpAowiYN6RcibaKETe9AyI98lSgrvP4D0evhdq/dxYizPv\nl/dNfHpgQr2CUQIwpgnk+J3NlKLTu7lR0+c2VYIsoYfd1lBFfwPDDVcqdpuD\n8gweZ+8WgOCLJRywLbn9jj2btxa1mFCoT18IaCNpGOYYSyqCWpCf9ClyT88e\n161+\r\n=c9cx\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n#### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.**\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n**Note: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.**\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n\n**Note: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommended to\n always include it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color)` | Sets the container fill color to the given color for an enabled button.\n`disabled-container-fill-color($color)` | Sets the container fill color to the given color for a disabled button.\n`icon-color($color)` | Sets the icon color to the given color for an enabled button.\n`disabled-icon-color($color)` | Sets the icon color to the given color for a disabled button.\n`ink-color($color)` | Sets the ink color to the given color for an enabled button, and sets the icon color to the given color unless `icon-color` is also used.\n`disabled-ink-color($color)` | Sets the ink color to the given color for a disabled button, and sets the icon color to the given color unless `icon-color` is also used.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color)` | Sets the outline color to the given color for an enabled button.\n`disabled-outline-color($color)` | Sets the outline color to the given color for a disabled button.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web button component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"@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/density":"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/button_9.0.0-canary.4f3347306.0_1606921684315_0.8714390446458211","host":"s3://npm-registry-packages"}},"9.0.0-canary.37fbae10d.0":{"name":"@material/button","version":"9.0.0-canary.37fbae10d.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"fa67b79eecc40188d50fbc43f81b37eee1c55f91","tarball":"https://registry.npmjs.org/@material/button/-/button-9.0.0-canary.37fbae10d.0.tgz","fileCount":26,"integrity":"sha512-DlnR4mzMx0lL91CvQfotfi92+aYKay4MmuCsWlbsSU8Vdd6e26juZ25sU5V2hm6sZRAOaq2jXuf1iS9aIk/RmQ==","signatures":[{"sig":"MEUCIQDblysHHreZYZXgDFH9ReG4GmB8S9uFx95/+l1MN2fgXQIgYqeVCXbiTwBfQXzihx/ar3WFnV0Aw59XNmrfNLtKMXY=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":403449,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfx9obCRA9TVsSAnZWagAAJ/MP/0poIOT3ndWSQ6EaH0MW\nuej4TI6oTJV/wSaMxHtbbquqo2+HToZSC5+7pmLSJyc5P6fbArJPAs9kJkFY\nkVXGOmVJ81IA9hGnHhbCJgBsZ5A600paFiDp8s6QokuWEJeLy0uMx3UADIZP\n+7HGnq+PYAKNgVyz6UIV2BJtE+OkVpZo5M4SUKLr38xvQhIOTDlVZaIox6ZC\nB77+iGM+cjot9B3dmr5MRnnYSmcxZdapTg+ZHx8FspvR9vAoYC/K/ukk5IHp\nXy9H5MD6DkhBAz3bmPaD0R/5zDdH9J8WOf3ktgPGU+gfHg4bBzzNRkmzkVhT\n6tlKCuqxSoXyFadXHIlsYkHG92/ok93Qy8hU8DRq8CO3aqR5LphpxaEvRopP\n5v7IaMJ+f14GT/CY7JWBT91sVgXXRjcOtSaGquumB09zfMZ7qPlWic1IrcXC\njHDlGKW0HQcSspLt2hGqqNM3dyoF9GAeFQfC6CVMqYszCDyZ8IRxFqkeB/lR\nm/jWV6KbTgGcEzod6Yj4J5xgKUJzBSQMMTnhQXvpdit6jY0kSnaJLS+vX8T1\n7SZsP5ikEZ+nEd4T8Wyymut8eDbdSwtqr/P+ToK6m+aIyv9ashNttoOYE47C\n+O56Pi4wt2NwX154FQ+OJz/AX8MaoMsfEJ0L12cOtEm7ZGAdoMTin6VCkp2m\nQTl+\r\n=vcpa\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n#### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.**\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n**Note: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.**\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n\n**Note: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommended to\n always include it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color)` | Sets the container fill color to the given color for an enabled button.\n`disabled-container-fill-color($color)` | Sets the container fill color to the given color for a disabled button.\n`icon-color($color)` | Sets the icon color to the given color for an enabled button.\n`disabled-icon-color($color)` | Sets the icon color to the given color for a disabled button.\n`ink-color($color)` | Sets the ink color to the given color for an enabled button, and sets the icon color to the given color unless `icon-color` is also used.\n`disabled-ink-color($color)` | Sets the ink color to the given color for a disabled button, and sets the icon color to the given color unless `icon-color` is also used.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color)` | Sets the outline color to the given color for an enabled button.\n`disabled-outline-color($color)` | Sets the outline color to the given color for a disabled button.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web button component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"@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/density":"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/button_9.0.0-canary.37fbae10d.0_1606933019454_0.10393609961982819","host":"s3://npm-registry-packages"}},"9.0.0-canary.11da3c0db.0":{"name":"@material/button","version":"9.0.0-canary.11da3c0db.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"fe7a8f441201907c983a6cb0ae81e0b65ef6753f","tarball":"https://registry.npmjs.org/@material/button/-/button-9.0.0-canary.11da3c0db.0.tgz","fileCount":26,"integrity":"sha512-ePkNkDL9OJnh9LOfwlGb+6zkNjBSnTVYNddTYBy54hCdXPLwv0ONNVzVxOeRetZmudPg/9e2MdA1E6a0uDB4yQ==","signatures":[{"sig":"MEUCIDJPE46WwcXDRKhVpWFN6tOe4FCtSfiHBOKbZrScpI5tAiEAsFtJS/zIAi6qWpcolYibKRezOdIz5AUQvBthcm/JtWM=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":403449,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfx/emCRA9TVsSAnZWagAAd/MP/Amk4UvSqbuI+gTUXFls\n1NyIJWH3FKxecWvd6hH6alHsyKLKduRfG69N6mFTpsGxU9ikHT66LAUI1q94\n4b9ijLsEjWRfLJbLiVaNEfCguIaQN5+Nj6oSR8rdMi87rla7k49FVcUXgWhP\nohIEGet7AUCAY/vvoNPI/o6pKEvMXjZpBOD7spKrgoiSqWWFDQ6elBJJ6LwX\nvmpPn+JPf27t+KroP8vohmnqlf54PECQrtIllvy/rws1fyjmoh+71+uUG0tT\nycbOBObILs9CmRl/51wFaR8oQmhxdBtOxb7Wo5/3FdEaID+RsJLyVOLJ1tYy\nXORcBobf3N+ItsT1K/rOf1aAIHxhuSpGe+sC+cgnVx8J55uCgis3x43MbjQ6\nvSmmVIuYPSBB0ce3pq1I8wTlXurZdd++6FGeaigyZJ1nEEnh5zGiuQE6Y6gQ\nz0/kVejCC6HyJnX8OTR4aPcDEju9cGYPM7UnKUol971PcfoaD38dg2Ki8Jvf\n7EY4T5LCSkuuwsoXTujtSrwjW/Gmj5GdN5YT3k4Besk+s0M4nEVHHbhhUgUa\nCYXaPN+zMqnI1TEGgd6kqM7g2vHAfruLNz398m48xYBOjmAfAHJklf5eyLdp\npZAEqPoT2UtaTaGwz0j+Y+O/WBpvXafZxbO6oBDGwQngxscjDGMMdOeQ67KI\nzsH+\r\n=hlZ7\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n#### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.**\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n**Note: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.**\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n\n**Note: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommended to\n always include it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color)` | Sets the container fill color to the given color for an enabled button.\n`disabled-container-fill-color($color)` | Sets the container fill color to the given color for a disabled button.\n`icon-color($color)` | Sets the icon color to the given color for an enabled button.\n`disabled-icon-color($color)` | Sets the icon color to the given color for a disabled button.\n`ink-color($color)` | Sets the ink color to the given color for an enabled button, and sets the icon color to the given color unless `icon-color` is also used.\n`disabled-ink-color($color)` | Sets the ink color to the given color for a disabled button, and sets the icon color to the given color unless `icon-color` is also used.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color)` | Sets the outline color to the given color for an enabled button.\n`disabled-outline-color($color)` | Sets the outline color to the given color for a disabled button.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web button component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"@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/density":"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/button_9.0.0-canary.11da3c0db.0_1606940582054_0.8023867938660234","host":"s3://npm-registry-packages"}},"9.0.0-canary.489d4c219.0":{"name":"@material/button","version":"9.0.0-canary.489d4c219.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"67b59d3fec8b43d4f57242b6bb9ae3fe24b72673","tarball":"https://registry.npmjs.org/@material/button/-/button-9.0.0-canary.489d4c219.0.tgz","fileCount":26,"integrity":"sha512-7J6z8slSmJbdFxoRw/TkKHcjRTB/QwnMFsj1B/wEsLhaL3JKiwXoLagcBr13zCDChYn1fS7/YaB7oBn5LuH7IQ==","signatures":[{"sig":"MEYCIQDJymS9QlF7RqmAKLQenjA3+FghNnmlG9dK+hc9OV9lkAIhAMO7Isjxz9o44CE+ZbiTx3xEOwBHX6eFcwJ9p75ZvhHg","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":403449,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfyQSGCRA9TVsSAnZWagAAYEYP/3fGr5SHLjZG61MaO5oN\na6QaUuFt9gIZEXrhypKucBAEojEULZbrK0bpldiFfPYc7qvQ+cedQfMNVxTP\ntvSbXSLlP33+OGEHcXtU4yvfU++EDQqyJ/RlUNIlAyNIYJSXzrcZq/YhWI9C\n5tVJYmV02nL6249i/T4vA44gxdWvrmW/HXFvSeDjpDQZ3fgKPiQAspS+sigw\noZAEa/anfuxfnbrTeGkEnVjHb8K9w2IUwb85L17C8+lBBsAgt7EsVRdI2D5i\nF4azGzuTLC17ZhS35g2WRG6sEY3wEoESxQE8H7YPkGdg9nLuLSygf+tvmdaU\njI4T6wi6PF9Rm/VzrLaIZk/bYHq+kfqgWLaccMXx1ahCI2df7a64X15DzjpR\ng2pXVm4CsN2zTdqi0pyuy9RaspFzefqypWuHuG1QJKLFd/Hxebm0K4wMfdj3\nkVYoA7idOUrpYzJjZO2UrSU/6vVAb0sWE3B1uGrknUkhOw2Zlznfn0dZV7wI\nai4DTkVNY6SsURLrz3J9CBpNgw1tDL/bf3awJi+BTvhNt9/Rq9SPT61Xfdzo\nX0rmyClsh8bH18ahnOVk3UUNJa94Lc9AUq58aOJt013jD/Gt06t/4kExpg7E\n0bGjX8tyQqpjb8RbCWhQdWAfE1RJyqLYapFwF6SCEu6Ozm/XhAawyVtONPSc\nOD8c\r\n=n1ia\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n#### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.**\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n**Note: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.**\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n\n**Note: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommended to\n always include it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color)` | Sets the container fill color to the given color for an enabled button.\n`disabled-container-fill-color($color)` | Sets the container fill color to the given color for a disabled button.\n`icon-color($color)` | Sets the icon color to the given color for an enabled button.\n`disabled-icon-color($color)` | Sets the icon color to the given color for a disabled button.\n`ink-color($color)` | Sets the ink color to the given color for an enabled button, and sets the icon color to the given color unless `icon-color` is also used.\n`disabled-ink-color($color)` | Sets the ink color to the given color for a disabled button, and sets the icon color to the given color unless `icon-color` is also used.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color)` | Sets the outline color to the given color for an enabled button.\n`disabled-outline-color($color)` | Sets the outline color to the given color for a disabled button.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web button component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"@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/density":"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/button_9.0.0-canary.489d4c219.0_1607009414119_0.6609146399452845","host":"s3://npm-registry-packages"}},"9.0.0-canary.6557a69d9.0":{"name":"@material/button","version":"9.0.0-canary.6557a69d9.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"2c32147efd011efde146ca53ce64dbdb7aa19998","tarball":"https://registry.npmjs.org/@material/button/-/button-9.0.0-canary.6557a69d9.0.tgz","fileCount":26,"integrity":"sha512-TsQhMHFOy5fLMrHszpsF6PlCmf4/rNTll2wR2Dp90LsDuEHWnYFvV6nAiynHAhVLBPydZUVpQxjPPX9pR2CA4Q==","signatures":[{"sig":"MEUCIBhEzsbZl6KGrOb84pw6QNLV09APrFxbbZQm5vbQusoLAiEAk88S8qwgnd0pX/pcxsVe3JZwZ0CIY2mffdMJtJs5/XU=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":403449,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfyQdMCRA9TVsSAnZWagAArt0P/1aCf4UbCna9W6ExyueV\nlG8c/ksFepgP5SPHScSP1uXO2o4xE3Bgg+WRhMjbdYpsVv7gyUt3J1pKLfGl\nlBNIqQPAlk/s5P5155d75dKXvSs02/cFe9IURURkYXDtwkxdzIgC+1HjYnJs\nYrJPaZv/Ct+Bu6RH6REKxGpIHMtqW8pMkCJwn9zMWU3mU34zYrbwV7rGqxnk\nz6zKdB0YmIMmkim/ymr95oY6yAifXNGhhNeydIoKdiazYiuAbC1MuXco5VvU\nX9phR7WjPXZadbNx37Yy5Wt6UN3grd1RMYs1m68omBNqJWvYB/FJJ5snvFKM\nowIZpooZqRDpAtDPaG1Be9FcXYqSMNKOHVT+AJzrUhFZeiw+KZnMRWkeYLjG\nMemtBm8iRfuDYDaZLcTXP/SrpsmUSsVLgt3mWHflmaIHFXdQLSZMDHBoAeIM\nDczeIGC174T6zKv7gvQ0HezhLHDYmnV9g9lmlMZimBsHJS4IpZvqY1i5GNOu\nrx0SmqFKcEQYQej6BbUNda7XMdWzlUJX0A8XNQyYvbPdLlmzh3VHTpcUmVLO\nDmGWfdt77tWdC4S3OdQBx/7ld2v7B8Jdl7zoySgDXkIhB7QV7sSZqkr39LHd\n7lCKyj94MstyQCJXdYrZklz51TqQc25QpNSeOK41YdjeV0nzJtvLRGioXqjX\n7LR6\r\n=RyTX\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n#### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.**\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n**Note: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.**\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n\n**Note: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommended to\n always include it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color)` | Sets the container fill color to the given color for an enabled button.\n`disabled-container-fill-color($color)` | Sets the container fill color to the given color for a disabled button.\n`icon-color($color)` | Sets the icon color to the given color for an enabled button.\n`disabled-icon-color($color)` | Sets the icon color to the given color for a disabled button.\n`ink-color($color)` | Sets the ink color to the given color for an enabled button, and sets the icon color to the given color unless `icon-color` is also used.\n`disabled-ink-color($color)` | Sets the ink color to the given color for a disabled button, and sets the icon color to the given color unless `icon-color` is also used.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color)` | Sets the outline color to the given color for an enabled button.\n`disabled-outline-color($color)` | Sets the outline color to the given color for a disabled button.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web button component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"@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/density":"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/button_9.0.0-canary.6557a69d9.0_1607010123843_0.8443181502696928","host":"s3://npm-registry-packages"}},"9.0.0-canary.4ea1b7c69.0":{"name":"@material/button","version":"9.0.0-canary.4ea1b7c69.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"d814ec3743b52e265e82f6da3378becf10352d90","tarball":"https://registry.npmjs.org/@material/button/-/button-9.0.0-canary.4ea1b7c69.0.tgz","fileCount":26,"integrity":"sha512-DLTs6NdB9h3IEG8c233UolYrZ8woH9fW5OiPeFWwyOS07+foG1M02IaUzLhmwxD3wfBBxeHQ1xZHMj4y8NwzjA==","signatures":[{"sig":"MEQCIAFg2a7r8M5/o35t1bvIQ0vDHdzNJMKdNZAjU5AGYyuAAiBxoyMTi690UTARIP/meA3/AFMSQsaDshi6dbZTKyu0kA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":403449,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfyQs0CRA9TVsSAnZWagAAhQwP+QEKAAu85C0ws05hlpBK\nXRteJuC210q6NY2vJyCGNLpp3vIuzLwm3c7RPUaVjtUxRnwCTr01hsPGTnDz\nRmLQDVyHtxDW8AbOItpB8vbuZN/bNEii7sv4rqJvXY2vMpVRg5nBuMWe2CN0\ntSPJbTHA1WnqM2yyASmI4Oq4qiWEMyEQxB3DVIAw0TNDLP9MpQPR0y+rTEj7\nnPu/bHGQHJeqa5RSNEksNhrOrAxwC0iwUdjqGEY0rKrwbuz4LUZioQbqiXyy\nqZdvygAKK9UiAFkg/sAektWKYB0UOASYZQVo4Ut6ZUd/xYTjUOfbq/0FDPDC\nHciUm8pOIerUCNbHTvciR/uaKIteLoc3kg9kCejEOeSn/cNX/uofoaFg8P2k\nFICfWLP2q74SCh0n3UOdxN0xfCfBIQE9MBbsWmHVTymizGmCQNJbWElr8MbP\nhuR4+csqkWioG5QuwNAe5uEqjWmrq4MxoeaF6vuzwif65DBUu4Tyf0MSWJ7Z\nKaFDGmI5cMK4kt9k7f/6hltmaHHKxgC+Kll4Rcl8qIETkcOayGhJJJ7qznSV\nmUgVqrneWw0xSYBUnLZ/275zRsogOIiYD7WzmEY7azmCxdvZe/2ef5skPlc2\nChbZ0790QdHFaxhRMH93rv4nITrfbXfT/FEA8m+F6zxKqJMYeC5HRl6W5Oui\n1LuH\r\n=eo9M\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n#### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.**\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n**Note: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.**\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n\n**Note: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommended to\n always include it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color)` | Sets the container fill color to the given color for an enabled button.\n`disabled-container-fill-color($color)` | Sets the container fill color to the given color for a disabled button.\n`icon-color($color)` | Sets the icon color to the given color for an enabled button.\n`disabled-icon-color($color)` | Sets the icon color to the given color for a disabled button.\n`ink-color($color)` | Sets the ink color to the given color for an enabled button, and sets the icon color to the given color unless `icon-color` is also used.\n`disabled-ink-color($color)` | Sets the ink color to the given color for a disabled button, and sets the icon color to the given color unless `icon-color` is also used.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color)` | Sets the outline color to the given color for an enabled button.\n`disabled-outline-color($color)` | Sets the outline color to the given color for a disabled button.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web button component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"@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/density":"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/button_9.0.0-canary.4ea1b7c69.0_1607011123798_0.17122641367992664","host":"s3://npm-registry-packages"}},"9.0.0-canary.eaeb78ce3.0":{"name":"@material/button","version":"9.0.0-canary.eaeb78ce3.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"7388a2321fa089d1bf8d1300099a0f5e21c5ed30","tarball":"https://registry.npmjs.org/@material/button/-/button-9.0.0-canary.eaeb78ce3.0.tgz","fileCount":26,"integrity":"sha512-1zl5kijaQmmcFDXZdnOrFAlzl3Vy6dVrI07eXGn1KAVGZLnZqUW95VrXhvj9LBWXWZfYa1l1ou6OuWamMHVkxQ==","signatures":[{"sig":"MEYCIQCZX/4SGrrZVSzf6fneIKScvVFkTmNUP0Hzvp19HNZ/igIhAOPLA9asETHiroUMGvl1SpCFp1/EjjiaP5oykXHd1oy3","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":403449,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfyRn/CRA9TVsSAnZWagAAbLIP/i9P/unmEIQJPBWlPHSy\n7Pmww1mMuZhr9XZ07Y1jb+tpz4tJay88DjcqFocLZMEu9VwjWQXTJu+6m/X+\nYZmG745VR4Fn6KwjIASt99G2cpKvWofBRNT6VwiqWry0/W4FbSaEqnn/oxRt\ncCUTozs/J2bIXYuNvJ4Yp4uTS1FdtX3IlhRRWeA+fh8V7tsvSg+acm8mebaZ\nKfnTYRnQPtdI7WQGQdnwGWVSga/uSPKiS0YDfE8ewNofy3ndpf0m9KzkT+Gv\n/dsKL5MTb3U5z7R4HZu9/aX6HuKFJ6TODPgz5sJ1dzjyVAemMLYgzvnsdolQ\nwZxlJIUE+DodAwXFCUw8xu/6U7l/kqbqXnWNa9GMRQ5qfjCyXYJ5+91SGUz7\nP1mKtcga4aLfWPOccWlDnquKVKyKOMsF6uK8h4XeMtzI7oL1Cp6lQHCKaN2h\n3yRvE4bpzwq0t1KVke98+8SVcHZJf9zZ6N6QPv0B0xInjcYIncT/MPPDtrms\nd7IRBJ10sr22gWL/9KKY0efOotS8X4AkXckpxS4ukOT3WkdAEnlbxh/0ik+G\nv4hAVITobQUBZVrjYbDRIOIYBZVEz7CYa001Z1K4FC/RwNc5zHDECytrDGf7\naysvkTfWRevukqFg/0vsjwoaFTGNCMuXMOcNtQaZWVgYxobPD+WKWDKrUdJX\ngMh7\r\n=35rb\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n#### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.**\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n**Note: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.**\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n\n**Note: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommended to\n always include it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color)` | Sets the container fill color to the given color for an enabled button.\n`disabled-container-fill-color($color)` | Sets the container fill color to the given color for a disabled button.\n`icon-color($color)` | Sets the icon color to the given color for an enabled button.\n`disabled-icon-color($color)` | Sets the icon color to the given color for a disabled button.\n`ink-color($color)` | Sets the ink color to the given color for an enabled button, and sets the icon color to the given color unless `icon-color` is also used.\n`disabled-ink-color($color)` | Sets the ink color to the given color for a disabled button, and sets the icon color to the given color unless `icon-color` is also used.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color)` | Sets the outline color to the given color for an enabled button.\n`disabled-outline-color($color)` | Sets the outline color to the given color for a disabled button.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web button component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"@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/density":"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/button_9.0.0-canary.eaeb78ce3.0_1607014910786_0.20933512645454266","host":"s3://npm-registry-packages"}},"9.0.0-canary.1c156d69d.0":{"name":"@material/button","version":"9.0.0-canary.1c156d69d.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"b35540ed085006d65562ed56fe2b5540d6712712","tarball":"https://registry.npmjs.org/@material/button/-/button-9.0.0-canary.1c156d69d.0.tgz","fileCount":26,"integrity":"sha512-ZjBDrGy2kKPmlIYaL99/C1D0t+MCIkP3Pcj9Y1RxxYdayvP+o8evkBUz5IRtg5NpW4o1X89x8RfF/JmLJZrdYw==","signatures":[{"sig":"MEUCIFU8/nXM/hk705py9Ev41FOvIW4ygKxmA2F1r0aiDX24AiEA/HsyiFsjH8NzdCgBBrFUYbAhBFPQkuDN030oNzDvIh0=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":403448,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfyU58CRA9TVsSAnZWagAAv7cP+gKZ+lxc/BeTelXcp3lH\nuBtb4PSqNoVRFz2mKHHTMvoMafhxcnJbJYinXV6Z6k7bPIki9ecoBBsZ0WLY\n9Y4OGCeiS6ohVfti7g4jTcXD6T92b9jjsmGDqZP/D8y5CJ6lWyIz+9qPb5gI\nserlYilvCe7rXhRSzis78W3dzvx11pEO0wDJd0C/V71J0C3R86FeRu++iGRv\nQpxrTr9JGA6fDo0xr/424gm2FS2d8394GSCn80hv6Lk6ROZXmv3Y6kFth/My\ns/s6knebsDGAbJV/U5cGyH0hRQ8oIyTl18zyKy1ygpnUQMgV/6WiwYmD5j+H\nljJgAH3PdWIY5KRRdDvn4X/1rdcYUUtQar1YJi20jqEUBGkrSiHqGHBjUJaP\nkrJd/zGoj1UUuv5cLVSwpgFlSNdvtrgBMiERSoCz7x/k1B393utnjZlADbYT\nmTMG/u7hOpOKEAf/SMg/ucN3j3IAuHBpk0gQwoUJwMnlydHizMPjsP29C8Mo\n8Hk7DZXpq7OMzPCztIzVLHLyBszE4vuqbzrY9H2cpVuNElHW9UAKvs92CFJI\nfCNhPq4Mb/U+nAcUIX2NR3UZW6VPtY1Av/mvb8t+Mg9KCjSmu5zlafMntpTj\ni4veDPC2csw0F+ZS4JmmBHUkqoJL5F7u+Jp4gPY6k3el0jjTskvSZmTHNi4D\no+oj\r\n=A3bX\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.**\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n**Note: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.**\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n\n**Note: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommended to\n always include it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color)` | Sets the container fill color to the given color for an enabled button.\n`disabled-container-fill-color($color)` | Sets the container fill color to the given color for a disabled button.\n`icon-color($color)` | Sets the icon color to the given color for an enabled button.\n`disabled-icon-color($color)` | Sets the icon color to the given color for a disabled button.\n`ink-color($color)` | Sets the ink color to the given color for an enabled button, and sets the icon color to the given color unless `icon-color` is also used.\n`disabled-ink-color($color)` | Sets the ink color to the given color for a disabled button, and sets the icon color to the given color unless `icon-color` is also used.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color)` | Sets the outline color to the given color for an enabled button.\n`disabled-outline-color($color)` | Sets the outline color to the given color for a disabled button.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web button component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"@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/density":"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/button_9.0.0-canary.1c156d69d.0_1607028347772_0.43811517597782745","host":"s3://npm-registry-packages"}},"9.0.0-canary.832668d33.0":{"name":"@material/button","version":"9.0.0-canary.832668d33.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"0861a9be5adc133bb4f787d7edede54642c8ed0b","tarball":"https://registry.npmjs.org/@material/button/-/button-9.0.0-canary.832668d33.0.tgz","fileCount":26,"integrity":"sha512-H2YzQtPE3zFeZ1yaO8O7eD3RjzK2ycq6BAuKHfZteSqPHDHRvVuxlh5k6eq0Pz7El2XeVzNiwhwJrUA++hC5UA==","signatures":[{"sig":"MEUCIQCSJPq3pbLIzuSeWU5ESMaEvtdH171WMxsGFTe5DvY3TwIgbfhhGO7tnBh0NPqc+v8XseFv7NTYEfIBTTtyjS8goSk=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":403448,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfynqmCRA9TVsSAnZWagAAlQMP/RkcYA+5X5Gv3bOd7+K8\nsfBz1gRItJ1pOwiR31St2SINfXWHCe1i8h9LIsGY1hUoSV6CgMDuZidslVsq\nuUQQrHCNHWEiAzJex0e9P9VdMgo2cUukJuw/zIqEzWV2Bbxatp2rwpS1jDP1\n1EN1WmSFrAbLELNx8cDwbfQ5VnjjZUcW41KYPtdTLG2bhpfNL8pu31+bSgFA\np6I0u+FAmFJjUNwUJA4pZkll8uP09XfiDRaTqpKr2cipEfrUL0CkI/AAbwgV\nTq+TdFdSCaNZWPeiKjochypCRovsnCIDC+FJp2Jbbje7rHd1umqofzH+abTQ\nJlp1hmEaXxWMGGqw+pBVDHz/RPJgmC9V0s9XE3mYMOh3XFErAHC0dbW66bBq\nzl8kS0wTAtuPVC9akVmD3D4KyZKAd+YmOit581Oj9Erm4RmnEKdbNUDNY+tQ\nye6Fi+D8+n4QjWId1lYXF5i/TE9vUkGWV0AgxpA0d3/3wGObydDPhoPX2nqx\nl4451BGNyGr+fBebXqQSzIVktgKzIMA/v1E425dos73kyjSWkBezX4j4lfob\nSHQ0zhn+LNx8wGide0O2tloaL2jzk9JB6joNxSbYRtWIlEhPgb4GRUULiPwv\nG78xlixZUPdbkYRKsYogJ7qUvZgkv9X92Xk+UencEjtQSSumCM8a88/ZvOhw\n/ITO\r\n=qA8m\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.**\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n**Note: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.**\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n\n**Note: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommended to\n always include it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color)` | Sets the container fill color to the given color for an enabled button.\n`disabled-container-fill-color($color)` | Sets the container fill color to the given color for a disabled button.\n`icon-color($color)` | Sets the icon color to the given color for an enabled button.\n`disabled-icon-color($color)` | Sets the icon color to the given color for a disabled button.\n`ink-color($color)` | Sets the ink color to the given color for an enabled button, and sets the icon color to the given color unless `icon-color` is also used.\n`disabled-ink-color($color)` | Sets the ink color to the given color for a disabled button, and sets the icon color to the given color unless `icon-color` is also used.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color)` | Sets the outline color to the given color for an enabled button.\n`disabled-outline-color($color)` | Sets the outline color to the given color for a disabled button.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web button component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"@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/density":"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/button_9.0.0-canary.832668d33.0_1607105189554_0.06610192949853722","host":"s3://npm-registry-packages"}},"9.0.0-canary.4321323e4.0":{"name":"@material/button","version":"9.0.0-canary.4321323e4.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"a8f79f94ddfc9dd256cdf2de27c56d9ca156d212","tarball":"https://registry.npmjs.org/@material/button/-/button-9.0.0-canary.4321323e4.0.tgz","fileCount":26,"integrity":"sha512-37UjGDD4+kJ4YYbliU7RRIILHlwBR9KvGh4wG5c/KhCUNvwWTf3rrls83vRLHUR4WOokSqP61dYuMKJa2xqc5A==","signatures":[{"sig":"MEYCIQCPb8vw2ikTg8Xg03iVjw/SgexvGNEdcJusIFnD2t0VUQIhAIg/kDrUhpSgTs1l0HyQNshjczggTpa94m+szJ0F2jDg","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":403448,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfzhIbCRA9TVsSAnZWagAAyKAQAJHs8u58aPWjgrEewVwp\nu+pg/X6Fsu40XsDOvZH+6sHF0nPLZJTI8tmXRzBrD5YGB1IsZsNbciGo3JdY\nCZXCmyJtp4Gx/zR+CYuerW1Df9aw3pXG4a8BKWwx9NxkZNGlX+y5o6MWUk7j\nDRnVuf22jcrVhfq6QPYEkugjdZeIwljogP4iPMmESd8tfcYm0lwE21w/2koD\nyeoM4YYOoDInwYbpSHKFF7eMYqWdulOjB689yQFxcdz9913oxdY/zfyLMK8y\nQLziH6ms57CYW/67/WW15HkoOXvmLYhxQDTQrdVDN+nzw68TMfskAKN6IQEQ\nA+yo+TG5XpeLgXv6KX6MTaMI7rNi9V56KsBnB0ZS+gdY2ca+Kn/BBRXVmy6P\nmCT0fuH2VIqbCWk0B2dZtQK8poc2yHkfwbKZflF/fI6qjEyEVw7f4DcuLNPs\naeB/VG/sOPI6PVNPHOyXZbG8PSPe6jLVAd7O++JeaKxaHAmsHqy9MCXz5jxr\nmIZ/8QDIC4q4Uxsu0bfSVyJfSIeTr5b9l2kbuifrvgDGT79Tr/Hm+HqOZffL\nsLv6nggzlwIlxDj5sv0CeyRc45AW0paKgGiXQBAnQCDzJHI7bti12Y/PkyxX\nSqlYDpgeZVao1579KbJ6HSGTop2ODVssd2kuydZ614VQ55ReO2PTu57A4Pny\nJ1r6\r\n=zkqZ\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.**\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n**Note: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.**\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n\n**Note: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommended to\n always include it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color)` | Sets the container fill color to the given color for an enabled button.\n`disabled-container-fill-color($color)` | Sets the container fill color to the given color for a disabled button.\n`icon-color($color)` | Sets the icon color to the given color for an enabled button.\n`disabled-icon-color($color)` | Sets the icon color to the given color for a disabled button.\n`ink-color($color)` | Sets the ink color to the given color for an enabled button, and sets the icon color to the given color unless `icon-color` is also used.\n`disabled-ink-color($color)` | Sets the ink color to the given color for a disabled button, and sets the icon color to the given color unless `icon-color` is also used.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color)` | Sets the outline color to the given color for an enabled button.\n`disabled-outline-color($color)` | Sets the outline color to the given color for a disabled button.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web button component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"@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/density":"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/button_9.0.0-canary.4321323e4.0_1607340571257_0.999856929143897","host":"s3://npm-registry-packages"}},"9.0.0-canary.2d5f32d41.0":{"name":"@material/button","version":"9.0.0-canary.2d5f32d41.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"2f414686e708f574d48397ff9446969927bb656f","tarball":"https://registry.npmjs.org/@material/button/-/button-9.0.0-canary.2d5f32d41.0.tgz","fileCount":26,"integrity":"sha512-hJ7uMr1FFNh8bGyqfSoicV/TUNWJ6/yWEz8KGPrq+Heyu8YkxhrW9+J/24y9fBlAcibT92ArnTvff5NvNUHJTw==","signatures":[{"sig":"MEUCIDjECh0yKFp6u1ZBx65ewmhA+k21yiwfgJRBbIKBcOWeAiEA8U5T7hf8iNnKP8ah3s/SP05LyNsf8GoCfRigEGZykec=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":403218,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfzltqCRA9TVsSAnZWagAA1k0QAJMgPwqs8f7jnPgvapsQ\n05UwjS9YHtk1o9wz2R2Nmub28MYlpihb1HrsUTd9Mz5n+LURC0L/VO81W5dv\nP4AyGvcW4OPBvvrkiLvBR1yg4DYPOCHiOhyOvIQkD9vIAxmIcMBvtng1p4Q7\nt9bo96KeABuU4ohqp+AX5uF+GnX/OsbbWJyTB4HlmSAyq2OktZYY65WYSEYq\n6uTnB7CDZORmLz/MfQIk6/5Xuig4URJdEuWOTJlyZJ9iFuk95isGrFO8bi+R\nuof00wQAdxBGqt4rnxwvRGwmtqbL10/jMNnRC4eY8KGvLKd5xPb6JJS7bX59\nh7+/T72AXrId4AjedfwXB1j90kX5RsNa05MAz41iRiUhq8rtSuo3pVLv470R\nk3yYtJCnSDp3OJsr7D6dzoe+4Qe+EGsHQv7t+F64V88WlzPv8rXHPHg8hCgv\nmn92xwYYzVQxBEGWYFzBHEsCmEc7LVDNCjYZD6R4XZeOIETyin1jj111jQ9H\nLNAxgNdyEG/6kFOSZiWDeCEvMkS7tjhEn/8NsjrFUW2lwm8nWn0DasTSEcP0\n6K0XdghlaOcsjC92Mm2bQkJTSNR89jo+jEsdGTHXsB2p5p1FkmnYtiMEMuxC\nQCKCCutpSs61OhtyegHeIVtSRFJ1uQ1mdgNavQ99qwaca8QgeCYyUSdVZqes\nD4TY\r\n=xO1q\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.**\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n**Note: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.**\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n\n**Note: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommended to\n always include it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color)` | Sets the container fill color to the given color for an enabled button.\n`disabled-container-fill-color($color)` | Sets the container fill color to the given color for a disabled button.\n`icon-color($color)` | Sets the icon color to the given color for an enabled button.\n`disabled-icon-color($color)` | Sets the icon color to the given color for a disabled button.\n`ink-color($color)` | Sets the ink color to the given color for an enabled button, and sets the icon color to the given color unless `icon-color` is also used.\n`disabled-ink-color($color)` | Sets the ink color to the given color for a disabled button, and sets the icon color to the given color unless `icon-color` is also used.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color)` | Sets the outline color to the given color for an enabled button.\n`disabled-outline-color($color)` | Sets the outline color to the given color for a disabled button.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web button component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"@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/density":"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/button_9.0.0-canary.2d5f32d41.0_1607359337518_0.6962462559514466","host":"s3://npm-registry-packages"}},"9.0.0-canary.8239afc64.0":{"name":"@material/button","version":"9.0.0-canary.8239afc64.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"bac2b4f095b5738de6ba005a714be555f69b6b2b","tarball":"https://registry.npmjs.org/@material/button/-/button-9.0.0-canary.8239afc64.0.tgz","fileCount":26,"integrity":"sha512-H0KAreiznfYFv/iPuW+5LPmhk0ks+WzAzh2DeAuu4Jnvd1iqS3idC9CVyAT2gtLxQO6MealsgSWx37Xjr96b/A==","signatures":[{"sig":"MEUCIQD+R6s1gaOKz16Jw92qkFv0mfmZNaj4TcRNnnxbFggq8wIgUkLV0fFjxlBDyo1GzdaoaUcCfSGR5yfuBjTPjLjdNsA=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":403218,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfzodsCRA9TVsSAnZWagAAxs8P/AmAGaxVUmseP3BlrKU1\nz2LTM2I4Mt9kCDgszlFh+IFY5pUdWFwdFhURTTMyHQ9JozkdhLceoafRurmq\n0K3j8an7dUhWux+PY/0sx2LFWFWEejuqYo75bs0usE+m2q1mD3NMv1jTx63P\nKkZoH1ZPIWzI9zqJqA5gTjBH3+sSFgjuhdvsdD93h1igqqkKekIiRaTyP6jf\nZgrcDbXcdnyMqDmshZgZpVtR+R1KMhnJFoMkOI8GjgrVDTTq/6bQZHjPV6hB\nxq4AlemnUa/my98baTNz45tyoBdLn0dOBT5nhjMPs+U3Mj2TkRAgyV+HYze7\nwWO84bqQBfkcNX3oK2NZ3PP1+stSqxIw9Rn09cy6z8j/Y769174Nx1Gspn7K\nlrxu15R2OKghYJvWg6zNcQhFnrl7TnDwVr25tfFkjp6siUEEypewlFWZiXZK\n1LQxnA5LlLgxhxr7QG4kNQEuLnxVNO8gaIJHvmRSfUYTOLskSuU0Xe6Pg16E\ne+VB5VQLLZcHC+qVBQA5wX0aYknIv6i7mVn/WsMtzCPpt0T1u3N6GTtHpWqr\naucsZj292CT07tOwMNeZOgklaWBgAlH0EQkaNUHaxkdNlvkWyVYazEca1AR9\ninBN+rQ8nE7TGEObCxsSER6/FJbzm1NdLWu9GDoRO1uSg/cdYQpTPhgC2H+f\ndFUg\r\n=2oiO\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.**\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n**Note: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.**\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n\n**Note: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommended to\n always include it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color)` | Sets the container fill color to the given color for an enabled button.\n`disabled-container-fill-color($color)` | Sets the container fill color to the given color for a disabled button.\n`icon-color($color)` | Sets the icon color to the given color for an enabled button.\n`disabled-icon-color($color)` | Sets the icon color to the given color for a disabled button.\n`ink-color($color)` | Sets the ink color to the given color for an enabled button, and sets the icon color to the given color unless `icon-color` is also used.\n`disabled-ink-color($color)` | Sets the ink color to the given color for a disabled button, and sets the icon color to the given color unless `icon-color` is also used.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color)` | Sets the outline color to the given color for an enabled button.\n`disabled-outline-color($color)` | Sets the outline color to the given color for a disabled button.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web button component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"@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/density":"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/button_9.0.0-canary.8239afc64.0_1607370604203_0.7417538480945158","host":"s3://npm-registry-packages"}},"9.0.0-canary.6871336f1.0":{"name":"@material/button","version":"9.0.0-canary.6871336f1.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"bf84a8f8443e42ab3850e4929dd84b4f959475aa","tarball":"https://registry.npmjs.org/@material/button/-/button-9.0.0-canary.6871336f1.0.tgz","fileCount":26,"integrity":"sha512-82+pfmny98/fLvx0QxSNJmIdhX96lreRxXp70R9SzfTx2nuKsV3Y4q4YNxWh26Kvcdf0f2eiOAKfj0PDChDUQA==","signatures":[{"sig":"MEUCIQCVmH9mk7ZVtwwjfeqWAOXXGsDyf6ljZeBL0REYCYFshwIgbAuhiA0uRjE3f2MUpM81VRoGSLjwSmoi5Wi8EtVVp4Q=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":403218,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfz6N7CRA9TVsSAnZWagAAbjcP/jrxikZanNKv6d9MvC3o\nLOzXlCV3fcM1fXD0JTvxQytF45tQEtEqBwupIav4UKu9rZb5z847b3LctFEd\nP1otpnCyGGuNqNm/4iaARhhUaCU9YtfzlSNUMF6On5Fv7a7XRvm7ZCKEUQYJ\nSzMtcsdiLm/YHkJFD/CgZwEQcurIsveeAFVaLJtNtLTIlK02rsieeRnAsx8H\nVmzXAhglh4mSNmF9/r65YYLr+vqrAb0P1luBsBXWSLI4I8V1PoMXwdwsZRyO\nXtkaBcq28Uex282zywPqW1hSow5papOecSwmc5CNlG5UPYQLaHVqEsmXr8bx\nRfsAE7je0muY42Ybs4jcy98B/AQ4KE+c8i10qyyRXqOSCoBpXsTyxm1asfut\nmUF7RaRiGnKSakGUm+fNyZJsDwS6+yqdHYd2XWKWHmHqigH2FNoB2UpxU7+g\nfAXcxMpYx8V75EolDTlGrLi4RMghp2HzIrXR6VVrWFeAqx6pWUHM/nZJeoVg\neMJc7xdW+li7XyZX37kydMWqdP2bDGmvs3R15vlS9HZYxLX1WIhdC7DHJXj4\niYOQ2LmsZOF/4GEKx8hnfuEpbW+Inmj1Z2wqzpLfBu62EfsZ/zs8xPou3t35\nJZEnIMefaWj5uE3z/Sud3EuXageDDfGdCz7yovLkm8+Xsk8zQDzVuhrM1C+i\n4ofR\r\n=2uxH\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.**\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n**Note: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.**\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n\n**Note: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommended to\n always include it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color)` | Sets the container fill color to the given color for an enabled button.\n`disabled-container-fill-color($color)` | Sets the container fill color to the given color for a disabled button.\n`icon-color($color)` | Sets the icon color to the given color for an enabled button.\n`disabled-icon-color($color)` | Sets the icon color to the given color for a disabled button.\n`ink-color($color)` | Sets the ink color to the given color for an enabled button, and sets the icon color to the given color unless `icon-color` is also used.\n`disabled-ink-color($color)` | Sets the ink color to the given color for a disabled button, and sets the icon color to the given color unless `icon-color` is also used.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color)` | Sets the outline color to the given color for an enabled button.\n`disabled-outline-color($color)` | Sets the outline color to the given color for a disabled button.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web button component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"@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/density":"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/button_9.0.0-canary.6871336f1.0_1607443322471_0.5532832815160422","host":"s3://npm-registry-packages"}},"9.0.0-canary.9f718da94.0":{"name":"@material/button","version":"9.0.0-canary.9f718da94.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"133359ced255f348c1dd5ea08d3fefaabe3f4bbb","tarball":"https://registry.npmjs.org/@material/button/-/button-9.0.0-canary.9f718da94.0.tgz","fileCount":26,"integrity":"sha512-RihsNr0r/NSbbg6s6mJ4Aib4Yna0709KdQ7kdIR3nPYUy2ICFInQT3X9a6cBz72QMU98VsyZT2NgdR0BA3Bu+Q==","signatures":[{"sig":"MEYCIQD0I/CNMkXUC0Q0kdPK+x7Kt/pJWOxZeTzhl8wdmlGaIQIhAIMBeEYkPQzq3Mkwk4Jr9NpzZawtvmrEBf/PaAHt5wbo","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":403218,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfz6Y+CRA9TVsSAnZWagAAmaMP/Rrz9bCwMEdyMtq4aHYC\ng18t0vlqWI3KMG0afDJSMpIdqyf0gWkSwrNdXxZecNr49EE4ZCt52mvQmST2\nTCDmG/txoqn6Tn3wFjxAAbZrU4lsi/TvavP175WY4qCITGmONQuhIcNt8JOR\nXVWErbPcUPSt9vl16B/xMAEJGU5/a5dZYNaOsGyr6yuEp2wcfikeN/PLfjb2\nDIFk11vlpA706JtlUM+xHNdgy/Lpwqtm5XODHPdOain9EUU80yJ3xE+Ll/mU\n+ueM/sbtqYYDQaerfDmILe4GwsLWTCYARrAWhydZGdmc2wU17bkvm8ugUICv\nQR58PTFojMDg44Bp4tz79X6Xt9Hm50XVZzdTzpZECTT9xwBwsUPbylxhESZW\nTdNN2hMjs10rcP9KoZm5rQi/nuMkzs+xgMwACEjtKnRyiGkQgkM2ta8HgfRD\noZdw/CaGQQQiFrpepsyBMdIgGNwDAe2gbfXv7uJBGLZw8DdyxgpQgU1Kn5m2\nzv6YNQt11cg8aYEglUjTtybc5RJDpaCc8HL2iq3SEdMunpRacVFr/+mt5Jfe\nvZFdn1ddoWN8CqgxWZQeI2cYzOwyxZR7d3HSMPeHwhny7dPWkAajaraBJqF3\nnfolj+mygw/zrKwkmJsIK+7dXA/nlNPqwn7TwTUq/1QoGmseD8ofUdBFb+kK\nk60A\r\n=bg6A\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.**\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n**Note: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.**\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n\n**Note: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommended to\n always include it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color)` | Sets the container fill color to the given color for an enabled button.\n`disabled-container-fill-color($color)` | Sets the container fill color to the given color for a disabled button.\n`icon-color($color)` | Sets the icon color to the given color for an enabled button.\n`disabled-icon-color($color)` | Sets the icon color to the given color for a disabled button.\n`ink-color($color)` | Sets the ink color to the given color for an enabled button, and sets the icon color to the given color unless `icon-color` is also used.\n`disabled-ink-color($color)` | Sets the ink color to the given color for a disabled button, and sets the icon color to the given color unless `icon-color` is also used.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color)` | Sets the outline color to the given color for an enabled button.\n`disabled-outline-color($color)` | Sets the outline color to the given color for a disabled button.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web button component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"@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/density":"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/button_9.0.0-canary.9f718da94.0_1607444029828_0.2595720620208066","host":"s3://npm-registry-packages"}},"9.0.0-canary.1fccb1418.0":{"name":"@material/button","version":"9.0.0-canary.1fccb1418.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"b93af99a41f5ea83b5541519f1c30c40546d16d6","tarball":"https://registry.npmjs.org/@material/button/-/button-9.0.0-canary.1fccb1418.0.tgz","fileCount":26,"integrity":"sha512-hs93nt7XmfLVnqpOvVLgqOg+qk7ijTbS6GxwyCYXksQZ8cAXLJk1xotSvDB80LLti4NNltGD/UsH3ylVOZWjCg==","signatures":[{"sig":"MEYCIQD07CXc63MelPi+s1VZcz4xKSLHyqQC5dlofKQqfCc3fAIhAIgBlRdxohOQnnlgAc32ASz5g0IwXwzCTIQV/S+B4YZ6","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":403218,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfz6nFCRA9TVsSAnZWagAAxBAP/RuFNe7uqEITIZZVOBRY\nGwWXN5Oy2/bKPJDSgTruDC+3shCSnbh0VUKDtjltrmrsM4ZvFP9GNiOspA2S\nIvmXgf3A9OTQq7m/E+b5a/s+1b6uLRhM5JCafkgXh5nwVY4NkomH9U533IEh\nt6fNFkltHA8crtmuw4dr8i2FNLaFRGL3MXCCEhFp7tjzIHtUbDYtDyFb+1dF\nR+PnESd7VP8TZp3nP9Xr7DqGDNaIx45i25k67nDic2TEF562tue7T8phPX+m\n0vwfEbvb/inAoj6/Ao7zgrERz0n4WvW5Wcoh8Z+WswPNePadm51rg0bmZKtL\nYJ1CEGZCceDBBnWGMn+tsVvzGjU6PjkBxj2NMG2MEDw58Sy2h3eVkdMJyorX\n6fjy9S/9jentz9A80hG3pHj5VP1TROoI5ktsM/2+/d0DypFTkf5QcEU/Nwwf\nWa5Oc/Vnlvn9jWADvxakNf9rmc4mxRkO3Z/sRmUwGw27at5oJy9RTHfQ+ByO\nwFKQF3uwNApDnoa+NcJHOch1KwNL+Bcl5ujlHZjXtz9S0eFZ/XOUqQdsupsr\nmVIDjsRzQWJLz45H8BMgahvd0X9TD33G9BhSWBc5Fku0UVXVqOnt2FcKbR79\n+xTiNpxfT9tW8RYPjRBVvI9JyqMCYL+U7mL5Rh8xoz23myt6AyTwFNfF32Tl\nQ2FL\r\n=3IGq\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.**\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n**Note: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.**\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n\n**Note: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommended to\n always include it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color)` | Sets the container fill color to the given color for an enabled button.\n`disabled-container-fill-color($color)` | Sets the container fill color to the given color for a disabled button.\n`icon-color($color)` | Sets the icon color to the given color for an enabled button.\n`disabled-icon-color($color)` | Sets the icon color to the given color for a disabled button.\n`ink-color($color)` | Sets the ink color to the given color for an enabled button, and sets the icon color to the given color unless `icon-color` is also used.\n`disabled-ink-color($color)` | Sets the ink color to the given color for a disabled button, and sets the icon color to the given color unless `icon-color` is also used.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color)` | Sets the outline color to the given color for an enabled button.\n`disabled-outline-color($color)` | Sets the outline color to the given color for a disabled button.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web button component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"@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/density":"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/button_9.0.0-canary.1fccb1418.0_1607444932536_0.5773755082684051","host":"s3://npm-registry-packages"}},"9.0.0-canary.afb68894e.0":{"name":"@material/button","version":"9.0.0-canary.afb68894e.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"b656c7fcbe4e2f3dcc2bad32bdba5a554abd82de","tarball":"https://registry.npmjs.org/@material/button/-/button-9.0.0-canary.afb68894e.0.tgz","fileCount":26,"integrity":"sha512-bUjjDyiFUqZGfRWuGU0dMX9xZYI11rUoskwAsj0daCSLFOMPed83PTmiDsHj+PluX/efIZJhP+mzqyP2uV1/RQ==","signatures":[{"sig":"MEUCIQDJqUuY7hf5g4WC0Cv/F5qBm6HLyrH1eJ5KyDQSUFuyEAIgFp+pB8R5P7kF3AwLpf4FeyYUI1xC75vbB2WUqgqf/tQ=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":403218,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfz6q2CRA9TVsSAnZWagAAGiwP/A8igLXpW1yKXEZnSA3K\ns4iwHLxAL7g95uqLMox/7Tq1ZPBsub6iyl5JvLDxmYrFGBG/X8iVYDhDvbwo\nhjoYE7uy06RSwK6xgbsJAqfanBXGvvLD7Km3T5Yvi5484iJIqveOvSVhNVe4\nY45WtnhwsLPlyKziQiDFc7+ok1Fy8xmMmntaxX9Yp1ZW/Oqd0u4EtWAjt4Fp\nTPIejK9vrz8zSnjrKGs178a8bA2MR4Vl70bo4Fc5V1GYmRdePWQ23ljSy8Ea\niRwBeHaPeb3rAsQrPitQUUqJuGtpH5YKHJwAINFbUmjlNzob763aLi5MndSc\nAK5D6wrrdS6QJUCtF2klyFGJQiGJ69s/ld4SoaIe9R8Cqs/rzk+FQZBiH/Bk\nF9igPBD5ci4JrZr7c97kmDqtW68vyfSYIvo7hpi4OVoVZpY9quE+kCWRo6Sy\n90Mb2qnzqL7tNY8virXOMddsafeqE8UM2o1wYclfugN34azYzqgRjph31WGA\nA02ibWvO/2yzvBH+uvhUJ3VgE6S3Hw1Pf32iD4sphRcCG2Y4LTb+M/BMuHSf\nXr5Sh3+7gSDvm7xBZpfRJ71/T7HHJwSma7gU+sq/zgYBI7PyPxwzVw6vDksC\nY9GnGSf+4yRCVJerYYAOXWwJ+uzfFzjknL//P1SSGj09kXLMc/m8Zi3oXNfZ\n3UrI\r\n=MgAU\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.**\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n**Note: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.**\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n\n**Note: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommended to\n always include it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color)` | Sets the container fill color to the given color for an enabled button.\n`disabled-container-fill-color($color)` | Sets the container fill color to the given color for a disabled button.\n`icon-color($color)` | Sets the icon color to the given color for an enabled button.\n`disabled-icon-color($color)` | Sets the icon color to the given color for a disabled button.\n`ink-color($color)` | Sets the ink color to the given color for an enabled button, and sets the icon color to the given color unless `icon-color` is also used.\n`disabled-ink-color($color)` | Sets the ink color to the given color for a disabled button, and sets the icon color to the given color unless `icon-color` is also used.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color)` | Sets the outline color to the given color for an enabled button.\n`disabled-outline-color($color)` | Sets the outline color to the given color for a disabled button.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web button component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"@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/density":"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/button_9.0.0-canary.afb68894e.0_1607445173467_0.8656113815014221","host":"s3://npm-registry-packages"}},"9.0.0-canary.fd88d40c2.0":{"name":"@material/button","version":"9.0.0-canary.fd88d40c2.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"f00cfbed2e74773f84aa91e07a7bf81f47bee961","tarball":"https://registry.npmjs.org/@material/button/-/button-9.0.0-canary.fd88d40c2.0.tgz","fileCount":26,"integrity":"sha512-m26CMDO8DnlSYcO36mWtz+bQPtwNW9xmghXx14sfujxN7uTF8SWIoYJhiGA1zEze7YrRBdvWMIvUxubZ/7UDTw==","signatures":[{"sig":"MEUCIQCgPeI8Jmhsr/AiHl9/OVBrTpewDX5SUnWgBVW+nkT33wIgBEsrHmGrb7HRI0tFonUguwN0qVdD/4Xl+E7PEmddbik=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":403218,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfz63VCRA9TVsSAnZWagAAetIP/RduDGGe/1MyZN35Igbq\noCluLEGzFgezSM6ZfLmOLs3RZqdmISoauFxb+h+3HhKUfgy3UeU5dAyh/EZI\no6o1n+spMvh1rY8XXkqDt6VzF38YyEv6tPQxig0yPqRze1thi1n5cnAZ9lmJ\nLSnApLLxWpL1/Wx+0OWsFoq8jNge0fG/aiv696H1xEhA202cRQrNYMPzX4or\npLH6NTeR+fULID3EiRZF0hX4mmdOvgO2FlRgOQUjeZ0meYIvRT6BLf9RfR9g\nE7WLOCPlRrjKwpfral+esSDvqHAv32cLq26tVuKeKJTGRkLRdlgMBB0K3S0y\nYIk53syQ/rwXuCuqa/LfTedXwUKmYjsrQt4ZYeOdahQAHMR48y8pRsh2TtT/\nlhteV05vAuDwXJzQjWXY6WjOPFFcoQ2AIqoDiUE08fI1mrvBJOo43mI2cMkk\nkOOL0sP3ry25GB9tjxePB2eUaE4FLuaI70cDro4YPP/SnJXiiqHMmlaf3Va8\nsNchC1jzRA9lROGTfynQabMaQXityjmcgEuwF3H7Yc6lZYlcJyVyZnrGBau/\nK06+QRRaV0U8efsRVPfkkHpi77Ox/PrRzhpAGkKlP/2Z0eECM2w10LfnsPTT\nymTSJiWGCn53+Fr4RmRMGUqRrQX2AsWK6Vvu1IRj1vO4Vf2nYrflvbi++XBQ\nRGuZ\r\n=bMBg\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.**\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n**Note: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.**\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n\n**Note: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommended to\n always include it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color)` | Sets the container fill color to the given color for an enabled button.\n`disabled-container-fill-color($color)` | Sets the container fill color to the given color for a disabled button.\n`icon-color($color)` | Sets the icon color to the given color for an enabled button.\n`disabled-icon-color($color)` | Sets the icon color to the given color for a disabled button.\n`ink-color($color)` | Sets the ink color to the given color for an enabled button, and sets the icon color to the given color unless `icon-color` is also used.\n`disabled-ink-color($color)` | Sets the ink color to the given color for a disabled button, and sets the icon color to the given color unless `icon-color` is also used.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color)` | Sets the outline color to the given color for an enabled button.\n`disabled-outline-color($color)` | Sets the outline color to the given color for a disabled button.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web button component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"@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/density":"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/button_9.0.0-canary.fd88d40c2.0_1607445973345_0.025965907303288516","host":"s3://npm-registry-packages"}},"9.0.0-canary.ba9e3109c.0":{"name":"@material/button","version":"9.0.0-canary.ba9e3109c.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"4fd25b602543556e9aaeb9546eec1cf3bd89d182","tarball":"https://registry.npmjs.org/@material/button/-/button-9.0.0-canary.ba9e3109c.0.tgz","fileCount":26,"integrity":"sha512-fG65lRQe2CosZdtuU6aEOEVE8Zv0PkMfFDJ7q3ceX4lM9QaYnDUx5Wnk7bKHTAC0BCVtPf1c8A+nG1ZMNFbmeQ==","signatures":[{"sig":"MEUCIQCpsmpPXr2zFfzmo/Yl0L3CtJYXEorbuoYT7GXuVmc3cAIgBKp36mcMnZQvCXei8RHkkvsu6+VI7cYD/AByen5yaNk=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":403218,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfz86OCRA9TVsSAnZWagAAZp4P/jVTF719KCVvJktSAetd\n/aAAZcNL6ZDVqtoQWkOcsxMB/0qIVq5ZfUKUeMOITdA/S+vjMCzb3TO4m1/1\nezrUSC5AgOkx8/XcsefKjsOyMNCbh1LOGgrsGfflyVp6gvExN8cNIjuOpM09\n9iZBt3kK/G6f6Tcy5JDSYgvEoM+C2/WQGIJUCcIBM6iyNcPTrgFWBdAOtuWR\njD0oD0PpLVNvaxFDBBsCeIP3/RU3NZ+xmQX80XBoLADHZLNb7qBDRQE3NCVK\niF9lvwdzH1i30zKGSSNQqpHzi8xhqNZSp6qZDjP6sPA6BzhBHJQZD+qB86Qa\nLZRHU/ViubguDzss71Gg65CtKg1Uctd3wWmQ4LNPozwc0NatoqjB+vTSLLTW\n8d38OVg79bbGxOfnKGO5nBt8l8IqxZ2cs2hj7Fh8+myYtlH/f2BRpWnaCO98\nxuaPItIyejzoupp6DyODjpq+E3iFKd3tcR7Gv2O+T8dVnxxP7LZBSMbb6dK/\nal6+QjS0JOHsF+2NuzL751TUdfHEAM3SLqmZNjjPVAHlkJv3ZwV9AbOtBbAI\naw5VGDoLhhTyU7mtXfKTkTHl/kprVmPSqCVxeFdPzNmugfLB443cP6MJCCie\n+pQdGl0I6//pKjbTdzFFWkNYD4nNJw4CCuiIwW6b1DGSPozRRCKqj3+l7aYr\nfMIZ\r\n=q/dJ\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.**\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n**Note: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.**\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n\n**Note: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommended to\n always include it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color)` | Sets the container fill color to the given color for an enabled button.\n`disabled-container-fill-color($color)` | Sets the container fill color to the given color for a disabled button.\n`icon-color($color)` | Sets the icon color to the given color for an enabled button.\n`disabled-icon-color($color)` | Sets the icon color to the given color for a disabled button.\n`ink-color($color)` | Sets the ink color to the given color for an enabled button, and sets the icon color to the given color unless `icon-color` is also used.\n`disabled-ink-color($color)` | Sets the ink color to the given color for a disabled button, and sets the icon color to the given color unless `icon-color` is also used.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color)` | Sets the outline color to the given color for an enabled button.\n`disabled-outline-color($color)` | Sets the outline color to the given color for a disabled button.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web button component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"@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/density":"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/button_9.0.0-canary.ba9e3109c.0_1607454350352_0.9970928788791296","host":"s3://npm-registry-packages"}},"9.0.0-canary.1085c3b2d.0":{"name":"@material/button","version":"9.0.0-canary.1085c3b2d.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"8a8b6bc1d175a7608557675ca4c41080b1a80355","tarball":"https://registry.npmjs.org/@material/button/-/button-9.0.0-canary.1085c3b2d.0.tgz","fileCount":26,"integrity":"sha512-dQcO+o1JGu035eDupJHjrXTSNoDQisH0qXO+YejUqEIGnT1pr6hOvemSnT/5AoK8W9lvoYNzzLaRvRsCuLHp2Q==","signatures":[{"sig":"MEYCIQCnlrHX8ubWoSsemBJc9HXBUjjhTAem8vVmlnlQFwaNwAIhAKlpkmAtYvCh1y8ay3GWrwc+vnBGtx4AhOF0Xu6iMMK5","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":403218,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf0SFmCRA9TVsSAnZWagAA/M8P/AgebWNu2MshYCEsqQrV\nrRWgt1ErrJ5LDf+/MbolpidmTqIY0UJuHf04EzdDAVOrMJNwHD1CYWjibUPh\nUWriYZ6Z7uZUyUDC3tazDf1mduKw14ZC5PlYwjm+jPn9zP0eFe2p5Zd6DfF0\nJd0qvJqxwLiIyKRQdBNdOblqzgvgc9xz1SxxazMB9akxf0CACowBkh9ur5JH\nuQ7lbwJYPRXfstUqgXH1HdJXU2IC7MoVC8mS48fqCXZN9h/nMaiywGZ9acFG\n2SsabjmU37oohcOaT72fTuDoIh5lNLrE69m+Qq0fo6MF//4zG+Az2v5RZi36\nZIZ/U/Vh7YwI5PDDziXUksVw2oPxjmKEmUSChvJIcxeRKRxPbrw8E/M6M5vJ\n39Sw+6Bc3yRKmNOZB/U/ZY4lDhtO7MojfSOdVsUdxe1+6ajBBq+6R+6dUnzE\nN1vpg8uWV4lAVGENXoFAsJrDdtqe1ZlYek1EUWVOx6n5sCAvKSFBZOdzlX+G\nLhbsVRx3AImW2eeXnk7wi/LiOiVgnEtTQ3jzXF9rduJvN2hVoCMX8aa2hhu6\nY6O4RP5rJU6f0SHvByIssGDAhd58JjPTAzUUegi/nL6W+uVypXVfuRwnpTIg\nCheCAhvYrnasL+KlakT48n19b9tfEw5aWRFFg7PHz7rIA0CvFm60FawFffQE\nDaGR\r\n=9EQm\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.**\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n**Note: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.**\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n\n**Note: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommended to\n always include it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color)` | Sets the container fill color to the given color for an enabled button.\n`disabled-container-fill-color($color)` | Sets the container fill color to the given color for a disabled button.\n`icon-color($color)` | Sets the icon color to the given color for an enabled button.\n`disabled-icon-color($color)` | Sets the icon color to the given color for a disabled button.\n`ink-color($color)` | Sets the ink color to the given color for an enabled button, and sets the icon color to the given color unless `icon-color` is also used.\n`disabled-ink-color($color)` | Sets the ink color to the given color for a disabled button, and sets the icon color to the given color unless `icon-color` is also used.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color)` | Sets the outline color to the given color for an enabled button.\n`disabled-outline-color($color)` | Sets the outline color to the given color for a disabled button.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web button component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"@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/density":"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/button_9.0.0-canary.1085c3b2d.0_1607541093591_0.1494731935785003","host":"s3://npm-registry-packages"}},"9.0.0-canary.c5dda809d.0":{"name":"@material/button","version":"9.0.0-canary.c5dda809d.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"3d5d8f9f0e36f3fddc5c36963adda866caba9a9f","tarball":"https://registry.npmjs.org/@material/button/-/button-9.0.0-canary.c5dda809d.0.tgz","fileCount":26,"integrity":"sha512-mr4IZ4tWXWNBJEjJOPnO93L8RtZn1ljIJC466+H/FMIRkf/v28HCliUmrPoZfxFASDCC7GuIxKDNmBLB/uU2Ig==","signatures":[{"sig":"MEUCIHm9UMaiXGRbH6KbOVDdfVAiKHd8dfLlJ366uIAOsQtcAiEA3rBV1WsxXqXzDEFHt9JHnaLnTsWyJaxq62sNw/ItFmU=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":403218,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf0TiPCRA9TVsSAnZWagAAPQwQAJ8tKExuz/EzNAqYCb6X\nvbJim7u4moXpkIPZyaSR1iCCrinCJoouJhBtTUorb8N/JSPAD422yOapsoj1\n4W4hPcuR2sMHuzIIjPwCt73IrEb5M+arNuBDqagVtd51I+2Cs+BUOQrFTjh2\nAG5CjxP0ovuTCMlfwCWAielgqm5DcHbIHNGF+snaigBfmy/SYJScOoLKR/ls\nAFAtkhbUjFsGhIfB3CSm4HzLuq/nIXQXgx7q+H3utaFpNdx/hWxJlyw+q+7/\np/VZlnYEaMhrcfdJLul83IypI8d6HFrKAdGa2UQOLuYMcSH+B2+olPSGL6fD\n3ySZNUsM0X9cWM0yFUdAkuPDpCopF4cr/HDSiafMzPElb5m+8jfJAfQlZooG\n9bC0jQz6isdemxiZpC5f9L+PlAlcMe7qu3pJMiyhAbWWENo9CG4NzXafSLQf\nEV2g9dislqXloDx5Nqrizf+sOSCSMNpj2a8aAtI+VsXDdnjIpzdFv0qT6Bzd\noacKtqbJP891RKENM65lCDtlTRCdMf66qrecDIqNXW9cpbv6WhNbYBWsLMAl\njYWH03u+9nFfVMOVrO8/1PjgQs+T2mfoP+Kvoli9y9gZ0BpbTD7H91x6xkxq\nzU+7wt1BvcAXbkhC11vQVNrVzqovLt3EmA1uY6om2ERegFsoumay4y1QoI0P\nZvgD\r\n=v6u9\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.**\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n**Note: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.**\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n\n**Note: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommended to\n always include it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color)` | Sets the container fill color to the given color for an enabled button.\n`disabled-container-fill-color($color)` | Sets the container fill color to the given color for a disabled button.\n`icon-color($color)` | Sets the icon color to the given color for an enabled button.\n`disabled-icon-color($color)` | Sets the icon color to the given color for a disabled button.\n`ink-color($color)` | Sets the ink color to the given color for an enabled button, and sets the icon color to the given color unless `icon-color` is also used.\n`disabled-ink-color($color)` | Sets the ink color to the given color for a disabled button, and sets the icon color to the given color unless `icon-color` is also used.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color)` | Sets the outline color to the given color for an enabled button.\n`disabled-outline-color($color)` | Sets the outline color to the given color for a disabled button.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web button component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"@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/density":"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/button_9.0.0-canary.c5dda809d.0_1607547022619_0.6325855099323432","host":"s3://npm-registry-packages"}},"9.0.0-canary.f5f1bd86a.0":{"name":"@material/button","version":"9.0.0-canary.f5f1bd86a.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"a475fe756670d1eb89243459ddace6e9f571a9ce","tarball":"https://registry.npmjs.org/@material/button/-/button-9.0.0-canary.f5f1bd86a.0.tgz","fileCount":26,"integrity":"sha512-r12nxpWXoF7ENfjLShnwgRR6hZxVjeERWD0Kdg+KRFP/+iANhJeYhEH6tQe6ewkLJpEvfet5hWuliZueyO03Zw==","signatures":[{"sig":"MEUCIQDWB5pfLwR5pM/eKEv56tEEtNF+fKH5k1PDHIzAgw/+2wIgVtv0Ea8pv2TTKXvjjWYGCXDB/ws6odwczGa2vfJ4j+U=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":403218,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf0TyzCRA9TVsSAnZWagAA37oP/12wILPEiQGntJ66CRJ+\nS7sNvDJ7JJKJVJExCq230L8BawTLA1LrX2PgN+e7eo6bfIpFA2BsLJ64ciNu\npzMYq552zaV/ThKytKu6txvHY41O9Epi9ZHrrGCmPLN/KZiUdAamwCtAOBTD\n+84Lg2P8MDtFQrRh0wpfoO9Zb64DsTDtP6T3mygf7pXRlfUjRpf9tVp61pei\ngZcMIeRKQSMr3L8E7G9qC7m0iTxS8ccPSvbAyIr+dfztBN5qieR0SE0pXYPa\n+DLItirjvRQAU5VraM6XGeaUDpM6CDi0XQHCsCAqsvUhqPQfzxugkm79nLlL\n+epU+8cxRtUJJpMmu6L8VmnmJY2A/gpBRqc5yHpwJsisqfHry0rldGxN2NR2\nUevHMozD8GVjigirWFQjCWP1NPdOO7M/qL+I7/sIxDYkToXii32gT9Eeg/EU\nKGR3nSNluIJNUiEGbf8xjpjt71T80FyDpvG7/F1LGTVJYVlS286vu3AQLxJ/\ndNFwyd9ruAzK7MUAzhC7Smx4XpVCNMC9ClFmdVJ5l11Jy3qbvn6nslJeCOPk\n5jvOCGizng3EQZvBuxu7T4wYNlH9/Hafp3QA/t5ZG7DNwydT6O7RbuSQPK59\nVdPMr/rop+ZfA930qHcVG1wm4OSv1fCyejnOoukqffvYOSe3QaYccVz0SgbD\nFbgp\r\n=1IrX\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.**\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n**Note: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.**\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n\n**Note: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommended to\n always include it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color)` | Sets the container fill color to the given color for an enabled button.\n`disabled-container-fill-color($color)` | Sets the container fill color to the given color for a disabled button.\n`icon-color($color)` | Sets the icon color to the given color for an enabled button.\n`disabled-icon-color($color)` | Sets the icon color to the given color for a disabled button.\n`ink-color($color)` | Sets the ink color to the given color for an enabled button, and sets the icon color to the given color unless `icon-color` is also used.\n`disabled-ink-color($color)` | Sets the ink color to the given color for a disabled button, and sets the icon color to the given color unless `icon-color` is also used.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color)` | Sets the outline color to the given color for an enabled button.\n`disabled-outline-color($color)` | Sets the outline color to the given color for a disabled button.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web button component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"@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/density":"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/button_9.0.0-canary.f5f1bd86a.0_1607548083301_0.6653914297825261","host":"s3://npm-registry-packages"}},"9.0.0-canary.00f38200f.0":{"name":"@material/button","version":"9.0.0-canary.00f38200f.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"ac837f8f5ae1d291735dcbfef4abadbca17c5a9d","tarball":"https://registry.npmjs.org/@material/button/-/button-9.0.0-canary.00f38200f.0.tgz","fileCount":26,"integrity":"sha512-HZon1Y5IP1om4VnBXxFLMqECqcadnnSx8XkCnnUK+xBHe4xFMyr9RT/vQsG4dqCji4EDao5GArdbQvllBwgeMQ==","signatures":[{"sig":"MEUCICr5tdTeuwgHHbVoQLYKjGAbaDrEnDVTPVOZSy8gPuIEAiEAl2Ytnb9uR8lgv3XAch/Mb4PTPW7FvmsGHMOwm0yT2LM=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":403218,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf05QyCRA9TVsSAnZWagAApy4QAJI3tzP9LAGeS71Z1Xco\nraT4IZve+hcorIHVUooAk/BK6Gc5Esb8UOGl1AcDVgMNDDHgtO4B699dC7Se\nd7IriV1NHT5mZa28T7/1ILbpuXyAtGQlBGWPw3MS5H6duIYV+fSS85Zltrhx\nujCxxg/SFq0j/Ha0IXE8+jFCmpaQb4U6I7H0/lcN5+TdYjCIQkwD5zTz3kYf\n8TLrYsqpUV/UyZJMdKACTs6hHsDOZAzwlCzjNYCEKr4zOK3HnU4mYkgdOS5A\nOBnU2/DOelmNleLM9KsoshfLDzTQzk4EjdmpZKaQKVUMz4+3nOCsLCyPkyNZ\nS1sME65vuL/ChBVDzs0KSP/rKdf/6hrf/gaMPoih4oiuNQlqV95s0oxkrXCU\nPUjw4UAIBdrvWwFKuOH4kH6NuNh48kry9/G++1Of+GtqyLsgiPGSYALh4zDn\n6dWFmCY7XoenMGQRXRcsfyAvi1leVX+syIFzGkfYfa0Do85gdtKyO+vK7LG8\nY/BtfKRigMPxQH9rttUquBD11Fh82TTFsncVTcaU/SKw2ME+k+sNC0rCdmq3\nSqVdI9SVLkDBmxtfbUPfVDWqfOLsTM+xMLiO14CWqkd/geJ+92vv0nd/9AZH\ngZf9wAVIIy+baZx9SVUJ5fuWzhCrxN7Ie+mwAW8kAMhMLiVouroIV6JsHaTe\nhoBt\r\n=0mQH\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.**\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n**Note: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.**\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n\n**Note: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommended to\n always include it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color)` | Sets the container fill color to the given color for an enabled button.\n`disabled-container-fill-color($color)` | Sets the container fill color to the given color for a disabled button.\n`icon-color($color)` | Sets the icon color to the given color for an enabled button.\n`disabled-icon-color($color)` | Sets the icon color to the given color for a disabled button.\n`ink-color($color)` | Sets the ink color to the given color for an enabled button, and sets the icon color to the given color unless `icon-color` is also used.\n`disabled-ink-color($color)` | Sets the ink color to the given color for a disabled button, and sets the icon color to the given color unless `icon-color` is also used.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color)` | Sets the outline color to the given color for an enabled button.\n`disabled-outline-color($color)` | Sets the outline color to the given color for a disabled button.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web button component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"@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/density":"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/button_9.0.0-canary.00f38200f.0_1607701553080_0.3287028750512586","host":"s3://npm-registry-packages"}},"9.0.0-canary.ac41a5729.0":{"name":"@material/button","version":"9.0.0-canary.ac41a5729.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"eb6bf37296da979ca3fbaad0b8e8c7e6f8bdc41a","tarball":"https://registry.npmjs.org/@material/button/-/button-9.0.0-canary.ac41a5729.0.tgz","fileCount":26,"integrity":"sha512-tp8aph6DuvjXPfANVwGIi5cjwSQ2XsdbTZVU+jqehJWAf7EFWZULVDJzL8XRgbPoRpTOfJxd+mXTDP7TZLTtVw==","signatures":[{"sig":"MEUCIQDMMT1CABJKoX+PE8L8ygesDGHn/Qpe/yF0f8BIWPB5DwIgEPa3YkEjY9tmz+D7NbafzqxzKjAGSqxviQ4dLKEHkaY=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":403218,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf055FCRA9TVsSAnZWagAAZqwP/1CXd08pcxdiJtNt3Y6Z\neu2FRhg0S+6dwpLoJ38o/h7NAfzRHUPeJXkme4DT/7H+7apgKjhrKKLE039q\nw6SYd/c0p4k4xSTiYhpIR0KdjtmYvm6sEorXo0Zr4g/fApacPQUVTp6I99+B\nXgbk5kSj8iN2w0SiE/Bfy08z77/qjBGJqmrLc8GnfjqbGWdowCuJs3OfGwej\n4sGsm1b9AmSJNJNyM6tR78u/3eRSnKI90Dr+Xn/C5WqL30De/p+Xloh54rNN\nzIVvQhBosz5GjUdgG7ab8hid9JNeli1go+ukTqVVUs5aMi7zx+zcn3f9hI1L\n1wo07ctdi8lFGlMbuI023IpMtkBsTnqnVkOWk3zTvDAFj1ZcnSbgX0T5glr9\nspPCpcYARVxh5j1p87Vr54G/TY9Tx+7z/pfgkvIGS/QydHDmtinpY5IYqJAg\nPu4YowSi6FlmYykcocgUXHNiQl/PrW4vpFbrwtPwGl3D1LZOsv/+SU+gBX4s\nl3v8mw8PDL0XrqCSiVNZdzOXidzR64m48CAjQgrEQDEqFqJRmjBOjBg1Qy+r\nSk4XoItHFfY0zLDBNitX45D5fVPcWjHIXFzVFRtvocf6phFHk/xZUXoc+Vho\n2i1+EceeHpqasZnr+qwtbQr+oSTlHhg/gOzTu21VXHTNQwOD3IMiRk+3P5/8\nrkuL\r\n=bRxn\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.**\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n**Note: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.**\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n\n**Note: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommended to\n always include it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color)` | Sets the container fill color to the given color for an enabled button.\n`disabled-container-fill-color($color)` | Sets the container fill color to the given color for a disabled button.\n`icon-color($color)` | Sets the icon color to the given color for an enabled button.\n`disabled-icon-color($color)` | Sets the icon color to the given color for a disabled button.\n`ink-color($color)` | Sets the ink color to the given color for an enabled button, and sets the icon color to the given color unless `icon-color` is also used.\n`disabled-ink-color($color)` | Sets the ink color to the given color for a disabled button, and sets the icon color to the given color unless `icon-color` is also used.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color)` | Sets the outline color to the given color for an enabled button.\n`disabled-outline-color($color)` | Sets the outline color to the given color for a disabled button.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web button component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"@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/density":"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/button_9.0.0-canary.ac41a5729.0_1607704133157_0.4452969528019035","host":"s3://npm-registry-packages"}},"9.0.0-canary.7fe0e4f05.0":{"name":"@material/button","version":"9.0.0-canary.7fe0e4f05.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"d886337e04f7c8432dd56254354dbae663de356f","tarball":"https://registry.npmjs.org/@material/button/-/button-9.0.0-canary.7fe0e4f05.0.tgz","fileCount":26,"integrity":"sha512-pp2uqv/YnHwAAX84aPGyN7AoxFUNBsxE/2pMUHe0h14t25dxwYXSlMo7sfDvB9yWVBRNLl4HVAm0AntpOtroIw==","signatures":[{"sig":"MEYCIQCppSM+DABAEYm0rR7uFmyNqGVK/cgDjgCjN9k9Yg6+WQIhAPT/QK3X+8Ohmn16gnzpllQNLN/4qc7r9sHxKq7B4eHQ","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":403218,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf06b6CRA9TVsSAnZWagAAwsoP/RvhAHX7riM4tFwlJZXQ\n8w5W/Wh5logYNbD42h4DJW2iCZJ9fmUz8ksqX/76DtGAwXJlnOfUFMuqX5EV\nN6uLDMSsksrZsOuAG46dInyFVHVPi8nhrRgCg/vKpKZjNviZlP99wjtw4lZg\nLQ2yWKN3orWpKf1a50LNa6C5yOs7g7TR1x/8/SLSF9YagJgX0bI30d+agfca\n1Yhntg6aYdqGPxTy166xNvxSR1OTLukKc3E5Az1D4U9Ncs2f6a/2Ghjr6VDO\n4WmK7c7mwUTyv0/qld4YDe/nEkqnE/qB7gqqYaeYxM5Co9J07744DPcsNVy3\n6tyIFO896sFRHhCRpD/b9CQOvinT4l6lURWcHoEz+yHOOyV25DfjUtostKpa\nXBo0PizO2vWJgK9xauEovcazYKQyQasfJa9ALjCGyUQc6nw6++lDiD43yYig\ncsrcwgfpdif9EgsOlBzVpZ9fAcgsZuivYBCCpr94hXHLkmBjg74vzbxYKGzm\n+gYHSDq2lbV2zhj3QVQU9aFjuhh5xLfjJJnLu6Mf9bTgx7qR0ou2Jv/EiPoZ\nQv/DCyE1Kp8AxdrsFuKZ/xgAyXZOy80tZYmhICF5vp+2rt+641rwEc9SOHDk\nkaW5WZPAQXKMi6RAkObkTwd/0FMRWxmsGLg6iStgJqsssKQyNSo5tddHG8iG\nNLVZ\r\n=BJu7\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.**\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n**Note: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.**\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n\n**Note: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommended to\n always include it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color)` | Sets the container fill color to the given color for an enabled button.\n`disabled-container-fill-color($color)` | Sets the container fill color to the given color for a disabled button.\n`icon-color($color)` | Sets the icon color to the given color for an enabled button.\n`disabled-icon-color($color)` | Sets the icon color to the given color for a disabled button.\n`ink-color($color)` | Sets the ink color to the given color for an enabled button, and sets the icon color to the given color unless `icon-color` is also used.\n`disabled-ink-color($color)` | Sets the ink color to the given color for a disabled button, and sets the icon color to the given color unless `icon-color` is also used.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color)` | Sets the outline color to the given color for an enabled button.\n`disabled-outline-color($color)` | Sets the outline color to the given color for a disabled button.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web button component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"@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/density":"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/button_9.0.0-canary.7fe0e4f05.0_1607706362027_0.4038559367044974","host":"s3://npm-registry-packages"}},"9.0.0-canary.9244508bd.0":{"name":"@material/button","version":"9.0.0-canary.9244508bd.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"6b0302a6e1d6d165c3760f031da55348f58fc7b5","tarball":"https://registry.npmjs.org/@material/button/-/button-9.0.0-canary.9244508bd.0.tgz","fileCount":26,"integrity":"sha512-+L8L8MU4dKCE7d6mG1a2lnzty/6Rq6uGdgSE7xrshczFhVkB1pF5yQ0YKVv9TUqycoj7Ev5iKVB+I+FeP+gX4Q==","signatures":[{"sig":"MEUCIF0fkt72q36wahYzPTgkQFobr5Qny0hpHFq+xZgbPXcSAiEAncV2AyC1hSPvg319TD1SfhploNswyfl+fsPqZDsMb8k=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":403218,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf08OICRA9TVsSAnZWagAAz/8P/0se+Yr5tUn9xyobCzzu\nTG4r0Yd/hwZ1q0mmr8IdXSZ+OLr8hXkaFBNEXaffY4oKm3sRfDjdCFvHt04z\nLeO2LxDE9dQ45jGF6QXPZ2WCFU0DX0hmL/x/HG7KJSalmio9iGed2aWyCL4b\n1JX+Sbzo+E9ivhcp0ZOxoRyxJj6fOcvI8wSdnya2rTDwCmB4dmpZHFTYVbB2\ny/H7fzIEFleu+S3SpS+4AzOB3BjmzI27/AtySntkgg/saT3ueC6fgZRy8XbE\nwaP/OxKpTVM5Z7nVUM0jbXwRLvD3AA2VHrQF9NTd8X0n+HQLJryOZ0/veQZy\n85CfH/hA6jJDK0MUvKswu47JGaoxHXtVM67LmtZe0sWhll+Jm1HNJ9uMcAVD\ntk3C5HfWA2idVKKrWgyZeQdGO3M08Ld1b5nyHp+BPuiReI539m5wA7XgI9LE\nYYmnZGyIHZ2skid4lOxtqJJDz6q9XkUZKTlK5TysCYtrOne8nvvkEpNOoeYl\ndyzc93Q43a4VewUFE4Y8GLuY8lDK3OG8WIYEAcZQ+mBIWlHffYrnApuBBoLz\n4D3JSQw5Z+edNfriVWo2tKNF91pRIFIySI0hjgx8WxFtwIHNNk5PfufgLCPB\nDgP7EVo57Y6l1ltzjDtGzWiKM0sVs2mAaHBJIsdsbneZFMCVi5Kt1ulARrPO\neKSZ\r\n=CxIf\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.**\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n**Note: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.**\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n\n**Note: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommended to\n always include it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color)` | Sets the container fill color to the given color for an enabled button.\n`disabled-container-fill-color($color)` | Sets the container fill color to the given color for a disabled button.\n`icon-color($color)` | Sets the icon color to the given color for an enabled button.\n`disabled-icon-color($color)` | Sets the icon color to the given color for a disabled button.\n`ink-color($color)` | Sets the ink color to the given color for an enabled button, and sets the icon color to the given color unless `icon-color` is also used.\n`disabled-ink-color($color)` | Sets the ink color to the given color for a disabled button, and sets the icon color to the given color unless `icon-color` is also used.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color)` | Sets the outline color to the given color for an enabled button.\n`disabled-outline-color($color)` | Sets the outline color to the given color for a disabled button.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web button component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"@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/density":"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/button_9.0.0-canary.9244508bd.0_1607713672469_0.21912831922947018","host":"s3://npm-registry-packages"}},"9.0.0-canary.384a8eeb1.0":{"name":"@material/button","version":"9.0.0-canary.384a8eeb1.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"35dd5e93cd2cae9d2380e8dbe2b2fd0fd6f9b6cd","tarball":"https://registry.npmjs.org/@material/button/-/button-9.0.0-canary.384a8eeb1.0.tgz","fileCount":26,"integrity":"sha512-wwj/RTyO8xOrBw2gG2ucevoGgMHhoolZO21m2NmKNXMf9qRo/qlYI0/ExfMSS5I3zHlRV9QBKPNF8kjElN9rAA==","signatures":[{"sig":"MEUCIQDrTqhhhjlCr1sAzCh5Qsv1ZOBxWw9WT5liMe6a39GuKAIgYb4NZO8IWtZwogbSonzJm9kQkPZVxOUwPJ0RHIG5id0=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":403218,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf2j2bCRA9TVsSAnZWagAA/6YQAKGDhtFsrTf1oi4NOtRv\nWu2DA6C6DO2v3ssg/7lwWLZkluzrXbU8tPCsRrA9HWgPvUbOOHrGQB6+66eq\nJ7o2VAiJC938hxS66DaTQLzO1An708UwMdv/MbnEG6UpcePpK7H0RpefdJ13\ntb9vhToo+Y7tK1081vw2PI1ZeQa9fF+XNLXJoAcbQ0wL6qFrgVQIf5v4ZsRR\nZ25Hi4IG5Gf9REO6NPZiBsXWvgqWMZoDpqObm0TvnYAs/2uf297N18Q1b0Yd\nwRpHj+2UzGngPVrUeorHUX1gPwm4zIsliOJnN7IV4yjSCb/Hb1vP1ZEfx/Mt\nCkrbGibxsJRE0aHIWGc7nGR6jZhwOabg0tGc+8n7k31WS0I4a6mVrgy5mWaL\nzhIszUCcZahL+/Vt4jfaFdnpmKl52KskIapR02RclYqxMvctmjAJswrfIYJz\nZJteEPMD6nvFSL9m9otzEiev7OHci473nGDiHGgW09lSv4GUG7Zs3qnbXCOc\nzLFSMHAio+F2PvD40GkvrQFwv7J3CnNP+1L1qH9JjviYoLiJXfhb0RI+o38S\nT1wpQnssYOZmZnyZshBkoH4cSeKM0+n0nhSWay8s3/rHINMp01GLWjkI1/h4\nwpOEHe+YwVa1X0qnUg28qF73S0FOTRcEw8FI4OfcldzbNLDao4qkBv5rQ/F8\nlIcB\r\n=QWhD\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.**\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n**Note: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.**\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n\n**Note: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommended to\n always include it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color)` | Sets the container fill color to the given color for an enabled button.\n`disabled-container-fill-color($color)` | Sets the container fill color to the given color for a disabled button.\n`icon-color($color)` | Sets the icon color to the given color for an enabled button.\n`disabled-icon-color($color)` | Sets the icon color to the given color for a disabled button.\n`ink-color($color)` | Sets the ink color to the given color for an enabled button, and sets the icon color to the given color unless `icon-color` is also used.\n`disabled-ink-color($color)` | Sets the ink color to the given color for a disabled button, and sets the icon color to the given color unless `icon-color` is also used.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color)` | Sets the outline color to the given color for an enabled button.\n`disabled-outline-color($color)` | Sets the outline color to the given color for a disabled button.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web button component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"@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/density":"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/button_9.0.0-canary.384a8eeb1.0_1608138139467_0.7185462685416526","host":"s3://npm-registry-packages"}},"9.0.0-canary.eabf9d5c2.0":{"name":"@material/button","version":"9.0.0-canary.eabf9d5c2.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"3e7794c17d1c5fab0363e85d30716234d95ebcca","tarball":"https://registry.npmjs.org/@material/button/-/button-9.0.0-canary.eabf9d5c2.0.tgz","fileCount":26,"integrity":"sha512-tpD7M0rInsLH+DPf7nrSFhmhU/yeUIz75k6ECYxP7YcPe/Pe7+MzpmetF800EIJwBGnC+kVvslEJSaOE1mV4Rw==","signatures":[{"sig":"MEQCIEXhif/Xpe6ax0TjfOm0/aR2NcTsgriWNPYkAlg1rQF5AiBArzE5otJciX8btEby6OMWtWFpvlyoB8tgXtURSNqK8g==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":403218,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf2lG4CRA9TVsSAnZWagAA/C0QAIzUHxtYMzYWI4t0cFUF\n8u+LEGriDqXvq9/VX9oTnf7Pl52nYBEKhO/kTNd8tTw6VxCoi0o60zMXHX50\n+QuWhHXj/JMMAHyMK5yNXdf7vI8m7KedPlysrGCygeqDTVt7hifs+j3436rK\nK3O2SH5QaeRzH7yIWxfXNNQ/Gby8GqJUB6F0xzmzlR4eK7AYkaS4wtx06OJL\nX04mTc4xZa+j/DhMUv1AykFiubp9tjIb0yc/fjbaqFGAVaPoo3mnlfGfZfFp\nV/tW4bIuDcJnsQ1gepILCl4ZaOn3B9tB2s8fZMPeCeAEYbNbrVPsjUYA/FJS\nKrvEtmf2G1kZ94kFsrxZSNYMUyj1WeqvVod1Kj6SgnEfUGcoNcEbt9nc/SSx\n+7gLLhAx4oTrVbQef1r83ityMZAr8cvdrFRX4wXsYLpgVqGjXJkduCZ9Qf/5\nDdp6FyRcJhIVmA/9J7+yfWBnnZQM+xfmwpJEmFDK/2gF9+kIw9XvcFUtBkmE\nmilu+WRS+HyW6TZEsA49U1VHDML9TqHXyCVMMX0Up9h/+cMa4VOdl/Me/FTL\n0rhAFZsPbSTmc4mrFPEkoJYsxoO9lz0OTKSeG/R3D/AFVrpU54w8jU6DoOm4\nrCI7XNggNaxqNjueGsjKAxroITiM6a73kcAekU8vattGWTIicpdfrkrmU/+Q\nKhNE\r\n=t6ue\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.**\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n**Note: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.**\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n\n**Note: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommended to\n always include it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color)` | Sets the container fill color to the given color for an enabled button.\n`disabled-container-fill-color($color)` | Sets the container fill color to the given color for a disabled button.\n`icon-color($color)` | Sets the icon color to the given color for an enabled button.\n`disabled-icon-color($color)` | Sets the icon color to the given color for a disabled button.\n`ink-color($color)` | Sets the ink color to the given color for an enabled button, and sets the icon color to the given color unless `icon-color` is also used.\n`disabled-ink-color($color)` | Sets the ink color to the given color for a disabled button, and sets the icon color to the given color unless `icon-color` is also used.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color)` | Sets the outline color to the given color for an enabled button.\n`disabled-outline-color($color)` | Sets the outline color to the given color for a disabled button.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web button component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"@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/density":"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/button_9.0.0-canary.eabf9d5c2.0_1608143288327_0.2503569571355586","host":"s3://npm-registry-packages"}},"9.0.0-canary.30fdfd06e.0":{"name":"@material/button","version":"9.0.0-canary.30fdfd06e.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"4cd249c54af5e1c0bcfebdb993c8446e392842c1","tarball":"https://registry.npmjs.org/@material/button/-/button-9.0.0-canary.30fdfd06e.0.tgz","fileCount":26,"integrity":"sha512-1ABnigzYolhWc3bQC5eDsh3D3WPJMh7T4eSWVH6ng6g3gTzhmju8mebnCwfhwCJhQZFeSzPbm33RTHJ4Go/RNA==","signatures":[{"sig":"MEUCIFtTwFGxEVH+V4mpwiuZbGdF+6cj7yMjP5vsDD4rD0JAAiEAsonR9aCpWDnY2ireIRgvl+xaqHGYU5k4pG4kvmIXSDM=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":403218,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf2lsPCRA9TVsSAnZWagAAB6kQAJQIvsLjW+WksAlfOiw8\n3+bJDVjREqW4HcJisJuiZs/AdHdykqZYM4XIFob7+vsXMaZk37QcJQBmHOGI\n2rri95tc62if9yB40HT0N9vlb3cL3C9Yjoz2dFfteiAH2qilhloVjD9mUOjK\n0gz0834bOXFeF2wEB9Lbi6NDX1+Mt0f9kZJw3a0cHX9zLyjNlSy/YOMKD+tj\nANPbT48Qk3/Q38kdzsumvdrMFkfcwEEXMZ7OZUYNGOKK4AX/p2nbInqWvcdx\nJiy9zkHBjyuWu4rJc0J2q0zgqYzsFYJ88dpXH+HnF3zuS08jvQk8DhTANLbI\ndG3yRWrEPR16iJT7J63DCKyc2smdmmiaAV8KAk0SqBz/mwZelwooj/T3WD7b\nwVvKqNyDy3DhxJt4xtC+gkDvvn+2SaupOVMU9PN40YBj/g5B1EgTovZk8wni\nMJ3akbXcKyHFynhuArD2vQAvs51EVRVXjEwpviF3l/pGWo+JqTptam0fdZdk\njmnjRNIiZWCzuvLBUHtFtA3FZtGia3oGfjYVOMZ+hSTTO+dimuKKXOldQ/ws\nl+ErSqegT31RpzdBoxwOPHv9b7g+r/EQRrfZYAmxjjRsYE5QkwOMoHjurbuC\n/ixLNWr7m8Efrh4p20dXvEEJZ/foXqUMP0Fcm49FNOxDCvR0ZO7jKPKeAZ7W\n9R5B\r\n=iX1+\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.**\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n**Note: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.**\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n\n**Note: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommended to\n always include it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color)` | Sets the container fill color to the given color for an enabled button.\n`disabled-container-fill-color($color)` | Sets the container fill color to the given color for a disabled button.\n`icon-color($color)` | Sets the icon color to the given color for an enabled button.\n`disabled-icon-color($color)` | Sets the icon color to the given color for a disabled button.\n`ink-color($color)` | Sets the ink color to the given color for an enabled button, and sets the icon color to the given color unless `icon-color` is also used.\n`disabled-ink-color($color)` | Sets the ink color to the given color for a disabled button, and sets the icon color to the given color unless `icon-color` is also used.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color)` | Sets the outline color to the given color for an enabled button.\n`disabled-outline-color($color)` | Sets the outline color to the given color for a disabled button.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web button component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"@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/density":"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/button_9.0.0-canary.30fdfd06e.0_1608145678658_0.9703664608462523","host":"s3://npm-registry-packages"}},"9.0.0-canary.9590a8f90.0":{"name":"@material/button","version":"9.0.0-canary.9590a8f90.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"700aee4f1ffe90f98630d28500fd5d1cddb3b8bf","tarball":"https://registry.npmjs.org/@material/button/-/button-9.0.0-canary.9590a8f90.0.tgz","fileCount":26,"integrity":"sha512-DSI65LEu6sRt9As9oAtD5BZ4yWs+9Y1terNKC5Xdyc44wG5j1Ul+akbT6nJyzAHCYANXcP4AmtTgvHmSlsgKzQ==","signatures":[{"sig":"MEQCIEo0Kb41HW8vdn/z1isjKyJWXPMoIt9C2UU4l2QslOpWAiAHFZgyk8zcEnQlcG2iJRQIWeF+yozbVwcd3tdsCbWAmA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":403240,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf4jADCRA9TVsSAnZWagAAJKoQAIFLcEv1u9G3zY4dAboF\nCZIZ5zrjMs9cbS60TR11qdhXehxpg0WTBpOkIyVcnxu/E0chUtUtC/fntNEa\nIGKVoFPkPl1TrHJ/ptT+6qo8X9rRaaEY0Uas9vrTqzFkLOUXGg3uBNODMimY\n/bb7rOuWawZULPyIbFPWJ8IpUX6j+XqJnvkrHCpSMW1AdkEyNvwtuJLBQgT0\nSi5dz7pUYAwraEIzzDs5TCrAHyps2EhtETz/DZxOP3t48oCII8lWOfqPHO76\nc25IqJElDZlBRqROr8kOOq2UxbrNS13XBORE2Yh/NJQE7SoEgZCYO3u0bgWm\nzl2HciS+TliZejDpgpzYFHY8wOJxSi2EEeUgBzSFGdw960/gA7shAe1p6cYG\n/4sAVpQtvRMSYPkh7JKzfTRMygYBClgxR9ApT7BedfqlmfBmo5C1XoCmOPZM\nB1HmMc/Tn6B7z70FNG429mVft2gGOR4bcWZ2iugMpQamFjCyC9csjIF+NIAP\nuoqjgqWOUWxvFdPZOXmLfMHPln5kwbv/TMWJmrdsiaT2+O5eYd3kSq+Mfmci\nyV31WdzMFM3ZnaOyOWuUGZc3EA0GL0hQFz8QlEk5tfSiV/LQAtpg8yoQf5o3\nUtcDipssS0hLUzYASKfBmEPQfcJy7Jo3TaJGuQ/yjA0l24ocpW/OkUfNUuDA\nxhHP\r\n=7m0K\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.**\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n**Note: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.**\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n\n**Note: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommended to\n always include it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color)` | Sets the container fill color to the given color for an enabled button.\n`disabled-container-fill-color($color)` | Sets the container fill color to the given color for a disabled button.\n`icon-color($color)` | Sets the icon color to the given color for an enabled button.\n`disabled-icon-color($color)` | Sets the icon color to the given color for a disabled button.\n`ink-color($color)` | Sets the ink color to the given color for an enabled button, and sets the icon color to the given color unless `icon-color` is also used.\n`disabled-ink-color($color)` | Sets the ink color to the given color for a disabled button, and sets the icon color to the given color unless `icon-color` is also used.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color)` | Sets the outline color to the given color for an enabled button.\n`disabled-outline-color($color)` | Sets the outline color to the given color for a disabled button.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web button component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"@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/density":"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/button_9.0.0-canary.9590a8f90.0_1608658947008_0.4485161251045131","host":"s3://npm-registry-packages"}},"9.0.0-canary.f89d8b8f2.0":{"name":"@material/button","version":"9.0.0-canary.f89d8b8f2.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"3ce71ec2350dd35303d3ff84dd837a66cf3d51d9","tarball":"https://registry.npmjs.org/@material/button/-/button-9.0.0-canary.f89d8b8f2.0.tgz","fileCount":26,"integrity":"sha512-wB68rdAM8Ar8EI1qOvPaottUDsnRdm2YWpZSYUQNzToKN6cI/Qk+vfrba86P+QhPUfXbnndVW8ppgTyMRJ5wXg==","signatures":[{"sig":"MEQCIGYXrbvFaq3mzWCCom7nirtZQQJmjfdlgjuExu9EgplqAiBWkERAmeF78tuD/eKx5riTfy3SFzKA1wXQ5342GIHb4Q==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":403240,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf4nvBCRA9TVsSAnZWagAAXuMP/RA6xlk5Zo239cIEVOyk\nOC9czHt3lq5lKBea7LX1yJNXyv/Fpx/vD4nJyeyY3mIrT7DauHos+oLpiQEn\n4E6vTQPxY4mcLdiL93HIB31EF8feuvyDtgxgWCrQ7tP+s5S1ZdSv8zeAZER/\nv+73tvKvM7Va4cHIJW2m4lumjniuu3vloZGoGaaoISVyCq1QUq+NLqXkYhC3\n1t/+sl+kdxG0e7RmM5k6Kp88pXgyeklH6uOMUFWRZoNohHHaTn2T/iWZxoZz\n2EtpI7QMOSAtP+3WIkBs9k3XB0SC3AwOppcq6DUubo+uOI5bziD8kT4+0Xa1\nWkiQ5QR2eq8E0f65p9s8ElorxVBtmNP4Hgc146cU9Zlhyn13F4xFR3FQkhvR\n6nv6usMsKNCxlupaEwvMSg3gPC0epGpRs1o4kSmpAoRqN1432ANOoKiTXsAF\n0fcGqe7ccuQ1340+0WybM4PwLsyNIyZDyQ6IbERVPldDqsas32fe0y9yiNzQ\nR6JcmzVC19+vplrkdoGow1Gx8BaF1JsLJg2mF6oDFHUd1erARxVPWmnrvaZ9\n3C2eblEhHVhIL/52VvLwv2RB+z+/hGtDp1G8Mh7+YsNPK3z44r4Wki+3iOdh\nobXduc+HKjFdaOlEt7+PQFzI0mfct8uLgM2qAcHNIFRoHUK3/9q59gtWMi/T\nZKvd\r\n=hvHs\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.**\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n**Note: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.**\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n\n**Note: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommended to\n always include it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color)` | Sets the container fill color to the given color for an enabled button.\n`disabled-container-fill-color($color)` | Sets the container fill color to the given color for a disabled button.\n`icon-color($color)` | Sets the icon color to the given color for an enabled button.\n`disabled-icon-color($color)` | Sets the icon color to the given color for a disabled button.\n`ink-color($color)` | Sets the ink color to the given color for an enabled button, and sets the icon color to the given color unless `icon-color` is also used.\n`disabled-ink-color($color)` | Sets the ink color to the given color for a disabled button, and sets the icon color to the given color unless `icon-color` is also used.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color)` | Sets the outline color to the given color for an enabled button.\n`disabled-outline-color($color)` | Sets the outline color to the given color for a disabled button.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web button component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"@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/density":"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/button_9.0.0-canary.f89d8b8f2.0_1608678336933_0.2982795539241576","host":"s3://npm-registry-packages"}},"9.0.0-canary.fb194dd35.0":{"name":"@material/button","version":"9.0.0-canary.fb194dd35.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"c65724b44bd11a30bd53b9bcc3a2d93fd9dc30fa","tarball":"https://registry.npmjs.org/@material/button/-/button-9.0.0-canary.fb194dd35.0.tgz","fileCount":26,"integrity":"sha512-Gha4jY30lt30LbBWDQxztGHc97DhlEiqWhz69B+hLdn2OHZdDBQpKDBSuh7IeK3e00IeoaS7ClIQbpl+F/WbnQ==","signatures":[{"sig":"MEYCIQDq0syxrNxVVDumsukF5OxmOJAqQHjF2a2O0wOu2eSGhwIhAJZyNSP48BwCpe3yFD6GrRrVWTkMUEaJ9xqVJNbDeK7T","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":403240,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf6kQOCRA9TVsSAnZWagAAPV8P/ihF6QN5osAqTnU8MTOU\nQ5emR1awTFRjd0jBPKJRiKHVbVN/xbY5X3B2ni+OKOvelLBos6G5mVyo9BAD\nwqaWt7NGKBQNRWxfOGCUX8xKqQqtgOsbig3LvvhJeWbLOQ+aXtT6Ed7jeOL8\nWeumlM5eZ+W/motq7HKD/rdMk6D/IcJaGi8gY2kqQTXqiXg0RPhgcLbBDVWN\nrtaWkyae23qzaeHBCbwWLBFCkIyvyTjB6q3BHP69Arz6G0zaTmNjUjr+l5ei\nJvONIDVVnAnky2zFYsKESkB9wUq/ee6ZyZbQvRWKQekK6P/SUDQy2mlFDTmH\nb0BG5rpjzIxOhuzM52P9r6lRnyVptu9fnjBBiu909Ssv+I2NdGkiEvY9dOED\nfhbQDM0BMvs3djayxutfIEhXxK3FWccS59/XlbUByr0OOEhUa9TyJT84jb8g\nrDA5pR7YNFHL/RR0yVM/FeXVZwOTDJxOV38FWMCdzPn7x9e0Qd7c8/mY8nc4\nvkPE1pqe0JnZOTRarDWf9bJgT2uTE5+CMc6jdvl1o8KeOdWc2v3QQsui3BTl\nSbQZbw6KUNZfQw6RiMFAoPhEKL3cDgS+r/byHFudbkAuxFIFAjWKAxBa+F43\nB6XM6QQSH3rpzMc9FF5BVSQ1Q9m7flWHtXzN87SY7QJ0I0kYIB5fMrUi8VGe\ncWAI\r\n=LbJO\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.**\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n**Note: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.**\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n\n**Note: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommended to\n always include it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color)` | Sets the container fill color to the given color for an enabled button.\n`disabled-container-fill-color($color)` | Sets the container fill color to the given color for a disabled button.\n`icon-color($color)` | Sets the icon color to the given color for an enabled button.\n`disabled-icon-color($color)` | Sets the icon color to the given color for a disabled button.\n`ink-color($color)` | Sets the ink color to the given color for an enabled button, and sets the icon color to the given color unless `icon-color` is also used.\n`disabled-ink-color($color)` | Sets the ink color to the given color for a disabled button, and sets the icon color to the given color unless `icon-color` is also used.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color)` | Sets the outline color to the given color for an enabled button.\n`disabled-outline-color($color)` | Sets the outline color to the given color for a disabled button.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web button component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"@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/density":"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/button_9.0.0-canary.fb194dd35.0_1609188366225_0.795754208792016","host":"s3://npm-registry-packages"}},"9.0.0-canary.64f36e287.0":{"name":"@material/button","version":"9.0.0-canary.64f36e287.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"289a8d7a96d01b54eb1c0fce60308d19f6b0d464","tarball":"https://registry.npmjs.org/@material/button/-/button-9.0.0-canary.64f36e287.0.tgz","fileCount":26,"integrity":"sha512-JfWkR2OjW+OlZYfdBW1h0XJkHX/+7URtCySYKFxVnQDEfBBe7nz32T5lgmeYDgbsegr2Sx0oLNIG6Uy2g0S4yQ==","signatures":[{"sig":"MEQCIAuoKkW7nidgaZt03N31S31RS227tnD2WNiBcDAbeS9WAiAYR1H72jpcZm/cIWgf74DpoDK6vvXTJI5Tmh8Ie9Ex7g==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":403240,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf6klsCRA9TVsSAnZWagAApi8P/jFMYSw3ndvYWz/HBL9d\n/1CyyzKu1C2NVW1vkbLhud73eR0CQqxOUPcqWIcKoGmIUvfFLHs4+eLjuY3r\n9MrhGfHzdGXzM1QPcTtxV6uHtdv0vBt4+S0iWiChh9+3ojje7i9DVtxRX8m3\nYK8htVyqCJ/tR+ukbnqC8BqxF2jT7wxafF6xOMzKMXglWbEB6gjyiQh0fJZa\nCahrS1pvjWYOb86MfWV4EttRDu7UaRzr35UJUtoHrwcfDJrqNxaFP0r1pHR+\niG4MyLgjNV11WJl5dtxvczNNnClFq3FV/MPeh7X4RzmAGeP5Xh/udgU3+DeK\nF3Kv5GOJd5rtPnvi+Grg6INPQxo4oPx9795X3ZDeIbK3lkREOkEYR17Jss3p\n81bTzUUyL8OSdiDLCZCtdL9hazqmtruBMiZidXOq7amvK8hG1pqowqW90/h/\nRIPSZs5NcPww5t27JwRWrWicw5Ez6QeIbxZeizRRAIOKw15KEU7KrpGjWS52\nLIPVtVO6GpPMCeevZVQwKzIkNo55muoInHqcsVuDp6Totybj9kH8Z0hiGyy5\nclhGqukV2ShYB5GqOIu6pcjQ41uWQ63k2cpmRcjrrOZz9f33xYE3P3TtNkPU\nvifNUTKFmqWeIW4rwiiscDE+GgwB0E3H+5qb7pT4zpfhN7AHQPAjbT4W8Zaj\nNbzE\r\n=gRrt\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.**\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n**Note: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.**\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n\n**Note: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommended to\n always include it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color)` | Sets the container fill color to the given color for an enabled button.\n`disabled-container-fill-color($color)` | Sets the container fill color to the given color for a disabled button.\n`icon-color($color)` | Sets the icon color to the given color for an enabled button.\n`disabled-icon-color($color)` | Sets the icon color to the given color for a disabled button.\n`ink-color($color)` | Sets the ink color to the given color for an enabled button, and sets the icon color to the given color unless `icon-color` is also used.\n`disabled-ink-color($color)` | Sets the ink color to the given color for a disabled button, and sets the icon color to the given color unless `icon-color` is also used.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color)` | Sets the outline color to the given color for an enabled button.\n`disabled-outline-color($color)` | Sets the outline color to the given color for a disabled button.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web button component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"@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/density":"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/button_9.0.0-canary.64f36e287.0_1609189740436_0.17454717488269056","host":"s3://npm-registry-packages"}},"9.0.0-canary.b7bbe7022.0":{"name":"@material/button","version":"9.0.0-canary.b7bbe7022.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"55c9206bbea36dfe51acd93370c2a21cc25a5950","tarball":"https://registry.npmjs.org/@material/button/-/button-9.0.0-canary.b7bbe7022.0.tgz","fileCount":26,"integrity":"sha512-HzacHH7YtuHT75I+/GhKiYUJhUN6HzczKPP30Wae62TDrILZPsGAHiF+jLLfOY+Am5pLjb30nRxkaya+VyYqiQ==","signatures":[{"sig":"MEUCIAqAEtbI9PIoXGqL4s02L0LWbe0GiOoBrcH+39axFlpxAiEAlhfFtDnbEzHiR5sVva8IfQoex5TIPU4TzFxZf/EK+l0=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":403240,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf63n9CRA9TVsSAnZWagAAYaYP/2HJr4MjoPm8JqLQsA/y\ndWrwQ9o2hjssr6HBQXEFc0MdZOaWXZrcz2IEZJ+q28fbOnDSxrtkvO5yOJF7\n2e8warBIHMMlOTw15y2CqYicuWdvzEEbN5jRffEljCd3y+RgDf/B9CnG6sDK\nWFYvrJMsyt5GbJ7zAB9I4RbHqk8+mwWtS4pOAVm7Uc4A2GmhCW39W/Aqt1Sx\nJ34QapdBlxpbSGpkXTPO2HCePklDpodOeoJtlCD0ZANQWQrcCgBKNHjVJLms\nxw5hjqhW6kczPJvWlDCMqYEwX0VmsWKYIPb8PTfv2pP4t9jg7Uw19B2VcA+Q\nvOc8JCuKKHhRNrQQPd4XWU9AV+WM+jxg7GUu3MrCfg3JBjyHl+kEXS9TRp0v\ne4iqjqVaLSfZ5Q/y8uPPiMoAXsg0ALpWcxv5ZT59guvKti3fabFqcO/dMBKr\nVvCAi9xO2IhvN/4ajoaffg1Q8vUVr+xw1meuuWRUjg2Sefe1JwrJipzT6Uf9\nxJdgNUdk3qThMcG3VcD1Z6b1KSgVl3wvoJQ5Mf+iW+LoyScsUfKIwn1ZFZ+Q\nHhCmaCLp7zfxZddjYYc6uE6nTR2hCoVnQGVqcENFNbKr6Po1IRjj32idig3B\n3aFU2eQ6TgG5jbY0kSX0mfbesmm7j5Bf8Kv2HPcUwfK7r0CajttaFoQtAqe9\nyYk0\r\n=k1QN\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.**\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n**Note: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.**\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n\n**Note: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommended to\n always include it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color)` | Sets the container fill color to the given color for an enabled button.\n`disabled-container-fill-color($color)` | Sets the container fill color to the given color for a disabled button.\n`icon-color($color)` | Sets the icon color to the given color for an enabled button.\n`disabled-icon-color($color)` | Sets the icon color to the given color for a disabled button.\n`ink-color($color)` | Sets the ink color to the given color for an enabled button, and sets the icon color to the given color unless `icon-color` is also used.\n`disabled-ink-color($color)` | Sets the ink color to the given color for a disabled button, and sets the icon color to the given color unless `icon-color` is also used.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color)` | Sets the outline color to the given color for an enabled button.\n`disabled-outline-color($color)` | Sets the outline color to the given color for a disabled button.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web button component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"@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/density":"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/button_9.0.0-canary.b7bbe7022.0_1609267708771_0.5343534481430627","host":"s3://npm-registry-packages"}},"9.0.0":{"name":"@material/button","version":"9.0.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"a9018fb3a7b430b6d926a14593a467e4b4d03920","tarball":"https://registry.npmjs.org/@material/button/-/button-9.0.0.tgz","fileCount":25,"integrity":"sha512-8cvZJ6ljp9qqOmGHiQKn1fLjbhwG6r2793iEkvueu/eqdf2oD5NF1S45k29VygRfUS0cQ5Z2IV69GYKJv1ogMA==","signatures":[{"sig":"MEUCIQDAN5ug6b2bds2spyMiPvIKciPdByz0In35t+yDu1UgIAIgbIXPIkxMkVg3WCiVzOoDg/0IjnbnDrzr48zU7GRZVf0=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":402685,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf64eaCRA9TVsSAnZWagAAYK0P/j2NoqjEvkGEG+Bc+Tfe\nqxUDJZrrUhE5ExppKMwKyWwUNbWFCdhV+Al0NgrjXJbFYhApZsp+0jgpbNth\nhS5F46/XmLIdw3f1Pr/jdT2SlQYtbVdyVDItCHAKHzHye9vxaraiRLAaxMVe\nz4WBDu6+6ZFIzSgh9fhzcKLYOmoRkGsuOW3sRKBloh04OljngtAD/2CYgxCs\njVeN8ElmsolcSovSA4I69C+CQfaXyL7uPAPsYv2qS/145Cg3+XpfC+r+QlPW\nIbiCas4afPjNwWpYtSAOhvZiN8GTLVnxuF4fa91FY1OK+cIApuq/5KgAlUvs\nKMyWPiOHpdy8YSS79AIMfoaFw2pQPQWQV1/fQMSIldXEOqTvS5ymmck9f+GE\nq7XYJCBnzsFY1CqPqfuCqSguqxjEBp96VTJmECRlin/ryZElPuezSQcjGM85\nqiqt6czH5ETkWiO6+AdzB6ZiAjgrdwJp259+zR+DLoECtm1k50wt2yyBIRXR\nJc9eu76OLwBZcsjhbtgJLI7kReA0oFC8BufieHXLRMLKXSHR+IxrEiZeJl2Z\n2rgB+yPuI/usi5Es/D5KFmADHx1qhzyOSipNo714Msik4j8cBcdU1ZmH39X6\nSO7m1hU8EPxFtXS7rbre9a45SqN84lQ1S9ipCGgIsmzWUfrGDuSrSr8G3zwF\naB93\r\n=HkDR\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-button"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web button component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"@material/rtl":"^9.0.0","@material/shape":"^9.0.0","@material/theme":"^9.0.0","@material/ripple":"^9.0.0","@material/density":"^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/button_9.0.0_1609271193769_0.7027700941105726","host":"s3://npm-registry-packages"}},"10.0.0-canary.776c18681.0":{"name":"@material/button","version":"10.0.0-canary.776c18681.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"b07f2816461a785f48a740cbce15b41a730a1061","tarball":"https://registry.npmjs.org/@material/button/-/button-10.0.0-canary.776c18681.0.tgz","fileCount":26,"integrity":"sha512-E5gHLibVAjw8RWU8oQ1w3Sgb1J/ZN6u+f0lHnKfM4jtHRoLKvNFE2qAecSX+9Bcc8C7DZJG0NPeW7lhyFeCdKw==","signatures":[{"sig":"MEYCIQCD6h2N2a80qAHePl5D7jqt0K9KAHuyvyuK3rJvSK/D6gIhAKB5G9D3m5xKTX6MEa/RlIbh7L0Hsgs7vbzgrLydg2Fu","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":403252,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf68yHCRA9TVsSAnZWagAAmbEP/1m3lpvgN/3rj8wulrDf\nfl+CMwKM5+aebDg3Ds4bL9mxtHCJtzL2iUcs1ouw8xUYmGZVwPAdRkEGS0mZ\ngqkAxCyrrYqYiE6vgXGx+mVVhOLGOumrbTXEOmERHdxMdED5nVCRNzemVqrR\nph9MFH4R8PetvdJMPxUIQh9V0Jz1Rvsow7jZoOb7od7QU8NG7JnjA5isVrNN\nWfgIkfc/tQusHQIUACML03DgVwTZNikPC13n7NoDBvUuzai+x/AVnpZCHEL+\nnp4oRzXxm+5k6QZ0IIaBdaG/9P9dgb36IOj+v+XwCzQ5U4HJ6ngZ2AsODO9b\n5XT2PTNU42E4/DkDS2gNE4D5qJApUjOYyqvfPgQuzKwNnc/ukarpaoNCCvKA\ncsgI+5Eg0l02US7ggCNV8MqD1LgwlJDb1peHblTBHUoBvKTRThLthN8rP2Rn\nStXfluOcDkfqpf/nqM4zFdNZ/u3U7FIhzYiIoJQ+Z8YI563dj/pW6Hj8Vd9p\njNi77ckFJTgMVT/ihBwTUvEbJTe0ce9m1nPJ8+Ey0ieBbbv+q7Eg/A+vdgOI\nBvbpPL13uiv3zjAClQUafNBRBeuaYsZ/mMaIbA2ne1gsBho7kcbazvLISUdK\ndjceNDQ049EMkxUY8Lo+h/OzzQGCVkMLW9zWo3sl2ICnGcrfNAiSZuSSUika\nTeau\r\n=twMK\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.**\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n**Note: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.**\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n\n**Note: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommended to\n always include it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color)` | Sets the container fill color to the given color for an enabled button.\n`disabled-container-fill-color($color)` | Sets the container fill color to the given color for a disabled button.\n`icon-color($color)` | Sets the icon color to the given color for an enabled button.\n`disabled-icon-color($color)` | Sets the icon color to the given color for a disabled button.\n`ink-color($color)` | Sets the ink color to the given color for an enabled button, and sets the icon color to the given color unless `icon-color` is also used.\n`disabled-ink-color($color)` | Sets the ink color to the given color for a disabled button, and sets the icon color to the given color unless `icon-color` is also used.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color)` | Sets the outline color to the given color for an enabled button.\n`disabled-outline-color($color)` | Sets the outline color to the given color for a disabled button.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web button component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"@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/density":"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/button_10.0.0-canary.776c18681.0_1609288838886_0.9419299890775408","host":"s3://npm-registry-packages"}},"10.0.0-canary.671d72d95.0":{"name":"@material/button","version":"10.0.0-canary.671d72d95.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"daaadefcdff395be575272b26e72e7baa6bdeaf0","tarball":"https://registry.npmjs.org/@material/button/-/button-10.0.0-canary.671d72d95.0.tgz","fileCount":26,"integrity":"sha512-7RVdxpYRYGV1MQW/OSEooa9UTJmIhos3y1m7fzR0XcJUrOhEiAndunAuz9SoVNGmb5U4oFAncoCBWQrQUHR0tw==","signatures":[{"sig":"MEQCIH/ELKcM57CXgTjTtdks9ihR34t16VdXXF+pb8c09SZSAiBVoZsjkdi9sBCHAOuYvQpxZT0Ls0exzSP2RioDVwrKEQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":403252,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf7N8mCRA9TVsSAnZWagAA7w8P/RPdEWVG1ZPJLa+pHj0V\n5w+9XnNaQSHmCCXFMUpjhguVX8dlKxSKzxQy+0XUtRkrojUDOjrXAM+GzRwA\n4O7ZmTgULDDFLoCK86l7p89lzdo73/vTNWyPrB0uF2zoxYzbUPUkWakovqY8\nfysTJ9pgv/33H6CuixY/Opkrug/IuWU6QRl3U8CCf8jpGND/ZkJc3u9uYw5c\nzz5i9C8QOqvuWedOw1AsbS4E/CZ6cqtSpKxrvugbiRLhp23mghFuKAnb7ape\nqHo1H95e6E3TZ3CwyqLHDp0Lj4CfkuKJEqRz8MSETpFcpm2OLQSeB0jkf49C\nevpMJ+Qm25PoLHR9c6YVYId8YUJieflsh+JKNV/qmyNqBEjtpjKsIJhO503c\n8FhJiDHAlXhXv78Uv1PMpAwiORJhts4cdRRDbg3PnKsE7r8DYb10YcdP6RpN\nQZiTs1JhJJDGL2KfDdYbwu5pOVux6HLqnW1qMpDYiWAI37h0aMQ6giCealB2\nGN/eZSOnO96NfdzACDikMo/Odv+uzIpfLZkgQ5H8RtPCYnzsNMSl7QprwY2B\nmdxJCRvlj5nuVlpgSD7DT59DdJq2QuczwjYsz1ZPI8GQZg4LhO9ESKLMCJQr\ndHKhRsJYgxmPJbh739fpxOMGSwyndPgt6ly9p80TtAFZgtfmSe4FXeIVfQCP\nb1aD\r\n=YN1K\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.**\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n**Note: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.**\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n\n**Note: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommended to\n always include it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color)` | Sets the container fill color to the given color for an enabled button.\n`disabled-container-fill-color($color)` | Sets the container fill color to the given color for a disabled button.\n`icon-color($color)` | Sets the icon color to the given color for an enabled button.\n`disabled-icon-color($color)` | Sets the icon color to the given color for a disabled button.\n`ink-color($color)` | Sets the ink color to the given color for an enabled button, and sets the icon color to the given color unless `icon-color` is also used.\n`disabled-ink-color($color)` | Sets the ink color to the given color for a disabled button, and sets the icon color to the given color unless `icon-color` is also used.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color)` | Sets the outline color to the given color for an enabled button.\n`disabled-outline-color($color)` | Sets the outline color to the given color for a disabled button.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web button component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"@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/density":"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/button_10.0.0-canary.671d72d95.0_1609359142106_0.6884571964121056","host":"s3://npm-registry-packages"}},"10.0.0-canary.b4f5a1c9e.0":{"name":"@material/button","version":"10.0.0-canary.b4f5a1c9e.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"2d63f590ded92422aa92a82b5221c20168a8771e","tarball":"https://registry.npmjs.org/@material/button/-/button-10.0.0-canary.b4f5a1c9e.0.tgz","fileCount":26,"integrity":"sha512-Q5HqRXjAPVV0p7am5+qieOudH3q5geQtS+ws//1SlhZlTvm8jKzNFB/g7c+NbBZGEz5udnILuSx0rxn73u6SzQ==","signatures":[{"sig":"MEUCIAj+k+hPXFeLO/YEa2IIJTC4OUM7h7nHdD5of+M2oJulAiEAziY74XUEpBVkH+HWX4bCMD8SbhQy9HCF1EzhfObCSPc=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":403252,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf7PVRCRA9TVsSAnZWagAABIgP/iqPstOf2LJ6Wg3bWVY2\nXDsZUaWdJcva8I9a1XNYHzkB1+dUHr0ETMhHgK4i/8cUiYIMPbnOi9mLrrqx\npLB07+XrIU7JSXOkG618HLBrWCboWDRaAjL0BtG08rC2K6a2nigJt3uyNnA8\nZ7F54R5Kg1KTaaOUTrlFMm5WxVU8R5saKq30EtURrztV7mLmNbSSOfWj5/EK\ndbqWYgP1jQ9AYMVoEcIU9UntkrJQ136cyg7pz9flemoxMqyPdipWYs3hr26v\nknPx+dnNi36YqalCiJVvj3P0cPhUAfNYKFQbztizLEapiwkBteQWCNxSSql9\nBnSTfCn7IOdlvMreD+Do1bhMZPti6khX4tbmUTly4AWFSE1oIGGk8R8swAdA\n4i8cUvg00L/Z4fYqs5Ep0Yys1M4o2nx8oUPEk7VyoBKn3Ku5iugGkM4av4Mt\njIXQXm6OaBhCB0XABuCjCdE4UYlVQFoW7tSRAmW6tYlK5yY9WZur3cK8GyBb\nakk17wcsJhSH6WSUrJPvhuKyC2HUi1wdzMdeWeAw1zHo8q/GhOWXF10swfVP\nXXaQB7ScrGxqZ8/nQDB9/1VJNKtNZU/aRBQmxgBIMpwqHukdVJgHmlofV8+x\nw02s95+Iy7GDyr3p5HZi2VwZagAzrp1mSp9jPiHp2T82+Z/zIYSDVwS4CsR3\ni789\r\n=/uDt\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.**\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n**Note: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.**\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n\n**Note: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommended to\n always include it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color)` | Sets the container fill color to the given color for an enabled button.\n`disabled-container-fill-color($color)` | Sets the container fill color to the given color for a disabled button.\n`icon-color($color)` | Sets the icon color to the given color for an enabled button.\n`disabled-icon-color($color)` | Sets the icon color to the given color for a disabled button.\n`ink-color($color)` | Sets the ink color to the given color for an enabled button, and sets the icon color to the given color unless `icon-color` is also used.\n`disabled-ink-color($color)` | Sets the ink color to the given color for a disabled button, and sets the icon color to the given color unless `icon-color` is also used.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color)` | Sets the outline color to the given color for an enabled button.\n`disabled-outline-color($color)` | Sets the outline color to the given color for a disabled button.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web button component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"@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/density":"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/button_10.0.0-canary.b4f5a1c9e.0_1609364817290_0.863121782131546","host":"s3://npm-registry-packages"}},"10.0.0-canary.a94bd8deb.0":{"name":"@material/button","version":"10.0.0-canary.a94bd8deb.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"db5b9b8b86114ec6f17e3c176448605ea9df80d2","tarball":"https://registry.npmjs.org/@material/button/-/button-10.0.0-canary.a94bd8deb.0.tgz","fileCount":26,"integrity":"sha512-pYQ54KoecO/mAK3frXgbRzQtWhkwcyFJtn73NfKKveWARv2Y9eQnyDCY2hO2/BmKSMgbteiVZy06guOK1g6yrg==","signatures":[{"sig":"MEUCIQDcG/piNDopOcN+TgqkrhcnAm/GjHYEjJ2KCsscmETIfgIgIKR9T4ZItwKPcz+RWsKUQlrFXucP75Rvf2YXRJW2XQw=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":403252,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf7Pl8CRA9TVsSAnZWagAAtkMQAI0jwlhge22M5o4aHC9b\nBYzntJmtmWYwCeb9xVzPyEWjyBBUqqyCBc86Mhny+Yyj6IZVVMFNIbW0p48l\nWP+CHaESohSTVFd/3HYIZIk+PZ7JswsKGUXjLW04XDCygfWLhsDTMCGz32xP\nfar08evqoifjcuPsWgI43T26B2dZm950zy3MQS3Q3knnVfl0j5HBMg7LeFuI\nWXC+ETzn5wdy/T9ppQXwpTMrP3yqUCxgdnrnITYrPgbdHiOOUwT/CUSTcRb1\nozoALrfGsL6gKLRJnzF2RzklKNYztObph7Av7ys1wC2uIZvY9a88Lch1lIwU\nzIrAoVwdIOldeW2teSr9NNLSvsZEI+0I/+th4ZZEJifoA8MjYEheFRzcdEai\nI3Mb6t1TWqk4GhgFfJ2615xv3ODLGl+7s/KG9vtUQhf3nYsmEL73oH4TaJx8\nRBs/vcuZ1xS3D7yeWs+O4cpRXIJfovTmBIH3tUJjU9heu0KSADvgCtYfrUsn\n8xPBqqQx5OjhgjVZYaycGdQwLOvBrTUq1BpTBDzvvbmsiP1Ejh7rqi0AupXP\njbWHECr4pBXffD0Z3EVm02oOE8cz2AMOeA6T18kr12vHlx+xeve+sYB5rLzV\n+VoymCfUyTyujk4xLRTcqLrrk001Aq/OjODdLC8PP0cd4fMZ+K8+TTZ5unUC\nbXrJ\r\n=4kHJ\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.**\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n**Note: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.**\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n\n**Note: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommended to\n always include it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color)` | Sets the container fill color to the given color for an enabled button.\n`disabled-container-fill-color($color)` | Sets the container fill color to the given color for a disabled button.\n`icon-color($color)` | Sets the icon color to the given color for an enabled button.\n`disabled-icon-color($color)` | Sets the icon color to the given color for a disabled button.\n`ink-color($color)` | Sets the ink color to the given color for an enabled button, and sets the icon color to the given color unless `icon-color` is also used.\n`disabled-ink-color($color)` | Sets the ink color to the given color for a disabled button, and sets the icon color to the given color unless `icon-color` is also used.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color)` | Sets the outline color to the given color for an enabled button.\n`disabled-outline-color($color)` | Sets the outline color to the given color for a disabled button.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web button component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"@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/density":"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/button_10.0.0-canary.a94bd8deb.0_1609365884275_0.9944478330220659","host":"s3://npm-registry-packages"}},"10.0.0-canary.5d128511b.0":{"name":"@material/button","version":"10.0.0-canary.5d128511b.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"474babc00f1fa562dcf833cf919cdd9035c4a771","tarball":"https://registry.npmjs.org/@material/button/-/button-10.0.0-canary.5d128511b.0.tgz","fileCount":26,"integrity":"sha512-T2yL3kyDdxRIxqfzGtg/dj1uwr/Atx1tG1JyI5Vh9kZZLLtYo95tqznpZvRZJWQgC1ZkDLk/CQbXR46nDnvoIQ==","signatures":[{"sig":"MEYCIQCMVXUHgRIcXMJ3bHejwS+5PZEir2wNf3g22mwdm+B2lgIhAKepXL6kYV7+MUqsrQ9XJ+ktFJ+/qe2RlakkA+sBZrCO","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":403252,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf7PrCCRA9TVsSAnZWagAAYn0P/3uMIW5zUnNrYpjwaq9Q\nWSCvnn5uGNyNQfohoKdHG6hZD2x8IBSvJ7qJDgWCE8eNrO0fsMRoy9GI/msC\nt9yAuvjtzGUEIuFTpZ5eZVn1WfUHC41KuAcbLTS2v1zJmIFyljzUd3Iex/3g\nOlSS3p5JXyzvBG0ZYm9PYFGOVw0Ebw3xeXabuprDYBBRyHJ7M1JoZQisSeWk\nDdpATLUZdU+rZmE+r7AsaM6HVBt2gQ2kxR/19vMKe1A31JUixWIBrNUHbIR5\nNcrhibB+OBWJjH/4cyvZHC0EfI8vBzlycyaoeYv6tNiOBJqPmX0gX80U+MrV\nf/OQ+6PS1LfmhirINz6Pr7xXlX/TZ92eFQPBdEZHrUX7uyYsa9OOM/ujjxMV\nKUn+5kAzimsFwHL3duRZcEf7lred2FV2oMwExYVNBz6g8uSjzOppIhDVj7eY\ngxf3/gNXFKmejKwvr5a4PmnpQHnJV+6b1JCiQi+D7I1z8mDPrsaGHtpH/y2E\nBvNT6yU/cFsDz/SFJHIlugOYwkldmZIpCEc4851szSBu9x0Ji6fmCHh02neF\nFUbeIEV4FznGjVpWSwje3vukLC4XDVynnD7tQ5AGw5na3Pv6r9cgCVKYi+xz\nZpX/FAsYzce1CraE9ojn1Ws8JSLSjttImbqtYMUCMttd8Hc4IngoQOnhxLbI\nzY/B\r\n=bWbW\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.**\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n**Note: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.**\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n\n**Note: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommended to\n always include it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color)` | Sets the container fill color to the given color for an enabled button.\n`disabled-container-fill-color($color)` | Sets the container fill color to the given color for a disabled button.\n`icon-color($color)` | Sets the icon color to the given color for an enabled button.\n`disabled-icon-color($color)` | Sets the icon color to the given color for a disabled button.\n`ink-color($color)` | Sets the ink color to the given color for an enabled button, and sets the icon color to the given color unless `icon-color` is also used.\n`disabled-ink-color($color)` | Sets the ink color to the given color for a disabled button, and sets the icon color to the given color unless `icon-color` is also used.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color)` | Sets the outline color to the given color for an enabled button.\n`disabled-outline-color($color)` | Sets the outline color to the given color for a disabled button.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web button component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"@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/density":"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/button_10.0.0-canary.5d128511b.0_1609366210342_0.7901511859192578","host":"s3://npm-registry-packages"}},"10.0.0-canary.365c69360.0":{"name":"@material/button","version":"10.0.0-canary.365c69360.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"9e7468351d1bd88efadee617cff1544b77bc9b24","tarball":"https://registry.npmjs.org/@material/button/-/button-10.0.0-canary.365c69360.0.tgz","fileCount":26,"integrity":"sha512-WjY1xDny72QEnHr3qlIw+sLCu2Ljng+wYxM1eQ5jWQJX6W/AgbCA8UrMbKP/HAk3yvSwTwjaRsHwX4ykGovrPA==","signatures":[{"sig":"MEUCIQCYJFWKPaWsVeEEc+InetH3M70qFrGcFFK7baoSKXjrKQIgRIPEQNoUE1/FAelIec9vfL6tKuQo4tXHJ/MQEK2znXk=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":403252,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf9KZ+CRA9TVsSAnZWagAAUPcP/ju4VFgtSVo6ehTfuzwQ\nKX/2ks+TnpWf4a7z71IuZb8im+6/jYU82SrJZkxa2aYEaYhkENs33RIoog+G\n7PjuRu1RW0fl7tC+J1zhYtrsV2cvMxgPjYqURgOrKBKQkpIFw7f0BF2KMkyq\nG/QoSw4O7geqzOfeTTUREAfSUgpqQnMcEAlJLaDSPMZLNkwZuPMPPC/cr9Zx\n+KETXCEnpsSqR8jJBU53wgtMYbnqGb66lsh+83D71NqMQrR/ONEZ0NATS2FB\nJnMZxuN9/f7oY5jbWEepusm/aMuODUsL/EPosxNxQpO6orgG2WXvtxffYXZz\nVtUQO4yugz3n4rTjBM9wofobDZbrCEdDdwf8SElTHVrBir6BRFfWMrVuYC3W\nuB5QHAyJ6L1uOzMjskEzTooWD6y37ZyWpKlNotsPnDjD42aMgga+FNsbxRbn\nZNDuyWM43M8Tk8cusQNoH6ximPIQP7WHJWFGDLiMebKw/NgueRQ83fVEwVV/\n8rlxbTyqP+FoP3Cg4p64iT0Xt9jDEiAkzCYlLgUhGEf3SvKKGWFCq2DYoiQj\nDmlf4Vo+rY+5bj9Ew3hKOwNmcE/oI70YzW0PVPq/3/AWdkbb4dhPdr7fExRa\nfijGg3V9eB/3w8qPfQ1FoFVzLS09hsO7aB3J0ulhdCaAX3atK1D2Y2i88Ume\n4I/G\r\n=E/Ut\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.**\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n**Note: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.**\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n\n**Note: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommended to\n always include it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color)` | Sets the container fill color to the given color for an enabled button.\n`disabled-container-fill-color($color)` | Sets the container fill color to the given color for a disabled button.\n`icon-color($color)` | Sets the icon color to the given color for an enabled button.\n`disabled-icon-color($color)` | Sets the icon color to the given color for a disabled button.\n`ink-color($color)` | Sets the ink color to the given color for an enabled button, and sets the icon color to the given color unless `icon-color` is also used.\n`disabled-ink-color($color)` | Sets the ink color to the given color for a disabled button, and sets the icon color to the given color unless `icon-color` is also used.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color)` | Sets the outline color to the given color for an enabled button.\n`disabled-outline-color($color)` | Sets the outline color to the given color for a disabled button.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web button component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"@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/density":"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/button_10.0.0-canary.365c69360.0_1609868926285_0.7449327568777653","host":"s3://npm-registry-packages"}},"10.0.0-canary.700a8261a.0":{"name":"@material/button","version":"10.0.0-canary.700a8261a.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"3157b0bea6014975860427f41f14e158d2f2cc5e","tarball":"https://registry.npmjs.org/@material/button/-/button-10.0.0-canary.700a8261a.0.tgz","fileCount":26,"integrity":"sha512-EWlD9GrtRlZk12wCOrgQ1zUywQ1gn1HDXzylSJWIPYZe0YdEG3IOOwoI9AMaM3cvp8osgXJlQ9MgzC+z0kW7Yg==","signatures":[{"sig":"MEUCIQC0WmROGO8+iJMhzjJ+LYyaCrZH8D9VoBxWgOHZJhYLAwIge7tBJIBC5oM379bt9KfDKAqq/PWL+s2o9RXWWpsAXKM=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":403252,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf9NORCRA9TVsSAnZWagAA48cP/3auFw/wOWYx/ur9Q7H3\nICf/7PBDwumxxvpGNrys9N06dNfJxzbQe/jtaWmuqKlgrNk56H+vlIFudcnC\nqH8jorh0RvvNh4vhOjWfuhi46g7z1Ce5sEqaGJn5LfVKmMpjZeF6WscdsDE5\npAC7pFBgzp6SWNdlwtfqe18GYQGZrHwBuHtnaBkPDyu9Zu+kZmV0pKEUAnH6\nG1uHEt+HwAraJ3Q+NbQ1nwZPwCuFaqOT6Lum5OGzFkQN5X2hLqodhOJQAf+8\nqwYFZXn3Wauz/Eom4RhIutKaTlxvk+/MMrX8QeW3PF1JEzPqxBx89DLByJCZ\nKKe2vD6ooEP1wjoosuNocQo9QzKjLjrV7kB7YFmYadZeIxnk98JC3L1A1QJL\n8xf3pel13LJnghuXcNPqHv9Qpkbod0tHwxZe6DHCUHwHlSxVbaBF0hER1swF\nkJS/FF0kBo3KAAUzbQ/HTPV0Q9k+4YhLmWFQ8hSn0mw/SvlUY+XC9IDfmja5\nhlOHfgoEa50Dum+SXLKBWLml5s6TDupnb3hmXtvU3K85Oe1ZRPzs15x8BNVO\nncZaa6m6DiW5V4Z9pePzMMiJWlXBXdojRpDZSpQOlL79S8AnjCt+JNboH6G0\nAQNkrUDSCAsNgOlLg5wxXYm3lLNMaT7uv3XDG7CjZJzmw8d7s2CbxOu/BCum\npw5L\r\n=H8O5\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.**\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n**Note: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.**\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n\n**Note: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommended to\n always include it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color)` | Sets the container fill color to the given color for an enabled button.\n`disabled-container-fill-color($color)` | Sets the container fill color to the given color for a disabled button.\n`icon-color($color)` | Sets the icon color to the given color for an enabled button.\n`disabled-icon-color($color)` | Sets the icon color to the given color for a disabled button.\n`ink-color($color)` | Sets the ink color to the given color for an enabled button, and sets the icon color to the given color unless `icon-color` is also used.\n`disabled-ink-color($color)` | Sets the ink color to the given color for a disabled button, and sets the icon color to the given color unless `icon-color` is also used.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color)` | Sets the outline color to the given color for an enabled button.\n`disabled-outline-color($color)` | Sets the outline color to the given color for a disabled button.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web button component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"@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/density":"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/button_10.0.0-canary.700a8261a.0_1609880464837_0.7565623565864319","host":"s3://npm-registry-packages"}},"10.0.0-canary.766981c15.0":{"name":"@material/button","version":"10.0.0-canary.766981c15.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"353ae36fbce6bcf34784d0c57dd1a6c8d33ca030","tarball":"https://registry.npmjs.org/@material/button/-/button-10.0.0-canary.766981c15.0.tgz","fileCount":26,"integrity":"sha512-6/+mUMCTYkxC4ucIJzd5k77DS3F3dMlNGnWbcmVfqdKzM8QtBvsnIiH8ZJLGZ+1BUgy9Z+QbLEQ5umxIk3B6Jw==","signatures":[{"sig":"MEUCIGHtjY3X2VsDODUl6pITZRILhlT4v9qOl2F7b8iO6UV4AiEAz6Lo+VfQZ2s+KecHHnrx6ujzndsejfhlVk/pySnSPk4=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":403252,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf9OryCRA9TVsSAnZWagAAt7MP/juLveEsUOJIXcua5AFm\nvXSW1+tHvSi28yHI5W6DibQeDd2Ne2VHmIg7RCYd8pXy5mHAkYJ7SbtCjN0z\ncAgEvHZaj5e/6I/P8J27Qb/t4JXFi6ZQaPs2MTE966H3s4HIoQMGIAFKRdvd\n1UUeFz57RUQNCcHftM1uigBaekj6KdEYpWRnez6ma+91AZv5gT1PxGQVNiPl\nWe3gkRvdGIrLFRT/aSYe+yO85mhUG+j/ESJ8S9Aj9zGC/dWFJZf/xM3NINfd\nooKGqwKWbknoOk/4U8uiQdOM8Mjlz2eLT1utT/Z196JChp00LdSd74Vj8VjE\n1RAsr6ETrY98/RTkLHsup1mNS6WuJZbWDYCu25SWVxTu2bukZBvLM/Bshk9n\nePayPV/P05ZKMIeZ2LlZpzt39xqYF3GKx+jgB6MaPh0XqDj+ujzJYIrEq1I3\n6uRQfIfd89WbLADxoCH7EfcWLKfsHEUeUXsstx9Ij+gxu0lmQqdC6T9HQKAJ\n09CxxB28CrVKel+a6Q3fhpsCgU8hQ6iOO/YrQJX5oh3h1MqQcotS0UcQNBGq\nSDfMNy3mHJ2muEDKX4fp5D5ARs04k1KtlMXfy1xcS+I15RwjGpxsOWsP+FsN\nymjauHgzUjQD4UmCL022K6uwsS5U7RHgvNf9LCttr7tCNtiH3O0nVghCjkeE\nRwaH\r\n=Fkgr\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.**\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n**Note: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.**\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n\n**Note: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommended to\n always include it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color)` | Sets the container fill color to the given color for an enabled button.\n`disabled-container-fill-color($color)` | Sets the container fill color to the given color for a disabled button.\n`icon-color($color)` | Sets the icon color to the given color for an enabled button.\n`disabled-icon-color($color)` | Sets the icon color to the given color for a disabled button.\n`ink-color($color)` | Sets the ink color to the given color for an enabled button, and sets the icon color to the given color unless `icon-color` is also used.\n`disabled-ink-color($color)` | Sets the ink color to the given color for a disabled button, and sets the icon color to the given color unless `icon-color` is also used.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color)` | Sets the outline color to the given color for an enabled button.\n`disabled-outline-color($color)` | Sets the outline color to the given color for a disabled button.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web button component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"@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/density":"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/button_10.0.0-canary.766981c15.0_1609886449825_0.1647395019205662","host":"s3://npm-registry-packages"}},"10.0.0-canary.b28c576d9.0":{"name":"@material/button","version":"10.0.0-canary.b28c576d9.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"b38b9293185c48bf7ef730fc85efc75ffe6377f1","tarball":"https://registry.npmjs.org/@material/button/-/button-10.0.0-canary.b28c576d9.0.tgz","fileCount":26,"integrity":"sha512-wKv47MmmCvIWo1u1yswLaX48vTHh4Qx3Vd6aBo8n1vXt71K8PN6+Q1kDNPac9TwCKWYgsAQDbBdSTnApNKLjGQ==","signatures":[{"sig":"MEUCIEqi3JsnNeeNh5BetlZ/9qfBjv+g3GsVMVb2VqqZP46SAiEAoMpcz+//LMYKgz+R8Ld5K9qahazb3b32sv4d9Vx0+pw=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":403252,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf9O01CRA9TVsSAnZWagAAoqEP/1BSuyS4B/r/GVjCDzqf\nQOwK+zOT2yAgZwaBmBxwUbg5iEMZ5oOY8YkQ8YdS27MzMhZdX4LN/izgO3Vx\nZKOHKK55VM7d77U6TCP1ckHJ0pzXY9j+Sg9lbJFSzfUOon7CtH6JBZPvfoek\nYl7GjT3Gon8/XlTfGtlfj4Eon8zcupzasmqdupAsO2VR5OwFf78vmoCy0TBz\nBNzTLFV+spRyodYsM8Yy0mzxZYNbre7Sbo7ZmtDZ/cKVMngGTNW64Uz6vEbS\ncxq4SZ33B7RsFSE0wG2nR5y3CTpdrbPDxoeD5dEWUTmhRjzqWj3UPx4CVUiZ\nRp1GIf6ZUyrn/sFsuLOA/aSdjuCdU5GYDYXBhu4yiUNUiZUjrZ6fbSKz9QUE\n9T4H4DnwtFP4J8C/VHdXfRfztFszlZFLLkxz1Evcs5AfEJZoGtnZCIgscGru\n+ht7L9+wEZrLY8Wrel0IL+f3wJjDuxc8q1u0Tc86+N8GjXKW7x6UvlLa+6h7\nS7hPA6mI7It6svJXd6CvUw3TYUDIWRWchqQxU9C2KRlhBlSg9Yv7IWxNX8qu\nQrhjWuBbrGlrlO6I5FS20xLqcjJ+xqFkVc3iZo5ai1AeynLsRFnXO0LYSb8G\nIcFvDP8cQP0ueamFP3odnivVaWTtQRm+Xk97SkGvtIo9+ioxF6zfwf8nImLl\nFpp8\r\n=MC/Z\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.**\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n**Note: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.**\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n\n**Note: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommended to\n always include it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color)` | Sets the container fill color to the given color for an enabled button.\n`disabled-container-fill-color($color)` | Sets the container fill color to the given color for a disabled button.\n`icon-color($color)` | Sets the icon color to the given color for an enabled button.\n`disabled-icon-color($color)` | Sets the icon color to the given color for a disabled button.\n`ink-color($color)` | Sets the ink color to the given color for an enabled button, and sets the icon color to the given color unless `icon-color` is also used.\n`disabled-ink-color($color)` | Sets the ink color to the given color for a disabled button, and sets the icon color to the given color unless `icon-color` is also used.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color)` | Sets the outline color to the given color for an enabled button.\n`disabled-outline-color($color)` | Sets the outline color to the given color for a disabled button.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web button component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"@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/density":"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/button_10.0.0-canary.b28c576d9.0_1609887028721_0.2614009026077575","host":"s3://npm-registry-packages"}},"10.0.0-canary.968735356.0":{"name":"@material/button","version":"10.0.0-canary.968735356.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"def066be747e918763608d11cab3971e023aec0b","tarball":"https://registry.npmjs.org/@material/button/-/button-10.0.0-canary.968735356.0.tgz","fileCount":26,"integrity":"sha512-DEgq0BcN3EmR6H3qH9QIWft5BDxrbnt90KWZ1Jmnra24BL125LbMJiGKAbnXDzfifCTjkg9Wi7anCvnkuq7nxg==","signatures":[{"sig":"MEQCIGRozubHxqe8F+ixwRhXxUdIAJ1wSThMBdr+Ir0+yhNZAiAx9dM7sLn9NMAEn3wN3lStLTJcrnJYoaasuHtXjucoWQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":403252,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf9dx+CRA9TVsSAnZWagAA57YP/AnOYqGwK9p4hdD7OyD0\n1qyskrqbhXQeLQ2dPirKEbtlhWJ1gZIo9EuC4fJbuwWiAI61EdQjSHZ5SqZ8\nz8VfgfuaDFIT8UCZ+GR7xNfeEO1eQe1zm+CSpgBqUAChcwuodr/gc89DBdzf\n8VdSRZGyC9FfBCMocr7JyIUpNGqP91BMP30EzPZ+1HhBJuPBNOHhp01EX0j2\nTYrABxKvCZjGPKxyGvV7BBMHCAguVtW4Ld1LUDAsNNMkIzFXdBIJ0EwN/+oS\nPncxtPgBWFc5kiJJnc031spq3D1IIwcghxBdIRyFjOEmFdTFWJysIyG6kAcZ\n+6rb2yrqhGbEyQOFiOTpLam44xNrRXEMLHCmGZAKIMN1l0FL99GBCLhMHmEX\nqXyY5MrHFTqt31H0XHQZxAqsIzjEBU2LMh+jrfYIQez1DVdc8h5HIMBuGkyF\nDrsdBE/IOrVyCS8L/aoeQvBE0sUFxwzCs6DJMBhqQQ9NmS52s3kr80hjRvZ8\nRpdI3tcE216VwTmrAtUUntsoawDG8sgEj7neiHSl71D8weD1izYayOcCFhGr\n1tS5VpwTKlW6Y1ToQtpuY+HUxoTAMDVndY0ao30dHej2BTcQkdmPJRGq0l2i\nGN9VbgD9JW/eRrw63nTnHKqyqtwz83lpmoiZK8ti4x4I0u7fmrcd9KMR/Qfh\ncC/h\r\n=5RdI\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.**\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n**Note: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.**\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n\n**Note: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommended to\n always include it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color)` | Sets the container fill color to the given color for an enabled button.\n`disabled-container-fill-color($color)` | Sets the container fill color to the given color for a disabled button.\n`icon-color($color)` | Sets the icon color to the given color for an enabled button.\n`disabled-icon-color($color)` | Sets the icon color to the given color for a disabled button.\n`ink-color($color)` | Sets the ink color to the given color for an enabled button, and sets the icon color to the given color unless `icon-color` is also used.\n`disabled-ink-color($color)` | Sets the ink color to the given color for a disabled button, and sets the icon color to the given color unless `icon-color` is also used.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color)` | Sets the outline color to the given color for an enabled button.\n`disabled-outline-color($color)` | Sets the outline color to the given color for a disabled button.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web button component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"@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/density":"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/button_10.0.0-canary.968735356.0_1609948286171_0.15046893432760622","host":"s3://npm-registry-packages"}},"10.0.0-canary.c5e18b020.0":{"name":"@material/button","version":"10.0.0-canary.c5e18b020.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"a361d851d84c56caf826f153b15dfa4c1485a128","tarball":"https://registry.npmjs.org/@material/button/-/button-10.0.0-canary.c5e18b020.0.tgz","fileCount":26,"integrity":"sha512-yDP8M2pAUAw1CORefIPxZ/CsWiMG6NEDfeHbb2r6fT0dCoGYWPqnfR14jKufS7XBfNHX8k9+JLTZvo7SKOpdVA==","signatures":[{"sig":"MEYCIQDMnDVjxiba/6ompvCsrgdUL9ap7YUYVmbfELqk5Y294wIhAKPrVMRSpYSfbQV7FD5mIVBtR4qQz1BT12ln1uYBkvA0","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":403252,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf9hMsCRA9TVsSAnZWagAAwOgP/jpWiaJGcB2CbZEwTZa3\nth2H8erZ555xdAUqkg4KQ5P5P1M9pXWjJbDVQgj+QHQP4c6jCnFStqpMeyST\nCFWOFinvDs4QIOZYgANta5Y2Dmzu1C5e5J8C2LjLwbKCv2Ue4PfaXyxUvGXq\nKO/YoGVnv6PTOX7/YcqG1DerWEPNIOBdHLY7rSD+B2V2pELgR2md16dT890k\nFsanyy6KaqFpKWQ2SEjngQQ7cjqIYraDTfdkFUktTQTtVkY8h5SctF5wje/i\np9C6lyq2M6oqiRuAAvFk/XPrDKGsxNXvUu8j6azgij0vJ3SPRUn+d+IiEyz8\nyU7dl7XJIcJjSObXlAeuGYmks84v8guQ2qkrZFqirOT+4ds4efvoZTmgCLxh\nY3JJFL1fDy7FJ7WeC5IuNOTO9xSjws+j4pavYs99LzljWoRxGPY/ESjOqajM\neleXwcM7ZfUQUlLi6W/0+4bS+kqDHuuKPR7dguwezzIPyqJGQxxZGIhSj8Vr\nNp6jhPpFY+Kl6P8HEs/QTFTfjBEc1dh3ik7VRbTQYEOwrQT6XSvgTaIzn0EC\nksY4c9RKswrjm9tRa/Wca2x2uGKc44TFuo4gQ5N6bDpO/7g4R1EgyIiPBFhz\ntkMNTj3VMq5aBXlrq74YAoE8BFtk+Y2+wBg1t4lKjVqSE6Gqro0jZ77G7uJu\ncjS8\r\n=jKaA\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.**\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n**Note: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.**\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n\n**Note: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommended to\n always include it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color)` | Sets the container fill color to the given color for an enabled button.\n`disabled-container-fill-color($color)` | Sets the container fill color to the given color for a disabled button.\n`icon-color($color)` | Sets the icon color to the given color for an enabled button.\n`disabled-icon-color($color)` | Sets the icon color to the given color for a disabled button.\n`ink-color($color)` | Sets the ink color to the given color for an enabled button, and sets the icon color to the given color unless `icon-color` is also used.\n`disabled-ink-color($color)` | Sets the ink color to the given color for a disabled button, and sets the icon color to the given color unless `icon-color` is also used.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color)` | Sets the outline color to the given color for an enabled button.\n`disabled-outline-color($color)` | Sets the outline color to the given color for a disabled button.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web button component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"@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/density":"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/button_10.0.0-canary.c5e18b020.0_1609962284091_0.18749460859703815","host":"s3://npm-registry-packages"}},"10.0.0-canary.bcff8a66a.0":{"name":"@material/button","version":"10.0.0-canary.bcff8a66a.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"7b8b4c0e3f6980daf31f368199e1e112a0283821","tarball":"https://registry.npmjs.org/@material/button/-/button-10.0.0-canary.bcff8a66a.0.tgz","fileCount":26,"integrity":"sha512-mAHIhpkgtpVnRTz+59bBozImBBsnDN+WACor1FCKHGlCnYioln/2mHe2yDzdj3ya9oR9ApZqmPcmWGlSuj08DA==","signatures":[{"sig":"MEYCIQCjEmkiJ5FGordaRz0LIuw7cPp5LHqIVJuvuANklE8jRAIhANsYTr7F3P9Ky9lZfKvrP9xeapunj8IQIucDvrEDt5y5","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":403252,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf9h0KCRA9TVsSAnZWagAAge0QAIO+efOLynSbz5mSZWHX\nJeo+94wKVKFqB5f4eKo1i6CP1A+rDnFC8x92C2ouBSIfiTGXp/uJcmBq1BbE\ntk6M/tJ+0c814+d2gP090Sa4wEaRL0MN0n2tPrf0CADk+wFqbo26AXfRuT/t\nMk7k5DaTt6tDAUe7soEL87ZNBymMXnkzQ5zVkykcCbLbUQZxaLM3MHnYcns2\nsSTWuU1+J+eDUBQGbeJip+zZDvkFnK8wr63jXTdf+U6KgxovB0SEGpTo0nB4\nqwl3Zx/zYJk8LG9Cw+y4dY/nNLsLOTNz6Dzi3WrDs8zGZOSDwl/tqCX+qJiN\nSCusZxoMkbeMfGqcbyepyXDmu0/NaPiI74SYz8FgV03AhDxRIqgSnSrG3iSY\nLFgP6/yWAUQeaWCzUEFx3iWJOfuDV73tkutYk6Mfbnu2cSphY6Y/Lcmo5C/s\naO2803AxofbmbxUsBkAbDQ6iGi6PwqZaELiB+KAjDCAEDzfq5L71eTmxCD2E\nASkE5JaNL7TZZzq1yLKIS/AXcb7G97Kxe+GpomZM3KQGMOKltjxIzrRLUu2E\nFBrlwZ/GPClTdbJxhV/kA8/gquSoFRUJEwIA323MZkuCxj99WEHDx3jc11/G\nRYzjRbBsJkwIIT1rRyW6KvH4L5YNhUJ5+4G1XgVI29R65NL7Jp7hyiwPQ9x7\n/aNC\r\n=LTYo\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.**\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n**Note: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.**\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n\n**Note: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommended to\n always include it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color)` | Sets the container fill color to the given color for an enabled button.\n`disabled-container-fill-color($color)` | Sets the container fill color to the given color for a disabled button.\n`icon-color($color)` | Sets the icon color to the given color for an enabled button.\n`disabled-icon-color($color)` | Sets the icon color to the given color for a disabled button.\n`ink-color($color)` | Sets the ink color to the given color for an enabled button, and sets the icon color to the given color unless `icon-color` is also used.\n`disabled-ink-color($color)` | Sets the ink color to the given color for a disabled button, and sets the icon color to the given color unless `icon-color` is also used.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color)` | Sets the outline color to the given color for an enabled button.\n`disabled-outline-color($color)` | Sets the outline color to the given color for a disabled button.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web button component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"@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/density":"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/button_10.0.0-canary.bcff8a66a.0_1609964809767_0.7541369916464695","host":"s3://npm-registry-packages"}},"10.0.0-canary.79328c9ff.0":{"name":"@material/button","version":"10.0.0-canary.79328c9ff.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"86d7570ac5d38b75d18a44a675281ff5a8a84b86","tarball":"https://registry.npmjs.org/@material/button/-/button-10.0.0-canary.79328c9ff.0.tgz","fileCount":26,"integrity":"sha512-k6mg3EuBCXxrgGnSwkJZcHUNnkoBo0WGQ71+378AnLB2us2yqJ0dRuPJolnGIoLPcE4aV2SacN1b6DxcRvW9ew==","signatures":[{"sig":"MEQCIDr9S86C+h/kSf9HDiPG82I/rVVCetmGqRh/H+RhFfLfAiAslqx4fjvEG0g66+pus/BXqGZ0rQjJ9v+0hA7uzqBqNg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":403252,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf9nNACRA9TVsSAnZWagAAt/8P/2r1fC3rLcqPp4UB/Eiu\ndhQX65iMLijIk8o127tWP+OIqYAAMyE9a3agSYDbkWC7FQNwQDlmhrMO8v55\ndPeilxa9CycQ4HBfvyJmnrZp7LP5IYSNBVxtCP57lE/A+xzQSzCicdJlhKB7\n6bporC6ZPx0KfHNsEHCSMqCv+pY4svzD43iWXFkExBIl/5ZriIGqltxKYnih\nb1708WzVYuWy+3VPp72UlQ9w4yxi/lPOdjFI/Rmorbq+Gd/fbsgN2sp1jOfM\ngMLUdicQdA6jGQ9RyizvqeGMxaOwwiJ8l4oGnoa1LYdIuYxFiBwZHFWZ7Zu9\nImQ72rCVmovTyAvv7IY9eTjtV0VjCEhr8Zg6PG7zBvnlEh97MLpsX84oqURT\n+3gAdzGBtG5OlzYCcG69SnC3SHrNbiVusx5EWueR/exYfxh9A7lS2l6x0jmd\nrWlfD6tJ+aICCI7fy9Zv2PvlAPcxUKT3qpOAwDNxZd4b+vKaTEwTl3I7AbuS\n0fP9i9/l+kBZGKag3Up+Rj6+1JGHRXP3tt22L0GNRCpV4BsQZn/HFDhgCNfj\ndxSzLlinUp64qqjzoKaumHX5eaRpOmO3RAi03IA/zzHXfWR5TpYMbglD6tNZ\nCY/KiKw6ECGe04WC0ZeN8INjSv92yKFBAhpHcH2YO1aTD4H7xYY2ypr6VnGz\nxQOD\r\n=9k6e\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.**\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n**Note: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.**\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n\n**Note: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommended to\n always include it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color)` | Sets the container fill color to the given color for an enabled button.\n`disabled-container-fill-color($color)` | Sets the container fill color to the given color for a disabled button.\n`icon-color($color)` | Sets the icon color to the given color for an enabled button.\n`disabled-icon-color($color)` | Sets the icon color to the given color for a disabled button.\n`ink-color($color)` | Sets the ink color to the given color for an enabled button, and sets the icon color to the given color unless `icon-color` is also used.\n`disabled-ink-color($color)` | Sets the ink color to the given color for a disabled button, and sets the icon color to the given color unless `icon-color` is also used.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color)` | Sets the outline color to the given color for an enabled button.\n`disabled-outline-color($color)` | Sets the outline color to the given color for a disabled button.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web button component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"@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/density":"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/button_10.0.0-canary.79328c9ff.0_1609986879636_0.9926782706896731","host":"s3://npm-registry-packages"}},"10.0.0-canary.121e1f303.0":{"name":"@material/button","version":"10.0.0-canary.121e1f303.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"4980e17b53e90e0f7e2fba62f46b86eed194fa8b","tarball":"https://registry.npmjs.org/@material/button/-/button-10.0.0-canary.121e1f303.0.tgz","fileCount":26,"integrity":"sha512-igURu8WuVfzF4K5f3fkeFO1rhrj5FQISxybmuiR+nkt0rIHpJ+CzVJT8nxdLfzCEaYF1nL15gK8yzFaj+VOMxg==","signatures":[{"sig":"MEQCIExUO5m/h5a9fx0IgpocXKJODkBMI/LT1zQ3ZyiWZdaiAiAd6G1C+sYiPUsBD75eDNidk30h5iUOGQrOlFaPkdkxfA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":404761,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf95c2CRA9TVsSAnZWagAAv9sP/1kMQ1szRPan2g4NmXIS\njWRroe3ot8kUHgIK6JPFW4Vgo/A5FHGz4lWrD6JzBb8AG697ZmkRfY+6XUzc\nv3QAnsR1d3Ffsm2WY+/t3pcgf9WTz5Qn4LoomjHGlEJVQH1pnegaHAPi8Oc2\nMFTsgGDjP6/qWoADTTtFU9rGSnTZj+mQL6H/SkGSRVWN2VebLnQKbvuezvck\ncdWXXOCEsUSlGqDgzAXV9u3KP9HdFsGHhphBbHVLjaiupJhB28dCmBXW7BTf\nu2PiuDlffsFjmsnFMPmg/3nwLFWrLOaPpXEa7MP40jCcEP/lCSpGpJyYm36r\n66u/ow5IUIhX53d9KA0tcs4/0X5fwNbo9lHN1h2a03gVgYyY/YI881QfWgLm\nCg1rmZ5OWQ8AelSOuOp1ROXTt6LdGs0LltFwB3SSiFp4H8iXTof5f66UPzSS\nDfC8ws8CP1slPyvJ/aGqZifwki1qOOPlygfBI8yTmRAR1QpeNWpESNMwEQiJ\nhi8Wc/wEWlsKXLy+TUIoJWdLHHzg2lZ+T9XtMkbpgwc04dM3JYkwx0DVo+iV\nRrqr+Se0Ie1QesrtoLwTPuyT4VTAKoDULDlx75bb6/L/khYTOWcUsb2aJ5HO\norNW4Jd2nCHkWMQgbkRbs2Rzte2QR9vOFBCOWPJUxIGGVUlLAOXdPou11HQ3\nD4z8\r\n=X19M\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.**\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n**Note: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.**\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n\n**Note: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommended to\n always include it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color)` | Sets the container fill color to the given color for an enabled button.\n`disabled-container-fill-color($color)` | Sets the container fill color to the given color for a disabled button.\n`icon-color($color)` | Sets the icon color to the given color for an enabled button.\n`disabled-icon-color($color)` | Sets the icon color to the given color for a disabled button.\n`ink-color($color)` | Sets the ink color to the given color for an enabled button, and sets the icon color to the given color unless `icon-color` is also used.\n`disabled-ink-color($color)` | Sets the ink color to the given color for a disabled button, and sets the icon color to the given color unless `icon-color` is also used.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color)` | Sets the outline color to the given color for an enabled button.\n`disabled-outline-color($color)` | Sets the outline color to the given color for a disabled button.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web 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/density":"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/button_10.0.0-canary.121e1f303.0_1610061621489_0.8923969255453488","host":"s3://npm-registry-packages"}},"10.0.0-canary.abdd10065.0":{"name":"@material/button","version":"10.0.0-canary.abdd10065.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"b008e6135f5c4435790737da512543249ccf3cc8","tarball":"https://registry.npmjs.org/@material/button/-/button-10.0.0-canary.abdd10065.0.tgz","fileCount":26,"integrity":"sha512-+nts+KEnsTpbiQKo5nM2qHHLeh6rswNyYvP73x36aSQeva93iYqwzBVF4sBPK9+E0zp1QvW2W2BSHtYLM/hl8Q==","signatures":[{"sig":"MEQCIBTSCUhZ1f2xCInRYRf/J/HaP1Ga5A/gBBzLFgAru6NMAiBGJCIffwY8huaq74Vx44nwyWrhEgxW3NSiUiTaOuVHug==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":404761,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf+JvCCRA9TVsSAnZWagAA1ZgP/36G9CNI6hHKgt1qTbob\npPqHWiEsZZx40dcRSVmOeZPP3JR89DmqSQKKMSZuhTYtubVikqlyUL1YYmqD\nt9O0fqlscqjFsd9n6T7kfOFx/mpYKSanF8H/bkANbNASeTdZE8s5Hvpr7QHX\ngLlN8CxBeazRkovF7Rwf6Qflx+QRzWTsfdXmlfloTFKlqH0OElRPFYIFVY4v\nDCBBwScI8fjWh+xeqt58x2x+kKSa2e2i82bEH3XbM88EXsG7C7VyKYpBF+QQ\nTjhFci8LqokM6T7zDgylq9vbULMpT9IAjBBDB3KL3BW46KOBfJt+7mfTXbGs\nhQpUfg9Og4PvNGmbMDn+2xNzqNxWZ7Dq1K8e0SZ8HH3Nh3JRdEuQXcza2mwi\nFEBIf3O9Iwf2hh2geFrTiqGuvaxWkFEVMLYcgPqDomfzFwutwv7hLPRH8dkA\nGCkA2TbCxUPYEiTsxTKK/7aFmSCJLjnXiqNUR42R2zl63QFUOiUJtuCFLRIt\npKuKeslK9ykLIqy9wqGh0pgIUHZ1YrS5jXC4picUVXhQVh0JfBsvNmbpQQsx\n+zDatERgLFHrLcgkbr+WFVSYV8Rh3CegRfT9qY8Vqkc0vDF7Sn7gJ4NSqD/9\n9TBfNgf43bXzPIKUhCRKMMQo5MF1CHzT73CF2y+Hy1BZ+YT5Itq0yfnp9NHg\nzsXS\r\n=yjuK\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.**\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n**Note: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.**\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n\n**Note: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommended to\n always include it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color)` | Sets the container fill color to the given color for an enabled button.\n`disabled-container-fill-color($color)` | Sets the container fill color to the given color for a disabled button.\n`icon-color($color)` | Sets the icon color to the given color for an enabled button.\n`disabled-icon-color($color)` | Sets the icon color to the given color for a disabled button.\n`ink-color($color)` | Sets the ink color to the given color for an enabled button, and sets the icon color to the given color unless `icon-color` is also used.\n`disabled-ink-color($color)` | Sets the ink color to the given color for a disabled button, and sets the icon color to the given color unless `icon-color` is also used.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color)` | Sets the outline color to the given color for an enabled button.\n`disabled-outline-color($color)` | Sets the outline color to the given color for a disabled button.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web 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/density":"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/button_10.0.0-canary.abdd10065.0_1610128321985_0.3756206345237254","host":"s3://npm-registry-packages"}},"10.0.0-canary.089de519c.0":{"name":"@material/button","version":"10.0.0-canary.089de519c.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"42344443ce035b60e856510be43296e62fefdd1b","tarball":"https://registry.npmjs.org/@material/button/-/button-10.0.0-canary.089de519c.0.tgz","fileCount":26,"integrity":"sha512-8WJrsXhfT6muCYO3bWEzM2q/66wrS145nWrxgPG36gZdY3lyg7brMZQmXCAQnpkJO6XXvT8/u7h6rm3Tmp3sDw==","signatures":[{"sig":"MEYCIQDGW3P1SiLG5sR4/lWFhkIlvxK3lHwMDp/OyLiggqzyPgIhAJ134OyJ0msdoX0IJxkumjwA287GSZ1/HDAvkZf28NY7","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":404761,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf+NrTCRA9TVsSAnZWagAALToQAJd3+mD+YtNKmci1TtTu\nHeQJiNyQsaPKkXvj20nb9v/VjsSquFY+VOqI7VRwzkyvQ8mqnQDUOzLZsydT\nTozO2xyp+dluzwUU+wA1Ee0kkO8n7NCyxzAJFc2ifkr5/Yn/R1e2jZ1Us4se\nBpGW/PeSPY41m79gh4GYTxsS+cF11FDum56gftIxLNVQPcilUNHK1jDuUZte\nhUuSo+rty/VkfpGdBhBauRjOVlCcq5ravmZrE+aXxjlV5yWmgYDhd1MPiFNv\no1BcFzkLU90KtJf4tmHBkcdTrp5KHZsRcwYt03UuKHExmmuY8AU18eDZuzqy\nYgFmp27wKW/F1rEIDldbQOaFZEEh3Y/FtdNz+yGk/k1d2zkyP3kKuxD7T+Rj\nTOPG6B7AuovhNDdrtQdTk+8IiHjVFMiKSd7v/+8l+Ou1wpTwQyUX9HPmK6Ew\nuQSG3L6BilLRnznHbrxenNFNkac5bFqNgAwEef8A9XRZBT1JVhytXJhtRHtl\n6vY+2usg+oLnUr5RkG5knx3gXeBCT9QChnYYbuLwX039pMDp0HWvO5eJQxia\nuwjBpWvsyBEa4pvo/X1bNce8Cv3/7LlAZuB1r0dZgehC9v72wCztnoMQxgVg\n7SPNO/W9t8H0SgETipjbhDl2CdeBRnGDVly9EPqSAd64DBv762UaEpQYiYed\nqJcb\r\n=asHd\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.**\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n**Note: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.**\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n\n**Note: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommended to\n always include it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color)` | Sets the container fill color to the given color for an enabled button.\n`disabled-container-fill-color($color)` | Sets the container fill color to the given color for a disabled button.\n`icon-color($color)` | Sets the icon color to the given color for an enabled button.\n`disabled-icon-color($color)` | Sets the icon color to the given color for a disabled button.\n`ink-color($color)` | Sets the ink color to the given color for an enabled button, and sets the icon color to the given color unless `icon-color` is also used.\n`disabled-ink-color($color)` | Sets the ink color to the given color for a disabled button, and sets the icon color to the given color unless `icon-color` is also used.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color)` | Sets the outline color to the given color for an enabled button.\n`disabled-outline-color($color)` | Sets the outline color to the given color for a disabled button.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web 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/density":"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/button_10.0.0-canary.089de519c.0_1610144466832_0.019888878168198287","host":"s3://npm-registry-packages"}},"10.0.0-canary.163119837.0":{"name":"@material/button","version":"10.0.0-canary.163119837.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"70831cbddabdb4b8a9b8215d901ace57de53649e","tarball":"https://registry.npmjs.org/@material/button/-/button-10.0.0-canary.163119837.0.tgz","fileCount":26,"integrity":"sha512-nIgjk40qBQzgliCXTjEwGRWj9O5hwJrjr2N/fRkB8gJjprDgdt6IiUwKnsDNVo6tbpuNM8xOLdOK3PGeykQh4Q==","signatures":[{"sig":"MEYCIQCFlarku35CUtxpSA99CwWiZ4QGjBYqOoT5wYVZNDhDewIhAKScIRcjV53n+01jWpyXY3yeAhn2vcYT8ibziLSJ3T/E","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":404761,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf+O6rCRA9TVsSAnZWagAALe8P/RQyq4yZxvncFysY+7Uw\nzBUyJ3QjMtBXM1AOFAbtHviXOWjz6BoxzljYhW+izGx7Nv2NoF1OBx3v2vBs\nYO3abKAndfZCML+7FYDb0OHeKX7jByGyvZDrLB09Y1/L4a4eg4UDEQvrywAF\noLtJK6h7gs5Ib73CDVbF4jLXcvx0XoayBh6OXT2odOJyk9NBlEb18ES30u7w\nmXGQxNyLgPBXZ6mMu8SpsFyUWoUAwtnuOtNRUbvPWWGJrmWgQVyTaLnQPbSm\nxQ6FgoBETgT9p7Jx6LXTFTTDPkHJMIubkfpAAKVWOMr2rpkC8BwkGIJ42oWT\nKANXBzYWyucTkZellDlzINPTinmITmaiCZoPeyCWhBfksuQVSxVmuGY6Pq7W\ndDd+LO23UegyzQoZk4EhRexhLN1x1copXY9cC43kVvyVaPBwI8+QFtkihJQK\nE40Ce4a3eMij3jDlY+NNsHNl9mPUeyVBJvIeWlBv124/FzYurs1r0sR/DiWa\nBuMTI9TKMxivA60PcxVYBy2Zc+lEJ2MLrp/4Bjz5g70dPvFoq9WmqPTiXbC+\nhlXPQkQizV71635isnzrTs1PBS9jqsnSVjL+380GhJK0ARD8DYEBML1O2wkU\n1n51jgKVuJ7m27HoLf5pcYMNDLKeNsH6ccAG1TC8FgCwQSl28FQG9R1Jmnhs\n0gux\r\n=Uimq\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.**\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n**Note: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.**\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n\n**Note: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommended to\n always include it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color)` | Sets the container fill color to the given color for an enabled button.\n`disabled-container-fill-color($color)` | Sets the container fill color to the given color for a disabled button.\n`icon-color($color)` | Sets the icon color to the given color for an enabled button.\n`disabled-icon-color($color)` | Sets the icon color to the given color for a disabled button.\n`ink-color($color)` | Sets the ink color to the given color for an enabled button, and sets the icon color to the given color unless `icon-color` is also used.\n`disabled-ink-color($color)` | Sets the ink color to the given color for a disabled button, and sets the icon color to the given color unless `icon-color` is also used.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color)` | Sets the outline color to the given color for an enabled button.\n`disabled-outline-color($color)` | Sets the outline color to the given color for a disabled button.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web 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/density":"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/button_10.0.0-canary.163119837.0_1610149547414_0.6268128397958863","host":"s3://npm-registry-packages"}},"10.0.0-canary.b8a1a58e4.0":{"name":"@material/button","version":"10.0.0-canary.b8a1a58e4.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"582ee1df4b9760ab97da616e9388eef53d5cb154","tarball":"https://registry.npmjs.org/@material/button/-/button-10.0.0-canary.b8a1a58e4.0.tgz","fileCount":26,"integrity":"sha512-ohapFaqcQEZNeV05Go9ZBXzbyF1+4I3VM3+PACrn3QpcBkgf7A7D+YgewgYh9+2Vd6cBadOMB3WsKiUh0ovxAQ==","signatures":[{"sig":"MEQCIHG+97mT3sYdq8KdXDcMgvCAjakBGgQsuHv1FqLOia0QAiAAnOGTIkgOHAsMWgexMY+oDmH3WeBYZE0tAIBBnCO+nw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":404761,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf/HvKCRA9TVsSAnZWagAAqSQQAIAu4f3RvBYq2IivD9Im\n/2Ap3SZbMkDhB/uJeNG1K6lpswHjQ8vMflG+XFWUbBeyTxQ9BaFw0h9s+sYE\neBAUtzDHNUztjdmD41MbmOkjTL9sv1hYslxhicssOsitGuaQKEjw9eqtioCr\nkc4fLbxQt+Ah+3JACDDQuA4ABwA03fTJ5xjYvod07tIdno4u/FYgJXODuXCz\nv8UQG6aEBI/f3bRp/Canb5+7l5EYkRwF/aQLUlXvDvck8TzXj6I4tJ2ZzHZR\n9e8jCxVsfnfwtvaxc8DaXfKONCUnhtsDErQ2VKbSzc/KsOALztvaaf7cp6do\n/XihIkloYKtS/WbEm/UwHxhI7QWhtx8yFRVhax6LidggPe6BG8fS2orWVQVh\nH3Xci7/NZnjzBTS8G31kh/GMKoX1Y5nYo4+ARQcbm0EQD/O4uu4lRXcbMUCf\ncoYJCXEch5IsKr3dtJ7M0OMnWACa5HtbbTM7jRLMe98sX6weZ/Qi+YGBYWEs\n4Cj4J2pgH8irNxsPPGbHkaD3YuYm/QYAw9N0O38/ym1KpJ2upAyqSHJk3btL\nnDtTR0OOSBK4TxRNHnU/w9O4JH1lgkY/sMHkU3LacNocPS8iEX9SwWLy6Sy+\nLcFk7n/Al8EAYS/DFwLN6Lhzpj7v/kI1ZVP+QAZzapAwR6fDm2zL1Qlx5ec3\npL3X\r\n=SpAo\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.**\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n**Note: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.**\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n\n**Note: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommended to\n always include it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color)` | Sets the container fill color to the given color for an enabled button.\n`disabled-container-fill-color($color)` | Sets the container fill color to the given color for a disabled button.\n`icon-color($color)` | Sets the icon color to the given color for an enabled button.\n`disabled-icon-color($color)` | Sets the icon color to the given color for a disabled button.\n`ink-color($color)` | Sets the ink color to the given color for an enabled button, and sets the icon color to the given color unless `icon-color` is also used.\n`disabled-ink-color($color)` | Sets the ink color to the given color for a disabled button, and sets the icon color to the given color unless `icon-color` is also used.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color)` | Sets the outline color to the given color for an enabled button.\n`disabled-outline-color($color)` | Sets the outline color to the given color for a disabled button.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web 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/density":"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/button_10.0.0-canary.b8a1a58e4.0_1610382281674_0.9473085572501183","host":"s3://npm-registry-packages"}},"10.0.0-canary.7584267ff.0":{"name":"@material/button","version":"10.0.0-canary.7584267ff.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"72e0ded40fb93f21076cd07f994afd107e7866de","tarball":"https://registry.npmjs.org/@material/button/-/button-10.0.0-canary.7584267ff.0.tgz","fileCount":33,"integrity":"sha512-ufxevzAhlT1AlOnfWOh54gqMfwUMJPnbwiywzFeD4pVtEbYUvMO0fmZrYsKZ/cmD9iQvDbAb6sqQx8aOkse+7w==","signatures":[{"sig":"MEYCIQC4ecKravgXedi/xxDukXnY74j6o0klp2IXDznvJOGLOwIhAMAmW5U1EO/NPls+E81Z/OcdeqirscmV759AJLJT8Ruj","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":434269,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf/PeUCRA9TVsSAnZWagAAsOYP/jxHk8ytEyx0z4L61jpk\nNvqNPexV3OA/vttjj+jctxoCSluRJJVtB01Wxk/7loghQ4Ql7Iwvmap4n3fI\n05hO2ob/u0Ga8EV4KBd4nZleIm04zHoCTzY5PruSq8ldQw9FYNl2hlRjSG1T\nOy9gk2GBzr52AUWqExaxV9+QAeGNU3xp3HywLve48mzejLniQ5h7UoE3WeGx\nRQBaMkYp8cYs2QGtYUDlLRQ2v2cUTJPXJ61CcuAKJng+XCb+ihQ8X93GPB0k\ngnPmAy52tH63qLDLxIVMujL7tt9pHhMISVzXdnmP3TUWxzgL49s02yEIScj0\nML0VaulLSvXm0d/EuhTFsvjkXkZDyaK1mfPOpK6Nd8BmiEd4nhR1RFaS6f4y\n4YvAkZTHy2xEMl7nMKF8FsOG+WXRIYKUwXIYJ76FoS16Ulk5/JnMRIheOgQQ\nAGWVlg1me3llzDhBL27u4E4r6UTbI9j+QX2Wc8JTRPo8pY3EkocSfHGldouL\nw3OwN8NBiWaDTsvx8n72SkGOTJRIAzdlZeB2t63EbfR/jld2UrTXBjsQz5R5\nOQQ09tb0SLs7BgsebtQAtnWd53z5s/okFFCog7yjTX+I2BdWkHRThWcFmsbA\nf9TykUDyuXYd1X/Oq1Xn4Pq5xzY2YKXDlLZil2qmJJbO6n9I1OWmvCk/1FGV\noFz/\r\n=klRN\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.**\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n**Note: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.**\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n\n**Note: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommended to\n always include it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color)` | Sets the container fill color to the given color for an enabled button.\n`disabled-container-fill-color($color)` | Sets the container fill color to the given color for a disabled button.\n`icon-color($color)` | Sets the icon color to the given color for an enabled button.\n`disabled-icon-color($color)` | Sets the icon color to the given color for a disabled button.\n`ink-color($color)` | Sets the ink color to the given color for an enabled button, and sets the icon color to the given color unless `icon-color` is also used.\n`disabled-ink-color($color)` | Sets the ink color to the given color for a disabled button, and sets the icon color to the given color unless `icon-color` is also used.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color)` | Sets the outline color to the given color for an enabled button.\n`disabled-outline-color($color)` | Sets the outline color to the given color for a disabled button.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web 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/density":"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/button_10.0.0-canary.7584267ff.0_1610413972444_0.3462141055642265","host":"s3://npm-registry-packages"}},"10.0.0-canary.251ac04c0.0":{"name":"@material/button","version":"10.0.0-canary.251ac04c0.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"93a7f1d1403a7cab8ce742148a1b70060cd54b9a","tarball":"https://registry.npmjs.org/@material/button/-/button-10.0.0-canary.251ac04c0.0.tgz","fileCount":33,"integrity":"sha512-Kvk2Uwl3OShZm7Nt1Vt2bMGzMMGbWII2IIcXHGpLaxpQSwdgSWfG1pRbssh+Yd0ud7Zu1r9bSgF14OCeH/yY9Q==","signatures":[{"sig":"MEUCIQDdR2P4gFi48PU+qNmw9V0ovYJhUbItsEd6sUqJp7i8NgIgXbtHbQPLbNVcC59kuSi9kbsOQd7luh2KN1bD4GGAwFI=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":434269,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf/f7CCRA9TVsSAnZWagAAN0UP/RHZ/DwFpT3uu5t5wJcQ\nyloqUzgRPXecq5+P7AXimGl+Doce3OunDDgk0ix3MJuck0F4wB4BIlJHDusb\n0YUj1QXXjli+AeE2vOpEBQSnpfwUSrqv0DtbwnvaAIlmiWaccjfpOYwNjWP3\nMeqHCQPH/rHek3LuwduRSDY9gtRKxA/kPJ4VoEixX67kmtiF1pvghRUAX2tJ\n1I3bUeIwQ1MWQIpDxiuUMyNnNnMEmZDVxs+csLEY7TctjMx60ML2iqCi0pMY\ns66iiuM4lZrZGiX9gWpGdMWOHxZNv82SM335/wq5bwx46m4mHYb+asqwlNHs\nP1oVbMwmXvPiR4VwlozkPHzfD+GjXYVUfHOgatqOBVxXQVT/l/56ijznchzs\nUKtQF9yg35yZH2DF7Yc06BDKuYFs27fObqP/FYHJOh7XOfeUgqjiawEddm0/\nQOUAMsYij+ojLpw4Ep9/XFSpXQW4VlGoEWAudMpqNTzLterVLmI6d3RZkLe2\no8pM9FcTU00GEtsW6bVQaKt58QlQnkAf8opgoIYhU1L0IZwFTDu5bFVYyrQZ\nOJWPTt4kgwW6/8FDHJPTzHWjV1CsJvnWbtVSdAL6GGWt4sJTvOcJFoPHbWGg\nJIe+L+fp+zBGorOqzdC2nJwn3OgsiLgq7+VlWALcaWrRtfvpLzC7fJLIyvKU\norVq\r\n=hqNw\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.**\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n**Note: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.**\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n\n**Note: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommended to\n always include it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color)` | Sets the container fill color to the given color for an enabled button.\n`disabled-container-fill-color($color)` | Sets the container fill color to the given color for a disabled button.\n`icon-color($color)` | Sets the icon color to the given color for an enabled button.\n`disabled-icon-color($color)` | Sets the icon color to the given color for a disabled button.\n`ink-color($color)` | Sets the ink color to the given color for an enabled button, and sets the icon color to the given color unless `icon-color` is also used.\n`disabled-ink-color($color)` | Sets the ink color to the given color for a disabled button, and sets the icon color to the given color unless `icon-color` is also used.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color)` | Sets the outline color to the given color for an enabled button.\n`disabled-outline-color($color)` | Sets the outline color to the given color for a disabled button.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web 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/density":"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/button_10.0.0-canary.251ac04c0.0_1610481345872_0.7857570363381698","host":"s3://npm-registry-packages"}},"10.0.0-canary.772cc1068.0":{"name":"@material/button","version":"10.0.0-canary.772cc1068.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"3a8aabe6660efbc27e2d52824a96a5ba3c0cdeb5","tarball":"https://registry.npmjs.org/@material/button/-/button-10.0.0-canary.772cc1068.0.tgz","fileCount":33,"integrity":"sha512-b1AuUIA87QGJlZ0y0EeqLzTFDQjSaaTdHdXlpfHR8hjFnnU08m8nycGZTdHKT4SyOaOla45qdN6yslgyTDUI3w==","signatures":[{"sig":"MEYCIQCLkuZWDOIBwp+r+l5F+a5cPxPdaTfuULcw2saWoBPCEAIhALujDh/+cAXCg6blP/VcV8AFrKcyIof6culJ6TLBPZzo","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":434269,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf/4tJCRA9TVsSAnZWagAAnrsP/3+Zn1x8xxtiC45qCDHP\nU+vQlCq6Ao35+Ke0raMavfh0xnJf1aWRqcx5lq3/7XsxC4jorMeUY8BYMGCk\nZ0HYr35blTNh0KzW+v1ieAqt2YRYDsy82yVoH+xSc+rBdXPAmD1kz4lEN45c\npMaTeTUuQDxLIKfnNi/iGE0o9iG+90YUz9RZksVAvR/cl9aJhkNQ0ra2ur5E\nZ/gzUGGymEczxUn21eOjbFziWlvVWpEsnxqbSQvxE4OQT/d9DwOYZFW9dF9c\nNGHadcSPzPrk7Vbu/67eCOzl2kzP1FPTqV8wFDf7mi4iQQvZO2YnawAzwJtf\nPCSBKvPDM9zzchoKZw4Ev5RXxrfvuX3J9LyAPpSk8VrUoiJPoKbh9+VsZEAP\nG5XADZKUYmCDcwSWk9VWoZmHO6MFzI8slVzNC1vNTut51DQ+sJsjTWQdeGxc\npCi3ec7ZkmUUAaCK4TyQiTW+nDLzEBCmmx2q4uIYySJafZARcmzmuZ/+pO/u\nfukgL/T1czKYWc1ZF/5YjsnaZQBmFKk6odvZgv7EV6mPL9FugSYvjCEbh8k6\nHPzlJ93edaaWsl2EkeRxiO8ee+XQcQTbvN7pSdkiCfcgYDhhOCkVSt7I4ulv\nsK6U7w2EIV/ItB7oz6MJ1HpKpwjTHtjNI9WkW1ffOePGWaXQ6z/maYqVHcCM\nkgEp\r\n=7eBU\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.**\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n**Note: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.**\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n\n**Note: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommended to\n always include it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color)` | Sets the container fill color to the given color for an enabled button.\n`disabled-container-fill-color($color)` | Sets the container fill color to the given color for a disabled button.\n`icon-color($color)` | Sets the icon color to the given color for an enabled button.\n`disabled-icon-color($color)` | Sets the icon color to the given color for a disabled button.\n`ink-color($color)` | Sets the ink color to the given color for an enabled button, and sets the icon color to the given color unless `icon-color` is also used.\n`disabled-ink-color($color)` | Sets the ink color to the given color for a disabled button, and sets the icon color to the given color unless `icon-color` is also used.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color)` | Sets the outline color to the given color for an enabled button.\n`disabled-outline-color($color)` | Sets the outline color to the given color for a disabled button.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web 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/density":"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/button_10.0.0-canary.772cc1068.0_1610582856632_0.9119289761159877","host":"s3://npm-registry-packages"}},"10.0.0-canary.fe13dd130.0":{"name":"@material/button","version":"10.0.0-canary.fe13dd130.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"88283b606438e956928bd2ee73fa2827c84b3605","tarball":"https://registry.npmjs.org/@material/button/-/button-10.0.0-canary.fe13dd130.0.tgz","fileCount":33,"integrity":"sha512-iURfYHVAn0F3ZR7EseLZIHMlkcnRzi3UKy3QovBK7nclWgRnnUNC4iohIKAj/nwKllsajLibVPg+MCcSR/dINQ==","signatures":[{"sig":"MEQCICGxq0Qq/4V2LzzzmmxHBjVw3HNhgIavAMPG+bAaRRluAiBjqd6CUS0PDgEw/XGwBRmszJfz7XV2/RCNJsVP75QBAg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":434269,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf/5oYCRA9TVsSAnZWagAAI18QAIiUVjKWbu99fLdrKKPm\nDI7j524Edi/FJtODaEg4Xmx0VKxt1QuCp5XIBPUwMPOv0cXDK70yvo+TlA58\nh1dX/1XAZRDCHpwvJfebGnZsRW/sLpPiIPJYgglMx6Zml3vOztTCCLmun5Jr\nAx90NtFJRSQFKFo7EHa5NzqgD52Vg6WQoZIMY6lw7L0jMec8No6Elid/rN5f\n+2t2ycy8/CxUTCXZFZ/WXb2Aeu6r4i5xedbNegp33ncqiAVQmzlxNWl+1an0\nfq652mmruzGAQqz1hjbcRK7OmKkutIluWlmEuUdxsuHl/JqzCHlptFr7ZgLE\nxruLrqMG2CADqnIXpi5DEbKWtuIZ+8A6tYUrTbpl9j+GVNJt75HMOInVZ0T6\neYvu5xsRmBKbAvBhWB9fnK+Nueij6NLTRFE50sojiaiU3/cufA13/NsH5mFl\nvoUBsWa099OmQvZPJ0v8vbe/++7JuSP80+IK/S9tp+xI3ewlHJhF/X7+B/0o\ncJ554jmhSV2Yb82ArtBxQEJzUzU/cPxjka8iHsvsIi/vt+KB9CpGgLcHap6j\nm6Gx291TIHQQ2+LfC1V/KW1idaWgxgBKZLS4Y6Vmh95I/+wkpriFXp+9IJBq\nl3AStqjFSbh1JA3raKSMUm5qXsh0uoc/1sIzF2qrpijauTM1q29EK5ApBi9k\nhdlZ\r\n=ONLd\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.**\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n**Note: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.**\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n\n**Note: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommended to\n always include it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color)` | Sets the container fill color to the given color for an enabled button.\n`disabled-container-fill-color($color)` | Sets the container fill color to the given color for a disabled button.\n`icon-color($color)` | Sets the icon color to the given color for an enabled button.\n`disabled-icon-color($color)` | Sets the icon color to the given color for a disabled button.\n`ink-color($color)` | Sets the ink color to the given color for an enabled button, and sets the icon color to the given color unless `icon-color` is also used.\n`disabled-ink-color($color)` | Sets the ink color to the given color for a disabled button, and sets the icon color to the given color unless `icon-color` is also used.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color)` | Sets the outline color to the given color for an enabled button.\n`disabled-outline-color($color)` | Sets the outline color to the given color for a disabled button.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web 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/density":"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/button_10.0.0-canary.fe13dd130.0_1610586647723_0.5164766829446572","host":"s3://npm-registry-packages"}},"10.0.0-canary.c7c5da28f.0":{"name":"@material/button","version":"10.0.0-canary.c7c5da28f.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"44abcd697dbe7af5bc37406973048c1eb6398bcf","tarball":"https://registry.npmjs.org/@material/button/-/button-10.0.0-canary.c7c5da28f.0.tgz","fileCount":33,"integrity":"sha512-a9quVMa0OrtlgYnxG9CdfApVu79STVnDrHZRDLBHc+Egm/6745X6oDX/ajie/rfnUjGWGV2gI5Ay0oMHIhoj2g==","signatures":[{"sig":"MEUCIQDdJeb7Rp9qGLzpQ+Jx2Y4SoqrZQNiCwq+/SEmHB4T5pwIgYjA44iOjVw92HXmwhGUvM2iblOXSp0hpypsGbBCS1wg=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":434269,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf/5+uCRA9TVsSAnZWagAAW1QP/3rZtSrGLkwzElMc3ToY\nCM4FSOIFMdvw5Sljt3FA9vYjMWU8/1HQuOxJb7IgSX4SVpNZeuIrFPNaADrp\njE6UguOl3+Zpq+JeNASq0mK8YxqWRsGo+l7Sca1PGtm1eHB8WDkUarneNO35\nWh1bKdeN5vIf7xyH7iUVlP3zK65EV146marExHgyzHsRGhO02ioLeMlz7Gvv\n7X2Huu7fHqR/H7TgtnT6UJiC85KkG6F4kOGhHcafw39fBzNqUR5DK+39tX/B\nP/54qLg6pSO2cOKvxAgJ6H3xI0YQBfxQIxlSWBVRSvjRPhKF+Lbmu4NvZDrg\nrk6Z2q/0yFmldnWa+SNHAG3CMR7xB8C6Tk7iL3iIU3tl29DNRU+tXqXNmCRr\nI2w9W6i4QajApGKiecRfrr0fMeUhnlgz90Ahq45aQDMyRaM4jHFZO6reSWP9\npkGI0mPyrihBtnpuvYop2Dc4G/lBU9/d3MH6lMwScFutZvIAtSuWrLIi6lgR\nfN8cetwSOGokgYUKb+Ph5ytKJfY6+GGd6BLh7jviJ5k9vzvmk6kFgD/G9uaK\n6qeDe+lPxuz3gZtIzSyveJIXqKbBjwQ4wIuqU5gfcbPMR3gkQqT6CTuAztVX\nEPE8Kj3JBaztfKLCi1hyrrGzz7czX/vYcjilUXdzYdbS3Zua2gueLA3Ie9WN\nFUIJ\r\n=lQr6\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.**\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n**Note: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.**\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n\n**Note: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommended to\n always include it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color)` | Sets the container fill color to the given color for an enabled button.\n`disabled-container-fill-color($color)` | Sets the container fill color to the given color for a disabled button.\n`icon-color($color)` | Sets the icon color to the given color for an enabled button.\n`disabled-icon-color($color)` | Sets the icon color to the given color for a disabled button.\n`ink-color($color)` | Sets the ink color to the given color for an enabled button, and sets the icon color to the given color unless `icon-color` is also used.\n`disabled-ink-color($color)` | Sets the ink color to the given color for a disabled button, and sets the icon color to the given color unless `icon-color` is also used.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color)` | Sets the outline color to the given color for an enabled button.\n`disabled-outline-color($color)` | Sets the outline color to the given color for a disabled button.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web 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/density":"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/button_10.0.0-canary.c7c5da28f.0_1610588077471_0.6687435496469143","host":"s3://npm-registry-packages"}},"10.0.0-canary.b2faa116a.0":{"name":"@material/button","version":"10.0.0-canary.b2faa116a.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"399095d8578cdf01502fff1f08d8715942e3a3d5","tarball":"https://registry.npmjs.org/@material/button/-/button-10.0.0-canary.b2faa116a.0.tgz","fileCount":33,"integrity":"sha512-c9P5GE1l4ac2wMMPjM3imqB8dKALaeoOXy5mkAnk/HaWg9ByK5lE/Q4apauLk2Q77Bh8jqmDAaGd9zkHtsMlWw==","signatures":[{"sig":"MEUCIQDT6D/a+cOgqktoN8bSum4C/vGy+0y3KWSoq45OV9iMBAIgUmCk3ibVGX38Ni8ZQF067rHqq9BYvnSZqtUaI57S4O8=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":434269,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgBzKKCRA9TVsSAnZWagAAvRcP/0is5uYgZ4t4n/z+E9Fn\nMeiiPPU/mCezdnncTxKDo68jRvdN8bBsQ8tMHtCFF0SQTbOGN4NSxuS8X0BA\nT7lvInt2FT9EDDK0aehjtiEr7FTu8RGf6CrE3QXSqJhdkjeoBZKqFSpw1wOx\nZKfYLuq8J52XSfPhd72oFpG1DH1NbtrXtRMiWfRfrLsLOqRMrx4G2A9zzE7Z\nSlE23aSEE30q6DdIHAhNXP9K0YGBNCh7jcwPw8NJzJrN6otV0SWLxrX1inA4\nRJQKQojyRNOkE2qBEYVwnueuFDiW1qWhAO7le1JfB5qRycKdvl4wDdTwEeBU\nuc7Pa3kU6GWybXGPkkrKfJCRvJaU6xn33svP9HM9HYHUA0uJSa6hxfS7NUNj\njgu2ZlCgDVfHBHjIrHaqzmeu0dkzdMkIZtEI7U7YXjoxVIXAXh0qPv/O07oo\n1taX2fiBaCpBzoZtb3zpdVLbbdwLZ1ATsUE9JYFVdqW4LgLMgrmZm3kG7YDN\nJZhB9OvGu9pIL87wUXt5vq1dQGY1Pph6SfXOWO0MatsfXIeHXZEL+JTw6nim\nF9crB86JsYpZKMFT690FWqLBJl+uQRAUsCAJRegmeHrgkfjWoenqU6TeU0ba\nJUByY+rD6vJrJLjfo8byLiI1fiXilcfL+BdbQGZREs2APvcDZ8QBOiity4li\n/4Jp\r\n=H9B8\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.**\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n**Note: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.**\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n\n**Note: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommended to\n always include it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color)` | Sets the container fill color to the given color for an enabled button.\n`disabled-container-fill-color($color)` | Sets the container fill color to the given color for a disabled button.\n`icon-color($color)` | Sets the icon color to the given color for an enabled button.\n`disabled-icon-color($color)` | Sets the icon color to the given color for a disabled button.\n`ink-color($color)` | Sets the ink color to the given color for an enabled button, and sets the icon color to the given color unless `icon-color` is also used.\n`disabled-ink-color($color)` | Sets the ink color to the given color for a disabled button, and sets the icon color to the given color unless `icon-color` is also used.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color)` | Sets the outline color to the given color for an enabled button.\n`disabled-outline-color($color)` | Sets the outline color to the given color for a disabled button.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v10.23.1+x64 (linux)","description":"The Material Components for the web 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/density":"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/button_10.0.0-canary.b2faa116a.0_1611084425753_0.44214179862583314","host":"s3://npm-registry-packages"}},"10.0.0-canary.0c95c9f7b.0":{"name":"@material/button","version":"10.0.0-canary.0c95c9f7b.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"86903c0e6d706cfc5a60791ec85a237b0064e5e3","tarball":"https://registry.npmjs.org/@material/button/-/button-10.0.0-canary.0c95c9f7b.0.tgz","fileCount":33,"integrity":"sha512-YpsxTlahPNb3jAyQ+H14TjtRYWJqrJkQLzLHwETaGE0lgYtNitUHS0Cezl/H2UIqAQ6LOGVBhT40ffKuc3N9dg==","signatures":[{"sig":"MEUCICTP+g8t0isaeAksdbP0G8Ssw7Ht5qF5KNK08YFhTKEgAiEAolgV4qDatByvCIXROO0bk5TLuHQIa7TpWBUmDl24bA8=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":434269,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgB2McCRA9TVsSAnZWagAAw6MP/3GF7HXkfTupgvXkBeLb\nmNeKoe86XvwJzQ8q6qUGwQFKFrx5Ilrc6ohLa+LH1jRdE3auY9Wf+BErY/Qz\nZvUtzrDdz7RqENUFhcZ9YJIDzUvQAEpEiqBZKtRds2ZEYMq80Zr/Z7nsrduY\nx+uY0+Dowr4In2F2zTDwQsV+t3XSvQ6qyaSPGh2IIspKm897sY+nW0yWiDJz\nNnIZMPZl8mnod92IB77VB80xLKbGFkQdf6lfPh9rzEk6nLsoqAtwZx4fU+K8\n9xXBgfqMfKycNjJJs1luzuHzUq5MR2EiOTOHuKqHV01q3+XyXbgnPca2o04N\nuZ9Lw5ohYArcJGSuSYy8Vp6z55prujZzR1bnEsEhWLTbHcd8DZYm6KX7QcNq\nCqxXlWIwnfynnJZz/32x1ZmPUzmqpwypXJB4neAGEia0iBv+HQeIxySi7sTv\nyOW2LGvM6UzJjZar09ToClSbTweBvRNeHuH1hLAyIYq1sLV2T0AOSQVdN2e8\nqhYq+wrujqCX8GpVLCmhBYXkvv9x+ULR8wxemXDRwq3tkWnV58di8StKoAcS\ndN6TfGYvJ80KWd7T4ILdOKGgG5RlNxKN9CIAGPUpwM21QVR+OranU3DPG/Bd\n0i97eJnOnOMW5ofyBthmMQTydXjJ2waKL0zxTzE6Jeh7Ke4CdLubt93nHz0H\n3bIC\r\n=Z3r6\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.**\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n**Note: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.**\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n\n**Note: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommended to\n always include it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color)` | Sets the container fill color to the given color for an enabled button.\n`disabled-container-fill-color($color)` | Sets the container fill color to the given color for a disabled button.\n`icon-color($color)` | Sets the icon color to the given color for an enabled button.\n`disabled-icon-color($color)` | Sets the icon color to the given color for a disabled button.\n`ink-color($color)` | Sets the ink color to the given color for an enabled button, and sets the icon color to the given color unless `icon-color` is also used.\n`disabled-ink-color($color)` | Sets the ink color to the given color for a disabled button, and sets the icon color to the given color unless `icon-color` is also used.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color)` | Sets the outline color to the given color for an enabled button.\n`disabled-outline-color($color)` | Sets the outline color to the given color for a disabled button.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v10.23.1+x64 (linux)","description":"The Material Components for the web 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/density":"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/button_10.0.0-canary.0c95c9f7b.0_1611096859636_0.866993976890712","host":"s3://npm-registry-packages"}},"10.0.0-canary.5268222c4.0":{"name":"@material/button","version":"10.0.0-canary.5268222c4.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"afed8b7bbf33c673bdb0becd3b99464966dcde3a","tarball":"https://registry.npmjs.org/@material/button/-/button-10.0.0-canary.5268222c4.0.tgz","fileCount":33,"integrity":"sha512-qR6/UiKRcgwCvZ4Qfs7kJwiOgdW1Q9uXIrdhXcXtOjRNImg9oU7uqk7V3TEuxgvjP7KWGnGAXE9SlqW5KP0ouQ==","signatures":[{"sig":"MEQCIDoxOS+w5ygdQVmnq6aGQ5dKxzysIOkoJsRGGw8Y6TN3AiA5dQFqYxL9LfvwqweAOoBE+xojjz/376VzB0sqRDftMA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":434269,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgCIJVCRA9TVsSAnZWagAAC2AQAI/rfufruYmuXSXTo/lV\nd80oHY/zxi/4TiOobOluN9aT83q8F13wz1/IvCpBQreQyMEGlF3DXQW1UQfY\ntR/WgXM+2MsUhC9yb5SEW2jqyxf+kGI+s34pZkD6lsASOZRHU/8ZpttuCYL3\nUijdstyadN5hw9OZs1S23z1BedZFUBYnEt3TTsQZJPfd4OIHYEkXrBdq4NIK\nt3lk5EvFYtvMwiLLLtgLDAGgbGa/5HKsJHOEqQQwEMypXBJoDiwsl83VEOVp\nYR2lnlDmB3TmbanabJmFJi7ZPOE+gvgFPysCt0Jce9bYgNVT8WWRr7zqy1SS\nSa6GMLrHfqrdHQUAioXRNgrs0/JDEQfg+rMrFui7mypjQjpByvUvtqKu+KGJ\npZSZl6YCXVsZLQ1hm/zI4eThjae6GyP81FQUxlbjn/9Sgpfz1afeRh1aGTW+\n6QtQO+4HL5VGRwZ78paaS9fs4zadlNX85keX+dZEkBpHsq9rOKVcvu4R5Iyk\nlnuVQNaxhKhAC3v0km3gX3iI3v+4Pp23mmmjXsz2tiC7R0qbN/Ih1LYGwCI9\nx44GM6YFgHK1STGBU6q1OtDTzeHhYQjHe1LMMq4VxU3cNhjdupP6yv+ABdfv\niZqSNtS7rjJErLpFoBbHEWPPVy/r3nmCIcnKtrU6ai6yVWQdMuZDWF8jEury\n0Cbr\r\n=kei0\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.**\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n**Note: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.**\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n\n**Note: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommended to\n always include it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color)` | Sets the container fill color to the given color for an enabled button.\n`disabled-container-fill-color($color)` | Sets the container fill color to the given color for a disabled button.\n`icon-color($color)` | Sets the icon color to the given color for an enabled button.\n`disabled-icon-color($color)` | Sets the icon color to the given color for a disabled button.\n`ink-color($color)` | Sets the ink color to the given color for an enabled button, and sets the icon color to the given color unless `icon-color` is also used.\n`disabled-ink-color($color)` | Sets the ink color to the given color for a disabled button, and sets the icon color to the given color unless `icon-color` is also used.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color)` | Sets the outline color to the given color for an enabled button.\n`disabled-outline-color($color)` | Sets the outline color to the given color for a disabled button.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web 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/density":"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/button_10.0.0-canary.5268222c4.0_1611170388528_0.38302997304701436","host":"s3://npm-registry-packages"}},"10.0.0-canary.2ed2d829b.0":{"name":"@material/button","version":"10.0.0-canary.2ed2d829b.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"611e6614182cac7f58dd1a43a76b2e2cc8cbc261","tarball":"https://registry.npmjs.org/@material/button/-/button-10.0.0-canary.2ed2d829b.0.tgz","fileCount":33,"integrity":"sha512-S7+5CIzg0SCDLQxyxCQNi+JAw7KUTjx3iT8t8LBd4PuvNM4ie1V2ErAD0AGvQ8Pb16Z+3yWLfG5wAWMbPfp5eQ==","signatures":[{"sig":"MEQCIC4owmkbBoPhGApB4daRFrx+VYDmNQqNnRYAspJ6mySWAiBqjd5AmJKlB8kUBOPUWK5TAh16J06VWxRlRCbnlDWiIg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":434269,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgCLfxCRA9TVsSAnZWagAAGhkP/1EfwWi/AhCAulMmssem\nvPBx3S+urO4qtsy+rBr4G7u0I0rZi2GWVTcQ0LCEOkpAO+JIEREZhIZNrArM\ncuPw94xdx/c9tzBmhL9RucTmur1ZgDbOD4XlK8flY6OqlMDlub0Osm3MAz0o\n2qgZTQ8ZQ/IBMCNZb600U3OYPnoWe0UWbYjIhCVjxtbaD7kCBUXujrjHjP6i\nhg7BOyQ2sF6FPypB3UbvxSA9iDd3Umz3k26tX4EXmlGkMyMll7+TVs9/cggD\nM+7nU+4SBIA9DFkA1k2hc69wTkhmbDyXldoQlysKpdjNW/0x44PpKtxbNKCo\nPjGxtLRK7sMiuGErMgSKouKF6z86ln9DP8/Z4bS0KpqkdILJOuv3hTRKWP1/\nq4DMSWIbXGJAZT0TsjX9Or8NHNlR5uzJ4xD9aLlcAw17kibhjk3ZSqx+4j+P\n7feP06OphSq9Hn5jYNK30YIHDGVaXez2GgLnUzvu7bF46nt4WfKDf9YZBx0p\nwpxF45XHLPAGszx4YQJJHxL3A20QNVC41b1zqLS4ORhoSUNvYT1E7ul7NRCp\nBD+Ze3hWvJhmrrnqBDvwzE+of5AF3+3j+q1/Cc/qxCgDqMnV8wlUmZO8Lawb\nsaqwfHxGnOpdaoBv0ED89W7m/5uTPSHSm1NhRNE6bEBU5nOHkyudky0fy3xl\nI30s\r\n=seyz\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.**\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n**Note: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.**\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n\n**Note: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommended to\n always include it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color)` | Sets the container fill color to the given color for an enabled button.\n`disabled-container-fill-color($color)` | Sets the container fill color to the given color for a disabled button.\n`icon-color($color)` | Sets the icon color to the given color for an enabled button.\n`disabled-icon-color($color)` | Sets the icon color to the given color for a disabled button.\n`ink-color($color)` | Sets the ink color to the given color for an enabled button, and sets the icon color to the given color unless `icon-color` is also used.\n`disabled-ink-color($color)` | Sets the ink color to the given color for a disabled button, and sets the icon color to the given color unless `icon-color` is also used.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color)` | Sets the outline color to the given color for an enabled button.\n`disabled-outline-color($color)` | Sets the outline color to the given color for a disabled button.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web 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/density":"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/button_10.0.0-canary.2ed2d829b.0_1611184112993_0.09212824166747935","host":"s3://npm-registry-packages"}},"10.0.0-canary.df00c2b30.0":{"name":"@material/button","version":"10.0.0-canary.df00c2b30.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"12d188e9ab8f210b79453a03c2a63a08b0b17656","tarball":"https://registry.npmjs.org/@material/button/-/button-10.0.0-canary.df00c2b30.0.tgz","fileCount":33,"integrity":"sha512-tLSdw0PLrbPjmGMTlTR59oT5UtL8ZHoWxx9RxjSCGxk5Ju3QY1gGWUaj7gthCcJQQKdrhGA4tzHlh0UokgGSBA==","signatures":[{"sig":"MEUCIGYnvMX5umtaCiuZ9RmLGd3rpGxOOCKic562DEwsZYHFAiEA33eRpy/x+ZytWmrDlz25YhJedm9a/KF6kdmtOAL3Rgo=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":434269,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgCdwyCRA9TVsSAnZWagAA7RUP/1ezr6lOQuO7n3O++Wnt\nighkENk7yWE4OJK2SO0rfjMVoDOHXPVn7Nqp5WyMk0ctBIGYzRyjaVqXfOpv\nSLgYbbwOjxZShQSpNxUK+c/vGON8O4MuG1X0RfJuVYov7xcTD8ki8diDv+cz\njhgVmU3bJJ44w2NAEuTcErKWAXo0D0nhO4HWRhCUpKXC7n07ZwnOHgm9lgNd\nH75DT5E8o7c2J5fzgpnyI5p/FEbC+A72Nx/RRVInbDVoANFYQR5kHUF8uM1h\nVefwu09XyibZ5f/Q+8NEn+HnHG586hEU5Z0s0aajp58s9cLPfTRsyoS4mq8C\nWr/PNCdiArabYk2uXj44gdXbsreW/lVaMItl1rEg6j20dGyWSYijCnKizvCK\nAiFYUAOJfCNx1W5rYOG23EcwfwJe/557uvwzjy706t7GY5G4o3peJbU0/RcD\n7+dnd6V9E/oW2HTDPzZx2H/QGp0MQPdnh+AvYZX7llo7iQM1cZqOnWlbyIme\nEhMurinoYqqQPOswf+HTEchVtJHAC402a3JOsBkOvHusBrCmZ4A8F1l5R5y5\nOeVVJ/dHLDTRA8eSRWh+G+CCMsMyyxcma6Tr2+A58kLesUC73vX1QYtB2/Ir\nYlGOc3fNjNxkyUMop6qaGZRiWTCTOd0SUq0QpMZGOGr1QM4XLYxOCc3F1Xrc\nF6TZ\r\n=Vu/4\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.**\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n**Note: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.**\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n\n**Note: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommended to\n always include it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color)` | Sets the container fill color to the given color for an enabled button.\n`disabled-container-fill-color($color)` | Sets the container fill color to the given color for a disabled button.\n`icon-color($color)` | Sets the icon color to the given color for an enabled button.\n`disabled-icon-color($color)` | Sets the icon color to the given color for a disabled button.\n`ink-color($color)` | Sets the ink color to the given color for an enabled button, and sets the icon color to the given color unless `icon-color` is also used.\n`disabled-ink-color($color)` | Sets the ink color to the given color for a disabled button, and sets the icon color to the given color unless `icon-color` is also used.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color)` | Sets the outline color to the given color for an enabled button.\n`disabled-outline-color($color)` | Sets the outline color to the given color for a disabled button.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web 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/density":"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/button_10.0.0-canary.df00c2b30.0_1611258930325_0.5190051224079848","host":"s3://npm-registry-packages"}},"10.0.0-canary.fd61b0476.0":{"name":"@material/button","version":"10.0.0-canary.fd61b0476.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"431a6a02ccf413d982ed44de66a863246126801a","tarball":"https://registry.npmjs.org/@material/button/-/button-10.0.0-canary.fd61b0476.0.tgz","fileCount":33,"integrity":"sha512-AYfnxvhSLPFq3LU4v7/fLq9Vby7CnsOJD7tSuMER+dUopGLVokuBNpyRcrkrYcwL8ZgjUNUhB7JuY6jVcknW4g==","signatures":[{"sig":"MEQCIFxxeghWEwWzwxL1T1NnHxIRU/d83ZBx/EySCOVT8k3dAiAZASZB3b8awaO/nm6YlFmMU9FppmZcpQ9xzI5sAuWWOA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":434269,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgCd+fCRA9TVsSAnZWagAAOe4P/2+Vrqpmh1SPSkJP6yBL\nil1vnuGB8MaTpLN/tEPpr8vfxfWmFH+W30EXFecLtrkDLXJSHvj4eX/R6PLr\n0kFcTZQsJ+RK6eRjpzNTmJpoa5hg9XzyCFArMlTcNtkrF4kPE6YApbVgi39y\nRReC5UKfQwU2Jfl5DlBzhwMvE2p//DF5kTQeWLHx+kYYcI6vn6APcRqSDfp5\nRAxve0QHST79gUMaTxpeQUW/y62GwuSvndIjIfZ9z2i6kMAG+Q9Do8uQYEDo\n5AyfWbojvWHcTE0cvEtLO13jcFDjk00EI8xL1r1fePRuduxnLflqCTrJ5oVP\nLj+RrZ4cbFneLd52txJ4pA0aJrxGgg1il1XlXU8E3v0bbfM2BkrCFI3NV43C\nlkHgKrMpAEf9Elitsbq/a5KbxJPIk5D0qko10uJbV39IjeHw5ckMrFezpvo5\n6KCDFw2QL7EdP1vd0xlTQrW2doTonhB4iQf2c5WkhQU9ub7n+ndUoThi8bu2\nWDhk4KUABfRjoK8CjrHVdZwyTzl2KiIzy7o23fmEuPHtW2h7x03PmiF2qjfz\n2L5ivgpS29ZKHLGB6jOOEZsdGkxzeqZiMm2Bokb2VK6OlBj1B+nWe71YZERx\nh9f269t8aDO+phAmuxw1S8yK6/psfKHLzH4JsRcY8ieJZ0rNb+iD3NNirXSN\nN1Rs\r\n=P+w1\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.**\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n**Note: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.**\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n\n**Note: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommended to\n always include it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color)` | Sets the container fill color to the given color for an enabled button.\n`disabled-container-fill-color($color)` | Sets the container fill color to the given color for a disabled button.\n`icon-color($color)` | Sets the icon color to the given color for an enabled button.\n`disabled-icon-color($color)` | Sets the icon color to the given color for a disabled button.\n`ink-color($color)` | Sets the ink color to the given color for an enabled button, and sets the icon color to the given color unless `icon-color` is also used.\n`disabled-ink-color($color)` | Sets the ink color to the given color for a disabled button, and sets the icon color to the given color unless `icon-color` is also used.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color)` | Sets the outline color to the given color for an enabled button.\n`disabled-outline-color($color)` | Sets the outline color to the given color for a disabled button.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web 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/density":"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/button_10.0.0-canary.fd61b0476.0_1611259807060_0.17346859286270044","host":"s3://npm-registry-packages"}},"10.0.0-canary.3fb3a0265.0":{"name":"@material/button","version":"10.0.0-canary.3fb3a0265.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"c8f3301b53cbffe19c5255eac9fb010731c67f21","tarball":"https://registry.npmjs.org/@material/button/-/button-10.0.0-canary.3fb3a0265.0.tgz","fileCount":38,"integrity":"sha512-ZcEwyfRCMDu+v8tmmzmd+ZK+ln/OWL/i1HKQKjUEYZnoYDPCwduwvQWLTL6rQL5cECDPSVDDffNJXS6vufMMsg==","signatures":[{"sig":"MEUCIQDqQ2j8ga3izClf0q4AVJxbRwEbf34Jul99yzxllJNfsAIgaccdeCTvVdNQb8QR+mz2CE5T09SGlmRs7pTNbRjw+xU=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":465005,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgChbDCRA9TVsSAnZWagAAsvUP/ijmQwGb2xNC0HpZh4PK\n21cK8fTjA0M3O8C7nVRI9pQbYoKYew/KcrudZWcbgmpTlm99ln3LQp3WLI0W\nU6d3CS5QtptMUDLGXQZVBQDc/LiIuv2HEtSPXjW1WryACC659AhGmb09m/k/\n0/B+Deh84H36mq21PdObUuzct9KXYJihxmDTnRXu7piR0X/dzA8UdoOfmcxm\nki6urEwHwRvdn3fp0cvl7KvSC7wA1qDYv9zEBf1Ujop6hm0ZwaUgDzolGtUo\ndOGz8AOb1qXD6nDywGBvJC9ZQFz9X7KgR6GNFqoeJFFk+r0VkCCFirJPhFEj\nIR4L6o1KjYWXPPzWj+lBYz0PN5gBXgLBuC0TmlAi0oiiqpNow82ulUflDicZ\nP/C8/c4d6JWw4sYWNUMnmcD+AF4dyGtKosDcGnucQu3j9HvKSiXqEQTE1AmQ\n4lmxgUj7AnfcEakxA3Qbd+gEWoH1ef8/qYn8QKZ51QhVj8Pm/2CdpmCzwofC\n4CO6ZqmmXs8VZRIik953YH/aFfPe9WMZiQ30Un1rEGQm8HJqTyj6NNFlS6lN\nbx9G2LRhfXZ1tIaZzRc69foRUS3k8NeLjXcZRILi3Me57iepv7FLml1WREDQ\nocWX6K1Z83f5UBP1URP8uI+VXBU7tnIsOQBYpJPwbsI09Tnxd++M7eX/45rw\nFAia\r\n=hzeK\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.**\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n**Note: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.**\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n\n**Note: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommended to\n always include it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color)` | Sets the container fill color to the given color for an enabled button.\n`disabled-container-fill-color($color)` | Sets the container fill color to the given color for a disabled button.\n`icon-color($color)` | Sets the icon color to the given color for an enabled button.\n`disabled-icon-color($color)` | Sets the icon color to the given color for a disabled button.\n`ink-color($color)` | Sets the ink color to the given color for an enabled button, and sets the icon color to the given color unless `icon-color` is also used.\n`disabled-ink-color($color)` | Sets the ink color to the given color for a disabled button, and sets the icon color to the given color unless `icon-color` is also used.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color)` | Sets the outline color to the given color for an enabled button.\n`disabled-outline-color($color)` | Sets the outline color to the given color for a disabled button.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web 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/density":"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/button_10.0.0-canary.3fb3a0265.0_1611273922661_0.4658174326285931","host":"s3://npm-registry-packages"}},"10.0.0-canary.07deaec27.0":{"name":"@material/button","version":"10.0.0-canary.07deaec27.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"c9c538f6446ed2fb0daf14219237bdc3e7492ba1","tarball":"https://registry.npmjs.org/@material/button/-/button-10.0.0-canary.07deaec27.0.tgz","fileCount":38,"integrity":"sha512-2V36I6GT08TPZ8Nwf2mIotRj6RXYYe5juzUXz8bJ2MIARf/xH5jkniGONBTYGxh9ORhE+wYnArbegVYu96FCXw==","signatures":[{"sig":"MEUCIQDoCBlQL6AT0JjVNtfX2qm5mhENs/GYtk1fpBsJNhTXeAIgbGdCvDtJ2E6Sb4YcGEkn9SFhy0raGEgljiHOmrl7QGQ=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":465005,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgCwPYCRA9TVsSAnZWagAA+jIP/2s7kqpvs5zfqboJV2vJ\n5poQZk4Ey3CcRj9uzr1TqmY2Tzlg8RT+0pKHR1PqEaYYliDJwkKXS7EbdFdN\nPTy8i9xA5D97QslkqLWNvNS0EwAzQZUJpTQGXA0sLY8kgEerTaa8zqgkGavf\nZK87qiOIUoM17l8pHMnyj4wwvLzxQ/QKvWnY/o+2Ml/H+5ioI976Ds0TI4By\nDwp9QkKhikzWAanHrXmhAyzn0xqsbw+J0bn8rEYgldVURWIdtRfwNyDWh/0V\nIi/x9+AaAqGY9rOzVJM3aCUzIPTLMR5LhSyFsmrQABcqWO/xXyb5XlIhDgUd\nrCyf9FcDDQnIj5MY9vVOdfKDgeqlHDZ7wikxdMrv2w62udXLWd4/f3Ad0+mZ\nEF0lrAi3IGHM7d3YuDA4WFowfYlRqFdcyasxebJfyAYaSvpDgHnU1b2dAJ1/\nWPcupbQO6A1jVeMlhRThUqA9u2DAZB4HQX/lXqBeos6TT24CGUGmw8/YjIEw\nbYhnQB9HG/0m30tHGvaK2bn01atkpNpvDCvz+5D35uXBuEWOprTFNhsAzQ4v\n38cA7gpvgDx+ESgM5FohC/pNN1MJlAsPiOKSkqDDXy2hnFHJ3AdKal9HG5s2\nJUjyHhCXkxIthbehJoNo+59s+v4iEkkzDKAscCZb8vmusdcJdL1pnRiT8xt1\nXNUX\r\n=iOOg\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.**\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n**Note: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.**\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n\n**Note: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommended to\n always include it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color)` | Sets the container fill color to the given color for an enabled button.\n`disabled-container-fill-color($color)` | Sets the container fill color to the given color for a disabled button.\n`icon-color($color)` | Sets the icon color to the given color for an enabled button.\n`disabled-icon-color($color)` | Sets the icon color to the given color for a disabled button.\n`ink-color($color)` | Sets the ink color to the given color for an enabled button, and sets the icon color to the given color unless `icon-color` is also used.\n`disabled-ink-color($color)` | Sets the ink color to the given color for a disabled button, and sets the icon color to the given color unless `icon-color` is also used.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color)` | Sets the outline color to the given color for an enabled button.\n`disabled-outline-color($color)` | Sets the outline color to the given color for a disabled button.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web 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/density":"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/button_10.0.0-canary.07deaec27.0_1611334615638_0.6404102308509592","host":"s3://npm-registry-packages"}},"10.0.0-canary.d2959b16c.0":{"name":"@material/button","version":"10.0.0-canary.d2959b16c.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"9c341bb7bc1be7a4b13976922bd0a36069f06dbe","tarball":"https://registry.npmjs.org/@material/button/-/button-10.0.0-canary.d2959b16c.0.tgz","fileCount":38,"integrity":"sha512-2sv4oNMSpt6UHdvkjruRVKlkNsOmRMcYh4UFgtfGA0POgDseXknnwA0ECF/YM24ZNO2mzkO8LcvMAUyeFaosgg==","signatures":[{"sig":"MEYCIQDpP4ZBT6dVjWlIwS+2zlPgnYDEUmS9yoTGW4sn4lfBfwIhANJlD3GuyUpoovYY6stAP992WR3VSq4Kr0V3D+4ERSmn","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":465005,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgCx71CRA9TVsSAnZWagAARTQP/R+HxdcT4TJB2s50fU3q\ni6J4WqoEswa2+HKI0Lwetl4T5dsDxMSBf/E40c6PGrlQhiYkIVYCDkOn4qjR\nTR/FHhq+GHnfn0KWQOoc7Z6WhI61Tq4j5d6NrBcAewoZrNzHXpSXsu0JIh0l\nGckkOStE1u6drXGm1tfrzUhejSWe5CSkqnP3YknrHeej1WPrVIGtnjWNQ2eL\n8ZHGPzjkeAkJ+1J0SAnXmk+Ru9criE0tcmAzvOzkE6Z/F5S5p0nFqPVDqZWx\n5wJrvtZZcRlwViLoz3SodZ5FxiDsENQp0PZd+RVOxbK33f7U3C9pv6ABf6RD\nJEvuTZWGlVv7KxrzNGjTdjmGMSKWII91y+jLNK+f7EDBzizNQTJZPPqhDDU5\nKBq70yLVVQy1BLt3/Q9k8s2pMlG+wTZN1JXJfnIpjcUM6z6xmQXlj9QEK2b3\nt5aYadNPDZ8fV/KzixyM4di3/wgsFnkdaG+pqsnG3vIuy9aiUkMKIXb7AvG6\nHftrr+p3t8P1FS4KToA3g5zRkT+c+lJCs161s6uS3i6+mqhgHJ0l+KAh8tKz\nPhSIhAlmHUSHgKauXGuqyErzUoUwT4/TADspOXZeNiz9IdC6/ICkKnAFS2Wi\n+AOh0xIpkqtlJpHjJmHHCAVJUO9soRNcaJpOhLAiEBa1HfSYZbbKvxPoDshA\nrjbx\r\n=M96W\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.**\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n**Note: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.**\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n\n**Note: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommended to\n always include it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color)` | Sets the container fill color to the given color for an enabled button.\n`disabled-container-fill-color($color)` | Sets the container fill color to the given color for a disabled button.\n`icon-color($color)` | Sets the icon color to the given color for an enabled button.\n`disabled-icon-color($color)` | Sets the icon color to the given color for a disabled button.\n`ink-color($color)` | Sets the ink color to the given color for an enabled button, and sets the icon color to the given color unless `icon-color` is also used.\n`disabled-ink-color($color)` | Sets the ink color to the given color for a disabled button, and sets the icon color to the given color unless `icon-color` is also used.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color)` | Sets the outline color to the given color for an enabled button.\n`disabled-outline-color($color)` | Sets the outline color to the given color for a disabled button.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web 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/density":"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/button_10.0.0-canary.d2959b16c.0_1611341557356_0.9254029256253609","host":"s3://npm-registry-packages"}},"10.0.0-canary.75f3bfe7c.0":{"name":"@material/button","version":"10.0.0-canary.75f3bfe7c.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"03e4431f64f7bfbe7005c09549502d5d489ce66d","tarball":"https://registry.npmjs.org/@material/button/-/button-10.0.0-canary.75f3bfe7c.0.tgz","fileCount":38,"integrity":"sha512-F3Uqd/poXoFCDr8v7Kjf/+w32W3Hx/HqwaES+R3I5N4U1DAZICRjXlixrbLjrDleOVF2bn8Uo8ofpk0iy/hIhQ==","signatures":[{"sig":"MEUCIArud/Wx4ICTRmu9bqhv1oUmMvX6xiVN2z/OHwQD1dz2AiEAtPNiBYJjynEYN798WFcd/W/v3LgbiznXGg7A2IdPLi8=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":465005,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgC1cRCRA9TVsSAnZWagAAaYEP/icxPH15+yo/N+Fnfxw3\n5U+KRbi8wiLl3slEp5NdtPtdr2q5KQkkfdTWAwc2Dn5Tptq00k+4B+gfHZ3z\ndPYWEYWGEqjlarU/9MLdfwW33WTqw2W8DVeVGNKWs9gSDs4QIwaLoNMrTBAD\niUtBzEczyYGsyWMimtGAooEG0myCgH20uxmtpvEnjB1Ck/8jsZECrPPc97eK\nsymMEJzv6K14T9tFyKbIoMZhUC5paR3IGAYVgD1IcjzWJTRfpTZDBjGr/9FX\nEJyrSh6boL1AOJLYkLZjD+qd0d79Uk6aUbeCSk9PzoGJWvFBha+kI+iT/7uR\ncYkl32zP11mKcXiX9xncmn7IfpJnzlNlez11c2UCCQpxmuQ2GrdXDkSFVOnt\nPJa0owXpCcnB3lIY15oKujvOfkXS9HR9L+SIVbZOR3RxugIl+Wj42mgWBqGC\nisZJUY5ZdimT5nnRREcpQ5piZT0rtpurhJVwzJxDMRTZeUKAxQ/i85pAOCfm\nunLBgmMK8BvnWgYVbwVg64qYNkFiG7PCPJFpEBtNHbwsSVWwaSYISFhrvnzU\n5kgwgWL1pgvK6QWbmWci8LTHzhvd5HyuuM71c6os6Gpiqpr5CZ5VzK4sgHh1\n/R7KGhuVNTsq96klALi79H/Vc86WUVIWvBuVSNMICstFBVQClaJ1NFkOOtEb\nVo2F\r\n=TO5V\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.**\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n**Note: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.**\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n\n**Note: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommended to\n always include it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color)` | Sets the container fill color to the given color for an enabled button.\n`disabled-container-fill-color($color)` | Sets the container fill color to the given color for a disabled button.\n`icon-color($color)` | Sets the icon color to the given color for an enabled button.\n`disabled-icon-color($color)` | Sets the icon color to the given color for a disabled button.\n`ink-color($color)` | Sets the ink color to the given color for an enabled button, and sets the icon color to the given color unless `icon-color` is also used.\n`disabled-ink-color($color)` | Sets the ink color to the given color for a disabled button, and sets the icon color to the given color unless `icon-color` is also used.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color)` | Sets the outline color to the given color for an enabled button.\n`disabled-outline-color($color)` | Sets the outline color to the given color for a disabled button.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web 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/density":"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/button_10.0.0-canary.75f3bfe7c.0_1611355921022_0.1834525545230179","host":"s3://npm-registry-packages"}},"10.0.0-canary.b9adb7a0f.0":{"name":"@material/button","version":"10.0.0-canary.b9adb7a0f.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"e4d8767652b4edf1de6c8ba2a205622821d12169","tarball":"https://registry.npmjs.org/@material/button/-/button-10.0.0-canary.b9adb7a0f.0.tgz","fileCount":38,"integrity":"sha512-EgcYodwgkZYJYRIrRAOSu5GapVI+8F/00C2l/YUh3gi5BG6gFwOW/ed+CxT4UX69f+4pGAOHHMPCvx9aDPmAjg==","signatures":[{"sig":"MEUCIQC+Dh6tTfQaONcA3qJadJEU9I0VzGIH6xWZmQI+NjiqIwIgTudBiGnr9x5IaMSe39Aj2XH9df8g6GwLPp9nTf25niU=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":465005,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgC2F0CRA9TVsSAnZWagAARrsP/18g+9O+kiNtyvwPvkHe\n280bVKel+4ZIHRfabkjd4Bv6q0YAlK2qfo0mnp0CuxQpIGWP8FZl+clx5Lsy\nDoWuo5xkf1XClA4F8e/aE+q1pL68TNYU1RAOpYOOzuNYgiPx8+pSmnx0mcZw\nOnxx1bsIAiyqPU4A7hjSvs6s4fz+aSoudbtv7XkQCgVkOsUt0UYaFLAONU20\nw8aZr7jWOdEAha82olXBnmRDgHWFyXxUeeyKxfcKtlReo/8iqeyXiJagGbzB\nYNH1czVGnXkV8OIqiroVls/fyDX3xEvS4Wwo3JEPDRIpoerc793ZmJBKoq1A\nGEAxuS5/PaDbakv/OFuyUYDSa4JiBb1vhkuWksgvN6/K0Owq+RkPjk1j1tlZ\n+m2HKenfzoKKTfqsg41PXX39Wwyem+J5QIoi7+l8DYW4asyehBtlOqa8i8HO\n0WwlcYVVc3dotmo+LHk7CuJD8a5Kohsx0eJiNg5zVi3bhpjdymzr34OAc/nL\nPbJO6aOYBDlRKiK050vYkXjmUtEf5M3Tvk66M8mllRGUPa2QnW30seeQJnhd\nyyUgVBzE4O/1ay4w92fRPECnu4VHn1LCkeBi3dC6o/KLIhTMPA+n2JKUMT77\n74ZKWCOsOfijQJcODeNhOugWTpX2pnQcZIpYqgyapIDrx9pIT+AEEppw67wM\nej0U\r\n=Dxtm\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.**\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n**Note: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.**\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n\n**Note: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommended to\n always include it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color)` | Sets the container fill color to the given color for an enabled button.\n`disabled-container-fill-color($color)` | Sets the container fill color to the given color for a disabled button.\n`icon-color($color)` | Sets the icon color to the given color for an enabled button.\n`disabled-icon-color($color)` | Sets the icon color to the given color for a disabled button.\n`ink-color($color)` | Sets the ink color to the given color for an enabled button, and sets the icon color to the given color unless `icon-color` is also used.\n`disabled-ink-color($color)` | Sets the ink color to the given color for a disabled button, and sets the icon color to the given color unless `icon-color` is also used.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color)` | Sets the outline color to the given color for an enabled button.\n`disabled-outline-color($color)` | Sets the outline color to the given color for a disabled button.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web 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/density":"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/button_10.0.0-canary.b9adb7a0f.0_1611358579763_0.8258297125844247","host":"s3://npm-registry-packages"}},"10.0.0-canary.d29ec2862.0":{"name":"@material/button","version":"10.0.0-canary.d29ec2862.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"cb67ff003ff743d09ec79a2783e9316981711a71","tarball":"https://registry.npmjs.org/@material/button/-/button-10.0.0-canary.d29ec2862.0.tgz","fileCount":38,"integrity":"sha512-S2yP56Pon4E0ePbHDwZ2Cy9z2XYfp9+72tYlMww7ezYEtMYdPyJ2nr9KexATJ2r+mJL9rLrLc/UZS5G1BH6Q+w==","signatures":[{"sig":"MEQCIBrYARhHnpAcy9+iwP6McTLaBEI3hpnuXI1jISpNx5QzAiBigJe/8l+Fs3RACaSCM1keKfh6pNNrG19fM78MSdg89Q==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":465005,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgDvDCCRA9TVsSAnZWagAA4dEP/jIVXqsTiIDJarQM8u0w\nNjfqYeYVoOiI/GrN9GLoAS30q5jP7Fg2qB+8GevyZgJIZTbfloYyJhJWFzEB\nOcCnexxyFlCcACKEww8b5yl2hL24pb8Dca6jadqTp5Iwnn2g7RU12WKytLlh\no+PTghXq1APsu9TY1Zrm7HpR3WfTu4OTHs158fYRxeGu0uRvHDVjqKUVFjEW\n7vN6k0tDhPMT0cFbvZxiySdpDc52iCcbqkgxsS2edTl2zTAqcyHqaE6y0Z5B\nKp/31KYrqim5S3H7c72yt0U2O17JmUXwej4U+ruwWTED9W7l7fq54n3sO2SO\n4rKWGyVp/Cy5Q3O3DI9hhYqxkdle4z839/EaR14D8gOyZXP8WHhAMuS+wDE1\n37UEr2GZca93WRkrc6pyh4kWagfuFPn32vyrfEJCPsKvSmEHl4ieTh1TPbSk\nI8ZkQJdAFGKBvPJ9ZiX5/+zxl3s6amLBfz8sKWeBdGPKUdAk5aWe8XiiirTT\n9ycihCW7VrHh17Ug3Z8b6xEZOdxUcealHfUAA8OC8VxLiTzccCEoEj7N3xLL\ngjAm4Hslo0iGQPtnPSliGAIsoskpbEM9B0jRspf/NBlF29mse8tL3YfPXU7Z\njOIO3+9PZd/cXLeH1vi9PPe8rNaE7f6DGqqwYKuGtFcn36F46t6A2LEgoHQ6\nExTi\r\n=H91T\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.**\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n**Note: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.**\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n\n**Note: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommended to\n always include it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color)` | Sets the container fill color to the given color for an enabled button.\n`disabled-container-fill-color($color)` | Sets the container fill color to the given color for a disabled button.\n`icon-color($color)` | Sets the icon color to the given color for an enabled button.\n`disabled-icon-color($color)` | Sets the icon color to the given color for a disabled button.\n`ink-color($color)` | Sets the ink color to the given color for an enabled button, and sets the icon color to the given color unless `icon-color` is also used.\n`disabled-ink-color($color)` | Sets the ink color to the given color for a disabled button, and sets the icon color to the given color unless `icon-color` is also used.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color)` | Sets the outline color to the given color for an enabled button.\n`disabled-outline-color($color)` | Sets the outline color to the given color for a disabled button.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web 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/density":"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/button_10.0.0-canary.d29ec2862.0_1611591873570_0.4780496170575157","host":"s3://npm-registry-packages"}},"10.0.0-canary.96be07c68.0":{"name":"@material/button","version":"10.0.0-canary.96be07c68.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"62aee5049bc2681f7ddcddf9b3c8629b44c63031","tarball":"https://registry.npmjs.org/@material/button/-/button-10.0.0-canary.96be07c68.0.tgz","fileCount":38,"integrity":"sha512-C2FEQLZ07TgeMJpRoos2719OKTMO6Q6ThWOra5cg6d937FfL/NMjKqJQp1v45JUW0DnreZ9uRF7jfB83+6Gpqg==","signatures":[{"sig":"MEUCIDwZLZZnuDPFNmC+Lqj4XREgOgd4xj54rDbXIHsaDPfyAiEA22yFkdk5VqvcfdEfmcpQpvvda6lOqjkgV1BBUOBLnF4=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":465057,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgD14DCRA9TVsSAnZWagAAwfMP/1q2dqBbmi3cUrRJvzwL\nywwu9akiw5tT8po7XOJ+uO5RL+o4iS7hQ8cuWpZMJkElgbdNaqunzFctftAH\n87LO/nVD5TuB3D+e6TifU4+zgVi6mi4fV4rbmcTITcFe0t+MkcE2um+rOf5P\nGQQpboon4vgETFOMnBZMVtozaGlsOX0bUNTaH4IggaZjnWgGNfpjXpf9oHbu\nLniVe2s13tFK8r7xq2vieWgXnDGJ3HB1aeEXTjVG/WMenmAMrZeIEEmd80aF\nhdzQM5CDOXS1PXupUtEcOFISrbRYUv0vbkwA1cwcSPOSSWVhCmrQIO+C5cp5\nz4A/+4Ap9JesgXuOdWnVYI+QYmvs0si1ICrn2HARPT5lctVTs9kd7/p8yewD\nKCvAKDoSLl+0JcikWGKgALBb1VAmL0VV3xPV1w8REB/ripuZhDovxscXK9+b\nhF1dYhArxDSwRZIqxQ8XlCIR3UzW9VxeWw5WOw41f8iBB3j/CfdPuPi05CBO\nKsi4NOMnwD6HvzUJADebfC6FgxM7MfFC/pQlkI1NKm2YoVm9Y3pL9610bdwC\nrOrVWn0P5kZwjxj/63geErNx7Y5eJ++HzEX0nfgTejSL9OOgwOUabsTipcAB\nDwWl1q4MZMiHBN7rZkAQUTII7piLkXOxUWOs+FFh38vIMBRfYXhjMTsb/vP+\nkQoK\r\n=j7re\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.**\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n**Note: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.**\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n\n**Note: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommended to\n always include it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color)` | Sets the container fill color to the given color for an enabled button.\n`disabled-container-fill-color($color)` | Sets the container fill color to the given color for a disabled button.\n`icon-color($color)` | Sets the icon color to the given color for an enabled button.\n`disabled-icon-color($color)` | Sets the icon color to the given color for a disabled button.\n`ink-color($color)` | Sets the ink color to the given color for an enabled button, and sets the icon color to the given color unless `icon-color` is also used.\n`disabled-ink-color($color)` | Sets the ink color to the given color for a disabled button, and sets the icon color to the given color unless `icon-color` is also used.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color)` | Sets the outline color to the given color for an enabled button.\n`disabled-outline-color($color)` | Sets the outline color to the given color for a disabled button.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web 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/density":"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/button_10.0.0-canary.96be07c68.0_1611619842530_0.19198707466722387","host":"s3://npm-registry-packages"}},"10.0.0-canary.e383944e9.0":{"name":"@material/button","version":"10.0.0-canary.e383944e9.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"b09dc30f809bef1ae808ac848c9e41108f624e21","tarball":"https://registry.npmjs.org/@material/button/-/button-10.0.0-canary.e383944e9.0.tgz","fileCount":38,"integrity":"sha512-zFPTtNmOHedt6NnY1ZxM2MgZDYeuFNb18XIrKv0F5kNTGgMAOqub8EpxomnywXaPCXMTTC0k9bmb4DgtIbuISg==","signatures":[{"sig":"MEYCIQC4PNJzjrnuAHZ0V/G/gqqeJ3rb4AwMcwG+V1sLJG4qQgIhAPpsQtR6++XdBpuq5uGy+D7Rvsw3KJc3dYqBfq2NfzlW","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":465057,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgD3Q6CRA9TVsSAnZWagAAjgcP/i8CDLoedYgoWJ8b30xV\nbA5FEG0JvtOH57qntlxcckXCIpcLnZpRYalnXo+34Tuww/as7ad/w5x6aQui\n1FiiutKlLJgsWP3Pj5Jui/lTy7o6FHSOP/oTMZ6hIvvMKfZMteTQolLpEuN0\nOKGNE+Rk717cVHIqUws8IJ2aP6TcL3ZH2Utrm8Bb3EvuzWqvcPWAF9RcdsQT\nDu+5BkHOvPyPkh6UK63m2JTXuNms7fMS9uxJrga7vBat7wK3PPWQk3oETExQ\nvRCGVd4puvgWVBbc8/hv7lGSyy+xSSGZARVdqcThmDxDBttTknZ7igH51HXJ\nKn4qCuz4loa2xIbkAMlff7mOc1dWfniIOV0IWYjQJ2dcQ4IdtlOMNLEbWK0N\n+qdsah0nyjPAXkjwb25r2Ka+q5wgBTQc9hSs1s5kp44nfYO5UcCuK/euq86M\nm/sF5nQy6pUhY/SYffEIjEN7VAw0QS2dP/jlOl0+sLfDrINijH7uMsMM5qSY\nE4GelHv37t9PlI13cvWgLRT6Ee9kcBwG7xOtAeGiy9VtqyPVZ9bVpBnIGtgH\nVF6Mb0pvybEXddv1311st4NP4wqYwxMKR75NGFurT4QT23hLhBXwHLVjjlOe\nx/8i1FBdi71BBRTKGrKMX8DYVVpT138SHD6ctPs+tIdn+zFVDOJpm5HAfeKn\n7hdw\r\n=AL2l\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.**\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n**Note: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.**\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n\n**Note: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommended to\n always include it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color)` | Sets the container fill color to the given color for an enabled button.\n`disabled-container-fill-color($color)` | Sets the container fill color to the given color for a disabled button.\n`icon-color($color)` | Sets the icon color to the given color for an enabled button.\n`disabled-icon-color($color)` | Sets the icon color to the given color for a disabled button.\n`ink-color($color)` | Sets the ink color to the given color for an enabled button, and sets the icon color to the given color unless `icon-color` is also used.\n`disabled-ink-color($color)` | Sets the ink color to the given color for a disabled button, and sets the icon color to the given color unless `icon-color` is also used.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color)` | Sets the outline color to the given color for an enabled button.\n`disabled-outline-color($color)` | Sets the outline color to the given color for a disabled button.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web 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/density":"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/button_10.0.0-canary.e383944e9.0_1611625530160_0.7889379766904165","host":"s3://npm-registry-packages"}},"10.0.0-canary.623af861e.0":{"name":"@material/button","version":"10.0.0-canary.623af861e.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"21682f107336f4aafdfc8fe5223bc5cece8588f2","tarball":"https://registry.npmjs.org/@material/button/-/button-10.0.0-canary.623af861e.0.tgz","fileCount":38,"integrity":"sha512-SSSzBEFqZttRpoiDe1XX3YOidwpGhnefVgh8ihAlwznkn3VJYMEqhzehiiMfgqaqsBACwmOLCYtu1CuENt3qTA==","signatures":[{"sig":"MEUCIQDFeX2mWnsBnxaCQn+m8xSdXRGEUhRiqEEKzTcUCx57lgIgRyycAupAoZoAuWxGrXnZonS3aj2lCoPC2ySb5zTs/v8=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":465057,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgD5BoCRA9TVsSAnZWagAAYjEP+gKRdeN4rMh+CUaj5EjK\nypWL4dBFL3WY4DiHEQ/VlVA0kY80lFKbnQ0fiPawKc+4zG4ciQ8AxQCi+rnZ\n1qGm6+sISjhLNqJa1sTSy+4YG9t2YZgC09nyu69uopbFGfo44puz8RSxjTha\n2cP+y9WfOr8zMwBxk+HEvjr/wLYlXKgH6yBEjoO8WWot1u4vEXTBSai0r5ZH\nEdnk5IuCdzO/T5aCnZD3yg0AyTZssSqQjb570x8clCwqj6lLKhnRtv/jna32\nvWchW8IhleNYN8BG1R617bwJ2Qz1yCBvAr+kfhU55VW5G6AGES/IH6OyqOZc\nteGlAAIQPccPEFe7X7taW+iVYFIH0RTTBXQej2vhRvhtH7+kZmScLSNOQ4rO\nEUUMxghfEy6AheGHu2aY13K/fExcwvAVCm/f+WiH0Sdo+TWh5w2o9cN5zMEp\njtlKZn3jOjpCG81agZqv0Uh1st/CA1SRl/WIOx9DlRoMdyc4ATkzphsByWoj\nOqFu1VFlYQkHlGj5QPWyvF3N781HSrZhLazR7ea83xG+ung9m9F7Dan3/t61\nsH4ViKmVMbhUNopN07CfJ78Q5bQ49mzt83b2HlNAw8UIN7JjmyhyHLv0LMlk\nJ3V7IhusKUlxWxUdJHMbHHQtfNsbun9uyZta5TT/bzwK2v+O+/cJm7of21Cf\n4Ok+\r\n=AfyR\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.**\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n**Note: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.**\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n\n**Note: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommended to\n always include it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color)` | Sets the container fill color to the given color for an enabled button.\n`disabled-container-fill-color($color)` | Sets the container fill color to the given color for a disabled button.\n`icon-color($color)` | Sets the icon color to the given color for an enabled button.\n`disabled-icon-color($color)` | Sets the icon color to the given color for a disabled button.\n`ink-color($color)` | Sets the ink color to the given color for an enabled button, and sets the icon color to the given color unless `icon-color` is also used.\n`disabled-ink-color($color)` | Sets the ink color to the given color for a disabled button, and sets the icon color to the given color unless `icon-color` is also used.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color)` | Sets the outline color to the given color for an enabled button.\n`disabled-outline-color($color)` | Sets the outline color to the given color for a disabled button.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web 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/density":"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/button_10.0.0-canary.623af861e.0_1611632744362_0.4266192323942348","host":"s3://npm-registry-packages"}},"10.0.0-canary.6863fd43a.0":{"name":"@material/button","version":"10.0.0-canary.6863fd43a.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"db7d0a56d25fb6b111a6149fc7ede96c6680bdc7","tarball":"https://registry.npmjs.org/@material/button/-/button-10.0.0-canary.6863fd43a.0.tgz","fileCount":38,"integrity":"sha512-barKg9LUsbevr9fee4jMM/LcAGKPYmEdbOQF78BB3n/Gn3FD46gmHGOYqZ7afCOuSVVd1HnT+goZSQSeWk8t3A==","signatures":[{"sig":"MEUCIHMHnvqMae/w/G8xD/HzWgdUEpAH7PjzSw8eIStYmUxiAiEAyo44EiDREAC4P3kQEKWm4UjqyXTfUeCkOQwnd7GSnPg=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":465057,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgEIrECRA9TVsSAnZWagAAPZgP+gI2/BdyqQHnABpzKvUI\ngi1nboKo/Y2xtbEp9iX1tNEyoPwLxYhvKpoUXG3LfdtKgDeqkaseVt9wozVL\nrx3BpGnHQkzuD1JQSf2PQhT1nFRNozOIcmKpGNm446wFR/oE5XWmFlv5ZLkQ\naU+syfSwSghRtHaPpPKZMYMOprt8vILVQGl8YwBo8eJr7WLdBBOz7y6LMFdb\nFGfJMONGfHR5XnTAGagcMdkyOb1XP0IlFRGr9vcN5WiMJ0KwXYnCL5H1nJeN\nACEES1zFNebvvigseESQ/25U1LnYQ6SIDY5UqmuOsL0mhsvi208Px6yMDkeT\ncJAGLfM4zXf52U23mmOtHVpiW11I8Vj7wdqbZSZ7/iEFDaLsYzZES5KHnsL/\nfHIUscuujJHi7LPatmcbl6M78dNi13RJWb3YU0+tMeJPO48sIGt8NSOorQtV\nTWNphstwZr8xIDX2ts/Od5kcLJVl9cQ36H2CdvgbtM8UPQq2B9rHh0CKH/3N\ntdtvQz2P8+xnYNS3bhHwkPMatGoUJtKTZt35VkdVyoeLW5avwaPrxtQbQMcm\n4PvX7dbcY2+9q0zb1+EKXj/bL761Ws2nHWW5xmEn14jMpvvPyvj0oBHXW8QH\n2h0Ymo6ZwUnByoRC7S63cXPdhjoUJ+55PhygvO/3Sw5xCgEdxwdFYfMDtba7\nc/zA\r\n=U9S5\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.**\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n**Note: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.**\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n\n**Note: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommended to\n always include it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color)` | Sets the container fill color to the given color for an enabled button.\n`disabled-container-fill-color($color)` | Sets the container fill color to the given color for a disabled button.\n`icon-color($color)` | Sets the icon color to the given color for an enabled button.\n`disabled-icon-color($color)` | Sets the icon color to the given color for a disabled button.\n`ink-color($color)` | Sets the ink color to the given color for an enabled button, and sets the icon color to the given color unless `icon-color` is also used.\n`disabled-ink-color($color)` | Sets the ink color to the given color for a disabled button, and sets the icon color to the given color unless `icon-color` is also used.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color)` | Sets the outline color to the given color for an enabled button.\n`disabled-outline-color($color)` | Sets the outline color to the given color for a disabled button.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web 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/density":"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/button_10.0.0-canary.6863fd43a.0_1611696836445_0.9320251022600967","host":"s3://npm-registry-packages"}},"10.0.0-canary.ea55b87ca.0":{"name":"@material/button","version":"10.0.0-canary.ea55b87ca.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"05611afe4cffed08d10eae87034787bf42d357f2","tarball":"https://registry.npmjs.org/@material/button/-/button-10.0.0-canary.ea55b87ca.0.tgz","fileCount":38,"integrity":"sha512-nVp99y5MCXi3mY9PILnx9uGRQkcGrYgdRwoijzqn+mTwqEBPVYCXbYS/dq2Mmlzev41f+waxAutKdsdyrCdDbA==","signatures":[{"sig":"MEUCIFeSd4/iqacQ6psPCOA+VDkEzYazuNaiCvgrhWbaIlAzAiEA8GHTqJbSrAlFzs3ZQRqjvSjus4EoyvJ7npys9CimdkM=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":465057,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgEKngCRA9TVsSAnZWagAA8wEP/24eA9f7WXSs63Q1LZ2t\niz865r+Sa2LoqyPi8+0rpf4ZEN0DtI1dvgmfeJMmyezPpZ9MZiye0LFWhdtF\nZ+iPd1cGxuj4+cr2tzdlMO53vY5ExW5T2fZnnSYKsjwY1cyZc06ETCPkpgN+\nCMO5OH7jJlWOncGIN4XXg2cvnaV3xlS0/Cj9zV8lVBUteAA7Y+h8msMnhPtR\nMKOWb7MRZOLm3O0/UCY0GIIEax3azUq/DjMe5BoEsUZRaIyT0pszz08jjLDc\np1HJQdbhIAgmJ69lkQ0H+Z42BXtZa0O6CQ6VWwRqxnNc46pCJ1qUoGv9iwYZ\nrmbb60RiolAiTnes7AzHDbEzkMDBB1KCMpGrIDhzHd3Q3OX81+xdeaLzC0BP\nlB4yjOw9eWpcS3Wt9P/fkqlQrLPaqPJND2yuBT2DnUah6K+V10BNhyJP7fbU\nEJNNCMV8oEXQqPjGhSlYJak3kZ28BT6l7Hu03STN3Afg51avpOPWZZ3I2kbI\nKKMYrgONPZBBrwZCuuMwrcJNoshsz8/vqnK/KLyGZ0AP5qLwz6xcd+lgUyXs\nG4R+cG1YZScAkQOXe98QREkixQJiR8Qijn1J72D5HwVTp6H1g+9ReiWxNAHz\nfM8gKvdsFQUs+HtHCvMjqR3xirnAEJ4KZU06ODJdw+vuKehETGmqVCws1Fa1\nXQIX\r\n=Kuhr\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.**\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n**Note: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.**\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n\n**Note: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommended to\n always include it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color)` | Sets the container fill color to the given color for an enabled button.\n`disabled-container-fill-color($color)` | Sets the container fill color to the given color for a disabled button.\n`icon-color($color)` | Sets the icon color to the given color for an enabled button.\n`disabled-icon-color($color)` | Sets the icon color to the given color for a disabled button.\n`ink-color($color)` | Sets the ink color to the given color for an enabled button, and sets the icon color to the given color unless `icon-color` is also used.\n`disabled-ink-color($color)` | Sets the ink color to the given color for a disabled button, and sets the icon color to the given color unless `icon-color` is also used.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color)` | Sets the outline color to the given color for an enabled button.\n`disabled-outline-color($color)` | Sets the outline color to the given color for a disabled button.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web 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/density":"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/button_10.0.0-canary.ea55b87ca.0_1611704800431_0.17323284318193255","host":"s3://npm-registry-packages"}},"10.0.0-canary.e902ff05f.0":{"name":"@material/button","version":"10.0.0-canary.e902ff05f.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"a1f1048813b5d475d8f360e29d99aaa4cf1e6e9c","tarball":"https://registry.npmjs.org/@material/button/-/button-10.0.0-canary.e902ff05f.0.tgz","fileCount":38,"integrity":"sha512-wLjsnUiJKb/4F8GiGCo5QSDC4z7z7NrjOkyi+ZuL1qr0AnHMTne2+PY9hBPZiVa0PCuDmKnHc7HCYBhrNg3z8w==","signatures":[{"sig":"MEUCIF61dWHtbYZPhiBmhe2a1s/T+AUf8S2mASfqH1umaC1iAiEAmiUh4EvfOmhPH6cmNXIHwZzmCzWEgUgIloUj0DEc03E=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":465057,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgEK4dCRA9TVsSAnZWagAAYKAP/RKcoSnDYMz+JYWuAJ3v\nSreAq7EkQbZfp7N3v32qUMPcSyhOP7aNNVynvg0eBCbF7aCzPh6phGnTq+jV\n136wfksITknD0kLUAX9/jDLBU8s53KiCHHlzMm41VSOTaQ3komOYYg5j3doZ\nEZH0S5YkKDnaohBoU0fbO6IsslsJT73wxVgbhpg3FIztb4fzwcchUOawMAH6\nx4btLrJ2AdXQEer22HW55QvLU+hu0uo6Vzy3B+uX6VSmmfScWz25BEF2kGNK\nyWv7BlRrctKhfaDUyPLQ8/BZlQUWdnVhcempbJnnEWrrNCaoTJz53wQ6U84y\nfn7zaiILlhlcSd89OcEY7dNCl2e9Xr8L1Z+sVCZINzDmGpYpyN4PYmZhoCCK\nOsTkQuFePHCw50pjXuu19pD5JmPYC8ky+4avLphCZsyyY8B8aiDKiPVtf23R\ndvzBCPg9ISE17e/TnFu+wHk++6UXOtRpX0XaTqBINhhI6hDhwX1zlZYHpNsw\nE1eIwykez9DeQwvXuCWGT0+ZfpAsH+ESLN+X1V7TSuQzATjfywK+rvA9bHnA\nKM8pzD81sTBIBwM+vY2s0NJcBXObMvujQvIQYKxFhCcDekwMPk6grIPU8570\nE3KlixE8D+ZNSdXItUrFpdP7rDvHdz1RJJptdBIKB8px/KIze57T2LTgGzV1\nOYOO\r\n=wBiu\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.**\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n**Note: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.**\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n\n**Note: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommended to\n always include it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color)` | Sets the container fill color to the given color for an enabled button.\n`disabled-container-fill-color($color)` | Sets the container fill color to the given color for a disabled button.\n`icon-color($color)` | Sets the icon color to the given color for an enabled button.\n`disabled-icon-color($color)` | Sets the icon color to the given color for a disabled button.\n`ink-color($color)` | Sets the ink color to the given color for an enabled button, and sets the icon color to the given color unless `icon-color` is also used.\n`disabled-ink-color($color)` | Sets the ink color to the given color for a disabled button, and sets the icon color to the given color unless `icon-color` is also used.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color)` | Sets the outline color to the given color for an enabled button.\n`disabled-outline-color($color)` | Sets the outline color to the given color for a disabled button.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web 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/density":"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/button_10.0.0-canary.e902ff05f.0_1611705884637_0.3341170253069128","host":"s3://npm-registry-packages"}},"10.0.0-canary.2c9fc538a.0":{"name":"@material/button","version":"10.0.0-canary.2c9fc538a.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"a6e5ff192ed1024bc1e4fd4fe93a13f0491fcae4","tarball":"https://registry.npmjs.org/@material/button/-/button-10.0.0-canary.2c9fc538a.0.tgz","fileCount":39,"integrity":"sha512-Mgo8oVlB7foRb0sxHAWBAaG0CKOv1P8zmhlGfxH4uBwmYVmUj1RDCpmXtBxIQQIowJkW53sRBht+fjinYbdiaw==","signatures":[{"sig":"MEQCIDy+cpRT6rxP9OpX5PPo1FwQLRmXctF+A6Y2PZs1HXRQAiAvyyDRe9H/+9/TXvn3Gxd2wq1e+BlIBTBJDXPfxW7drQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":466795,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgELOBCRA9TVsSAnZWagAAF18P/1lvM0tXzv4xYmjWfYZB\nUk7QqfWrLfO0eXhV1dQkq4/akkjfE1+AzLEDemcY0VUbeYnRCuoIHj7R+mtg\njbwW4OEsSLBd7Cigscx8lcl/M8QzrKHU1nq+Fmo4ju4lG/EmleHpVtc03NdZ\nsWeAOz0HresV2vHupe8xN/bd5+NwHQ5TnqucRl12+utnqf9lnn1bWACoBBCO\nMYJE+l3RJMAGeymuqwmqxtvjGotF8zYpeCMrlppbk1+iCQm7oHm9d+CzbmtO\n8Ga1qAf5A6YhGORLGPIRRGwH2CaF26pjaleHcisoT1gfXTLI/TGuBVDuOUE2\nkDImC4D+9dudJS0Bt1ymqY691KfPzsAxzrUF9/LdtedIEGlCw4ClFY4g1STN\nf7OkgBHdc2BzVCwVqZT2yXcx6amy+cE6oLLEzPpJld3Uz0GGXqLs37ejbaX6\nDwAQLpCi73b4r4d/GjRBSEo7iaBl+o6+6vYBOfq4CMv9rh7HRQlHIRt2uexC\n1KFmh5Lp+HjkN3PZT6O7q3ANEm8tQ4ylQyCd8v8EXL64WZlfNZlUVW1uONzO\nF6TzbT+zNq8VrS99yeGu3tLX0IvYw1VnJbGk4LOC4DEQ1r+frG9XB1iLFXUl\ng/CDXibY9++P8Wk2ORTZxiow4vtZWSZed4CdZe6QQXFJrT2Lx/NRiyFEQgl4\n+fFf\r\n=UsPY\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.**\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n**Note: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.**\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n\n**Note: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommended to\n always include it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color)` | Sets the container fill color to the given color for an enabled button.\n`disabled-container-fill-color($color)` | Sets the container fill color to the given color for a disabled button.\n`icon-color($color)` | Sets the icon color to the given color for an enabled button.\n`disabled-icon-color($color)` | Sets the icon color to the given color for a disabled button.\n`ink-color($color)` | Sets the ink color to the given color for an enabled button, and sets the icon color to the given color unless `icon-color` is also used.\n`disabled-ink-color($color)` | Sets the ink color to the given color for a disabled button, and sets the icon color to the given color unless `icon-color` is also used.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color)` | Sets the outline color to the given color for an enabled button.\n`disabled-outline-color($color)` | Sets the outline color to the given color for a disabled button.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web 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/density":"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/button_10.0.0-canary.2c9fc538a.0_1611707264930_0.15592469006422593","host":"s3://npm-registry-packages"}},"10.0.0-canary.6bf56aaa4.0":{"name":"@material/button","version":"10.0.0-canary.6bf56aaa4.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"e92543a03afc76870061b388fa45cc560a414437","tarball":"https://registry.npmjs.org/@material/button/-/button-10.0.0-canary.6bf56aaa4.0.tgz","fileCount":39,"integrity":"sha512-JgPEm7NUuaMU3xRkm5iWXBZK3V3avRzmcGLcjLlBscFf8Rsxz0VQ0Mm0fsR//7npdpTcMsXegz/Jear+cHaolA==","signatures":[{"sig":"MEQCIEvYrLYLdliruIXFRyz1mTbiQn8TL6ZikVAitwf8N8Z6AiAdd5+vN2KiQOkSi6pFm0ZG6lh4m8bBPl7wTFBSyZ19bg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":473626,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgEL/rCRA9TVsSAnZWagAA4bMP/1N/bf0uUpZ6JerBk2Uz\nCnbdh1RABOv3gxbRSxG7EcnfuVdO11t+TFV29hogdoWTm5tL+sTzUK8ZniLq\nX9orpdFBVjJBKYLHhKTR08+l/hqbarebRE5Dq5cnmb/e9OLlCM16WDYbUHZf\ndXDVIDrFGJmRBJZ1t7HVS8+Zq0qREB6nv4K1FzE3ph1PlX2fSEEH3SS7neA7\n/BjcEQDVeYx9jyNws/cBS5Td8mH3QIkrlCrLfyOEgN//Z3NmhPt6CXm//gff\nkjSIr3tS3ZDJEdGIeroLS7yi5ZlqINffY0QaQF34+HNZuLyhgrTyTvkW+v52\nzAQHudA3kzmR4hMCEw6wzMbFR2wyeuFZ20kO/+YPs5hNvnbQxB8y7mvDi9py\nTqEVuoZKT/rGLmpzjA+jZY2zzE8gYb6COSKW5m0RdFCZTES8sUEdmTegWlhV\ngqRTP7EjQ16DY+IvDkB0VO8FvxZWn3dpxT19PT0BgnWrMHarwlcKs8qkamXO\nnySq4phGYd/StiFlNDRMg7BtLr7gikwHWu7VtJ7xxVl/ne/lDdFviPRVSKVd\nY0Xb3C9w/33QtBLPQZQDgH5sr7P5JzjEu9wSYvT6jq/s08UC/9z0mWvTSb9N\nHS/Od27o9oO22TUIxEBvbqQwneEl2QgVX2EaKHHMJwh2ypcJzoW/5SeYf3w6\n0gL5\r\n=nnl5\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.**\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n**Note: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.**\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n\n**Note: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommended to\n always include it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color)` | Sets the container fill color to the given color for an enabled button.\n`disabled-container-fill-color($color)` | Sets the container fill color to the given color for a disabled button.\n`icon-color($color)` | Sets the icon color to the given color for an enabled button.\n`disabled-icon-color($color)` | Sets the icon color to the given color for a disabled button.\n`ink-color($color)` | Sets the ink color to the given color for an enabled button, and sets the icon color to the given color unless `icon-color` is also used.\n`disabled-ink-color($color)` | Sets the ink color to the given color for a disabled button, and sets the icon color to the given color unless `icon-color` is also used.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color)` | Sets the outline color to the given color for an enabled button.\n`disabled-outline-color($color)` | Sets the outline color to the given color for a disabled button.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web 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/density":"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/button_10.0.0-canary.6bf56aaa4.0_1611710442933_0.07047853670047965","host":"s3://npm-registry-packages"}},"10.0.0-canary.994873795.0":{"name":"@material/button","version":"10.0.0-canary.994873795.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"03987790f1f5a2d6079d7ad532a647cb045c3564","tarball":"https://registry.npmjs.org/@material/button/-/button-10.0.0-canary.994873795.0.tgz","fileCount":39,"integrity":"sha512-TIiWy9QjvnXK1WgZkB/81w6qZX27C0uCLq7XyJ2pZBel1/LKv6iQ2uIu5y4wKNwfbJ5NuMRa87gYhZk77iBs0A==","signatures":[{"sig":"MEUCIQDK+f361yaBqMpJFw/mkZyDJU21L5faq3DvlhqVdAAUHAIgCiyq22ugjIlWgbwS6zS/R1uuytPMAhCaY7UwcZ2kYeo=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":473626,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgEX3+CRA9TVsSAnZWagAAWAgP/ROVevNxB2LQ1OjgQHxC\nvAQRdimMhHoyTGdPHm9K1TVesLGyNXUTQr6AjAflDLgulEpr9AlLlz3f3gVX\nQIt05yAtX+cbbmRpUz8A9xq2GBP8EmbB3YSVHg+xeQVqa6eTlE21AEKdtHe6\nDDoT+ZJyTUGDcMZqj1pbFwVUF9nj3KHLjmsHH9kzkLDYGMWtydcfa9VmeRym\nisFKITEc2b6XiikfssaUTHQukUNckgUQHcf3TG/Ch28tGYA+CbWMdUh+DcBE\ni+UJk84ai6OgJdRnqUX1PjAmB2NZ94f52DcsFnnDOSs2foBhV1n+JFhFbc0n\nY1pakLmljud2RL5+8ngiwrttP+O1dNF6TUeLl2e1B3Odk0Cd8+uOTmQYv4MN\nS7fUQHNGOXrq5gwR63nsu0pRc11oD2yCx45D7R06Z5NUCeMa5qMFxAULv304\nnT/wvMloA5ePtZcdcmzbjQ1oE3eBejvg/rDj0DtfhOmADkehmJXq9jJf0eik\nW/wvXjIgbCVZvFfyIC4aH9NOQsuS5QADXskXlx1IUkqoWYdLPJRDIoXkDmLF\nGhyyh2Iwg4r7I82goPSL1tatLVBuuhLSTlHeJlxgmw+5FhFJ7aH6hkxC3cqG\nrxrViNaRbpO4YJgLXBWkc0ThEERsyKQwuKGGgCupTlMryJECoN5MBDvqCgwS\n5Nds\r\n=Ce95\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.**\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n**Note: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.**\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n\n**Note: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommended to\n always include it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color)` | Sets the container fill color to the given color for an enabled button.\n`disabled-container-fill-color($color)` | Sets the container fill color to the given color for a disabled button.\n`icon-color($color)` | Sets the icon color to the given color for an enabled button.\n`disabled-icon-color($color)` | Sets the icon color to the given color for a disabled button.\n`ink-color($color)` | Sets the ink color to the given color for an enabled button, and sets the icon color to the given color unless `icon-color` is also used.\n`disabled-ink-color($color)` | Sets the ink color to the given color for a disabled button, and sets the icon color to the given color unless `icon-color` is also used.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color)` | Sets the outline color to the given color for an enabled button.\n`disabled-outline-color($color)` | Sets the outline color to the given color for a disabled button.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web 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/density":"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/button_10.0.0-canary.994873795.0_1611759101643_0.4639537878996909","host":"s3://npm-registry-packages"}},"10.0.0-canary.96878e1d0.0":{"name":"@material/button","version":"10.0.0-canary.96878e1d0.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"54e3396a420bc589a8bdb9443628b29138191d24","tarball":"https://registry.npmjs.org/@material/button/-/button-10.0.0-canary.96878e1d0.0.tgz","fileCount":39,"integrity":"sha512-gP7WiUoFiDUlFPSORuwlDdJ0CYt0wFLo0d2N6qpSYcB0Rjm1BVzR7qzfgYbxtTNBDE8Hn5Ygc4ZIZOTdiUnZ8w==","signatures":[{"sig":"MEYCIQClwScurV1TcVdXez6falfy1rv2mHpKGMXX/SorNwTuiQIhAJR2l6Qz4o5dTWdZMD8BRKs+0o7p9BVRR9G61i9TzOIJ","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":473626,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgEarMCRA9TVsSAnZWagAAQEMQAI7CyFrQ5gHHNiIBUuZ4\n1aOmEEueUlJughH8DXkg7Ge92rdBIZs++hun90Towoim7tBbqKX2d9NOTujW\nzHfsGIwqQc75qEyYqZ+91dSuMFLyyDhDo3wD9GCNsdX3GAFZY8Zyyscuv+lb\n62p2RyCMNR0qI8ERw1LtICZx2UVhklxCgVWz6W7GDWAgQkeFrWay2fIZoeLK\n1ee+h9jOA5KwAq1Er4/+utoYC9rUHnp2WUspC07wuIVIbN/cY/7b+NUiQVeU\nxFCEmao53zIxpON7SF+JG4NWFSCi9Q57RsN8spI/7yQPlJ9E9l1mmZNfjQGT\nHVGbCC4pn8OXCix2LujiG0dWeVRGca3WhEaYThqJ7nU2tQ0uypz+i2o+W9Xy\no8VWKp0PJT/3ycoGNS0wXQaOGVP+lmdoFQCCl5UDKFWk22ZWkMZ9xS1kbeiS\nBbbyYZMVCGkzaWMuDJ/pzuMJ3fnwJ0ots5+rNCfXJBN4QQGNI9YauzqDcOT6\nHUBuZxzHCJ4Aw6CMj1s6Sy8AItK5MZcF72ndYkRvJI5S8EDOd8zztswyA9xp\ngj1fPgRYdnNLmjvCOT8FMmQpAPMMONOaLx8c54WWZw50cIxEDWPCd3sKtY1o\nLd910P+9y/9J9NVR/l6aYE8F/TSWIXvXGF6mItVDhMEe+L/l8l3M/zHSR5fy\nMLl1\r\n=Rcdw\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.**\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n**Note: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.**\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n\n**Note: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommended to\n always include it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color)` | Sets the container fill color to the given color for an enabled button.\n`disabled-container-fill-color($color)` | Sets the container fill color to the given color for a disabled button.\n`icon-color($color)` | Sets the icon color to the given color for an enabled button.\n`disabled-icon-color($color)` | Sets the icon color to the given color for a disabled button.\n`ink-color($color)` | Sets the ink color to the given color for an enabled button, and sets the icon color to the given color unless `icon-color` is also used.\n`disabled-ink-color($color)` | Sets the ink color to the given color for a disabled button, and sets the icon color to the given color unless `icon-color` is also used.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color)` | Sets the outline color to the given color for an enabled button.\n`disabled-outline-color($color)` | Sets the outline color to the given color for a disabled button.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web 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/density":"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/button_10.0.0-canary.96878e1d0.0_1611770571704_0.2636969714737938","host":"s3://npm-registry-packages"}},"10.0.0-canary.3c117cdcc.0":{"name":"@material/button","version":"10.0.0-canary.3c117cdcc.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"aefd5f911df459fcac7bfb8e9e3c302f1ce74719","tarball":"https://registry.npmjs.org/@material/button/-/button-10.0.0-canary.3c117cdcc.0.tgz","fileCount":39,"integrity":"sha512-4Uo5dQNpILPx11VjBqqsbnh5uUPT9qfg7gUXX9xb+b+WaKiz0UjjAMMhuKVLv1VF03BJ/YwiH6ALdQe682YpeQ==","signatures":[{"sig":"MEYCIQDiL9VC2bAldG/EefBqCwo1dFwJcmM8nMjPOItuBAr8UwIhALiQt0IUgMmycNQAXxcFnadIz4L5NtVj6oET+3D57yRZ","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":473626,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgEbHaCRA9TVsSAnZWagAA3nsP/3ByMQM4AD6Xi8BdROjU\nO9u7DgmQITmvdI7a5Vth8cPV6aZ0a8m1emjM2qSwgcln3dc66GdmJhxdHUX2\n6fNrh4IMncjrZao65pzx1L+yHMA6CXPJXUi77LmoIaR7G4K6DdO+7RHjWPB4\n/04Ajm8x8LpHTzZBdYDXDb83dBqxRw/Ya6VEJFeYUWsjPo1tw+QhJRiFPkWl\n6qqYIjOLufb3NMrctd/Azb8W6dwQJcb+UATnLKNGag0rpn3n0yktksIuV18s\nHr6XW6bHOXCB31+9c7GMo7e7jIKF3KmKd22WtVrxnxmMu3N4lS27tH0bhUR9\nhKPG+GVw+6tFEGpGebHSSnpp8iS2PnLnlXihn8JsD7aU4JQsRm8d73KEGoA9\nHPmoqSlwpuWrrFEsmN56XKD9b005JCk8iP7Uc+gr53mbRDx7n8pJuFCrecIQ\nD5B1+ArMbfxnXN4JzHn6AJ8r3kJ3pyr8khDBgFWvABopVJOX/NOJxH+TqAmQ\nOBEw1tlTMz825UUkiaPmBkeajgD59wdEWGCGgGwpuLaOOM/5EIRhsBODH8Wy\nqZpYUrDZwyvFGiNBkvXOs9KgUsfnAFfzwh/HbxQALJyEzFM72gCxktW3o6sP\nmz9mEGHuZG/DMbm7vpC5Zyin4aAaI5irYPPV4Yl6HUNv+mLYC3PsrUSMtWLe\n2Zin\r\n=eWIw\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.**\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n**Note: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.**\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n\n**Note: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommended to\n always include it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color)` | Sets the container fill color to the given color for an enabled button.\n`disabled-container-fill-color($color)` | Sets the container fill color to the given color for a disabled button.\n`icon-color($color)` | Sets the icon color to the given color for an enabled button.\n`disabled-icon-color($color)` | Sets the icon color to the given color for a disabled button.\n`ink-color($color)` | Sets the ink color to the given color for an enabled button, and sets the icon color to the given color unless `icon-color` is also used.\n`disabled-ink-color($color)` | Sets the ink color to the given color for a disabled button, and sets the icon color to the given color unless `icon-color` is also used.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color)` | Sets the outline color to the given color for an enabled button.\n`disabled-outline-color($color)` | Sets the outline color to the given color for a disabled button.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web 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/density":"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/button_10.0.0-canary.3c117cdcc.0_1611772377671_0.0848405378955579","host":"s3://npm-registry-packages"}},"10.0.0-canary.b411e7033.0":{"name":"@material/button","version":"10.0.0-canary.b411e7033.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"44563171c07ec9e0f7b25f9d8ef852c000e7530d","tarball":"https://registry.npmjs.org/@material/button/-/button-10.0.0-canary.b411e7033.0.tgz","fileCount":39,"integrity":"sha512-Mcp6ii8IJK1MVr27BS+jEGo0FvxJHD892JH89et/mB9yIzzUIA+gF3YBij5CM8HrBHKg2eush1Lf0RUWv6Glyg==","signatures":[{"sig":"MEQCIDvTjjVdEWwfst9z2YLgJwgqtfa1kICTfsjNq6c6IgFxAiBPNR9dMce+51913+wXsOm3c0P+epgG8gJvLW1brkeO2A==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":473626,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgEeNbCRA9TVsSAnZWagAAUWcP/jmDi2qshCyf7BFa4e9R\nh6VBW1wQ3SQlSwTovJyqumxEdxILLmmworaDxz2nc3JSroJT25oHD+mbNKBj\nRcGTcHflPmMTr/EDWJjyTqWPuz72veF/sIreBZkvG2kVvPl6zjdSVCvUk49i\nvvUyj9ObnQtpCtAFE5wI8PojcDlznlc3o3gRRIonwHqxpItVI/Jkct/gedXf\nlRT9EVmJQNfh+KReiU7z1BIpd3mFEigu4+oEDEI/kd8KhohyRAwr3LnufUsv\nWEpr7SYJyZ+BH9irx0v2oJOcqFKLfHoCX8M0vi0PJxCa/6WPPnSr06xq6QSq\nMuAQRj66dZuaVkxjaH4kj4slRy03nOKml5iVj8ZN0W6C+MoEupG2xo1Z2gCM\nQvb+jHmZF5K591687U7DP5sFpDCLoX7rP+Ga89MdNSXzu/49n614UZ4AMxKp\n1zqn8BFZByxOXqTNwQc5S7TthSYhkAVIpcRkR0A7JxHN6byH99qiHzgEqxNF\nLhqayAdJfTU0Bs33WPHrKKRdXCjvdOKFDJGuJvxMY3EaBlPN3fXsnDTGhmJ2\nv4RQtcnWH16SxtznbojEpQ70DQ29AdwmxjtdCXsyrzs1Wb5dPLybRjN1R2fb\n0M4cPVuA5/sSlEF2LpzNwpsWRTfFgXQ2UlcuRDV2YxOW0+2IAVpM13Dy+uBm\njKJO\r\n=O6mI\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.**\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n**Note: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.**\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n\n**Note: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommended to\n always include it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color)` | Sets the container fill color to the given color for an enabled button.\n`disabled-container-fill-color($color)` | Sets the container fill color to the given color for a disabled button.\n`icon-color($color)` | Sets the icon color to the given color for an enabled button.\n`disabled-icon-color($color)` | Sets the icon color to the given color for a disabled button.\n`ink-color($color)` | Sets the ink color to the given color for an enabled button, and sets the icon color to the given color unless `icon-color` is also used.\n`disabled-ink-color($color)` | Sets the ink color to the given color for a disabled button, and sets the icon color to the given color unless `icon-color` is also used.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color)` | Sets the outline color to the given color for an enabled button.\n`disabled-outline-color($color)` | Sets the outline color to the given color for a disabled button.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web 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/density":"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/button_10.0.0-canary.b411e7033.0_1611785050983_0.7200168346751747","host":"s3://npm-registry-packages"}},"10.0.0-canary.a9ac16b4a.0":{"name":"@material/button","version":"10.0.0-canary.a9ac16b4a.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"b384c08429ab873f6f0a746f7d67f586503dcadf","tarball":"https://registry.npmjs.org/@material/button/-/button-10.0.0-canary.a9ac16b4a.0.tgz","fileCount":40,"integrity":"sha512-5aGvIMG/csRcPbhJgJ4VbGh5pj8tVc/gvVq5tFGamftLI4jacwsCPwh6JzAMD4BzheFzoaSK4aeuupFvUOasqg==","signatures":[{"sig":"MEYCIQCeRR78fc4sy1mpKsujDnydShn5m4/1qxQCP/rqpw09zwIhAM/abytOUlUOazsMpZ3ETF8y30IzoGCvQ6wXw2/0MQwc","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":474660,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgEfFkCRA9TVsSAnZWagAA3bYP/jBNHTGN7S6k66uAds8h\nnajBuF6T3SXKNWadwRp3SrzILYrt5wXtQpzPfW8Ji7DDqTRhNbf/wNXre2Fv\nbDOTOc6aNnY3DpccG/5yOAQfoZMkhpCUr8WM57v0HyBctZkI368TDvuUzTBq\nyRl8YRdmFHI+iS2n0tCjE2kgHiSRr+T8NNYWlgPP0lno8tiOrVx6kjeZUZdA\nxoBH1iTuhzGHFTKvnJklJ9ESITmjRVfdw6HcCjEEyO/qq8/hh00ytkZ0BQY1\nGwowB/66TbicJ4O0AzDnaJatJZ8FHEvytHlMI+cK+93iCsB647k4/wXgIHMf\n+ZeRf3EJvzW5oRjnRsRxK/0YLrZ2rgJVx1BUA8cOx9ir/vgVVgOFlBO3bz9M\nH0P5YRCYTXEKn+Jn6+Py7Y//oMWi/O+Qmy0aRLv8h4rJ2w+lHQJ9stE6F5K4\neDqZ/Be6bF8mr8ASxIsZmESlir2OO5o2E8Z9TtD5Y3AumgR26NwfmjdXT4sN\nSpMet/RwE6CItz6KsdAZ4SsIBNBgTMphUK7GoTvsVxZ/RoylBRdqc9NbjmfM\n5arVG8EZE6sdvABR19El3p0tNUA0RPMMBMw6i434riSZ/lID+n3ffluezXuD\nRigy/z2STmAf4qLbWOCHyKRza56W/K36vhJnwtzBfEsKHOm/ZZ6IgInHmj1P\n7T0X\r\n=GZe3\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.**\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n**Note: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.**\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n\n**Note: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommended to\n always include it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color)` | Sets the container fill color to the given color for an enabled button.\n`disabled-container-fill-color($color)` | Sets the container fill color to the given color for a disabled button.\n`icon-color($color)` | Sets the icon color to the given color for an enabled button.\n`disabled-icon-color($color)` | Sets the icon color to the given color for a disabled button.\n`ink-color($color)` | Sets the ink color to the given color for an enabled button, and sets the icon color to the given color unless `icon-color` is also used.\n`disabled-ink-color($color)` | Sets the ink color to the given color for a disabled button, and sets the icon color to the given color unless `icon-color` is also used.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color)` | Sets the outline color to the given color for an enabled button.\n`disabled-outline-color($color)` | Sets the outline color to the given color for a disabled button.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web 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/density":"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/button_10.0.0-canary.a9ac16b4a.0_1611788644268_0.857257003081366","host":"s3://npm-registry-packages"}},"10.0.0-canary.fec7b42ca.0":{"name":"@material/button","version":"10.0.0-canary.fec7b42ca.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"8afc764be878436ed1925641ed136a91cce265d0","tarball":"https://registry.npmjs.org/@material/button/-/button-10.0.0-canary.fec7b42ca.0.tgz","fileCount":40,"integrity":"sha512-l9BthIRuLikRNcGgq1gyGYP/0b7iuKqykobG4pm4GOi2oWdAvMeRnbTnx9pS3IkZKifT9AYth5W8OMPfKw3krQ==","signatures":[{"sig":"MEQCIDsFYKDSLbdmL7CA/ECcCAKhiXvE6RhswLcTTK6zlWRLAiAeo5HEkJkVcye9kDNJFU13TRI3bHpFcBYa5cbzZPAZ6A==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":474660,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgEw1BCRA9TVsSAnZWagAA2mEP/iCpN+MVA9/U5C4w6C1q\nV6HBcrrDoh4zAdBH3A5luoBzkpi/kbWVmR+Gh+h90+F4HIiu4ABLRw62C9zZ\nuhzq08uAPWhRD/1HXZl3nnJmiIs2MZimHO3zPjQ1TT7adad144NxUfoKx1Oe\n7DPv5RVjnU5nZrgkSoSIlWi15sO8cQANe5UDr6K5F/YLPtD55Rew0nFcSVZ6\nyvPG2opRvEsVHkHymVXHTI+W9HD+Usr0XTRpi6TaNsJGQn6TQS+o1b50lqx2\n+sii4WMAY2K81GMmoqE7EzhaYXHMCv3tPMU6Q3dSBP2WFsb6gh89V04IrVn2\nU5fHReKSV4dCDRUE6SlUCrwgegKSVie33WVJCESE86Fd4IRhtp4KKxRvUpFW\nEKmL6lWG6GuQic/Ib5ZMTJ+bGQHhovvSE8JRMwjBiwPYVdEQslUjXxoHZTSJ\nMG6IEKz7Q4Kgnw/KauufeKuLq+P3TK0MesNULvIU+QmroqKDMmFkLjw5SMLn\nWMcvt5AZ5yfQ32gIFC7Cn55rsxB1ZFDTyq5Bo2rNeCfEoxP7JfG38UkhXMlO\n4OHmL81kilC72K3dEYpqjKQXyjGqzxSDnk+ftYlTzokYGiOKJwsuYsiiWEWt\nxYIXqj7geyhvtQ+JFy/xw/QfLaPXAa7HiJZqzWlycGx7SnNcp9QE3ahoLD8J\nvfNk\r\n=j59R\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.**\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n**Note: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.**\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n\n**Note: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommended to\n always include it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color)` | Sets the container fill color to the given color for an enabled button.\n`disabled-container-fill-color($color)` | Sets the container fill color to the given color for a disabled button.\n`icon-color($color)` | Sets the icon color to the given color for an enabled button.\n`disabled-icon-color($color)` | Sets the icon color to the given color for a disabled button.\n`ink-color($color)` | Sets the ink color to the given color for an enabled button, and sets the icon color to the given color unless `icon-color` is also used.\n`disabled-ink-color($color)` | Sets the ink color to the given color for a disabled button, and sets the icon color to the given color unless `icon-color` is also used.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color)` | Sets the outline color to the given color for an enabled button.\n`disabled-outline-color($color)` | Sets the outline color to the given color for a disabled button.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v10.23.1+x64 (linux)","description":"The Material Components for the web 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/density":"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/button_10.0.0-canary.fec7b42ca.0_1611861312951_0.010082876783869876","host":"s3://npm-registry-packages"}},"10.0.0-canary.8e66dbfee.0":{"name":"@material/button","version":"10.0.0-canary.8e66dbfee.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"af1a152c351a51a35a63cc10debd2cb1e3d3b78c","tarball":"https://registry.npmjs.org/@material/button/-/button-10.0.0-canary.8e66dbfee.0.tgz","fileCount":40,"integrity":"sha512-xZGkadW4/Y3dMWBsIE1CpOpBad4fb7VSryB1mJTFw47OlNNXB79X0elBaqW9jf71kEEVUzr7RFFNoVJBE+Xezg==","signatures":[{"sig":"MEQCIFCR7PW1Ax9hlDCx1w6G9byQdAUVOqfkVt4/ixdX5/JtAiAnLH6KV/255Mi+qFAq3znv3CyfY7E+tL9NDB4UJ/ksTw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":474660,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgGIzcCRA9TVsSAnZWagAAoTUP/2+MIwL4hKvvOlhe/bwS\nwmQCKt7ZoIMbPeQEQanDLE978nurpoLFDx8MrcAfn4NVaYp7oMjRZE3B8Mua\niQpUvzWaRTQ3NZRMRfjoeAn6issOGefhBghGVe+hkK8F6y13IopH5y2w5fXt\nzlZZNNgMZ+J4qmn6aDbhbUbouOG/4MF6f0phvPIIvzfb+ACzEZlJ+OoLXUcG\nCUTAGb5LOTM4M/Bma8ozo9DnR8w3OAi22v9BMexepahST2gCidFDhRe17S64\nl9+F9zoLIqwfClBgDCvT2QHIqHooq+PhxSkr0Nmt/X9uB9gCu2M9faJFzUNS\ns556VxQx69SXvi+JWxJcKcIWlMa6xdT+f6yPbF39428rHYY+HfRzOQdqe0xD\n7LYxc5Em7pGxLfghmNzAsuNsreQfd+qRnMbvZL6BcZhI1ABGIW5J+uqbY+9j\nu+zpR64vmig1/xOfjEL3OfdTcHOURRvzxl7OfbRiqRc0gkIzVOCxrwZvhrnM\nAuxf7wX2Vaj39oCnmKA/+V1xnbtPlNlGCvB6ZYnNkEMvfyh+9Hc6ICw9tXr6\nZQwPwv2NW8siFBWwpbkyEqMNM0Z8awD4GcSeK0/mIJy65m1TnyY2OhfAjDfM\n5w4Ee4ClRXtEYxDmtXMQM8kWO4lOALTfCzK/u5b4Y96VebDtWdK36hocKIPI\njVWt\r\n=cI7C\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.**\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n**Note: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.**\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n\n**Note: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommended to\n always include it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color)` | Sets the container fill color to the given color for an enabled button.\n`disabled-container-fill-color($color)` | Sets the container fill color to the given color for a disabled button.\n`icon-color($color)` | Sets the icon color to the given color for an enabled button.\n`disabled-icon-color($color)` | Sets the icon color to the given color for a disabled button.\n`ink-color($color)` | Sets the ink color to the given color for an enabled button, and sets the icon color to the given color unless `icon-color` is also used.\n`disabled-ink-color($color)` | Sets the ink color to the given color for a disabled button, and sets the icon color to the given color unless `icon-color` is also used.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color)` | Sets the outline color to the given color for an enabled button.\n`disabled-outline-color($color)` | Sets the outline color to the given color for a disabled button.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v10.23.1+x64 (linux)","description":"The Material Components for the web 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/density":"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/button_10.0.0-canary.8e66dbfee.0_1612221660064_0.33945882763421764","host":"s3://npm-registry-packages"}},"10.0.0-canary.637d15da6.0":{"name":"@material/button","version":"10.0.0-canary.637d15da6.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"a7cd84385cbc33f8fec756d05ddc1cce49b4b642","tarball":"https://registry.npmjs.org/@material/button/-/button-10.0.0-canary.637d15da6.0.tgz","fileCount":40,"integrity":"sha512-ODVWi1yoFMpMK2XVP49jXItPcrO/1do7DtF2Ywj6w/sO8t1Xd0yvUntp3i+UY/sW4IYdLeMhFb+l4ISE7scEKQ==","signatures":[{"sig":"MEUCICEaa+Mtq9FQdPz+vZCq10yMUOBvoRwWQTFQ/OtIZjHzAiEAoe+9zl3jepBjD+wIFCSpg/F0SnuKpNL9PbqWnVZ2qbc=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":484818,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgGZ7OCRA9TVsSAnZWagAAsOUP/i6vsqc03ZhKy+RdYHF3\nyGS4O01XPmfjTJiFEnqRw+a4j26iKF9CQ/dxKMZuxOUzWr0rrK46AMQUrrar\nayl3dHnZ6ik1ao+cMIKfHIcoCEkyPUS/ZC7BHr7LtOqz7Qk6MRqjaL1GLM6t\n+v57cule9uhg/YlKaxEgUnWauayIWqr2gF3gQJr7nJdLyTXhav2JG0tGWUwA\n6luORcJ5eyzpYzySHALvfGyrQBySDVghhbodHJXIxPlKs5DXefciL12A+r/w\nZ8o0nVuWcy0/A+sQRplh/JCPjmku+T0GSCWD3U8zc2U/7ib5a9OfDStgO3Zr\n622Ex7fFi3g9petXNxwlNnxmIvL2EbPDqsk1Kuh19ZwargwOJ9qZ8lKg++Bx\nGQlGP6g/fuzrpMW5Gw8S2zp7U6hSHdIvFBB5oudj7EBkzAUfOH0VKjRkOKsw\ncfqHZ0TqZrWc0iK69B//8Zb0xhY7J7w7jNuF6hsuf25o19k5KKCvdtNhEpE5\nv3w+hqyhTNvmm02HRVX7aiS9/lsEZqKPR3jO92Bvo1wIZLdmbErxAIT7827V\nWiay00cZAUcw+O0MpZ/fzXfAyCa6afYhKG4YEhsl+cmtllxCCJtjZOqjad7G\ntsXqT34tSDPpOxARTFBxOeXzcX2QtwU0vpvcFS9lBUoIy1Zb6b/y+eidPqLB\nuvPW\r\n=T+79\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.**\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n**Note: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.**\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n\n**Note: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommended to\n always include it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color-or-map)` | If a color is passed, sets the default container fill color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`icon-color($color-or-map)` | If a color is passed, sets the default icon color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`ink-color($color-or-map)` | If a color is passed, sets the default ink color to the given color, and sets the icon color to the given color unless `icon-color` is also used. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color-or-map)` | If a color is passed, sets the default outline color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v10.23.1+x64 (linux)","description":"The Material Components for the web 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/density":"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/button_10.0.0-canary.637d15da6.0_1612291790051_0.4372943956863786","host":"s3://npm-registry-packages"}},"10.0.0-canary.fb793939e.0":{"name":"@material/button","version":"10.0.0-canary.fb793939e.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"ce174e3c9ae81836ebe9b38cdacaba89e8808d12","tarball":"https://registry.npmjs.org/@material/button/-/button-10.0.0-canary.fb793939e.0.tgz","fileCount":40,"integrity":"sha512-CpLUaBXJH5OcoL5kETF4KX43l0tFcAlbxcaZwi0ou+BYR8n/GdrNhaIQAt5W7eYywFLaf3sIsPuKcS1HruOkLw==","signatures":[{"sig":"MEQCIB5F+EsqxAkZs6oaSCnFrwj47Vztsh9x053n67cozydkAiBZGH6kUVw5POCvpjW+FLmd5TbbquyYUAHebK8zEWNrqg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":484818,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgGeOmCRA9TVsSAnZWagAAq84QAIRDvRvVOG3ElhNgzJOc\nrkrsiCro2v7zvQrBhELrm45NZaHHseVaaVES7wKL4EkevHbifecl9WHiP/bn\nOISl2VrkrL2Sj759LE7DCzfHzv94fyou/ht3sso8gERIUp8c5mzWX4rECXqt\nSMcapVUOVcyT/ZvLHTeVmmHJuh0CJ9Sa5DU2yKw5AVKoA/cezTD1vRPlsQLl\nJ5fycxY4HC0qlb4ewhILcEywQOe6EQrImhS+6KZEoIrzK6j/+HlUyT1UUWgv\n64T3vqnan0tjyE4vvqs0M1vi8aTkBrlB5KTUFVe9m4sjqWtBI4yf4/eC2ejQ\nI2DNv8BMCn3kWMfBsu3NYgejFjiBG96CbYiBfMYXBcjGYQsD9trMFIKqEPI/\n1QFqbXnCGODaxjjOtrLIXt1i988X3pitA3RuZRajFFchnOh2Fs+TXo8KYS6t\nR6xXHj5rAgt0kdg725SCWB2lYUpB+KdDUVHxYBow3FhQes4Ytz4lLbYEPVfW\nTi2fx/bS65MZpOZL4bcorxhAWjfWnG9rEmJ6MYIc6q7dm6/G85YawFi1y4CT\n+a2ysKkqikRO/v8N6oKZTK5rN8uPJF5/VJVTzMbrczo+Je6+OxydoH1uWQZh\n6fb6MxhxitshBTSwAFH91IRqndC2CQ9bsFrYRUzX6ri383Ia5K+pvhZlHya7\nWFMl\r\n=Jrlc\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.**\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n**Note: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.**\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n\n**Note: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommended to\n always include it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color-or-map)` | If a color is passed, sets the default container fill color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`icon-color($color-or-map)` | If a color is passed, sets the default icon color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`ink-color($color-or-map)` | If a color is passed, sets the default ink color to the given color, and sets the icon color to the given color unless `icon-color` is also used. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color-or-map)` | If a color is passed, sets the default outline color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v10.23.1+x64 (linux)","description":"The Material Components for the web 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/density":"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/button_10.0.0-canary.fb793939e.0_1612309414276_0.7936637202250583","host":"s3://npm-registry-packages"}},"10.0.0-canary.15a4d40dd.0":{"name":"@material/button","version":"10.0.0-canary.15a4d40dd.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"bd86775e38e099548e845550e83a4b8528034a56","tarball":"https://registry.npmjs.org/@material/button/-/button-10.0.0-canary.15a4d40dd.0.tgz","fileCount":40,"integrity":"sha512-ZuWIFJv9/SMZETlqO2jRzJw12Ihz/JR294lkTEVOr0JqvjzAX7r51Mf5kCjZcOtFclXUjvujMJe8phuYIJBI+g==","signatures":[{"sig":"MEUCIFaoVylebmK/2WCsy2VAGVkblKkofjwVBC7hVPDqCp1BAiEA1pUSCKuX/hUfvYNHm5MCHsKP98xn8weCWHl6gFXDWYk=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":484818,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgGggXCRA9TVsSAnZWagAA60YQAIVoFGsc6ZAhegjwLc59\n/I0wBpzBO9AONXHeydKMxB2BUIHXk4AhOYC5TBzsGSOo4bP78nyjHKlxANaW\n5XTA+gF4zttXsfAdc/t4GNnl06BBx6Ih9FnJVr9DFasyf9zeomDKZp1T2j/Q\nFjO5yggTTGwae25b1GX4jdU62OdC6bF8Q8fOOwqg9ZacbBMoUX2Ir8z5lA+H\nNjFBNnW7hnIZxKg1XXwGN2b6T+vQORrie0i+flfgAqIA5jvrTDDl2Z+J1sgf\npQ556umlxMcvmKX6zvkzyQXTWQGq70zZT4XmwV1T/xl3cCidAuNZrwDjO4ql\nQ28R53MCgMHH7aZg+uzq+7IOLlHBKLjexgxGToBbx0XnNvK/iHOjSTt7U9KZ\nsqFYlq2sPGz5HXy+yWicQgRRLz6So5HUMxTzbrxvZ6ItxQTwt3a65+azipED\nHw5Vmaz/X3H2tru2QL2SOJpywTZAfGCB9rMnmy72fv0mpIO3evtkGqK/3uUf\n0lb4LG3a6sCj951/q2K136t5WuOFKJo1UrRrMCNg88UHknQ6vJFkQCs40ecR\nTdbAYU1LK+r9VKrNHoLvGJlJIN+B/7BxEXgaSa8fFd8vGPui70FMLGU1NCXW\nQBp4dFyCZkEALQf9QKduEO2lxF4tNe5PD7kqvTduAOPKVGEabcr+Zb7vyDWk\nlDfy\r\n=07Gk\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.**\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n**Note: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.**\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n\n**Note: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommended to\n always include it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color-or-map)` | If a color is passed, sets the default container fill color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`icon-color($color-or-map)` | If a color is passed, sets the default icon color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`ink-color($color-or-map)` | If a color is passed, sets the default ink color to the given color, and sets the icon color to the given color unless `icon-color` is also used. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color-or-map)` | If a color is passed, sets the default outline color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v10.23.1+x64 (linux)","description":"The Material Components for the web 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/density":"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/button_10.0.0-canary.15a4d40dd.0_1612318743006_0.6122025871719923","host":"s3://npm-registry-packages"}},"10.0.0-canary.7a003acf0.0":{"name":"@material/button","version":"10.0.0-canary.7a003acf0.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"2c50426e6fb75da979e118136028b21b03cc4ad2","tarball":"https://registry.npmjs.org/@material/button/-/button-10.0.0-canary.7a003acf0.0.tgz","fileCount":40,"integrity":"sha512-6wkYQxcOBl9H4VV0uISSn6uNhh7eT3um01HTOrGVB1wNJrYPHkJWRxBcY0RrCclEVmSr6yxUH+Xb0CiQMTADJA==","signatures":[{"sig":"MEUCIFDD0AmtrMpYRDhtJHLlJbv800icwMf1HkVNzRzWzJb5AiEAtM0qMb6beJHTOSmQDycxJz7O5SP0jHCdhciZQjXvxMg=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":484818,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgG104CRA9TVsSAnZWagAAE0QP/1lb7gjIWATi+s3cH7gi\nWunqTS2KYLq5PC5MaVhHgX1h3sabvpvfakGlVKZULHVY9RzBn7X0NOdu3pyU\nV6Zm2FZrwt7SzhznVEOWUtWGuKRqRzMABfuc5GakjtGltJmi8cETr8TKwSBR\nv+6gtLDIrjnIFUMkii1jHvlERoCK1PB9SGppTd1AcT5koSv3ziiK8bMcBOwm\nW5cEZ/JGA6ekoA3BislcUOpvmMDmEJ6Gr2B43vd1iBXE710V4X4XhDfLDWFo\ncPx+qA4oVkq/5C55j4nM+RuUu7ZvETHQUmyFFVoI5NrzprzPs4ltLK2nlJMv\nXvI4z6A25YVkvkVj3k8Q6uY7pL9jMZgntPR3L6lTtZTM/Dg1RS/KPg5l4vNr\nyWaDcPwcZdbNV54CMihDT5ZLlzEOUcfpLus3TqVG02n+NmcgGTQOVg2OxJxX\nNKAHlatSwVxRhBef0vdiN1Vanp9Xm1BFH9VMpBJ/asBA877MnyMAqLqBw2sc\n0yIs1dpB5ECqsUZFNNr+R3C3NJk45v0cgElxaipHCdULctNZhkno3loZuvoW\nVBJlGahgleRKJWuzNKWrT+PFIjZ8MIbhAwHHLA2rXY9rQRbj1SBQZl7d/qcV\ntNZsiEGDC6HqECBNmLRog8LxMPLF+PF8t5ptRfrSsI7wIf8T0zd6sudOFP/t\n8ylO\r\n=M9eg\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.**\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n**Note: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.**\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n\n**Note: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommended to\n always include it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color-or-map)` | If a color is passed, sets the default container fill color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`icon-color($color-or-map)` | If a color is passed, sets the default icon color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`ink-color($color-or-map)` | If a color is passed, sets the default ink color to the given color, and sets the icon color to the given color unless `icon-color` is also used. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color-or-map)` | If a color is passed, sets the default outline color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v10.23.1+x64 (linux)","description":"The Material Components for the web 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/density":"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/button_10.0.0-canary.7a003acf0.0_1612406071968_0.22219937357135722","host":"s3://npm-registry-packages"}},"10.0.0-canary.05f249666.0":{"name":"@material/button","version":"10.0.0-canary.05f249666.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"582586e5e4e41cdb4c72e5c3ea6064cc885d9fcd","tarball":"https://registry.npmjs.org/@material/button/-/button-10.0.0-canary.05f249666.0.tgz","fileCount":40,"integrity":"sha512-7motGT/nnncM1No4RU0rTMHeh8qLby1PJrDfd78Xsuu1sxSG2R3Nv3cXNpuTXVhUDmNdrgg1JEsT2nGa1MdQCA==","signatures":[{"sig":"MEQCIBZyG/nn7quQ4mVjVTEepYbwV2NjnmEPd2rPVU6danKOAiBQwyadCdqCGoYXgUMq9jzVni/jqG2nw1bEF8FpOO7tuA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":488714,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgHDP3CRA9TVsSAnZWagAAnt0P/A3MQb5NAQwdfdWdJg4r\n8U53rMLWmlCJ9fo6X38y9HNmTD4WQ0vOT+vudY3HKZQcPff+scsn+/MyezxY\n6fqxe+twi5o6NH2JcJfbqJIIBc3rCxbhtCa6yYUegce88kAO2oWhH3X3R58+\ngIvTodluKP3gQPcfL+g9t6sAy7kTe5B2I9qIrWI05R/z4GFYJ/vj3WiPCswK\nKVggI0b/H4DBTpJNU58wRuQT/BJgnBSZnLyXYTyYMsDycOnmm+Ukh3BNsiIQ\ns64O8ywigMQUAK3RJxOzdqE1gMVrRu31TbRAudeqUxL6zf/XqLKSijSfR3zR\nSivBSC5dCGE8BvV0ksg01mftE7Njgeam/y8u9hlZfqKWU731L9y3mzt7HIbY\nZ9oFCFiIRIKqyDuPB+5TRIb6YZ80f7FYo5GkhkVOnbZg7lsbDWQQ/lsB4XoO\nRcYgRao/5d/VhF94bXpbBH8+BirQT2PA41HZIwdTO0g7Rj1K8Mfjz5uRRUX/\nhCWzYk3dNhuGGn5j4mrPYfbVEebRbDKoCrWv1ve+YVOBXDH0Fkqr3xrqMFm5\n/JLigCOpqoo7oc98Wt5uAdMQgA12bwkAvosuqONnBcZZqF86+c+CSRNm33/M\n1xw7zwzFVLYC0iIFMDjOdGGkgNIyxYDkREGjoO9xqYoOy/XJVJN7pXNx7DMh\nYzzh\r\n=KgWV\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.**\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n**Note: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.**\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n\n**Note: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommended to\n always include it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color-or-map)` | If a color is passed, sets the default container fill color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`icon-color($color-or-map)` | If a color is passed, sets the default icon color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`ink-color($color-or-map)` | If a color is passed, sets the default ink color to the given color, and sets the icon color to the given color unless `icon-color` is also used. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color-or-map)` | If a color is passed, sets the default outline color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v10.23.2+x64 (linux)","description":"The Material Components for the web 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/density":"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/button_10.0.0-canary.05f249666.0_1612461047146_0.640022901595396","host":"s3://npm-registry-packages"}},"10.0.0-canary.1a3a39629.0":{"name":"@material/button","version":"10.0.0-canary.1a3a39629.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"2dba7f8322ced5f9a4df181186e759ee96207b4b","tarball":"https://registry.npmjs.org/@material/button/-/button-10.0.0-canary.1a3a39629.0.tgz","fileCount":40,"integrity":"sha512-xyO6A1zgTjeK0mSFKAplFEy3kurCfUphibRKxPstdN1zoKfZQwPUrnmOIK2jWdLvvf/9KvuBCpTm9NL0MJp4zQ==","signatures":[{"sig":"MEUCIEXzvJg/nqNXeF/3a5iJzAEyYZMG3MvmzjG6HYVLX2PyAiEAwM8qzlFNNEt5e7WOplB0NlTerJBQ3DHS/hWmn0JFt54=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":488714,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgHEBjCRA9TVsSAnZWagAACX0QAJqWwC+rX0P5o96NQlHc\n8hAYkphJEa6qG7YoYK9asXuE0G+ui4LSk8alrUWFptS+V3GNZojm0em1Rm1m\nClQBqI+DBcH7LUR19DyMhbnVo8owh+85M9kQ7wqoQTnZ7pWVo45GJoZD64vm\nQReEInnmWxHYTF3UOxgghfxrDc6UiZyW/5jb5dr3zn4kZXwIW6oyhNAvBAlR\n5e8YBgNi78+lhuFyDF6P6qZjS0qtBa1r0cSywEl9fEyLi9Inpc4kS8mXG1gs\nPbKuuvYW8Ngx3wTAXynzgLdZ6WudSjvUSHSu92lhBHvGdG0bkiVrcXFPC07V\n9aG82AY5AaXBVxpWG2uZkWgUKwiBTUw9DV6uFjf94XHnSfyEbSg6pvouExJx\nz2+jmQtQf+XgtqXqKODJ5OCMHwsAWbmOpEmjEHEkq1BlnPvmR7OIxBWbWG/C\ntXtlayIyi7M5D5OJEuQednYqxnYYhFlwkrf4/4L9FOXmXYBkdhnBpSauPVVQ\nIQtBPpvrY4vFlPWJ05Wfgeq4trzFqYpGQ7y5HsUqzXBELJZjxfRow/siPXor\naQ3z3LLEtnRbJOVdKm4Yxdp8Tb1U98kYKp6h4iJ8kb18Zt2mPy4sEwd+3FLc\nBaVHnt8+C6MLw5Y0r1xjFDy2of03UGyEnwI+mEeNNuEg7rEC7cUYLXLmgLZi\nU+rN\r\n=+Cy3\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.**\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n**Note: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.**\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n\n**Note: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommended to\n always include it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color-or-map)` | If a color is passed, sets the default container fill color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`icon-color($color-or-map)` | If a color is passed, sets the default icon color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`ink-color($color-or-map)` | If a color is passed, sets the default ink color to the given color, and sets the icon color to the given color unless `icon-color` is also used. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color-or-map)` | If a color is passed, sets the default outline color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v10.23.2+x64 (linux)","description":"The Material Components for the web 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/density":"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/button_10.0.0-canary.1a3a39629.0_1612464226854_0.751151686801004","host":"s3://npm-registry-packages"}},"10.0.0-canary.8b1cdb1be.0":{"name":"@material/button","version":"10.0.0-canary.8b1cdb1be.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"13b75183f950feb0d7b9666a806191729f81d003","tarball":"https://registry.npmjs.org/@material/button/-/button-10.0.0-canary.8b1cdb1be.0.tgz","fileCount":40,"integrity":"sha512-KRI/ou63XD9Lnv1yN4yOVDXpqs5s4hF7b2Iot+yTtwG5ryBGzUtqFzlkDx6r7P3V+f7goUFjGEPjF+qK/TKs3w==","signatures":[{"sig":"MEUCIDRe76BSLZx1L0E/H7AQAxxflbzit8zPAINg5F/e1vYYAiEA6Y4ScPs2FIyu7B3q0w32ErpUxp5Tj71s64p/33A/kl4=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":488714,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgHHasCRA9TVsSAnZWagAAPPMP/RzsnIsU1Qs5uhale/SS\nYC6MZcP6IbSqAbRMrknmiyoLvLNycOIei8tsegiBxbwskys/SBkt590UGEfC\n/PGLbncDuLhmcB86PR8l83zjRBoRhxS+thK0WEG96N11M2bCdERestjKE3jJ\nCvh/Q+F1LzZK+6aJTWSYGquz6uizHCWfDM00lxJKjlicMGTA06hMmXBuMz6C\n+LX6b3J1DB5eqzpuVcNcU5ZrJaamjyTUgtxGfez4ScdCITKPzTYl3PvaxoI1\nebrFF4wIi38zUgtOHPXHoqvSGQge7Fs7cEi2ocDKfjIdQoxMvu4YuNTjBMuO\nBHvSSpuSti89PjuEHra308hoWSD8rShAw5dYPY4QYfLM18xCS26hdvFvMxyi\nb73pkBgPJXKx4AL2kZMHoP2xU2t4uscDODy1raRWNB9MFgB3Z2NpusSiygEb\nvYnhyFmDIDGFhD5h6sFp+a+q/AtTP00v4tF2lxfBi+jetGsrMJBsrWzKL4ls\n7mlcII53Q/UF4fbTU+3bKbXQ8zTVbn2Jvk51UJxbPfSF+1xpEInuDDP7uS2D\nJ1PrFav8yBntI9bvUgYDvk/y17JHLybG3BJVatFD4G9Ln/om7p4AwF283sxP\n2XhlqoiJrFcEIqn8CORHSjHzhtHx0BFpdLrXr1yH5qgs5P1ytObh4CIbwn8i\nc81+\r\n=sZDR\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.**\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n**Note: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.**\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n\n**Note: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommended to\n always include it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color-or-map)` | If a color is passed, sets the default container fill color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`icon-color($color-or-map)` | If a color is passed, sets the default icon color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`ink-color($color-or-map)` | If a color is passed, sets the default ink color to the given color, and sets the icon color to the given color unless `icon-color` is also used. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color-or-map)` | If a color is passed, sets the default outline color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v10.23.2+x64 (linux)","description":"The Material Components for the web 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/density":"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/button_10.0.0-canary.8b1cdb1be.0_1612478124316_0.09166183520199733","host":"s3://npm-registry-packages"}},"10.0.0-canary.8271f00f7.0":{"name":"@material/button","version":"10.0.0-canary.8271f00f7.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"de64fef0433ebba672ba36989ba622eec6206369","tarball":"https://registry.npmjs.org/@material/button/-/button-10.0.0-canary.8271f00f7.0.tgz","fileCount":40,"integrity":"sha512-IjFBm4Z187JAZiOIUaOGVnhFR7EpdZQdNzGFvzPJu14tj6TFDcjNcTdLE0kNKwosLzWbuSr+KEy/VFFPkauteA==","signatures":[{"sig":"MEQCIDiB0URQ7OCZO+z3qCSMprN4xi74Q6AWW1PmOFuKaEvgAiA08oMdxXtGOZPp0pVbI4ecsaWVKuP6ohuouoQKDIp7kA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":488714,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgHHy1CRA9TVsSAnZWagAADOwP/2CjwHPMTy9+In0iIt0z\nqa0YMGedGchFpb65sbEC4OzP3I+RMtwwtkJk+SfF32cxPtdTjrW5GoFKkUyP\nShbeYkrT5CFCLXXemicnvghOAcEo3zLZXYWemwsS5I6FGGiRuIYIHWcCuEEy\nTIaoS1SVt21O0ThFCotDoDj+/qI3samSnXj6fbqUduice9OLJz2GKy5z5VX/\nk+GYPSIwUxYzpL/QJ3ir1hf6cLnhm9fZUXkR3ho/+Dv6v/8BDm2CTUSG3jxO\n/hQ3kuoWVYCTrQB1C93W5JfN0UpMxUB47dBfSYLKLAZ8M2ozWa0eFlO+s4Zg\n0/cSG6TL2wftSk/VFVJEwUX5+djT7qLLPrnqhuSubHdx3hGA7++Bwx9rbwA7\nNZJAKyTFyTxBwFGCVc08KN82PwPmVGcoYS+FDuIudrOradA4N6EP9LGTW2m6\n/uCXLFh3ITX0Xakz86l7sMAPgFme3pRtGnR48R7LzSiKMqugoy6KFHEcYTt7\n53ZaLkatXaf5sPIsWC89zw36KXE5xBBBpw+PAA97tlfCDz6ywMc6hMlgOLFV\nsLnOGAZ4Y/Rk9XzdRRcWrvhiYrwkaEaUAoH5Rt3TZ2ZSyNO2oYx4ejXEt4bO\nPKPIXFlasHPodmZ6Ykq7nn8MDQaKLvrIJyGqkgf+k8Rh7MltCMk5WT6v9+sN\nzN0y\r\n=giFD\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.**\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n**Note: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.**\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n\n**Note: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommended to\n always include it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color-or-map)` | If a color is passed, sets the default container fill color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`icon-color($color-or-map)` | If a color is passed, sets the default icon color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`ink-color($color-or-map)` | If a color is passed, sets the default ink color to the given color, and sets the icon color to the given color unless `icon-color` is also used. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color-or-map)` | If a color is passed, sets the default outline color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v10.23.2+x64 (linux)","description":"The Material Components for the web 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/density":"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/button_10.0.0-canary.8271f00f7.0_1612479669171_0.19697517020348987","host":"s3://npm-registry-packages"}},"10.0.0-canary.533092a90.0":{"name":"@material/button","version":"10.0.0-canary.533092a90.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"aba952f454d5a00126d25af65d2cf3cb44d97ff4","tarball":"https://registry.npmjs.org/@material/button/-/button-10.0.0-canary.533092a90.0.tgz","fileCount":40,"integrity":"sha512-DD4+mVIFIZ1CQH9XK1LgcR6AfIufHSiXia6wREj98dvIpjzZCwqzBHQxeY98ii5EFDv0xfKI373AMfse8Y/9rA==","signatures":[{"sig":"MEYCIQDC3faceeQLFjYl9uOxrmFUOxP16iInYuJmqG7h9AJi7QIhAKKPFN/eSAMNcpy95viO5MGF3swG+Ww/QAvzdPyLWyY3","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":490215,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgHL/ECRA9TVsSAnZWagAAmxwP/159WBOM6YVed2Kb8vOU\nYQ6s4qSvnFbUb65e3K1/JxYqOCokd/YgQUUSp71VaFX2ckrEg6UP3HNFnJkS\nNm8P4HjytrHwVw14kGbh+xnX2/RpxNydI5Snl9rhXa2Llf5ycT3F0KJGWfna\nygYav9KsU6mo8IOBw4Nrj1N3Alij95QfMYkvvC4uNGcXDGY+EWsmrtt+wEI9\nkNtVj/RwTXwy2T8HPaDb1XfaUFzY9qszXeIiK1j9+XLyqQ7XmJJdgD2zOd5V\n5jUIE6rDuODQ5aCsCh5YGOYp026fT8JOQarpA4hNB194iSHcjMoq3G/+FHJm\nEy9U+zC/Zztpc/y2oJXnKBv1+gXW2mwHY5hB33iIj1M1WfQyU/u1Aj3BFRrU\neBqb5vEqVtd7EKortWMn/jDtUCx8pkkOtBFsB1fC9W7EqH0pq+cxjIBd+F3d\nPeNhNOXoE5kGT4qHvNg/J8BDjlh3mTYjpzAOtZsZPDxWgMlAe0CEkoIG/RVX\n/HS0d5oE1wIQ+hZTay2akgItdstQWQ8npOERa4jejjFtpfd+QQpI+6weROvD\nNf128YJsW5O2IUap/aSkw9eV2qFQgaKoi5+x3DA5KZFrFDj/fU6E/so+anx/\njha1SPyFrXJUZCXb6/Rz3qIt0uO5GKiZUTlO8VE8C1J28+NQTYwrWfD4+7mZ\ntwe3\r\n=I52t\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.**\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n**Note: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.**\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n\n**Note: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommended to\n always include it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color-or-map)` | If a color is passed, sets the default container fill color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`icon-color($color-or-map)` | If a color is passed, sets the default icon color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`ink-color($color-or-map)` | If a color is passed, sets the default ink color to the given color, and sets the icon color to the given color unless `icon-color` is also used. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color-or-map)` | If a color is passed, sets the default outline color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v10.23.2+x64 (linux)","description":"The Material Components for the web 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/density":"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/button_10.0.0-canary.533092a90.0_1612496836066_0.06857089356004198","host":"s3://npm-registry-packages"}},"11.0.0-canary.633a9fc7a.0":{"name":"@material/button","version":"11.0.0-canary.633a9fc7a.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"811ee15681f5d76510f6a2154041ec45ff0af6c8","tarball":"https://registry.npmjs.org/@material/button/-/button-11.0.0-canary.633a9fc7a.0.tgz","fileCount":40,"integrity":"sha512-TboaTe9a1zq4QYFSm+DNzl6yxamaqcA+BjvPcvUHC/0+nWBNPPksFc0Prr5GQo/Oyo9NunfdwY+RBnfx+AJhzA==","signatures":[{"sig":"MEYCIQDkIRUOkpqvVjNPPrYIUPP4UdjJLc2ovmNKrSwUIQFJ/gIhAINERIoFvItf95JyllG0DSOUdFwxMwE1SA8iMfghd0fr","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":490215,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgHW+6CRA9TVsSAnZWagAAiNEQAJ0RP/zKikT3TJOeqrW9\nxkf4SvIe5mEA5l/jBRpIJthRCHwP7YovJjdhsG8wB/m1lrnC/C3FJFqsmaJ6\n/xipjI02hypVuF8R+BWOFTiiCU9JFxJ+kZGvsQERKLL15hHz2z7euJw6QV2E\ntVwUIZgvLssLB0oBNygliU/Vv7gMcm5hhudKDcvRSEy1p3cjdsZDYnYgDRxx\na9Gvk3Qug30AhPhvL47UPV2qC0fwLrSHFp8JMlZRBQ5omAwHpHaIYCRJ3t9X\nuDVFS6DJ8DrUJROxpF9gteWspqbz+XBt5y4PKTuQNr1NUtOGAcvDqymGcQAQ\njfwfzEI+BbocAgXdkndsq64mhyPJ6z5JAxEb7ohxBQTgnQnPVWVs4NNQUkBP\nX28Mf5p3MjstcAZk3mrVzJiu7Nc3ioaQrjMgpsXC1wE/xP6/8oTMR+EgSwBj\nyw0xAgVtMZDHbMZNtVfc23OJkQkRn7d/rNfM4Fyi6UutSHeZ+/PLQCqTmJVd\nTHJtqlOxjAegtStMCWUIPLnzEnRhENwS7Y3CU9te4p1IKZMYJ6t6SjyFfs3R\nZIBHs1Ty4so8MZiYAtyrOXzxT7oLU7jTDR1NsF4JmVkfbXaNs9UqNNIpx4EY\n2++j02pEukvFGXIKUUs9AqBgbLsvEWaP5T34jIFvQG4rm0nEukorvYLKyAjU\n3p7Z\r\n=M28T\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.**\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n**Note: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.**\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n\n**Note: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommended to\n always include it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color-or-map)` | If a color is passed, sets the default container fill color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`icon-color($color-or-map)` | If a color is passed, sets the default icon color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`ink-color($color-or-map)` | If a color is passed, sets the default ink color to the given color, and sets the icon color to the given color unless `icon-color` is also used. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color-or-map)` | If a color is passed, sets the default outline color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v10.23.2+x64 (linux)","description":"The Material Components for the web 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/density":"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/button_11.0.0-canary.633a9fc7a.0_1612541882130_0.44758062607867344","host":"s3://npm-registry-packages"}},"10.0.0":{"name":"@material/button","version":"10.0.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"0641e4b758e35821dcb88b62e918ca2a2a90bcbf","tarball":"https://registry.npmjs.org/@material/button/-/button-10.0.0.tgz","fileCount":39,"integrity":"sha512-OHIJtlyM+U+MqvPm0N0y9kHf+SFS0I7zE520MulQJywgZhHmU+mz2kwgy+tVxOTceVglQzRZP3KkrwUkf4U0bg==","signatures":[{"sig":"MEUCIGbXDasS3REI2AZSqPbQy2zWzvXWl73XB3mGER2+tkkyAiEAzl5KkqqrD3fx/uWJE9rh5Mloh48icrxxfnRDYFWJw24=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":489134,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgHXATCRA9TVsSAnZWagAAcaYQAJhKHndZobBHRm1U2Cso\nQtF2x+mtCXEfOeuC4BZ8JS1kR/sHL3G4iCq5jcQMQOYWr/XRyllD7cRi4OTd\nES6Rd/KiGSVuT1S2QowmWxJ6/8LY1ozqguGTvk8+tKt4y/swZROlV3uF5lCP\nNhFcV1LIC8hmTEXCRmYLMOg+Q/AEI1Mx7FZD1W8AelyHb2x2JULRM7OQnJm9\nE9knw3+0UYAdUMfTwd+VBjp/gcrTuCFaX5eOska+eWpLDOgm8y9vN3JXOwq9\nOuZmdFzr1AWA2HeOkmylnlptj+iV4e2a8LBcym9VQhXmCqTWmAAATi74TmIf\nmzNLZWIyqKuKwHzEJi+l0tBIhm9iF8uYzirvdXXti5akibiENjznJC3g7pjc\n2PW/T/yW7/P8ma22KBD66VB0hOc4NdT31a3zdkVWbRyhDdMJMhLedO7NutbW\nCIW6w8ZIliwo19QnZWvRDTfPIiMIj6LSTHuFSU42YMYgHO/CDARHf/EQGG3o\nqQwdXvAOnsk7Vqz2VAyjbvrqyZaz1G2O2r7Jr7y0xGqkH/N144dLeYAXzZoA\nyoqd+d3NUG7qV1A0AtlItUtAcWOoVjXYm44pKK/lGNjXhSwSK76xbk14QeQJ\nO4xjkyBojcb6CrZO9t6Q2yalZZw88dW7XRorbEx7VMgvXM8ir+nNrjK/2wkj\n+6AE\r\n=OJJK\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-button"},"_npmVersion":"lerna/3.20.2/node@v10.23.2+x64 (linux)","description":"The Material Components for the web 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/density":"^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/button_10.0.0_1612541970776_0.9044110122388405","host":"s3://npm-registry-packages"}},"11.0.0-canary.b5227247d.0":{"name":"@material/button","version":"11.0.0-canary.b5227247d.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"62ab33343635255947d8be6a862de87d47c5c0ad","tarball":"https://registry.npmjs.org/@material/button/-/button-11.0.0-canary.b5227247d.0.tgz","fileCount":40,"integrity":"sha512-mVFPEGvbjflzUCygsCDxsIeS1uWTPvlx3mmOBJpx/FQ94ROcF1YDnU7CcQ39pBU2JUAHp6PgOgg098IvZhkURA==","signatures":[{"sig":"MEQCIHsimyCQY4iNviRqUvPgSRIMr6PoPa4OiD4njtkGI5I/AiApRU9kRC8obHc2v3RMmhtNzhTj5MPENICh5eQVn4UmsQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":489710,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgHYOLCRA9TVsSAnZWagAANFcP+QFymvnPmB6m67hrHwlP\noJ2LZJrsuxapC2IspIrOAuo4X2aIHtiggFqhyc70V2gA2nJ3GvtUhIykjeWt\n8kbHagj+3v/usTijRTWlBRV7TikewEZXh94GQQtisL+NCvZGy5+NCrrpYMTG\nI4u7fWBZmljKHaAgW+qxCst7qMqdeuf6zumfbSwlNtfx1M9MeveBrj2oF9at\nkqzVnRp8qRLHeyodgmyjwUntClRTaW+zEPV2G2Pa24dMJB3Zf+6G4BflmohU\nqEXVvrWz/EsGR+XmMUGs1EoF4yAMMQQi8zwP3sGOxP/f5/wwyuMbcFDJctfP\nXzy/EyS6FN1XbuQL+Y6rhWhOMHqurSPRcJdv3x+9pqlaLQvBqO1yHAIYO3I4\nxyoz0/IdNZiJZNTwGtJh/ey+2L0bVNSHLGT/RIx7OAKLm32Auq6l62s95Vf1\n/yIszb9B0LjRyJYKnIoN9LzaI/UYMg+D9Ps1w/pVZoio1wXVHMdg//g+LQap\n2Dt2Z9p4RGbPT0dPmwjfNfog0N3OMdumk9Rn9c2FRp6sazouszed5eAkaaa0\nZTShnwRzeUL9qEWG3c0BfmfSZJB312jzB97BHOgMoojZ4lvGI3KI1UGQG4Us\nYuDZV84o1yhUPwLXWLbdrRicj/v2lveUoeT8+VZAAT5ryr/5AWM1x6JPFBc5\nT8zZ\r\n=bsFp\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.**\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n**Note: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.**\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n\n**Note: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommended to\n always include it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color-or-map)` | If a color is passed, sets the default container fill color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`icon-color($color-or-map)` | If a color is passed, sets the default icon color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`ink-color($color-or-map)` | If a color is passed, sets the default ink color to the given color, and sets the icon color to the given color unless `icon-color` is also used. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color-or-map)` | If a color is passed, sets the default outline color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v10.23.2+x64 (linux)","description":"The Material Components for the web 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/density":"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/button_11.0.0-canary.b5227247d.0_1612546954813_0.4898237257518654","host":"s3://npm-registry-packages"}},"11.0.0-canary.95322b11e.0":{"name":"@material/button","version":"11.0.0-canary.95322b11e.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"6bbcbd6b06dc41dcaf8f3ec4b293aee0d42e676e","tarball":"https://registry.npmjs.org/@material/button/-/button-11.0.0-canary.95322b11e.0.tgz","fileCount":40,"integrity":"sha512-5Kx1qxp2bx8oubmfS24nerOLhUkGGZEEj+EKAPd5/q7xlreGTk3Yx4Vc0BUsQPRBfcJtH94ntQywLdyps38s8Q==","signatures":[{"sig":"MEUCIDJ7u23NYCRd42HBWuSJoSsJXxL0F1XdmvO4urp9tNlvAiEAlP8t/Za4hZr3f6jaEibeZNsilN+ZliKQZRkAZTwVM5U=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":489710,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgHdV7CRA9TVsSAnZWagAAVw4P/jLzcvF17yXEWGUyFZn9\nBu6sqf/6lM+MHQSdOZ88B1qPHde/BhufAn0O3XttkiWgWLsid23mbqBNdAKq\nVr+kfzYtY/dlObZTLjQP0SZvJ4DEGfXhvEtZEZ8w3kJYU428LL1TQAlxE35i\nEbBNyivTMFEKbNyORhjFGnQkKSmdtDGmh8wrVHEyslsk4conNQczb//eLYAn\nHPkweW0CjUwDbHbbF7SsDobLj5yKIUFEGGKO8ONUo329NH+Yy17uceTzoy+q\ne0IVtQ1NrigD+m0LWXkg1Qi77/9uMuUtWEIY61t4t+Lxmw92UbpOje1O6V/p\nk8ohXbD0nSG2Ul0l9CQVslcR/rnDb1DPQqkC6uFdjz3u+sHV2fpciSc1xbbQ\nVP2l0Il1LxJLOpk7L9XSOWPO0scMtzLJ2+h58UgXV7dba5N5kH5lMXoWsRZx\ndbCNFTSpRkJDYBVrhWl0zHCVn8ObRJ3kEaqusyqTp+/G93xF6t2klM5YF8tF\nqNpgR9MMqIoz/qNc+SOO32IfABP9AryD3UQkpixtKWKISoWypcvMpw4JlAZx\n964nDGMSja0t9L7OB4ui1j3xSQ93AbQgjCiySdJeeXU4A2ZjuFDYQabT3+el\nhqrJdRmGyI9mPA3NRGU5pEOBXCGISXc2jyQQ+zH09WJooCN+rJi1UAA13VBa\nX85u\r\n=gGpL\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.**\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n**Note: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.**\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n\n**Note: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommended to\n always include it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color-or-map)` | If a color is passed, sets the default container fill color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`icon-color($color-or-map)` | If a color is passed, sets the default icon color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`ink-color($color-or-map)` | If a color is passed, sets the default ink color to the given color, and sets the icon color to the given color unless `icon-color` is also used. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color-or-map)` | If a color is passed, sets the default outline color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v10.23.2+x64 (linux)","description":"The Material Components for the web 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/density":"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/button_11.0.0-canary.95322b11e.0_1612567930631_0.1861774207958169","host":"s3://npm-registry-packages"}},"11.0.0-canary.1f318ff0f.0":{"name":"@material/button","version":"11.0.0-canary.1f318ff0f.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"98c776d4053e6bfcdeec69582d8794e152c16ceb","tarball":"https://registry.npmjs.org/@material/button/-/button-11.0.0-canary.1f318ff0f.0.tgz","fileCount":40,"integrity":"sha512-ClLQShew9FqVS7OwBWw3kK5ZCgwYPwW5bncJlNgN5xi0durSr1C9ni8RgqaDv4UAQcLQxWReYUuXy19CT4Aywg==","signatures":[{"sig":"MEUCIAupfaTi+0ZFbnT1i0MebEiQ2wEteUuxQZHoTwVMeXwoAiEAmaP9bdJwImPysqwNzG3c4cTLnzbbOdMExk12EIjdlrM=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":489710,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgHd1CCRA9TVsSAnZWagAApkIP/iK6xLIfYgxQZTZJ/nIy\nRxyB+c3TH3b3DDjRNFwPxupbiJMiOw+YmpozeQ7xuUTpXV9pzejlg7wc2yLC\no+MIb468mpQN+P3kzwyNHwRtNpPnm+97PIz+MU7V6Yer+KsH9bpsZXKXron0\nFo1Ri7K+HPWp9h3uwW+KH0l0o4crPQPwH/rOpoTjyNuVmW3LyckWfl5maBMN\n3YRvqLuYhFjEvJvHVMNfKR55+PDVGDXdBznblVIJQQclMJLjbXFUxVYKS3mq\njZeDtV3rjb9kSUe7yQxU7YZ/cMnrzFCEg6KX2V6Q+okDs8cmUtaF8mP/c4Sy\netdaFgL1a1RdlkjY9bdDeDZX/Xt830nRN/rp7K6hHXJe5pP0w9OSpxbg4ILu\nn8aCXo8r8XgVl/yr0WbO17WMcILAxIWcIIpiiclt+A6Zrm+3nSlZgp1vnNYT\ngJvXSvs3gARImEtdFN7aBH3bbGYS+QfkI5NuvbfkzON4eDRmcj/ue5zRk/EZ\n3I+T86dPoUNGNpNUp68NUuT0D9iDxWT7GeprSodv/R6h8Lv0WNdv6wwo+i7e\n+UmZVAODmcS5/nBHcr560GgZdQRU6cy0qtocol9+Mso8PItOkd5Qz57/XJnE\no2/keRfD05jEzvLQNUWictmdujMs+ZU0ZhY06O9yx+3R4FO+g6dIpJsdgbhL\n/nRv\r\n=SgXq\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.**\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n**Note: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.**\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n\n**Note: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommended to\n always include it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color-or-map)` | If a color is passed, sets the default container fill color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`icon-color($color-or-map)` | If a color is passed, sets the default icon color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`ink-color($color-or-map)` | If a color is passed, sets the default ink color to the given color, and sets the icon color to the given color unless `icon-color` is also used. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color-or-map)` | If a color is passed, sets the default outline color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v10.23.2+x64 (linux)","description":"The Material Components for the web 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/density":"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/button_11.0.0-canary.1f318ff0f.0_1612569921499_0.4624781195381822","host":"s3://npm-registry-packages"}},"11.0.0-canary.ab12cf7a3.0":{"name":"@material/button","version":"11.0.0-canary.ab12cf7a3.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"bb6b81a9f26e8c25a8d93cc6d964286d41a6ce13","tarball":"https://registry.npmjs.org/@material/button/-/button-11.0.0-canary.ab12cf7a3.0.tgz","fileCount":40,"integrity":"sha512-vqexkSQwgD3XW3WDyFuYnHvh1AKrTp2IFMpA/FbG1Sq4yq12EmD0gFS2AMVswebDEcI9KyinPuaPRqGp5nHaDA==","signatures":[{"sig":"MEQCIEcjvNpqgda6Eh3HfeT1Ze/e/P1R6gCeKM2w9G7WzyWHAiAC33uQtHO5FZYESeApVMXOc+xWIQg11WSGcbagkgUdAQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":489710,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgIVLlCRA9TVsSAnZWagAANDYP/3V4X0fJfF47ELJmXERc\nOlT1AgpzVnsfIOkoojT8RmUS6nC2JTQr3pXYXDzP1h/KkH9aqzFNnqb4xB6G\nEOIidADC8d8a0JjA8BbrJMxW6JqUf9/D0sIrfRHKEDn8ZiDCC2M/olcGpVwj\nYqkpf1i0OMh+6hyiJ+4buKHu8jjZCuDIXEyLx3Uclc4JsflehBowjZHnOK1+\nwGxAvLC9SXPHBzq5+gXoDaOop3N8c/3b1mqdYQY79R6T5WYFQ2zd8sad3BME\nC5kknI9luE+Az3vLlAA81IwcPto8J1pKTIDN0/MMJGEj+WMiDzNFgMx1W16Y\nGxVAdLobdAllcG0/r53S7lhkRF6eRIChhnksWnRDT/6zBJDi7q45V5LwNZ6a\nqMA39t0TTlsfa1uzy3u/MCbdZVCkxHoAWsyKZhpjw7Ta+fjdO/CtcyPWvt9l\nJIEItsZy9VLITeg+FlkIUMl5Gh7c+NJUN8dtODkG5ZPEQf97+3knkjYMAjTk\nwsh4voyx6RwjKopaN4L3/GGvLR5TyfWrxJHgFqqnCoDjOg26dnnSe9M8xw8l\nFA4l8bvqqbwnR8WUsG4GG7Qm0pgCmvyqrxgNhWCHfsUWeR8RP6dA8QiHA6HO\nJUslWcjha4xbKMgyA+AOPqldWo4iKU22m6veg3s8OlSsBnBo32KfsqtQ9ws7\n/524\r\n=FxeS\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.**\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n**Note: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.**\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n\n**Note: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommended to\n always include it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color-or-map)` | If a color is passed, sets the default container fill color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`icon-color($color-or-map)` | If a color is passed, sets the default icon color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`ink-color($color-or-map)` | If a color is passed, sets the default ink color to the given color, and sets the icon color to the given color unless `icon-color` is also used. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color-or-map)` | If a color is passed, sets the default outline color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v10.23.2+x64 (linux)","description":"The Material Components for the web 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/density":"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/button_11.0.0-canary.ab12cf7a3.0_1612796645061_0.30041061386702683","host":"s3://npm-registry-packages"}},"11.0.0-canary.98db2c5ec.0":{"name":"@material/button","version":"11.0.0-canary.98db2c5ec.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"fe36318e74f1fe28e45afe967a76142882303e88","tarball":"https://registry.npmjs.org/@material/button/-/button-11.0.0-canary.98db2c5ec.0.tgz","fileCount":40,"integrity":"sha512-Ji645hD3EFzJuoFNUBgRyiHuL9qwtk9A9D0TY7hcKysO1PoDKkcGtp1YZPB3ATJY6SFEx64OEtH/K2taEa3qiw==","signatures":[{"sig":"MEQCID5D29bCcGpA1WaxJ48VH1QT2NZuPYqV40jTeFuJ/8qVAiB7tToAk/x0bop1dwYg/XCWc2tRGko7WlyusBsVpASeCA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":489710,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgIVotCRA9TVsSAnZWagAAmfkP/2E/AfjhQlfm45PguxK8\nAJt6A1SqWYkl6ZXZ7Qy39xn1vduATRlPwdaRnSoK0dB2xyB5mkjMpl88f/vh\nAzDXmlSBqrZDELqgnFmM88Vhq1X7QFsQz/0CTUATCRNtmbXM8ncVE/bKYhhn\n1u9L3fPtmjzwWeMiH5Go1PoJWLTWy9ShFJL7vrWI8BCm4jvPo8w1McXOUgq9\np0VAbSFZDmoyevHlBwNSdTPN2BcIk+4wpsueTr1ELE7V0DLvpKhiEXOglw1a\na7NejLhbrmCwDQL/ssgAOwgVnnY1V6k7khAQgeE39oabg/3rKYYbTSfJtCNh\nOE++I3qpiIjoIfx18mLMOYHH5ibxvMmgr6so3w7zzono7oA48s8Xg+Yte7a7\nlhX1QjQamRmNLsboYIa6WxLuklzPQdZ1HyXDXS9hCN+rHAhjAz6cUb8um/ug\nxtdJ+giMcAdwDJNPVNi4nleNuIrYZVrsW3I51Tv9WATHGx4LUhHrrc4Zjkq6\nRCbpr42jvYNIvCBySg8lANqWFgOe6/BV4sWIwq4PV0kEJN/yCxBnNZY1GIAT\nrl2701TCvN0VKgbhssWB6+3khDhDX7JyzkvPgrJW10DT5WtKZbu5pOPpyuWz\nTuFhux1mGZx9wAjbdWvn/FEwBXG4Bloo6tBc/VlF6/ZYj9jAzpA+9JUuKvH1\nDxYE\r\n=Qwz7\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.**\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n**Note: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.**\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n\n**Note: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommended to\n always include it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color-or-map)` | If a color is passed, sets the default container fill color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`icon-color($color-or-map)` | If a color is passed, sets the default icon color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`ink-color($color-or-map)` | If a color is passed, sets the default ink color to the given color, and sets the icon color to the given color unless `icon-color` is also used. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color-or-map)` | If a color is passed, sets the default outline color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v10.23.2+x64 (linux)","description":"The Material Components for the web 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/density":"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/button_11.0.0-canary.98db2c5ec.0_1612798508987_0.7786718140504392","host":"s3://npm-registry-packages"}},"11.0.0-canary.1f86b9f6d.0":{"name":"@material/button","version":"11.0.0-canary.1f86b9f6d.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"26b3cbef75c697d6adcaf0f7fc7d8681346c0ab4","tarball":"https://registry.npmjs.org/@material/button/-/button-11.0.0-canary.1f86b9f6d.0.tgz","fileCount":40,"integrity":"sha512-XteOiay+gihmIszQvDXbxvaLeE1VcQp8LpnVZm1KmaK4kO+0gpzYowMfXuErMLHv0bS0YUAO+Isi7KeWdzwZug==","signatures":[{"sig":"MEUCIEfHp3B34TqB4O6tzZ3JS7x8OFh9FEJmLrhVsyJDBSoAAiEA70fPeof207OAeySIwuQysjawbDEgJnsmtt56n2DNLL0=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":489710,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgIXJHCRA9TVsSAnZWagAAsCQP/A7VdS+OCBuOrG8kqfpk\nmI2WYL+TArv202eBFkvEkewZQHmT7RCkV6jitVXHFSsi89OHlZiJtboDavoT\nhuXMZnY0oc2CKB1koyhHMNp5ZSKu/wo4t/dk2hCs/L+p4qSX3Y42xtE51UAb\n2iHjZIGwgoEIfafmmklTwGyMC1R0LOpmI5BDT/eycLQEEk40Lqq/PFXgIuWh\ncS93UWJfsPu538wZ8B529L7pExytRAgE56WZZMtFFMZZSRmOfNmm1GqRRC16\nRa6rYReF5B65WYZl6xKr19iLkkDymEyUFPkNWecVA66gg1xPjgX+cZVsnuPs\nMhF5Lo3OU3PkN0u/2aJWPCjWNa+8e0oFZnr7sDGrgIGn6NwCQSzM3AviEHWf\ndm5gJoW0vfkcjR7YNts3w6d46fZBQ0wfQmqcLpKN7jDxNiFtq2oGtnAb37FJ\nAq+m6H+ItOcvLX556iBgW34VKLuVilLBrExvIpj+2tZK7ks7ytBnZy4YTQLs\nnzQoG2zpAIBBUY0SLC1lfIaNmuj3n6ZxktF4sGmlg7iStYljAn0MduPFXYlq\nZpmkGDH+09XLxQx/rzsY3VJCr1EAAFqViuoSNhUWqp5JB5MXm4//C/EikONm\n1Kyc+oYB1OmyEt5AlE5eRONXIRHidRXJc3m/TF6AiCxGUEOIVqqDspfKxCWT\nkfsW\r\n=hBnn\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.**\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n**Note: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.**\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n\n**Note: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommended to\n always include it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color-or-map)` | If a color is passed, sets the default container fill color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`icon-color($color-or-map)` | If a color is passed, sets the default icon color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`ink-color($color-or-map)` | If a color is passed, sets the default ink color to the given color, and sets the icon color to the given color unless `icon-color` is also used. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color-or-map)` | If a color is passed, sets the default outline color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v10.23.2+x64 (linux)","description":"The Material Components for the web 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/density":"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/button_11.0.0-canary.1f86b9f6d.0_1612804678790_0.32198708705876355","host":"s3://npm-registry-packages"}},"11.0.0-canary.aac8f5d9a.0":{"name":"@material/button","version":"11.0.0-canary.aac8f5d9a.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"f9d804f0da5395c984cc6a4836c98f993b5d73ba","tarball":"https://registry.npmjs.org/@material/button/-/button-11.0.0-canary.aac8f5d9a.0.tgz","fileCount":40,"integrity":"sha512-8BbUFn/J8l251ri6aZwd9NOkKrZ0ZMZDnq0m0v5t+TZCFJ7ri0LS/pC1olVE2X6DJ8i0khcglnv/+LUzgVvTTw==","signatures":[{"sig":"MEQCIClij+kN99TU4RwfiZEymZSGY0Jf5F/X2dSwj+m49x7AAiAbyUSSFcq81lBhVlO1RHBWaxiEj1YVs3NIMIoxcDrpsA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":489710,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgIXxbCRA9TVsSAnZWagAAGdQQAJeKkjkONmNK5E5GtbSH\nzzH6CF+ugmmLpQFZEqBHPDe1VyvMC8PH1A62Mb/rBDDPBhOWycMXA5u3AfP+\n9IyoncZAV9TwNMSYmiVwR2CllF1uIsLiq6y/Scc3u2R4nYpHqZWmxTs/xqBS\n9vvk6ozEhLEGS+llJ8YTFDebZulfhPXPsfMODVdhbwDtRX5Po1u1pd4zjyQu\nMcbJmb/FeVhb9bRgJYIc66qCuV+8lOxaWjzElhR6YT2NrO0dG0UE20uyMiQe\n6lQGNao2BQkxWtFLKY6SbONY6gVjqtPq8a7qj+EgU5xWXGL7urYxhLTTcnFQ\nq8Q+48WdQEKMEkIfyh1iQ4d0KaaAt7mbxuwrEd5K9UiQPqWHDi1Ucjg/SMWn\nZ7+dGdjqTM8/83BtY6N78WSnCUuNSOSmOnVKrjdza4SEG/26APYHSz1f2cki\noB28rq6b7UhscaeTZH5o2QDh76ruSceONckTnr798eS1dD2STfA2icNGyVzo\nuxtT0Nm7LO+aRrt3Ih/FtdPVX3kpeS7IvyaBLqxtXJBidJgMpucfmctlQSXP\nG+Jo5mdCKMUkL7wBwBhkIkpBjmVHmpDak//ZjVilZrF1pvXh/6zfDvYsngeL\nUXTZeJlxkzNe1aD4VBKI0cUIWhojr0eTxYJa2OSQed6DJ3vvCN+EC9Cktnn8\nN4YA\r\n=X/R8\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.**\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n**Note: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.**\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n\n**Note: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommended to\n always include it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color-or-map)` | If a color is passed, sets the default container fill color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`icon-color($color-or-map)` | If a color is passed, sets the default icon color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`ink-color($color-or-map)` | If a color is passed, sets the default ink color to the given color, and sets the icon color to the given color unless `icon-color` is also used. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color-or-map)` | If a color is passed, sets the default outline color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v10.23.2+x64 (linux)","description":"The Material Components for the web 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/density":"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/button_11.0.0-canary.aac8f5d9a.0_1612807259109_0.9730474284389286","host":"s3://npm-registry-packages"}},"11.0.0-canary.750e18fc7.0":{"name":"@material/button","version":"11.0.0-canary.750e18fc7.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"3a5792d0763e35297cbe3fb8223c176f780ff73a","tarball":"https://registry.npmjs.org/@material/button/-/button-11.0.0-canary.750e18fc7.0.tgz","fileCount":40,"integrity":"sha512-gCR7Ucw4aeb92dr3AeyRNBMhMMbp0yen+YZj3Du/dtH9E5tHDXKbPvdUq8Y3kI31zJlDTH6AIukFDAbUg8ok3A==","signatures":[{"sig":"MEYCIQDiEutmdT2OFB+B0g/f0ByzD+Fcp0sqGob1asU76LUy5wIhAIFZiyrO0r/y4L7a0xSc9IR0tR47Os1uQGCuTsgNRl02","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":489710,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgIbAgCRA9TVsSAnZWagAA1YgQAKN78OjMs84utse3EODX\nhbfYyHwR5VlPiq0SwPpNuCSEwfNV1BTWMq1O7s6P63xD/3RsATMUNDuuJU8Q\neRAG85cIJPe5NWkTzzcyzPb6Ri2X7pdpjWQpIk6r23wPJN6Nxaq5KnwOQ6rh\nByUvGQUENo6e2gkjL/FUl6/P0vP/rkOMrKMlVCye9epenXKn5a7Sefyv6EE1\n2RrHYkox2GTbyKFxfl0vn+J0assSjuSfSdXKY+CQrKi3uAa9lraVvcmrYT6o\nuwpfQrMjbbP3iHuDb6dOpvIPx3+NHYBVoubzo0djS2two11REPoQFg0iSkIU\nL0p2JcFL90Nm9Z5aZLrqr6rOZb/lDLle8voeNIdcNsHjlWFokLvvV/6Jv6Ue\nUQb3VUpf6VwbicpT5vK48KEyduvaWKr0boELcF9evOlqNRbdtDtMXL3j4+Ge\njAeyZubLRKECCwd1g7WeS3KgeTiPntaiDx+BbGiGFYmkSPKTwUWYZ5kUVWV0\nieF3ckBoM2sJBYnV0cdrUPJ/AMglCth7z5uWeuNDMcPXeuFVOdTIV6S9aE5U\ngpXvjlmdj90UCc1eCej2ntOL6ZBL/JgJjhZfzoNwwE6brAlpP+N7cexuavHJ\n5cDQgEdxyVJIT/Kx0LSSXgQW3+xUEGabpmaamx8cJMhml9rwTV0/+6tgBYNS\ncKU/\r\n=Dyqm\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.**\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n**Note: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.**\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n\n**Note: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommended to\n always include it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color-or-map)` | If a color is passed, sets the default container fill color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`icon-color($color-or-map)` | If a color is passed, sets the default icon color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`ink-color($color-or-map)` | If a color is passed, sets the default ink color to the given color, and sets the icon color to the given color unless `icon-color` is also used. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color-or-map)` | If a color is passed, sets the default outline color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v10.23.2+x64 (linux)","description":"The Material Components for the web 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/density":"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/button_11.0.0-canary.750e18fc7.0_1612820511581_0.4615089803486141","host":"s3://npm-registry-packages"}},"11.0.0-canary.b62b1266d.0":{"name":"@material/button","version":"11.0.0-canary.b62b1266d.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"8d5f53d0e3f254b7c050fcfa4e0b7308fc252759","tarball":"https://registry.npmjs.org/@material/button/-/button-11.0.0-canary.b62b1266d.0.tgz","fileCount":40,"integrity":"sha512-UcLqxCLph6akUnl5f3gEMkGciXAE3h4UzsB+zi+qFgN+3u5huaMDPUpridySFgD/SnwwioDbqB86OmpIY7yBtg==","signatures":[{"sig":"MEUCIH6fZe4oos1SmgnCx/hj72tO5GYhfEkeZDIKQKzXICm6AiEAsQ4CHFDbYCKT6KzQaAcxoDokfGHPbo3V6WQH04+n+Jg=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":489710,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgIwRJCRA9TVsSAnZWagAAWOQP/ifMlf76RUgvrS14trlA\nsljKzKS1Wn5nMJeqH+g4oecR20JVQ1ztzfagZWM30TnutAzZLX5i7c9w8eVY\n26K1UMHV6FTm7QtgMi0UEl/l1DDzUjggXbR+a8uEvMfHzJxJ8Mc4RDDKV2hz\nTbD407Ki6wzMsdX0MzmwP2fLDilcF0Z4hL4lY36ct8p2VcyLiUjNqT5dZ08g\nzLO1zQd603ZuWqdK6WY/EeGE+H944Ztd7Zv/0VX+396rtCJwmWbUkxQkhfPR\nx0Kh32DWIkAC7Tg8Tz3l9lZNOwXkJ70mSvb7nnvJuZmC7fvbSz1tOYz8vkRb\nvAJ4WBmNzeViE/a0mdmjhD5eujKBf/PKMdV33wjBZEpz21EfcqkX7fgPKMy0\nXKWcp0niBeN3N2MfZifcNC7dsVvk7ds8HZkQIGdsUHNRRkd/d3wm9YLmynS7\nqN5vvQRchPJUeHnO/wxDp5bO4C1icjBOzffe3mWUq6WwohPce5b0jWguADay\nf33u/UGp0c4dlvsjZEZJT+IREgsQ1uf6WvXi/gz7Fm3+6ffmhXR+75H2kMwJ\nhRKGD8WDmpo8I/71+0HFjWlSiyTPf2rOTHRzPW7DOW03crwwX3NOZzLzptNe\nBhSgH9bcUka1EHS5NkFvqKBxgT80KHP7/sFk8KUFUFQrpoOvYECghCY93K81\nNSIy\r\n=igx4\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.**\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n**Note: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.**\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n\n**Note: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommended to\n always include it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color-or-map)` | If a color is passed, sets the default container fill color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`icon-color($color-or-map)` | If a color is passed, sets the default icon color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`ink-color($color-or-map)` | If a color is passed, sets the default ink color to the given color, and sets the icon color to the given color unless `icon-color` is also used. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color-or-map)` | If a color is passed, sets the default outline color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v10.23.2+x64 (linux)","description":"The Material Components for the web 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/density":"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/button_11.0.0-canary.b62b1266d.0_1612907593239_0.7414905024404852","host":"s3://npm-registry-packages"}},"11.0.0-canary.a6b3101fb.0":{"name":"@material/button","version":"11.0.0-canary.a6b3101fb.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"2738ab521d93c40bbf3a8c94a7fbf4ae75a18e94","tarball":"https://registry.npmjs.org/@material/button/-/button-11.0.0-canary.a6b3101fb.0.tgz","fileCount":40,"integrity":"sha512-gxFZ4ZfImBPJDqgFhMAWoAPsDi9IFUSKcqDqoBiFzfxpyGN5rYlwywT3ED5zmHXX3XBz3Zydd4M4kJo5t6hcpQ==","signatures":[{"sig":"MEQCIAsOcIkyljRP9xRzdhzvnK3lwU6d53zX+eX4Imdh7NfjAiAqVGXxdy15/bjLp7OX2A7gsb/ZZu4s4pthoW7x9uEe/A==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":489710,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgJbsHCRA9TVsSAnZWagAAApUP/RaXBwuluZ/dYb2XNAUL\nVB5Ut+kKbn5yp+MDgnivWBXWparxoTRHG3YMWO1f83jKXRtrkDQMk0FmkzTy\n5KY+foS3duwNceHaOHwR7hT2OABCzvHuISt0awaMCz10QbhhdD+sZQlbXHDC\n4AXVUlin6bRh0MPc/UtRTptrSTVMhlazltMR5/DDEJxh48TLj8iAynbAiUxl\nVUVLEpCv+pN1ncnuFeyilbRanZojXAPbIECe2NgPUA5K9nJJWw2hM666Oipn\nXjqDQxhWAK2aPOYcOYqqDgy5zBRAi80iM75MxmN3SkOKGl4SpyGGCedrW2Ew\nYf0sR+TeMgwRvA29lPj0hMoOwUqR6wS2WPsmNxQAgZDdsYFi4jsP5T/E8NjV\n1WZbj7/bLGvzDTgX/W63M8cUN1ZaH7wDl0DuCxDIy7eXDqteeMWCyFfenipR\nXHOB+Ie+IzL5M9TKInFjF8Xc6HyXVGxAgpFOYTtXhR9MGgFHDkM80wa02DMf\n1fwxfVMm/wTNEXkk8s5EAjuzyhTg/GH78ZZUCpt3sq1bHdZemep3zK884zjI\nW/k79s1SBPSsZay9osTAs7NxCb2/jVy02blqy9/OiFUgSRcmJeXqxwGzr48X\n7PSdYYLaRxPqe4I/oYK/z0ND+91J21VlU0O202H2XfmCzbMEI24gol42UcNY\nYPNU\r\n=TSuE\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.**\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n**Note: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.**\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n\n**Note: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommended to\n always include it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color-or-map)` | If a color is passed, sets the default container fill color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`icon-color($color-or-map)` | If a color is passed, sets the default icon color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`ink-color($color-or-map)` | If a color is passed, sets the default ink color to the given color, and sets the icon color to the given color unless `icon-color` is also used. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color-or-map)` | If a color is passed, sets the default outline color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v10.23.2+x64 (linux)","description":"The Material Components for the web 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/density":"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/button_11.0.0-canary.a6b3101fb.0_1613085447125_0.08388693441347939","host":"s3://npm-registry-packages"}},"11.0.0-canary.ed88df700.0":{"name":"@material/button","version":"11.0.0-canary.ed88df700.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"cf6370829f3cf611c3c2fb03db84193d12f6790f","tarball":"https://registry.npmjs.org/@material/button/-/button-11.0.0-canary.ed88df700.0.tgz","fileCount":40,"integrity":"sha512-tK/c3KfSD15pck+xBJ9Rx/3eOhrRjmPojFdehvE3thvD/FxXvJZFGrfG4F3a1pGmN+UllVFOst0mAgvtKN3uZQ==","signatures":[{"sig":"MEYCIQDPiCtPi7Eo7GEwkWlnhI7HnBOA4T9SoNr/MwF5dPxu4wIhAMElFOI1iSEWIb5LYYPgn267y8q1noCiU/rMrhGOL8Yo","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":490320,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgJca9CRA9TVsSAnZWagAAaXYP/AiW0PFe8oigNh/xefdP\nOXi/NeoX9nmjvW3kKXhJ/rnTB3txzUNrKAk5kd4ifhrHuiHWrY08MPt01uOv\ntJsckh6SvIgJOLA6M7csSog2xpABUR+olo8Pp0IG5uCz1oblxO+LAVkZKdo3\n0m5PnQetey8yx5nhNP7NNw53ghSpPZ5xQ7hWD6NI5YvdtpmBFuqRIIlePqdg\neQSqAJZ+nFOfBiESMGlk39G4IU0OBZpo4P0zAcjrIT2tFkhgYdyQrB9YG0aP\nkeDcCWwBE/PAbmtOErj8hBlMZOzcShBuPYdpe5E28BraNh2S9ShTstTvUDHi\nPqPZp7kl88OjamaUA5NQd4gvSxi4tkRUul4YOsqm4eli3HoN+bMJ6iMnYptY\nRDWpD5OGnacx3YFDDetLIPJMuwnmYmMviSaDbISSlTOX0wl/s1nEBQyLOxSF\nP516Z2tuCmeI86/EFDjzMqSTxYGN2wTsOw7kFIwL38TOsO+tFKlfRDpJzpEv\nhuyz0FqCugfDOn7bJJrn/tzy1UNU/NcpvUhMiLhkX5AZqig5nneuHyMZt2eQ\nvzkfeHLrnUOS/L/HLWyOmqRfAhpknkjbcaRz97UYTZNNv0NrN0u7+cIZzTbw\n8tlDZxDh9409bQOtT6heb5veGEBxthvwAPuyhTARStgt2Uhflvse3lVmc0T+\nwdU5\r\n=OG8V\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.**\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n**Note: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.**\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n\n**Note: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommended to\n always include it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color-or-map)` | If a color is passed, sets the default container fill color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`icon-color($color-or-map)` | If a color is passed, sets the default icon color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`ink-color($color-or-map)` | If a color is passed, sets the default ink color to the given color, and sets the icon color to the given color unless `icon-color` is also used. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color-or-map)` | If a color is passed, sets the default outline color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v10.23.2+x64 (linux)","description":"The Material Components for the web 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/density":"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/button_11.0.0-canary.ed88df700.0_1613088444807_0.42057734321360996","host":"s3://npm-registry-packages"}},"11.0.0-canary.d30efe6b4.0":{"name":"@material/button","version":"11.0.0-canary.d30efe6b4.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"856d6c537016aa75688c2f37bbca9a77aae24876","tarball":"https://registry.npmjs.org/@material/button/-/button-11.0.0-canary.d30efe6b4.0.tgz","fileCount":40,"integrity":"sha512-K6e0jQJqUoNwhXlpYHjNgrI1FzG5UdJRhjx8/5UmbnkTXtuuZ2gjLz60vFxIBErouIp/fImkYnVC4tQN8MdLlg==","signatures":[{"sig":"MEUCIAZMninNzQIAl3cL6VKf44UmL5m27hRkEwEMvYdH/xevAiEAyUZ+6IA6uaQ0mUqx9NBNunDCpk8paavNc8UWShrbILY=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":490320,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgJesQCRA9TVsSAnZWagAAVFkQAIlYEwK5u3Codo7ZiIOM\nSdnzdKV+3OXRhejZM9a0nMwgegVZdpArrgvt/x5RsK73OtTBbi0wf6krx8Nt\nijO1PX1XCd+2LqOwxTOTVSL5NHPOh2FOHwMe3GwGGlvXZC6w6P8USV7aNkeS\nUfHYKb+83o3ppEg7l8xs4xy9gyiyiR7jcl8Q/SkGsTFdXRqPHEgZy766otL4\nJQe9yH+jdG9pbMil3p+TkqZjXr3F0/6bwZyhbHSta/zKoG901NRqz+h3GTvA\nobphJTV7Nbs0vleYPUPxAHXROcI8SkkwTK8dJOUeSZ/ZqNu26dclfPwZas7y\nf5We+UV9XNAvI4oV3dnx4jJ1iT4JIj7cVMEoljstjq0pvGKiRNdxJS0tv3iN\n7Vhsd0lGXyQi8rtlXSNf46fMboFt0Q9ErLZMDyI/7gQtIlSliEVOdLLKLVgF\nNSWP4dSaqpPNTIfkMin5ieGAeFqVMoPhW9Q00uHbQMIqjVrJkYd0fAKiYLbe\npGUnm2l4NAfd5O7eUO8UYOcqyCxkRkmtbLyqcLtSAO6ywwWccv794sT0dQoo\nKQtBouwiLxqzCxcX0R1ID6WVLdDayCWIFO/D+n6OHrEbgw4wjllyCRXFPlGa\nI9AxLYFF4GL+JPRUzO90+d8aGuOsEBrWb7ayH5vickIEi+rqQZe20v5BNdg3\nWXuq\r\n=sK6F\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.**\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n**Note: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.**\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n\n**Note: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommended to\n always include it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color-or-map)` | If a color is passed, sets the default container fill color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`icon-color($color-or-map)` | If a color is passed, sets the default icon color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`ink-color($color-or-map)` | If a color is passed, sets the default ink color to the given color, and sets the icon color to the given color unless `icon-color` is also used. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color-or-map)` | If a color is passed, sets the default outline color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v10.23.2+x64 (linux)","description":"The Material Components for the web 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/density":"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/button_11.0.0-canary.d30efe6b4.0_1613097743858_0.4073424513858712","host":"s3://npm-registry-packages"}},"11.0.0-canary.0393bdc4b.0":{"name":"@material/button","version":"11.0.0-canary.0393bdc4b.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"886fe3ad75fcf8809b5a8a40e292f11853da3daf","tarball":"https://registry.npmjs.org/@material/button/-/button-11.0.0-canary.0393bdc4b.0.tgz","fileCount":40,"integrity":"sha512-VZxqrSXdxj0P442g1O508vGc3005WtbKGHC/tGbeTZ4aJvgprApnr5im7Q5AFaeT6BU4fWQ6AUsvclR50SsETg==","signatures":[{"sig":"MEYCIQDwaRMdXDwZbpR6N75/sP3ZrNg92kfbixv7vIILSmbykQIhAObbc//CmcSa7g/AvxHlD90sjcJDcVy7jF9C7J5xNX7o","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":490320,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgJgSdCRA9TVsSAnZWagAA7JgP/38WHCa13UwD61sAj4GS\nrQjmCyAItThHaKV/y3DY3zztsUDK/kvJf8RY/b26vgNQ415l4JQKWJ/uCDNP\nQw7c6FUPfTaqss8L3UOrJpA8D/VP0cqRl+IRn0sgXqIWgFswiGdxifzfZ0q4\n9FfLjhir4qHIqX6NAoySZ0Pi6VtagFDRWIqx/yk5lP4aZmQjON/XLON+0ghB\nuBMbJMejaqWjzIURiQ2H6Sy+oAOonULPtMkhgIxeoQHCHphnNuml13KQcx7/\n4nHnUPxsrKAFfiecr2UBjEzx2DgBFRCX3wqZgoDL/toXRmaJo0UM3zrO27q+\nWf+zCe9mYPhylmiI9PIKz9KVU+gQkkUmDTvDTYlQeilfNtnStvmhn/UNX+am\nGhAIsUZHQUr+OfKztxONGzFlHjmzMCJsLa/+kOpBMCZv/uKdZA3cyc6fB00e\np1CKUEYznzPbSLB2HBgJJw6TzeyyfNDPGQxnC8p2TVF/fLNV2H2/suQKTh88\n+PmU5Bv5ywYTJixzU1s6KbHBlqdXdG1yOKEb25+1Re8oQapirh/lb6Mi3uaJ\nAtHr++g6XHORWkQF6TXXhNgGO0p/rF9OIw1GDt/8Os0bSiktdVxLfT/1siVj\nwa0AK48pmWR9GCoWm5UKUbf4cgyX1hdodmjhJc8ZzJdcFw175VbFUhtVqjS1\nNZh8\r\n=7JMy\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.**\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n**Note: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.**\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n\n**Note: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommended to\n always include it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color-or-map)` | If a color is passed, sets the default container fill color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`icon-color($color-or-map)` | If a color is passed, sets the default icon color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`ink-color($color-or-map)` | If a color is passed, sets the default ink color to the given color, and sets the icon color to the given color unless `icon-color` is also used. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color-or-map)` | If a color is passed, sets the default outline color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v10.23.2+x64 (linux)","description":"The Material Components for the web 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/density":"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/button_11.0.0-canary.0393bdc4b.0_1613104284631_0.7398530935943894","host":"s3://npm-registry-packages"}},"11.0.0-canary.7cd26af4d.0":{"name":"@material/button","version":"11.0.0-canary.7cd26af4d.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"994317b094166ba6c948f74fa9c4beecf2c518b1","tarball":"https://registry.npmjs.org/@material/button/-/button-11.0.0-canary.7cd26af4d.0.tgz","fileCount":40,"integrity":"sha512-6BLa3FKVrAEDhNvLNB7xx8fj/nwRT28i3oISA8tjVma5UeHRhHGoEHt8SWnua72eaEnxm7HKBT7ydvRGSf7+VQ==","signatures":[{"sig":"MEQCIH3ej8e18HHNWgwo6NwXR8/lFHLXfZYFAdbH/7BMTxQvAiBS0LPsgbp01JcBs1duNKihlI7x33LP3LiH9Ai47w3/NQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":490320,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgJqX6CRA9TVsSAnZWagAAxncP/3CI9LTMiTJWBrJ4fRid\nZhLRoCCFzCmO7R4UfJHTzZVKOmQ3o0xSfcbGmyC4gFLa5qxwuipgB20+wwdI\nLvj9/qVPrUQ8xrsAloVf80bYZcDRIVgni2iJoGC96gI3HYWmzUDLPoTTZ6Ga\nq/hCgK0geWpxYCbu0cCnUvHgCUBpiXq6ugfb0uMDOZY7r19ooPRRcS6vMnuA\no1oydpTVD5M0ESIXJ9BN62KIPlQrTLy29SFMo2fy5TiCvpJMtFudwhiy5xYN\npBPW7qaYWVLVsAjAgxoFUJMAcJ3qF0C/NS3S2hD9sS3EUTdfsMxwM+x/qRf4\nCh3H6A33qR9R+X881XCCyZjAOcjvR3PQu53q6KV75Q1GjJi5ZXLQ9jETv9on\ns095Q8s1pl5ZRCJM+dmqGB2BP61lM0Av1e1t7ES/tl+ac9uBt+jI1A+WR2Cp\n0PBS3Lljr5YECHFbwW0aum7qa0EXGvi7gXCQRSil7ee3YfjHAZzputah3uTL\noujWY8ENnbdxSeZIkCG/BdAisSDKHwAq795bu0XavsCOtfOtUuACMKcCGVIV\nr+9eyMkmBj1LkS7LvFWUac3YeEsVBILz0GI6gnC3VJL+dTBbdkb+L+vseF0d\nvAnpyGNrgovyBjqKUZ6PkQTMvYqfm2pbiC2c8fezXorvd0gxdK89XS5ruAcC\nicqI\r\n=yX+c\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.**\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n**Note: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.**\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n\n**Note: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommended to\n always include it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color-or-map)` | If a color is passed, sets the default container fill color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`icon-color($color-or-map)` | If a color is passed, sets the default icon color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`ink-color($color-or-map)` | If a color is passed, sets the default ink color to the given color, and sets the icon color to the given color unless `icon-color` is also used. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color-or-map)` | If a color is passed, sets the default outline color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v10.23.2+x64 (linux)","description":"The Material Components for the web 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/density":"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/button_11.0.0-canary.7cd26af4d.0_1613145594243_0.8533223541522974","host":"s3://npm-registry-packages"}},"11.0.0-canary.71fe9a067.0":{"name":"@material/button","version":"11.0.0-canary.71fe9a067.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"268ae696ca4c70efeda6c6a74ac52be9c5d29eb2","tarball":"https://registry.npmjs.org/@material/button/-/button-11.0.0-canary.71fe9a067.0.tgz","fileCount":40,"integrity":"sha512-oEUYCa6wo3bJY3RMEcbbME4NqVOdXAwodzxjstnhk0dBsv31nbaxMHiQwQrNkImqQFW8d1RjN3HhI/6XNFCDBw==","signatures":[{"sig":"MEUCIQCmHEFfFD31v8NgQ5sWTMbxuM4i17zV8LiNlkBbl5nAtAIgLSoWv7YGsuejboXlzKcE1cYr8xgf00GnzTNb80v8638=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":490508,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgJq1iCRA9TVsSAnZWagAARhgP/RTAXTMRk/iaQ7WOQj53\n07OeUoUDGZDyhmbrHSReXkIYCjR11ckxEbISXhG+sJ36n7P13pS/ZUTnlxkB\niUPbJ2FXMkp/ESL2VLCDCTI8QF73i+n53Ni0K0fkiboj2RRxXw9h1UMJulO1\norz6zaFdb08jVre+zMyXnpP4+dS3oO5DtQCqM2PZte2DZNXR34dQVmx2Bt4Z\nXZBY8cns/VdDLyyjyux+Ng1cKtVuOj9ib/HUxOm7yYMEmbRhJm3rgohp66IY\nwP0WDUoZiiWWtsgterO2Tml6uiKyXbhYNe+MV/b6LX5e8xotQmDVfIaBu/0e\nr7leIQj9q0XBqTfGr1a1AyZCMExU7ICGyqiQSyaaKGOxjbpaUb7RDKhemRY9\nvKBZVrYcMOEhxom8foHUyB44TSeMKhZESmdx7xfojZLGgpdGtgtbq8h7qi/z\nunsp/7FIEEi9hKV/P3K5Y0ojTToO6TnoQnKivqqcAodVl8+r1hfqBvAKdN7w\nKCFzHyOQ7Rd0ASJsm5fqkhpBVFn8bi4QbVCki+TYShRriRFKRTdN3GdhpAi+\nrdvawruDFyAXyx9Uv62y0G4dfM4PrK4y/A6WIKmuVf2ITmoujrC5balz4sHg\nBxkRYMxmYQz9mc+Cspv4MKjy1qF/KQXvVU5qE9ubaeorjningjQSN2X8F+Vk\naWkO\r\n=BnGU\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.**\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n**Note: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.**\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n\n**Note: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommended to\n always include it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color-or-map)` | If a color is passed, sets the default container fill color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`icon-color($color-or-map)` | If a color is passed, sets the default icon color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`ink-color($color-or-map)` | If a color is passed, sets the default ink color to the given color, and sets the icon color to the given color unless `icon-color` is also used. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color-or-map)` | If a color is passed, sets the default outline color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v10.23.2+x64 (linux)","description":"The Material Components for the web 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/density":"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/button_11.0.0-canary.71fe9a067.0_1613147490366_0.21514735658162","host":"s3://npm-registry-packages"}},"11.0.0-canary.0fd56a86b.0":{"name":"@material/button","version":"11.0.0-canary.0fd56a86b.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"9e8412e79aa791d210d4d3627e76015601153576","tarball":"https://registry.npmjs.org/@material/button/-/button-11.0.0-canary.0fd56a86b.0.tgz","fileCount":40,"integrity":"sha512-0Z1uwiKIFIEDxogRzRxveIh+aw5UDo+2GY+Er/eJ6eUKG3fFNOdcTL4UQFXDmQGGZ2GaMwEI0P5eSPIYfs4maw==","signatures":[{"sig":"MEUCIHcZAjX6fPUP10M5hHamFpTNs+GjGjSrnftTFd5UFIJ5AiEArnq+OHLoS9wH2d5rVS+lKJLihFQOjm3WwrfVyzdXciM=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":490425,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgJxleCRA9TVsSAnZWagAAk4UQAJZVSpS/v1XEtmaSka4b\nklbfTjpPHEmn/GLSRiEH+6BnBtr5F1jegNxTQ8p/Vylb/EF1jev6/xleGcs6\np0MxKNYjmFmTJpMHnOCl6P/9xfa5HyrcF6PLFQKH0xfAIave1kci/BsNsPhP\nv+yzZLDZTeI/UMKybOThgEkx++qZiITMWDbwghNk3BCdGZ+UrxUu2SF2ObwD\nvtQDEFhpWK5yA9Ae1w4rcgFfwsvxX3mU9oO17aAFV9grfW92YOYB4v9P054Q\n5P/cu/fKyLPON+Ujb7JyHeaXW0S5sQEfBx0oORDCj8bjczabMgbPT3xSTnAM\nXCWjvt1Qbu8NoO6xbhJH+PEoiiZ+hMk3baY7E6WfAKT9+MK73bclI8W+i6I1\nxfhpGKLtLQIMqMErsWIAK4s5rNmdwn0+N+4DoOAIDxq1sLmS30WEcRlJfnXA\nah331y/rX9ZtllMdLbW+7i53ZSgWg8O5bvY4KKratxj87rDdiekgGh42jmXk\nRVDmfG5b7v15f6Zf+a/zLk3QkBOoASy/om2HSkXY37ztjyqn6lMzUMveUH0g\nDsG62VPIxKROJV4c0Cov1c6HQ4P4vm+CK8KjO9E5HHFXwVJjVCLmx4C4Z1Rn\nMKneDrtprStJUMvAXqz19002I6OAQTpYgfUYzTwlXn1NWVwicE4gFBpjAvrY\n3InO\r\n=eE64\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button/styles\";\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.**\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n**Note: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.**\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n\n**Note: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommended to\n always include it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color-or-map)` | If a color is passed, sets the default container fill color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`icon-color($color-or-map)` | If a color is passed, sets the default icon color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`ink-color($color-or-map)` | If a color is passed, sets the default ink color to the given color, and sets the icon color to the given color unless `icon-color` is also used. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color-or-map)` | If a color is passed, sets the default outline color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v10.23.2+x64 (linux)","description":"The Material Components for the web 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/density":"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/button_11.0.0-canary.0fd56a86b.0_1613175134206_0.4742360321383048","host":"s3://npm-registry-packages"}},"11.0.0-canary.f19bbc4af.0":{"name":"@material/button","version":"11.0.0-canary.f19bbc4af.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"9c1aad09be12bf868fc68a03036f0e2102544767","tarball":"https://registry.npmjs.org/@material/button/-/button-11.0.0-canary.f19bbc4af.0.tgz","fileCount":40,"integrity":"sha512-Fg4gNLeL618+TYnzbu2D1VNSP9K6WNdnwih6m6zCLxRzVjW12Ow2Lv+Yx4FUfJInSiOS/PyNQw15f7ZjatdYRw==","signatures":[{"sig":"MEUCIGJ2iXj4TNl0zm4MBZn+lCwqKuWORGTYXr9cN60j5jn5AiEA/pwfD6iFBwxEFUMq1uhXiYBllLu29RAw74bgH64TP/M=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":490591,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgLERRCRA9TVsSAnZWagAAdPoP/RkeVsnune6Cv40DW/cY\ngeRsE4A1kpzwyvYsu0pGJeUYO00OwTbQeG2gICv6cJryUxjewYSwwD70E8r1\ndAHHYQVzaO5A3/gSkaPGsTAtIXas+AAAPXMOJn1sI3Ib26p3ZLI2L/8CAgJ2\nhm80cjCMogb5d+Tm4yLZrm+h0tu+ISC0kAJmiSlRnhKoysdfnSzz/pKFUlon\nm6Q6SA80slIldVpoUvUjCpNXlLgOsNHE6PsYyRFh0RneYEF/40iu8GJcijLy\nFiGo9dwjX5IFXAaWPtHo8K7mfLo9z9E/IuTHkEBWgC9gxKsGTlvNft5yoCpg\nFaBMk13WqeRv2KfqvKGCHsl/dnwjPXizneCvaoIpQu15YU/5eisV72OtRbzI\naEPAXfgiOfu0l93B8cfNa9PC35WlGVGUDewCgj9POEaTlcuwxJq801Vjvd1E\ns2MTuPF/OEltTe5L2m0Rsjcb6i/DNBgmxH4KzifdOzJfeX8zrrfYrrolr5dO\naF5UBxg2gUUK02EH5M9ivSvthTPOZR/iRE6pD3QAsNv9bQ1OmTtiFDe6lhNf\nWCw9U467Mmnp/ddl/8wmuAoAj/AytbstXWDBG7sRRr4PzIs25QqmnouVCVnC\nhDe6tK+t7Vxqk7zcZawxQRKkupxdQgBYoJSWexmvPqvI5oAYV9mdA5St49fU\nt4zU\r\n=Sq5g\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button/styles\";\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.**\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n**Note: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.**\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n\n**Note: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommended to\n always include it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color-or-map)` | If a color is passed, sets the default container fill color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`icon-color($color-or-map)` | If a color is passed, sets the default icon color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`ink-color($color-or-map)` | If a color is passed, sets the default ink color to the given color, and sets the icon color to the given color unless `icon-color` is also used. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color-or-map)` | If a color is passed, sets the default outline color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v10.23.2+x64 (linux)","description":"The Material Components for the web 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/density":"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/button_11.0.0-canary.f19bbc4af.0_1613513808645_0.6165061505811043","host":"s3://npm-registry-packages"}},"11.0.0-canary.f9cac96cc.0":{"name":"@material/button","version":"11.0.0-canary.f9cac96cc.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"7680e9de314a1b5498841352cca6bed662e8689a","tarball":"https://registry.npmjs.org/@material/button/-/button-11.0.0-canary.f9cac96cc.0.tgz","fileCount":40,"integrity":"sha512-96Q8fNunzyedMA8VWoWyqv23tc8cmNAmvbk7e30MMlBNQ5MwlHkJ21MW9So4+gfrBLBFASAY0I1FVoosVIDUpg==","signatures":[{"sig":"MEQCIH2i+rOt5xZy/6gw+Iy4drls+h2EVX1X2p0KIvdeGT65AiBXfEnUE/vMW1wFyBSlzmsz27GsRDO5C3drrlC3sdFCrA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":490591,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgLT/wCRA9TVsSAnZWagAAhmEP/2wUANlYuvlbBSpp0kUT\nBMehYkC3YdE+pnFveAG9iQHQe0W2tBSj5zQyc7FjCBs57M+jTFNov6tD/Jjj\naUfYGuRbmMnHtegVfvLkMucTKB4AYu0jre26nNZKmUOHSfsxlPSf0U4YZnAX\nSoES5n8sgAWlp3yNo4mgCHQGj5ZPQYolul8wmG9Blr5xk46mO159hyy5+zUW\niaaAnyWj+9PWiC+jwDtmnjThrdQhOct3qqsefWZ9v62nDSmE+Er/EqXWa5aV\nczZWscWVFL8EFt2pagUZ79JdlaJP9Fo4IVBqt4W36wToZybHhGLaAHduN6/Q\nKvX1zlkDg2T/awq1oqCPi6PyXaOw0+u1YEcqWPN4+fNx8UwTAlYWPkwj8i4G\nKKw9lLZkQbHgUEIYYawviBZjV5dBZ9Fd5XKHwrV+/Tww9nfSdqAfmqFmSsZ4\nC7Gt0sWnnKXsF3IBZ5fUwWjrcZF3wGHH6v43JWzoeG19g0GzNtnEv3pnHWW7\nTpUurVUFWcdomIIVmk+K9/JRC9fiId+8nQcAaMRX0kPw1SJTsNUIWX2YXdvp\nbp7EHAQ7EmmiDe+N9GQydAp1K8BFJX9v0bQoQWrXx4Uz3gf3eSBm4UohzPBl\nsG+sDlbgLc+jXrEf4prZaZTD2Wq54/BHC6tfaM8ToTx3YavTBXT0NPr2//u5\nFDIm\r\n=xoKE\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button/styles\";\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.**\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n**Note: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.**\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n\n**Note: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommended to\n always include it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color-or-map)` | If a color is passed, sets the default container fill color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`icon-color($color-or-map)` | If a color is passed, sets the default icon color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`ink-color($color-or-map)` | If a color is passed, sets the default ink color to the given color, and sets the icon color to the given color unless `icon-color` is also used. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color-or-map)` | If a color is passed, sets the default outline color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v10.23.2+x64 (linux)","description":"The Material Components for the web 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/density":"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/button_11.0.0-canary.f9cac96cc.0_1613578223830_0.744154940300163","host":"s3://npm-registry-packages"}},"11.0.0-canary.79ce0878b.0":{"name":"@material/button","version":"11.0.0-canary.79ce0878b.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"c102d5ade2b8a150675e4f84fcea9fdd5ee24b38","tarball":"https://registry.npmjs.org/@material/button/-/button-11.0.0-canary.79ce0878b.0.tgz","fileCount":40,"integrity":"sha512-CEB6RyVRQ5eAblQdMZdFpgzSRzqJCwsL6mfLwcLOR8sqYK+xf5EQSx/2GI6q6833SMNMqxVyEFp3rxmYG2NAHw==","signatures":[{"sig":"MEUCIHzZXvZFcV7GuKQ1X/s4a+GL2N6uLuUFKKAv1YLaZ74sAiEAuWMdaRuEBmLnGseQJItqPNbiZc7E/tNb2XXaerms+0U=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":490591,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgLW2zCRA9TVsSAnZWagAATcgQAIZMZe3Axhdy/TA/RN1G\n2gwKZQrOSWqwQO8Q6mGJVkh/KB68RU+8+u4htXzZdIJ9VZsS5FOEq3CWlWLx\ngp+Npt6XA9GzNyOY5vjV1SGd66vMyOWYq4dNsLDRrfL+ozdrnp71Y2WMf1eI\nMZlRprmihOR/uN+ivrg8PZCCJ3zS/B3uGvoXoNlaqzJGYsiE1I4a32wZ+er5\nD0DdpDPYbrBRU34Oc4DCqkIEt0MQpdh31kziAKn4ZVqay8RQTb1Mhei8KF8y\n8kDgXZrBXR+n7AffG8ijMreWw03MqCsQhd3aXTZlZA+YscoL97U0ck1IkDzS\nxL4dTWKuFAMes2DlLUCZYD/lKMIfnS/6IskwWNFkJ93PgEWhYzgiYzZw4TMm\nlW7YhZEYDcysnYFyPFgDy/+rqQUQRI0B5jHCTKVpBQtDdUruXqMP6xE9dXBt\nKZI5L7s31XdA1ISVsM87qzawcFm51IpHROKUd/DtI+eNp1Pf2FXQW+4lX4DN\n5q2nqEUGL8Ltz+/LCoqEl5smbsc71ZghxO4eRJTUl9gETZ/U01+qILGtoF2Y\nv9zJT5CJGDVwHHV25W81pML/9G64f1zvVF/EWHa0KigJqNCxpE20EjtQkK/1\nxfxXlwu8vgjaqsjOempS1//NbiTDmK0lEbm4kaOrfmX0igKbh4/H+ilR+MZw\nYYm8\r\n=CfMA\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button/styles\";\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.**\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n**Note: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.**\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n\n**Note: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommended to\n always include it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color-or-map)` | If a color is passed, sets the default container fill color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`icon-color($color-or-map)` | If a color is passed, sets the default icon color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`ink-color($color-or-map)` | If a color is passed, sets the default ink color to the given color, and sets the icon color to the given color unless `icon-color` is also used. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color-or-map)` | If a color is passed, sets the default outline color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v10.23.2+x64 (linux)","description":"The Material Components for the web 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/density":"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/button_11.0.0-canary.79ce0878b.0_1613589938716_0.37282997357011927","host":"s3://npm-registry-packages"}},"11.0.0-canary.d6e507b5b.0":{"name":"@material/button","version":"11.0.0-canary.d6e507b5b.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"2090d0de75961b1fbea7b3a63df67a72c2248324","tarball":"https://registry.npmjs.org/@material/button/-/button-11.0.0-canary.d6e507b5b.0.tgz","fileCount":40,"integrity":"sha512-TMf8ZlDiyQLtIaFL2b57h0ioea0z3m/O72a7LsGgNkrr4ellGlnO1AybS/r65RJrmJ3jRu5XvHcYnY5ztMJ3Uw==","signatures":[{"sig":"MEUCIHsf9dGT9DWUHvfzkaVTbvP+zPc7CYwZWSgb3j9Kj8MLAiEAn1j9P1tuQsI/6M0if8tMp619ZNv5SLPiVIkkww2+LA4=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":490591,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgLXVtCRA9TVsSAnZWagAADdwP/RH5WogNRN+f0qyaxx3Z\nevNbpt53Tsm1SfWyTj1pPCeXm6b5mDGb7n8RoEnlH+HGE4pDPFHGwuGZK7rV\nHND2lNPqxo/knRGJDPC6GaDseQQnBdHzKe/1dLMxBlNmBMzx95PHNxcZc9L2\nUTKorB9hQ02joJO3oKMqoBeOPehg76YNQ5djtkGck2ICUSxeAcJcLZY9R/Pt\nDlYDCbN6xRbL4+nh7Z05xhc9OGpOO1480P2+KdgKAZS2H1pZJEpPpgNjbRmc\nvi1qJOUOlo6MfvQSGzRD5ShewQG8IEfMSraVscCsbzvC0BCDiVQkTPvzqCVd\nxTb3RiP0Zrs6Tn9pcCk4n+V3DZTob5MjhYgbyoWo+nkThCCYaWyznl1RViJf\nBPlnp6pllGWAH+Vx/Q793D1dbkg3Ti53kwAeat7ARL1NKRNw9Xm/h3axd+IG\nglfzuDZVSd3LZVTCA1iZejIA76nF6Yp1BbWzFIlbVN3f+yhdZu0+dVkbvyW6\nxEEnjYaa4E+PAqaBeeJbAeh7Ywn6NnSHJ5aIZipNMX0JyEm7tWvjVJQ8ZWGC\nfbttwewn7MkxIu+TVN+5DjgFPzAuKuy4IGwhO41/DH8RsjffBxtkWYIG+VDS\nAsGi2n6uRJTcL+xIEscz623343rki/RfV6FoCkcuFo3gPdWoXxszn8ZU370f\nBPJh\r\n=Rn7/\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button/styles\";\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.**\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n**Note: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.**\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n\n**Note: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommended to\n always include it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color-or-map)` | If a color is passed, sets the default container fill color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`icon-color($color-or-map)` | If a color is passed, sets the default icon color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`ink-color($color-or-map)` | If a color is passed, sets the default ink color to the given color, and sets the icon color to the given color unless `icon-color` is also used. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color-or-map)` | If a color is passed, sets the default outline color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v10.23.2+x64 (linux)","description":"The Material Components for the web 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/density":"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/button_11.0.0-canary.d6e507b5b.0_1613591917143_0.962315294389902","host":"s3://npm-registry-packages"}},"11.0.0-canary.f2658381b.0":{"name":"@material/button","version":"11.0.0-canary.f2658381b.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"f220d6e67308996cd3836ae699a32c51c4446e54","tarball":"https://registry.npmjs.org/@material/button/-/button-11.0.0-canary.f2658381b.0.tgz","fileCount":40,"integrity":"sha512-Oo+vSq43LUK0DKW49YdkkHB63l/GL3emM/uBwisM6kG7Y8rGipJks18q4pv9r9Pq7JbFaLV/l4aDLdZ6f9qhBg==","signatures":[{"sig":"MEUCIQCzc2cl0EnmFNUnadQHTxt9Z7+JO2HLq0lFCg8Jm9/RBAIgYVWbzTn7sEsR8pOBXZ6PP4248WAlsgnq45VJC4dG5vE=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":490591,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgLZx9CRA9TVsSAnZWagAAU3sQAKO0Am29ROShcK9KcwCz\nSQjUGOOuLRKXtuRlQ9gx1VAbc/Epq2WAS0621tAgLiwb7hT0ns3BbkfFfPMw\nJnn62zK8w/vgQeas7K+DvkZh49NXaxZ7WS+eqJwqXwy0nlv447mDaI82Xkkh\nQaXgTuOqIAoLB8ddW37ooEWhJDEYp9rGx9k8tbNJ2zZup0qD5bLnMbeGci9v\n/I9QbfBhf9ot3wr29jyRPiCjUO+tZcd1FTwRX919GTRiwB3+mlx0JqG/tTWo\noaygzW9QnhcUa8BUs0qU3kI3u5Vy1rBJG2RyiBI3W7DPsPhw+2KAxAF7TE1P\nJJ/3KYV1Qr6dJ9WY/L9eoLe9vx4ZfO1/uQFNcxYoIupWdadsRmtdWRC1HItv\nzE6apXA8eEW4Kd63Q5ibAnHVf2FjC+dphEz+DD3m/+guYS+/xJL7hI6NqGVV\n1XOMMb/zudcdcjs0uJgP0IqKXBjAo1kSfbh/viAQ5cai4pt8Ak5lf7stasi+\ntpcUaJLLR5iz2HA9bvbkhWY2jUQBAaxOZUOOMMU1oGx7HTEunk/ZePXhGJ7w\nEopm2jIhsFJ0eU65Dm6YAwpfH3w3AHlFejGeduNNXmVm+knCIJnHHNhuEm3r\nE5SvUVJJNveABM/yG/8bU85iedyt2i4lJIEWfcOVntlsLfYkX/TXYhqdqLuu\ngdcl\r\n=S36x\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button/styles\";\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.**\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n**Note: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.**\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n\n**Note: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommended to\n always include it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color-or-map)` | If a color is passed, sets the default container fill color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`icon-color($color-or-map)` | If a color is passed, sets the default icon color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`ink-color($color-or-map)` | If a color is passed, sets the default ink color to the given color, and sets the icon color to the given color unless `icon-color` is also used. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color-or-map)` | If a color is passed, sets the default outline color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v10.23.2+x64 (linux)","description":"The Material Components for the web 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/density":"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/button_11.0.0-canary.f2658381b.0_1613601916465_0.15844659961409713","host":"s3://npm-registry-packages"}},"11.0.0-canary.97c4d4035.0":{"name":"@material/button","version":"11.0.0-canary.97c4d4035.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"76b6ae92cf537b3accdd55426a6119a35faec6a0","tarball":"https://registry.npmjs.org/@material/button/-/button-11.0.0-canary.97c4d4035.0.tgz","fileCount":40,"integrity":"sha512-AurvGD5PFtKwqtC2AX9jVffeMLnZwfxH8EuGfZ2T1xLJB7gYi579xBGvctiRdfhE1Jacomm+aHSye7dlj3txaQ==","signatures":[{"sig":"MEUCIQDUDUvbwreYRNdavTfjk0u25w+8iHpAO6gguEIg+g88jAIgLXjNBzhvMI+3vdArZrJcsvinizTSfYLZkCvdZebHcPU=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":490591,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgLdJ3CRA9TVsSAnZWagAALCkP/0dM1YGGky7tl+yxdery\nhsynJSu5UZxFcHExwQBBYzHoIyqyz/1jhNFyQMf54wFy57vvEMwq0weFU8Fb\nZ4sXYwNcUZCe0WN+85gbLHhpdQRzGbYssNKWdBtsGbAvUkYWereZTCCdNB+m\nBoqKnNN692MyffbLuNHAymkQfUnVB2RbJCLw6tcX2E0GABGpOJwrZNyVGyof\nClBczNp1u2v2kBiOZNxb0r5VaAF3RUzYVtUWY5XPnMqKoduXRzEBJDYZTXet\nXC6bIfxtdCY4TwJwp9MGyZQKK/SFzM906VPXCYExX5abBtYlHAEn9Yy+qj5i\nPHVYNT0+EE9wXdk7RxLa4A89gR5sAo3+YqWZGDYjM6nyOnVRvFkIUjRXnNyy\nObeGGMMmjUSE6MQ+2J+tmwj6rlQhFZdLHCcl9u2IVnV2FWqpxTpRTN3KqBIn\nE1aHf/CD2K1L0sv41M5V45rvIQXBAomIgPv1bcXexq5LPX2fNzkfgRhRbNmW\nK/LPcn0iDQKXOERU51sSiJz87x645pQnvuwdnwR2sallh/AVssNQgxCT2Ptx\nylNwg2D9itN8v8MoHlAguAkhxI8oiqzn5WPVqf7jTi0tfFKL5KKBKDYXNlXQ\nip4OZgIFdjrhT0alNdmMZdonVzVQFKHBJ4QAuOwIvWuR6ieka4Ox9Qe2CnmM\ncLD8\r\n=RQdF\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button/styles\";\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.**\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n**Note: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.**\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n\n**Note: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommended to\n always include it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color-or-map)` | If a color is passed, sets the default container fill color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`icon-color($color-or-map)` | If a color is passed, sets the default icon color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`ink-color($color-or-map)` | If a color is passed, sets the default ink color to the given color, and sets the icon color to the given color unless `icon-color` is also used. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color-or-map)` | If a color is passed, sets the default outline color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v10.23.2+x64 (linux)","description":"The Material Components for the web 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/density":"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/button_11.0.0-canary.97c4d4035.0_1613615734679_0.6074196258847586","host":"s3://npm-registry-packages"}},"11.0.0-canary.f5bb4648c.0":{"name":"@material/button","version":"11.0.0-canary.f5bb4648c.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"4665e5e5a5b3465d6f1e7d0f8b7192ff93fa35da","tarball":"https://registry.npmjs.org/@material/button/-/button-11.0.0-canary.f5bb4648c.0.tgz","fileCount":40,"integrity":"sha512-w7VXwd3YJNMa7sbAZknyoL7ws6R6O3kO4FTU641DBdiiesVRNs1GpcM5a7mhcN0OWPi6OvgFYKwl4iMrMPz5RA==","signatures":[{"sig":"MEYCIQDrZc2bJCgiNJwI9nqOaeabMwTrKhfM3ZfPHQr9e9IGmgIhAMoFKndZiCkJDFeEFIf3GGD6CSLw6Hu9JC5rOWSomva5","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":490591,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgLpBqCRA9TVsSAnZWagAAxz8P/0x6FKwb5TMk4vh1IHBp\n/WYdHnItbp7MxNEpcT8X9DrYSauzEJdKWkbmF199bPqjIrfVC+27TtO5VKCG\nPgXcES0A82hdBlKyZVzq2fmgecgW9bv7ohY+LJ/4mkZqVGJhpi+NdZ/pYRz8\nWF796BMT1KtrGc4mfSfGvr36KMbG7OSxnCvRFuZqzdWcDPGYb819Iu2bueYP\nD07WXQmPbtUZyfrBadLy9nY+gv8wUUBG8s/D2Nk4nyKeyKUkEVIrS/PJ0C3C\ntstny4CPjtPZSnFJi1692gE0gzeqolKcgHy13J6r6vM08mRMwi8Fnj1IEbqX\nlYrdEjLaJznC16xAWKzDnIvYK8D3jlK2j3lbQkYC4fPEhaKqL6vaKFpUeOlx\nB5W7ctJgoZAmU9Hzc8xVONjLavlfjWQHkmjUhyDPlbCE/kzLMmDrJ6WIy+10\n3V6Bwx25MBA3HCJVaad/hnJ4mdFj5In+7KN9cK4CqPWaii4NZBvxDsoFJlS+\nIcpqAry1q1G9xPHYBPfmdsVv1O40XYawXzX/OVcjZiJ01j5k5wzzNk/BiYuy\nAKTv3NalyIsA2ql8FQNzna20I9BxwOCM7uIfOR0EY5/k8xj5EqgrAjKkqeTX\nG+XvheXbp/9u4v2ootTSTRkdUMif5ZeJBe6U32eC2YoXraPQLaR2Z3K72OZm\nKESO\r\n=cCIe\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button/styles\";\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.**\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n**Note: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.**\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n\n**Note: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommended to\n always include it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color-or-map)` | If a color is passed, sets the default container fill color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`icon-color($color-or-map)` | If a color is passed, sets the default icon color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`ink-color($color-or-map)` | If a color is passed, sets the default ink color to the given color, and sets the icon color to the given color unless `icon-color` is also used. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color-or-map)` | If a color is passed, sets the default outline color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v10.23.3+x64 (linux)","description":"The Material Components for the web 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/density":"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/button_11.0.0-canary.f5bb4648c.0_1613664362251_0.8018986870511013","host":"s3://npm-registry-packages"}},"11.0.0-canary.302c7a960.0":{"name":"@material/button","version":"11.0.0-canary.302c7a960.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"711ecf13494aac9f35d6d880e83ae2abd9ffce69","tarball":"https://registry.npmjs.org/@material/button/-/button-11.0.0-canary.302c7a960.0.tgz","fileCount":40,"integrity":"sha512-vyCX+MjmlKCrjnW/n3p3lqrq6kHlkoH8wV78Z7+gPCF96rBl1hsfuhoR68L3HEgJKhMYJGVok77AzPP4rt0hrQ==","signatures":[{"sig":"MEUCIQDSIhAg/7CrjC7H94mj5fFXbuyflf/p3U/a0DAlwRoy0wIgR9j20uWFetx8h02fZE/Tv3f/2Vc5fIze28GzXALCWHo=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":490591,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgLrQwCRA9TVsSAnZWagAAyZcP+wW2uv2nS45OZvMJn3TG\n4xPYrOCMXeptM4/aF3a8PFLJPAAC+TJBjhpagCE8/D14Ma8f9k86fnIEfHxR\nXKMfD2jiMoAjZoud2NqGlotxpnMIclZIlH6jg1hRC1pmwhP+0PbuJclNANdt\nqsJMb5VrTEzm6U4SKbEJm1ED3yfL4cux+nFLzx6sNuAHArQUwF9iKV7U06Km\npuTPyRo8rQ/+LrvtP8vByAPRBP+mEixaomFC93PgdRXetDBkFUkHy982efvJ\ntVtn0F1dR00335JJfQsiFMC7tI+BGh841fkOP/u0GNW4G80xkg4rPpLnoRpR\nrpxDPVdS0YZCoEkE5OVGoJdccwCuLnqm6jHHJlMBrcN4QL2sH4YVVMLAS4g0\nr2nC0RNYDUSNRoBwxPtriiKsEOwFG1m0nozPrXvaaZUtnLpsiD9w7H6si2Om\nxxpi2akZ/GFpXadq8OFqkcGcqvougq6vyypAVOz8ejFsPKPPQXM1+B6vBvnv\nwn9DZcrX9oGPGEfnv47hVrYvEs2QfOXXcc1M3KJGNt7UhJiT/BPG+21I5pjw\nxcDp03hoVVSDaEtUFz6dLYYyO7WNrtHWqXvoQKO2/L4rHA8mOfipzJwF7Yki\n+Q9cF6Tc0ho9Pr4mrUxaFOC95RHyfr63mIjqeuGfPhmo5ko+9Gr9vrKtno1N\n8neI\r\n=UDhV\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button/styles\";\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.**\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n**Note: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.**\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n\n**Note: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommended to\n always include it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color-or-map)` | If a color is passed, sets the default container fill color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`icon-color($color-or-map)` | If a color is passed, sets the default icon color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`ink-color($color-or-map)` | If a color is passed, sets the default ink color to the given color, and sets the icon color to the given color unless `icon-color` is also used. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color-or-map)` | If a color is passed, sets the default outline color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v10.23.3+x64 (linux)","description":"The Material Components for the web 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/density":"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/button_11.0.0-canary.302c7a960.0_1613673520022_0.48279882404402374","host":"s3://npm-registry-packages"}},"11.0.0-canary.aa0aaf026.0":{"name":"@material/button","version":"11.0.0-canary.aa0aaf026.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"f9758c67f8f69d3f844469995d3d3a04eeb95b23","tarball":"https://registry.npmjs.org/@material/button/-/button-11.0.0-canary.aa0aaf026.0.tgz","fileCount":40,"integrity":"sha512-3ts+YI8z2nOvDF5733Y+B3MHqDr4KsiMie94wMyahDpWVeaH+/pFt+3b8Kb2klsiRt9JRwVSjzYhR9tL8Y5mEA==","signatures":[{"sig":"MEUCIQD0IKjVg8Ne7l70j/nEEPqQkDd1GaYk2HvqQxIg/OLfpgIgBnzlJIapsHhLD2zkvs3bPCkv7tJyk5rfMxuq8AZqkg8=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":490591,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgLr7NCRA9TVsSAnZWagAA2G0P/i2e5f1KNkoq6/krDFla\notg2tzi+qJW17Wx0FMLW6cG8/V9Fz0oeWcGddbXxRFOnp4hRmkMXN3GyD3tZ\n2tcADNqKL9RCUIxoPQTQRiF1FK2kVazMqDvsYoXRCTdPsNtyREY7RhNQPr/M\nK6oCZ3VU7uWLgdnL1IzdIEkqWi0qFq3yzayme01UHwlVcBFSmVTF2az5EqQt\nTZ2ttj4UMTkjsh+LQ/8tEVrgbhXO8Yeplqt6in/PldTcY3H2qrunKdArluN+\nV/oKmGTd4SecM5WdghRtM1HNNgL0Ymt95T6kZszsHS0WXGjeAT8l4U6O26/J\nCgTHkYOyGIwxOTPgIMG2kTDsPYKZwpLrpzhxcjLdXy+I22xvWk2miR05UzSB\ndqE5hzO3xalTNPPTm1RVttnABHnabmkzHW5fXOeh24AKW9cr3yTwxMchBmAI\nHj8Mo0ocow5oP64vFWMJtOOuHj+Q6M+HjiYqdPHysDaXZ+bSv5ei921eE7qB\n0JpQueOg8JE/Q7ftOYl4/besKGz6Yjyor7QO2uhfxZNV7WNwG8p/LOcxLx0N\nYPHeQma59LFnyWBtGiinnsTmvLaUBUc+C1DSv+btYUd5VwrdZY8hMBPbLOD5\nq13eSb3PG94Tq5wvFHsow4tGyFAmQhWN5toMcAHm2Ino3ASYIw1DWEMV5I7o\n60g/\r\n=89du\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button/styles\";\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.**\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n**Note: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.**\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n\n**Note: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommended to\n always include it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color-or-map)` | If a color is passed, sets the default container fill color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`icon-color($color-or-map)` | If a color is passed, sets the default icon color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`ink-color($color-or-map)` | If a color is passed, sets the default ink color to the given color, and sets the icon color to the given color unless `icon-color` is also used. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color-or-map)` | If a color is passed, sets the default outline color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v10.23.3+x64 (linux)","description":"The Material Components for the web 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/density":"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/button_11.0.0-canary.aa0aaf026.0_1613676236479_0.29824851952455766","host":"s3://npm-registry-packages"}},"11.0.0-canary.07ff0c452.0":{"name":"@material/button","version":"11.0.0-canary.07ff0c452.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"28bd72a7099e5b45efcb33614bd55464e2b985ac","tarball":"https://registry.npmjs.org/@material/button/-/button-11.0.0-canary.07ff0c452.0.tgz","fileCount":40,"integrity":"sha512-xDD6BSBfg1NJGb6IhJVAjW2Ws0Yt1hDIxmcgRrqU8IwcYgZ4VnVf9zRNOgxQ3XzZCuO2EUYMz2zG5kDxM0kUZQ==","signatures":[{"sig":"MEQCIHNFeWe17f/o/lpnuzAq309tnceHsYb4G157cJCG/MOQAiAdexXlk3SD0kvkiYzNip/8ElbYnd1xkM2DhnKkD7PnMw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":493695,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgLsNCCRA9TVsSAnZWagAAqGMQAJcUtsH/iCQaoziQnO9i\nRk1FAFkBlRXi9gy3hYl9H3ZgxEl8VPt7c0RhUSTR3ubZkNoDWxDotENwuaZ8\nucS+CF5GuBzBcx7FiH2E/FCv8M9T6a002q8ki/P8GS6efR71Yf8VY26qnIV1\nsHIt+7PYz4yKOXn6QdoB769X0a7MQxSOsYET7JcEg1ReKZoICXO0Z7i2Rkf5\npI++Ueg1L4Sm9YdIwE2H7UafFLUnbz6Ujze5cR8MduVWiDBGFl5/Ezuw8dSK\n4oYhSshhE+IuTLNsMhNOH59UgwfBEJtJ+BmATU//4LGVFONcZ4TmFb9Szkip\nMZqBw7G5b8XiJeLuVBiBiVySlXxC28liwP0SrwEgEJqqTmshc7OWLhPXpzNq\nxbnNcS8YmiYXwzZGqxo0SVcw24GCIaPjAU62tMFjOqRZxVPDwfciS0Qawe6g\nQzplcwnFd0t5rXAvXEwcIuRTqRqj2cGn0YH16GKFgfyeVbMuZjk+py23CZCo\nALG9LmSY++ImbjhketN7zH29gK/XulJCEyB35GDOETTl8DzEGoK1t5rTjns9\nFzjKhULy23ZNBWYBOL1K8HXMq2L2Mxc/8LkGu3ivgqdH7z8/QQbvfYnN7aHc\n/EDeSTdhEOhZ6KFTxtVa4ZLDbv+2fiYUlwCKWP5Gg+rkeU9y30Bpl5Y3398Y\noqrZ\r\n=5RX5\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button/styles\";\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.**\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n**Note: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.**\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n\n**Note: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommended to\n always include it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color-or-map)` | If a color is passed, sets the default container fill color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`icon-color($color-or-map)` | If a color is passed, sets the default icon color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`ink-color($color-or-map)` | If a color is passed, sets the default ink color to the given color, and sets the icon color to the given color unless `icon-color` is also used. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color-or-map)` | If a color is passed, sets the default outline color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v10.23.3+x64 (linux)","description":"The Material Components for the web 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/density":"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/button_11.0.0-canary.07ff0c452.0_1613677377621_0.7334660290292552","host":"s3://npm-registry-packages"}},"11.0.0-canary.bed7ecd3e.0":{"name":"@material/button","version":"11.0.0-canary.bed7ecd3e.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"51f33828f3c3a7441d78107c4eabfa98b41272d2","tarball":"https://registry.npmjs.org/@material/button/-/button-11.0.0-canary.bed7ecd3e.0.tgz","fileCount":40,"integrity":"sha512-heC9YgzLa6etnv605VTox1PosdPRxwRNCHCQ5rxJyvNlfEvU6VEgNRe0FInEnIu5q5NhmVlq5k/W6XhdOR4j+w==","signatures":[{"sig":"MEUCIQCoE+Ln/V77TRLfljRTrxd08KYSUe+3f0P1/NxbwI1ZCAIgcYcPcSkdh7dH6cOvp3CMGPOuTQMj0O4FvXTWMhE5HYc=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":495171,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgLvgCCRA9TVsSAnZWagAAIJ4P+wUF1LtFH7arLhX1FJsV\nm3HBZFXeBNe8ix6xOKhxfVKlOGbqt60DOYRURLzIVpUhKEAppoNTV2gXnIaW\n+GxeZxpgsYX+oDQv89V1DAXZPGVOQ8aPvxkY3o5bLW+AwffODW4C6BIcTBIL\nb3LYe9VhFcaBv+2GSkuArENRz9iylaAUIeSDHCI4E0wzAUZkv/zsggt0vDmP\niUFjG9DvgqhHcYTJoYbw5DtuzCqW0BT5tl1leUWbPej/fXc8iCynIbrthhSJ\ncGo+7U/chPD43VtUSRQGygkSaXpp/KrWFjTFOhAjsbyjHiTDByi+sI9LllSx\n0Y1TMfrMa2Qnss/gLL9orjAktc+KEwBWlMpBqqX91kXVQzYgBcq1wenkwWGx\nmQxB8G9DdAWgPMh/tY5nA0bfFnrCTT4laLQHzZaMqzii+HLIvqpLViTIevoT\nR6uiUbbxynOkfA1JSJKRZIBMr6d5mApxj/520s18cjf3u1///EyTCgsnjtCS\no1N/T8UWpv1rVBJ46A29EyGvSYAYTiQexzV5bYZoBaFkCxUG5ZLqxRj4isPC\nTdx5D09xwktbjtS7IygjMdagWa19GtOtFvQKnWdBm46WCrw0p6fZu0qB6nsi\nvcT5A2d7pBmV6GIjdGgJ8S9Tv2DjhE1QqGnBvXgzJgQb6WegRIejsMK5bu4M\ncDW+\r\n=iPUC\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button/styles\";\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.**\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n**Note: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.**\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n\n**Note: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommended to\n always include it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color-or-map)` | If a color is passed, sets the default container fill color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`icon-color($color-or-map)` | If a color is passed, sets the default icon color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`ink-color($color-or-map)` | If a color is passed, sets the default ink color to the given color, and sets the icon color to the given color unless `icon-color` is also used. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color-or-map)` | If a color is passed, sets the default outline color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v10.23.3+x64 (linux)","description":"The Material Components for the web 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/density":"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/button_11.0.0-canary.bed7ecd3e.0_1613690882361_0.5923503094331601","host":"s3://npm-registry-packages"}},"11.0.0-canary.06dead2d6.0":{"name":"@material/button","version":"11.0.0-canary.06dead2d6.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"8d4a886743a5d90b78bd1ea484c1359266fedaa9","tarball":"https://registry.npmjs.org/@material/button/-/button-11.0.0-canary.06dead2d6.0.tgz","fileCount":40,"integrity":"sha512-faO0+C26z9yjO1hdgWLCMPjBCeUnegfooVikkg8vjbOBnVlf0ilGOfeij57rXkE/SeW37tBCHKRW+D86pk1vWQ==","signatures":[{"sig":"MEYCIQDYNBnATE+ZN+dY7hXe0eripHxEY0lCt713TfxAvuEwZwIhAKWT782x3x5QspKdbc00+ozpmYAD84mOR0jkUt5XBA6o","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":495171,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgLwhNCRA9TVsSAnZWagAAJ/QP+gOlc7dtuBDchutfcwqq\nTymYtNsvfP1dqaPn5b8DtxjnrukJZqLYdwNNSvMG5+I70sUwsPPj282KpOJL\np8oGLq+6bVRS1vT3BatLSIlfukpHWXn479ZMJf4vc+0hUaZf1tyggSMfEYAV\nAVpLLUGFX/PF8LpSVJ+sypTAbDsBZhcIVyPgTFLug6DaBKsVTuEWUiy6Zlw+\ngB+GDkFB4HGUnc4SPJSz35qp9S0H9s4W1J3sjXmpswuACAMEtsiOxzBNA+r9\n8Pt7bGmGJkhCqDhUmFDzCRTRHHImucX1tKwX9egOqI21O2+SHY1zR8oEykge\nZklYvVAplqyRzSB+ttDsXAj7Yea/YB8NgDVUBWDG9PKuHSfN2oKQMKLF4Nt1\nEPv4Wi1GiCkhu7rF+12/+wkLtTlJIByhPGrl7TAPxrETuF87hUVsGvNI3mp/\neiKscKYbqu3tRElX1CisATOfw0Xnah1V9Alf7Z6B+dPs8oJcqGkpbfNhVaMW\nLhNodjeJAuSvbSOuXmQZgHoGeTiRz6wK/loXLC8AOjG6qeAreZEaO9qiaeFy\n4uIfWh0DZhizQ38sZvEJu7bKH0TwBWExOaltogjT5ItNK72iJMKDSc35rZ42\nwBhA0E/ZBJYJS4hYZNT2yVQsxtxG5AIep6H3ZhehxJJ0+/jsgCyaoCpKiQvX\neQqk\r\n=ywKw\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button/styles\";\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.**\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n**Note: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.**\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n\n**Note: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommended to\n always include it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color-or-map)` | If a color is passed, sets the default container fill color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`icon-color($color-or-map)` | If a color is passed, sets the default icon color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`ink-color($color-or-map)` | If a color is passed, sets the default ink color to the given color, and sets the icon color to the given color unless `icon-color` is also used. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color-or-map)` | If a color is passed, sets the default outline color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v10.23.3+x64 (linux)","description":"The Material Components for the web 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/density":"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/button_11.0.0-canary.06dead2d6.0_1613695052610_0.07172502934308689","host":"s3://npm-registry-packages"}},"11.0.0-canary.cddb03553.0":{"name":"@material/button","version":"11.0.0-canary.cddb03553.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"00acdcf7211efb7ac6fa519ed5a4b6efa3f29999","tarball":"https://registry.npmjs.org/@material/button/-/button-11.0.0-canary.cddb03553.0.tgz","fileCount":40,"integrity":"sha512-fnMdHUWqj4rTHsQeuetPENztu2t1WKDfao/AaqR0k7M4ygP4pYbwruviUX6X1YtTbWW7qYGattKcmthtBd4WQA==","signatures":[{"sig":"MEUCIQCWWTG4SQeF/ZNg4trQXIzoMXwb5ITLBjspgvDYsUTbBQIgPs+qTJJR96VjFI30KTaxA6XaVp9SpshCSr1X6XVX704=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":495171,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgLyzkCRA9TVsSAnZWagAArnsP/jU7cNkRSA73aioCMfZY\nPuHVvPRl24cOCKZVuh/fd+l8LJxjnTgfOakNTwqeF/Lj7gtT9oY7HtSPYIHJ\nOlStPNITMiiSnfRwrajw2CdlW3KWYRLVCGsBDVoxQPbeaRXC1KwZE3qv0Jnx\net2qnWpXbjW4Dlhc80cnRKaPQGxJBJVoEKW+DuZyOPwmJq5llteXYOnvL9FK\nTkC06bBF5o7917TCkuG5k1xtmn5ndM/z4gqtInJ84j7HOM2d/osVVG/BmNMi\nsUNFNxAGCJ+FNy/m2gjn7RX5sGsK/CqXkMWF4wr3EmI3vI5Y9HJF0IKuj9FN\noJ4kDeMR9n+BfnrAAw1PIxFXC9oZEiMPhptYrEriYhBOtfvz4oh8IxcJP4C3\nf8yQZw2bmSOWdGnoeFAerdO5zMmF8ODwP2FsgcDJnUhqE8AQ0KH5KhEdqK6E\n3bDttYr+igWR2hFy+OQHU2fBkgH0RDgt9mRULRaQPLO6AeDLQe8z7+MpADgV\neH3lCD+KfVf78zMyhhZgpRV5NEKpRimT7abOji1p0NO6WsRH65joAWK2Igkh\nSVZytDe91RM8p5jGuaiJ7+NbmGEu0gKz4ViSBmETbGFm+JirXu3dkfck8L6E\nYTIrMPVrwYmnXL/bzJICkSejCTxGyGErTK5MmKbXyejWOHF2FbuI8UE8JObc\nQKwA\r\n=ckLj\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button/styles\";\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.**\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n**Note: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.**\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n\n**Note: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommended to\n always include it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color-or-map)` | If a color is passed, sets the default container fill color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`icon-color($color-or-map)` | If a color is passed, sets the default icon color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`ink-color($color-or-map)` | If a color is passed, sets the default ink color to the given color, and sets the icon color to the given color unless `icon-color` is also used. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color-or-map)` | If a color is passed, sets the default outline color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v10.23.3+x64 (linux)","description":"The Material Components for the web 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/density":"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/button_11.0.0-canary.cddb03553.0_1613704419759_0.9332487670016731","host":"s3://npm-registry-packages"}},"11.0.0-canary.d6d8d0476.0":{"name":"@material/button","version":"11.0.0-canary.d6d8d0476.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"ac8d3b2ca7428d24d343fa363f2bc4e2205ec2ad","tarball":"https://registry.npmjs.org/@material/button/-/button-11.0.0-canary.d6d8d0476.0.tgz","fileCount":40,"integrity":"sha512-gNqCo833mWg7rQ9hYSWgWlrgFZLcCW5Fkelt7PGKOmSbpukQdTutfRHr80iMFXsFbKL4hrxovhPufkc5q9M4yw==","signatures":[{"sig":"MEYCIQD6s/atxXuSBSfOC8OGrcYnJxuQwGTVf9+hLHRmt1IK+AIhAI15HVypaH18dJPr9SSit8BLUQifeXa+jxLMiYvSymmh","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":495171,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgL06ECRA9TVsSAnZWagAAIBMP/1W6jKOuW2L0HO+7DKq/\nWiLP3RDlS1FOEQfGi2I0AUkxWWe5x8RQ2yFLfEbWp/0vTdwoU5blWS8a/SRH\n6mFJwPpsGekTfitjsToRuazfwR7iQf3yRFtiduKsw65Q2T4hEp79PXnBQssw\n+0GMmENEkO8Z/99+5GgDO9JM9/SYJcwOUHTDvmSjM72wG6b3/n7EdxFq+Ktz\nn3I9oUagJy/f2WvJ2IKlCQ5Tv2gsF1PMaNfsB8O5DMZt1LDhvuvAZ3WmVHXM\nwghRW/WXoubxQLd6R+StxUzyeNIpEzVhZExXDP5ob7DQPe74KFyy5H8U+B2y\nOr6Topq9rdjIddlgqBSftBiV8LfOMhirsnUbfrp2Z0sy8K1uxDb7tZuapuXp\npm17kT5HRlECOwq4nnKz6Lak9kiGINoUGXqOnHehEysjmY1D1dZ/1heXuDCv\nBXUnf9u/SQsK2Crj/ELToPfCxrtKPS96YKP0t4tQybeJVKQOiYHZVCPaz1uM\n+8z/x4TMXMkgKjIBdWWhXAdoVblN10jieoQfB/jxrGVE0g9Uq/ztOql5bje3\neDMa2PhjmXWxHoF22IbqF0wepZUWBITPll5rXP82AHGp95rmbmqag0Uc0vpL\nygtYwxqgVuszTcrdThFKpBq/JKPmHWSeVNqy0snLmnywOJhqwQmvz+Yxzi2n\nbvvz\r\n=d02H\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button/styles\";\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.**\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n**Note: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.**\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n\n**Note: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommended to\n always include it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color-or-map)` | If a color is passed, sets the default container fill color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`icon-color($color-or-map)` | If a color is passed, sets the default icon color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`ink-color($color-or-map)` | If a color is passed, sets the default ink color to the given color, and sets the icon color to the given color unless `icon-color` is also used. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color-or-map)` | If a color is passed, sets the default outline color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v10.23.3+x64 (linux)","description":"The Material Components for the web 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/density":"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/button_11.0.0-canary.d6d8d0476.0_1613713027555_0.6269175276334833","host":"s3://npm-registry-packages"}},"11.0.0-canary.0b4a4b2eb.0":{"name":"@material/button","version":"11.0.0-canary.0b4a4b2eb.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"91628e1759e6e3adb364945bccb52c110523938d","tarball":"https://registry.npmjs.org/@material/button/-/button-11.0.0-canary.0b4a4b2eb.0.tgz","fileCount":40,"integrity":"sha512-qHM70xjDsZVJ4Wps+s4u00sywmIxUGLuN/SAlfbcLvhAM3ykw4pXsy+lBI1ydrA5btqxrGpHgY224UO/SvoD/A==","signatures":[{"sig":"MEYCIQCZVQpk+Y4HcX1ajruNweyEiIZaLfrqlOhpQx1p8bDergIhALjLS+JKhnPmKNIyHMFP5ZyEnK+3UTKj4JWwWxB9mKh/","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":495171,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgL91HCRA9TVsSAnZWagAAGJ0QAKOhwNzrwo8GvwYLS2ad\nt52LmI6Odt5FAiCi6EJTo3cNeGGy3qHdtSo1hZOTmailj9yNfpm4Iiaw7NgZ\n1UTwIr222kBb7F2SsXd12M7oIoMazdTTwMIviDTUO1jFbz3+G+QWgwWsbhfR\nwFMPtk/vLjwd50Zo9dDhO9nzzclK17KxybdFw9HmFi1A3Fk41C8Pc7jGse3C\niCC2VETX6eBS/T3wtvcJNaDVAktc233c8ypxv43o9MGktojEkgUU+IiEuPTT\n1aPzV0Sc2HJqPtZredRUnDVG23dOUJiIQyeccbjgVZwShW5TWf3+zSIJZQjE\nvgT8uA1lXc8OIWoHdBPIoh9KCH2pref+LTMqfpbD/R8sUY2V4HYICZ/TFgNd\n+D7y3Lb79Gxdrww9phAtDmLuxUai+BNRQeh+2m5eW4E0YlCPH8DrLCfnXv4D\nB2+SdO/Pml4xdFgKSWH1MzAus1qeA4qkBmyrovIWulMImoj0KWtNxFvq3raK\n7lqkxxAV0dhl//qOSzwhrO7dwFjruBd/4ZGY8Xs0Ua4tvNvxBAFhbI/UbAJA\nKrqDlvuHy3t8kW/PpTJvq/06KH0BZEIQf1sLEAtklKFPdc0rgtmRIKhZLsbX\nYAm6nwwISRRCY59Y5tuov1PIHlQKMuQxcGXl/xgNBNiO+cxp/Q0+cLf5Ui8v\nFHN/\r\n=8xVd\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button/styles\";\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.**\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n**Note: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.**\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n\n**Note: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommended to\n always include it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color-or-map)` | If a color is passed, sets the default container fill color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`icon-color($color-or-map)` | If a color is passed, sets the default icon color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`ink-color($color-or-map)` | If a color is passed, sets the default ink color to the given color, and sets the icon color to the given color unless `icon-color` is also used. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color-or-map)` | If a color is passed, sets the default outline color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v10.23.3+x64 (linux)","description":"The Material Components for the web 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/density":"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/button_11.0.0-canary.0b4a4b2eb.0_1613749574727_0.6902284535933227","host":"s3://npm-registry-packages"}},"11.0.0-canary.3201cae47.0":{"name":"@material/button","version":"11.0.0-canary.3201cae47.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"5526b8b907f6fb055eb7eca535c59b9877e23cc9","tarball":"https://registry.npmjs.org/@material/button/-/button-11.0.0-canary.3201cae47.0.tgz","fileCount":40,"integrity":"sha512-3Sma/SHho2IbhlQ74e6Ixmw6qFFxOnS6I8v/VphdWFX1r0zymuYrhu4lMeAYmaG6kAqsK1W62uRoE2GTcm7rNQ==","signatures":[{"sig":"MEUCIAmv02Ivls5nLn/8FeunAk8S4eCoPFoYH+oXvILan4YRAiEAgLK3MlFMYx/n1J+UN7gs7Va4R9i5yPbbbYjBomlElBM=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":495171,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgMEM4CRA9TVsSAnZWagAAhggP/1LnitzWo3Y7Xb4/hRV7\nMpkrtPtLqhXgW917zM5lncMlbsMsI5nZ2XCBszl5JPkxGzuzB1oP37ldegaz\n3u3Bp1yPih+C54yjzeGGnUbfLIVYLYojqMUdLjX2RU64eJ752m0el6uPpAIr\nKKnQeuOt7gFQTkadrkYQe++HiTMz4ysEuhmswIdpG5xiexQTETihAubYngmw\nEXAgdMAR94pShoXgXeNmkl6Le8Vq/X/X4ovOgdXHvTOCupXLVQ+qyD95yj/8\nGYj/buf2zk+lpYlUJvvkU4awQ/g3ktjW6i5UqMgqliJiOuyjFM9xhBcDRfSG\nyZV2AUxltog9Fe/QdD8np2zBMCyfEGTQRxO+NFy0ZKORpoJFjeIChloRy06Z\nhWtpvKBTqq+XyypV1E4GgfMTfMLgNBak6NIcwFYuSmDLgUi9jCcSZYnwiyNK\nShzGipXTTfM1Bkna8QhOZt5A0MY43sMqQrc5kY6twN67lCqsQKM+kBr14SuG\nI5CdNtrxiioIjxAIq5MFJ9NicbemOfvEKH1/bnOdxmgO+tqN1NF3I6qHgkLo\nge3PmEvCS4U1sOEA834GXy9apueS0+hzmEC1Nep6HgKl8VxA4NUZF66ZAxfb\n+YwZq+Pt7nJEPtxmQXwFvTopqFPt0169/rx8xQHz3eaBQbYj797TSUNIkr+w\nU/1w\r\n=jrd6\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button/styles\";\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.**\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n**Note: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.**\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n\n**Note: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommended to\n always include it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color-or-map)` | If a color is passed, sets the default container fill color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`icon-color($color-or-map)` | If a color is passed, sets the default icon color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`ink-color($color-or-map)` | If a color is passed, sets the default ink color to the given color, and sets the icon color to the given color unless `icon-color` is also used. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color-or-map)` | If a color is passed, sets the default outline color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v10.23.3+x64 (linux)","description":"The Material Components for the web 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/density":"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/button_11.0.0-canary.3201cae47.0_1613775671739_0.4857055470334577","host":"s3://npm-registry-packages"}},"11.0.0-canary.f1b1fd5d3.0":{"name":"@material/button","version":"11.0.0-canary.f1b1fd5d3.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"4d366d95bfef315ea5a87564f32ed154063cc259","tarball":"https://registry.npmjs.org/@material/button/-/button-11.0.0-canary.f1b1fd5d3.0.tgz","fileCount":40,"integrity":"sha512-fXhkf7cFmyOu4icg5EM4iRw/xWI1EQ9Pfbdd4+yPekl1Z4Oi5Paw0b0qXciptrBnXe2VuGpxb00+Gs61/tnogA==","signatures":[{"sig":"MEUCIQCAuHA3ihUg/AAsClI33M6r9hbPlx9zCKcELWVjW03ZbgIgevBz3r2t6ixLz2i7ESHiw3U+0GDuzdQdebfEWzjjOIk=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":495171,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgNArlCRA9TVsSAnZWagAAENYP/0E6xpZY9fXyJ173IDzv\nJNVcbjFARFHFIAr0IH8QCazUWCESb6VXg3EJ8dsUsT/+TTxLHCdk3XY27hwO\nEMu73W4UecJdp10HyHJpyixfmqxnad0dFKFrb/W2W03lEOczhitRXYOyZ7nY\nqr3qcGeyKzhtfXzutb+Eh4lck3n0d1V3nDMUsajjgL7850jIOSDK5MyJAC7N\nZMPNSjJndOwXlIOjHgvATHQdjlHVI4VqGFM8s3JRwiqWsjt70dRwYfiSa291\nNrUB1Y4nQIgpVQ2qbbVt3x7HePKhANYvfmNvROILBbv0NPvQr+CglQhqV4Ko\nsYkw39+ljAlXYQmv2/8ujpUKeFLQa+EjTzB1gCKti6mHbw1qDYWq64sMAoSG\nY3+xBANze8+7xLFZNOLLwmKkurIvZWqEt/LTHqdstkTTCUftte4i7WR4+ZmO\nG05Gn27iRnO2arZADZBuRijC35/eUfGGtxVcmiFnjwEDneJP3S4uI4xk0hJn\nS8bTbt73VyjdCM+2UH1+JYtFoso2lsltSm2JAoZkkwbzus4vRVzBTgokhaiw\nctF4KTp3nIIlvcSUQf9pVI8ldqJfJyW2Xv+UdFfTQ1fl5rmxBhqXwGUfNwC2\n+I6qI87G5OIKf8wKKB5FXrDIQtm88WrnDlrZ8GL/iQmKswzdQfMVSm/ZFY3Q\nvq9/\r\n=gW+v\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button/styles\";\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.**\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n**Note: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.**\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n\n**Note: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommended to\n always include it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color-or-map)` | If a color is passed, sets the default container fill color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`icon-color($color-or-map)` | If a color is passed, sets the default icon color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`ink-color($color-or-map)` | If a color is passed, sets the default ink color to the given color, and sets the icon color to the given color unless `icon-color` is also used. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color-or-map)` | If a color is passed, sets the default outline color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v10.23.3+x64 (linux)","description":"The Material Components for the web 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/density":"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/button_11.0.0-canary.f1b1fd5d3.0_1614023396758_0.5754789658859341","host":"s3://npm-registry-packages"}},"11.0.0-canary.7899e0fe0.0":{"name":"@material/button","version":"11.0.0-canary.7899e0fe0.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"14e8cb73e443bac64cf5535e364df2a545f66110","tarball":"https://registry.npmjs.org/@material/button/-/button-11.0.0-canary.7899e0fe0.0.tgz","fileCount":40,"integrity":"sha512-+IZ7Ru4p2LZkChHJS2qd1RRIvnnHb1dqSNiIcQvCmD13QkTr5IddJwqRUHwcN9KkxjGmO77096dx3V3C5YwVZQ==","signatures":[{"sig":"MEYCIQCzs/+23FoWB0oonYeq5SooE3yXivqQU+N8JVDt25bC1QIhAOSyVMUZCxjlxJgPqjOBCQ1Ywnnyaj9gruPZD+8zlRmI","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":495171,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgNDQ/CRA9TVsSAnZWagAACYIP/iBVzLS1WI5GslxFloQX\ngf2dLBwyPOk77wWVT8/ceNO7NpJJS61w/RhptZ8ZHoXqJkHN7UxA1YRzqaYM\nPrNabGp6g/DOhjH1PPR2KeYH/onA85zPCS7plSEJ5xzvg8x8bnZdXBm5RaM8\n+d5CUT2jeJ934rPY87OTqVjAFDLrGO/RUGTAB+pV3MDXptxgNjUX/XdG9rri\nMgNxT3uA7gIhQP9WByLw3NaNi12xMmCdm0x5TXC58n2HwUJZ8XIwCJAmVuPR\nRcMp3ci0p7mi/ercVHZYEksULmYGKZzADaMX4c33uDHOUXXwbbQmYW1IaULD\nrV4TVmpuzMUVZwtrVebaGiadtg3SkRRs0URcjf9snsWi9K942/IvjJuCn+1y\nMIesHo0oOa/gUzAQRD+WyGs+k0NaHJ3gtbfJ8Vw2EPH+RnUoLqctbGHBmR6M\n1gJ/7X2kv4OD5xGSEvFy0VkIJ1KAnRNLPu3A5BqObVE9t4+zR+bP+h5w//Vi\nxaxlmthtvKYzenrxHcZXpZrJDIzm02v8GidBpvFFlNsNrotqvFEymOhAAsdi\nDxOyi+Iv9V9xzIbidZI/Jp6J0eysm3WiTsC4nTmiz8e9Rip3aqNruF6OeiDw\nEaE2vBZqYrO2rVsT2IITFI6wRwIKD1b7TOZGF9IA9FoZx5n/LIg5sZY/2nTI\ndadl\r\n=Vuvx\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button/styles\";\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.**\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n**Note: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.**\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n\n**Note: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommended to\n always include it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color-or-map)` | If a color is passed, sets the default container fill color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`icon-color($color-or-map)` | If a color is passed, sets the default icon color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`ink-color($color-or-map)` | If a color is passed, sets the default ink color to the given color, and sets the icon color to the given color unless `icon-color` is also used. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color-or-map)` | If a color is passed, sets the default outline color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v10.23.3+x64 (linux)","description":"The Material Components for the web 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/density":"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/button_11.0.0-canary.7899e0fe0.0_1614033982897_0.933669707490844","host":"s3://npm-registry-packages"}},"11.0.0-canary.f19c86d13.0":{"name":"@material/button","version":"11.0.0-canary.f19c86d13.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"ec8d96e836f6bcef554ecbeaa11e4522b041c700","tarball":"https://registry.npmjs.org/@material/button/-/button-11.0.0-canary.f19c86d13.0.tgz","fileCount":40,"integrity":"sha512-/p+vf7fWKh67V+t3Ju3oz2RpNeRmh6YycTOce2msfsY5UxPuQOmsSVm1LlfJsPnrRbld+V/fS0Bs1KQBCCOwVQ==","signatures":[{"sig":"MEUCIQCHE3U37hj37UNnliE61DuN7aVYNpy+EpCv3jP9WrGr2gIgPB7QFXIF5+rtYY00CYW5aJNOYlrZfSsDe2tf7qeyjkg=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":496149,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgND66CRA9TVsSAnZWagAADb0P/RQv/5diNgY6XBfb7ciE\nvLyu4xQyNQkOm20qB4/KwpSDaKoWzpC7yoBqAJ1xjBKrd6t4d8YpFh+q8BmQ\neB45xX1j3Z+kgr9QS+HEiSOCbVThWfop8fP4vhzVRF93TWQVUS8zhz2a5mfq\n6kM3lsuqK6B6Y9hWUqiunmdU6e3aj6FeHcJXBFEPQGCByJaIMKJG1IRW5rb5\nf7NJyd1puolOQpsMUQ+SsrGEWPfMdg2K6ZY7p6cyTRHGEC+UYTwoZsyx5KDG\ne2dAeMcIBTVJApazNgneV6/dDt0Ei0qPCf94i1k/RHM3C/XgGByAs+ozKOSQ\nWMg00bsHDKhxyCVeAl97ABeKbazLIIfp0uoiDPMTwVx4aop6lcdS7UIKbL2x\n3mL4HmOcPDgPlfCNHHmRLsrZLQJAzvBhaNtD9RPInt+FJaR3cN0O6hVz3fnz\n1VUdLhphxsxQGCcVwWFdugB/iYV0zCwUxJdq0+7xwWoGaHSC7LV/iHlYYEpx\nHusSh2hlQL15AOKNez4IYYSu3YPsMzeol1K/rLT7YQ/u1ylj7kWSwSA1BjKY\n3ws7uYPgyaVU3RxzY5AOnVJXIf/d6HFDXfjbLz/hOiqTZFgdTcd7MVNw/Obv\nFLaYYN6rYf7Ior/JHZ6o7ijciXE6U84lbt2Po62xX21b5eg8syRt5G/jxLmA\n6s+V\r\n=poMz\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button/styles\";\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.**\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n**Note: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.**\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n\n**Note: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommended to\n always include it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color-or-map)` | If a color is passed, sets the default container fill color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`icon-color($color-or-map)` | If a color is passed, sets the default icon color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`ink-color($color-or-map)` | If a color is passed, sets the default ink color to the given color, and sets the icon color to the given color unless `icon-color` is also used. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color-or-map)` | If a color is passed, sets the default outline color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v10.23.3+x64 (linux)","description":"The Material Components for the web 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/density":"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/button_11.0.0-canary.f19c86d13.0_1614036665767_0.061554174962211494","host":"s3://npm-registry-packages"}},"11.0.0-canary.60e892d79.0":{"name":"@material/button","version":"11.0.0-canary.60e892d79.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"9273eab891c39684c538c0a6546105840be73aee","tarball":"https://registry.npmjs.org/@material/button/-/button-11.0.0-canary.60e892d79.0.tgz","fileCount":40,"integrity":"sha512-bFiRzV4LmzQRJYI3zBqw9QT6oAX4sFD6RRffzxb94IA8pKpaKiYpFywPtrr/JEHQQONuvwYLkDlrAcNKjq6ABw==","signatures":[{"sig":"MEUCIEpta76QPkznzmqdc8lekRqB9nkl6xW53dc1t1U07tpRAiEAs0/axHHYadEnwCTRSd1CWDwccVpJYfw4hVA2LBZHS74=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":496149,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgNFb7CRA9TVsSAnZWagAAZdYP/R0cwBfCl5Py47HpOTVj\n14j24u06Cm0KcocAn6WamQdoSxbQywW222ge67OwPZBK8PoaHoSufLmqcQqP\ne1HMseibTW8xrMqsI0HaXcNWre+j7Olyw1enu3sO7wWTg5JyNjF8s8PqaIm3\nGoXRGmcr350uEHdMcsiEKCev221dD4CuZ4dl+1VvkQqzJdG2wdGYwMZrEs4Q\ne9RIGotE7GQqhZ7ez2P/nqr9UuxbONT+6JsUJh0K+K+OyGttvayHTnQ2RmjW\nJbYYmuoxCE2VstcnsrQFaMy+sVrmqq0886Zu9BompBqS/NJRnOiJbbp23baZ\nNXPU0V7tMEYLEMXEYXZOHF17o1p8kbsi4s69Pp2N+FV28YrK+J+VxlGT8jXO\nnCJWl/rOmk4Nmk2jpHD0DuoBT+8HBEv6pHbFtRQuQ0CS5HJQuy4RNoaGxEMR\nAlaHTl6McNYNwe5RJ9cStgV60UoppKdn5Whf0bFpJNjPthxgEA3EsUsH+Vv5\n86n/49qF24g5p8SiACuPsSWHvGZ2TTQpnax/at6tWoUCHfd8qoSuv82mOkid\n4EJ2oxzMUNi9VcjlqmM/CDM/1jZGZY4cYhzbRXWLDVl8j5kNTCKzSupX8rEl\nfZBM1ZMJUx4DchKkv166082AdDCNca2t4nDw7dgysjxJJ0xktJh6GYxszIRi\nVhTO\r\n=+PmA\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button/styles\";\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.**\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n**Note: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.**\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n\n**Note: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommended to\n always include it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color-or-map)` | If a color is passed, sets the default container fill color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`icon-color($color-or-map)` | If a color is passed, sets the default icon color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`ink-color($color-or-map)` | If a color is passed, sets the default ink color to the given color, and sets the icon color to the given color unless `icon-color` is also used. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color-or-map)` | If a color is passed, sets the default outline color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v10.23.3+x64 (linux)","description":"The Material Components for the web 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/density":"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/button_11.0.0-canary.60e892d79.0_1614042875041_0.16293334684800875","host":"s3://npm-registry-packages"}},"11.0.0-canary.c96bfa495.0":{"name":"@material/button","version":"11.0.0-canary.c96bfa495.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"725031ee6228d5ffd2ba570e7a412aa0b5fe2bdf","tarball":"https://registry.npmjs.org/@material/button/-/button-11.0.0-canary.c96bfa495.0.tgz","fileCount":40,"integrity":"sha512-sNC90MUpmyBGaU/O3rwIuHK7/+BxKk9eIAuflHKfm4g5pk7naPb4rxq53orHTvLY2t/4Lh9tYiU5xrernvDYIQ==","signatures":[{"sig":"MEUCIQDEMaY8S47fe+mcdShXBW1nZqERISPLME7EzSovbipvYQIgCMROcnyO+cDGhZL6Hr+/D96gOLlicKpx8QSQ8YZPvtU=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":496149,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgNViICRA9TVsSAnZWagAAPJ0P/j4Ywx6ytb0IlH443zWo\nHAdrrsEL91aGwkWMAf3ce1GKweoktjeFbP0TRjjfdmMoVV+GzZs3E2G/XYv3\nTXeqAFbFGt+frgsOV3MlmVm70lWwzsaCtEcDC4lvtgB9ezM2bgz0A2ZB4GZT\nvvXlY9NdCYH0LqXpf7utsIJ03vRa9XgzlOKD3vrjtViI2tQYpb6G0Q0Vi3Kn\nr/+/8J1CYLqgOqyznIBDd6C4DgFNhBTEHdyALOQXsbC7iBN7C2w15Zf3R6FT\nW25rzhe3JgUwFuqo50gbT7wt55xf313O2IgWOIZSG9InIsOKYq3k/ZTmJ5nA\n3dAosweaov8VjPX+3/YrEOwzarJB+PUjsOeEzr1+WA1vx6+5zVUKpWSAhLzB\ntAsWE2tdQIvALXCm9pmM50J8yu55P9z9mSywfrLzBXYUQiByLxjozspPZpOq\nY67trVKrSyXcrasrPoCJcBDx1wsVVlMS/9tBEAyGSzTeOjUheeauz/YGgsvP\noochY9WvOvd0P6yol9OxfKEtwHUyn1ylHBMNkA3XV5a5N2nOueREZopfHOCd\npoNmzykDxlqlRhZn0Rlwxm+cWDwvHHEGA8sIUnCgkTB2F5P1CZRIgu6kuDLd\njgfBFcPvpgeFCsSHNEEU72RpT3jP7N9ghVK+yU4BfIsNi+pi6XYzgC40CB5t\njPEH\r\n=+tKT\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button/styles\";\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.**\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n**Note: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.**\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n\n**Note: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommended to\n always include it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color-or-map)` | If a color is passed, sets the default container fill color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`icon-color($color-or-map)` | If a color is passed, sets the default icon color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`ink-color($color-or-map)` | If a color is passed, sets the default ink color to the given color, and sets the icon color to the given color unless `icon-color` is also used. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color-or-map)` | If a color is passed, sets the default outline color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v10.23.3+x64 (linux)","description":"The Material Components for the web 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/density":"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/button_11.0.0-canary.c96bfa495.0_1614108807517_0.14245215126203625","host":"s3://npm-registry-packages"}},"11.0.0-canary.fa9b59f67.0":{"name":"@material/button","version":"11.0.0-canary.fa9b59f67.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"18841a81e9816056dd7f2890044200e6c5ebb332","tarball":"https://registry.npmjs.org/@material/button/-/button-11.0.0-canary.fa9b59f67.0.tgz","fileCount":40,"integrity":"sha512-APNoEA5iw2dVMjRSXvhQVX4mAQ4dfj0LSFHzNGf3Snqalr4rug5fSOE5kE2kWlBpTPJK7fqK9EXU4gHj12q9aw==","signatures":[{"sig":"MEUCIFW9fUQcx3QjZyOIV6SaGz7dTntjGk+Y2WBTtTX7XN0OAiEAqVW+N799oVZyLKkWafEToQ00UBqkHwmaPvyKaBSl7YA=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":496149,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgNVjXCRA9TVsSAnZWagAA6sQP/RAQb6M0jU3L9h1KjfKu\nVbQCc1f7bQcR5+M7570uzF7VuKbZuyCO5NJePeXHn5AuDKkHWgRlU3iLeKez\n1XwO4LCzhA7L14nEq3ZIcU14Ibz0Q9i8Rpc/nBNva17Y7/i4jr86Sx7xRyV8\n53w9G2R6CQze8O1fqV83dazCCXMNw8JLMp64fsBHP5gL+mO1HiRotnSNrN78\nHCh1R+20x00rPvzHiuKPYUpUo8g+za/FxLYzvDYwPmWhcDt09saUHzgALJij\n3fFU82ujf2gdy/vIk9n1dD+0IA4F30KCdjDuCK7or/nIMYhzFDG6V0kEvD2J\n7xoJCVWZsyLQ90006GKbAjFYQAgXcZQEBUGwvKkgROUmOeudFW81NBNkYi1q\n0Ff5ZzZrK10xfLICUyeCi+kQ36n556INSG9pLSyOqgLFJs+rPP2dj+rhq+Jg\nRKdZDxlDu8wNAtxicnd8I5Q1VmVch9olOYQ68XJSKLInPJKJW127BDDVjg2U\nOwxDSAeIiM8WA5NneJ+g33J1kvIgX7GFLHXNpOZDE+r5Mj95uQsO4eT59g0N\nsZePhzvPV8gtHa3ynLps5VauUANkUgcTKq5J5/rSnp8v8U4Yq9iM7o9GNaEv\nsYD1s4v38/10RCG/oSFzADMMCE97uQ6G+Refs4VDv5HoFCO09vXK0m0CtUDJ\nn0M/\r\n=sPH1\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button/styles\";\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.**\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n**Note: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.**\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n\n**Note: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommended to\n always include it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color-or-map)` | If a color is passed, sets the default container fill color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`icon-color($color-or-map)` | If a color is passed, sets the default icon color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`ink-color($color-or-map)` | If a color is passed, sets the default ink color to the given color, and sets the icon color to the given color unless `icon-color` is also used. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color-or-map)` | If a color is passed, sets the default outline color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v10.23.3+x64 (linux)","description":"The Material Components for the web 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/density":"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/button_11.0.0-canary.fa9b59f67.0_1614108887106_0.22127340671967488","host":"s3://npm-registry-packages"}},"11.0.0-canary.869e3497c.0":{"name":"@material/button","version":"11.0.0-canary.869e3497c.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"cbf72f4145d83dca895dcce9a3e269e49a165ea0","tarball":"https://registry.npmjs.org/@material/button/-/button-11.0.0-canary.869e3497c.0.tgz","fileCount":40,"integrity":"sha512-Jx0iuZZLEOoFKUTAHZq8w5l5/cK2QySAtZq05dBP9zSjxB4B17yxjHtf83qXxTUHtdh7r0pFwHI6/tbM201udA==","signatures":[{"sig":"MEUCIQClDlzw62J5xA1xMTRaVp+W0jFjFWH+YTLgO1WF5MdOUgIgaPlL7FJClE5Fn6AERhTgHmdCb1ct7ROcWUJV6TM7Gc8=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":496149,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgNVj5CRA9TVsSAnZWagAAZhQP/iUs3PgrHshcak9H4Vln\nIB3OiCCCid2zu6jan+pTVMk06WuQ8kZLoYaO89ptJapy6F4lNV7wUJRt2/8k\nGFzozcyMuoBE+n3jmsQixUrKvhLnpY+fj4AcLx9P0j4h08G1mo7v2HdeQG26\nD11bWsAfpnmV8DsB8MR9TBGqwkx8VsVYEPx2/vOQ4aUnOOYLW9w/FiXm1McH\na88q9oWC4/xWr3+QEG31C1WYdUw/5i3mEHk/TQbVi4EhZw6lyZupQYodC4oh\n8LGgOjCVlKmABew6unA47fhoosDrT7Lc091jFEmk4tOlqz+0PUx0VjDyaBEy\n5wWRix4ONzUzEeF/aw0p7P53juweqvAQrwkSzde5Z13immo9rs08HDbEfjCG\nux3SN5OeDgTuM9z80Rlis5uA7sUeJQKDKH3TBCEo1eqijkdAsGLdJbJIT4sj\ncIgn0ubxF6cMNZGRNdY35GY4yyHwXad/nW7/Ftfe1mR1A4y5Pytb+SR3YuoE\nu2lFr6YblwBxF19CtpKUCvR/VyeqdHumDzjl3ulTbfvVJc16xCkc8iGg1KkV\nb/yyCTggGN2bhbpfmng2BwG3SrVov9nziyuXIW0/iLm2RSInw0L7jIIeZZt2\nPe3HvZ5MZUOz/iL9d4KPjrPlZIuRelPNYBRrEM/eUp+wBtIvFIbjfIGA8XeO\noV8+\r\n=UO5z\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button/styles\";\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.**\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n**Note: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.**\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n\n**Note: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommended to\n always include it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color-or-map)` | If a color is passed, sets the default container fill color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`icon-color($color-or-map)` | If a color is passed, sets the default icon color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`ink-color($color-or-map)` | If a color is passed, sets the default ink color to the given color, and sets the icon color to the given color unless `icon-color` is also used. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color-or-map)` | If a color is passed, sets the default outline color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v10.23.3+x64 (linux)","description":"The Material Components for the web 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/density":"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/button_11.0.0-canary.869e3497c.0_1614108920828_0.36567364994177454","host":"s3://npm-registry-packages"}},"11.0.0-canary.8ecd7c9a9.0":{"name":"@material/button","version":"11.0.0-canary.8ecd7c9a9.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"be9e72917051485c583480e4eadd48c67c559d24","tarball":"https://registry.npmjs.org/@material/button/-/button-11.0.0-canary.8ecd7c9a9.0.tgz","fileCount":40,"integrity":"sha512-9JsY8h1TSpHExWf5E2+L4Amzt+4H7WhTpIwsJA4AHmJyH17QzXXjEwOLrlnNRhhZA3Oh6t/5GaB7mJEfkU4xeg==","signatures":[{"sig":"MEQCIFxWLwE6Gth0cglhNjJjxd0Uf0BrAGVTXbpSON9/54AWAiAh2Ae8oe9sBNNQK+7YzGL27+URfpFo5OSu3lVN2njplg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":496149,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgNVyrCRA9TVsSAnZWagAANq0P+gNT1RYp3qyKGY8yp+jz\nrn9zKoOp3Ixetl1on99t9eL+yFCyRXmQQX8Nsq+OmqsxrRUjVlU4EVs7fYX0\nmItsADelndrV+Tb8xA2NMpTekp9lQo6Ecypv96Ca76/qJh3B5dI5jmmhbT0B\ncanlHtj0FkFuvNiE2g9svjdfCNnYKqkJWtjN8OtS8hQuePnoC3eU+cOfribR\neDadyJk1763/iReHFsank3FnVHLifRhUOa/tvqJUgiD3m2KDx/QrHyDoGz+/\n9Z7cLeUhGz8c8fWEkSP6jL6Z0UgRt7hnzAS4Dy+spglQ9jXn8Ucdlbnv0svE\nZYOaXEe4g/smgkbCsyfkRdIKzEbG+BomrTd6XKWF2NCocyuDfQ4PxrKnKxTi\n/xOLDtfs2OMYUpudNOQg+z9rCGsjLnud9KZFPF8hWq/bDw1/iZNp5OHXxzkt\nq7NdGkpmrqxa6Fq7ocHvM9+lUjndM3D4ah0QGwTZ8fO3J4/zBi4pJ7SdfrYb\n411qhsVB4TccBHkLm2aJJy5qQB5ndfvIw/npI7oPhtg6RING8PCk66dJhvlm\nxocvp1P3ecKpXY10UhAgALriHOJj5qZ2ZTELns6CogLrpEBwc06L/lmRvbsz\n2k/n4JNX9mrxqRwpciMvCMY0jGggXRRbJOcLoG1LCx9zp2/iBCmk0VqvrRR4\nl75m\r\n=iaIw\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button/styles\";\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.**\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n**Note: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.**\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n\n**Note: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommended to\n always include it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color-or-map)` | If a color is passed, sets the default container fill color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`icon-color($color-or-map)` | If a color is passed, sets the default icon color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`ink-color($color-or-map)` | If a color is passed, sets the default ink color to the given color, and sets the icon color to the given color unless `icon-color` is also used. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color-or-map)` | If a color is passed, sets the default outline color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v10.23.3+x64 (linux)","description":"The Material Components for the web 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/density":"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/button_11.0.0-canary.8ecd7c9a9.0_1614109867123_0.5432672124376443","host":"s3://npm-registry-packages"}},"11.0.0-canary.9c85d505b.0":{"name":"@material/button","version":"11.0.0-canary.9c85d505b.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"3e5cb04b40ecb72d63ed8aba1926d64bd9e20979","tarball":"https://registry.npmjs.org/@material/button/-/button-11.0.0-canary.9c85d505b.0.tgz","fileCount":40,"integrity":"sha512-mhu287+fNrG8i4Qj5jDHLCWiyJC2cCIoTrCiQgN/YlqDTVhjLiJkEuz1sEHUFNsREDn2MrVgYwr9CnnMTvGY+w==","signatures":[{"sig":"MEQCIGdZR5Qzbh6nQzLsBA2sW/FZKgT6I3rM2zuOD9kqZID2AiAXv71OAOVepmBBfFp/5vvxFa+AXjYnpPshWU9J+qBqKg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":496149,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgNX6mCRA9TVsSAnZWagAAk34P/013JDkfRZc+cxhVxZCB\nx8V5zSNfReaCATxfF6Bum1g5DB+AIxOE+mj17Yj9OtHLPy1gofNIBiiHnMYG\n6Elvo2r+WGM5qBpU7IQyWLGrtWJog2xaafw0Jig7C+OHDQeoRDO7eQGHkyHp\n7ddssl+7H/bo20Bug30VOdPlJqlttPyUqFD2QJXNuFqYobrAvdb4bEXnQTVR\n2CBZAiDEJ9unehv+ybZwVorlmErdkf67Pd5PC/eQL+zgLsYsVZ7cg4m85A3B\nHrbXrtBtKw8YZsE7C1iZTSeWucK0KFPMsNWwwcmlZcEyBHxpSqaQzVaFibfo\nnxT7wprV+Uiky/x+yoWWQoMVOwRHnxTTkrs5iuGs08sGUJKs+AJ2zT6W2IRK\n/EkFKd+p8uopWAZV2j8ceGe69oQA0IfejPImp1rYoCIgZEf0Gi/YK0YJky8G\nJ3XxglcBHW5ywNYuODlrk5o3s+75Zn0/cLB7vSS2Q0+nJGwrUG8fQIQKB/y4\nwbGihTpmQpKgSV1rPbceRC3lAe2Epf4s5aSDOnfX7sXTQMYjdJqRm2q/M9gV\nDns52g5cjrzS4lLfZVmS3PZnKrKaEnUS/I8IBRRN6ej7VBq50FpiAnF7NRhO\nKEgp548KQJlagQqmjE3K/2lpPLN03nYr3CAQmdVKzurcmlpfFusrWQFbVIWf\nm/Zz\r\n=1+q4\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button/styles\";\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.**\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n**Note: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.**\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n\n**Note: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommended to\n always include it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color-or-map)` | If a color is passed, sets the default container fill color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`icon-color($color-or-map)` | If a color is passed, sets the default icon color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`ink-color($color-or-map)` | If a color is passed, sets the default ink color to the given color, and sets the icon color to the given color unless `icon-color` is also used. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color-or-map)` | If a color is passed, sets the default outline color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v10.23.3+x64 (linux)","description":"The Material Components for the web 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/density":"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/button_11.0.0-canary.9c85d505b.0_1614118566261_0.10604739688552023","host":"s3://npm-registry-packages"}},"11.0.0-canary.9f2e85fb8.0":{"name":"@material/button","version":"11.0.0-canary.9f2e85fb8.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"b3ad45c39b38d57812b9b30c90746235683b6d5f","tarball":"https://registry.npmjs.org/@material/button/-/button-11.0.0-canary.9f2e85fb8.0.tgz","fileCount":40,"integrity":"sha512-TzDhNPN6iNCYfS8yTVzhv+NHMbLT1jTffj0XnFFbWLeGSopA7Zx7MGC8FtRuJo4oNOAspWgBZeuh2bWOyFl64A==","signatures":[{"sig":"MEQCIAt1jWvF+dLD+S2ytTqTodho/0dnePihjtHznryMkldUAiBLpVU/Rblf5gzKVGPGH/sEYC0j2NKlFCqFNlskG30gvw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":496589,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgNbB8CRA9TVsSAnZWagAAhBQP/1bL7dJoyZ9BUWvlGHfd\n+iUS5jTLaPgnFx7HPtPVh+QGcelbf2zVZBntrR9s+j6aqx2ORb2XSvG5i9U7\nCDUo3jJRKPA0Rmm2y0hFqs2JSsOXw4iYZkUlkG/HvymCKCmFc0q3/XBfo4kL\nOydeE4jLwpJywa85GHEqFTTz8bM4EvnkNuuogbEkRRMreEfOYsm37Nuw59qH\nI5cOXshcQxKkmZdZVmqSs/JshiNgeuuou7oYkRtdkG3UpLoP4eyoJHAtr9Oa\nD2lJ3vSPbFYci+lfJeaq0tH+AWusfWbj4nqxkDe3GfSoyGAmZW59xT2+CIxZ\nXr9mHB3l7xFfNBh1UbusBZ8cvJq1ecwohckW7caBv8nycPiCYl5HJ6PyCopr\nHrdTdRZLUNK+Mv3cmIqd+Dqx+YOCtk5z26S6VyYqcvK5s8aF3+z6Ef8orLTb\nOHXDqVRP1tNXpYig/1HySg4xmtZunlQjhNWVJvO1uQJSAjHFoAUxgiMdcW4Q\nCO20Jzm+lHHyCy07GNtM3aGbvhuzeFebkde7sFRYMMK/nzEeyGZz8OlEDNl3\nmyorjhTG13DEcenoB+V320moLYwV2PFD1luvmF9eq+Ycx7tqnpxLqWiBqwX2\nRq23ns6Fifoh+tFxjnJDjO35xaJ3Ku2uc7K+LjwbIdXmH7d8v69tkYccp6UD\nscT0\r\n=gv1f\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button/styles\";\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.**\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n**Note: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.**\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n\n**Note: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommended to\n always include it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color-or-map)` | If a color is passed, sets the default container fill color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`icon-color($color-or-map)` | If a color is passed, sets the default icon color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`ink-color($color-or-map)` | If a color is passed, sets the default ink color to the given color, and sets the icon color to the given color unless `icon-color` is also used. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color-or-map)` | If a color is passed, sets the default outline color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v10.23.3+x64 (linux)","description":"The Material Components for the web 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/density":"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/button_11.0.0-canary.9f2e85fb8.0_1614131324415_0.4601797414230566","host":"s3://npm-registry-packages"}},"11.0.0-canary.19c4f29ef.0":{"name":"@material/button","version":"11.0.0-canary.19c4f29ef.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"b0d549bf133ea9f21622d2323d5c890264ead2c2","tarball":"https://registry.npmjs.org/@material/button/-/button-11.0.0-canary.19c4f29ef.0.tgz","fileCount":40,"integrity":"sha512-QO1AtFD2kWhXBSpqTE2+WWzmXq0X13QnxJE4k4rPim5jd5yy8Foe23326zYn/5XmOnyjjZmkwkLxHX4/j5NilA==","signatures":[{"sig":"MEUCIQCDMx6sUuDoHc6psA8womar47kVkaZ6pkZmkhzdK1cBfAIgV0ka+mKP7H7tlG202RxQfjL/wERQE9hSoBZ6mvcfjVc=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":496589,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgN/kWCRA9TVsSAnZWagAAGFcP/0VyrfDbJGFoBRe0N7D4\nMaqdYKz6Jtqr0/sTDhGv6/82KYuo98XsgZkoA/AYRxISHiaHWg5OoyT0XIrm\nTkzC4EkWsrou+pZ3Fw3oSGY2yMBxRHtRLmbKpRr01phvuszlo+z8tKQW8ZE9\n9AmtIZLTtH+DfJPNYqx/QLH1tN0mJGx6HHusS6iOs+a+m8h2VlCSFwGRRynq\nVQJMrUFzjex3ozrEhyZdCKVDn2JSYHHkFH45MoBvr1gqdG6IZIRkxPcqfx4f\n59lv+s7sVGBhyYWiiC2Ygcfhsp8CI4eQok7UTtCpNg5DyTKRXWgLbh4ZSRGp\nfQiSw5b5eGo8r61i+yNISUxkhdE8szkeHsrIrarx6URsxTBRwiOKTFwWuclc\nC/nVXFzbzWyNTjmevsns3dCR7dK8xgp6IBt0FRPUme4EOk4AThFfoijkb6dn\nXwWKnkfFN05UJUG0UAPZVi1iRL0mndYhKcbfandpa4Y/j0Jp+FfNNpDIdFS/\nfZtjOm//Ry8kDk9hZmqiu946LSQObmKShEAC0LedjojcPNIDaAFPA4jv6T1l\nG5RmwGw+n2bpnGG1qpHLmi3IZX6v0VN3Z3kra5UiGEf1gKZxr18y2w5WRe1s\n/rzNvkpSYPgMhVT6qvXSRkTd/kN98mVJoTFklkj13Og/elOMZ4kyPg2uMUpP\nTNsW\r\n=s+tp\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button/styles\";\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.**\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n**Note: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.**\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n\n**Note: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommended to\n always include it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color-or-map)` | If a color is passed, sets the default container fill color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`icon-color($color-or-map)` | If a color is passed, sets the default icon color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`ink-color($color-or-map)` | If a color is passed, sets the default ink color to the given color, and sets the icon color to the given color unless `icon-color` is also used. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color-or-map)` | If a color is passed, sets the default outline color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v10.23.3+x64 (linux)","description":"The Material Components for the web 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/density":"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/button_11.0.0-canary.19c4f29ef.0_1614280982164_0.9392027470987927","host":"s3://npm-registry-packages"}},"11.0.0-canary.63df6e9bf.0":{"name":"@material/button","version":"11.0.0-canary.63df6e9bf.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"4d505a947678e65cc94722d5239131a719472633","tarball":"https://registry.npmjs.org/@material/button/-/button-11.0.0-canary.63df6e9bf.0.tgz","fileCount":40,"integrity":"sha512-9hc9P2OII+amXm01vC3yqgBnndD6WPR8CKRHPtk8xoKzoxAYalXfRlcd0eA2M62kkFHmd+YSHALQVXFst1JOkg==","signatures":[{"sig":"MEUCIAL+hxGNgFrQiBpc8qpvvFXKF28MeW7HCprKNCqHrxDlAiEA6VbnekmURdEtMZq6jSpn7cubX2sznX3ZbMpnhYBaTy8=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":496589,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgN/yACRA9TVsSAnZWagAAYBUP/2MVSHLrQuBYzjUXl8iB\nqSZeB9c3zPOx3Qqj4Yycmsq8rZxFi6EkhDV6x3JlVy8vGPjRLOal5GjkLKPl\nQiUaYIHI57tfi4yrKrWSOb2g03i4ofjB37Gc4AgeL8slEtCG5fy2WeEl8Ypo\nXntD+fo9So3+ZN/ZbeGdh/IcaYn6vndtbevfbsPnwzI7+Y4h0uTKFQXl2C52\ncsKFe1W0l3r7EPtmst7u2RQGx4f3IefRKqCzfWY7+sjw/aVrCk7r2I1kLXZo\nSsKRrVdF7ogpTkaPSVP4kWTM0F++R44jbFsdhrCzkfmF5r5kus6D8BJIrY7Q\nTRKQq8/7tAFj8/wtSu7VgUeSNq3CwkOxYwSaYdLbBAKFxZaUUlqqG5FJXH1H\n1JYYC9SAIW8ocfnVQKfKnML71H1kfqqdgjTXY3kXsqC0vpOrywaugiCSYSGO\n0eJIIAc80hJdCTXOIikE5EyQOmKOI7CtLgK3fdXIwRocYxT/AJtJNnRigd7B\nuLSYgL1ULrp0v5aBI1PlytDzsEbYPh+VB/vwmojQaUccFCKb5JefgiJDh2LU\nmIqzLC8JW+K7XoFOreLIXcoLhXRAvS0hfPhRbrBoM1yF8PBcuw+BCboBNFen\nEqA2hul+DmsKj4BfA+WZtkOGwh/U742QWA+P1UdQ24I8rMgRwB8Qtl3JnKvz\nSUZ1\r\n=Dn/K\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button/styles\";\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.**\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n**Note: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.**\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n\n**Note: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommended to\n always include it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color-or-map)` | If a color is passed, sets the default container fill color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`icon-color($color-or-map)` | If a color is passed, sets the default icon color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`ink-color($color-or-map)` | If a color is passed, sets the default ink color to the given color, and sets the icon color to the given color unless `icon-color` is also used. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color-or-map)` | If a color is passed, sets the default outline color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v10.23.3+x64 (linux)","description":"The Material Components for the web 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/density":"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/button_11.0.0-canary.63df6e9bf.0_1614281855549_0.05867391734070426","host":"s3://npm-registry-packages"}},"11.0.0-canary.981ad970a.0":{"name":"@material/button","version":"11.0.0-canary.981ad970a.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"d0b6d0aaa255af7cb495f341a6ea1464d7764dc9","tarball":"https://registry.npmjs.org/@material/button/-/button-11.0.0-canary.981ad970a.0.tgz","fileCount":40,"integrity":"sha512-qkyiGs5HqlhSL2hNTzvm/fMHxw5MwZAUEGtVbZNG5WrZonzW2sQVZLpjcCbLDLGf5A9UoyEweXgdew4cQPrtvw==","signatures":[{"sig":"MEUCIAxhrymBmioGCofoyXqYhlqXAuFQ1HH/VIruim0oZVHdAiEAlOE0p5Xz0AVWj2udtgV3dfMHW4ytU0GJFkWek9zsOlA=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":496589,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgODvdCRA9TVsSAnZWagAAG9sQAIZ19aiMaQLjM31q21kX\nb8beYer1+HeeCIeRFXVIeZsMAymxnPbpUADgImIxUw0oQ0u/Db7WJTDt5tXX\nipTNl44/VgM7P/mlMlQRtyzH+/QzN0GbZZXBP8XdEETPVXea8HLpowlhZ6Pa\nX7q412npAfAyqM5+a4tzmF5irsEJcBBFbybJsWTc9oVC4Kd14PoRS3/1ZVQ2\nL9/0JX+xp2An+wXYODWxVMctrt77wusb3m2ngJAkd8ePZcSw/xeO4mX4nQvk\nhW3UCuK1CTljAKaDRXdPgF0CCwAw5b+eWdfGrGfAz2NSFX9GRoSdPAqWxJsM\nSSMMFLnWnu+URRI1U10of9hgyKPorMdSKSbIoBo8ku9Yel2RNBgEUDmIgsdu\nu7dtgDeC3g/yEu6JcrjXTmdX56TadKvVXdRB9dAT09jQcuHMb4JUTxsL58a9\n8czp2BEECHZi6Rs3tgH+qY/qWkVIWhzYmjciAOT0Ujj4AS5QditPm0H6mlJ0\nM5HSkZXJnFGs8StlRzJgQtTOedyNLiRIunHo3Src/t/g+cHCr/4e3K9vvIqx\nmRXLhcHiDqUtDoUTs6x5OKeTzsz4pSbcv9IlsyMTwRaDA3R7NLqQTMBSicMC\nS3SQGn1XKb3hVeEsM2wB83JTGPPMnRANEb1itEIuldZhO7Gk9Eg7kyJxV+4g\ntCF6\r\n=xbXv\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button/styles\";\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.**\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n**Note: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.**\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n\n**Note: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommended to\n always include it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color-or-map)` | If a color is passed, sets the default container fill color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`icon-color($color-or-map)` | If a color is passed, sets the default icon color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`ink-color($color-or-map)` | If a color is passed, sets the default ink color to the given color, and sets the icon color to the given color unless `icon-color` is also used. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color-or-map)` | If a color is passed, sets the default outline color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v10.23.3+x64 (linux)","description":"The Material Components for the web 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/density":"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/button_11.0.0-canary.981ad970a.0_1614298075251_0.9261944442576175","host":"s3://npm-registry-packages"}},"11.0.0-canary.f9c9e39d6.0":{"name":"@material/button","version":"11.0.0-canary.f9c9e39d6.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"9f6495d3c0a7f9818739737a99f2f1080a0c62be","tarball":"https://registry.npmjs.org/@material/button/-/button-11.0.0-canary.f9c9e39d6.0.tgz","fileCount":40,"integrity":"sha512-HSaM7S5/8s1YJKZhJzVGd4ftnpc3wCbmu6XtswbpOeMlYPkkUT+nBfYMon588rvgPnjHafEKYExKGSp3Cj2rEg==","signatures":[{"sig":"MEUCIQDicGpFezZdcV9+Q1EislIKdMEuyIihKLsiBs7g5r82SAIgG/3sZZB9VmtJaqVhdew+wGBiWB6+PXlqQggdzCVL4aQ=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":496589,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgOUBVCRA9TVsSAnZWagAALW8P/R6KeJVQhQIt4MzWslCq\nUpz8HJVonMVHTgSFVdhZg0ynVFl6soqWF35gZN4vYVetZHtYMp+3QUHOel/3\nxz1Jc8ZAmLJ2bkTQWKVCssGPj/GzJ+zBuxb7fEtBX7HRnL/UvJyzQtbrtTzw\nuC5XpTl+s8AL/unFWDAzXzT7WaiXIJ8wbrOWARztbiMvVPGsfDGnetbBausY\nGhKxeExh4DSxmdbP2x9wwYV2s7wzqreZEJgSpbU9Diop5QvAoICJsAsldkz+\nD8BBUo326wOqD8x1v7mNlOTK9pqM7XmkhQwUDXMbKI4m7BOYOkNbwRmBFTqx\nu4HhuSmw5mNKdUQ0tTRgyYVtsReFQsp783D8ZTA0gttJR+50mu03jc7MdpvL\nI1fs4gFIMm6zDqB7pEUOGKrwejylvax5RIOitnQinN1Uia8TttcAFdtGzxIb\nuD+71FcSx+D5j4gksljN9WJ5K95xCBDte5R+PPpi14iFIch7ZBCgmcfAejUH\nDOyIP/Wrz5HgRnR5ZBQjHqNfx4OP9dr/yE5ePr0ZEhXcg08GYNFV9frUZgbu\nCZWlbBkWoM6iO7JCfK/LsVXuICsFetWFPeByuahGWgPRmPUjgzjMmEEYoX52\ntquCdR85hxP4I3t99P73T3Lt+R+mA1WTZRs/ueYnPgGe/NvmCGRTW+t44ShL\nVVLX\r\n=nhz7\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button/styles\";\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.**\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n**Note: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.**\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n\n**Note: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommended to\n always include it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color-or-map)` | If a color is passed, sets the default container fill color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`icon-color($color-or-map)` | If a color is passed, sets the default icon color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`ink-color($color-or-map)` | If a color is passed, sets the default ink color to the given color, and sets the icon color to the given color unless `icon-color` is also used. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color-or-map)` | If a color is passed, sets the default outline color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v10.23.3+x64 (linux)","description":"The Material Components for the web 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/density":"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/button_11.0.0-canary.f9c9e39d6.0_1614364757362_0.21000588695422295","host":"s3://npm-registry-packages"}},"11.0.0-canary.c97d7d881.0":{"name":"@material/button","version":"11.0.0-canary.c97d7d881.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"fcd722d2265b9ba9316bed92e56299108bcfc0d2","tarball":"https://registry.npmjs.org/@material/button/-/button-11.0.0-canary.c97d7d881.0.tgz","fileCount":40,"integrity":"sha512-Lfh2CMtHe2ByXZe0p9luUkQGDXovaYcNPpJ7a474iiYUsC90oOa+bzxGyTOiu389mIy+shlE/AV9C3jgIayONw==","signatures":[{"sig":"MEUCIQCbeSod1Q5EjM89I4/dj6494BrLI++EVk5CKBHqta5UzgIgapnZlds7V2o0Tmo2T7+Ne05enxwU8S+XXGx2rTJ6c0M=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":496589,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgPVRTCRA9TVsSAnZWagAA3icP/24bMGgKoXGnuJ/PwAV4\nnGB8MctOjlXXDSCToU1E9f1YQYxtMuY2Or2ZbP34+zTEY3j9yNPGK1fsLd9w\nQSaWwFe9lhOAnwJUlwEZ/QZB/tWCdWdjfKkAkD2w1MaERr4IueoAHzg2SkhY\nkVSwBbl/uoW8bE6UZsHh0AnMl+c8uDnffwQVYfJ3JStfWdgCGN0Bxh6In7wJ\nHg/nIs4o3qmKaIk4htkOQI2x739uh0wZrby6h25Kmx69Lqo+Vf3w+SNJh+R3\nCmYLfKlvPQsoNJy3hmLVrUjaP1LZ/5OSw7zs8dkxg6RZxP3BX7XcJ0ILpBb+\nlOWuNQzCGORPY9r28b4VekghhMWejOByFnvO9su0A1Tu0YqDj7nRLMzsOaEE\nzgzy0SpSX9Ls5NsH6ziKM4Y4QfQe5VFvOQREDQoy9VXxAhz6tTxyb9tIA0YR\niyG1+bkIEVHR5RxQdN6PSKM8RbCcBUJxhf8gOhAblJFDbfmYNEueJESzTc6I\n0iJrz807NS9emms0PTQ8qK56DYN7IUozgrfTbYUtPNZwVhrBMBI/ao4+GecB\n0j7CkVjsj8GodVsi0w1F3BK3xPZKkaQRL8dhZ70ZxuTHVQBFk5x4mV1SOTCf\nHXW4FCecFlKO9wjIfqXHPybTNkReHL+3bVYwJcBiFhFaE9HjRBm/rnbcEpdc\nuomk\r\n=00t2\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button/styles\";\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.**\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n**Note: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.**\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n\n**Note: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommended to\n always include it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color-or-map)` | If a color is passed, sets the default container fill color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`icon-color($color-or-map)` | If a color is passed, sets the default icon color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`ink-color($color-or-map)` | If a color is passed, sets the default ink color to the given color, and sets the icon color to the given color unless `icon-color` is also used. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color-or-map)` | If a color is passed, sets the default outline color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v10.23.3+x64 (linux)","description":"The Material Components for the web 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/density":"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/button_11.0.0-canary.c97d7d881.0_1614632018670_0.8289142285129747","host":"s3://npm-registry-packages"}},"11.0.0-canary.bf670dad7.0":{"name":"@material/button","version":"11.0.0-canary.bf670dad7.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"c84c88ebe1741d55af1c07e04535d364a4dae4d6","tarball":"https://registry.npmjs.org/@material/button/-/button-11.0.0-canary.bf670dad7.0.tgz","fileCount":40,"integrity":"sha512-QKqar5dS/6xCRrFnteEIbGo3LA7CAwfytopbfyldoN1mRgqradhMAzG0+6GLg4vnGskdviRzXyJ2+XkwkVqA7A==","signatures":[{"sig":"MEUCIBT+M7UF92DhPYvZuYPbfH8oUDeLs8fILAZ0+Yw3TaliAiEAhZ7xaZ8Fn415OfcxEyQJY426t7/rgR0fywn0V/O6TqM=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":496589,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgPtaICRA9TVsSAnZWagAA9FQP/1nps7u5a7XMZrd+gIaR\nHmzUtzT2QyLJyX8FSybRmaxwRj8sSQaMBIa8dmqeShQBYqHnKrA6jGcZYdiZ\nzh/SbvVWk0H9ShDhKfLfO72Ln0Y80FGYYFmq3PQFB1++C8sbzbglV1f1qjf+\nLP4wMHzIQDJJJlCJKm7zOSiejJuX4mycuPseDNC7f44oCHmx2cz6lSq9XpcQ\nntELLf/9J7gf9C8BhoshE9FF2UWA71FOnyGAIA5z7U/cfvKPulLCBIMpPVTc\nQ8K2rpTaxs810h48Hmm1OVHZHmPh1s3BU+nX7dVyXyWogo2AtsgJiQVc7rxe\nIaMi2AA8p5VkOGV8zMwcNuGZFn1oL2ME5cMzRWWxrbPid0iwl0fhQBJScvxm\nDXTwe+3WCpWRGlUWOKXGqOAb2f8HYJCoyxmHUJYu4J7m9nfWHqK21pcNeuFJ\nEYqWE6KZOsf9+lchLd7oPyubiCnD3Tcap7+6NMeQ8+kVdm/em59+p0MErK8l\ns9qRM03HUwY/4EV051V6+kDFoQswTxFPlHIRS5Fxre0frzE/FJJY5byP8WiV\nqxMGtqsh3z9Bhcz9oCI9oKgITJjN3VrWmctHj9fwKNn+fGRSzc9X55WrtXPM\noHN9uIzwe8xbuAlWAjupYQd8AM9OMEqWZblf+u29GYEWs9ChmNE8/0/phSGo\nFZVt\r\n=Ipy2\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button/styles\";\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.**\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n**Note: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.**\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n\n**Note: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommended to\n always include it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color-or-map)` | If a color is passed, sets the default container fill color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`icon-color($color-or-map)` | If a color is passed, sets the default icon color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`ink-color($color-or-map)` | If a color is passed, sets the default ink color to the given color, and sets the icon color to the given color unless `icon-color` is also used. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color-or-map)` | If a color is passed, sets the default outline color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v10.23.3+x64 (linux)","description":"The Material Components for the web 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/density":"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/button_11.0.0-canary.bf670dad7.0_1614730887611_0.36943476183051605","host":"s3://npm-registry-packages"}},"11.0.0-canary.c7d98fcde.0":{"name":"@material/button","version":"11.0.0-canary.c7d98fcde.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"bbe1e21ca807e534cf90546558622e2d687a54fb","tarball":"https://registry.npmjs.org/@material/button/-/button-11.0.0-canary.c7d98fcde.0.tgz","fileCount":40,"integrity":"sha512-1rfsmUsBtIM2bNddAh7Ymp07OiKycoOMx4DCJqAomoi1+xvt85uVMsWNPB2b+jnVYRhonQ51FQMvBcQyP3p4iA==","signatures":[{"sig":"MEQCIEg5pntCcJn4CLsdHPyknVvM0F9K3jzerIRWOsM1DTX4AiArFUUf2VYBeIP/7PK8TTLwoEVJXDCv6iueGGGd4T2qnw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":496589,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgP/JUCRA9TVsSAnZWagAABwAQAIkuK1m5K1qt32LaTrFu\nD+NLk3X/gbjUUizLC4GWXsjLWmH0peN6oYgo9n0IA06gpqiGfxJs1UVb6VB2\n2J3betSqiWhm0DX4DCFd9FYDd4rNrZWIe5b2MnXqoao/XVwYMTR7OSfzPpvB\n1zE4DBsPYQxL3j2AXv5HUs3E460+7mc9Qg3wHKZOC0qslsXDhgZcqf/I08TA\nt/2o0YgSAzXpS3Izf50Dd5Bj2muojLcCAfYNJQQz/FksHDgB+NO8Ap8c8FV9\n99+jvAkYDqOOkOX6sOwf2d5lchxn6iyt4WXksyp9BQov33S5eD1d24vXp53/\n/VZulUlwI+HN20KdFrzoET4LL17ov18Baf99qhLYTXJw3kLQppTjq1y7y5GC\nqBF8v3HSyQHFLwUBJF+VUf6LtuNPy3O68kytDZIgQKbNSj8UeA4nXCNdnz4u\nkeajgiSntDMkrprgF/EgxaOzoOIo6tlBme9jCNQ14XZInBLgZE1qmCt6sXdI\n3YGGMdNTIzw0X8pBIHuscLd5FlwS/Olodg16U4lip/YB6u2nRvmcPY9fBSPv\nNLWD7vzNTZUofUbiSdLDUpX76cUkpepOI6d9U5XdhClyqx67FE1QkjQFM/ik\nyEPfoyYxyZlgara6wuoU0uz/wm/x6STOM9ENO5eF2VO9OuIePO/LTtNTh5/D\nzk6U\r\n=lfL9\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button/styles\";\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.**\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n**Note: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.**\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n\n**Note: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommended to\n always include it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color-or-map)` | If a color is passed, sets the default container fill color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`icon-color($color-or-map)` | If a color is passed, sets the default icon color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`ink-color($color-or-map)` | If a color is passed, sets the default ink color to the given color, and sets the icon color to the given color unless `icon-color` is also used. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color-or-map)` | If a color is passed, sets the default outline color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v10.23.3+x64 (linux)","description":"The Material Components for the web 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/density":"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/button_11.0.0-canary.c7d98fcde.0_1614803539796_0.396540659673982","host":"s3://npm-registry-packages"}},"11.0.0-canary.4fef8bc1e.0":{"name":"@material/button","version":"11.0.0-canary.4fef8bc1e.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"b3e850ea5eed083bccf83bf758408ab7b06318b2","tarball":"https://registry.npmjs.org/@material/button/-/button-11.0.0-canary.4fef8bc1e.0.tgz","fileCount":40,"integrity":"sha512-uaD/CvgaAgWxwYbJuIBrRrBa22e27Sbcn7JBWx2QobK890l+/C5b1Tfy5YNWq4jZJ297qp+v1XwN3mQhgOYwfw==","signatures":[{"sig":"MEUCIQDs3faHL1oZadA8DV/Z/JBrxcd6rq0UTjv87a+nv9WSMgIgCR7xmjbErOQ04dx5eMrPGhm013eaVMrOB/+N/Jp/0+g=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":496612,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgQBq4CRA9TVsSAnZWagAA3skP/0g7DNbXeMOeUrg/YhqK\nlq4e8vTzWpxwHlGL0OLYV+00mefiH1zUWp0CA4U1ZtQZgnUxrW6aTHYcxPcr\ni67OsWbNDLYFDsFV1o1ndg1lA4gaIIwQyicWz2MGQiKD5SgU4ODzkbQVGAxZ\nNoUYfIvfEV3dX9fRfZPEltMMerSDHDdS/ZF4wo0Ec/1FXW+fHxNE5GTNLrSQ\nEj2cocB/NTLlYXhlywFhmu7JuQfqC5Br0uAK9Z6vtU7T9czz/eQGey0HZ0Es\n4UyV0AJG3751qLnMWfbBOlgOs8I1cP9c0BS2QZy22ShG25a01fuDjPD6ywuI\nXbl2o3rkZoY963YXFDAVYLr+qWTkp52lz+2RFglPrvieT5dq4v8buiPdMJip\nldJvn9M9POvV5Ca3M9Cx6tStBvZVGVDiubBWF6vhjxgbT4fq8VYZ1O1m/SOO\na3StkALGpkbpryT6hVRQDzoNAIs8KZz/HbkH5LAtgTKfDo9DHU2xOD0mEssG\nAmOIGCsl2RFcmIqCwFg1wERwYvpb6GiCA6DtCOLH06NBoppcwDU+f7zmfHxG\nJ4tfofELmqM7NpS06Kd1eoPvh5JNLZREUISXeCAOhATjp2tK5a4vuEWw6/bt\nFxf/eVC5xOYr0WIWJ/ALwPNHZhblnQGIPPNRdeAYK3wEhw/46im5F2HhhojX\ntTEc\r\n=bocN\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button/styles\";\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.**\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n**Note: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.**\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n\n**Note: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommended to\n always include it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color-or-map)` | If a color is passed, sets the default container fill color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`icon-color($color-or-map)` | If a color is passed, sets the default icon color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`ink-color($color-or-map)` | If a color is passed, sets the default ink color to the given color, and sets the icon color to the given color unless `icon-color` is also used. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color-or-map)` | If a color is passed, sets the default outline color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v10.23.3+x64 (linux)","description":"The Material Components for the web 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/density":"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/button_11.0.0-canary.4fef8bc1e.0_1614813879433_0.16843189624336152","host":"s3://npm-registry-packages"}},"11.0.0-canary.afae3a3ec.0":{"name":"@material/button","version":"11.0.0-canary.afae3a3ec.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"dcfefc000798a1b03c66d9ae181aa487f082eff5","tarball":"https://registry.npmjs.org/@material/button/-/button-11.0.0-canary.afae3a3ec.0.tgz","fileCount":40,"integrity":"sha512-HIY57V5rcJbpfEFMGN0UuqdlqGUQi+0K8IMOZya8rawDBxOjaBp3m6QTRAEYeSVzEM8tgVIAn8qQY0AtIAdREw==","signatures":[{"sig":"MEUCICptR44cndZiFHPBkhCz4Bhvyj8WDoJXJxT28D2jF0riAiEA5vvChXtdIRUBFC4jlhrg4k3r9qJW9CdbVnH+A7J8SrM=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":496612,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgQB7uCRA9TVsSAnZWagAABncP/0G+FTbnD/iXSJHx+Mzu\nrtfZUfCPUxQbM5mw0M5ZG9bm4KUnD5AOC4se9nLTtc69ONOZHmnYM6I1ScvA\n3fOArXN0xlprfC2CdnT6LEhGhFIG5IJsbWgM9OCzl4zvDXeK/ZGVxJcPzsg6\nWp661PZSoql4giu9mkLvMFXVMx+INHvbHzOm8oMBxJUuj13I/6LI/kRuE+yU\nyMAJv7rFNDvlwrWqy1CeTWVEvWceIC0wPgwTUqyrI1uLp9eNf54UzQF+zGgB\niO13DmAONdyDI7ipQvOXsYmiPyl2H+m9v2ATwNOOVYf5ckfAeUc7QF1zh3DB\nGx5eYP3aPZl0iAKbA95pUKuQxFMcEMkaYbVa5x1t/veXxUQ/1HRXT7lhQ6fp\nNekebLQ8HR4dMAYg9akMR3ynZslC6KeCdEZhA1GokFWgLB5CyrOwyxMwcor1\ncyy5sYXT9PEKjfxpCZ6w2F/GxCX3Mgpkzp9DemU/ZR7yYg1EYNbiRsWIDGVl\nb8VwRd/SKePc7tFKn8oRD4AQFTcbqQB7+cAf+kKgyhAncmhMVn4SmZgQSQvU\nBCjBovHKFL3mv89aG9tT2OeGThYbuclfvyVUw4vTpAUR1PKAS7PX9e02YFwG\nYC4upvsM0//OTWdsqe0XM5/sUsMCBmS1VWXjjCTduUQYYvw7e8kJzFtVwVOT\nL4Mv\r\n=VgiB\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button/styles\";\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.**\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n**Note: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.**\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n\n**Note: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommended to\n always include it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color-or-map)` | If a color is passed, sets the default container fill color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`icon-color($color-or-map)` | If a color is passed, sets the default icon color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`ink-color($color-or-map)` | If a color is passed, sets the default ink color to the given color, and sets the icon color to the given color unless `icon-color` is also used. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color-or-map)` | If a color is passed, sets the default outline color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v10.23.3+x64 (linux)","description":"The Material Components for the web 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/density":"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/button_11.0.0-canary.afae3a3ec.0_1614814957758_0.4160170080947294","host":"s3://npm-registry-packages"}},"11.0.0-canary.0a0b10f22.0":{"name":"@material/button","version":"11.0.0-canary.0a0b10f22.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"d14554596bed32f777a51fe7c4ff1a42a6be832f","tarball":"https://registry.npmjs.org/@material/button/-/button-11.0.0-canary.0a0b10f22.0.tgz","fileCount":40,"integrity":"sha512-XEqLQaBdk5yIAzc06qY4boBux8hSloSMBz/MmjPtROjXzbny5i153ENl+znrzhtHIYtfdbhU1QWt7naHgRE6kA==","signatures":[{"sig":"MEUCID99E7yD+Eicrgky5jYj+kPpX3CFOCe3e1KTf7KOxs38AiEA41VW/Ijq2qHViEvdk9OnZG1u7o/GaO6NIKKXPx31exk=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":496612,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgQCNZCRA9TVsSAnZWagAAAZUP/2JqUsncg6fjztN4NCuT\nUUgsUk44kts/3JHpYjxY/uzMjrOQ3dOgtSdf8iGz9xrCJSGrjGBVEXDA+TTY\nC0VnqINEBxw4cbvegCrtFq8CJWq1QIiP05bexXHFWr1HQ241KsZtPyqUVN6j\nvtTb3yo5OkDf7TSMtRv+RIUI4NpKvG+QTsGs2bnf5ixk271ZbRnFPHQ057Xj\nGeCcDw40Bcayl1jVUNorqzreebBzFu1U4KPnaVKryYkeCWEnOFs76cOKA3vP\n3pT9efYYkoCc1i/BiPFqGy4bggGWIOQwNh4R+gZoLo3GavIkeIVwTSxsdsCb\n/XTdc9BsekALen8yAFfi//VvbKu57JW9poiyNPMuMtGE315kSEhE1j99NtBj\ndtdMOZT9dRdgAwL6Zf0kSgWLr9a3mYs32s2h52gbtB6TOX4pAHJEYccusDAW\nr4dBM1Kx/oQbeK30gKIRBuoDYCWoobsnHxNM3nSGrcPrwccdxOOldTPAHxw5\nhrH9u/gfiuf5ylyOjxcmu9h0KTP9qItgz1BP29L71ZCOWLGmZ+Zi71j83e9+\nPTc4slnj4d8NGrJldovg8vW4ciNyZJ0K1WeaeuakGCI9udGxFZ7R1OBBDypS\n48X/dErrGPCOHqjAbFQOGfMnqvilvhlP4e5zB3PBEublNbw2qoonyZczTrpC\nQMFX\r\n=RTtj\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button/styles\";\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.**\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n**Note: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.**\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n\n**Note: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommended to\n always include it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color-or-map)` | If a color is passed, sets the default container fill color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`icon-color($color-or-map)` | If a color is passed, sets the default icon color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`ink-color($color-or-map)` | If a color is passed, sets the default ink color to the given color, and sets the icon color to the given color unless `icon-color` is also used. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color-or-map)` | If a color is passed, sets the default outline color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v10.23.3+x64 (linux)","description":"The Material Components for the web 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/density":"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/button_11.0.0-canary.0a0b10f22.0_1614816088566_0.3294830758247589","host":"s3://npm-registry-packages"}},"11.0.0-canary.6f678a91a.0":{"name":"@material/button","version":"11.0.0-canary.6f678a91a.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"a0faab45e403d3f79de17b3538bad56ae0bc3c7c","tarball":"https://registry.npmjs.org/@material/button/-/button-11.0.0-canary.6f678a91a.0.tgz","fileCount":40,"integrity":"sha512-5mda8AGrbNEmeVZ7NOfbljpW23QOAnQ1C4liav6MvNBPhx1zAXf9QO8t/HuvaETWdbD61sVoJUFCBvWMHk/vUw==","signatures":[{"sig":"MEYCIQDCdVk4Urz+/iXbuLck0IdWFgjblWNxsBnDhr2Zaf3TawIhALYxhWjvWhpvp3d1TNHQFoCbXfk10Ha5LsBcrNA6hpk8","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":496612,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgQSmbCRA9TVsSAnZWagAAzUYP/2KFFVDPStEpYNcwhCQs\nekp68rNzpe1KDwzszOWvun05hyXVcx2ibvoMZICWUqpMZufgX/Dvu6RS8JkN\n6YxgdmwoaNl/DzJ8EqAgBjPLjkSYRnkJai8lDJuBCMgjKB8atxgbHeckAXZi\nQmUhHzIyYiqxnl38B4SEPFXiYJhq7EvAY9J6W1IOTUNWj/jPnjyGFMo7JByj\ntinycbaavIZ5SaEc3AIO5FOoxccz2FlYFxEBBIEpZjOD6/iq1WIGS+Z8Xwjk\na9VRI8axD8ZlNsOdiR2xFx+486mn8wvzOwx6SHd1+A1J0My4dScEsSn4BqcY\nuM9LLivA8ZNDMYKbHZe/PcJ6TGIUDmfYmh/S2+ShEPm4CR490MYBGax1aqac\n1Koc8gYtTg5EZBF+uQ8Fdhxc7c62GeLCJ+L13jSR5hqRIp5prb5p8R5WqnLP\nkYiGHy1+1t24qQ6ylSd+NVufmznPfNIK6VnfQSxuFFHGVj+uybfvC0y6JEys\nWAFHCasEMHJqCpkmbsJA/TdUkfjhusT6XugxAwKraaA+KbnOlEt9w7RDR71l\n1hiyXmbplOx6ipXRORk2bpfY/GlCr+ahDHqecqmx8KBii13Fp419Ko8gC19W\njRuaTT+Tvk83xLBo1uuUzZ76e55rulkDSFlk1nBn4H+ihbkuM6H7s5wUUOQf\n21VW\r\n=zKzT\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button/styles\";\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.**\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n**Note: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.**\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n\n**Note: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommended to\n always include it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color-or-map)` | If a color is passed, sets the default container fill color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`icon-color($color-or-map)` | If a color is passed, sets the default icon color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`ink-color($color-or-map)` | If a color is passed, sets the default ink color to the given color, and sets the icon color to the given color unless `icon-color` is also used. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color-or-map)` | If a color is passed, sets the default outline color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the web 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/density":"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/button_11.0.0-canary.6f678a91a.0_1614883226973_0.706402182369142","host":"s3://npm-registry-packages"}},"11.0.0-canary.f5f1b613c.0":{"name":"@material/button","version":"11.0.0-canary.f5f1b613c.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"9f6e26fe6cceab220efeaa9fe4927a36bf1ee78d","tarball":"https://registry.npmjs.org/@material/button/-/button-11.0.0-canary.f5f1b613c.0.tgz","fileCount":40,"integrity":"sha512-dcW9gkhDl0RU62Z0e1UsDuDqzBW8cxPlN5SDCmL5ih3aImeFi9RVgjV+qBaq3KJ6OEGw7LPKSU717w0HhvNyCQ==","signatures":[{"sig":"MEQCIGtdq4O+COG7ajb4ugcPvF/HUe8aC6ZwDOL4BygMiQILAiA89bYdwHeI8tBzGTHLXA/7vOj0Skv8NvzfLkTDXlMhJQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":496854,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgQUf4CRA9TVsSAnZWagAAt10P/2M+XhXokFYk2GsXqWFO\nQSabkq6Or2bAhNE37FWgCKi8PvjyvX/yOCdzrGpNbhDiApj5KJB7oq5abgb4\ntl2MeBvcqKnZiaRLudEfQs/yxl80kWWyQL3kFckYFI7R3XWSdSGKHQydxyfd\nlRL5qr/aEooQ1uqbFfWJAciA8QsBtUieBsEHnZsttCD4FFrkDFGtIy41gMjK\naxt1GGIotJAxEsZFDj44i5hNkFsOj7f25kzHGoXwa7daaM8SkFN1oUDbE6Jr\nmGwRDtzZ5Fu+FdnpUKqsSuTnFC/0kzmCaUqq/HZai8mgk2JUAxQRnfwyjaoI\nwV1p8OuZtNwujmn8+I1aMcw4dUG1X96MnNTYwYp4moykL+CcEpWgYXZbU1L1\n/k0kQMQ6b9kvfYPm4q4OAYh9sZgRzFnbNdzAp0U3MQto0RgUhujf9jUJvSXa\nMaECBOExCYHCRI0UmU26eBXMtjcu47nfwavHjaK+PCWYi8Af43y9xqr97YZ5\n6hCiJWIGeCo5mei4yyN/de7Ry6Q1BAzuLg+wTu7iuIE1S4ffwgl2CcKmdjdz\nLIPQZ0qj/AcX2sel04+niYZgtbU2I1FWIbIBnryuWbvHbZ+L0RMhFUR0Aoub\nJx40fkP+55DoDjOOtVz2HM8+r70EaBFJPwJHDsUwTwKBcU97kct9t1TbCVg0\nArCP\r\n=HtEZ\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button/styles\";\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.**\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n**Note: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.**\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n\n**Note: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommended to\n always include it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color-or-map)` | If a color is passed, sets the default container fill color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`icon-color($color-or-map)` | If a color is passed, sets the default icon color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`ink-color($color-or-map)` | If a color is passed, sets the default ink color to the given color, and sets the icon color to the given color unless `icon-color` is also used. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color-or-map)` | If a color is passed, sets the default outline color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the web 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/density":"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/button_11.0.0-canary.f5f1b613c.0_1614891000322_0.9500795322168065","host":"s3://npm-registry-packages"}},"11.0.0-canary.606e767ef.0":{"name":"@material/button","version":"11.0.0-canary.606e767ef.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"66cfaae96d40b6d1f6f15dcca0646bb4de6ff507","tarball":"https://registry.npmjs.org/@material/button/-/button-11.0.0-canary.606e767ef.0.tgz","fileCount":40,"integrity":"sha512-etunt4V3iovkeU4A/TkoQ/e4nYf7vtdz5EBJKRThFtV1SUBk+KslX5HdnDsfKb0qpbyuJQZQEA2gvFaKflSHXw==","signatures":[{"sig":"MEYCIQCmHbBh3ulx/LHxJ609/9/dhpT7S+l0ucHu+jIDgG2xhgIhANIfhxSEuVuUtnGnPp8cq4fFqMRGR1xinGoqrpjqHvvy","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":496854,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgQVUhCRA9TVsSAnZWagAA6IkP/3TlogX3nxxADqJN1rjA\nk/d+33my0w/v9EX5pT3wJl2R5x0ElQSb3s6eBVrEvCEWx3hZR9X0ir1Z4Y89\nYl++RL31r/JBRDvAAkYX8MI8KWGk1dU46U4LiU7K0La/nEVnjc9kdTKIReV/\nqdr3E8pNwJozy81bI1kMOs/HM5ZmGrF0XX1GUJF72n2H3VQPSBsCj2SduGFN\ncY+Ukoc7RDRn6FJJ/j0x+C/68+K5TUWIR20FlMOj+bVpo6fjehliDd/Zvd9y\np2qzLrXz/ImDoF2+oLJuuc+CQdxc7chc4XYP9Mv4lEDBa2qn0EVKxdeI3G1P\nuVQivHYzLBtvwPiHOHARcsdwZosPwonyx99PaqD/LAsyLuZUnu4qHbi2XUzi\nVYz47uotA14y9FpAGpZed63RrwoTwHc7BoBlTIaj59s/aNHCYJCMOm5DIP7l\nsKV05vuEo/cO7ITPukp1cmw7qrKrHVvMPuKIIOMo8qtci17DdH3Qcf0J0zkY\nYx+redwvfAttvLLScxBDQSUN67cHrQ4Vfxi2ZDX/FH8hOW6ogwSlpsDpU5t2\nfdUQDTAz88Q/N9boUmo1F/YD7hKx9g/rw05oxMe4tX8ep9uDfM6PSUjNwPXO\njJ9iHGz9gb/MSZOCfZp4+f0WKVPfhi3ddEfodnYPrjUB/9YoovNKd2XNIApm\n/z3i\r\n=5fcu\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button/styles\";\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.**\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n**Note: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.**\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n\n**Note: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommended to\n always include it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color-or-map)` | If a color is passed, sets the default container fill color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`icon-color($color-or-map)` | If a color is passed, sets the default icon color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`ink-color($color-or-map)` | If a color is passed, sets the default ink color to the given color, and sets the icon color to the given color unless `icon-color` is also used. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color-or-map)` | If a color is passed, sets the default outline color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the web 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/density":"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/button_11.0.0-canary.606e767ef.0_1614894368924_0.6133725913164025","host":"s3://npm-registry-packages"}},"11.0.0-canary.f77a4dd1a.0":{"name":"@material/button","version":"11.0.0-canary.f77a4dd1a.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"63ffb489bda940d33dd255052b5f26c61ea277a0","tarball":"https://registry.npmjs.org/@material/button/-/button-11.0.0-canary.f77a4dd1a.0.tgz","fileCount":40,"integrity":"sha512-hjgOxs/F3RB0oDTM2vYQGC4G8H9tg1iUFlTlX2fK28pAC7AgzcVEqEYCQNtAusZU2SA9mx/eMtiY7niLRYE3xA==","signatures":[{"sig":"MEQCIAjjT7kjYZRPEoCjS53Of0twNo6C+mAGnYib5t2krL7kAiBd8ow2NlgRnHPra70WDYxMX09CCULxhyO33UemfVSXJQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":496854,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgQwe0CRA9TVsSAnZWagAAdXMQAIhEUS7sWhQjSer8Fizk\nOpGbFCor5msDO4bDJZkkTZEQ73BlK8NbRpahBi5QRNBTIg50TO2DSZIeXSPL\nd47jWlMns3OygtoAAhqD8AOZqNmC0zH2tzM2BGpI1FaNJ0Gc13QJ2zX2YTq5\nX9cvi7tSW2o2hZjmTUWFEd5db5efBWsxpX8JEh3uT+jWKLImcFwSI5D9Xp7Z\nYkg27WBWJ25Fs3OK4Iwpvt2Ea9mVt7OY/OYInTqCZVITWzxSIhkRyHxBZi+x\nVCX2xXoWVUagBZ4MNQuCi8+3NM4fbujzAAFflRfdwbftL14AqStD3Js83DDg\nBMZ2rCYRLK4vxtd8olmrrIDqrb13j9Xy9tP3C3mYKJ/6/bJzX3pn6gADY5Wr\n/gAbdjxPPbJoVBSHVgRywYzJq4D3ecIzZ6XtqebGM08ERNzmsUPlfFsUJ1WD\nJd9UI3Oszj5dTd+I/v8TQllzVt00M8Xegt0IGD+MEwrgSvTyhWwo0AoDL8aI\nuPRH9LasZpwfaoXQiGhO4cL8+c2IkuV77UlTfPAKzWEYoa43GPv/7QGVPGX6\nQZ4tX203S/+U5mHfdBM+Mc8NEzivFC7J2mr/pb7qjCH5JGy08mDF+5s1qxA6\nfVyUD6SGsgh+NnKUiaOfGuu6NbRqGaf9mZzpx5in5vuTa99Zum8WeiG7p8ub\nhgGr\r\n=Xb9V\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button/styles\";\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.**\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n**Note: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.**\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n\n**Note: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommended to\n always include it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color-or-map)` | If a color is passed, sets the default container fill color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`icon-color($color-or-map)` | If a color is passed, sets the default icon color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`ink-color($color-or-map)` | If a color is passed, sets the default ink color to the given color, and sets the icon color to the given color unless `icon-color` is also used. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color-or-map)` | If a color is passed, sets the default outline color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the web 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/density":"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/button_11.0.0-canary.f77a4dd1a.0_1615005619481_0.5734941648320704","host":"s3://npm-registry-packages"}},"11.0.0-canary.2d6ba2c23.0":{"name":"@material/button","version":"11.0.0-canary.2d6ba2c23.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"b9ef73d72194ee408cf7e8e2e92b0857645f83d0","tarball":"https://registry.npmjs.org/@material/button/-/button-11.0.0-canary.2d6ba2c23.0.tgz","fileCount":40,"integrity":"sha512-bVI7Gmuiz1gduNWBi4hW1xPoakif+FF3BpqKQY00X+5szfNVI04PZAdThTl23TWi3f7mkvDKEYWoWxghvJnSIQ==","signatures":[{"sig":"MEYCIQC6HMr/K5vVKd83KTFabK+UIg7RI8qvl3c75eGgITJLXwIhANDd9UTG9KB2pVJ3/dubItYZJu1Ye7cEhJndPopXtltv","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":496854,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgRqjTCRA9TVsSAnZWagAAuLQP+weWGNE1DcQxMbN6YTkh\nDTjeRoOc4VL9RQGUsTaIwIAQLLiASaE/8mmyGBBSZHaCvttabQn3rEpAGoXZ\nqpBkaBtyuaoF5h6iu7LSPjDuw6JCNVufkkq5dxWJWure9ud9hIoD/Bjcme47\neZRcGU7+TLZohDj0byjygJgFv9h2Oov5HA2fj5Y7hIs3OhGQU3k0W6EgkQIx\nzi7AzMjomjxBJ6pQEvjbvNx6MKbeVTp4xYy6mkfXeAiGe4z/Nki0DRtFLCuA\nNY5V6po5/VzdIo90ZIRmtsgV64skrYkxfMaPxEl0hqiWhi6R6oWymBAUTeLv\nvgQ2B8Bf/pfsCyyv1Gyv+cA9wpKj1H6OBrmjYP+7EOrK+g5MN3RvSsa9Dyjf\nO2QUK9KXjlsz3/fVa7QKFy4Ileo3nkWeNJZIsg7DGJLjPwc/MgDdiS+BBB/D\nnSZ2xIuVesGPGn2wT1nKBzQ81D9076fJNO00mejnzWbXXE33tthJ+x/aOKIK\nEupCxT++r7aC/yOSFP/a8CXbHBA9OtaNCH+zcbaeswvify/cNh7o+Crl0Adp\nS7os0lmsLWi1rbXWwWOsonXVzMauECfgBE1cKEFQNQywzhY7K56fuyC3inc1\nezSSib8QRfDfhfIUbIPCpg/4/wIVdSfG1hBm/kvjFxX3yuoVzF+dfxxY4GyW\nNI9R\r\n=aA52\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button/styles\";\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.**\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n**Note: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.**\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n\n**Note: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommended to\n always include it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color-or-map)` | If a color is passed, sets the default container fill color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`icon-color($color-or-map)` | If a color is passed, sets the default icon color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`ink-color($color-or-map)` | If a color is passed, sets the default ink color to the given color, and sets the icon color to the given color unless `icon-color` is also used. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color-or-map)` | If a color is passed, sets the default outline color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the web 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/density":"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/button_11.0.0-canary.2d6ba2c23.0_1615243475365_0.6528930505247124","host":"s3://npm-registry-packages"}},"11.0.0-canary.7522dcaca.0":{"name":"@material/button","version":"11.0.0-canary.7522dcaca.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"3f99dd25ced46fe5b633c3d2e5f7c71dc359e701","tarball":"https://registry.npmjs.org/@material/button/-/button-11.0.0-canary.7522dcaca.0.tgz","fileCount":40,"integrity":"sha512-rSqZCeio/Or6BedvxzUJoinU5khUFnFBS9JmLuPjrphPzQBmr7EjNavIuBWlFTD2C/LXuRlBKbJB+JHkbBJBow==","signatures":[{"sig":"MEYCIQCMI/NUEmZ2ZGsL0b/y8DB78cnkypXbCnT6Dws8tp6kfQIhALZQwAshIPCyggpPEgJVNWmauVWO1LOMDqukv4ODVUBv","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":496854,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgRsEOCRA9TVsSAnZWagAAqA0P/RxRic/Hxfvlpp3JIzs2\nTAOaQGd3NJHdn1c8NojfKCXQo4PqpO259vkGagnS/NEBxCkplZs8gPMa6K9m\n2duuA6/UtXYhyz6KYcGjRZM+gXsMFkVKoV7zxeeHxeOkrBXXlXkr6sG4XRQo\nxX34qXw5LFtWXWIA6GkIjYhts8YrcI0wtvrRwD0dPCLsg6BHPAkSlIgBaOoU\nmK6zBPUdiKRCeTVx86zB/pLNwihdcxNxDGvfAbjXZVYMqeyBUSQQUjrQzs8+\nwJDURE1ikoUICHZAfs3ceiEQMYIC8hb0JP0/Va6XGkxL95bS1q7q2/yuSb1F\nqlC2dnVopYIKytCcRw0V8O6l/015HM9l+g5eR60539WLzBLC8m9gI3D6RVjw\n9kx7wScInLBV5qFiXIb0TVFUgTHHo9mxiVGqO/nlTuo6T9UAqeTm2ig0ZWM+\n+ta3yWmE7X+iIjcLxJBpmj+sifyu4laYzvNv5vNhfSObSO79e02BIfVfYW7S\nVg+NYd1dMARvjB7i+k+D8Q/wq/k0RvSI5d/AEcBIxThp2d0wiTjHPq6NjOQ7\nkzrRXcOo0G9388XPhU6lfDNWjLMuPrB0OkilKv0rVLvX15DhM7xPbw45PdRU\ntFBrG8bc9CYwaMcxptOlPcGhQjFGis71uUgtb/szSBmt5ZgvFTkU90nQ0fHF\no1sW\r\n=WWBo\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button/styles\";\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.**\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n**Note: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.**\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n\n**Note: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommended to\n always include it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color-or-map)` | If a color is passed, sets the default container fill color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`icon-color($color-or-map)` | If a color is passed, sets the default icon color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`ink-color($color-or-map)` | If a color is passed, sets the default ink color to the given color, and sets the icon color to the given color unless `icon-color` is also used. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color-or-map)` | If a color is passed, sets the default outline color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the web 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/density":"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/button_11.0.0-canary.7522dcaca.0_1615249677624_0.26750564741179783","host":"s3://npm-registry-packages"}},"11.0.0-canary.5c0ab7401.0":{"name":"@material/button","version":"11.0.0-canary.5c0ab7401.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"0ffaa810798fbb9422cd4bc871b6d26345dfb42f","tarball":"https://registry.npmjs.org/@material/button/-/button-11.0.0-canary.5c0ab7401.0.tgz","fileCount":40,"integrity":"sha512-x0dPN0MdHPz+V7kSiFq/3ApeyYOa4fuGKLvLJG+ZwdYhKsD1p4qjGaSab5t4Z8qEN4mDljZ5ofTU2MKtsqR8RQ==","signatures":[{"sig":"MEUCIBhiLV835waE9d9NvN6ND+/+VcPaEF+F1QQ0LFCNkOy/AiEAmBOwonhBDHP4SoIatQSgfXdPh07RbVQxgoLjYAbSJvg=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":496854,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgR/w+CRA9TVsSAnZWagAAIXoP/RntvlVVlr/bH9RxidCr\nMIE7RmqF+PId3+nLy9/XwozE26EpEKLDJ9gkvysi7j3+g9aRrTsSpycSUKvH\n9FvbHeRaqeV2T2OubvFPygXJFpO1NFFIg4AdqbR3ldN5ToavSeErD62DoRLI\netv8CoWSsZv5MkqIyQRzysSIGAZwizC4WRaIAyNQ48PdjiuF0LtNS/8rWDfS\ncR65Zf6Rv586mYwNEBLCuWGTuPytH8xPt9c3lrPWxniKpKNq8K3AeFSqDWNl\n1bVfyvYZAOL408hppbulWINzSlvfEpChc36YrQJPLZsx5ZcxFQc9rKpSTyXI\nit8IzjpDFgZbErPEVIDSBk9wEEc456ELPJsDmugzwgr8RswSb36jID2IC22y\ndv0/k8XZIz09fWcvKotmVtzFTVLt5Tw4rX9ylt4woyUvxSXsUEcSSYRGwvrd\nUWF/6PiyjVWMu2BQJWSy6aJ8dzMSO11OxYFdRA0DnK6RNFeOHO+0Raoc+28o\n/bLHFG88ISYY1oyiFFlv5bCqlUL/IJcTGUNsE/E1sdOihH3B8+xX1qHiBt0t\nipFbBfo+fTtONo2zobU4nMQbHaMP1TkpgzsjK+p6ZH1ScKVdEmnC0vX8BMTa\nYquBigsSc7mYpY/L55RtzxziZxdNYE2aVZKfM8pVJUlaHk7jE6HC5Y7xuWlj\nZCtd\r\n=W1pw\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button/styles\";\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.**\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n**Note: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.**\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n\n**Note: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommended to\n always include it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color-or-map)` | If a color is passed, sets the default container fill color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`icon-color($color-or-map)` | If a color is passed, sets the default icon color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`ink-color($color-or-map)` | If a color is passed, sets the default ink color to the given color, and sets the icon color to the given color unless `icon-color` is also used. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color-or-map)` | If a color is passed, sets the default outline color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the web 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/density":"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/button_11.0.0-canary.5c0ab7401.0_1615330366399_0.17860069994761507","host":"s3://npm-registry-packages"}},"11.0.0-canary.59010b6dc.0":{"name":"@material/button","version":"11.0.0-canary.59010b6dc.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"9148776f78893e2c7ad65abfe98ae74344c4207b","tarball":"https://registry.npmjs.org/@material/button/-/button-11.0.0-canary.59010b6dc.0.tgz","fileCount":40,"integrity":"sha512-0xJ5FFh9vNCnIE0IhOBh8u16v2CxNpOKWlcFZHZnbLHA0bD3RtojaG72UgC8qceZ448woijkU+F70pCL/JivpQ==","signatures":[{"sig":"MEUCIH39rvkJnWcEUvV+VitPYbMFRKfb1hoSm7Hs3vgJqJ51AiEAtcHklFdPjZzPdmrAm6sRn6Xd387aLUsV1pmiDi6I2nk=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":496854,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgSPqJCRA9TVsSAnZWagAA2ZoP/1qfPkNMToA5ioPaSj0H\nkeu81G7EofG0YddgrCqw1HLeZpdvOWC83SS0U0+OuSfpAjRJr1kzG0ocMX7q\nD9RT7LwojNPc5pDtRZWpRi/y5U7ltLLlE2rawCRtZGU1qrV46I43GUbfB4qC\nTiDiYllRQHgDPLMnpmHMPoHnvn+M/mDiv6uRssjJvyD41+2dSDWgqx76HjKz\nfJh7tAiWFw1cfA1VnNZKcL5SkvSgE/vX8xJ/t/oIQ7fO89DH76oTZL9gJk2O\nu6zIenoLx570GzLW8hl5TLmUnyAppBIV2nVnuA9NQE5Qpc9grqyCA+QsDyNm\nFKrlxQScH9xsaCd2BQfEEWV2FFPWfAIKkYQCZWf6XV7UTw8pw5RO5S6jK/Pk\npFxhAwtJgYtbbwEigmMiqH5YIWKGYlzH+I4qTnfWE1kMdUmMAXdHc+Pr+dcO\n1CIGcA8U+05q3tJqT6fPDwcvhyOtnqk+RCCGrkH4QXR5fUAuA4vqvJ02cRSc\nIpx8r2SrNBQRJQrr20Enyfe+TEsYXuGLVi/50RKXjF2lYq8hQVPwajU6CvqS\nR/vOlWeFhFBe8bC30gsFGG1nNZ3tnJ3jNenHpaASTKPXmBPr6gYzutv49Erb\ndPKqb3m+h3PF2gQAWvPlz00Sb2V1HFQrEheEvw8UDwSWGhimzIvCK6D+h9Sy\nhQ6d\r\n=9c1m\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button/styles\";\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.**\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n**Note: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.**\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n\n**Note: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommended to\n always include it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color-or-map)` | If a color is passed, sets the default container fill color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`icon-color($color-or-map)` | If a color is passed, sets the default icon color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`ink-color($color-or-map)` | If a color is passed, sets the default ink color to the given color, and sets the icon color to the given color unless `icon-color` is also used. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color-or-map)` | If a color is passed, sets the default outline color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the web 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/density":"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/button_11.0.0-canary.59010b6dc.0_1615395465186_0.8587079004578448","host":"s3://npm-registry-packages"}},"11.0.0-canary.9e52f5544.0":{"name":"@material/button","version":"11.0.0-canary.9e52f5544.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"2c52746ce5c2de84dd923c8fb5255ea30ef77efc","tarball":"https://registry.npmjs.org/@material/button/-/button-11.0.0-canary.9e52f5544.0.tgz","fileCount":40,"integrity":"sha512-b5wWspEnlGjRx1xiB/SnhpT4wpq8sc5OJWs0iihrQXZ4YRy6XVy9BsZdmlvDQQ9s1S9WbtGkxX/0wJc/t02DBg==","signatures":[{"sig":"MEUCID3c736XOcWXxifFgY3pG5+gW1DekxZnOaoenc09OgT7AiEAinKV9KXUguV44IQFZ2HhPISHN584/M7SQNnLkMgFqWE=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":496854,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgSVVjCRA9TVsSAnZWagAALtoQAJYtTYTHChjEE8oFKsda\no4DR7K9n7XIsUZmJXSO3ehSXaTFYYhUXRIYGPh9dB82J7EYX5hwIB/aXbHfW\nE0XEofTIdPGSI5vvhi1hEI3aGcPVuZ/RepYk9APGbRxPiANV8ULGlaYwdZge\nk5Pq+zEX6VYmGSG24q97k+naCHtWEntUzfVC9ZzVXzpGxbTOOgYyrBr3ndSb\nlzQ068Dk80dhIdhTYTwZHmAS92JvpcWtywUyg1jiA8dRW7j7ZAhwYGDEV5L3\ncfd4FZxH8AnpAS0JqeipTuKek7/WGbG5j1CQ2KtomoZKmF7ggJAmb9GsXuUV\nsBYlDX2xDBQx3Lt+OyEG73iYzt7nOdhhWNJeT30ZFsrSXxwagVguZ2UV5wba\nGqP2+UsOC5+D3JeYndfBlcUFhZaf6mM0jvKcWCa4RFDxQXlmyZaBsl1jQd/x\nTirjg1PZOAazlBI3DBRaTGSLo4aurTIcboG2iE0vjG491r72khSSklFBXFpt\nYqpZpZNotHcMDIFwmEofu+2vOWng+wvnz2mTEFFiZEHFi33cJJQVeaXYeYNs\nNImFLsWyXldECA6aMJJ8PlQvOxKM/SSW2ZELGvQqAcZmIRh10hLy6TxGhiut\ncKHwJDMBATwKKKQXiJcNPz4Sbla9GbC3IyVkB26DJbT5xeg8pZfrvfOkOIyR\naiaq\r\n=Do8k\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button/styles\";\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.**\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n**Note: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.**\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n\n**Note: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommended to\n always include it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color-or-map)` | If a color is passed, sets the default container fill color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`icon-color($color-or-map)` | If a color is passed, sets the default icon color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`ink-color($color-or-map)` | If a color is passed, sets the default ink color to the given color, and sets the icon color to the given color unless `icon-color` is also used. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color-or-map)` | If a color is passed, sets the default outline color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the web 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/density":"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/button_11.0.0-canary.9e52f5544.0_1615418722761_0.6457513547867004","host":"s3://npm-registry-packages"}},"11.0.0-canary.a678806f5.0":{"name":"@material/button","version":"11.0.0-canary.a678806f5.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"204799f881d93aff8e7aeebc36d13c2127a70dde","tarball":"https://registry.npmjs.org/@material/button/-/button-11.0.0-canary.a678806f5.0.tgz","fileCount":40,"integrity":"sha512-XhZoqKm0aea/dhxWhHQ6KauAOdfTh31NWaSNYqbVcog00VjIxsmuYYOWByfwVsG0HG+3Y5mYtLqPpx6DX/4k1Q==","signatures":[{"sig":"MEQCICRpW7wXHutTadfFF2WJP3gXK28/TD4+srPAuOmGCljTAiAf8Gk3EcjuVfNi48XfQ8QK94B9uyiU5JE/RyNJAbZKHQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":496854,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgSXdaCRA9TVsSAnZWagAAOPIP/j2TaUeRZap1vxh48oAI\nq/vH+KcMIAB0/vHcOY0akQj+sA713EK/9BcDF4wI3+cC+iekYu5cJ/gUFIb2\nEwQlmpbK1uE4pDpR1xGYaiIfn/JBjdRl6dlHbUJP1CISIElty7ac6rtyq00P\neq404SLYjp96RXs0TeNC/ThJpqsPRg7DvJaxbl5pL3LBCs4WAzqs1nJ47RFf\nzeeQXDJt2r6BWRhQaEUijMIED8IxTEyaMW+/ZxZGCwn+fo2NMvnY2EI70D/o\nmZbbb+yMrXXvTrk1p2LfQOSfBAxiyCpm+USYaE25i5fjVcnkbq7qFUhXebOu\ncO6S4mxBvjQ9XKGwiIreqikXwUrEbaYv/lCzOwtnTHADiLBiQp7Z5MJOXgJG\n1sRngmkJdwLZN5QgWgNgtrR8O9IJohNRe92WDZtopGfFCikIO0Cb+ZuWktxb\nYgMUA8jVQ3vhIm9RP7y34MFxUrs1GgjlPibe1d8RvDAxkgkak4LhimX24SN6\n5l4lOtXzHv/77x+fSklbTRCRPYtF1TpE9N7TXTZh9ovVCh3Zci9xLorT9ARA\nGlwlPS79amPjxMM17smCrR4rGXiKTkqV6SxHvOWD1aywSicbG08H3tj7IBwR\niCG+a7HVxgvs/nD0BYNFPgUC+syMFIBNJKcD60kz7c8l9CdUh/5OSgLHmUm1\n5SmR\r\n=8wMX\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button/styles\";\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.**\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n**Note: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.**\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n\n**Note: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommended to\n always include it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color-or-map)` | If a color is passed, sets the default container fill color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`icon-color($color-or-map)` | If a color is passed, sets the default icon color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`ink-color($color-or-map)` | If a color is passed, sets the default ink color to the given color, and sets the icon color to the given color unless `icon-color` is also used. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color-or-map)` | If a color is passed, sets the default outline color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the web 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/density":"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/button_11.0.0-canary.a678806f5.0_1615427417519_0.6929074224453042","host":"s3://npm-registry-packages"}},"11.0.0-canary.b2d22df5b.0":{"name":"@material/button","version":"11.0.0-canary.b2d22df5b.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"81c6a11df7aac2c17cd8ed2b8becdac4f4926728","tarball":"https://registry.npmjs.org/@material/button/-/button-11.0.0-canary.b2d22df5b.0.tgz","fileCount":40,"integrity":"sha512-xmEC3M3ujKkleUnBiSk9X/TZ9mdPGTqrc2ErvzmWain4KS7FCb2co3WQHhoI0MAsQ+ZGxWwUVnfhYmDiTeNDTA==","signatures":[{"sig":"MEUCIFiWfJQpNGfGpBHoj6YGabZf18GSYlKBealMwxvI0w4lAiEAz+4UjyuhyKGXKI/j7vYQO6zpfVNonxxWHD/YIPY/KwY=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":496854,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgSk1OCRA9TVsSAnZWagAA8nEQAKQyXUQ1k+c7d8O4bBst\n6rI/nBTh9GU4u9EACKna1H4UvmM5EPND7Y49X2eYurLkRdfmlHM/D4gPAfnX\n37q4VRLNg2BZ9SsCo+864V2boOdkhzntWeAwx6VTuMZk7jQGjnqQFO+5bbcp\nrQ7EZhgxd/F85IIarscidMJpB/ZIe6APr6HdElR5KbgO5CYMH7EGgR9kTOFJ\nFq+DuPLojjAg5N0Ct9Mzlf8oIjavqnMo9zYRHNBMRgnIots6WaAiV7NBc9a8\nVRryrrBAJiYI9AP/4qPgf0s8fvechbrXmo8qQI9hXCXt+Qmg4QZvmEXhu8fM\ntRqp+KpqcZCWjHH8GJE6WpUzOmGdxp90KS1/+rpCm/fCPIi/hcfADMZGxQHJ\n6by6+w49q7gJ9q5PMD7f7ONIpCpF9g4XB8INr+sTk6wnPmXO528PqSIgaLbJ\nshR8iF2hXV7k6smjpSDjLpY15TE24UuHRKaiI/OK6xrjc6mXaIzXwTPCUilw\nlcw+oko0LgYpQjmni8iz/9/Ou6gO5JAvSONXwpF7J64QCHRMayTg6nmppYez\nbp/uOpwoPbsBBmi2BYT5VHK9Th7XUbvlpVkedqg5yQ1apgF2L5nDptNK86uS\nbgnXXaXkrGsQACIE+HvXUTwqelYIMKT5Um5d/FH1to1FkqG9jzorWy2Otda+\nJJty\r\n=zG1A\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button/styles\";\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.**\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n**Note: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.**\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n\n**Note: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommended to\n always include it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color-or-map)` | If a color is passed, sets the default container fill color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`icon-color($color-or-map)` | If a color is passed, sets the default icon color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`ink-color($color-or-map)` | If a color is passed, sets the default ink color to the given color, and sets the icon color to the given color unless `icon-color` is also used. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color-or-map)` | If a color is passed, sets the default outline color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the web 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/density":"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/button_11.0.0-canary.b2d22df5b.0_1615482189865_0.7952756115231476","host":"s3://npm-registry-packages"}},"11.0.0-canary.81911b707.0":{"name":"@material/button","version":"11.0.0-canary.81911b707.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"a3dc722b465b44d96bda0aaac9b0cb127a182ed4","tarball":"https://registry.npmjs.org/@material/button/-/button-11.0.0-canary.81911b707.0.tgz","fileCount":40,"integrity":"sha512-Pir19L0rUimuC/FBFU6OnQghcAeQ1VGUq3Coh1qrsMt2Jr/6U2MiPh/Y6ibjBcIhPmW2WE6GglUs7SsgzWH5mw==","signatures":[{"sig":"MEQCIFFzKoQ1fJpuljPErxawNRunDCjEAwwyLy+G0E8sX8bzAiB6Nh5QZ6cS+QODfXK0p4Sx6cylWpLNxJNRtRuTv40zgQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":496854,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgSmAuCRA9TVsSAnZWagAAAkkQAItgUVljaZepVIz3S7dI\npIbkbsX5Wb9yC0+dsufiwNxn44gsBVEoXr/pWSVuxe7PWmt+H5rq/3RdxNHk\ngcAzs/kLY6Mes+Mt55IGk2+KiIj1qQ7YWOCHioOa/n7mR/rCI7AsLOcSufps\njfTQG1OI51q3Y+DYN2yDLR4trmOF4z0F2QHlu2QgqoAypJCe7KqNLh+lKg+U\nVzBgkzJvaKU0k1ALLxyOPfNymS/BpPRU7GgXBx+gKbc/wav2S41+y2r9g1vH\nirVP/A9/OqfdikUskcWAzlARRK9BbVBjD66RBVDfvHZyW1UNku1mrIs+g/yl\ngWJLp2A483ecofC4es8jQnSxzdDmK/rSTDYfmsYtt1LZn1nMttgADp+wt05T\nlPd+0GJmqG1hJDuJ3UjWgccOCFotT0o9LSjVXNvtCduVSlnbeoH+sKC5N72G\nkYhMC3EZmfxd/Vyfnizev5NpFt5WfNK9xzKkaU5vs+htl+hOqgaF2A+WWUvV\njvxxDT981EscBugDye0oOs7EJ0MvO3jy/a334Um5l+xOjKJRDQ1dYuubZJW6\n90xIA9FogaRdmm5PZn2iJbE0iu+QbQL0IWt+K7Zo3H4M7L0oY3kItu3XEqwZ\nvfY5NCET6ZUO2ggTWg7Hp5OUhR9GKgVN8luNosTPl/S2CxKnsPHy8AbAEUcs\nhGDp\r\n=1/nD\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button/styles\";\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.**\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n**Note: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.**\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n\n**Note: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommended to\n always include it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color-or-map)` | If a color is passed, sets the default container fill color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`icon-color($color-or-map)` | If a color is passed, sets the default icon color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`ink-color($color-or-map)` | If a color is passed, sets the default ink color to the given color, and sets the icon color to the given color unless `icon-color` is also used. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color-or-map)` | If a color is passed, sets the default outline color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the web 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/density":"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/button_11.0.0-canary.81911b707.0_1615487022216_0.04501629676464969","host":"s3://npm-registry-packages"}},"11.0.0-canary.9eeb35c38.0":{"name":"@material/button","version":"11.0.0-canary.9eeb35c38.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"7d4688d8d2dfbd029adb737d00ad0de0066195e7","tarball":"https://registry.npmjs.org/@material/button/-/button-11.0.0-canary.9eeb35c38.0.tgz","fileCount":40,"integrity":"sha512-sl/0CiKPZWYgsFmRARX4r8PmsqVpcTj1op4F223Vr3JCh2DgapWAX7/5gAwyuErvlFnZ/plRGWCiMVVNtwyNdw==","signatures":[{"sig":"MEYCIQC6LGKapDPns4j6YLAQTVmw9D+/bHuThE2RsQU0uMjPiAIhAJm3knzVZatob+hpYewD35nAVNd25b1JNQN+UtzFN4L6","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":496854,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgSnFrCRA9TVsSAnZWagAA+awQAIBewB3qwK75rcTJepDI\ngAMr9dUlTQRPUPU4qNg73ir/xEipZ8nRIiZUFnR/Wrk0J/T4/MsHFxseDBwK\n6JsQdNQmsYLgOmdA3YlowqwQNme+RA7ZcI0mkOOt+a3xH7OwgJxcDZAQSH/a\n6XIBPVunvcYkOM+rD/dwZuYOaFOVJuIhX31ehaTmtVQBt/tdyEzvHV6/iCsy\nawdBrChGwmfI+B0lvzIcopymq1JJsoBEMn1wIs0UvWOlp9eVihkZD08nhVnP\npwxK2lwwYAhDPRkwpv+LtGOVC/H+zWFg7hMWHzbDRqNZQ1BZI6pItqrrPbEN\nAI7Ft8rmGmuDeTVwqBXBzbRmMp/AyLhfTkR1zp9gOqirwOBsqujb6JN+QSgP\ngLb2WNrJEWmt59MYWpGfuoox1WYnAkqIRkaihXgoTXhVuZb38gLDfDLd0lna\nPaWegZ882yDux2cv8f3vERRzoSfyraaUusEvTG0tNCKGKM828U5FqZxe1EVI\ntJkhTeD2R2HN26zGL3LAUTE5X18AXIC+rotRNp9HZgGKVZLftS1j8SB8hsra\nAc154qf0qwWK1v3cpm5iEbezbhdWYXUn86oq42xr7w+G3dVzBPx0/PfQ1Juz\noDomZgsvazuD29nUkLKJVuetK7uN83fWiVljKhrSsAaqfJ7vQjqdWpphdNmm\nTlE2\r\n=CXWy\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button/styles\";\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.**\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n**Note: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.**\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n\n**Note: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommended to\n always include it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color-or-map)` | If a color is passed, sets the default container fill color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`icon-color($color-or-map)` | If a color is passed, sets the default icon color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`ink-color($color-or-map)` | If a color is passed, sets the default ink color to the given color, and sets the icon color to the given color unless `icon-color` is also used. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color-or-map)` | If a color is passed, sets the default outline color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the web 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/density":"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/button_11.0.0-canary.9eeb35c38.0_1615491434977_0.6595394532088299","host":"s3://npm-registry-packages"}},"11.0.0-canary.12be3e95a.0":{"name":"@material/button","version":"11.0.0-canary.12be3e95a.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"4624d8e0ee9db36ddd1dd47b1edd27f52e83a88a","tarball":"https://registry.npmjs.org/@material/button/-/button-11.0.0-canary.12be3e95a.0.tgz","fileCount":40,"integrity":"sha512-me5poUoIO5MzuGGTXk2v/Cxe37ZLQxjAPL1/utxf2vv6lgvjaTLncVHYdnQcjdA5Rr1ipybvJ3hNMbhGCk/trA==","signatures":[{"sig":"MEUCIDkh5aRzX5m9EiWWUsfC7NACgO0AJVCvyBiRwnfdEmiFAiEAjYQJTCYpfk6Xuj87uLIzkmyqYEpyqONhBDZF1dnzSLM=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":496854,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgSncwCRA9TVsSAnZWagAAYJcQAI2kcPB2dVwiZWrzGYwK\n4TZTxILRVKEdgmjn5+G9XvASz8KP7R+vHmdLvFrGOGlXSYW9A3NCzWMqzq3O\nQypc5fGSZv2QhMLnLRPehBF3WjXX89fb3Lx06KGiW2S+afXgUCv1QrYhbDAj\nfzEFi7tMPhOjmjwqodthEGd2osBGHTa69qe503G8VCcSfVWozrNL/ula7IsZ\nPAuLbC299ZQQ67MZclsc5/udbk5GM8NT7j9tTqRQ+7a0LAVXiYUhB9ZatXYV\nDdQY0JRd0sBcnj21RbXnONYe8YyABUJw/vFuYV5TK6ZgfjPAU/WU1ux1ZDdp\n5ZqtwJu/UgVY9qmEC3sgThEcovgL3x4M/skT5GnhptIOg1q4eXl0zj853dCG\nh4aIZAO5hCOQoFVVHe4Povuc1SxW3EWDf58d9Kdyo8gsYAHUGlzPDbPUdhc9\n25C6ho3yILSCRBLy9+BwbiAN9ieLFa/FxkClxrlVA/WtfXcf815OxuV6QsBJ\n1+u1/SfyZHHRf7g1LypJhMw1bkx+9J2pkqGb8yvoJj8O+u2IbdPwWTJnS8V6\nx1JV+pyIwnBWmBSvOO9EB982+gn1sBiennP2vcRjm/FASxQlrlg0A0GCBywR\n03xzESHyT5g+ioQ9URSJfKIQY31g4dehEnGbfYVlerJHyQ6io9HvUoNVgf2y\nPms7\r\n=FG/Z\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button/styles\";\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.**\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n**Note: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.**\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n\n**Note: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommended to\n always include it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color-or-map)` | If a color is passed, sets the default container fill color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`icon-color($color-or-map)` | If a color is passed, sets the default icon color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`ink-color($color-or-map)` | If a color is passed, sets the default ink color to the given color, and sets the icon color to the given color unless `icon-color` is also used. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color-or-map)` | If a color is passed, sets the default outline color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the web 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/density":"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/button_11.0.0-canary.12be3e95a.0_1615492911666_0.7532016882249255","host":"s3://npm-registry-packages"}},"11.0.0-canary.e683bdf4a.0":{"name":"@material/button","version":"11.0.0-canary.e683bdf4a.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"e5dd7d9429781b01316e02eb5b9b0a600fd39ff8","tarball":"https://registry.npmjs.org/@material/button/-/button-11.0.0-canary.e683bdf4a.0.tgz","fileCount":40,"integrity":"sha512-+2DvEm4RrDtPXtNbdZc0IZyIhFre3D6zpIfQSnf0j3VyAMurceX9Fgrq6/OSdIaAKKDOVBBWfzpfcv37CdX+GA==","signatures":[{"sig":"MEUCIQC/hOL1t0wjrCVK0U7bACBUfwzYmt2l/WXL3pUNDy7PZQIgZ0/KRPSDx7skzGw2TIFzuGxMs120DghOuoQ68gkxBds=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":496854,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgSnjpCRA9TVsSAnZWagAASosQAKP9Lfd9SEbRYbeO0FIc\nLIEqk34WjUUcYx1yqd2BCO31VzuX5y/MLPCdQct4kpcjbM4WBnSykTMrxuj0\nc/hLOWNjis6cgc0kPlfkxjevNNbcvVyDbtXZbxD6+FRP8NPYv3zj/qwV7T25\noo548aiUeTc+pR3ma+ZMteE1jWJInEb90XZCk2auq5wncbmXAiQPUpoqoTsV\n6N1v7a6zijJPutHazeQIz04WIZzf4u7IgBPwPXj/3SJa8UQ0tY+dDYCYqL5w\nM7CHcK7FKEm5zKdF2KjKFWu67ly6aP/Ze+fwOUegjuiA8wUrwvX5nyG0BnJG\n9sHcMxw4amkdXs9VpJfxiGkmBCOHl6YjIYtom9KyJNDKxyEVowemxuQIWEyW\nsQ6KtcXObSAxl/glyBW5kGFwKJjqBTkExUq559TdMI8dP3wXRrlxVFDvaUtn\nY+elcQRgOWiIOumUEWEqimMjZWWSTkIpFsQXPFNDZpjf2ujPpHDA0Z2uzEh0\nMr/1RuQNgrBt2gM4FVEezeBWKOZvi9mJSNT5VwMKHKsh7ab/n8Zw1dKAgtXk\nniXyOsVC/48D8amqS7b4ofK0Z+cfSKkqOr6U3s00ZKi+ryWaoY099cuVgVSb\nwwmrnMqjxbkLFAQqR/CnYWdoIjV9y8ZzRWed60OEn4hmxfeKNesrKU4SosW7\n687c\r\n=NIL3\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button/styles\";\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.**\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n**Note: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.**\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n\n**Note: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommended to\n always include it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color-or-map)` | If a color is passed, sets the default container fill color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`icon-color($color-or-map)` | If a color is passed, sets the default icon color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`ink-color($color-or-map)` | If a color is passed, sets the default ink color to the given color, and sets the icon color to the given color unless `icon-color` is also used. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color-or-map)` | If a color is passed, sets the default outline color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the web 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/density":"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/button_11.0.0-canary.e683bdf4a.0_1615493353370_0.13446798799346005","host":"s3://npm-registry-packages"}},"11.0.0-canary.a07b6d486.0":{"name":"@material/button","version":"11.0.0-canary.a07b6d486.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"f8e541ccb217b721ea65dc8333576830cc266738","tarball":"https://registry.npmjs.org/@material/button/-/button-11.0.0-canary.a07b6d486.0.tgz","fileCount":40,"integrity":"sha512-ChVH3ie43v6VC829/dPgYO+GMJBKKB1kL3x3lZo+DKdKoMghmNLt/khngby58uAMTW1wILk2CxCtDTMd2TKcVg==","signatures":[{"sig":"MEUCIQCS3NLmg2mpWKqHzAKMpnlIYs06vrIRPGAkT4+O8GTvmAIgFUJnyKK3UIPZZq4wOtnh98/IJFGoHoNEmD8i5lC/W1A=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":496854,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgSn6eCRA9TVsSAnZWagAAKNgP/0pKTGuNx1nhgC55SFnG\nOHeuOVCYSAGfusXQWQj1Ks3NqUvwd4VHriK9/S6DNh4lw6JaVF14l4eOXoLx\nvXRYcTuYDyb6r7kfE+WD+Ac1Ya3SdySUnj0pQKjD6B64IosVYPS8m2lsaXmN\noLlyxX1ZY2GwR/PgMpmQNXQGNzK/eb9wywnuUxL+LbdHcpldBpGzDXflbdYX\nCFOmddX0qdEQ4pjgJwzVzncgqNNkt1XmoFH1g84EBw4ZM6cNET9apuq4XGiV\n+nR0PA4wjZ0lfgovbt3QO+b+JYwb4QEn6KpDGuO27ZSfwDbw4ARPEzEC1xFc\nxKVSApHftZ8zMx0J7iH1gU0jQHfymwLWf55sCyb1N9ILlLhInxzJqE4hTL9a\nxcnRd1beSHP5h+KuNPNEiPugeM5bZ4/+bZB+ClX2bwbJl1YRh6PmY9Vgv2kS\nWleaDNM30EvlEbAt4eCA12/tsDeQ2z/WmROsEwVbaAmJW5TvqpmPeIBFjQBi\nVqmEADhrPMQw+Ql8MgixNf2g8AXCfTLlalzFMMqGFXOtT8yWJuW3xiHURETf\nZXhGUDj+WunHGky03Npeoo6Yv+QeRxOIsrdr9vLO/BusoFj68NmxmoxgvJHF\nYyO12lInfNLNBdRXLPwvB4UAqQFsrIadJE5a3CesYZqdvJsPTYYNDAAbYU5T\nmD2C\r\n=B+0r\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button/styles\";\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.**\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n**Note: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.**\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n\n**Note: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommended to\n always include it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color-or-map)` | If a color is passed, sets the default container fill color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`icon-color($color-or-map)` | If a color is passed, sets the default icon color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`ink-color($color-or-map)` | If a color is passed, sets the default ink color to the given color, and sets the icon color to the given color unless `icon-color` is also used. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color-or-map)` | If a color is passed, sets the default outline color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the web 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/density":"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/button_11.0.0-canary.a07b6d486.0_1615494814031_0.36044161383795204","host":"s3://npm-registry-packages"}},"11.0.0-canary.1e0653477.0":{"name":"@material/button","version":"11.0.0-canary.1e0653477.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"e6c9da8c7c5cfc8f42300d131c231edafc894ec9","tarball":"https://registry.npmjs.org/@material/button/-/button-11.0.0-canary.1e0653477.0.tgz","fileCount":40,"integrity":"sha512-i6xP/izPH7de0zn5cu90Qb69pQZMx9Ql8Q6uq8Fl2mwGp1w2DGXjzrhyCXsyWEbm9U7ZzwZt03oCHvoF55ELwg==","signatures":[{"sig":"MEUCIQCjZtviNbkZJ3ik08k2qZJBO0FC92MjAP86BdrVKXDhzwIgW40NmoQbXDRkozmHKw7rhYcgakTJ6Cv9RluIsaDUPU0=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":496854,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgSoBXCRA9TVsSAnZWagAA3+EP/izN/GDTo77VzGIAorvc\nzr1/UMkSlXwVKdGfHGyfrRAUfu1nJSu0pTJ8b/wPLGjFC0LyaU/sXkL8Jvgh\nXQn8Y5g6KufjjvNbYDHDygG+8Txfe5vVTeB3vhanu9rXuBFgXBKpZj3hm4xz\n3a2IPD59u+gxJODjQIuUET18priMLwcO8R0/wKEcfFSYK0jN/3+6SkFJjZ0d\nKrgtPBpfz7ZBGBByP35AljsnS7D0dmMMeCyc+kUpoasmqqDgfD83ia0yn7zm\nfg/ZM5Z6BXARGn+DJP8OTeOQmtx+OZwLEhU4FhWyyzbAxG1mi6TNBIlzGuu+\nF5Sdeqd35bg4Y3AscE5bZhw9TEif7xW+XViTs4hDYRZsA12TCVkVhPqXPINu\nXAPb24kod08yZENngFx5GI+C6U5DfILogZWx1IUj0ChuzRXEYbk3H4tnkHhx\nu4422B7hFyfhYB2SMkWe7mqykrq2UUXtEg+Im7gGSTyF5qgbZ91HRi2OOoIs\nYaMnTuBFlMVwWwAq91HCbS68u38TnUjRI8TqrfnSawk952GC/Hc9yD053vxb\nFTg6lU5I+GHajmW4x0xquXZCXSPpHK7LN0lyJyPWyUwt6dGA0H2OixTQjUpK\nSgjeF5z6CybGt1nKVXIkZYy/G7IL67iip1sLYynVX8J1+M1tC/ZzPd41Cel6\noIKN\r\n=4JQq\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button/styles\";\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.**\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n**Note: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.**\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n\n**Note: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommended to\n always include it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color-or-map)` | If a color is passed, sets the default container fill color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`icon-color($color-or-map)` | If a color is passed, sets the default icon color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`ink-color($color-or-map)` | If a color is passed, sets the default ink color to the given color, and sets the icon color to the given color unless `icon-color` is also used. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color-or-map)` | If a color is passed, sets the default outline color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the web 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/density":"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/button_11.0.0-canary.1e0653477.0_1615495254520_0.30735125952818043","host":"s3://npm-registry-packages"}},"11.0.0-canary.148e8cfcc.0":{"name":"@material/button","version":"11.0.0-canary.148e8cfcc.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"b07dd0a6443621dcaf73955c2b2baeae2a7badb5","tarball":"https://registry.npmjs.org/@material/button/-/button-11.0.0-canary.148e8cfcc.0.tgz","fileCount":40,"integrity":"sha512-f1LCybk+nvjBgRVAT5HG/oeuiMAZqHL4DG0c8MMKuJK7KuE3E3mL7OcC4OxF/5ozMmvV770Em84UhaDow9P01g==","signatures":[{"sig":"MEYCIQDS9VXnS1sStRAZUkEbtCEJzY+9MDBnQV0zFwi5jvP/ygIhAJWz7db1+3EcRPe9clQF2xtoDpDBcU+rhWYl64XkmgkQ","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":496854,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgSp1VCRA9TVsSAnZWagAAXt4P/2JHpEMeDUMUnQ0EGLw0\n+LQNXZQMF5pvuqPXNr/Lea/WPsNGiI+CTI1Pv6T5UGaOThSD/ktVg1gXywE4\ngzw2VTGJHkjv9u60wgopcEyr/Z01IPOHuIgJK5LGr77hTDjYxIaFQvPSd6XY\niwkmDiufpH0k4EC+CstpYBuSc04vwwN8O4sL9MoCqttxgR6OpELKpk0tLv6G\nqhC1rqha6MmkoozeLh3i0ZHAYwpfz606RrqD3X4ZVO2tAJDwRf+27g5vVKHo\noLeZJy8yT9CP/e68c69LAZqnuopecHzhgvss9347sk+DL/SwGJuC9S7lmi0s\nEXNf4a/uZM16lC3jsRjf1jfGzKk5724uaJ6q3lfuen+yHewlD5o4zxgRuyp6\n1jjtOWhETRLr9j+Bm5amJA0/CKsxVZNL3ZL6JC9wm57fXYqyyyXrkNQoP87Q\ni2LJJyiJtsp6EMf/5i/JjiyZmMqU32n1p09Kihs5eSiFHMJUTM9/CIy5TI+6\nQfIfOZfg9wlej2GrI7EO/+RFUEXRHOb89DytaHLTSPXuKT/4+T8qZS6UV4mu\nQQ/sHcW/GuHBaaldQjpSpVI68R11oH3HUAAyVXHfD2y72MZngxpQuBh8sO/0\ngkNEq82D6sjznoR6mp6Ym0RNo8qfS8s+XXBPxSVkpL1qYlABGGHjeg9JAKoR\nibPM\r\n=+8gx\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button/styles\";\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.**\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n**Note: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.**\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n\n**Note: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommended to\n always include it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color-or-map)` | If a color is passed, sets the default container fill color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`icon-color($color-or-map)` | If a color is passed, sets the default icon color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`ink-color($color-or-map)` | If a color is passed, sets the default ink color to the given color, and sets the icon color to the given color unless `icon-color` is also used. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color-or-map)` | If a color is passed, sets the default outline color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the web 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/density":"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/button_11.0.0-canary.148e8cfcc.0_1615502677361_0.9997300288378514","host":"s3://npm-registry-packages"}},"11.0.0-canary.73a227194.0":{"name":"@material/button","version":"11.0.0-canary.73a227194.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"960f09d90a49d77158298246257e604a9af08522","tarball":"https://registry.npmjs.org/@material/button/-/button-11.0.0-canary.73a227194.0.tgz","fileCount":40,"integrity":"sha512-IOrAzO5rrajeQKP2zfFzBBFK5u5pR/lU/XGKvKnaf442oF6Yy7wLabixOKCQpmEO4fjzfhYg+W1zCohJHqy5Iw==","signatures":[{"sig":"MEUCIBewiJKb6gO3WXCG2kMLfjuxMbYH4YoGA3SyxrrmsNcCAiEAkk4etb6bYYu6TJoLWK565oSFY7daMJRH4NlQX62/DLU=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":496854,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgSrS6CRA9TVsSAnZWagAAwWMP+QEWEdYEK2gYqri3eW1z\nZGyYAvI6HQyiJtpCGspbqWdYw1aGcY/HvO2d1ijuzCyCbjkWx8xqAZE2YDlY\ndkm7dKQDd1zFBNBfw7bh1Jyaa7j89HwkJPrP+LIH5Tn54qR+9fOmW2M1AVpB\npfcyqwMGI/G6+I8K3dUx0ydAypvfejIqOlMMnRA0xvSeVnI9H7S2O4KSb0r1\nTn6M6s478sG6Qks38N2BeD1/7CL5YYQoH9VmnVn2In1ZjESCIh9lwmgTviGR\n5rqFgoXgTkK+1eF380OKzXDKkDL7VdBGMulwM13CuTQVUn+Mfth5dr+mFqVt\nMVoB6+kO2r8ULuEvcbympUyiUah51Pt2lVFVa9tSE+1E4EpYCrSqpU7sm5lp\nzMDRDmIVIF1+/3p8CuUWFUmWf/uFjyHAd3CpUsDfhslmDjADpOaKbjf2UX/r\nnM9b8O3Hvj2WN+d4M+W3xE1PcHknmb3+xIOQ1QgkjH4E8bCw8gS9Xy6uvpWc\nMUbXbX+kFzcWdpaDJqhLp500z1QVJ3RiMIk/ft7BKa4Zwb7X9/bOwC0dkiCi\nM0nwhtG/OlzsT+RWtRbp3BPRArGcbJ36f7nk18BK0efk7J4rTfND2yaEYlLV\ng3YhGT+rhrI5njUE5O5IdCIHQK7iPSbSpzwtRKksz9KuNH15iT8SlSLW4Fjq\nQk+Y\r\n=6BSu\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button/styles\";\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.**\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n**Note: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.**\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n\n**Note: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommended to\n always include it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color-or-map)` | If a color is passed, sets the default container fill color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`icon-color($color-or-map)` | If a color is passed, sets the default icon color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`ink-color($color-or-map)` | If a color is passed, sets the default ink color to the given color, and sets the icon color to the given color unless `icon-color` is also used. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color-or-map)` | If a color is passed, sets the default outline color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the web 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/density":"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/button_11.0.0-canary.73a227194.0_1615508666312_0.7095951285568269","host":"s3://npm-registry-packages"}},"11.0.0-canary.f8579b7ea.0":{"name":"@material/button","version":"11.0.0-canary.f8579b7ea.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"3e59cfbab7afec0a20bb4acda610e2196e1e20d8","tarball":"https://registry.npmjs.org/@material/button/-/button-11.0.0-canary.f8579b7ea.0.tgz","fileCount":40,"integrity":"sha512-IJJKA25Be5i23h/6jPi0+lb/i5ybZJ9RIb0xYDhz7dqE5CKnYIm9w0KIQ11vRKeMjAxolQni4LuqM/f3+WUy9A==","signatures":[{"sig":"MEUCIQCpdZ+uehGeKJ7UJWCmOze+QN7IFD0ksOlXUpi7ceI8MQIgU5xSRcohe9UagnzEVq6WrqOW0fG/CjN1BlunJZRYqJ4=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":496854,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgTB1vCRA9TVsSAnZWagAAqzAP/19j7iIspxYrq75YdwRz\nUL5YBlWalx7+EXgEfc8byfISAKwlizrYTJOwWje4he7qKMKZjkxJGCMJlb5v\n9jDiHWiBRm/vvj3ahhWbkDyE2gGPvdFech4qGxwsmc/pHJXWLwN+CcYtWnn5\nRyJLUG00mkLQ1NFRfJzCx/mI1u+8gtZDhqMVpg1SEItrw38WG7wA+ZYBxgFD\nnBCFf/HOWyZ1NHBLaJZJ9EcBz7Wj12Eb0VWJ9fxPUsO1v3g9abxp1Rs0z4+d\n/Yft1KGWG2aqzOguhMKq4cJ1T1cvGpcaBNUrN0ltjigNpcQ/RoYtSfJ+asJ2\nhzE0vifPgxS8ls2p4tK4BAeJBbPpTRG3tgg+7qRTHKF1oOI8wp8goUxwVWs0\nmJ2JLaP2Or1roJMTsn6v8zDg2joogFp3rSmG+PyQ+VC5UhBVQgLl/afloeLK\nJgm+26bixeCjyTrwuORmditsAayPAHRCR4cPVTiA4LNhFjNUS3P9y9ij+EQH\nl+vSio67aDQEwTJRJ22DdrFhRqF2BSPXnNfPzyClL1z96TkcFP20hVplBORc\nGce2+zXWEVZgcoofCZ8CsAZo7rX+MKfDe64fAAzmdQOhTF7wUijstil5XUYx\nyN5PMD+bjSMFJdBOvkkeqFSxlWrbyULz0pGu7NGanSQO7zApDiLx6lyeQOMv\nAuhN\r\n=RjWP\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button/styles\";\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.**\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n**Note: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.**\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n\n**Note: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommended to\n always include it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color-or-map)` | If a color is passed, sets the default container fill color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`icon-color($color-or-map)` | If a color is passed, sets the default icon color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`ink-color($color-or-map)` | If a color is passed, sets the default ink color to the given color, and sets the icon color to the given color unless `icon-color` is also used. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color-or-map)` | If a color is passed, sets the default outline color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the web 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/density":"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/button_11.0.0-canary.f8579b7ea.0_1615601006356_0.16426561757858527","host":"s3://npm-registry-packages"}},"11.0.0-canary.d2a39d300.0":{"name":"@material/button","version":"11.0.0-canary.d2a39d300.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"fa1e43b633277b0b0fa73c1dc9e0f8dfe6b0a3c1","tarball":"https://registry.npmjs.org/@material/button/-/button-11.0.0-canary.d2a39d300.0.tgz","fileCount":40,"integrity":"sha512-Xzuip1hwWzu4bkLg3d2Xy3BYcL070GJeJGzMsE31IRihCJuSPCh+phWV1RMizI7ZMBRj6+jgP6fJMZ11JitWww==","signatures":[{"sig":"MEUCIQCQslI7qqE92pUebEiCzinYFQ0CeJJ/egiFJ0vbwhwvPwIgDjQIURvsk8JXndpHf4+PUdIiJbAhBVu+gm6lgiiYXwU=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":496854,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgT/1PCRA9TVsSAnZWagAAyhUQAIfiOTFQ638gvuIUYvxd\nnhgAKYB6sx3+AFZenuZsf9V3bVyPL3exk4Uny94he8baJPN9bfJsgt2Jae2/\nGwAj3SCdfq1c7JucDWqg2sMtbNUVaZDiwx3x1o4NxJUlzG8FRifV8F7Zuc8P\nC43K88DTAbJO+TNk1yCNGnrr4a9fyqkSAySq3VakXIaWy7J6rxo6jmnA2LJ6\nFVQoHMHHS/EMHe7WBt8oQitq1BtIGA9rCV4FwOQPdig05CiXO/arDKhTi0xf\n9xm0GSIvYQ1AMM26aR2QqZEGFLuMJPhdNyLr5qH5JP4v4AYSFTGIxPOMVjjo\nd5soLGOr8zJIOSN5CKvXMsLDUkFOsAL8YX5YObhC089E7gq6ZT5ZeNO8DYOO\nLAPKQcDsKJ8M63Gc8kIcap+ITGyHfJmDRdT0CsfI8/0xOgwRZN8Es+KqkcxL\nmzKT9uINrH9UfzngdzKid90APrkgZwaRrXaNy8OVatBXthebEWhl+9BpO/3O\ncT/ejKU+PQ6OKvQIskp3xllkYPaxarqeBElZMdrXcCvIc7wpgKF/JzENOXRL\nscSIWzL9Oh2zGrEj+h9IakDpLGTspW8qUPWxR4h4X+wj5GODVfEwVhPNhwQL\nl+XKV2h5Fds16Jbpl3VEPTUh4VjlZdEiItNu3tRfjzgY4A1NGGjvbf7VE5dn\n2pKf\r\n=3KR0\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button/styles\";\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.**\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n**Note: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.**\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n\n**Note: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommended to\n always include it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color-or-map)` | If a color is passed, sets the default container fill color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`icon-color($color-or-map)` | If a color is passed, sets the default icon color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`ink-color($color-or-map)` | If a color is passed, sets the default ink color to the given color, and sets the icon color to the given color unless `icon-color` is also used. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color-or-map)` | If a color is passed, sets the default outline color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the web 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/density":"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/button_11.0.0-canary.d2a39d300.0_1615854927056_0.5798941806659896","host":"s3://npm-registry-packages"}},"11.0.0-canary.7cf67823e.0":{"name":"@material/button","version":"11.0.0-canary.7cf67823e.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"f22636eed96feacc28a990f0dd065884fba87f4d","tarball":"https://registry.npmjs.org/@material/button/-/button-11.0.0-canary.7cf67823e.0.tgz","fileCount":40,"integrity":"sha512-5Tpy71lRKgW6Q9Qm64xSq0TDptXfCyoWeQ0+40CYkCC6p6L6U6H1lmtuCKTq+zxO+j638HVKtswcCeHVxleNmA==","signatures":[{"sig":"MEUCIQC3VDhm8JemCR4I0IijX8xOxYfodaeZrNcohq3imPNERgIgL5d/ezn+Ktrd065tbSVvafCD0kcmp8Swss0uZwyGbXc=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":496854,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgUPbtCRA9TVsSAnZWagAAv/oP/3WYVc0uw4PkjBUC+YUX\nCLuQyIe6s/IoBb8aPGrQwHIphloQdbaIAIbXOB51qTFzgLFv0Kro5dL026Ow\nXay+8tKwTmtpXOa7RuSsriRqn4rqcmRXx4olLcA2PLs/rNz8ayNfVQiq8lWN\nzOq09Wp1Zmn+5vHII+9gyUia66xrwdl3qraGAND3U2n8Jt0txT7vLSoaxGn+\nc1zfujwIDHzMuIjOJ63BIngD8YgT/nu1dl8kxNFU6KSqtBY4I0/i6MxJ8IvL\nTyxYOZ1wtv3vNNJwpV6cSy6kMJQygeO3bR1Z9N+So7b/cZ7XlGxjTnTBjfi3\nOpTnCQuoZBeTjMJiCclhJWj2rRANSf/T1Kgv3603WYLD4AQN6jG4vkSgeUWG\nYLcLkda+3zWXuUTo00PcLyaU0a8AzNq6ZN2hidpPOMRs5zhaPonQZkTPE8JQ\nkULHABY2JIw3rcOSgLopsFWC2qlPgrJIHcskgcjtvGvyY+WgY528OYo+Lqn/\n/vXIKm/ddecPU4YHoN14uSN56XOqFtIa1WXJ6Bz5lS5mMgpNey6shAF+dcHQ\nWLyyimEEAwei2vn7poSTgxa7QpP4dv1I9jg16H3ffFrhOJA3+KJOBhOW+v3Y\nIGNMRNtsWI0lrJSPb8muMldoN9qtCAPVY/2oUCK71MJQL9sDRBeUlSJ8uAsZ\neMVI\r\n=Ovew\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button/styles\";\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.**\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n**Note: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.**\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n\n**Note: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommended to\n always include it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color-or-map)` | If a color is passed, sets the default container fill color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`icon-color($color-or-map)` | If a color is passed, sets the default icon color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`ink-color($color-or-map)` | If a color is passed, sets the default ink color to the given color, and sets the icon color to the given color unless `icon-color` is also used. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color-or-map)` | If a color is passed, sets the default outline color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the web 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/density":"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/button_11.0.0-canary.7cf67823e.0_1615918828796_0.0966750671287302","host":"s3://npm-registry-packages"}},"11.0.0-canary.67d780c79.0":{"name":"@material/button","version":"11.0.0-canary.67d780c79.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"ba3b7733d8c096526e30c027875c5b7559126b58","tarball":"https://registry.npmjs.org/@material/button/-/button-11.0.0-canary.67d780c79.0.tgz","fileCount":40,"integrity":"sha512-NK1sXfv0r9mhlG3bZLJ+O79uiLTUg5Vns3vcMMXq+ggS18oZ5BT4cS81BAxTTnLulFqyIVP7dXr1863ePRTqaw==","signatures":[{"sig":"MEYCIQDiO2YIEIMSWQCLhm/EI8rm37L66R5aeZpXnOnoMEh2wgIhALL0nu0WItVEaXj2jSwQBAocBYM7pc1BUZlYbfrKkkvf","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":496854,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgUQt8CRA9TVsSAnZWagAAOikQAJLcZnxSCdikP/U/iRun\ngNjdFyinw/7t/kTkniX77IL4sCyI0P7OD81JnV6uB0lG1+GteYQm51+fIhru\npChY82WQ5fVw6urJuSVK3PPAx+3qqyFFNit/mhByIdUufaKDNQTpSF9hpCxG\nyHmxAye0LHYPLkG+5/v6OQIFKMNXjzFBF17QAu2yDFwT/3tSPj1JRdSwgB3i\nmg0f8PYYOvG4cLZy8xKxACCujU0PNnkdqozfyletKwgUGt6kWLdhCpaO+T6N\nH9GHrbfYUgkYXgwkdZNhsUj+nZnPpx/Fw6Bf9FmzPQRscDDyNKoNsBI/Ptaa\nkwimmaz03XGV5BtQpDoBgdVpKsATUqRgmZzG4SbUDQMSKd6u2QBqmf/FIH/e\nCMRjbmsvN1TA91QlsmuO0QmjjoXll9reglC18xeTm6qNFkVZbugPAOjwxAu6\nuw6pl+GfnDNbRCCdbTwntQT0RIOk8YxUiyJV4kLQgOf1W0vLyO717dA2FF2t\nwEggWB0kgm8iw/c1ToCrYinGdJEcVtyXy5YT4txZXyyzDJf3tNNRq1c4k2AP\nz8zSxMlFdjufoZFgDWKnIVDRulyOMyHKXjruollR2RuKEwArV+Z5oCq7NVeR\n1hzmG4DJ50SxNqZKMyulhPi2+wN5j/f9RS5Fyb3/UTtT4YaplbvUgjZDlDI5\nT9s+\r\n=L24x\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button/styles\";\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.**\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n**Note: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.**\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n\n**Note: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommended to\n always include it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color-or-map)` | If a color is passed, sets the default container fill color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`icon-color($color-or-map)` | If a color is passed, sets the default icon color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`ink-color($color-or-map)` | If a color is passed, sets the default ink color to the given color, and sets the icon color to the given color unless `icon-color` is also used. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color-or-map)` | If a color is passed, sets the default outline color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the web 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/density":"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/button_11.0.0-canary.67d780c79.0_1615924091780_0.46741204843980766","host":"s3://npm-registry-packages"}},"11.0.0-canary.0f358ddae.0":{"name":"@material/button","version":"11.0.0-canary.0f358ddae.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"cbfa40b600fdb56d3371922a027ee9dfafe4b609","tarball":"https://registry.npmjs.org/@material/button/-/button-11.0.0-canary.0f358ddae.0.tgz","fileCount":40,"integrity":"sha512-21PJnER+5RvVrtpjcL97F1/gusPjO3gsFLkiKw0gcSpvl1Gey/OfMKRhDz3v/fIoE5JkEmwGnQum/C7Y8TGO5g==","signatures":[{"sig":"MEUCIQCgfNn9qCWlPlAEgiJhsPWGs+Rq0ycOqdjSdfD0ZqGcegIgCBspG7YLpn03n3uZe5K51idRzA84mSAnVs78SoWfx5A=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":496854,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgUS1eCRA9TVsSAnZWagAAygwP/iR7zTaacGQyINvX/1nS\nQKuHRU+o4/v5+eoNujsO0Waw91WEEL/zzzDaZqwCDXe+MkcQgT6KP2cpTNLr\nJoRlwUAJaobeO4Q9QNRxvkE+e2f8XJyrL3UpYAesA6fEiWyC8zev/oP/n4da\nVSua/iHuclmRxL5jzzkelqbTCIt/bg7mdHq6Ylqe9gG0Xr5SLwitSJepibm0\nk3OPZlVTYg5qyNLaJps9MtVfKvZ2zGXYcNa1XEyMRxveTSf8frqMmI8JmYXc\nA8sZJrzdLh1XimsYb5tNS4/HPG4u9qQ0FAAH6jY5PzgHv4KnCkqaocmKOlXR\nW33iHjtPjDTP/BjBnAbNfL71Pt7FZdf1x6iNLsLMq1rNOfv3hY3cHS7BI1In\nb2lmTft3ZfYHwWBCCmPfoU9cNi8kF4no0JsKeg4yS21IOmAdPUHKk/sr90Q5\nxLbk/LSXuX8OSjwMlXPgmuOoMM7bI2AR9UlvB02GIW6OX6K2KIKqthgmDhUn\nKBAcBznpihBye3S2oriaDjzxVz+NvVTooRe5fUePPkZaQ8fseQpTVSsf/IqK\nYnyJzpj5w1G4jf9kFvgu322Vx/Z7/XP8Oz451hykb5f1t8vA6cCPpDbQLomz\nCQy4QDj0JF0OhR+Db+2ByQxAojlJUEwuTla8wJ00BulrxgBDY+1YLjJsv4iP\ng70d\r\n=ojhp\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button/styles\";\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.**\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n**Note: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.**\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n\n**Note: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommended to\n always include it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color-or-map)` | If a color is passed, sets the default container fill color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`icon-color($color-or-map)` | If a color is passed, sets the default icon color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`ink-color($color-or-map)` | If a color is passed, sets the default ink color to the given color, and sets the icon color to the given color unless `icon-color` is also used. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color-or-map)` | If a color is passed, sets the default outline color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the web 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/density":"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/button_11.0.0-canary.0f358ddae.0_1615932765707_0.5109456565449411","host":"s3://npm-registry-packages"}},"11.0.0-canary.67eb0df80.0":{"name":"@material/button","version":"11.0.0-canary.67eb0df80.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"35c87384fd6ad9b641f6ef0a1af5035af843a2ac","tarball":"https://registry.npmjs.org/@material/button/-/button-11.0.0-canary.67eb0df80.0.tgz","fileCount":40,"integrity":"sha512-DNNRe9uDuUqhTe13lLCWsvg7IeHwKgAEoRzC9jEXW3BcblOa4XnVA1HeBFCfn7wHInGNhvVB2Xi8miT3VHWp8Q==","signatures":[{"sig":"MEUCICRfpKw3S9u8BZ4R2amH8M3Itifdh668yMFYC9NRjJabAiEA/nbBvOfZ3hYKJem5a9jfOkKzShxyELf1/l9fOk4RYgA=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":496854,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgUTO7CRA9TVsSAnZWagAA9WEP/0go8zSyosVoNo6gmSIi\nAnXM2lKaqOKB+IWh8PQTtqoOKkG+KulNRlqS5Q51wseH76nVNeADmVIKlUMA\nzG9ooeTrwPKws8PUHMAn4IniRFmBi8yvUJ401dgDY+SexYqzjx51odPoDJzR\n1yNj8OSWycCVrqwPZWRxBB+LTbEI0f5duL6XDywZbNK4S7fdX5lmWxh2MT+j\n/hIMkijaO6aw1r7pahfjFwHsgdm/n5fVa6FZXujI9+WDneg9Tx+MulyvCLgm\nQx+Ax6muGmRmUlaI28MSCjLjeoOD07Oa0tFkGguIDjzNSU9eM2kQp//+DiHf\n7VFk+MxnCRkZAhRlAaQ4IwJJHas/EMcfIzmvo6Ak8xV2zWXq0G23bPUiE9aY\n3LuBH3VR4De0TfilNW5sXx9b8SIkTWCEJwSVflBhlJE9fOPp0aY0ynkqya22\nG6zs22RpRv7YN09ISbVHxUGopBsgtdKl+8mM8GUmoyRnVcp2llAyAxCr3vch\n+P5HN1KgGEDUSWvYx3xWGgZmpxNMuALXv7VunYpBZX+Fa99zyh91wioSjUeJ\n+hz56/L4nvdDV1USpHfgU4KV+6e9I3+Zcg+axW2WfX2DbUzyG63K3r9t7MbV\n06Bn/0DMZFmsoA4K3PLh16N2hRtSU6FMXc0Uf0FzWfYvqFcon3cRwoZFDoGj\n1HgH\r\n=A3hs\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button/styles\";\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.**\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n**Note: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.**\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n\n**Note: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommended to\n always include it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color-or-map)` | If a color is passed, sets the default container fill color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`icon-color($color-or-map)` | If a color is passed, sets the default icon color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`ink-color($color-or-map)` | If a color is passed, sets the default ink color to the given color, and sets the icon color to the given color unless `icon-color` is also used. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color-or-map)` | If a color is passed, sets the default outline color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the web 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/density":"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/button_11.0.0-canary.67eb0df80.0_1615934395294_0.6103053219724108","host":"s3://npm-registry-packages"}},"11.0.0-canary.941ca3b3c.0":{"name":"@material/button","version":"11.0.0-canary.941ca3b3c.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"a46d240ff190ab3be8200db31e7186c97503073a","tarball":"https://registry.npmjs.org/@material/button/-/button-11.0.0-canary.941ca3b3c.0.tgz","fileCount":40,"integrity":"sha512-eelDaIDZYNVLCvFVH6QAJwKIt+YzYPKCrZX1Tgre5IgaHBZ1KcRiiTiV+IPddnHHsIfsn5qPJTz7DhGPhoDHLg==","signatures":[{"sig":"MEQCIGTliHV2Qkm83Cjd/jxFH+eDR7H2uL3GPrYwEIksL4DHAiBYKzJOyS4AmFWKvEX1fY8oJYySWxFhBk0sVnImFBeQgQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":496854,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgUTQpCRA9TVsSAnZWagAANecP+QAMtEUcbZqf3d7GjK8X\nsjkBE4ZgdGjBBalR+y7soCcCfd0NmLxzd/8TrRkazU0A8D3vJ6TMxajJZYBz\nmFFR8uSjSJLr8xSXKZroFrT4j61fydqHbbrLiAojSJVSuEwy4WAIKBOhO/nj\n/g1CxoFRxOd5EurxC9O5EAgGzb6DWO+sFs4gb+VazqaUMM17RvFNJBRLVXyE\nylV2PWFuvx+tNEGJ7wLds5VoixVZtVw8q17KwM8fxJBSdwciTr3wud6F8GXR\nvh6uOdsAgeWFufG2n+pgd9EoC7EQ7moc8ni2RkpT5lCTNnQawN5zDpSing7W\nsu+ZXYIkcCSNpxI+OgC2fllGHF2+JVaNqPivmtD1HRsqc6Mj+oVe0ckD2HO0\nmfK2q9bCNfTqtgbNg2wKhOfNeCgcr0HIjnUz7Tfcd0M8n1eTN7x7gEleR49t\nsN0SN41ObID1pKLb7xGX+H7WsP2tjGsSRSr2j2wsDJ53yygHUTIo6a8CwnKx\n/6ha4USzjbzpmqMG4tBjMJcV4B/zgPDhQ0v7nxYLKL+G1zdx0V/M9s7K2FiY\nZCez2b14gekIv7q0TNCQS20aAXxbHB3PqVkBJWWQ5cGge+w2eugteypdEZBB\nS+HSlUwtR3BLvIDB79CzxlgY1BAo+kY407Ssjt3URkfrZRzJ1PWrqt300Sfz\nYnXR\r\n=g3ag\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button/styles\";\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.**\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n**Note: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.**\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n\n**Note: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommended to\n always include it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color-or-map)` | If a color is passed, sets the default container fill color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`icon-color($color-or-map)` | If a color is passed, sets the default icon color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`ink-color($color-or-map)` | If a color is passed, sets the default ink color to the given color, and sets the icon color to the given color unless `icon-color` is also used. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color-or-map)` | If a color is passed, sets the default outline color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the web 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/density":"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/button_11.0.0-canary.941ca3b3c.0_1615934504605_0.06781800287808903","host":"s3://npm-registry-packages"}},"11.0.0-canary.3344d12ad.0":{"name":"@material/button","version":"11.0.0-canary.3344d12ad.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"f261890dd46db742a2eae6f99b1c35d9e8124f35","tarball":"https://registry.npmjs.org/@material/button/-/button-11.0.0-canary.3344d12ad.0.tgz","fileCount":40,"integrity":"sha512-oqETadNFxyiGBfypwDPSdW1F+L/g3jTO0cEuozUFYv8sEfsdALJcucYlMgPnIwrP4HdI2WrZ44NJNNtlJfLrug==","signatures":[{"sig":"MEUCIQC7OxTnLaC+9ddmG7CXl953KHO0ZlbDKr4J1Z7D09DpeQIgKRsVcmDsQYmDofOsebpqBqeEH+ccxaCzi7eDUVOIl9Q=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":496854,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgUdOcCRA9TVsSAnZWagAARI4QAJMusU5dASgi20txSVVB\nhYm06bn+eV64+muP/g0tAoRMwMX03eVMHDa/3hHz91qqdtAb87YyKt4GS8I3\nR2cbYFnDbVknjfefiFuxOl8/zSBajtquOTl5CYyzxWYvx77rFgyjEyA8oCDT\nPYoquUcUjRPimdxr0QbEO9tBpGU/etgt1QhPBKV4KLid3SSKNDnShTQRx2da\n+tryjspxyrRdSDR2fyhjELCMKlnMYp/8qwG/qNQgiXxHs9eHLyOgfuBYuFQh\nuaHQOLPQNEqA8NPprsJULsZrUge73tVxBs/HnHHlAd44wJLIEoboePip9Olw\nlGY2iWUhUomQOxb9OhoVKZpiwVHXHzNoD/PJK6etNfgm6m/FS6qJC29ySSeu\nBiCMYRvbIFfauWtfBhoYxeNcf95MB2EGJqhk1VWyTyhEG0NzBLoffDKEPJ95\nvMz/ce9yNLhXqiVZ3/d211PfYr07rAEOBEWlFBCItR4nk+ue+7GKaxDvNn0/\n9D4OPprgJGVZTnrhv4cKdnIhXbrJ1AE+yvO9gyC5bZB7sX6+Zht2uMuNd1Y1\nFc9FKVIcvPPOqTie8Emcu6Sku8ZNVqGzXZn+ZwXklV+KQtPmBvafgR6dY62I\nzNl9d1SUfztc4cAyIvkgPsRDVzxSPiy5AnOJkGIek93iC0tO8FDZH67MIEdc\nU4Dx\r\n=gLYn\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button/styles\";\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.**\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n**Note: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.**\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n\n**Note: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommended to\n always include it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color-or-map)` | If a color is passed, sets the default container fill color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`icon-color($color-or-map)` | If a color is passed, sets the default icon color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`ink-color($color-or-map)` | If a color is passed, sets the default ink color to the given color, and sets the icon color to the given color unless `icon-color` is also used. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color-or-map)` | If a color is passed, sets the default outline color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the web 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/density":"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/button_11.0.0-canary.3344d12ad.0_1615975324268_0.7083546912790797","host":"s3://npm-registry-packages"}},"11.0.0-canary.6072ed604.0":{"name":"@material/button","version":"11.0.0-canary.6072ed604.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"33452cba698548c8709483db5755db87b989f9ba","tarball":"https://registry.npmjs.org/@material/button/-/button-11.0.0-canary.6072ed604.0.tgz","fileCount":40,"integrity":"sha512-gUc72qrpUXJuN2bTL3Gzhbxd3sboBNyHktuXLfk+r9BG6DFFV9TcuCoYsZCLUoWQwf2FQDogKcCi3a0mhfFTSA==","signatures":[{"sig":"MEUCIQDofIuTcXice5LVawAL/Tksx5dpXZR9Vf0dHdyz46+wcwIgBYW0HZGNL9XwFQllAp02ayZZXpArVxnp57hwLs3sJJ4=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":496854,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgUonjCRA9TVsSAnZWagAATugP/1uiEBZNZTbdET7qEobd\nOdtKNgjG3xWnvMN0Gd1OzbE/Y/yXBcfw1HQedIgb/pVTloWmSE5HpXuiG23f\nlT4ZAPxXqwQpIfD1RSSiPsIR2yvaYoHBunDvcGYH/kJpavIweg9YN+FBDd8h\nS8v9AOA+92YbvTxM/iGpFpwDssBwkeCnYGV8F8JJG6KH4agbe2/aPXVXnsfl\norkNM5klAiFQAJuAVwtQWbRhc4pwk4x3IKFxA2r/c+H5hMvuIDcDTJLDhy/0\nz1FcZvVgJZQXMqQ7AnX4ssIC9/JLc7YhBfYqX/Bt9UzinFYe2A3u2gFhMePe\noB0K2lVHA1eO8B6vT6CEZFXELv5C0xnqd+sNhk+g7iWh1jzsV1RIRRgKnZid\nDPunxWUo3xMT0n+/D3QNmdAOyxIy7mJqxi0KpdThjfhLc7h7wVQzOKNl+QtO\nxw9Now7Bc915BHtP1cEztagX95rRYBLXDYjWiO2a6lrZfvw9gwWuLhLk9VjS\nUP158n/066vUPY8xXhp6ditnRa3jeRPSVA69Fp7kiEIizcqhCx8nHVP0W5pT\nKFoITABT0PPHFstD7yTJ7gXFVXrIrov4UosazmIc7hpBOCXp1z3rGd9szPtT\n7BvMW+JVpTbVAW/zcISrXvhMEzXVqKNGui4yRzsBTPRbo34VqVqQXtHZOXgF\n+V34\r\n=uOA6\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button/styles\";\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.**\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n**Note: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.**\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n\n**Note: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommended to\n always include it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color-or-map)` | If a color is passed, sets the default container fill color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`icon-color($color-or-map)` | If a color is passed, sets the default icon color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`ink-color($color-or-map)` | If a color is passed, sets the default ink color to the given color, and sets the icon color to the given color unless `icon-color` is also used. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color-or-map)` | If a color is passed, sets the default outline color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the web 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/density":"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/button_11.0.0-canary.6072ed604.0_1616021986494_0.1312841818975108","host":"s3://npm-registry-packages"}},"11.0.0-canary.d3a6862af.0":{"name":"@material/button","version":"11.0.0-canary.d3a6862af.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"640be60c64ba0fd21f33296ba395a394c0abba58","tarball":"https://registry.npmjs.org/@material/button/-/button-11.0.0-canary.d3a6862af.0.tgz","fileCount":40,"integrity":"sha512-/nnS+g6gxD33NlIoyUTFV7BGohd28Y59M8ISwM64RiIeybiF7c19kDO9wGYuc8c7Ty1HEm6MPYQxkix372s6DA==","signatures":[{"sig":"MEUCIGiOGp4B57EL9dH9NGEYXJiwJB8uE4XXODEb9DuV6nYzAiEAnjTGIDwHrPZFXBuRepui7wnX92RgRG4+Y/rdWt40hxw=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":496854,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgU33ICRA9TVsSAnZWagAAkwIP/i1xldvygj7Yf0i8zuV3\nT+houKkCPb5II3swQhpv2CszVI6HJr7mmSfSD17bMj73kOAbRuIHR2MI5LrU\nEVkK61kVR1SzXc3A7CNjWbfTykeEuwDKUXsnE6aDBziy7Yczm7vWJ5pLqHYK\nn+kMmlap4cNwuXkvNOVG1WQ9HZlatwLMrf8StS4orpEuCmhKUIxa9SH7TzVl\nSWw51jr5odRjRwVY6AGWVipbAU+WH/dOeUSIG8knQSjJXqKWaGfuEWV/GUGn\nEMdUyaCpow1cJD5s2vM/R3a8p7iKOYSqd38xDHc5Zec3B+uBrc8HFmXWur8B\n59T12TmejlGsBdcdTNiWRE2D/i3zLTRrEpXJII/ey0C4Nnw3zEC0Sk8QZQVN\nD5A2e2FIiPv77MKLXpSEZo/3QoD0PFHdRnnQTBLBjGEoDWKHtO5CQ/2w6bjD\nn3mL9kxspLhcVurociFw1/Nbz2ATltt7G5J6oVReTf+x/cUoV23hfLvznCoh\nUpoUk02jddOCLm1j/ttlaSHUTLQYfHU/cHF3I1tCbFTesgAyvs/3Y6zkJ5Id\nPcP9rnNcvHQ9o5Cwv5KlBWyrbfTOjgUYfodKl2A+A2dwRvKSquGWj+5G2mOp\nsTpqofhi02u91lIf4ZKoj1vUb8FPnGdjtxDfVSMr1xPxEu0CWZ6uRFJazvOJ\n6JU2\r\n=kpr5\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button/styles\";\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.**\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n**Note: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.**\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n\n**Note: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommended to\n always include it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color-or-map)` | If a color is passed, sets the default container fill color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`icon-color($color-or-map)` | If a color is passed, sets the default icon color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`ink-color($color-or-map)` | If a color is passed, sets the default ink color to the given color, and sets the icon color to the given color unless `icon-color` is also used. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color-or-map)` | If a color is passed, sets the default outline color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the web 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/density":"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/button_11.0.0-canary.d3a6862af.0_1616084423652_0.5943813419276469","host":"s3://npm-registry-packages"}},"11.0.0-canary.40dd242d5.0":{"name":"@material/button","version":"11.0.0-canary.40dd242d5.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"03d0e5d64b18071b1f6fe904d1f3b5aedacc1a9c","tarball":"https://registry.npmjs.org/@material/button/-/button-11.0.0-canary.40dd242d5.0.tgz","fileCount":40,"integrity":"sha512-6lUBfYjKGsB+5dtq7llk0RIAtXKx2ftYOD/bT6yG6fKAAS2NnVGYE0AkQ9SUeJsUMh8KhpIwLEN5dNrVHs0XVg==","signatures":[{"sig":"MEUCIHwTJabvUP6wji0p8ZD1oC/KEZ6g8JhnCThp5XO3iz7dAiEA8g1+WzkE48KeZo5vjp9UZnk6NdTPVNHGLW3Gd+JLF60=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":496854,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgU8NyCRA9TVsSAnZWagAAZUcP/RGGl1DMwIZzsojynlSm\n0O38dteEdpLn8XUHltU/3mcdwOWp0ro6RgL9ZjkGCkpxWqL3GsiPwH60OPmJ\nl8uYxHQF0hMW4woC0A31smhVca/3MWFd4wZUFkWDAWvI9hpxE96MOrr0n7zW\ntQ9iN8whYeBccL5D2dBfBabSzsSVm8EYPtUsqVKYgUo994ncclGijHPxJJZP\npwPRWxcy1I2gzHJa79vlRlrY7kxpxXJMD32v9igkRY4tq5wtIppScyV11rXL\nWJqgUZ43kTl6UZNPyU3xU0ntg6hYIOb2w/IguIoPoCEvcKaZYowoc/+Vhq3b\n+SCFVa0snFH+TiVYAv2VeZC3tsemC7YMcrC5zngjb9ek41tMW0/Yv5yBD/eM\nGdHLm98uMYpSFm1YDszu6ow4yf4RSpGy+RGp95ef6mtXRi3n0pQOMenee55k\n/CNvR4N/KVuhkivKtSvFbTxRYnTN4H9geU2Um/8NpI2AxG00St92fgRBQfor\nEUaP7Ia4CPmX581P1+KTmOlRh57O8Z9/YXi4vYQVo2bvs/A1rf2XC7jkLViT\njTSIOdxyEtYLlwxENrr6wVGwvksK2YWKxSqiQSzIRAEG0TPFYHSpJcau0cf/\n6DGH8LWBcu7kti7QeeJjPc7KzE0tav6YlJIzmDP/ao5+EWgLuHgTIVJz0I2d\nZcit\r\n=gxDc\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button/styles\";\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.**\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n**Note: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.**\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n\n**Note: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommended to\n always include it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color-or-map)` | If a color is passed, sets the default container fill color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`icon-color($color-or-map)` | If a color is passed, sets the default icon color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`ink-color($color-or-map)` | If a color is passed, sets the default ink color to the given color, and sets the icon color to the given color unless `icon-color` is also used. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color-or-map)` | If a color is passed, sets the default outline color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the web 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/density":"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/button_11.0.0-canary.40dd242d5.0_1616102257807_0.3867394548330916","host":"s3://npm-registry-packages"}},"11.0.0-canary.ec8f8465f.0":{"name":"@material/button","version":"11.0.0-canary.ec8f8465f.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"6c2d726dd96212cb783ffc21ce1b2db1d545970f","tarball":"https://registry.npmjs.org/@material/button/-/button-11.0.0-canary.ec8f8465f.0.tgz","fileCount":40,"integrity":"sha512-vviW4+ryBiiihjsVNZ7W8BaVsSt9uOK7ujfUBXyKvbX9coSS7a+RX3tzpQlqLQi4YceEzYzE7B4QSu1tuORrkw==","signatures":[{"sig":"MEUCIBiXInoMWv/ymlsOU9iXP/WYa03QF1A7CzmiSkHfgmZDAiEAmaZPrCXceDegOu2Wi0lTIa3sRM/qcuMKk2V2ACIqpsg=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":496854,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgU8nACRA9TVsSAnZWagAAZkwQAIJQ4av7rTqrDLjiFqCc\n+W0Im5pd6HGtgSpHlnYF+43AqW00pWAndDSYOke+JGzkfbzACfjBMjK3agAi\nTVFrwyKB03Nhz7o6SxxIKUH2+yhZKbU1OGkaPTeyVoffGPufpYTMm+mjehdi\njtuGfbb8UGv+j0GEQaDrdtt5iAsJJInSNWlcTqdEx1TVVnZ7w/XQRY8RU6LR\nwOwYPZ/hjsHu23a1JOct1cM5YrCEpIgJeXcrfYu9NpQhWSE+NqSUHVpRJd0X\nwbV1dk9M/BpUUjd4pTJTGnMhJOOomcTkUUB36VrYKk3q/pJfAnTyO2R+o7e3\npwm5vWLd2Gw6oZFbcSMrKZunZs/EcmLdp3Bzvo2m63OAMmRDio5smRTe09JU\nB8yDRbB/o1fAoZnw29jzpYaQlkfF7XdfjXzX47LRENl9PXEif+mbhb2pfHD7\nXByjkrSkiuNyRDZesq+gbLB8px9VWfClObOsvlvL8OmqPjk8592vajYjbJcL\nJsknz1wxtRJEI16kwXhfT3/ZcIi+Ins85AYQcQtJqNrCjn7cMbNY20V9C0JT\nPJ+MIE81IDqClJZSLdOK8WjPFuZLMe5F99hLO5Bk/beMxqi4Z9NCs8CLkrLQ\n0miDHE3m5juNjgI4/s7q4nSLT+rmruH2eM3hgjI5PJ9hNusJ4NOjebhjo2af\nkfCc\r\n=YEWo\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button/styles\";\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.**\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n**Note: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.**\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n\n**Note: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommended to\n always include it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color-or-map)` | If a color is passed, sets the default container fill color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`icon-color($color-or-map)` | If a color is passed, sets the default icon color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`ink-color($color-or-map)` | If a color is passed, sets the default ink color to the given color, and sets the icon color to the given color unless `icon-color` is also used. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color-or-map)` | If a color is passed, sets the default outline color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the web 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/density":"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/button_11.0.0-canary.ec8f8465f.0_1616103871864_0.1766570481455454","host":"s3://npm-registry-packages"}},"11.0.0-canary.da38969ec.0":{"name":"@material/button","version":"11.0.0-canary.da38969ec.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"d9071b491239941470604908c5002e1ae99d733a","tarball":"https://registry.npmjs.org/@material/button/-/button-11.0.0-canary.da38969ec.0.tgz","fileCount":40,"integrity":"sha512-NOEFBQ+SR84tUiEghxJHX2me72/3WrhRh1W8Tv5kOSTk/C0SqCdAhexVKxns/EfP72ttEM8FAB7cjtoblF2MwQ==","signatures":[{"sig":"MEYCIQC35wYHy5iVPuWQ8Ivy+AkOn+v3Inupv6Ow3Fr0tB9gHQIhAKe93BniL95przsgw+lXkMN/RXQMB6KDWPcQhJagvahU","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":496854,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgU9GmCRA9TVsSAnZWagAAXUUP/2WrTkOqQx3KIObWisiS\nrazZBvFztojR91mTU35kLl3+SIMoJ/4hmrdoWdKPUoT454LUeRElDo5S//tR\nMf26NZV8bJnWOWI3XnnYsZ0DSr9afWciSRP4mIEM8Dh+mVIkUBVqIz2jHpvZ\nyvCsesIsNJc9qkKeHvwle+hXGXL8gI3rxeFI3f0TptE21J1DCEm51tABCdBU\nCxOYJHh05Ty8abnDwutlil2OpZP0ef1xAly2DeVBfTrGPUUTUwiN/otlqBIi\nnIOpjREPJrWvGIlwo7+V+uGKoXi6rQyBRey0G0E5gzLEmZo9E9EBslyQcZbZ\ntiolN6jLIS5C8YQgsocT4THAUHpVi73POBX4W64CjLnDl7Rvfw725uDoMCsK\nDNLQ7fXycfpNRyVHVm8q/HLi+GB0wZWltclIB0x5G6WPU5yOgwHA1D1danH2\n03hJAkn7HrKjMMQTxW//zEEhl4FTPC2q/cqqsGoUDFy1inoz0BkMR2UgKu39\n9pryIE/ius5NWz6BOSlAQ5KKLyhNhhe9daZExtTeBKnTzgh589Z17vwqTHdb\nRKHfhj5eWqg2/AB4sQVUgTz/XOMFcQpT4zuv5+Bz7sZyqlr4CM2JMBoqqNuM\nFeFqWCb5HVJq2TFG1AjTIzFptvSzCvtpGUPtxC6mq+YFdBc0NqgbGHJOoZPc\ncIJG\r\n=0qCe\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button/styles\";\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.**\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n**Note: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.**\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n\n**Note: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommended to\n always include it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color-or-map)` | If a color is passed, sets the default container fill color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`icon-color($color-or-map)` | If a color is passed, sets the default icon color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`ink-color($color-or-map)` | If a color is passed, sets the default ink color to the given color, and sets the icon color to the given color unless `icon-color` is also used. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color-or-map)` | If a color is passed, sets the default outline color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the web 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/density":"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/button_11.0.0-canary.da38969ec.0_1616105893598_0.851642697781122","host":"s3://npm-registry-packages"}},"11.0.0-canary.f5246264d.0":{"name":"@material/button","version":"11.0.0-canary.f5246264d.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"961087029aa9b52f30ba0217b716b922462d87fb","tarball":"https://registry.npmjs.org/@material/button/-/button-11.0.0-canary.f5246264d.0.tgz","fileCount":40,"integrity":"sha512-hIgU4sKtF4gxdmhUKaWB10s2qQda8to5G/eWoK2pI5bey5dp7eF1Lk+aCJcMZS5EDFb5PV2dU2+F75Hhpmof1g==","signatures":[{"sig":"MEQCIE/v3NdC2m9He7iY5N/57ZgmWBRIYlPRd9JMO7Hf5J8NAiBSZvzmOriRX/UwzSu37Zc7kF5G3K/9ZHjYkpVVkWL3bg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":496854,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgU/KBCRA9TVsSAnZWagAAeR8P/RToFif/e4NC7r2Dl9Tc\nSOhTCu0cZ4cjVXW3w+WlL7tv7/f6QnWela4CIgobYYk5pR5g/7zWs74wY8s3\n+HbFxkK3/uQcmUcKf4fNXrMaW5PLrBDBO4WA1Nck9sQmksEmc3JcpS+XjqA0\nnNl5w22q0ys/I54vjD4jY+FxmZ7yMoUOBhl+eiDeeREZ7JVi6Kmttc9+Bdxl\npYlo7I5zC7Gip00cIksg8NXPUAavWUs6rS7nFwHj1pLV5chCAHDgpJm8f+A9\nSeZGfPm8OTxKz9zkvuFTtZWlF9FMnCINiKUhDEE1wnMyEDDmEYhYfQ1fXWdQ\n70HQ45XtSJB2yu+dXKlrMxvtX57R5gqfG+F9bb9iw/3GXNOevZpDm8sFoU5r\n9JGgBXFbNI3KSW0Q0SuyIwVOZ70Px1j162nFFxbk5x8FtgL2syqyOJcjoY5j\nAlYcSd6FIPybTRGKj5QJ2eulw4O/6O/i01eMhJLtQ2Ou13KEPt7oGfvk05oi\n+zVhGM+WZEu+6Aoh50lBvPZJn33JLqznx3lVI+d/DNrfsbelv2LKh04APOj0\nnGgO2HLSLMMjdsfwaYQLFT+LzHMt3IBVDK1RAt0gDMtcKDh87yYYRBfWd3zp\nvFDE4vftWmNffw+X3M5dfVpziPjnQ27r6xpej5OgRdh3FTIj4top/83RHGTK\n9W1k\r\n=eHg4\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button/styles\";\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.**\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n**Note: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.**\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n\n**Note: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommended to\n always include it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color-or-map)` | If a color is passed, sets the default container fill color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`icon-color($color-or-map)` | If a color is passed, sets the default icon color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`ink-color($color-or-map)` | If a color is passed, sets the default ink color to the given color, and sets the icon color to the given color unless `icon-color` is also used. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color-or-map)` | If a color is passed, sets the default outline color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the web 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/density":"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/button_11.0.0-canary.f5246264d.0_1616114304952_0.45765681347044995","host":"s3://npm-registry-packages"}},"11.0.0-canary.03d34bbad.0":{"name":"@material/button","version":"11.0.0-canary.03d34bbad.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"fc16ecb90184a460dcee7ac768b0308088bccd72","tarball":"https://registry.npmjs.org/@material/button/-/button-11.0.0-canary.03d34bbad.0.tgz","fileCount":40,"integrity":"sha512-tEkINICLOHDthJjOWqeloaLEhIIC5mBNelQ1KxnLivmoMgr3cTHli/h9ZeWed56z2JmH8GnPLXXInobbO+NvXw==","signatures":[{"sig":"MEUCIBNbt3Cr9rG8o9SPNjGtUXKSCKY40dlmCHQYg75dPuNVAiEAt5UUygRzcCSP/dHAoGOKHK6lfv+DLZBb/rHb7R+QOoc=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":496854,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgU/WaCRA9TVsSAnZWagAA1UMP/0+MUR19lvumi5ncdKk2\nA1fUtQDie9ASmDbMd0AzSx5NbtIIBDZdwNBVxPW7JYgauUsXj2Qv4wRbuiQ7\nG0WeWMJ6iGAcGrl3NlrYnaLt4/sAcFUi75KfjQZziNflqao6QlIj9ZRElvfu\nSf1snrLobPzXODVhFL5LYRigYXRIciYx8IEKjx0bkpWLJEY7sKYiCDVr2KZ0\n8JfIlwOMRx/KKOvZSXQImele9jJpy9DWS4GM7t+JCKHx/iIwNJM/bOI+kwa0\n89dajetQod9Yu9+BUURCmZsgbI9fE0/LpGHov1mH6svVSem3x7uxXLK8wlyP\naqAKd3rXn7ugrLIARnWm5xT0re4B+hByOEPlDPjReQtp+7PTbPvyvIoEkJyd\nehpZfVxW16yKNUoI1SNL6998ZiF6QR8HhJQK+S4oSq0xKLoVXlj5sPqa+FV6\nBTgYDeGuJrq9ehil1LMn+wtyltXyc/XPpnaKm0ORiNrbUsAa0YgguEuRzsWU\n7iT1j6oJH25HjDn0k3SNdZCl4EF5xhUfFFx/djafEamgLJUEzOe92JYfKqj/\nrsN+AwBxvz/g766OU78wcLU+HSE2s9PM4rs2uQEJZa3TPvwkgJ9+mUBLvUAU\nSAvX7eToe0q4ajvrV+A/d6N6nTklCNyF5zTZIiDpG9k2CIqXpSGZMCuOr556\n/Pue\r\n=XiSm\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button/styles\";\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.**\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n**Note: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.**\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n\n**Note: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommended to\n always include it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color-or-map)` | If a color is passed, sets the default container fill color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`icon-color($color-or-map)` | If a color is passed, sets the default icon color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`ink-color($color-or-map)` | If a color is passed, sets the default ink color to the given color, and sets the icon color to the given color unless `icon-color` is also used. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color-or-map)` | If a color is passed, sets the default outline color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the web 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/density":"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/button_11.0.0-canary.03d34bbad.0_1616115097784_0.9588880634372785","host":"s3://npm-registry-packages"}},"11.0.0-canary.cbc57c600.0":{"name":"@material/button","version":"11.0.0-canary.cbc57c600.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"8ca64198d947d599f2f7b10361b806f59ebaffde","tarball":"https://registry.npmjs.org/@material/button/-/button-11.0.0-canary.cbc57c600.0.tgz","fileCount":40,"integrity":"sha512-fF53A4rwtvafnuYFL8h5i/2h1QgSHxHduO8somSd8JYsrjqCNhauQOzFGXTpsA1y1CdQjK6stA5gkVqDoS6w6g==","signatures":[{"sig":"MEYCIQDht9c8SvxJhpWZtNvyuD5kRvA/Go0H6gW4+rsrwZYf+QIhAMR7A/+cP471EON82ef5nkaA0rXAQMzdkQGOGP1Gr+Mr","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":496854,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgU/eTCRA9TVsSAnZWagAA71kQAKKkZdv5AigrLz4SiVY8\nFxd8rFdYwymuMa3wqBGoLDo8BuVhHYU8FPFgK+jKNB4E827dd8iMC8R8TMvv\npotLCr1Iu3IFpRohBXHpLY9CBNo0q/zbx+txd2Jiai0YhHrEfqdMQZcmyUtU\n1QEaD+9miSFutD7E6fTFRxle48L/xBXZPcAd/I9Ueb0lhQHvdi3xroMMF1l3\nxtfbKHFWI2EBY/V44J0Gsf8L039hPldkurl9Lf+nyBiBSX6q5I6Vh7enmRYD\noRkVJcgBC+1EaS77othUEtk6wZS5z/9LwYgbsdTBDq/56QtAvGsiEoEF4F+y\nPh8h3DquIfkPxo+mu4Bi0Ij1cuEOHgUsvvkKmM21RPp4dR+wTDSJzTk3+CH6\n+fg6p4eDjlTVRinyOIvTZmEndzssrobRA+er5hmKTM8MgnPBkbhazEYy3Int\nnnzVGfCyUpFX+K+HHnTztJtJDpui+mqzyiRZDrbWwucR/sSoqPYi9ARrq6wQ\nhWlxYcZ/Y/hsurJ/66rbZuyymo2sPkOKmYYJV3eWeg6bqrIiCpkDuowBgAAt\n+n7QvqKVNsOKCdtStA0B7Z6MuWQg12bgk2VkqOjg71EZFmBTj+AtOiEpUu3T\n0JhaVK0/21wsJL/CEkvdjwUhNtLsvQtZu+6moRNUHooejkRUrzay7jeGhAHI\nNfm2\r\n=6Nda\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button/styles\";\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.**\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n**Note: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.**\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n\n**Note: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommended to\n always include it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color-or-map)` | If a color is passed, sets the default container fill color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`icon-color($color-or-map)` | If a color is passed, sets the default icon color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`ink-color($color-or-map)` | If a color is passed, sets the default ink color to the given color, and sets the icon color to the given color unless `icon-color` is also used. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color-or-map)` | If a color is passed, sets the default outline color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the web 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/density":"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/button_11.0.0-canary.cbc57c600.0_1616115602790_0.03561201284163529","host":"s3://npm-registry-packages"}},"11.0.0-canary.d6c5bcf37.0":{"name":"@material/button","version":"11.0.0-canary.d6c5bcf37.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"4c101b015d5cb19c9c5a9480377799e00053858f","tarball":"https://registry.npmjs.org/@material/button/-/button-11.0.0-canary.d6c5bcf37.0.tgz","fileCount":40,"integrity":"sha512-N1kzHy2+gsCmgNYflSHa5IW3ZW9h7k2o7f2AT8oVoUhgFvRbAeKoxpxDMYV3lJ3CrZZubIALIfyTKOxEYp+WlQ==","signatures":[{"sig":"MEUCIQDtVJJX7KfuXNQh73lsFcqKvDyz7hkk7Ab+Hki5VRI8IgIgM27hJexBSPsRbhRU0a9XVeJV8yG3haPGGjAqqcc3o/M=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":496854,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgU/qTCRA9TVsSAnZWagAAl24P/A31qQ6wq8YmRF/CQehd\nGLn5X697Wzpkh8uHNI7pK0MApvvP4geKVYkHBQ8c7nNrtGvdrTMBUuH/oNOB\nZHU6UbEyZBUI5cG8poS2eRBcIocLYZUXM5y0jJ5AInjJna40wTTtSIphPXP/\n7qv8A5oA15SVH8A8vzFsvIt21wIR/KK0SiElDSdD/eqrhLB3B/dFF9k1ps40\nClH+AJQcFnxcZJPbgwDGr3u1CYrA7gd+NuLUZzKRTuqDWaOA/xy9S1EdnwOI\nFWzBGi1BCDRcnM+cHOplfhimW7WnNc6XB8HBHJNgNYq3cGJ82kuun1Fx3SDn\nTCJNhg+neh9s7FvQbd1Dht1nvzGzrpe+cZAQQOsLZkMH+7P6Rn/ZL7ybTRJN\nw9h0gGdmEV0AMA5Gj+Z6mOq4cputy6DPlv85fTcg5lW3/pvMJxqCx1gQCCSi\nLVFwOaoiUySLP533X+LZnPYfTE4NRvekSG1c96CuRYVSM5+JOyLiocOP973k\nCdD+ulWa4Igq672VZ2f5r0C2G3Ng/2NNvPuxNEZIZpvyiJuWbo8i2rIaBFAL\nKdDywtQE7s3N7MQpv77vu9MyPXurtm/nBXL+lzwIY4b4ggByNF7wPIcG+JRn\nIRajiUQxjiwwf31B0y8XjgqG4p5vvqJ83Xcy1hck5Z244aJ0AKjf/aYUw7JY\nT4gP\r\n=wgar\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button/styles\";\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.**\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n**Note: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.**\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n\n**Note: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommended to\n always include it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color-or-map)` | If a color is passed, sets the default container fill color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`icon-color($color-or-map)` | If a color is passed, sets the default icon color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`ink-color($color-or-map)` | If a color is passed, sets the default ink color to the given color, and sets the icon color to the given color unless `icon-color` is also used. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color-or-map)` | If a color is passed, sets the default outline color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the web 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/density":"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/button_11.0.0-canary.d6c5bcf37.0_1616116370668_0.5396837575524043","host":"s3://npm-registry-packages"}},"11.0.0-canary.fefc668d7.0":{"name":"@material/button","version":"11.0.0-canary.fefc668d7.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"ede36275a4e7db8bd25666fd31413c1da468c853","tarball":"https://registry.npmjs.org/@material/button/-/button-11.0.0-canary.fefc668d7.0.tgz","fileCount":40,"integrity":"sha512-/7rvcAuAaePRxEWZFyN45H0yKCUwlpeVeYPrAjNdCHn/cRAWBRWKM5GGDPS3Rxi6XVQQFpUE0nz5IV1eF3efTQ==","signatures":[{"sig":"MEUCIQDgw89W9ZeOAfXvc7OPFXB1pdJz56tY8A98uqJ7S/5sNwIgCMI+0ZhpfvO4LHrvevl8VDRwpkWjrCOvE/WFn3haie4=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":496854,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgU/+RCRA9TVsSAnZWagAAUYQP/3PZZwa5kK8QTkazcuAv\n9+kBh+JDWTAn5Cx5tDFr2QTZKIUGQIkB91oRrOhXBEcg5dS9wk5sd+pE0Wv0\nUVdp+jfAJZ9AE5GrlUQA/Y2yqOl8MvpD4fKHogzE9fzhljg2OoAZganZ/xoU\nzBFfLjt4emNRoMaFN0HgXmANBfa2KUsESh8732CZ7bgHk7nfDVyXzxUVVpSO\nUkerFdIcFExA6upGHi7yNBUmbaZK9E/M/BfHYqOPJ7IALd/a7PlpfDzB87C6\nG0EuJc6pIZfb+ot/cymotVPdAwWwuGqwNBAjM9Qa6ayU4pVPWGfobSlmWUlt\nxPiAPRkY3trvrtW6/BoC0+lXyURTIt4GXDw9RCUVmfS1tiJnRacNutXkbVK2\n56snPg54CYasvUEOLMHDEetyCiFZWMS6HGqn8PPWjDDGFq9+2ycm04WWlEOw\nYqlIXfRcd2D/jKG3sZK2jddC0VcDE7MCPq5gahBKcUNpBB9eiUjs9FGSMiAf\nUFgW8YZKLXq5uR2EPc5L8qss9piiyOAdxr7KlTu7gBP50/S7oKNHYPUqgT34\npgdmRoEWX/b+XoeGPVtvBxcg2PSZeMAipurU2hayRvxuBtiGq0BA0QkwlADs\ndzmCJXfQZmVKQrOGGISaQfpWwNP+wQbAzHgKPbM9/g490jqzYXurusokt1MU\nfLRd\r\n=IVXD\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button/styles\";\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.**\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n**Note: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.**\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n\n**Note: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommended to\n always include it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color-or-map)` | If a color is passed, sets the default container fill color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`icon-color($color-or-map)` | If a color is passed, sets the default icon color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`ink-color($color-or-map)` | If a color is passed, sets the default ink color to the given color, and sets the icon color to the given color unless `icon-color` is also used. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color-or-map)` | If a color is passed, sets the default outline color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the web 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/density":"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/button_11.0.0-canary.fefc668d7.0_1616117649301_0.19317068889127853","host":"s3://npm-registry-packages"}},"11.0.0-canary.faa7d3226.0":{"name":"@material/button","version":"11.0.0-canary.faa7d3226.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"f4e4d02108ce1e1cf65eb7e2bba4e98a55acae1b","tarball":"https://registry.npmjs.org/@material/button/-/button-11.0.0-canary.faa7d3226.0.tgz","fileCount":40,"integrity":"sha512-D91ncW+oylwQKCytnBJIhbjNMqYHhm6MWgNswXU39eCPpnSZxx9WSp2FMOd677KGqk+pl9zTW1u7k3VamvOvgw==","signatures":[{"sig":"MEQCICpUTYE3DWZw27YhSqwrEi6iF7gJIJOO8vDXoTRLyUdcAiBMLBJJJlE6Ga/y5BxZDW8+Cxje4j6I9fk0SP07hiUTaA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":496822,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgVOL9CRA9TVsSAnZWagAAr1YP/ibR3wJLZGe75825s1jb\nEKBMnV1f0uTFb5RWBJM5KNPQBmx+AW5jffb6vdeZCmmRMvZqnncOUcZxk0Qr\naaMjQ4d3iJEaC/FpqdMc3SazZR/gOxfr1bb/Hfm79aEira7qby0+jwkRZKA2\nH0HQ/g6zv8/LY4AjRLH2XtK8lYdfWKP5yYoqfC5850shtc4qOw2Jeo189A6j\nrs8zXEE+nvDn/VGMcazeR5grkSh6ffnpgxvcGYY4MnUe27HM7WgTWxctB5vf\n8La7YlCKH1qnY+/5IBwVWNKbgNeiBh9Jr/nZnnenKX93+C5iob/TU8QQIH3R\nfC02FdEMiFtMNOSBeN+oStc6rn19wKZUQ+YlLknk8/EyG7CqVfDWAk+WppRv\n/UdRw0ElanyyE8WaqTlVZcnSXP8utZyhtbtPLReRUePJ596Dn4pe9DldROfD\nCt9uX0UnWvQBW8hfx57AqUDKT35YwbEnYLMvD/LOA7BSsCxPhBMZox8O3Xi9\nBts9sTsJfRDTNL/O032xkEsI2uDjNGAJAad+e2rAg+ZVw6XfM/ZyPYJM6I13\nGGixwfCSn7W/52I//todKfBBvfgPOuUD1gvhQ/cP8e2vK78BP9FwmtNPmvGt\n80K0Y1eOjkjUqHamXzizlehrfsy01m/gY/N4TstjeQseHTBgc3NrVcdfIYtw\nsml4\r\n=0kAc\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button/styles\";\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.**\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n**Note: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.**\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n\n**Note: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommended to\n always include it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color-or-map)` | If a color is passed, sets the default container fill color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`icon-color($color-or-map)` | If a color is passed, sets the default icon color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`ink-color($color-or-map)` | If a color is passed, sets the default ink color to the given color, and sets the icon color to the given color unless `icon-color` is also used. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color-or-map)` | If a color is passed, sets the default outline color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the web 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/density":"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/button_11.0.0-canary.faa7d3226.0_1616175868856_0.971625307688541","host":"s3://npm-registry-packages"}},"11.0.0-canary.c60449bc8.0":{"name":"@material/button","version":"11.0.0-canary.c60449bc8.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"88330ea85f171434497af134d7bfa9f7da8c1187","tarball":"https://registry.npmjs.org/@material/button/-/button-11.0.0-canary.c60449bc8.0.tgz","fileCount":40,"integrity":"sha512-d2QR7nsr5BbW0WPQi/cOIDy2xE53woIJDz/x/jqwsI75kRM364ytn6AxNO/KUtwyPWonRfCDlQv8gJSrPeQCSA==","signatures":[{"sig":"MEQCIAymQSD/vmOgqZZc98HeX41ZpCY0B3HJS+dv3oj4JHEbAiB1LPMZhqsU3lFnADeRjZI7PSOo8RNaWqS0Y+LxcMkktw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":496822,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgVOfpCRA9TVsSAnZWagAATs4P/3JkdXOES7UrP1YKOWXh\nLrzBK7Y3KAPAguCL6OxLMsCHJpRCQfaaIUAiDLiHQ3CI845QOmbyoaHKdRsX\nHAjnSlQgqn63gHq4RrfjQfAJA73DRqTc4X/eU6rm37/GG8mBeoxwOFEkc4wZ\nXbpoY60h3emEQY/QHgUd/nDFk7rFUM+ShyNKkqum8CvTOWsTRX+HzlzMwqg4\nmgIphJAzuDn7WozeKpoYzKDW9U/onmUO51VruAx6Oec0iZBJpkGMbZRIqmyA\nl3UIORi3G8bq6jdpn3YZoXti8b1i/Nu+d/dC1AePsp6dW5od60ZIJB/D258w\nAwb0FHex2YMFw+OgfS2rriGJFAVdbIODk3HLOlZup5vvqX8oKmBssLNk4OxN\ngY2ufALDQA3guraJfxzZ6zH0yvJTNaKNoQ8/OHF/7VnwHOZ78Tyfu1OJCzA0\nbSmS21t97QJsW845pzJBZ7Rkt4LHXqw8vlb5BijavjIN7WosXFYAgLJu/9jD\n0ouUUGbgWNSjBcBgEy/puBhoJbiCNBhmwKS34yLVfW+D2+CVYfSIZkfHaKQn\nGyNgbRie3ytBpRBt/WavKRvXcK0GteGhhQOhPOHXQYJ3pMWjI+9vLq3fUyN6\nSjkAVvDVw9FHcFU8WFjy+fmNNF4UiSJAtc3v81a4WrFgij35cTvWRYAApmSY\nUvKO\r\n=Nc/W\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button/styles\";\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.**\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n**Note: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.**\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n\n**Note: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommended to\n always include it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color-or-map)` | If a color is passed, sets the default container fill color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`icon-color($color-or-map)` | If a color is passed, sets the default icon color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`ink-color($color-or-map)` | If a color is passed, sets the default ink color to the given color, and sets the icon color to the given color unless `icon-color` is also used. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color-or-map)` | If a color is passed, sets the default outline color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the web 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/density":"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/button_11.0.0-canary.c60449bc8.0_1616177129483_0.06799729480605743","host":"s3://npm-registry-packages"}},"11.0.0-canary.5f0fc444a.0":{"name":"@material/button","version":"11.0.0-canary.5f0fc444a.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"8e6d52e4ebf1bde65e569426d757577a3a462d38","tarball":"https://registry.npmjs.org/@material/button/-/button-11.0.0-canary.5f0fc444a.0.tgz","fileCount":40,"integrity":"sha512-WGF15PRk/pViGLwd5CgfptZPDckd0J3E/bM3VTzDyIctFBNBJR/IKXkKSURbfyNEI07lfSQG0uGanFSuGYxCpg==","signatures":[{"sig":"MEUCIGZGyOc/iKwRqtQwI1KpVME+1tc6xdDVnJM8jwuBfAb6AiEA4Aimvf6T3lNtuAwR5/zj7DGbIskA/eE4KWQq+ivUGHE=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":496822,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgVO+LCRA9TVsSAnZWagAAFAIP/3VEUx9ATE3t3JSaJBp8\nLOvQcyqq7DBddzpCZfvsRWKrei1sGVxJarbRIC6o7qG/LW4KZbm4NQHU1paS\nhVylBBw/IPM7mmZUr6wGmwSZTjmheb/MXIp52iq2hjvLQpOcYznHii2bvdg+\ndOWw1ht87GTZLtbQpUt/h3TUtC7T6gebU2Vo3of6X6/cbhY51q9oIjZA01HU\nEg8MdnC1rpK/2EGeqO+oCvP0Sq3+a/bm9f38vUVL4wT2SYwgs/EbQfQ1jnf9\nN9cbJufPSux7tGElsE1OyUB2BZ1Af5SG9aTpzjZyfKYD1VvGpPCwyRrAe84c\nv1ewRkmNu+VTsN17tJHOrNggzeT9DIxibRCJMtObZ2ej9Rj2NPaTdeuleIZ9\nNJ6ggCb/9khI7Itp0am6swhHDJkDsamsUeYlQy9+PeXlDshLS4MdCZm9rFAi\nYSB9uoNeNWw+oyLaNP8l2qM99o0FCe5YssX9Gu9dHTXSfsfZUBQ76ajJ3gu3\n6n//3CCc+Qf2O66mU3SMTtMMlexxnor9V1K1rOIyhWkDwZrYUOi3lzPrkJ0C\nNVI/05W/Ff4eKTXsl0igpOFVdD+Y17qcSGWY+KjE86EStFFUV7KZq0oHRygd\ncNUMYzfQ+pT/p2XPnYOFSvop8sTayykYpR6RJs/tZJLfFQzzhwFQFKASz+lV\nh3WE\r\n=7z+4\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button/styles\";\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.**\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n**Note: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.**\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n\n**Note: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommended to\n always include it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color-or-map)` | If a color is passed, sets the default container fill color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`icon-color($color-or-map)` | If a color is passed, sets the default icon color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`ink-color($color-or-map)` | If a color is passed, sets the default ink color to the given color, and sets the icon color to the given color unless `icon-color` is also used. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color-or-map)` | If a color is passed, sets the default outline color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the web 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/density":"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/button_11.0.0-canary.5f0fc444a.0_1616179083315_0.18354841816739742","host":"s3://npm-registry-packages"}},"11.0.0-canary.4567a750d.0":{"name":"@material/button","version":"11.0.0-canary.4567a750d.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"0ef554d27c08404a90a21479a47dee82c44c5451","tarball":"https://registry.npmjs.org/@material/button/-/button-11.0.0-canary.4567a750d.0.tgz","fileCount":40,"integrity":"sha512-GVeon2V+lgjS7eJsYUQShb9maVzdFcFJV5NMOBDg2OgiA91905MBscCHy5iLEgfITJH/r4F2WaV17rganTkbRg==","signatures":[{"sig":"MEQCIGN/zTxZTTXm5S/WGhXXz6SIRQVV4U9hSBN0fxIs12FdAiBvWu51xNgypScaXd3TPl9Qb9uyd9Qn7fp2iXlWLTDJow==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":497154,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgVVkMCRA9TVsSAnZWagAAaDgP/3Z7UexQ1LrSTPmzMWVY\ndNArZiOd2rSjYLJbdCNqWDCZ7pR1RBmBpIJdsdTe+cAxGY/vEUU/HolgJ5eH\nqiucwmMLueBV7phPuvXBGTENx/qnjpswYr0Rjs1RU5LGs/Z/x7LdDH8bMFPU\nAgtu1RGJHAugWvNekFf825AriIyd9K62urgMiaPxB5LFR4YCkDzjfSb5+mur\ngRcHLkxgpH/6y0DbskSdG96Mc3LM1sTZow0U19qiMtteqwIvoAJzswVENx9r\nHOqspATRDT0IN2T84SZdPYGlKYaTlQ2+pzbAPfj4NSehOxDh6cTBWarT8t6m\n7yORXwYMlrNCZqEOSMysM44lsSMiYkdqAnEz9V2q5I5PYbCMzJdfKqeRbMPs\nxikhu5jVLdAE0qOtKDuGrQquankbhkiBnLTutJ+mCaHr1vTRAB4BtxEUh/Db\nTly2eej8U6Fzu9lAUr7RsK3YTB9ru5kgbn2vGslAMV1QGqCBzy6nkBy3gg9q\nrf0fleVTP19jvp73Nh7WExfW4W0JeMG+mNSNlpvcHRzYP/vk2hoSKA6pK0Fq\n7gu4tQt/+n4GseR16oUd3hxexv3RpdqtMSTv7CokkyZg10Dyv7R02zvKtYqX\nyPsNNIFm+2EQgbHHCDsvGPL/Eg+Gk5zCD9R3+e2qLU2i7zfj7dh5ZPvCfxvp\nx9pg\r\n=rFIy\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button/styles\";\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.**\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n**Note: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.**\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n\n**Note: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommended to\n always include it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color-or-map)` | If a color is passed, sets the default container fill color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`icon-color($color-or-map)` | If a color is passed, sets the default icon color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`ink-color($color-or-map)` | If a color is passed, sets the default ink color to the given color, and sets the icon color to the given color unless `icon-color` is also used. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color-or-map)` | If a color is passed, sets the default outline color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the web 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/density":"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/button_11.0.0-canary.4567a750d.0_1616206091565_0.44982915828564396","host":"s3://npm-registry-packages"}},"11.0.0-canary.0cde52f5a.0":{"name":"@material/button","version":"11.0.0-canary.0cde52f5a.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"100b7770035fa7a1512cb0a679ce175b06aba53f","tarball":"https://registry.npmjs.org/@material/button/-/button-11.0.0-canary.0cde52f5a.0.tgz","fileCount":40,"integrity":"sha512-ZKG3JjCLD5cJBzUeSTNuamItuFHrFSc7o1b2whzIETauMlw34N6BlAxBpyy3/hio3C0HJ6AS38jS5M1bNlQiXg==","signatures":[{"sig":"MEUCIQC/WokWxi2FfPipTGIioF29DjbmczKcd+e5GRA7GIiP3AIgHgeFtOVtH5RhMOwEGVlXxnxuOt73sX576xpYg1SlJgA=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":497154,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgWTBBCRA9TVsSAnZWagAAoZgP/0QI9bp2D8K9cpy37zF1\nBcumvDkpCvT/zGIy8Sc9Yia5MWSOQxS8nG7wzt+zdJb+OSlPG8PfYskP0PSi\np9hiiptH7HZiJ5jDneG1RQ32Am+y11JBpr3af3gKMZSsXn7MfEgdORo9IUj6\nzePH1WND8Vgvnz8AA6AbjHhhIV0PRSQdEVZYyZeWSBfbOcwGd38owpUugMPZ\nk9cRXgknIQ9SK2u/JmXDEjmi6qDNPrfmjh8IEJjKGYieT7CWjB/yjjod/LLi\n8ngfMsh6sLF3uvyaftv5+F350NRpYE+WzrbFPOksrfKmCV0HklkTb1xI40jN\nzeQDfCfw3rXzCj6/PPtMUCO+44hAdJWuCBSMaP6N6+Ot7y9IY7diFrtoXpa8\nMkW8hOKVgRYOoA7/qyuvo+Rm5fODppzIFQIQYiwsMmUbNd44Ab3HGnDiTGL4\npNsTS2R6/lkkeDxpQmEfGzqyTo9G+Phaa3c5dhO0pUvvdsc+i+hgrn9ajIxa\nIubpmT+1w7cQTFkVAfuiouh7nuKNbsPT0F/P/tH+APPvScHYGJcfR/hRnzpN\nMqx8504djWch9DGn6vav6RlbHTOagONgs4sM1k5jDXQBiwdFX68wj6y8R12u\nxPOvg1VRFLPMOnkCNYO5WJ/8lgMqLzE4qrhqiWxyoCldPU61yTGP613ejD90\nwVML\r\n=2JUs\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button/styles\";\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.**\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n**Note: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.**\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n\n**Note: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommended to\n always include it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color-or-map)` | If a color is passed, sets the default container fill color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`icon-color($color-or-map)` | If a color is passed, sets the default icon color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`ink-color($color-or-map)` | If a color is passed, sets the default ink color to the given color, and sets the icon color to the given color unless `icon-color` is also used. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color-or-map)` | If a color is passed, sets the default outline color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the web 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/density":"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/button_11.0.0-canary.0cde52f5a.0_1616457792820_0.12841823373512584","host":"s3://npm-registry-packages"}},"11.0.0-canary.48f4b67fb.0":{"name":"@material/button","version":"11.0.0-canary.48f4b67fb.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"c53b29006adea3998127b25bf5f29652e1f148ab","tarball":"https://registry.npmjs.org/@material/button/-/button-11.0.0-canary.48f4b67fb.0.tgz","fileCount":40,"integrity":"sha512-gP1b+bD66sjGdSvK6DRi5h0PCESF+uOBKIJQh7w/2leQSmbVLE5q5KoIOl9+Dql+bqky5CzHsRoPoSus3Z8IJA==","signatures":[{"sig":"MEUCIQCBpNt7+zy37WpzT+mcEaPexCchjco5Sa++jvgxKVYi8wIgGOv+RjNC2xj5a+migU+9Vtk92OIL3d5z/Td5fMq0pRc=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":497154,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgWkd7CRA9TVsSAnZWagAAWiAP/R8HHRm0LzvFOoP4wzc/\njxgtzUvRflsj1skShZjyVvdI7FNTmbJWTjXIdSziAZBHxeO7Uufmdg/3E/60\nEK12YlYr4fUDQXdObRKq06vPvMqZxxKRFyaRTEO7TitKA9mv9/x+lAxZafmX\nGXiBYxpIx7+t5wVB2AlH+qTfh9yEpsGnBd4ZARdOS65fBDNo5/5Ay32zEBIv\nQHWvLHukKc6VvRDGFFanSFBrRXHx1PGFwAkn/fUjhzjTkKP7tl0k4uUrXkpL\n1Km8krHj+5kY8LoGehX0VYt1MsIZzdCJ6VFPoSOVelDfxNITshZtMgzHTmgG\nzChnSEmbxWh1Om63ljlSIkgfD5rOFx4wpCAy0tXulo3nGZmWEJ00oqUxzYi7\n4N17eB44AUh81SybC7hBns//1+CAHlrCnQbAmyOMLRPlVLXvHgqKLwSuMWJd\nx1b8nTGqajvhtTimuRe1pRU77S0gacASEMgae+jvpzukBwfVgeyy9lnx+yHV\nZDrHeL+3axQfxfCqkw6G0KPZ6ZfuLq1EoKCamwhA21V9o4+AStZGEfnZH7BH\nrzPulJzZVvUM50WPHkx+v4BPADqTc89BP8T9MAtIcMtG9KKQveWfYkzwDz0v\nETIqpX5tq6SPWjCWO+cXFJmj6TIcJhQ0JZEtVAW+G+YxsTQAHzmZA3Nkb4VE\nGJkN\r\n=kG8s\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button/styles\";\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.**\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n**Note: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.**\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n\n**Note: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommended to\n always include it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color-or-map)` | If a color is passed, sets the default container fill color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`icon-color($color-or-map)` | If a color is passed, sets the default icon color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`ink-color($color-or-map)` | If a color is passed, sets the default ink color to the given color, and sets the icon color to the given color unless `icon-color` is also used. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color-or-map)` | If a color is passed, sets the default outline color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the web 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/density":"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/button_11.0.0-canary.48f4b67fb.0_1616529274942_0.09554849707598234","host":"s3://npm-registry-packages"}},"11.0.0-canary.0b8cff734.0":{"name":"@material/button","version":"11.0.0-canary.0b8cff734.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"5f501d7ef50f9b536d6d4bbd819f6ef2051b8b2e","tarball":"https://registry.npmjs.org/@material/button/-/button-11.0.0-canary.0b8cff734.0.tgz","fileCount":40,"integrity":"sha512-BhRGzuPcZ10MsQiq0Bu/FBuoFUCtV0APyKzaUx0DwGRtYoFOh/QADCB0egDvbwiO9F5ziqfNgyswVO1qgjGIPg==","signatures":[{"sig":"MEYCIQCuIX7eLDm/JIeCWDoCRfvkoUNCxCs36ZOlEOjIncjoJgIhALqY9VVXiGqWn6ESnDCJ1+g7JqO81PhMpWkJ9wpkALNi","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":497154,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgWknoCRA9TVsSAnZWagAADh0QAJ1ZD6+3ea3e3lKyF9ri\nCfTjtiGSTwAkKuzGgNd+PuEXIZcF7utLP37xIqjl0ztFhWGJLg3jeV0170q0\nDV9WocMOhE06vyVEWKquS6vCoUPQ3RBxXCACLXJo12SfFIt0wrn4GuccGN/R\nx7dHC7H0zzaJBmGoooh6Lq7rMhrWKLKwEGdSGDhhQUCbUou1yS1LWgQ4K1cy\ncyqZ/89kB5mjF+ACMgTIbYOcgtfAjSFxcwgacqM3frte9DGQrVqbyCZGdZuK\ndUlIBB711WHLtfbFNuG0bV9X9Mjispbdjg0CMQHI0HFrEkamJH0c/7IJurVY\ntpCNE11+clO3K+J26DGtLeaxVtr//ntoc5Q5PSKCKlHUGHiCNNMhmnF0LFGF\ncrG/yWg3c/vWWaLYvz3Y4eLWvN5SYDIL7VPX1rkf4mzHNp2JHrfogYBVTVd+\nKeoTYSzwO063KevVEogtnZE7h383M7XsrP4sRnIVmXaFIy2yyHmc7ZZKQgv2\nEYDDvFAkM1uAvNy8igJlhO50VkROOnXO16UqOtQfiDtRhI3F86ASeE6owI2M\nsak/FqsynnXAvtVK+h99/bWUR9eVBdougdLZaFU3mk0hDFSPsmWikRw67YWW\n4eHIkqEEkFnxZfdK1m1wzChS1O3nIzMcKBDPgxhFoZoIvoK2nd1BsJB0S0kX\nqPok\r\n=1Q/d\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button/styles\";\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.**\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n**Note: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.**\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n\n**Note: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommended to\n always include it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color-or-map)` | If a color is passed, sets the default container fill color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`icon-color($color-or-map)` | If a color is passed, sets the default icon color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`ink-color($color-or-map)` | If a color is passed, sets the default ink color to the given color, and sets the icon color to the given color unless `icon-color` is also used. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color-or-map)` | If a color is passed, sets the default outline color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the web 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/density":"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/button_11.0.0-canary.0b8cff734.0_1616529896250_0.5328464755799438","host":"s3://npm-registry-packages"}},"11.0.0-canary.8943b991f.0":{"name":"@material/button","version":"11.0.0-canary.8943b991f.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"82d2145acb48492aafb00f96a56622608b30ed6d","tarball":"https://registry.npmjs.org/@material/button/-/button-11.0.0-canary.8943b991f.0.tgz","fileCount":40,"integrity":"sha512-QnWEl3RBLCACr4p+c51R9su2xMKdNPVnnjEziVl0Z3Pj6IfKay3fgzhXC6b/c260coKEW8hXi5bpcvt8q0GTtw==","signatures":[{"sig":"MEQCIFmVYQIxZrY+40WliXs5w6H8qYxXQ97cQVArMyZ3c86NAiBB2yXuIhF182Yl0srkjS7Wg+a7V6kdTf9gZCHSL4wU3Q==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":497154,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgWk/FCRA9TVsSAnZWagAANesQAJAza6xrYs8xOW9V1Cae\nhLDCDg0pMsRKkux6/c+gjkgmeQZHTNXMhIjMYAanMyQAi6isUpMBtefaAmXs\n7SXqyll6/9z09FtFwnEh08MjxeU8FHX31qDhwFCvSnLiQw86nOE3lNo2TRGU\neZ635bVkoZRuK4x8GPNtBidy+du0Px1r2naKnTRYJD7r5/a5ldjGt0BeaQAX\nZXvC/z9/pgrtKZJ1zzIycV8U24aklApReWYzrbut6FcWOYpgRwIkpBXDhgis\nmvSMe30DFF2yLz4VHhIHAsnA4UFCWG+r/nOZlUmPSMzV9yZk6d/p87sUiNA+\nZzg2Ojw3c8ycGhKNYeRGIKR5w3JrqSw2/lEciVGiAy1/2qNBoUCmrRwcys4Z\n38OSaXO9FvM2722ybigP6BrcqrLepqsUhitEOZseslc8QV1dCiXysNgFBD6M\nQckQLjG3uI/LT0os7jgt+g8uHIBCQeroyUMDAjaLt+gbeKIHLEXc2GKXdM6T\n+3G28Xur2/Mt/FW00vID1IeZpBffed3YU56rctJ5ZFze+rlFRBGSooKpvVcP\nCsoE6aupgCUr9hOwM3HSeXicMZ7W1GVoVZsIgqGHA7EfSAhb6qsRBxlevSAn\n+f153nRP+Kr29uFyodz9G7Zqo9N7zxs/5yC11ZW92u+jKjg+In6nBMdqjjbb\n/ZNW\r\n=MqLn\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button/styles\";\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.**\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n**Note: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.**\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n\n**Note: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommended to\n always include it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color-or-map)` | If a color is passed, sets the default container fill color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`icon-color($color-or-map)` | If a color is passed, sets the default icon color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`ink-color($color-or-map)` | If a color is passed, sets the default ink color to the given color, and sets the icon color to the given color unless `icon-color` is also used. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color-or-map)` | If a color is passed, sets the default outline color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the web 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/density":"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/button_11.0.0-canary.8943b991f.0_1616531396967_0.38510587726319145","host":"s3://npm-registry-packages"}},"11.0.0-canary.3955d8d3d.0":{"name":"@material/button","version":"11.0.0-canary.3955d8d3d.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"363285ff10df0a9becc7234ffbee41899a087d9e","tarball":"https://registry.npmjs.org/@material/button/-/button-11.0.0-canary.3955d8d3d.0.tgz","fileCount":40,"integrity":"sha512-e23Y9cPzLRPCvRpUr83qYL1Uto+zSsa6w18SWz84ejQa+TBEx3lW02WGLjBKmKWhID2atvxCCN+OchG+G5UlZQ==","signatures":[{"sig":"MEUCIQD5CSoBdjQH6FAbYABXXsuuLNf87xsFqhELZHIN8XItBQIgDZI9EWoIphLk04leXGaemjJc4FS88H/9t2iZif1K3SE=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":497154,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgW5AZCRA9TVsSAnZWagAApvgP/3LxF2Q+0hAVK7LovnFX\nKBrwiyzWMW/ttFhxo/xvMAGyJYfHGd27CU2o3/fVNMz5it/xtyzL8Uq2qv96\nT62NU/+3mEtXC1fqTFjCB8C2p42dEAPrTU/9RefsFQr+xWpyPwZF31H0Y7Xp\nm3mo0E594/OZ2DBiI2TWzbhFbURyotAb03/KyjXLKUv+c9OrS2e2iCoTW8Ae\nzj7LQTEmvFzLzQyc4CGAZabAGcBQTIqnOBrgv0HTvRSFg0MRlw0U9XXJZZg0\nsgu8GpZ5g+2TGB8B+jvYYWGZMtpKv5agYCeQAz9aRNiho7/ZbGgoY3Xm5BR/\nlVvXT+5CUI/Xe/mi+g/G+OCj98EQq3kNECmPCFyDIX0fBHEJMKh5H/RhI4vq\naQlMj7653h4suyfTPFN5cjLz0qt6V1VZTB+QOq1lDhlgnAVvTVNODVzc43yo\nDNXmOHUPVJ3vawY7xec7SYjy21/p6x5bVd0tRQNlTBqFmjSsizdhy5NK8kyj\n9rqcfXcDUIw3epxHD2/wtZ0XDIxTtJ/wKC2rNPHCAeVJwYfveMvXPvI8QlBu\nLUeAC7zCX5hOolh/zxujY5N/kBGV7+l3xIU3feg2Ob5EfD8nyLxfutzKKrda\ncSEJ+npzzK7Q2m215GHB8zJHCQI/pn+QUzsk2bEv6tVuEtCOmzvT9Y9mdOuL\ne4Gu\r\n=N04l\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button/styles\";\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.**\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n**Note: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.**\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n\n**Note: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommended to\n always include it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color-or-map)` | If a color is passed, sets the default container fill color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`icon-color($color-or-map)` | If a color is passed, sets the default icon color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`ink-color($color-or-map)` | If a color is passed, sets the default ink color to the given color, and sets the icon color to the given color unless `icon-color` is also used. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color-or-map)` | If a color is passed, sets the default outline color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the web 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/density":"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/button_11.0.0-canary.3955d8d3d.0_1616613401004_0.7613744513993916","host":"s3://npm-registry-packages"}},"11.0.0-canary.23ea2d85e.0":{"name":"@material/button","version":"11.0.0-canary.23ea2d85e.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"2909eb517311612e8aa6e929e93f40ebfb234b09","tarball":"https://registry.npmjs.org/@material/button/-/button-11.0.0-canary.23ea2d85e.0.tgz","fileCount":40,"integrity":"sha512-kcxSaQqg15MT3zINicBpyNRhrCy0LCT7s8/NtiRcQ0q5/dGphU5C/dcP1XVArW2VBpwfswEUcN5vabPYtX4zyA==","signatures":[{"sig":"MEUCIAQl6UreWE5j94R+5DuPwCdrb4kqn0lOl3HKx6Z9I8jGAiEA2PT0tEfxn9e1fOMxKWuPR4PJ7EystdBxpjS42FcZwE8=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":497154,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgXMlPCRA9TVsSAnZWagAA4gsP/j7fUqggr0dOAmp8Hn0p\nVfr05uR6uuQIO9uXfSwoqTF7EZo1FwIMts53DhAk7r19k+koZeJIf2f+RRXD\nVZQFN6GG4ClKRALEL+3X8D2BCyYZGzYXbskL5JBc1A0VBET1S+TT/udcUICm\n7cWnQw4Yba1uZMPgwwy9nZeOl8U3OA3RJPYCy1Bria0VsWTPjmvR91UCFhe9\nlaQ5+ujIxbGyRxai/WT8faRWje80Z9m12wwLrp6102fRrZNxSXUY7Q3MXnz4\ntaYE2CmSP++MyJ9Y04g5QZg2PMk39PlS4qVCM/YvvG1A1XrtrKzgBRa0dnX8\nuDgw+2Lmni+VK5/2lPhGSlmLpsdYqI3PiyHfycRt/TbGzt9WvcXhm+rDTdEr\nqC1QTskryEtNyvDPZErsssbfERGeac80mBt19unH69/we3MJA26bx/WWGPK5\nqYvH/kMMKSue92BUeI0EmangxcaQnMNW7OCR4wGGuMXofkyP32Dwo6m2aMHT\nkc/XWJARxKtf/4+8qruDUF0kmfkhVfW18ELXZci7KBTETwUm3caildpSH5HQ\ngfp9Ri0YgKIjUiIxjjlqbeqMm6kvhj96hSEQCP2WGUb1FlqULrStFQhhGTqK\nzgmBeQzwSPeBEQmeR/r6IkgNc8vpwt9tC3i+a3oGe7txP4jlmX5Y1N6iDYHW\noRhG\r\n=3kUN\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button/styles\";\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.**\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n**Note: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.**\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n\n**Note: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommended to\n always include it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color-or-map)` | If a color is passed, sets the default container fill color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`icon-color($color-or-map)` | If a color is passed, sets the default icon color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`ink-color($color-or-map)` | If a color is passed, sets the default ink color to the given color, and sets the icon color to the given color unless `icon-color` is also used. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color-or-map)` | If a color is passed, sets the default outline color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the web 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/density":"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/button_11.0.0-canary.23ea2d85e.0_1616693583165_0.6521052188178063","host":"s3://npm-registry-packages"}},"11.0.0-canary.e3ec22f45.0":{"name":"@material/button","version":"11.0.0-canary.e3ec22f45.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"056424db66a5e8ccb3d626fe169b1ada02e74330","tarball":"https://registry.npmjs.org/@material/button/-/button-11.0.0-canary.e3ec22f45.0.tgz","fileCount":40,"integrity":"sha512-DiwwiCzKooahwp+tk3xNFEkrForWmrQM+YbjL4GI35Oea0B6kQYoYd/kCwPRJtRx13jNGGKzVkLVld+Teo2BBw==","signatures":[{"sig":"MEYCIQCpQiqBDtFI94z1m7YfxjdAJvJs67qPfJQrIrUs4Ee6OgIhAMe2jqhoSwfgM3gMWgpqGfQ5vozV/vD/OAFhSqKpTZzC","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":497154,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgXM8ICRA9TVsSAnZWagAATV4P/1SmWLJciPaudYWHToaX\n4SO/caMBaNDFDAMibervjsDfqgWFNVOQzz52vT234IwgCsuyGv47kQlySHd9\nQRmP4/WIj6MpPIell/qJRac6i/HhZGE5WUN9A5Fn3MjOdqmhplOJ/1HSll9Z\n+d/v1WR1GPgtZf8aqIpAAxNHajYYUqAxNfxG8LcUIYItMfwfmn/fTVrwKoQr\nDi95NEVLBiHIyYkNKXnNplOrXLyho/gRQWwQ83bURn53po94azQtJwvD+lCF\n3eltQpgdJ4YxiMANhITR31LnfgrMWICTcNIOfQvf19YkQnyap3FPhsuqZeJB\nkokZkYfyC4nPQzlagpHH9ghBYPxejD3AwN2ikrjm8I+nindDOA/jJSf36uSV\nXWs+BjD8Q94xy121N14aucVSqmuoB9NSlI/ZAXSDR8RnMLQQu/KeICvoDaj+\n4gEalR7z2klpHknqW1fjDKy8FZBOLMY++bXqxtVvUozO+n5ASo+6cDhugTVc\nAXnLnSYx0oHlyNwUklWaK7GbY/2isuyVwGwllk9vTjloc0LbHzzHSUVRhL6l\nX1bgD9UwSJqyfTcHG607WNCXju6cUEqrUr4aiFRDtTALO+7xr/V6KasUlQnB\nPFo1X+Wroi+4zX4jeYAkXdgPEgPHVLsOVT+eeyuWZboWjjb42V79Sivvbzrm\nMl3c\r\n=FgtQ\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button/styles\";\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.**\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n**Note: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.**\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n\n**Note: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommended to\n always include it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color-or-map)` | If a color is passed, sets the default container fill color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`icon-color($color-or-map)` | If a color is passed, sets the default icon color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`ink-color($color-or-map)` | If a color is passed, sets the default ink color to the given color, and sets the icon color to the given color unless `icon-color` is also used. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color-or-map)` | If a color is passed, sets the default outline color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the web 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/density":"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/button_11.0.0-canary.e3ec22f45.0_1616695047899_0.5427720360551975","host":"s3://npm-registry-packages"}},"11.0.0-canary.4ceb42220.0":{"name":"@material/button","version":"11.0.0-canary.4ceb42220.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"948510d782d77abe5df8d597b25471d703c07777","tarball":"https://registry.npmjs.org/@material/button/-/button-11.0.0-canary.4ceb42220.0.tgz","fileCount":40,"integrity":"sha512-QKtPBPn+93ZDVTxFProotBm9/rnEuyCi2H0j7B1I73ohc3TlGezWyBIT7VQYH7oZ9/wBxMINLmeyEl4yXAq99Q==","signatures":[{"sig":"MEUCIC8vGcUZSLXzZ5TFOXHsYvEyhp1DuD/OjovUwmzEDYUtAiEA32G5+OPLOhRG2o2NrC3PQdbagafdEamOMheLF88dImw=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":497154,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgXZP8CRA9TVsSAnZWagAA6UYP/j9lnXGlO8RyuiYpeypd\nJj9iFP0FktVeEMwf6wun5RbDRFvLQCY6kQqUBk53l8xpAQPBgVX04nqhNFR3\nU+AuMyeo/e6WTQd/o7FWWwgExX1748MnhnWUyWLBJbzB7EWnDHn/nrWxnGrn\nljSQYobnhBGHq06KCmodL/kWfoZIzJhr9kE2eJPTgm+GgIM0Jvgz/fQxa9lz\nOFsKcvHgXT/TgUrbRci9bswozoURjaWDSuBSGhzVmA25g0moHW3RizgtS44b\nvKFVlc+eFRUITz5mU90aO770k0FfwLivDiLi0jTE4QRjhm3VOTUKD7EQBP3o\nDCvVKV+vPExl0GioxXsJWXMI8mAmiDeBUNDTXo28rkls5ZHHbSukff6Axl4Z\n4vR+xxwhvTcX8MriAZxDHYuD7nZpkl3NRYrt5GxAA6rNe/ndYB0JUo1JezjE\nlciDOtxSahmPQX8EuvHycD6QO82ptNPQ71PQnMfyVxXbap+M5eiF5nHKdIq1\nRvi3uP7G2sk42rOgWt4ZNU+Oiqm/rOf/Aa848G1nspfYWfM8kj2Pyq4A/D8w\nBdAezYVXAqhKZ04uXCTAm2kXQxIwCxe8a8abmCWKaxCE/U0q9EumnqXtLt67\nRcNLEImdfrfY2bg9cmsM9WKd+tCBGFCuAnEwi89ShVKuOuPljgQW9N/3CdbA\n0N00\r\n=0KN6\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button/styles\";\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.**\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n**Note: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.**\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n\n**Note: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommended to\n always include it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color-or-map)` | If a color is passed, sets the default container fill color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`icon-color($color-or-map)` | If a color is passed, sets the default icon color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`ink-color($color-or-map)` | If a color is passed, sets the default ink color to the given color, and sets the icon color to the given color unless `icon-color` is also used. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color-or-map)` | If a color is passed, sets the default outline color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the web 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/density":"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/button_11.0.0-canary.4ceb42220.0_1616745468133_0.9324467317024598","host":"s3://npm-registry-packages"}},"11.0.0-canary.dc9c84023.0":{"name":"@material/button","version":"11.0.0-canary.dc9c84023.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"1c2674eca990586cc528e0ce4474fcc181d3c73d","tarball":"https://registry.npmjs.org/@material/button/-/button-11.0.0-canary.dc9c84023.0.tgz","fileCount":40,"integrity":"sha512-HHOeK9yrLsssvGAQZvSVm4kfhFvS2vsKhncKINcNTEvViufTsD4MQ/pAeg3aGHvr2RdkKhELPbr4TOgoSAvMPA==","signatures":[{"sig":"MEUCID7dn3/JIB2sZhRkMs41zdyA769h5k59hIoloAYg7uQnAiEA/FtDcP0S9gE2tNeV9g9qA/08Ww8+2iVqaaxtI0N0zPE=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":497154,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgY2SICRA9TVsSAnZWagAAno8P/ibn7+39umMFGiDuGAcQ\nbRLeUaHXujh9zuYtHe6kw2UJKaTdD24HaLGvAAnhUPu7EuvzdXlZHqG59ug4\n7saqBAoURubGxn+Kx0NTwFblBjwGoKTXrPbq+mzqGtIQmiSiKO6+hyW4MgZU\nKT4qGpXGwW4dM7zOdU+IVb/6I3AdImHr6Yt7FVldxnoF+LpaiejjRqtS82HD\nLk71ShodXy3FY2fRK/Y9a/OVd/pnekMAGjQQZYjOWyAqw9NUiiTHxBFZQI5m\nvUMBpG4z/UhisL/PrmX9EQdSuu7Z+yrXXWVWuKZ1/Kw0YTqVynqmefvGsqCk\nPAPNnBEL5zr/j1b/Y38k03rEVt/ZIgsLqjCxwXWwHFvO+c3Y53b7cMx3Dx1V\nMDqhrIRVmT73HJrr9dzmKV8ndjS9Fvl0UazrNEpDBFOOs+mfwvQxPoOyqbax\nYlCmhOTkC75+6QEWCPh1ISHyBIRqWewJ6p68Xe8bNAVWRsDyPTwzoFbPuTQA\neSXvoPZvq0biEnKp7+ljhlFmsI28VYZ0QK76c4lFlT2N1H3zeD8katfqjP7V\n0FZpZVnGNUmrE4GR1vjbSJfIKIFnQjZXU4YQ5+gyCq3J/isHSGW1SXpdB1Ub\nElwF3JzfrKqXfncyUe/cOdlu9a+rRIvd9EV8lBjGDlg1fdUh6JRFzeE44dxz\nMhBl\r\n=nW9B\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button/styles\";\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.**\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n**Note: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.**\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n\n**Note: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommended to\n always include it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color-or-map)` | If a color is passed, sets the default container fill color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`icon-color($color-or-map)` | If a color is passed, sets the default icon color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`ink-color($color-or-map)` | If a color is passed, sets the default ink color to the given color, and sets the icon color to the given color unless `icon-color` is also used. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color-or-map)` | If a color is passed, sets the default outline color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the web 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/density":"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/button_11.0.0-canary.dc9c84023.0_1617126536003_0.7529962115008626","host":"s3://npm-registry-packages"}},"11.0.0-canary.56fc26962.0":{"name":"@material/button","version":"11.0.0-canary.56fc26962.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"8722762b1238b916756ae8820761d390abdf6f41","tarball":"https://registry.npmjs.org/@material/button/-/button-11.0.0-canary.56fc26962.0.tgz","fileCount":40,"integrity":"sha512-sPPjd7BVrIFxusUqaqQfBULW3SU15fqX4Qi4pG1dN21Fs/9AK6clSeTVqH4z2mqXcdPXbBeGImBcFN0dJFssfQ==","signatures":[{"sig":"MEQCIA7hID9zEv4zCGKmC3zz4pDdeVrIn/ywKQb6C+IA7ARPAiAPItdMisOX+Q0Go07orMY6FZ6pIhbezmMGxs3crR3KFg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":497154,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgY8B1CRA9TVsSAnZWagAAb6gQAJ8+qLXPzsPWg1aUNF87\nDmazHNmyWqdEeko2WbUwtySnPEIYNl5Bu7EbYJGl3hZER/z1RXQ3ngP/Re/U\nItmJuFexlN7GBI+4RmVVtzXVlV/ztAN/FVdLuL/Su4hN6BUNkFFMYTA+KT08\n6gjXrl1cnfEr3mq0Y4WJVneOAJyvEsj3CHjxraXiR9xjINRtZ2FPKF3BqGQ9\nVXsKpy4gFe9xcCsr4Y6Pg8C4ZW9kL6Ti7ZtSr3BD8GefCtZwGkziUBsi6yz5\nl2O0rr6qDc/oS6q5yQumPTFimKLsTHzzJEPWz1hLL2Etm7GoarEARgTvn2jh\nx0qePG+08ikGmnilshdlAc5pvEP/00fre3/CLuiR0EraNMarcYIQZycWzOPJ\n8cCZqqsq8GTHlDpx3PKjl/4EmGdq6W68nO0XuRTBAPzq6NIjklXjDbO8UCD0\nE8/Ln8vpy//g4XW0sWBHCmx9qOTm1HV9BMlofsxFWdWJ5R77nb8/ffCaQlhO\nWB71Fzw8wfG1vt0ZIC3v+8H4EZHeVY8oK9ftwk6xkS7k6G1gP0YL+ZaBdPNk\nr3weppWNq0gAMmkDI3Eit0fOuuMDYaSdT50FeWmkS0ZgSzgdwaGnVixHmGgz\n+KezwGxkQpCe+hQKOt4/vQkTxtNJREpvMygFGYlaut4xFV8xo7xQxm7Vz2eL\nB21a\r\n=i4KW\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button/styles\";\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.**\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n**Note: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.**\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n\n**Note: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommended to\n always include it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color-or-map)` | If a color is passed, sets the default container fill color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`icon-color($color-or-map)` | If a color is passed, sets the default icon color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`ink-color($color-or-map)` | If a color is passed, sets the default ink color to the given color, and sets the icon color to the given color unless `icon-color` is also used. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color-or-map)` | If a color is passed, sets the default outline color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the web 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/density":"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/button_11.0.0-canary.56fc26962.0_1617150069056_0.2689717647774499","host":"s3://npm-registry-packages"}},"11.0.0-canary.bc318250e.0":{"name":"@material/button","version":"11.0.0-canary.bc318250e.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"5ffe0e869060026600e47d0fc14a6d98ec687af3","tarball":"https://registry.npmjs.org/@material/button/-/button-11.0.0-canary.bc318250e.0.tgz","fileCount":40,"integrity":"sha512-AafuzJZBc6YzNi0ZCX1sAUF5f7j9BgqecwH5qFFZ4sgtr8rAJYr5cWKcLHCRUGHzLKGiiedFD+cx5PLyDR+PiA==","signatures":[{"sig":"MEQCIAUUTx4mVtmmrsfv39bajyaiqyDWlxPiJ1P6AgpP3+IjAiBml3++4x1KBeedmI8C88l4s0L7CqFT6TC41aIefMMe9A==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":497154,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgY9GKCRA9TVsSAnZWagAAYBcP/3RgR0ck9PD5ggkm0ZN6\nZ5lgxGmWHE6TSq/3OfY6fObzeY9nFYKcz2KdnZT201P3kMMvuh3vpifv6OGw\nArnZmlKKQud+vXbfIAtqizIIxxQRH+AeY5glFUgYw4KAwWpMX0pHHDiv61oI\nuqQFt42LEGyQF2BOuQexC8ZEJmWWSQGaPzIyfsW2rR4qxE0cGYG+6LMp43qU\nlpeNChEyb5ss6u08H1cpmfIpxCtn/fl6A8hIngllr/d/O1lsepRM6WIsFrPu\nVXdxIvhplvmqONPUHsuINVq0r0C/sNDKmdpjryQ3IYjBO3E821ILN4bFCTZR\nFjtf8FLW2n2Dyw7+aJYXtP9Jhd894nwXbw79xtxTkiqDETBtkeTQoYHpzFqR\nZFjA7C2Kbk9OBaJEeMe3gJPYG24wc/6BPLNdwk3wlooCeKR7Ky3f240mTJCs\nCaeRldhpIra5YFXs1yAqDkss299uUdxoqK7us7qzDRK24D9ENftr/Qffae+Q\n2v96lB910fXzLdiBRt6ujBbcS9E3EKWJ6jpDWHzmeC72oVthdcvSoBd1m/vv\nQtOXym7aX830BtfQXdoXjIP0G9b0DJ75Yp+taEmS5UqVh/FtMNrsDiYx2ZdS\n4JKn88VdobHrHBSH/q4GOIntSV9feOrR6DbwMroEFjSUs12YLhEo1dZu8oCA\nuAEC\r\n=haVQ\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button/styles\";\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.**\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n**Note: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.**\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n\n**Note: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommended to\n always include it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color-or-map)` | If a color is passed, sets the default container fill color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`icon-color($color-or-map)` | If a color is passed, sets the default icon color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`ink-color($color-or-map)` | If a color is passed, sets the default ink color to the given color, and sets the icon color to the given color unless `icon-color` is also used. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color-or-map)` | If a color is passed, sets the default outline color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the web 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/density":"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/button_11.0.0-canary.bc318250e.0_1617154441734_0.8568006599692357","host":"s3://npm-registry-packages"}},"11.0.0-canary.edaee19aa.0":{"name":"@material/button","version":"11.0.0-canary.edaee19aa.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"c1a4744dea306c33a8dd89e55ccee73a8b6c4996","tarball":"https://registry.npmjs.org/@material/button/-/button-11.0.0-canary.edaee19aa.0.tgz","fileCount":40,"integrity":"sha512-/YKtEudMrWZSsnK3C6k6R+BK1RL/SHKRd3YQEikKo33vVEckncxpVIEWdhELzk9wq/1dGHHhsB+QLKxWHXnS9w==","signatures":[{"sig":"MEUCIQCIklRK+hnCT2yBzti8aqNBAYIfup9KWeZVYkOoe06zbAIgJ9I5nK+9n4wdDp2udO036uz/oLaoPph6wXZ9yeRR8wk=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":497154,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgY9pvCRA9TVsSAnZWagAAFe4P/Aqv4nGZJTvN7q0tTebv\n6ZloNwIAjBc/hDdW6Uic/OUeo7C7Meo1OHgaHwmd7Ap2BiJPaziTyzxeg9z8\n5gbnZ3kBC/hqOZkmXzYf8u5VHb9a+uElbDrESemtAM6+UTNIGnIqFtf8YUrP\nwM0UKrxx53473i0e5fscOITXh3NivQ3i6eiUk/tnlMQah5sEkINLt2xxZruS\nNCdfNKCEOppwN56GrG3mqISbYUw497KKpMmGf+frYwTqQmroYUTZijli83H+\naG34rF6qwaANcR+AWpek311fhAT7FOmEtztQDIbnQjUTtvzWKnvUlq4u32fK\nVnMN40IXGeChdyaMo4NOzOI3JqWPMjzFTRCSXM2nZUURn28UoC1SoEdr+J6P\n7NZlpi8v9DniBS7gaK0NbPLQ7dk0mBiwiQv+X79wNZBWb9ZbsSTpZrUmzoLp\nziqdgiAlWZxEb0MLvlIkA2xDux3vw5eV0vr9CcJ/4HZxlAADEjmecNQmJyHS\nHkD80stytkqo/h5WjxPWDP4bWb+rnlxGOMv/A7yhMt0Y7EvS3CVoMZv32ZJE\nIG/Dzs2JeBH1UzAfiCAqKkDcEwNsoVnbv//zFXgvAc4mXOFJuYEyrX3IbM9e\nduhQ0Q6gymY44AIQPHhRgzChthCqqubI06UBXBfO9wg4zIXVjzg+P8CI2FC+\njwOz\r\n=hIhp\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button/styles\";\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.**\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n**Note: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.**\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n\n**Note: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommended to\n always include it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color-or-map)` | If a color is passed, sets the default container fill color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`icon-color($color-or-map)` | If a color is passed, sets the default icon color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`ink-color($color-or-map)` | If a color is passed, sets the default ink color to the given color, and sets the icon color to the given color unless `icon-color` is also used. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color-or-map)` | If a color is passed, sets the default outline color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the web 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/density":"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/button_11.0.0-canary.edaee19aa.0_1617156719141_0.09024760940197019","host":"s3://npm-registry-packages"}},"11.0.0-canary.24609b822.0":{"name":"@material/button","version":"11.0.0-canary.24609b822.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"fc880957dd5b1f4e7e15557fe9bc60845d1558bf","tarball":"https://registry.npmjs.org/@material/button/-/button-11.0.0-canary.24609b822.0.tgz","fileCount":40,"integrity":"sha512-LC2jMhUnE8r1IDS5uGkMihGval6fCrKa83jts5DwFMQDrRooAI2XJMWhywOckBF9gmgJw+hRaWuwhg+zLfcX6A==","signatures":[{"sig":"MEUCIQDIis5aOPy6IjHJ3qIvdhYlURtHcGf6ov6hPTzJCm9YnAIgJVgci1N/F7tgbPzjwrymTC/joyqIIPH2iEin1EUGn8Y=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":497154,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgZOI0CRA9TVsSAnZWagAAM1kP/16xOTHKg7caxLLKbzWV\np5Is8+f+AT3RjBM8kN2djsN4Aq3Ns/JhDcnNwlJCcLL1LnK3g84funb3rPJh\niPS0FS5M6j1f6nDv8YulwFtlkI1XaDiqWAgZFENFbcPUi7g+GYxgKMhZyFg6\nWqe/wEwgLqZhyJ3O/WQLjNqBLkKiLBVdM80cv/KYgGHw6FdtY9PKjVkJiNXg\nPy8DUFe7sExOJVJKkrJkd2Xdkdo39cBeidlFvczpnXgIjxVaLklqAD3V1Ag8\nwLOiRoJx/dtXU0YnTWF1uvYnirdva+fA0wEX3lD51ventDST1p4LE/D4yLwA\nfI9PcGC3+/uncz5bX+fuDdvmxA7fCGVPvvib08zX5kBkIXi/X6cI2K7SlKTW\nJOYCJyuY2NnKnJSyl8/TbLptaAPjfvVyUeAXZFYRIi9R7j4b8WcEk3TB9dkB\n048vJXIMq+1oar5Uzmqjag5bUXnvdEfQThgMHyz1M6zAStMn08s6lewrG5NV\najyi4RayT1NDMmVmevtKAzP08DBcX3G8OkMWcql9clfcyCaQCyKVPrHBNqMa\nB4ON9PADtQoeUODhJW2cSplc2u9a05S6CZhqNzPCi4z9FeHEjSUEqYHxpTHt\n64UHvZtXB+wHvcUfu4CUthQb2iWoyu25zajJ8unD9z54t8OqqQkufXLaEdeT\nMS2h\r\n=3R5z\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button/styles\";\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.**\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n**Note: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.**\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n\n**Note: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommended to\n always include it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color-or-map)` | If a color is passed, sets the default container fill color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`icon-color($color-or-map)` | If a color is passed, sets the default icon color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`ink-color($color-or-map)` | If a color is passed, sets the default ink color to the given color, and sets the icon color to the given color unless `icon-color` is also used. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color-or-map)` | If a color is passed, sets the default outline color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the web 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/density":"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/button_11.0.0-canary.24609b822.0_1617224243480_0.11068775203710035","host":"s3://npm-registry-packages"}},"11.0.0-canary.b6cddc2b7.0":{"name":"@material/button","version":"11.0.0-canary.b6cddc2b7.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"c33d4d7ce04d8077d4c3e769e0f743c6a4a2f7a9","tarball":"https://registry.npmjs.org/@material/button/-/button-11.0.0-canary.b6cddc2b7.0.tgz","fileCount":40,"integrity":"sha512-nN7pZaznaLOcunp7ooiUwUam9+r3UpcNHzd3quzV6S7bRY5ciPW7VYgrB+4HB2+1Ns7vM+KGdF8iLj44wt9xCA==","signatures":[{"sig":"MEQCIEUHRdfTOIEoFWGD3+R5WwDD8ttb7am1h7t1vSA26aZWAiAaYWJUqYb8grC1hRjKoJp+oa9nlvVYaxjIPnf2B2Gq6Q==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":497154,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgZeFFCRA9TVsSAnZWagAAirEP/3WysZoOETVedvKlOkye\n0y7VaSS1y0fT3uzw0AqO8OVK1jmH5tCLfHdEscaKKvftyWJoJRNpCEOsXKpN\n04nKT8Lmjk/kDGjxcA3nyDqYE9p4COEvBIVyY3cb1LyNvCLH9Pb39jzy+IkH\ndGzBRyamw2w93RsRKduB70T+Xoyr9jHonpPAf0dCN7SYq12Qdi0zosbiL6di\nB2u2j7A5SCn3i2EG5bRUjyeeqo4MF7vTOQHfe2qNpr9yPM+XOWZgXDCWPD+A\nkq+bz5jjy0onJGfiG9a++mQmNEVtv6g5AQULkioU7yByLGVnNPUnrz0RtxvK\nm/P77Alq16Y4S7QELPkWCPyi6BuikVLUCwXoMWhwPWByY6dRdGLDYBR9U84L\npLq7WXIC3MufaY/oQ5hBnJWjHKPlZOjgb9qFKnzKKv44+ghdiAJgfiRQkeyS\nz1KJ8EAup1QWOBrOXcmOZUVZskfOYX21a7V/RE8ub6CaaIsaep10EMW7a05L\nSzcJIykUg6wb+zPLzZepu6OrIU7DVdqZ4zS28xOpemlpZ3GteV+7rFBzMqVK\no3R9lNwvQyIsXgzxxLz3t7FGf6qWfETj+LIhaBtxbNaVFrafjwiOf1+n+n7F\n5BxCjUjIU8sjcy0eWb2LQoAKQfgTabfgYYDzmJO1axB1U5LYwX0O0tAE5VtT\npanO\r\n=aVMS\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button/styles\";\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.**\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n**Note: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.**\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n\n**Note: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommended to\n always include it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color-or-map)` | If a color is passed, sets the default container fill color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`icon-color($color-or-map)` | If a color is passed, sets the default icon color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`ink-color($color-or-map)` | If a color is passed, sets the default ink color to the given color, and sets the icon color to the given color unless `icon-color` is also used. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color-or-map)` | If a color is passed, sets the default outline color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the web 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/density":"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/button_11.0.0-canary.b6cddc2b7.0_1617289540638_0.8549042939420606","host":"s3://npm-registry-packages"}},"11.0.0-canary.94937c78c.0":{"name":"@material/button","version":"11.0.0-canary.94937c78c.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"84045f34e3770daf00e601d9745256607c36e523","tarball":"https://registry.npmjs.org/@material/button/-/button-11.0.0-canary.94937c78c.0.tgz","fileCount":40,"integrity":"sha512-hRgh46j4nA/R7NuQ1c6Av+XIYvGIZYychNnJVgYcK3fCn6YxLHgty1VPXXptqo3BDF1SsAvWozjJP+C1CjW/Qw==","signatures":[{"sig":"MEUCIBc3YwpQVoQ19z47zxrJRtU5aW80JMsYPiOW+gPCga+uAiEAvwWtQtb8yXGCVq0BWfRpgv8q48CVPaDx7l4jaUvYQt8=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":497154,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgZjSXCRA9TVsSAnZWagAAKU0P/iU7fIs7t6ol63bvPgW9\nwgKtXtXW9s5Epb4OnJQBNt7aslOWu0cCmqxWlw7W8Sy2jUf6aUfB9kgjZncV\nttThxcQieVsM5w7FMhiJC0hiTNwTGLPrb6HWamdCyjTqQAfmlX5D+LVEtKFx\nbyLq4zcijBdyhoWMVquRTOJQDCfhl8a/Zp7xIIwoSqTlkkZmedx9Xo9ftvC7\nz3ZIeBZWWQboYBPTAJ8eSxd0R89NvnmPB32BIrCh1+GrT61GMYbrAhUMHyNL\nO/Cpo5XCMzhvhUkjBKxL1iIxAINZmFhSre3Vd1PbD0Q/m+A7lgD9LrmcA3mK\nsuvujC78QbGCUmbbPuvKAGuc1sR1BgIosn9hXA9CV2kx9NGeA+/B0ToTdkXK\nmYYStS5Adhfza09Ct7TH+tpjSV1P0/AhOkcOanPSEHG5BU08kHiV3fXGJJSx\nbKo8xzEl4gGBK6F86hADdcTsNMnbd9fNxqcWPa5ru1bHQvwVpiWPhRWBVZpF\nyRMeRlT4qx+c+ozY0Edl7nnw0HEEg0zeLIr9ylkCk5gjCAmbE2qWqLkqLWb0\nZw20re1T6pOcKvKxAYxXbTWVJbkj3OROL9wvmQn8cksCoqUn6x8aG1QYEnkc\nqVvzzVnbsVKeidfuB+grz7jZnHg9Pivhs2s+N/DmaQIOxWM4t34YSNdN/8dv\nBnXM\r\n=CebE\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button/styles\";\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.**\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n**Note: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.**\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n\n**Note: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommended to\n always include it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color-or-map)` | If a color is passed, sets the default container fill color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`icon-color($color-or-map)` | If a color is passed, sets the default icon color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`ink-color($color-or-map)` | If a color is passed, sets the default ink color to the given color, and sets the icon color to the given color unless `icon-color` is also used. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color-or-map)` | If a color is passed, sets the default outline color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the web 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/density":"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/button_11.0.0-canary.94937c78c.0_1617310870774_0.44117987307262396","host":"s3://npm-registry-packages"}},"11.0.0-canary.e7202cb57.0":{"name":"@material/button","version":"11.0.0-canary.e7202cb57.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"19349f98513d78e417dcb18fb6bab466fc5fb62d","tarball":"https://registry.npmjs.org/@material/button/-/button-11.0.0-canary.e7202cb57.0.tgz","fileCount":40,"integrity":"sha512-ptjy0a43drib2NAuDJA0ouaIE3HWvo1DcEIwKE82UuUJoog3rp8QNA1DM8BO0THQ+E1YggReiH0bTlhrA/0KOA==","signatures":[{"sig":"MEUCIQCPwGQTRW/lY0kf53amRyX2W6dst/fPJH8wn8p3eHQlmgIgOz030gBCZ435lwmvQQiUXQmCE7sIuIrXlPTTfk0b02s=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":497154,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgZk2LCRA9TVsSAnZWagAAeOoP/j0pAlgwMe7NlmCDYYoS\nR3MU1PtbyNwkNLPBzMjnhN+MFvAQ1U9/u8X1G75KeWMgQOD3udTanYAKkL8b\n7wCi+ABjaAXwy4swOB0vSF75LZ6fQdzWKGHXVcRu3gmTNGzUAfv8I12OdDrn\n+wieAT+y8Yt9L3WIUU0ShC9G/jQIBzLby84Lei824p+WAaJOKfaqxFUbs8Ya\njhAqr2kVLCojY0IKR/bUI1s1YcKCTP0u1lULYyY/k+W4lY80yydfU2RZrr4m\nZ8HwwQ1eVzIFC9YBBqLC9YIBuyvNQRRw7A4vG1W62jWu8zAw/L6wVWK4cJYJ\n/q4ypDXgg0furspSFkcY0f4BgHUtEMzX6pKiCv6oNUvaNPt2nK1XAOC84Mpo\nPB7pBiEKiT/sA6ZC0Sw+xvoPezxgCHgiwHfpzZX44wA3hIvTWMWUgpy3nT5q\ne7ZhtI5Mz8WDprX819uiau0d+80dEFyJGXQQY3S5QE4HXTqS4peLM5j/3NIp\nNjL1a1PqRh+pLVUHBd2tM6lkncbdeH6dLdkUM2O4qEhNjO0j1ewW9CDeYe+8\n12F6/90gD38prq9guZG5CBDttge6DPakite8JaeZn3cs3AtlWDbvDkcjFoof\nLGAR7L9/K/5Gnyz0mloz40k0E4e0MawDira3KajAzgqJKRljl5jfABF+iGkS\nPK+6\r\n=4DO8\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button/styles\";\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.**\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n**Note: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.**\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n\n**Note: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommended to\n always include it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color-or-map)` | If a color is passed, sets the default container fill color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`icon-color($color-or-map)` | If a color is passed, sets the default icon color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`ink-color($color-or-map)` | If a color is passed, sets the default ink color to the given color, and sets the icon color to the given color unless `icon-color` is also used. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color-or-map)` | If a color is passed, sets the default outline color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the web 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/density":"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/button_11.0.0-canary.e7202cb57.0_1617317259091_0.7198636961300506","host":"s3://npm-registry-packages"}},"11.0.0-canary.1f636b205.0":{"name":"@material/button","version":"11.0.0-canary.1f636b205.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"debe32cd3eec83f8adac8577468815e1166bba56","tarball":"https://registry.npmjs.org/@material/button/-/button-11.0.0-canary.1f636b205.0.tgz","fileCount":40,"integrity":"sha512-IHN83kLCFOH0FVejQNKpqdkH8RGuTpGXOFgfzEM4YQTdbR5RN/xXxb+NSX7/POrBhqNjao6jZo8wuaEofphD5w==","signatures":[{"sig":"MEUCICQvoBBcjWxdM1Aq2SdBRwoazlrJEi2tKrd7M+jWU9p6AiEA6uDjbKoy2asyl1osTahEbOvExxoJQOOna7lQ4bpaYNo=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":497154,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgZ5mbCRA9TVsSAnZWagAA1+IP/1gBL7Q8/qwXbpCF9hVq\nF9coKyHkIF+JJJlelPiVGUfeOWAzdN4iTiGYq+jAiBfCNxX31VgFkDnDRBBG\nKu8Hy2HexbZSCHWgSCVQyNsqEq5B8wcmIW0NwdJPNLbPD7IqyG0bJyr8QuRS\nWgUI5q+8hVdl+RLmcsnWtp33WUURHMa9oplF/b6G4hsdgbKauF9lndBe3Cyk\nq22ZdEMDS2EhL7aTs6d9GptFURRMK92+NrsbemY9Th2AQAmfMfiXJSY+eeni\n6uX+hwG+nHgQUHiqb0157Q4oNGtzbqewHq+pdeGsewh7rp+DtqsmH7Vr3Unv\nkowqv+Wu8lpdHPBIGshEvRvTzoZWsTu94UFFSdQbzp7AnaAH0Qv5Cxzm5T8A\nKHJDMKgTg57kDk05QY/xce/iUBK7aT+VWkoXO1EXBN6BBmoikH0q4dlQuULr\nW0jJBDQ2blqgUjL7+7ZzqOQv1ROHFie1GdnW9RI8c/jq1YP9MfNyfvPjo+SL\nKEcvDXmIw7esal19jqw2dFNgmq97uzNAvBO4F2c5Iu5OBMNtmFm1/WLZMbuv\nzhYTmQPn1kBGDKEiPpQIZZLWogZ8IDBebaokETyb+Fx9tJr/xycpPxpfTiOH\ncXw4gw0HA62cnePbo9/yQnEvE2DgVZwlL9bolx86edTYj7O/VeXjEdlp7CLy\ntJRO\r\n=5hB7\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button/styles\";\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.**\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n**Note: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.**\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n\n**Note: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommended to\n always include it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color-or-map)` | If a color is passed, sets the default container fill color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`icon-color($color-or-map)` | If a color is passed, sets the default icon color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`ink-color($color-or-map)` | If a color is passed, sets the default ink color to the given color, and sets the icon color to the given color unless `icon-color` is also used. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color-or-map)` | If a color is passed, sets the default outline color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the web 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/density":"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/button_11.0.0-canary.1f636b205.0_1617402266939_0.8863080032494017","host":"s3://npm-registry-packages"}},"11.0.0-canary.94f50b260.0":{"name":"@material/button","version":"11.0.0-canary.94f50b260.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"8d3ada82895b724e3b09684acfae8ec602a1e192","tarball":"https://registry.npmjs.org/@material/button/-/button-11.0.0-canary.94f50b260.0.tgz","fileCount":40,"integrity":"sha512-vLI22xn+2jJfY1InJtl9C5lA2wfP57I2QnGYdv2uwmKTZB0xmiLhZPB/jGad7wWk0xJL/iIgO6Zgg3RqpLS6RQ==","signatures":[{"sig":"MEUCIBVuZ23ZIeLF2MblxSNg71ivR5bZ36A6srp0h2qklgC/AiEA9wYg8MlJFE04g0kHTdiOJo7Ha7iF2OgI53j0cJIrXSs=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":497154,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgayc8CRA9TVsSAnZWagAAu9MP/0tpejIWUvZ7XENKBOFs\ncPc0oAgek9huabmRuYGEefiRzx3K7rcNt+SS3OlFgnTif1X1fI+59eT1KhBP\nhuUYYLUA4uYMjbOe3wMax2hkmB7bmQUz7JxQo+j8Cc+9NvcRhzq4+O48nQRA\njAGje6TJahwkQSwy0Aar6yEXxaI7LhN7FwovD/PId8aUKc+m/GvjawjY92wY\nNDxaXmUxUOq4hlgX8W+Z2Atf9fiCSjp4m7rDI2zIY4/0GGPzx/cpMxxXuwC+\nrVPU0L6KolFnSgTYOFFFfsvW4qv9gIsTUsQ9csCu7Q9CW2ngKguVN9cp4tMf\n3CRA8s1OV9sgzBaCZC7VbJpFHOVgUWskk/gzMyoE0jnTkyxp317u+1ppp542\nsI0kwFX9vZHFwzJv7PRqixkOFtnX4a0g7+0MojIvw/Ko7Fd2nNhRHuhQPNWE\nIe5ydXE5xk7r5Hk3P9KpgKUHmH7bjusAEqFtbY38BJL7wvnMdMG1VoUouybe\nQsmsjKGgnXq6r1zsU0S4QoC7yrBhm6G72I75SjWhXAS86TFtRGEQi89P9fER\nthwlM9v2U2hCBdc/+IHJurjcXu6YwP7bs30aUdJrDv/bFsUYYVZ6lQIGCOFq\nP272gYZXSvd07PVZW/DJZGPhU1Zz0u1GOXQIVWVMUsSgrgpTLvuBRXbLr6nB\nW6XV\r\n=RGby\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button/styles\";\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.**\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n**Note: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.**\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n\n**Note: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommended to\n always include it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color-or-map)` | If a color is passed, sets the default container fill color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`icon-color($color-or-map)` | If a color is passed, sets the default icon color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`ink-color($color-or-map)` | If a color is passed, sets the default ink color to the given color, and sets the icon color to the given color unless `icon-color` is also used. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color-or-map)` | If a color is passed, sets the default outline color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the web 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/density":"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/button_11.0.0-canary.94f50b260.0_1617635131588_0.045334557527019426","host":"s3://npm-registry-packages"}},"11.0.0-canary.a4009b80a.0":{"name":"@material/button","version":"11.0.0-canary.a4009b80a.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"58698e4ab125db0182efe170cb1eb2028656ade4","tarball":"https://registry.npmjs.org/@material/button/-/button-11.0.0-canary.a4009b80a.0.tgz","fileCount":40,"integrity":"sha512-8GmNaW4iFZ9b0wY6CFihsia4GXfzwBfxolTUJw7WyHTtWS5lzobdus43JvprNH7hMzTFp+cB+f9rVEMJWfP18A==","signatures":[{"sig":"MEQCIFFF2dQvFqXpNQs1Fm6t4/GSdUdE/Ge9WpIgkEIWm08SAiA+VoZ0c13iwz/y5jjYskOPobHtC2zWxLOoB7brSMzX9Q==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":497154,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJga4iXCRA9TVsSAnZWagAAiO4QAJQO7bAKImXM9ZfFdiVm\nPTjamsSqhTc4CYBu/iP1PEhMMP6N4Iv1lZ5Iswag2yc8k+K9fxx3zuzjUw5d\nvGG+dmwlhP1dYsM6IqditVS+lFGqSqQv2cAu/i9eaHQrZlxseqIAD7r/0zjT\nWKhbs4IRqDFDSreB+d786SHkIgQht6Pig3qbbVVMYMUtPPXf86RLcxooSCU4\n5Z5vqsVb2JA6rATTEdtBRakjJ58dqfExn9tW1ArPUzjwavj7kawN++gMFZ+U\nEPiaDLIaUThFFsapmcv/65GIyHICVtqX7EN9YLLhOikvS+KVY25Zb12LmLbj\nj4wzEkfWqkz8KkDmENCsdiVi4QCARG0Iyb1KptPK/zqcnTe+KBkpIE9205tN\ncCFb2rkJOF9KUFNiBrF7RRM9DbTXGF0gDRsskoycOt5TAvqoTCCzKLB9BuOc\n8zEfLDFwoKC87DFMTMor/Q+yOnl/nhM3aewO73bJTt773zHxmgdn3j4T50tQ\nYVtgRdaypTtFNkbra8srEWXgKVR+UcqfiDLOV95hcW6HRAyRyi9FFEufsbeI\nXo+8aEBEqNpiLsyJmRF03+pwxveb++il673E1ez8w9ZuTlkh7NyDk5HCac5z\nIGF8Ocnoh9p0pqpkFLbobKMwJhFoDcbcDUUPZ60ui+1FZIGxVc4/eO2l1DOv\nPXnD\r\n=2R3w\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button/styles\";\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.**\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n**Note: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.**\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n\n**Note: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommended to\n always include it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color-or-map)` | If a color is passed, sets the default container fill color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`icon-color($color-or-map)` | If a color is passed, sets the default icon color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`ink-color($color-or-map)` | If a color is passed, sets the default ink color to the given color, and sets the icon color to the given color unless `icon-color` is also used. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color-or-map)` | If a color is passed, sets the default outline color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the web 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/density":"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/button_11.0.0-canary.a4009b80a.0_1617660054679_0.01220461908989745","host":"s3://npm-registry-packages"}},"11.0.0-canary.15604bd0d.0":{"name":"@material/button","version":"11.0.0-canary.15604bd0d.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"8a5794e7238dfc8fea40558045f02fa4e438884f","tarball":"https://registry.npmjs.org/@material/button/-/button-11.0.0-canary.15604bd0d.0.tgz","fileCount":40,"integrity":"sha512-Dy8qBykKAd8QVx3SecOA90XUfkuQpLTXF0GhfjMxbte1BNU1lqRsNkXsNnELorIL5DNUJOg7OKKzXOzBrNgbRA==","signatures":[{"sig":"MEYCIQD5AfIt86O5QJIKdsi7btmaNK8vvbVoLzA5tYBqhzGxawIhAJFwvgWinrMa0e8at4LciICnUpsft5gcUs6aGhBtl5Hu","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":497154,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJga5JcCRA9TVsSAnZWagAA14gQAJqpe8ShZPucS6Gpt7Fx\nyoQHO4q9UivLmgIoXML0fuFUBzYmnl6iX2wrytfEnEeLmWnvGuGVTp0oEEHa\nBUi4Z6uoEYGMrRWvZLaZtOyqKYMFPAnqVySvRDa7/qyjX1rq5ws3BvXOr2vT\nYbvKshrdjiBl1EqjbXaogi/JnwAx8HEaCqsAxHInQpTqjVKce3vJFKuWr2iX\nBevbWqbI2AqYAFGIBlhKrS4Ga1trs4b9yjmwmXUwUNTBa98Cj8YqSyzBTlzB\nneMp1EdqhqEHgTenU68jztanS7HELKIYekAN73CgkKYis8FpzpANEd8//19f\nbHhaf0ZSYmTVM80U8GxvZS8nq6pQg4mbUeGF+HDvBNOUCEXlYgmDAU7AbL4/\nKtuoV9VX99NgjfW8dwGe8lNyra6H7krkA96ZG1EnyzjX5SioFx26chWJfSxp\nqtBqvv6T8nsJ2/pOKG+MO8309tcFTajj9gpu9nbsv/dVAzPvZxv/ss4SN9bE\nylUr4ATsppobCpGzv/xobmLVp2Ttza3cysgec0h07brAoXaGHYVjT6HHJOC/\nZpKKnlXLzdIdZPetoc+t/OIiSm14kqfUlNipLBVuhOpNB2cOs0eWdpqpZxiD\nookIJPj9nmzHoiuqWQd8ma4ybjeWHzUJGy3xBicA4Fkjd46rGuRRkcV7jU9f\namzA\r\n=u0q8\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button/styles\";\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.**\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n**Note: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.**\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n\n**Note: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommended to\n always include it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color-or-map)` | If a color is passed, sets the default container fill color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`icon-color($color-or-map)` | If a color is passed, sets the default icon color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`ink-color($color-or-map)` | If a color is passed, sets the default ink color to the given color, and sets the icon color to the given color unless `icon-color` is also used. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color-or-map)` | If a color is passed, sets the default outline color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the web 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/density":"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/button_11.0.0-canary.15604bd0d.0_1617662555153_0.5396189145695478","host":"s3://npm-registry-packages"}},"11.0.0-canary.76da7876c.0":{"name":"@material/button","version":"11.0.0-canary.76da7876c.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"2cc2f25f671b595fb35af6207d10ac70ac660070","tarball":"https://registry.npmjs.org/@material/button/-/button-11.0.0-canary.76da7876c.0.tgz","fileCount":40,"integrity":"sha512-2G+R9Ta6CWy0xfhlhlh2MAZRVUK+rTbYSaIP24bMuKSj0XmBUEs2SZ6B9tXszadqqjTBNky6t8bWZWDErPalng==","signatures":[{"sig":"MEUCIC1a4+QG8GdTgpI5apelqCD2iKgP4eccZE2rQ3h3D0bmAiEA9pSkH6FPqoGATFZHif4Mzj6NbNY6FUI9M+fVgpRqE44=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":497154,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgbQ6hCRA9TVsSAnZWagAA7CEP/RRCkWlkcEYmvK4fnKPn\nQ7Mw9wc0ZJ2RBJ28VD5XQPL65IgvJPoPz7PHg4oBKZssMec9ak83fKIAiiwa\nUqNWsuFZmrCRYUL+i2+Rc1yRr3TVlwGxXdPnGGLj7KmHQspxkOg1UtvvS/V9\npdMjRmADr6wbM10CRm3dtRrByCVlh6ueoF9xG6tcSlHw51MZE0KVtE6QEjzo\n/FCsnitg1wU7R9ukgbRfVK4PYOWr5WpL8ktDHjwVkKMint7TnmZQo780bi4k\nWUr3CgcOktlJJHYlGRZEZQYsPtVo/LQ0e5FNIfJ5n3jgddjnmOYOOapl+N5X\ntkz7mrKJYMx1tkX7r18KBCtqPAqlQP6yQf7Dli82e4NOC2cg/c+AdI1Jnoow\n5SX0tldbQRaGvzUM34/xW4piv4WS1KPKVoqR56vyGjI02l3vmwVdv16XMY+/\n+fLn5wzx6Oz9tdMZ1iFX6Tk3WM77z8FRk4vtmehwIEq8Rkv5+b+Z1nE1T86c\n6puTKaQjw9Myi/d6b1jSe7U/EtVl14mq7kK66vN5/8JyyN1l19vg/jjge8hc\nQg2Hr8BI1/fBMI9lfvWbF7oyAJG1Sgz7RxrZWw2YxDsB4bv39vBpgikZWotC\nlXRUofva30fJ5OWO9cf/ZqIEReuqnZB/EoEegJdtimTOuSch0NZwNYaWrAhu\nKp+g\r\n=I5Zw\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button/styles\";\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.**\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n**Note: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.**\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n\n**Note: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommended to\n always include it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color-or-map)` | If a color is passed, sets the default container fill color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`icon-color($color-or-map)` | If a color is passed, sets the default icon color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`ink-color($color-or-map)` | If a color is passed, sets the default ink color to the given color, and sets the icon color to the given color unless `icon-color` is also used. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color-or-map)` | If a color is passed, sets the default outline color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the web 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/density":"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/button_11.0.0-canary.76da7876c.0_1617759905208_0.09180106887183115","host":"s3://npm-registry-packages"}},"11.0.0-canary.6bcb6cbd2.0":{"name":"@material/button","version":"11.0.0-canary.6bcb6cbd2.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"f355d50fecdcfe08d294e398b1d04e836859a985","tarball":"https://registry.npmjs.org/@material/button/-/button-11.0.0-canary.6bcb6cbd2.0.tgz","fileCount":40,"integrity":"sha512-4X2vc3DVXiNZ2MyIm2jBV9eTCyUTTvxVvPM43HEC64IU+wO3KxNaPTrtjqY2Eb7zFvh6Mr4XNin1PHV1gfkpZw==","signatures":[{"sig":"MEUCIQDmTmCHu6/1hOZPLRxC+Zl35wr+JKqCdx7jhKpNrsJRWQIgNhiHNYgPK12tWHxXValYg52CFZlU3nqwFZZ/wui7d94=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":497154,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgbf/SCRA9TVsSAnZWagAABmcQAJWtXBumBM4NdNX7d9UC\nTUscVX9O+61/viD33llaNRzcDaTmY6tgFkwLXvG5HXErC0/VuYIeVQpwSgfK\nSIw58BsapdexnAjPIy248ULgBSh36wbloCHb3nd0bw+hlj5BijNGboZYIql5\nJXq/QYqIzyxNUf5shTkmCwwICXhcZvyJ7B0qJHB+ypJSuonszxCXW+COJfr3\nY2zsmwx5A3pN+Tm9lh4JTo8Kwv9xCCGcn56dzIIExwnbAugbSl29i9fPh4tf\nlBG2aePshWWeAWi2xGQcnYAGG/OBST+NHt1+879ikAxu4WT3fl5p9UAf5Q+t\nnU5hRrYAZHhvF+giFCUojylxmVPY61M2XSzzbfHlcmByXAsQ5F2soMQxMiEL\nXTJKnZU3VkyRXrxvua823in7WkgG1jtRwZ2ILcqrjtcROt4uFroyBz0ya27X\nxbg0iROKtKP/niJELqUhAbrcUTPwBq9g8pdd3rNxtgI6LbdGCsAYW3Ky7SHd\n7DKYmmEtAOHWjnNdM4FotKQj+Nc/LiB+/EytK8SgNK2O6gekQIXs4idRt7VO\nyTeWk5gnUv8OiDnqJ/hyJomsevpS7v0tnr8S/KyKGaxgIq2bMPoxVGDgOw+Y\ntCqxY8HPHzoGMaIHGdnjhVvYs3yUunWrGboCautK7hJ57qHlqN0Tzl5m2PRN\nvEYT\r\n=TrH6\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button/styles\";\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.**\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n**Note: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.**\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n\n**Note: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommended to\n always include it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color-or-map)` | If a color is passed, sets the default container fill color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`icon-color($color-or-map)` | If a color is passed, sets the default icon color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`ink-color($color-or-map)` | If a color is passed, sets the default ink color to the given color, and sets the icon color to the given color unless `icon-color` is also used. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color-or-map)` | If a color is passed, sets the default outline color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the web 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/density":"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/button_11.0.0-canary.6bcb6cbd2.0_1617821649568_0.02152529076712928","host":"s3://npm-registry-packages"}},"11.0.0-canary.c91e8d141.0":{"name":"@material/button","version":"11.0.0-canary.c91e8d141.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"c26aef767da12949faa62a099aa0486bc0846b14","tarball":"https://registry.npmjs.org/@material/button/-/button-11.0.0-canary.c91e8d141.0.tgz","fileCount":40,"integrity":"sha512-1Po9iKjkJAwEfUNuzAW0WkGlB5KquvHrfkdQtQttYqARJ3XFf5wCEoF7TMnKNgIv5SFnhSpAuv2l+zMWLo51iQ==","signatures":[{"sig":"MEQCIEIcY80vaWSDlavpwqSbftPLWWlWlDKA7QyG1tL9e0dTAiBe8QDm1v/LFDZO1nGexPZDH82vsa2TLdpstyeukuFwPQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":497154,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgbgDACRA9TVsSAnZWagAA7sUQAJ8p3Rb3JHa1o97foeta\nqpTwhCGYn1oYUVuncnoT9VKqlPyBy7PkDdpSa/klcTYuKpvDOeAFrFO7VexN\nMOFMUNLz5PM2n57ue5inNmrNjAzIAD68cD9Xu0zW9g9uWjuWz8T8OxbJX9Bh\nJtksCD5uD2VYvS7pBfRj8z82vvAPHtTIkZzsYepXyBdIiFh/gMX7kuRx4aPf\nSr/GfWuBg8LkR6r8sjPGIKXnV3oD86dMaOcnmUP96z16WafSjvudQugtS/8a\nPTeNjRgif2T4skyNIdgjo9Jgfe5uVL2dz1HtSol5Qq7rne+hmHZBTE4SYN5I\n+aRQKYpJFaxO7MLtSm+7UeevX15DXWSc0ymF3e+OJw55d2H6+wZf2gIip7Un\n+cwWRPOXqb1Lokc7cSJBHAfCghueoruZYkZnb5PHvvjLB95edkjiXZf+U41h\nmeh+3uCp+dLvLVmhw6fJ7VtB63X8Apc2h/LbK8JXfPNXNaa/01V972V0/m8m\n7Fbkji7zKpZYackWWEiFeGGYnjNXzIvZk3lDZGksbo2kH/LNWManUEiPmCQU\nKozLI4owIeD8rJXuIiYoDe4UsuZuemII/xiahT5bx8pF+ralzW1+oVxMYMFM\nz+anCvWsBGkgOHuktYR5Z2k0lKLMg0zb9XtivSouX2eSvSclwXPOQ/3I5a96\n/G7O\r\n=Ak05\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button/styles\";\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.**\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n**Note: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.**\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n\n**Note: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommended to\n always include it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color-or-map)` | If a color is passed, sets the default container fill color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`icon-color($color-or-map)` | If a color is passed, sets the default icon color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`ink-color($color-or-map)` | If a color is passed, sets the default ink color to the given color, and sets the icon color to the given color unless `icon-color` is also used. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color-or-map)` | If a color is passed, sets the default outline color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the web 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/density":"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/button_11.0.0-canary.c91e8d141.0_1617821888555_0.37061185360851523","host":"s3://npm-registry-packages"}},"11.0.0-canary.f77c50860.0":{"name":"@material/button","version":"11.0.0-canary.f77c50860.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"f529d0a209d6152424dacf8619e089094402a73b","tarball":"https://registry.npmjs.org/@material/button/-/button-11.0.0-canary.f77c50860.0.tgz","fileCount":40,"integrity":"sha512-eSAp54hukvtWdIDyfM0E8dlYTQ14yNlHelTBqHqtVb4UxOuv4aeK/RJ2eVAd1uGcc4BUZG/vbPT8Z9zYNlOulw==","signatures":[{"sig":"MEUCIQCUyAS704tlD/Apl1e0xFli5uCiGTENQxFjJNVdyt2U5gIgZxgd5n2l1jQQ40xxjbox0/aXz2q3CNJUB1l8ArKKCD4=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":497154,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgbyLuCRA9TVsSAnZWagAA2LQP/3KKLMXiLcXu0sALVWCq\nLb0oLf273hePkJdB55FG9ozm7J3k5jfozQk7sz4hHIBBj1KhZv5LlPr+GXEO\nfyEcpgqnjt3WZrqmG2wlS2isa4Dv2vtQyi4xmyDlm+SGipTdYQYgqxk/Gpgk\nNV6GVsmOmhKGnCLiqU/yo9Pau01E0EeT38k2z105p3qyB47RpaHCnWFetMtv\n1j9r3cqYkdEEZdY4mviK38YCnWZTmxmbLp9nUypfWJdD59Fi+A6qtAw0Ixg0\nvymmAN3KkPJF7i1r2Q6HbggdtERBVcBVXyy1pHkU7q2BmT7OWj6vPy60qsrq\na3rGK+q/0baeCHlUDprqAPGwnqTfEuhqthkM85+afCLaApdr0y+DhbC0oa39\nsmO2HqdiUS577JL0IpzpURgflkKpxTr35kjNk5VKyjKiRtnuR18A3Lxwsoh8\naro9XDpYeushrh1eLDvjyzMJiBZ71Bj2Lo3v45/DIcPoZiV3Oh4axvzbZuEu\nYm+w+I7oXMCqw8X72W9r2ewkd0a0Sfa2EV/vPzL9POoSmmsp9JxngyadgjM4\nhsrPDOLkggLlah3DOl7SadwYSBvu+kqZOT3lH9vOAy3DzvhRm2A7Ucy9+Zow\n1eYBy23Rdv/fmS6enamIiLFJJV67GaXGqL+jhBFhQOaREgDbpfC0q2itayXn\nB9y3\r\n=v76N\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button/styles\";\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.**\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n**Note: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.**\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n\n**Note: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommended to\n always include it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color-or-map)` | If a color is passed, sets the default container fill color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`icon-color($color-or-map)` | If a color is passed, sets the default icon color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`ink-color($color-or-map)` | If a color is passed, sets the default ink color to the given color, and sets the icon color to the given color unless `icon-color` is also used. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color-or-map)` | If a color is passed, sets the default outline color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the web 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/density":"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/button_11.0.0-canary.f77c50860.0_1617896173499_0.09453896481754698","host":"s3://npm-registry-packages"}},"11.0.0-canary.367d88bdb.0":{"name":"@material/button","version":"11.0.0-canary.367d88bdb.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"25a70f368a8f67735b1c1f73467241304b9a2ce2","tarball":"https://registry.npmjs.org/@material/button/-/button-11.0.0-canary.367d88bdb.0.tgz","fileCount":40,"integrity":"sha512-O5fK5I9upO0vNaAhfKa5BsGlrlZcNiu8g22k1hNMAQgD53bEqeW3JiJTEO4PHfJjzRZdTlFECEcOsbGfGWHcLw==","signatures":[{"sig":"MEUCIQDF10k8+mgSO/DeeL7n/bTmCLIPH4jD96kmV5m4r+y3VwIgf5MEn8hiVyQZK4XPEK62QMVv5JQm+D5WhutEtU9OEoo=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":497154,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgbzGmCRA9TVsSAnZWagAAFWsQAKSNdo1+DbUBnnwRacrk\niYKIcKuY5ehyR8dPpbz58gU7+6LmkWA4Hx9TU9cQdZBsWaWlpjzVD+rAy5/v\n/IxrsaSVxL64byJDGoef2mi++3nddR+d/p7U5Ph4iVEGZLOZ4FM8vsvyXqr+\nMzq9SaxVItspDaOL7SxFuv7pRKytgW349uQHGtWR+6Qv3iEF6IoM5Xn/rYJ+\n2SRUo5IG2jCt9Y/6mCS5ZtBk8Zcc8qhOOqE84GkSJy2wVAizUgIvUtjuFbC9\n7U/4w1EJ9IrSGHsTe8T+nRwEo+7Ad2ANJbBO3JUyFvOGfzLMw8Jav1+xOy7j\nWr3XHoptIGVJty1cUX65CryR+fQ0TgV4+ujZ2/7YoKr2ne2kKlFqacqN+Dq6\nqYBNBWgO2Wz7V3WsKFIHSbCwhY6TXWWL3pwPbgWOheIy1wLOmfGY5L8NX7AI\nI/aHWASWNdg8gLJimmEOnho4HcXSH4nnkHvbDt5XWmWt8XgTC+diL2OJrlv5\ngAznV1XhI4s7QjJTQ3uMwDMJatA2LnaUnxEozJXMhkKM12H3hmB8homlU1yl\niJgoxVZaKCDeIbNUKBU4N1DNLihy/+2UzIATh3NvG9APkCnRUCQLvUe219xF\neucOh3vL/0F9rCy26v8+bsK7Okq4QXAy105VVxxHfFBRjUw7JcbIcEM6BNXY\nm6bu\r\n=/cUl\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button/styles\";\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.**\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n**Note: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.**\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n\n**Note: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommended to\n always include it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color-or-map)` | If a color is passed, sets the default container fill color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`icon-color($color-or-map)` | If a color is passed, sets the default icon color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`ink-color($color-or-map)` | If a color is passed, sets the default ink color to the given color, and sets the icon color to the given color unless `icon-color` is also used. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color-or-map)` | If a color is passed, sets the default outline color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the web 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/density":"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/button_11.0.0-canary.367d88bdb.0_1617899942162_0.08242208246053528","host":"s3://npm-registry-packages"}},"11.0.0-canary.0ec437d3b.0":{"name":"@material/button","version":"11.0.0-canary.0ec437d3b.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"79a02e7b1b2ebf26b5324bd4b858e447ef8e67ed","tarball":"https://registry.npmjs.org/@material/button/-/button-11.0.0-canary.0ec437d3b.0.tgz","fileCount":40,"integrity":"sha512-gsJkpzKVsYepAAwfwD6JhyuhVb3pbhIDRddgtj4gCfxNz9KO7+4x0x6UF+fZeh1zr57fopKHHHL8PuSv+3+bMw==","signatures":[{"sig":"MEUCIGUs0s2QR5PDdw/inwfnMdoR1TOaBSzxV1Fc83376IO6AiEAkrpXRCtFDIT61B0c8cOj37V4scn0T55wdz960G9KZjw=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":497154,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgb1sPCRA9TVsSAnZWagAAYvUQAImI65R/YLFVe9d9LOci\n2rT2jocZduFt2Pawhy+gRrLyigBEIAi01dk1YPOU1QGiyfSz7z7EHjSQs7GY\nqyNvn+N986q1lav+sAT7OG9RcECFlrfhsCR5wOqdOahgWk+fmzNwkKCdJQAb\nznJI2Ee4kH+Nc6Y+RoyvRuVpoddjO0Y+uH+l38gjmmm67U+h7xuX7n3ktMr4\n1H3+avr04sltujqtVvMBkXg00M5VyMfiNtnn+qNz5PnLM9fy4+QKg92QJpqc\nR2IML9tyn8U0Gnyde4JuKqATNVEXzFkO0R5QAZnmOyEU6ZwfJU3fxmR1ZsuT\nrbyReksixFs6GbPxyHyanE7cIWfkcqcvye3NDlZb9WYzuxVTPcDgW5cN/VNb\nEcEoFQJ43heC7g7Vch1oM+LVa01TJEsGJlVgJB0uJfrsSX+LIGHWw1mLn4j4\nqsXd6e4iBsEcLcZDZG0CD5/tsBTQjtwbzpPu/+m7v6stR6UHhzlyGrm/c5bc\ntweFeQJqkPquvkzdMOfhq0gyA2RYPzdnM7EHzc7f7GsSQlV+PFOyJcLVfrpF\nPpl2X1gaObU9cQ1WrAamdKj3+mCvpTs6wBWWKxLgtgcByuh+8jPmDBh+Qvya\nW1p00zXF/vcNIoCKeoVpjeRVRTo903qX+8O3C1YxzH1uMf2TB0H5TeNfvpYL\n8YaN\r\n=9IIu\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button/styles\";\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.**\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n**Note: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.**\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n\n**Note: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommended to\n always include it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color-or-map)` | If a color is passed, sets the default container fill color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`icon-color($color-or-map)` | If a color is passed, sets the default icon color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`ink-color($color-or-map)` | If a color is passed, sets the default ink color to the given color, and sets the icon color to the given color unless `icon-color` is also used. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color-or-map)` | If a color is passed, sets the default outline color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the web 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/density":"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/button_11.0.0-canary.0ec437d3b.0_1617910542488_0.10333136050313807","host":"s3://npm-registry-packages"}},"11.0.0-canary.b2fa996a1.0":{"name":"@material/button","version":"11.0.0-canary.b2fa996a1.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"c5da21c654fc76659f7353bfed06b374b7084e5e","tarball":"https://registry.npmjs.org/@material/button/-/button-11.0.0-canary.b2fa996a1.0.tgz","fileCount":40,"integrity":"sha512-wcsLW1sVHkfE667Qf/fg1Vd8O8uEuRODEMttsEMmKlsCjqVs+ijrCgcWQOGUaaK/G4C+Vv843KHV/EUWH4QskA==","signatures":[{"sig":"MEYCIQCQecpUpiEpMXKsgUnMDxT7K2nopmikUDXS24yk/NMEzQIhALvXPUxGEP7aBcLB2ORX30wIqJJP+nlnpfjuAOUlnvl1","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":497154,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgcG6gCRA9TVsSAnZWagAAFiQP/RZnhVOwCuo+p1jkcGKX\nB1wMnq7oXc8fb/FS3+NvvPD1xEjaJQJ2olh4zcHSS45Na4lxkoUf9HCQQFjM\n399UjyvX0vprIEO4LZTLzoUGSKpHJnUcoJCYjJISUfA0anQMoQ6ne6pSQlu3\nqWPNtezs1SuxZrstJ8Q9IQHbEvUAOa+KVwQgcutYl3Cyk0Ye+7ETsXC00txJ\nIvRNLHpb4xDydLMroBiXpK5/a8hZXtLrETLl9ngl2X68TU7OAehpiW7ngXwV\nDCUp7v79r3rNbyRQd5wPPI4BW1w9MCuFy3ENKM2kZWSoZhQWJ4iBN7JdetIp\n2GXkIlWP+R3QUTV9fAeds5aLr+fvgCjVFdXZTppy8zh3vjQ0g2jkdtyxbKNr\nNHnwKYZit+BBUW5KvODAolG2fKXFdTpJAtvOIuAk6/Br0A2wt3GpyXL1Tp5z\nbAGP3zkvgfyEfdXP9aRMm5up/NOcfggAAeEKdWsZZ6x1Qrbp3bsoJQ7D/rVN\n2EEWOVQZ5sjvSgrUohGKmTAZXWrqwzldscVqgb8AgbC3ExJI1ZvYXu2ld1Ln\neFIUlE8wTWLXlJZOhR/lQqxOSAxNgcTlHWVzxjtYfcV7kSVqMlxas8dOqgRK\ntybPQVxSzlY1XOHRDgfpscYJCg7N8JUCveh0pGHB8pw+9CWZETeMpR2MLjtz\nkpql\r\n=F4g6\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button/styles\";\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.**\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n**Note: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.**\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n\n**Note: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommended to\n always include it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color-or-map)` | If a color is passed, sets the default container fill color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`icon-color($color-or-map)` | If a color is passed, sets the default icon color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`ink-color($color-or-map)` | If a color is passed, sets the default ink color to the given color, and sets the icon color to the given color unless `icon-color` is also used. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color-or-map)` | If a color is passed, sets the default outline color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the web 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/density":"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/button_11.0.0-canary.b2fa996a1.0_1617981087902_0.5243213275924672","host":"s3://npm-registry-packages"}},"11.0.0-canary.24255c408.0":{"name":"@material/button","version":"11.0.0-canary.24255c408.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"fd8dd0b953b7dde1c104ca12753bc522b8c09aec","tarball":"https://registry.npmjs.org/@material/button/-/button-11.0.0-canary.24255c408.0.tgz","fileCount":40,"integrity":"sha512-go4vGHEF6lDPvmO44ahfQEAYqeDGa00gpBUTvAI2sHT1/f/w07HlPCK/w464V1oj3NqTIgaFeHfKx/mipGVUqg==","signatures":[{"sig":"MEQCIBA8mvTnm+GrQAmwIcyK8SPAJQ+Gl1B7FKVr1tUjngyhAiBtH5+Q8pQOzQaswwJTSjItKLNZOIePBDcpbfvJWtw+6Q==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":497154,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgcLVDCRA9TVsSAnZWagAA4sgP/iYKdfVmcQcpqP/plnj7\nbPWI/dJ7rwgE35hzik5FZQ3VrCIWCj+PakYgiya0BOituhM4c2pXoMtvvKVl\n6A88CBc3SR4wm8RqTBBsz/49rbI6iycMt4h+Nb2KjS3DgT/xvhGjubeOj+1U\n7H+IeJ27uLtJdErkgoIQ2MXE6JbPLCcbEgHJQpNPDAkIieiRQurFcLwR49g6\nIhgqntI/fArGn8xSYASrZZ+mgpZ+6BziVFmwI+At8LPj2psLApdSRjEbbxeQ\ntkbMfm+N16bUvuKycwQtayMnTKf64yWMWLVQiUXmi04ubhOckza76Fev4O6J\na2IJh01WlCJK/SMGbmJwIOeNBH6CKgmHG3vJ1jfch68nn6VUmwJA4k+6IHSt\nEU+P+XMRAmm/eoFo9twnW5alLeqAADB9ftNmdGd2yS70cIJTIsW27q4eupsl\nbML/v6OoyvID/rxAe0zLBGVc2Y+VQ4vnysitDEMujMeeqcUqm07zJW4zS867\nSFJV7axIcxB5O1izVTCRqUgKixx0Q5PrvM1Ht3vfL1rvAMKLf51PJbFId7Wg\nT4TeymchgNALWTZ3jDbibBsaqj3EC7XIVn3gE/hTG859GWHO/O617AK4NTAi\nMAt34S1HMxQ0+ON7HP9zWiN91MtYUoyPL8QtmXoUR1o88z8QJuYsgZUlBift\n+tOb\r\n=mqHs\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button/styles\";\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.**\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n**Note: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.**\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n\n**Note: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommended to\n always include it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color-or-map)` | If a color is passed, sets the default container fill color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`icon-color($color-or-map)` | If a color is passed, sets the default icon color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`ink-color($color-or-map)` | If a color is passed, sets the default ink color to the given color, and sets the icon color to the given color unless `icon-color` is also used. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color-or-map)` | If a color is passed, sets the default outline color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the web 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/density":"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/button_11.0.0-canary.24255c408.0_1617999170716_0.6599862102886487","host":"s3://npm-registry-packages"}},"11.0.0-canary.7d6a4bb72.0":{"name":"@material/button","version":"11.0.0-canary.7d6a4bb72.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"0895d042409a640ac4f60e4134731301dc836af9","tarball":"https://registry.npmjs.org/@material/button/-/button-11.0.0-canary.7d6a4bb72.0.tgz","fileCount":40,"integrity":"sha512-9e2MRk4O17O5vstrv3Rc9QD5BVpnT1v5l+hAfC5RSvwmKGIV4lxFbRddUNJwLzjAcHZbbE5XLE5oDJ2h/CuPRg==","signatures":[{"sig":"MEQCIEdxMvuwkF0fZ2BhkUjcfFB5AWh+rdpRwupzL9fxyuJEAiAFiWM0odg5WdXTzfUvv7X3iYdjF25z/jBlnHoxllVQdQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":497154,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgcNsECRA9TVsSAnZWagAAZssP/378k9UZ98kCAqTQ90Mk\nX0VGT8S0grnqoQkXq8FtqA9b2dWdDSfp/csWO14EicjM1HKFcs4Wn/aFwaGm\ndgdjUN4rsaL/S33+KkRTlwtd8u8chIAgXp4Uam5AQjFhp2oVOqTiCTRD1Rtf\n6EXuPwUwsHCshW4T2NRDaK0iuAlt3Y50+uDpUJfwLf6XqFzJwoy//WTONB+V\nZNU3vCTbFI0eG/KHRY/AjLTtJFkWsunXsFggy2S/yvCQCSb9yYhRZ+DI7Qu+\nbo/isHQUzshP8HC9AXc1T4Tdgf6zXPdbD1gyXqtacpqYc2LstY4UWDnh81CT\n4QiNZrhZqA4SlXehJlyQb1pX9Ifez37bKtdHc0BNj1AQcnP4jCS9X2FFo8i9\nmVd1g3lsWhEUEaFFR1PY+SbTlXKHu7+3qxIu2fT+Hq1v3PpfL9MZIuk5lUbf\nXZIJeIanUQADrS8zf8szV1viOfBQTPK9GbJkmF4lQejyTzKDbkTfeRStH5fA\nRWyQgWgjEXDlDodIVqxcvKMvfkHXnOkBn1iDm7s1iZFrKlo8mW2kTq6gfWfo\nL2IXvPwPotoWoEEqftBqbXp5mpcRBJ+tbqZ+4y542L6+OW8RvOVQIAcouxys\n2k+Yv9J4/LI5YNaQuKUZ26TTdQEn+p2XM0CBZeIEZxc4URoFeMsjfrFedlWO\nG5i7\r\n=kMDf\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button/styles\";\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.**\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n**Note: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.**\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n\n**Note: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommended to\n always include it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color-or-map)` | If a color is passed, sets the default container fill color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`icon-color($color-or-map)` | If a color is passed, sets the default icon color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`ink-color($color-or-map)` | If a color is passed, sets the default ink color to the given color, and sets the icon color to the given color unless `icon-color` is also used. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color-or-map)` | If a color is passed, sets the default outline color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the web 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/density":"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/button_11.0.0-canary.7d6a4bb72.0_1618008835753_0.7129943016987108","host":"s3://npm-registry-packages"}},"11.0.0-canary.352b295c1.0":{"name":"@material/button","version":"11.0.0-canary.352b295c1.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"b04d81cc206abf1080b5d3ccccb46fc8d3182d13","tarball":"https://registry.npmjs.org/@material/button/-/button-11.0.0-canary.352b295c1.0.tgz","fileCount":40,"integrity":"sha512-GrxtNI2TnhRfv68IimrZfnPB4pAAYK8W35diju8YDyaPWOx2g4l8hNBHSlzdcNSPDZFRIiT/0V2dh85pjyVk3w==","signatures":[{"sig":"MEQCIGRjhivJ8Azb28MQovq9ZERerYvtwQjiUEGHUqL8eBRjAiAike5JEglBhZMCNnVOG5Fobp6mUFC6vj8RzmTwd3Qb1w==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":497154,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgdI5eCRA9TVsSAnZWagAAQF4P/1noBtP3ocXpa7urgcFT\nAogwLUK68rJEBlPdFVnEP11Q0SpH/XDN71zE1cQbLzGwT8ZvltG4f/kuWmLI\nXGpZpYeqe2DDqxpsIRwAZSWlfISWrANmE22TQm6jupHxyQsIC2/RC4aDnhuW\naX9yiDXqGTbMY1Cq/6s3E7g6o5qMVHdI3yDgSxuAadBR8hoHUl+s1zu9ldbY\nyMrVDQ0znuibdOIKukNRkwL+bhg1dalOQth+uwE7NMixKgES9wq7CJI3D2s9\nhpb47kFI1dLMt9c5lwZlaUoeJ2PdALaXslsi6jmNBrzr1wv54Q2NMpIwQCll\nVaKOK9aXjGnZc8k4Pz7jiyz745NOxXxCcuXjvHc/c5xBXda5IMk0dBQBrEv9\n/QwogU7SR1dKbQW48ROy+rx243731kd6EoAiuHftUvJzwTaL/WC7D5R2aaA0\n44+NxxKXmdOjby9Bb/6m86OWQIPxusi8XgBzkJL3WlD+h2q+D1wWWdaivpMo\nOFywPZzAEigDa69a2U/j0hYVAAMITQ52IM2DmSrNyULVHNjvbenhQ1VAIeLE\nxqY+mXrF5xILPbVul/d8PrR6rgp+BThyD67QBC0iRMyWStXa289uNlTPz/dC\nfzJ3CHdiD9kKDAqwX/qMhaBfKb53oEoGQSTBLNsWXKXp/6iEZSZCv5ESaXYO\nF9no\r\n=86U+\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button/styles\";\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.**\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n**Note: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.**\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n\n**Note: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommended to\n always include it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color-or-map)` | If a color is passed, sets the default container fill color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`icon-color($color-or-map)` | If a color is passed, sets the default icon color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`ink-color($color-or-map)` | If a color is passed, sets the default ink color to the given color, and sets the icon color to the given color unless `icon-color` is also used. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color-or-map)` | If a color is passed, sets the default outline color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the web 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/density":"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/button_11.0.0-canary.352b295c1.0_1618251357560_0.2783704417855708","host":"s3://npm-registry-packages"}},"11.0.0-canary.ab99b8064.0":{"name":"@material/button","version":"11.0.0-canary.ab99b8064.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"d3333f917eca71501b495be8854fb89b55a741ce","tarball":"https://registry.npmjs.org/@material/button/-/button-11.0.0-canary.ab99b8064.0.tgz","fileCount":40,"integrity":"sha512-dbT33IpEo0+vV39aUGRNodKKqLUQ/kTU2dO9kE4+tWBlGeuJs9eNpGuDbnbcMAAh987JicDdU/DDzWwI9WTboQ==","signatures":[{"sig":"MEQCIAa8yZiPSCn3bLheKl00Sy+g2cS0hX9wkmLaOL7V8VROAiBJ9e12KliqZVNUlY++L/1rCIk+FQBf4SUEW4wvapFbfg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":496281,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgda4mCRA9TVsSAnZWagAA71EQAJHnV1EjH13M7D21o9dm\n/CLvM4O3NZMjlqDiDNtk6lPBZtQq5wMfmy0I6LIelE6z47HTUHrqhCOklm4T\nFEenU60cmMrculP97Km34arJ309kVSS4HezvSYQI6KJApOsSjL2uAbXLWIR0\nLVTHMyzXxeYg9m5yyt/jBeXi4l/GZRBv0K6UwHReln5F9F4fz5zHKIQr7YsY\ncbdbFOlN2b3lzSsgDN93zMTajcSKtT5Rsd4CDqwgmehaNcdqNw0n8tRhwThy\nraiZ3EONOillWAG3AXtM5XSQ1/dY7gA389WK1xM+qRkd9fFHv7/6ZoRqWk0r\n6ZwsQqVri6rT29N/CmDCSKEprcEOst7n/dSetXc2zpp5uy53XrsdVq5vbRP+\n8+ozL6hCZ8j4RpjdpR2V6ZVJ0DCiAjD42kqtXW4+FW7r0wQUkWKfNc3ceihK\ncUZpHajlELXmXayjyAoqmyf4FKP/y4gVaLPWuRgyj7hL02PsMk0pryFwCz18\nrnzTapKuat0ycnZJIyZN4Rv3mzyeEO7E9FNGWdloUmT85h56dEhyDEf3GJaM\n2dTy+t6JgAXufACQbo/PuP2KKbyik3Ruz/LaXHP/tJaZk8Vy9FMecXTmf4Ty\n8uOCEYNSzsaCsiPSC/UyHJZC1aCpYMvNVH93du620VqorDlrjZrm+2nuLayo\noEkf\r\n=cZds\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button/styles\";\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.**\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n**Note: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.**\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n\n**Note: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommended to\n always include it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color-or-map)` | If a color is passed, sets the default container fill color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`icon-color($color-or-map)` | If a color is passed, sets the default icon color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`ink-color($color-or-map)` | If a color is passed, sets the default ink color to the given color, and sets the icon color to the given color unless `icon-color` is also used. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color-or-map)` | If a color is passed, sets the default outline color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the web 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/density":"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/button_11.0.0-canary.ab99b8064.0_1618325030421_0.3536007628032045","host":"s3://npm-registry-packages"}},"11.0.0-canary.8f0a11e32.0":{"name":"@material/button","version":"11.0.0-canary.8f0a11e32.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"ae2e433972f7fb45b7e93fe8fb88086fdffa09ef","tarball":"https://registry.npmjs.org/@material/button/-/button-11.0.0-canary.8f0a11e32.0.tgz","fileCount":40,"integrity":"sha512-hysTT//truqmWW8QQrMy9hNvmwzDuKvEybPoxkJ042sWbY2S3J3OmrSjZsintOMVU+p8x2nqeS/JEJknycVF1w==","signatures":[{"sig":"MEYCIQDccyUHAAjAbKbZJX9DH8rgFTRWvO1O7netXQjIDOAq4wIhANWfCmxY7ZQQM29GVAU6IuWujcAA3yIWwypE9FjIVyFU","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":496389,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgd0qLCRA9TVsSAnZWagAASHcP/0W4zNtOMfJIToXPsR8l\nqKF5PO+uQSOU/ieEPOrpWio61BsPP7OD0/g1Z3sCb87U/jUHlblCFMO/wRfK\nx7QHaxJddMTuVFgh/DXT+96iFOO0kH9ide6TBnZFunDUqSOAdokuWnRfiPzU\nRuN+XJ0ej6ox9g/Lf3+IlHMLsWnEhJbBb7oC+Lq+R3FBBQEYacpwTmykOvHq\nQMu9y9H+Hnh6rrgSpmgVax403g0eXO2U1CnRBXLAL0vomPk630ANw/qo8Xt/\nL1Y/WXzhuItWXRNqUVWV1fMdHFGQnFln9FgY0LiqJYJDj0JLBzMpFMhah9sH\nMomjMdhNuvlNeqraEL6uin8Wrvc3U9pVKPtcKsPWC0mf9mbpNsjb/DsXi07G\nu3wZ8nvf8nuii3Iso5kb3UFq8MUfVclsyqOeX06q3EeW/MTd6oLCI3YIUasl\ntuoSQvLJNLLwdVk+X9HCm661pGMjJzZlK9h879CDc/U+JutjJp5rI3MekY+n\n1s7ZyjUV7Dr5VhazBAQo2qhu31/MDW5hk1TNyqSjq/ZmTt356gXYuSZdybDM\ngHmyAOFCHtUmEQHxwkX9pYMM0qYLJPFepr5neTV2bTMcLorXjg5nUUMK+GQQ\n2sStaNN1MYgRHDNK8yJkC0YNYNU+BOT36JFBX6KW8rg1rUYrbkGdtg7rPX9v\nsyrT\r\n=P9fP\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button/styles\";\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.**\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n**Note: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.**\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n\n**Note: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommended to\n always include it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color-or-map)` | If a color is passed, sets the default container fill color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`icon-color($color-or-map)` | If a color is passed, sets the default icon color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`ink-color($color-or-map)` | If a color is passed, sets the default ink color to the given color, and sets the icon color to the given color unless `icon-color` is also used. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color-or-map)` | If a color is passed, sets the default outline color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the web 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/density":"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/button_11.0.0-canary.8f0a11e32.0_1618430602694_0.19076647186918128","host":"s3://npm-registry-packages"}},"11.0.0-canary.f5c6db8fc.0":{"name":"@material/button","version":"11.0.0-canary.f5c6db8fc.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"ef0e491b8505e75b28f73c8109fc96ca54ad1716","tarball":"https://registry.npmjs.org/@material/button/-/button-11.0.0-canary.f5c6db8fc.0.tgz","fileCount":40,"integrity":"sha512-LxXHC0hlOcecNL7TSWNKaX6ZRiruOsA5LdVKmVtKGw5tCbkvbH1V3GB1j2mlpsBTG3/jdEFflICq1na/Wf3NSA==","signatures":[{"sig":"MEUCIBkRNmd+NmLWY3URhsQkvAW+ctVeomIHkB8SpT2W/f/AAiEA8I7wfhf9CfEL8Wxa9UMKjAR7P9QWK3uxQO2FzRKFY40=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":496389,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgeIAuCRA9TVsSAnZWagAABbIQAI67NO/JYRytT4TDOJs4\nNJ+pyvaZXZA7YRRVDDiZPvtrkByJU9UMi4MUiyJ2l+Cf7/K+USQ7yL46me4b\niRxkWeNQ2vGSjioS2sufaJS9Gmwt3m8r5NO3QYXr6QqkOWoSXjmyJod3EqrZ\nIjmzwkIv7poJwoaRsrv35CasXMJn40gb/LWQetma8m/DuugxPgWM2vKNaGHn\nro5dhWx2uh6e9rV4th2f3HJ7466MKW/oj4gc4nTAg0fphUe9UhHkKVg02yz8\nLKUB+/JpB3JjOi+oYGeywYgC+e98/FRpgSEtKwVpt5oyqELlG1yx2CFR9baM\nFG8yC+V8ivRl6AVJJf/koHWvhJ797tNyd6u2TKnuqmOJqYFuMof0wQm8svr9\npsIRhQvKfg8ymLp88GxmsZXQ5KJ5CfvZ1Pe8GTJo7VRgPRLQhnsgmIuNRIlN\n0b0ugcvhPC+7R+KA981wXCuTfvTFYWE0ii/acziLEXHXh/tZE2blniBoR+zn\nS18UnzDBgXq9cF93zUEnHVf4SIwpsSIwhprpFTEIYFyr9Aph7FxBN2f8VKmi\np6+1T4vkUWXbM687tJyHoNDTsXRotOficcB0R0MnswMVmY1vj7CtwnJh4D4h\nsc6gG9x5YsCKDwxBnMXFMGC25P7B7wANfizMXrIeakDMdXRXHGXf8GKAPeXk\n+lFS\r\n=WSxT\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button/styles\";\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.**\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n**Note: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.**\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n\n**Note: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommended to\n always include it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color-or-map)` | If a color is passed, sets the default container fill color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`icon-color($color-or-map)` | If a color is passed, sets the default icon color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`ink-color($color-or-map)` | If a color is passed, sets the default ink color to the given color, and sets the icon color to the given color unless `icon-color` is also used. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color-or-map)` | If a color is passed, sets the default outline color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web 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/density":"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/button_11.0.0-canary.f5c6db8fc.0_1618509869501_0.16234670854277566","host":"s3://npm-registry-packages"}},"11.0.0-canary.3793a3143.0":{"name":"@material/button","version":"11.0.0-canary.3793a3143.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"f9abdc40dc40260dd0dc74ded880ecf2f4ca0b8d","tarball":"https://registry.npmjs.org/@material/button/-/button-11.0.0-canary.3793a3143.0.tgz","fileCount":40,"integrity":"sha512-TIk7Umyvz7vBKPMMkHCfcleYpjSdFi7lcCiGfOkcBTvz3SQPcZYSR7c5TKw/yIFU+TLtHULlzG4fQzn/Ka5Zuw==","signatures":[{"sig":"MEQCIHh4mvnCP8MIg2Qhj7069a80bkg/I0/VbxLVRvceKwrPAiADE7mNX+srxARll9zr7HcW2YCq3MBxM+Aoz5+B9bGUgQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":496389,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgeIaRCRA9TVsSAnZWagAAuAIP/3iTBNJvioPYBUeINJf9\nHxQd6nvaqK28j8eS6n9JwDmdh94TJFL411P5MI22/xWkf+F9rVoQR0OGhZCr\noAGX4Avl48yw/9D10veVQUor5PW+ltxOVTK+507wTytyDXb2nDdcgIWoHIZ4\ndZBed1dNjEoHVngQZMus5x2TF6WD4qDsLXL5BtlCGZDaGupw8oMptPB9SCZI\njRyZXK7GuAxk8TFP0vgFCq0ehAKiuy+ix2N9qt9nwLZrBpaRnXJO2T7FhiEv\nQC81S/jeNdCFydDyJvv3jPsICO5WF1C/NxhgX1lpd0xYUh+/DHl0DOmVjSLk\nlSgpG4p3yQqqUv5ciEcdw5GqsZuQt+UOHQ+GYgJA+ImcFlkLCkSrIg47YmNw\nrjOPAkoozZbJL6JcqzWYGAW7T9Egx/9tfAnxSmm4SGV+3JyTfhPvB/pQMFoG\nRjl3GKJ/uQsWGhWDnCG5eK22V8b8oM46LwbkOVfQAnKw437NuUSZnTlHl2zO\nGpEBP2AQv+9lJY1EtJyHiYhaWpRoZf6TEdQ50nmK6OZYrNIXokk1W/1o8u4K\nT2QuGQdWTRuGzVoR46uGmjUWKw0nJD7LFIFU/K0Gn8WnJsbugz2vVV6ZW9nd\nBNx0KjfDXk+ceZ+eltLHWRuzPL/aTSSvDrBJFh0lDhtn4oV+QsA34MzfVJNN\nWrsT\r\n=n5xL\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button/styles\";\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.**\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n**Note: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.**\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n\n**Note: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommended to\n always include it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color-or-map)` | If a color is passed, sets the default container fill color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`icon-color($color-or-map)` | If a color is passed, sets the default icon color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`ink-color($color-or-map)` | If a color is passed, sets the default ink color to the given color, and sets the icon color to the given color unless `icon-color` is also used. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color-or-map)` | If a color is passed, sets the default outline color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web 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/density":"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/button_11.0.0-canary.3793a3143.0_1618511504837_0.3544153749468839","host":"s3://npm-registry-packages"}},"11.0.0-canary.bc104bae7.0":{"name":"@material/button","version":"11.0.0-canary.bc104bae7.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"03a237dc68ec0bd99ef3947ddb71b84ead1ba796","tarball":"https://registry.npmjs.org/@material/button/-/button-11.0.0-canary.bc104bae7.0.tgz","fileCount":40,"integrity":"sha512-w025dM7aDtQ9BonVSZRrhraV6Ms3PxZjdTtn9LWdioegjFOloxvNkzd7NdCv+YJ0wRat/WCCpxEKq/9eQfRRsA==","signatures":[{"sig":"MEUCIQDvXU1HPPZ1rmDL7mdCWzELaQU9M3B9ISk/Bg+WcUY5DwIgcxsj7qCqNe1XI/WOaMCDMGz0+0tw/fPLOcSqu7nU2N4=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":496812,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgeJgUCRA9TVsSAnZWagAA8iIQAJwjZRsfR0U44+BM7qU3\nA0eXkys5B4Mk+m7OOXw0Q/Wc0GDFUxTg3gyI9wolQG2OcVZT4DS8WBOGFuzQ\nV601opiXG2gfP/qHVJX8omI28Xu8veQh/H2Dn81jzfa74rFfpRHytWNAGKq5\nIrLgW275SWjarYeemxW8rR9KBYJb51fgjEcOWuWqHA8kY+QX8VTlHAxy73ah\nLiscc19ySziqtJtpOMSkvCYL4KQC3dNfDVPNpQ9T5xZOFsR7Ptn8fp5lh1xR\nEAs24awnqBqd/6CB5kAlsGr/+oSyx76IHvLrjPkkDfKpPDobjnE1Ii7XwsPz\nRf/ikQEaDQWl92BgU4BNkYfGdeH/S1OYFalSuQnf90EV3Fo2RWtkgBpaFaE5\nSJg92ygSSsQI8RFbBFArwAneB3omvBDrxzVAWj3wJbz3+JZsuKKJMn3DjmOy\nJBuLtLs00HA9AJx9YHTXl71yIUTxMckKcKRq1K+b9N7aafdSM4sL5+fvcpDx\nAG3ErpYmhsmh0x8GboVlWJdAzFbUL7iO/0zsPxdIS6YxfyzlR4PGBSWyaED1\n+gxrWAnsZSszynI5OipegaaW1UELDKYnu07IQMahBMPG8Oh1dVpJWTg5Yihl\ntr/f3GxyG5r7fym6hQI09gL1mNLRGFX3e9KhTPo78wKK+rqabhELp7ddaIJO\npG94\r\n=qR7P\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button/styles\";\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.**\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n**Note: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.**\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n\n**Note: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommended to\n always include it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color-or-map)` | If a color is passed, sets the default container fill color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`icon-color($color-or-map)` | If a color is passed, sets the default icon color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`ink-color($color-or-map)` | If a color is passed, sets the default ink color to the given color, and sets the icon color to the given color unless `icon-color` is also used. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color-or-map)` | If a color is passed, sets the default outline color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web 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/density":"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/button_11.0.0-canary.bc104bae7.0_1618515988310_0.47266879990959443","host":"s3://npm-registry-packages"}},"12.0.0-canary.3f342c3f4.0":{"name":"@material/button","version":"12.0.0-canary.3f342c3f4.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"b61f7bc39195ac3efd134faaea451e37d19ca998","tarball":"https://registry.npmjs.org/@material/button/-/button-12.0.0-canary.3f342c3f4.0.tgz","fileCount":40,"integrity":"sha512-POBQeK5zqwZIhulKqLnkieOcdI1xlPYAOwakGqPWWIBVpUqs4yO+L7FMK0A7KJk7/ZQCTJSXupZpffh24aD8aw==","signatures":[{"sig":"MEYCIQCY+eqWFIwIO5+BMqdp08nFzDZoauEvFL/JGhGpBtdaJgIhAPWO6LP8fHu554mBV2evauq0mMoNaEDSk0v1mtrwrwQs","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":496812,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgeMQuCRA9TVsSAnZWagAAQ7UQAIRWtKstp4AyHKMX7vT4\nI5HxIS3TncvxFS+4Eeg76RO5umedGeROBJ7oROiwV6iURELXatknpK0IKXJr\nB5wlll259BZNnAtEYBnFdi2gLN8Zo+CH+LUVIjC2HudV51YbgiTjz4U9Oa+C\n1J5wu5fIYgNh7F/JEyvgooQo1AkOGUJLqfpHvN4T4X9BH9e62d1lXwPbopqh\ntpw2exrnW/myI4DbSKas5ZjOg02rEUCCZgdilv5iq1j8ZUXtbyQQT1YHt9AD\noYJZWanqYLWRbqfNPGpnEBM0srY9yymYbPUPEdk6D2v9hFu8M3xgx8YPwkn4\nNwoLCLOdCUCTViz9vJ5qFwP6iBJdtpkZ1Y8NfmpY/+yq9Ia6ApEKZU9blCY9\nAQ+6yN7I66jAvqqT0HR49BcoxtnIWaj9Y4kwup1y/8TEfX2G4dma/fn27xJ7\nhpgJ2zOjMvMg2FIz9vpIpGXZ3ZMuGeAOQuI/hEODDMW3qWy2suIdwLJo+yQM\nwGwJta6bWVK3aylrJJRQbrP1OQ1ZqxDlXewjB5CoIOek2zqcCT4soFsvnM16\nFGiXNjEzXbmvHMx0Gc0TQ8MykXHWU2MiOUMAaqBZGzv2IGatpIgjnsdYG7mq\nmPlinC7ZvBZ/Pzf0WpbHa8ZQCibzZLwez951PoP+layuG5W1dmL515XutJ+s\nFvCc\r\n=t0ov\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button/styles\";\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.**\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n**Note: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.**\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n\n**Note: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommended to\n always include it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color-or-map)` | If a color is passed, sets the default container fill color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`icon-color($color-or-map)` | If a color is passed, sets the default icon color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`ink-color($color-or-map)` | If a color is passed, sets the default ink color to the given color, and sets the icon color to the given color unless `icon-color` is also used. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color-or-map)` | If a color is passed, sets the default outline color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web 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/density":"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/button_12.0.0-canary.3f342c3f4.0_1618527277570_0.26513241508996277","host":"s3://npm-registry-packages"}},"11.0.0":{"name":"@material/button","version":"11.0.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"dd9099ccea2bc095ac146ddec14ebcd21a22278c","tarball":"https://registry.npmjs.org/@material/button/-/button-11.0.0.tgz","fileCount":39,"integrity":"sha512-KqqxEcsj8jBkV1yNEiPoHiB1AJBa/1OGm7H+hF+C3RUTIrRLew8IuRL1ZY38ukdHvhno1/qmVMKOs6ui0mxjlg==","signatures":[{"sig":"MEQCIA8YvL/M9EM8tB4semJy9XA5AfY7AjNZfRXXeqWL7Q6jAiBumR4egQWu42a7OgF5Ri7MFyE7GMUYa5cPg/fwMkY1Kg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":495915,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgeMUlCRA9TVsSAnZWagAAr7cP/AoUM/rpU/xp5ao7MB+G\nmQIZammk0tX9/ZuVPtQqlLB8bRZ/l6rENB/KxeIhvvONnMDLstfkMb7uL1yr\nlCe8XncMTWDkpCErM+pjUs2KTrc284NfX9e/aUHJSUWoWVeiC9FyhY3xzB/N\nTfmOlS2Hp9wDn7cMyjPKgxktov4K5rPELzrJlRk7bdb8Y6UK4Ivp6fF+b8BJ\nSnT41OBhJB8668nG8r3YGkTWSiBCdh/V+i+JjNutJTPSga824WaEnr7rxa2m\nfJ3KsyV6JQRwIJ2xF04SSFtaQwNidH/KDyxPh1tWw6wNQcGa6vvsMd3PWedy\nmpuct8OXeEtP7Leo8cqtdfws9R916mfgl73lwrL6Qd8uoXYo8srB0P9a9lmC\nPxK87uoNPkFcf1xg/9eJ6/TgMwLia0Gj62uvV6pdnbkoF4kfMqz/xHx8of50\nt62j3kEmRvQX2an0+l+TA/be4d4CMqdNAIen0XidbFQeHzth4K+X9N3fO4ka\nSkdJvQvbzPLmLwayafcrc9V1yvSvvQlPGEwRK4j5L9D3/yGh5HsUe9AswMq0\nTqgA2gMQI8p0PW5+ys/gOTWGdRf+G99qkkksTSxiajt2cuorGmjLLDIih2TQ\nFcr4aRgQqNocs59NllUFrXe6rOeMoJ8sycXEupVWYmZivdq4msZrNdpidCsd\nmZX2\r\n=SYGk\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-button"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web 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/density":"^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/button_11.0.0_1618527524643_0.21425649369161115","host":"s3://npm-registry-packages"}},"12.0.0-canary.2ebfc5374.0":{"name":"@material/button","version":"12.0.0-canary.2ebfc5374.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"d5d1056464f52ebe9de154ff6e865d31ee62c3df","tarball":"https://registry.npmjs.org/@material/button/-/button-12.0.0-canary.2ebfc5374.0.tgz","fileCount":40,"integrity":"sha512-tjJwPYDxOUGMm9ppW0Sa5gtYv+6N2gRUyv6Lq693ecnzaCHP9olvDUrCrnshj1yC+FYF9AuIOd3HBN3dMpIuyQ==","signatures":[{"sig":"MEUCIQCYKSwwwTXluq9NCOq2TyFGXqrvU7+BUHRuJ0agAGdLqwIgCoNg+3951X3XziqeTLLx27leF9/mt7m3R/z4qXlcpV0=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":496491,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgefdnCRA9TVsSAnZWagAAaXkQAIUJWFqBsKrZ4nYmP48N\n18eES9xZ3k+egIzEque8NnDs+RysSdFR2Uyj3XNlIiuzy2JB5Z9G7JTRPieo\nVru+G2Gewy+C0meK4lGIFwGpHtCPO6OoO2v0rRFU/iYrYfdwtn+BGLRjSK8J\nsEoHwk4OslNzcwpvj5gdZ/3otB4ltQX496Zf/3jouj+PSucBkOG6PWzzPyoB\n4uL94mlqvNVHA8F8gVkUjcRmG1+4FsB+sNSbyypP/3A2P1SALpdZbCUoUQy5\nbizDqH7FycbBsxc3JItAEe9Ld90XHzWyyyW2EMtXUVJnZOdMP0qeKzIMSG6U\nWEiSMVZwhvOgSSBxw5fFCHrK4fABDenh4DKpGvl1Z+6HZbifnOQX9JZoZ5J5\nHmCQcLkmM7PK9Ad8TEs7A9VnOHkXIVoHO969V82fms2KpFb40amJo4tjc/Rm\nguXMOMi5hfHMNX9TyX35Wu/xsx4RSddj25kR71vHqoqCWY5j9j1awJHS3ZdV\nrM2A7ErnZHxw4IvmYci+LiRfi9KhnCqHFWmu6I7HQEufWXVCyU47feSL5KLl\nVz1aidOasivU4s4mYZE6ZcdJkNBsaOSdwAiyZWRNJzFazwBSu5oATzOzqWme\nczZE0KXiZTkNdSXa/oU/Gp0l2AhMqypuOKKS5UncyxENR5So/QAGBRqwaiuY\nlF/p\r\n=3Wsd\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button/styles\";\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.**\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n**Note: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.**\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n\n**Note: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommended to\n always include it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color-or-map)` | If a color is passed, sets the default container fill color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`icon-color($color-or-map)` | If a color is passed, sets the default icon color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`ink-color($color-or-map)` | If a color is passed, sets the default ink color to the given color, and sets the icon color to the given color unless `icon-color` is also used. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color-or-map)` | If a color is passed, sets the default outline color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web 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/density":"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/button_12.0.0-canary.2ebfc5374.0_1618605926498_0.7882335368858144","host":"s3://npm-registry-packages"}},"12.0.0-canary.5631828e1.0":{"name":"@material/button","version":"12.0.0-canary.5631828e1.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"a4fafa214037d2ad69c855a90d4ab3fba55a4155","tarball":"https://registry.npmjs.org/@material/button/-/button-12.0.0-canary.5631828e1.0.tgz","fileCount":40,"integrity":"sha512-umuLBE6VQIsjVAunkr2cKMCBThZft61GxHMhmTnHuZI+73tx4cD8463MZPDAkYThQNiWuTBQgm6nPXAXkX2Fbw==","signatures":[{"sig":"MEUCIQC2VzYLZmwSY+xHxPtxA6PmPKNDUu6h8Nkf0fes5eywiAIgV0ABIAzjF4uWEuCS78jrGsLSvi54otTzLGmXmWF/Lds=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":496491,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgepJ/CRA9TVsSAnZWagAAxP4P/jQqjSdAD5x2wM9afqpu\nj/dpQSvwjtkvWBOojZwqVBcGebBgOF0l8NoL7Q5tQCqawESu0EmjMznGf7oq\nXcWL4IiAKZxFTmJy7Ecdr7LKSEIzjsZWY70X77WrWsgTkk3ccy985MGPc/1s\nx808Z9Z7XJFaluTvXYY5YaOXGrLN3zHpXUa4Nu8LF+WgTKmsv5S0nzjZ86Ao\nzv5Uox+Opj5cPnv8Kb8xskXLj1bxPkUZ4tSVAq72D5d1kZAaBMCrqq7j6IU1\nUcf3ZdBgYW62IxNumlkddZkK8vc1z0d7Kb+r+SUvBFrZuXF3V5bviil+hpsu\nnfzA/UOODknhGQ6YQT5N+Z/qEXwmT+vwgV//kXi4Lrgk6zK8b2jn0lO64SoI\nXVHokMjosZRRKgr8anTIp2R0QDT6BPIErGgnx1A2RXzh7gEvPhVPzkrY6yhu\n5ZPdeEvisINwMCEug65WzUyAAF9novmcs4K5vtjFbdbbpDnPTEVo8wjs7XLJ\nFEKuvxj28MGkmZdvaqX3UsmJ7vEcJB1voFAX6Y3qHcHxLGjy4rqk5FoZQLU1\nLIjt8Zy0DTSnhpNgHTQXuYGOf3dT9ClP6uDaPkPypz8G4rd7dxsqZcCrpEpq\nAvNWeXlpiyQkeNCLGZdVqdE8PetV531Mw9ZckCHdaEbpV8Pa/Tc8eNxZIDh8\nZ9kE\r\n=gAyc\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button/styles\";\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.**\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n**Note: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.**\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n\n**Note: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommended to\n always include it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color-or-map)` | If a color is passed, sets the default container fill color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`icon-color($color-or-map)` | If a color is passed, sets the default icon color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`ink-color($color-or-map)` | If a color is passed, sets the default ink color to the given color, and sets the icon color to the given color unless `icon-color` is also used. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color-or-map)` | If a color is passed, sets the default outline color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web 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/density":"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/button_12.0.0-canary.5631828e1.0_1618645630973_0.6089489369372243","host":"s3://npm-registry-packages"}},"12.0.0-canary.bd685395b.0":{"name":"@material/button","version":"12.0.0-canary.bd685395b.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"97aebe6aa465d063534160eeb30e1a344231b52c","tarball":"https://registry.npmjs.org/@material/button/-/button-12.0.0-canary.bd685395b.0.tgz","fileCount":40,"integrity":"sha512-Q0Fn/pI3SvIK26JoqsgjM2Gey5m+xFZwwE1ltVjbF3q7ZozBkrNxWi1PmNLA5E0qjG/M0o8/IMDyE142/die/g==","signatures":[{"sig":"MEYCIQCA30x/cuLJySRdRxbb6UaZBYEg7bNcmVj2bhVaAHqCBAIhAIebKx3i+BOnboWs3GQJglEJeBtjFt8HXk0rLnORMIjY","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":496491,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgfc7lCRA9TVsSAnZWagAAZLYP/1zehP+Wcskdf24F8Z5N\nboOPpzIcxynvdbL36FBg6t9PbWSN9756DeYKBSM94Z++gNRTU7zxCmwAvic/\nH2CIXBBdbvpDjhW8D0gZ0IkHKbHAKgeK7Wu7LexxSdVAbGvoIdk/Cwztthkh\nr5Bjw7dJt5ZLIrIgshugBYhf6+rnpQyeyvyZJbMuqDWE6lTo14/3gRR9qFtl\n+MP/jLyUyuDQEMITflUdxXWU7ThTiyoQIi5lAGcLCNjFiDZ5hhx3Dk5Uir8D\nHa/ah0Y+QyGsjwuVB+Kg+XaU5C3NytfWxU1+mI9UznrloENqfPbgf6PPfTjP\nJdTAeqsZJwV1XF64VRDVIeqlZB/hGu6IESTl1tOex3BIPb/ONxB889K4cgjg\nWD6+HRRCV5J+Glqcf5ShS8qNPe02heSMWTkN4egDb0Gy2I2wj1UY43DD13jg\nAIzigP5mggODERfWoFnsZwUXA7JcOpQoN+LJzuKdr4VhXBnZGqfkbYzmsqUX\nXOKuXCz2SMZlYKnX3+NnXpT++gpfLEYqADPrHPx6wPitF9dKemJ+nfHcmrVf\nKhqWD6FL9QL9c4VlPk2mwhGqIyKw2ZOUKhWQ7Ft/vluaJWN/NvSGnqX1f5hm\nXEQBZwDpjf7iW6OTClKQ5QJahUyTXw0XstZCO06NHiyD8mFQ5GvAk6gqXUih\nEaHB\r\n=ozUN\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button/styles\";\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.**\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n**Note: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.**\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n\n**Note: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommended to\n always include it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color-or-map)` | If a color is passed, sets the default container fill color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`icon-color($color-or-map)` | If a color is passed, sets the default icon color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`ink-color($color-or-map)` | If a color is passed, sets the default ink color to the given color, and sets the icon color to the given color unless `icon-color` is also used. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color-or-map)` | If a color is passed, sets the default outline color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web 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/density":"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/button_12.0.0-canary.bd685395b.0_1618857701259_0.8136870721524367","host":"s3://npm-registry-packages"}},"12.0.0-canary.b52196498.0":{"name":"@material/button","version":"12.0.0-canary.b52196498.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"380f120f8bec18188fc75906cb72e6864ac3257e","tarball":"https://registry.npmjs.org/@material/button/-/button-12.0.0-canary.b52196498.0.tgz","fileCount":40,"integrity":"sha512-6TeIBhjy10Cbp64GvDWYbE0yW5KWpYkCMjZJDWo/8hthqTavwI5KQkrZYKzRbq6rMnZqKWR7igFb7IIWRw2ojA==","signatures":[{"sig":"MEYCIQCdQsh4xvTKR2N1hw5j91WdlhGNIBgskqOLO3Vu+96asQIhAMrh+mPN6QGhjjexkLL97GCL/vY5SL9YlMnziI1z5/Cb","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":496491,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgfeDTCRA9TVsSAnZWagAAOTAQAIP0qU9Zt4lIMhkQFGg+\n/gF8FP66malnKpMOZI5NPBgiYWEka/j9ajQcODitWuxPCrtz5ZrmdB0gC8V0\nzEkY3p6QErZfgMBUGe7oVrSF/n+ECroJwF7dvGDkAxQeQxm0W1QofSI0tDoC\nP6xsQIkPGJl0APipVR80TbCk7BOnfSfg89TW0uqY7KCm1H3N2HH+A+s8Dzux\nVvcmiGokxzqDcPoct7uUQFNeqZA6rncmBXv/wy4VoQJ7s2V8B5pCKd9UAwL/\non0aLpufcjtcBRjHjGzFEVMaAB5e4Nl1mrWSG1SVBGBeTd8mcMEtNjXjXiBB\n14qZdL2zaTneqxdpVUSKgF+WtkTylY9uelZZD2g9AaYso5Imh3rdyZ4tgXkc\nQ3aekuquPnQawzJDYEx34cLRKh0fv2p9KYnBrxBZVR4i9d7hjwfeTkpR1+B7\nFjM7mmym6WCdQXdqpySxSTNuIUEnn/l1PcIDjCmHToZEml7XLHSwf75NMJt+\nduqsC4mJvvUzni5uQ0bS2YfzQjMqikQod1UW3vzkP/yH1heufXsKTpRI+y5B\nZssPVoVP+wDHQ+j2ikWDEKLlyNbErI1Ajk61E4gRYRbqnWJuIr+Nj3JZdy6a\nf1LtFZyda6S2pN8N1hjdaNqloANZZ55R2hb2+9mIdmVzbtdthO1gOefWZ7Bh\njeMo\r\n=4EOh\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button/styles\";\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.**\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n**Note: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.**\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n\n**Note: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommended to\n always include it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color-or-map)` | If a color is passed, sets the default container fill color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`icon-color($color-or-map)` | If a color is passed, sets the default icon color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`ink-color($color-or-map)` | If a color is passed, sets the default ink color to the given color, and sets the icon color to the given color unless `icon-color` is also used. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color-or-map)` | If a color is passed, sets the default outline color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web 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/density":"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/button_12.0.0-canary.b52196498.0_1618862291325_0.41653544194940495","host":"s3://npm-registry-packages"}},"12.0.0-canary.8ba3e298c.0":{"name":"@material/button","version":"12.0.0-canary.8ba3e298c.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"589a8dd8284e83edd5c93e0299dea6e255f2421f","tarball":"https://registry.npmjs.org/@material/button/-/button-12.0.0-canary.8ba3e298c.0.tgz","fileCount":40,"integrity":"sha512-ouQZB7Hs9Dz/VVbgscj3+KfegU7ng1DB3dZMJ6sQLmSrXMx7jp6nZR47kox3VEuae90T+IXgUaGK5CnabA8PJQ==","signatures":[{"sig":"MEQCIBHoK+Kd9Oh9LizhmG3MkCsq30htkVRExLUlje6xI++sAiAge4F6cCU43Dm8YqRGLLG5J23rO/TUOnUHG4eA8pHPSg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":496491,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJggDH6CRA9TVsSAnZWagAA5c0P/3spXQpB8aMBw8fBChmp\nOhjryn89EkLbNYXCm5zb/VsifYrDTRyYRvVhsDIDEvjvRGtUDgvoeSRx5pMy\nuQ5wugv/9lLVEp2S54OXFzG7Z8iW55XGSLF+RdhJIrgoHqdg8nxQyMtTNZ2F\nRKvC8VSH7qbpobEgszJBBaZe0b/pbnLD3r0aggiFcI75AY3YqWv3cNNPLf5S\nVBI4d/sb5BYPrnCefthEbWxNzgYVQFmZ3RvtSRyD5mtcg6TR5336chfSJYxG\nzprkGbMbmtSIb0T4p9w7BKz/LbjS1kL+bjCeYnfGRKOSkYP6BynlpSOMMLcv\nGMI2jZ9ZEdwfmEvqZz1/HPU+TDbPVXu4SN4040dHrEKkzUI/DQHjZSrm8bs2\nxqCU7TgOJ33gOPIih+ofQ9LnRhz+hh5Zxjv7Lot5T+rLaoAgcuz0gP79vvEa\nZf9mLG4GAkE410U2KcDZORRrCdi40KudV0HOSWWRGTHLmkt/VTqhK5QW8RtP\nga7Diqbh1gvJH4vHmCv8eg0wsU9ggKqpC6QCYsLjSh05eJDX11jk9Xf7cNK8\nakgG5iDDqY4yQX5kJxGqwo50PqJxU/VL1SVZlAoTKvcDWv4rkDbapk7IVCuy\nKjh3rPHvw7wQXlZfvjCJrzF1teYd+FX5VSGNW8TaLij/ip+hEoxpfhslu4e0\nlMt/\r\n=YWN4\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button/styles\";\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.**\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n**Note: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.**\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n\n**Note: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommended to\n always include it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color-or-map)` | If a color is passed, sets the default container fill color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`icon-color($color-or-map)` | If a color is passed, sets the default icon color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`ink-color($color-or-map)` | If a color is passed, sets the default ink color to the given color, and sets the icon color to the given color unless `icon-color` is also used. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color-or-map)` | If a color is passed, sets the default outline color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web 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/density":"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/button_12.0.0-canary.8ba3e298c.0_1619014137893_0.35030923916748713","host":"s3://npm-registry-packages"}},"12.0.0-canary.c629eab71.0":{"name":"@material/button","version":"12.0.0-canary.c629eab71.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"e8808a1b43cf5cd5c152da1871afc3a8e2fb7c62","tarball":"https://registry.npmjs.org/@material/button/-/button-12.0.0-canary.c629eab71.0.tgz","fileCount":40,"integrity":"sha512-wPvPmiJ7kTWQ6FtRiWWlhmr7Z7t/Ncn2Xl4kBIIE5LHf1VqwWlTYsCiCIZTX90MX+RDlpdiaGLjgaQH1ilJNqw==","signatures":[{"sig":"MEQCICUNTPUpiinGi2OwOJWU6EtD1CQEmayVSCwD0VfcrpidAiBnpcr9hzcZqeTALrBKP1oPDmdTG8x2wKK9dJLMQSJcAw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":496491,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJggIOwCRA9TVsSAnZWagAAzncP+wbliGUUlB3tn1dVt6yW\n6mp7vJyf/EypzD1bNr3ukraFDP6xygXEQyV2sZB1RTeqNRIiFzbl7JsaiZ96\nPQ8mzmK0Fv4f3u2OuHTZpsUqmfR46u1jMH03GknvzhS4rR/a9+0fIoMk6/pX\n/Tz0A+crddXtqJ8OxSmGJM0N0S9pKy0wu3x/dIwZWhDpmzISUnbOwlrk65zA\n0DfRwMDRD3TuT7nvCVP20Z51AUYCzqmGOUrDcCJkMSsTjW8kxJqTNv7LPhP2\nq+YDiAra7oBbTVr0yOZo58zv+Nh3D+8n36WdQ1LgsiTvOhTu+RhOw2JBoqmw\ntaf7D70ZuRXud2Zw4vHTPgA90gGXdVzYoFrOL1lB9LHKKZeDk7oFAVxJLWyE\nOwRa4ScKZzHdw6wuwq6X/G/3Goz36+9od9lWNsA3fgu24oNttznFy8rs852r\nHg0GcL+2jbdcINyueqOa2OPkuMPm14VZL9CHp4YZEta34xu16LSodxPgsPrr\no7G4CPrRKe5BFx6AIbVBX4BYjpu37sKpCWMKSWN1p6xsLxHlfnjsoM5mfMYM\nYcZKvC5l1P7tNrs1IDIPjWhd57gfMMpMy3p/kk/CJf7VgWlSpgkJXGaTj0ZN\nzYEOR7wA3HNwscEgyExzelBQJFY0QyubXzR/uXpZiWxWneQwATI6/8+hG45r\n8C3a\r\n=b352\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button/styles\";\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.**\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n**Note: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.**\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n\n**Note: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommended to\n always include it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color-or-map)` | If a color is passed, sets the default container fill color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`icon-color($color-or-map)` | If a color is passed, sets the default icon color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`ink-color($color-or-map)` | If a color is passed, sets the default ink color to the given color, and sets the icon color to the given color unless `icon-color` is also used. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color-or-map)` | If a color is passed, sets the default outline color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web 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/density":"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/button_12.0.0-canary.c629eab71.0_1619035056250_0.8722259177440905","host":"s3://npm-registry-packages"}},"12.0.0-canary.8ace3b810.0":{"name":"@material/button","version":"12.0.0-canary.8ace3b810.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"3895caa92ee0f58f7c57de14871f97ea2696301e","tarball":"https://registry.npmjs.org/@material/button/-/button-12.0.0-canary.8ace3b810.0.tgz","fileCount":40,"integrity":"sha512-hedDf2eUeDRKTyGjaryPVx1mELhO+kkBBfNv3M4lxAa98xyx+SYUvtrWvXzEfIm5WYlewisjfmDo17wk/7InyQ==","signatures":[{"sig":"MEUCIQCG9kkRzOH/+6HxiQupPDKaTwavvE5nFuiFCmvk5a2KSwIgXWXOlmTrXlLwdoaljAJZTt19CQ0sXgTTdKrxR8OgTGc=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":496491,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJggI02CRA9TVsSAnZWagAArSgQAIysOVpF6CrA8tz9iQVy\neaYhJccPpMzwW9TPBYd/C8IYlGBeuwEsFA9xbpN1OK3RlrTPRvlIsi8GVmWw\nf8+9RL6WUOQXbJcTduFYRNOy/YxTb+KQkBA+lcGKP+7qcQQO6b+d3T8hHzRm\nVVQy2VVLdW77Z7+5YWSu9LSBBEvQZstw1pKFqOYYQClelsqXG5Rv0rB6A5PU\ncPsMtC3ntsqaDEtFjtKYLasP0WfUfueBgulUK6PbwZte+CTLeevji9+lQyB/\nd0AVm3PdlZnkrINYiwk3oFORfmz10Qs02L9lCTQIMiyxv74NlvSa+eLnsLeY\ny742eDCuYvdnaDA2dAZRVLe6ZeEYCNeiWo5JtJhP9Vi1X9Smm2c9ziR0i4PR\ntyJzvAkuRMDK+CKj+XbqjO9g6g9pz0ez2oJW5wyZEqu/oECyZaOsPMg2bc72\nlLZD0aUCDz6DUF77jXG3VckaaSdbxzaeR+JnKggNRzXsX/ly7Ps78u2Vr2jl\ncMW09Uz26oK1eWlvPCcBqJorTtRBhE4l5vDuIsH8ECmgDJxl1VCSDkI5uXjA\nyid6zS0mLgeqenBwPNswQ4+n/vR1TTJNHO6bVGPdrSOFl6gDZKSsA4CvUlbU\nQVGp7cChUvM6p0m7F7FOBTSto68OJQusHnePzx2R1BJL601/qsq7UCKAvdvf\nk8AN\r\n=T8wM\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button/styles\";\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.**\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n**Note: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.**\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n\n**Note: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommended to\n always include it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color-or-map)` | If a color is passed, sets the default container fill color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`icon-color($color-or-map)` | If a color is passed, sets the default icon color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`ink-color($color-or-map)` | If a color is passed, sets the default ink color to the given color, and sets the icon color to the given color unless `icon-color` is also used. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color-or-map)` | If a color is passed, sets the default outline color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web 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/density":"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/button_12.0.0-canary.8ace3b810.0_1619037494140_0.5317758825963186","host":"s3://npm-registry-packages"}},"12.0.0-canary.70beaf42d.0":{"name":"@material/button","version":"12.0.0-canary.70beaf42d.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"5426a6633cf61db118190d1939b624bf75e46f72","tarball":"https://registry.npmjs.org/@material/button/-/button-12.0.0-canary.70beaf42d.0.tgz","fileCount":40,"integrity":"sha512-szoYI08eKGlhdbMj9tyu8R9GfqVO0C4fi4jJj/ZUqLh+z7gEzVupiELgA5oOfWbFkytGJTc2NpH+SrIpVgwQ/Q==","signatures":[{"sig":"MEUCIAyS/XIdO0cPRy7N6/6v/cgPRlsd0/RhOEWz0LUOtNogAiEAggNcIKg0DDL0vs8YDUPN96aXxpQWLHqKoD8NU5DhN9c=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":496491,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJggI/rCRA9TVsSAnZWagAABdkP/RHH18U3SnDO3RqF1zxp\nON8qPU4kId6NP3y+ccmZd3ZLNrv6Y8ejQ6T9Qh8QITQ7xS/aqM1yeu2qpXae\nBUzDDYTxyoU0sQIohgMK9/QC0AV6rysv87faLZ4+O3Y74xguVlKMu+MavwGc\nDovm9rGd4HLniQ1STbEPhhyTpKJGZhCN3fe2UFUUP9VQebfarcp3g1f12lWg\nPUfzwOS98jdHutTsOYndFPBw4nm9TMUFYiiOHzkJppbqCd3MbrtJ0jg+BuFa\n6LdbYld2xfKjn4E/J3uwToadDq5+m4cUNR02iYShQyvWc3kO1IWA2sdOZ/F2\nkYlYksZA7XwC0oisi8YEh208xw5Q5up3oCZeYP5ypckX/Hhu4Aoq708dRsRa\n8nBLNayzL2jdEh+a3O2Vphiu/bzWpK/Jde5Lt2czZQbpkRMvEFYluoeYYyzM\nCDHAetHxnvtbDMTJV+ARu9W+0hGu4sGDwKQUy1HSpkKqUNtlNL19RkHRUOgV\nH0bqNHiGXBGVgQNL/5mQXbG92E6RtFHhe+9IXm3V00FU711kqQk2Otnldt+3\njfxIt8aiJudx/fZQaccyCUfN0ZuE/Z5g3zUsupAJjDTaC7yHqHpnQ7i5wwYy\nr7P74faVRpK1XPtTb4q0MooXjOUnei/BRadzKECniQC+Z1JZNRF/JRR5/6F/\nn4os\r\n=yYCm\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button/styles\";\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.**\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n**Note: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.**\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n\n**Note: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommended to\n always include it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color-or-map)` | If a color is passed, sets the default container fill color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`icon-color($color-or-map)` | If a color is passed, sets the default icon color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`ink-color($color-or-map)` | If a color is passed, sets the default ink color to the given color, and sets the icon color to the given color unless `icon-color` is also used. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color-or-map)` | If a color is passed, sets the default outline color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web 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/density":"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/button_12.0.0-canary.70beaf42d.0_1619038187374_0.20444839889544575","host":"s3://npm-registry-packages"}},"12.0.0-canary.cad489689.0":{"name":"@material/button","version":"12.0.0-canary.cad489689.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"adf01f271d5a3a14feca0195c8912f5f4682e526","tarball":"https://registry.npmjs.org/@material/button/-/button-12.0.0-canary.cad489689.0.tgz","fileCount":40,"integrity":"sha512-q+mu13+ICuj/q2rWr9M+h0zA5GyqYzMBxQOLpUBlMSLCKLFRN/P1bB3PC8qG5/uTqQumukvrK9S+4iO/+hpZxQ==","signatures":[{"sig":"MEYCIQDyrASK8K560PHwPAE+U7Z+GElWucTKomIyImtet268+QIhAJYuSaIUyzmuzwaCngWvAj1O4nDQ6XPjwUw5DDulr9KL","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":497120,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJggakyCRA9TVsSAnZWagAApwUP/3mHPz1ujqZfgQlNG9Xm\n0Csz4SH9vdMLorHClt3Vg4zlSriwoL3Zu84W5yjX3E4IKph49Y82UCqTshQK\nTYMhPQGFbHrquCEc5SDQS7pK8ABdrE86ebxwa7hmlzhlgKnh73VrM2eL0CdV\nMVCuBbuX+FZtNYqLMYITbOgBLWHnnDmzuF7+TZRkdlUALP0escTDMSXJMlX/\nsCPAr6UsP+w+i0wnyHYESIOcL4E7bEmwI4lz/prTOmCGriJki3TjBuh5U8MB\nRPVd0n+Egr7h7bPG+rCOCDRAgBGZxor2azQ1wWXBBr/zGK9FbYjNG/0nDGQl\nc5V7tdtMdFry4fpcRuiZHVkLV/KGEcN7ZT/ZwKcJhm8HUqNpHRqdWtv41AnE\n+O960FHz1SZKSm/K/a2BhsodJ1UCjQB5VidK3KZYv3UcYT7IGeJQ3QPNILA1\nGYaJYOJM3+UYCBRj1eAVv0iHz5A6OP8AeczY9GaBBFn4C+TL5vQcMU+JMCTf\nsawlxlcScZKg0Jd6e9BgA+86s2EY4AYkE5qJ16VmxTmCHDvBjO9zvrQVUWsa\nOwFsxZQaBqfHAlLZEc7B+lI9+RxMC8Ee1qUSviR8JmEG7dkzW+OyLuEWWtZx\n1btCNb66LvH6mn4yyUmHDR039qRHTVkrfTkRlwYmu73OMaE0c1XiPN+PZIYL\nyqWz\r\n=BAy1\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button/styles\";\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.**\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n**Note: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.**\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n\n**Note: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommended to\n always include it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color-or-map)` | If a color is passed, sets the default container fill color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`icon-color($color-or-map)` | If a color is passed, sets the default icon color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`ink-color($color-or-map)` | If a color is passed, sets the default ink color to the given color, and sets the icon color to the given color unless `icon-color` is also used. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color-or-map)` | If a color is passed, sets the default outline color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web 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/density":"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/button_12.0.0-canary.cad489689.0_1619110194206_0.08918866803257797","host":"s3://npm-registry-packages"}},"12.0.0-canary.d928692b5.0":{"name":"@material/button","version":"12.0.0-canary.d928692b5.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"75656729a761982636b578d4d5eb3a0c8fd56a3c","tarball":"https://registry.npmjs.org/@material/button/-/button-12.0.0-canary.d928692b5.0.tgz","fileCount":40,"integrity":"sha512-SqcvI+7zYeBaYSRdY3V+VUc9qzVLINNjyhlqX/qdChXi0VUwhX0UOXiuO98pb8r+CriOcIM5oVSicBz1nCaMrA==","signatures":[{"sig":"MEUCIAWRZ8JmteLaDlDbb4jVzK8+FFfm7BJS9/kopDMHrA6rAiEA+24C058iVoyUq+fIdxlmXKXik8B1LzcPAn+keE5VOIU=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":497120,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJggwU6CRA9TVsSAnZWagAARQcP/RSs04cjAo2tE95IPfVl\nVAfWt75PP4Q7NcfRZA6DNZPClZZ4laFbeDuSKLbzBLAZ0K55RfRr9tXWsK9o\n61DcY7OCP6wOCqb9qTRa7vKrm+lSZUHgRlIHUSEYxEsw6w3RLRQNfFuZRF34\n+1455EuS/+WP3d+Qd6zROCxCSrRFiit3FEcnKxQVgu7ZjxPZkC82WHFGvOOx\nxtqh+gF42sAp+JoDHenXm0pcXY85Qyw+xPtXk5iAVWpxPLBPd9yiejWDoxH/\nN+3TOwqivx9NdPlc/HNS6bpJOouRfyKLJqZDFTkCpDCxaPPCNjYNh5ZGNQTj\nFa4+qp0pN6TMUS11dqh1392EPoDjGsoy8U/tEgHKXQ+L0DecwRNWa1G18bVv\nJAziD9Enxl8p5n7KMYheqrhzoRffasATRKYUGpjURzTlQvi2lcsbCh8lVTIm\nQQAkYiSb19CxUHKmFXWa+62L2VXcmXrgvh7ZhgQYmYBI+DYv2b5s9ZqgR27w\nuzNUpMt45Bu2sDC7c4/0RNkWZPjMlqUZ21vpf3cX15uiMIPls7TOfqGFJhKL\n+l4AqecHPeTFait0NyosoRaTjf5Nsy0/WHvxJuwmZsd0OUiqQVtFS7zylJpJ\nVGkUEL38sysgC+WBFliCkEt9dihjB61aUDOAb8i4Yg5ygDFLwGBGLmPpfcVX\nvfkt\r\n=UEap\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button/styles\";\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.**\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n**Note: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.**\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n\n**Note: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommended to\n always include it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color-or-map)` | If a color is passed, sets the default container fill color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`icon-color($color-or-map)` | If a color is passed, sets the default icon color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`ink-color($color-or-map)` | If a color is passed, sets the default ink color to the given color, and sets the icon color to the given color unless `icon-color` is also used. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color-or-map)` | If a color is passed, sets the default outline color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web 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/density":"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/button_12.0.0-canary.d928692b5.0_1619199289887_0.5935593695164207","host":"s3://npm-registry-packages"}},"12.0.0-canary.8f68de8f3.0":{"name":"@material/button","version":"12.0.0-canary.8f68de8f3.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"df47a0db1b0c5209bf706117f048a2e0547f5cf0","tarball":"https://registry.npmjs.org/@material/button/-/button-12.0.0-canary.8f68de8f3.0.tgz","fileCount":40,"integrity":"sha512-4jyha55S+lNBghNUtgeEu2ZwLh2YJ7E5AjHrdqG4Ob9UOzuxZPIxfQdz4zqfKfv2voNXwrZ6QezQqivGmeqGBA==","signatures":[{"sig":"MEQCIAQ8Z5LzyuS5FhzVB6fdfgan827E9lQ/b8Wbp2fScYK5AiBebuXm9Pysqx7W9jXEA97TEHEn8qalnRngM62X1cGbfA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":497120,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJggw5RCRA9TVsSAnZWagAA10UQAI8xxnUamlZexpbqDojo\n0BDfT5n0rfBisDn2zTe19dnaUccVJ2skZAlcY+Z9gDnGo1KKoclwHJ3zhy5u\ngLYsxLVrqhpZRLrqkl8r2V84AzCPKfAsxCaQluXQZO0IQ+sqR+6Z4eC5KdtI\nT3TADjddbVyNxXYwpo/i0716ilxE50U0Ioid6+WmYkxzy69FgH8vMl3Txx1k\nZc1z+5SGawQ2022Na7BttApkVjKn0vzGI/jSUn4XSvArVNrycBclgif3Ex/M\n3BIaMh/U29EwtyM1QlWUTU6xIzdTtbL5qtHroqQ/RZ/4yRCBz4bOxTQcUftw\nrDI9Em+NmFzqSmLvoaOzyKnvcdDW/RWURlnjEtwlkTuTO9+bYaweWLskFMTG\nsIH/n6UqcVMaYdgbcqRBziv6L89yz87nlcjLi8RAIwPEBgvgSashmyOUy1rf\nTJI9+iavwxb1Yh018wo9ljgLqu+aVMfOI2VL08sFLlnS11Mk048h8qQ9mvme\nYa3/IsqXlcx3o5j7Zl4v5Z0Nk4fMDaSPc89KfYLWoGlK4/ORTQf3rN7cgVPP\nmaibRYagkArla+1i3DNJpW/t4swrgsVm/eVhELY8CrYi/yKmt44XsBgCaNaV\n6aJYdTFJ/Ircw8tuVvFekycSDx7xh2z8t+E734A/2HHuY5hSL5VQEBZx0aFJ\nKdu+\r\n=Xzq8\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button/styles\";\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.**\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n**Note: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.**\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n\n**Note: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommended to\n always include it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color-or-map)` | If a color is passed, sets the default container fill color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`icon-color($color-or-map)` | If a color is passed, sets the default icon color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`ink-color($color-or-map)` | If a color is passed, sets the default ink color to the given color, and sets the icon color to the given color unless `icon-color` is also used. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color-or-map)` | If a color is passed, sets the default outline color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web 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/density":"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/button_12.0.0-canary.8f68de8f3.0_1619201616944_0.9219715990264514","host":"s3://npm-registry-packages"}},"12.0.0-canary.05753cf77.0":{"name":"@material/button","version":"12.0.0-canary.05753cf77.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"0e270da43c0aa5b263b464b1cf31e8291b804c40","tarball":"https://registry.npmjs.org/@material/button/-/button-12.0.0-canary.05753cf77.0.tgz","fileCount":40,"integrity":"sha512-584HXQ9FTItNUVXp0qB4pcxBC71fsdEe4hvdCFYz0fooCn1Ts47f5EI+74jM14KAf7vmcJ6Q0r/qPWxlrggVog==","signatures":[{"sig":"MEUCICOITqvI8E8lPrFRv1js3xG2Q74exe/xYzGukfPacD2OAiEAim0cKn/+9C8mAfl3/AjP9e/e+ijeiyqdOSZNFM7A8TA=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":497120,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgg1ujCRA9TVsSAnZWagAAsFsP/jji1x4+2dYQSsQl4tOb\njehl4HZ3SbApPrtLfFSv4MG//R2MLvUfLBuQyqikLeDZyVcBCtLfs65eVaLv\nK8zVxe9JLgjiSodqStV/QWI1icAGXnAEaI02XJq4pc12pVGAjPSiKtF/oZhC\nITrt2bOlzOu0cpmNdxEFX0BSNPIJHNIU0IouhrDJc54+RhK5nPFwnUYg+7im\n897/zllj1CfSiVRolynTl6IL9wetstpKcCdpB/mOdwKAXg10jcFFiCnp76dF\nlXD4OWwrSd2voUE4FX4V7fyWQryasC4Xh+81YA85VZcR51PWiw6ebA45Jllk\n2L/QZ8N7GEywdW9f80K/7nuAC35TbcYM6bihMh+36sUdCACDER+0yb1czT2Y\n9c0CjpTrVQraCZ1xZosSZjE6wJan0tixn5OlWBZKBgh8FHsI+Vwuj9JJLkuO\ng2ZsANXBcSg+g1Go+KwG5bjsQg5gGl3zloDAK92zt8EXUg8EJ1XmupJ/sxWE\niJownbgx48BDLchbf1StPWtad3eb1JiSoGmERcLALHg8KRDoqq9crw1uYZyn\nqwd4QRvQ7nHACf/Tm3USP7peUBdmj7fPUB57ohwvk3fOMSkxHOpKnFHooqBm\nt0lKqAq7ti9HYPiLZvYjaZBrwTaJs9eEzReTU77ApioTBT3nvLraSp+ZdB1p\nmxRD\r\n=Xg6f\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button/styles\";\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.**\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n**Note: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.**\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n\n**Note: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommended to\n always include it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color-or-map)` | If a color is passed, sets the default container fill color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`icon-color($color-or-map)` | If a color is passed, sets the default icon color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`ink-color($color-or-map)` | If a color is passed, sets the default ink color to the given color, and sets the icon color to the given color unless `icon-color` is also used. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color-or-map)` | If a color is passed, sets the default outline color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web 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/density":"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/button_12.0.0-canary.05753cf77.0_1619221411089_0.5989928563353386","host":"s3://npm-registry-packages"}},"12.0.0-canary.ef43e6d96.0":{"name":"@material/button","version":"12.0.0-canary.ef43e6d96.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"4d43c62cd694df3ecb563b5bd6525f0ab2864f1e","tarball":"https://registry.npmjs.org/@material/button/-/button-12.0.0-canary.ef43e6d96.0.tgz","fileCount":40,"integrity":"sha512-gxr1pX3urHKCahRQd60f+ZW+otXamYxyP7jSNESDa3630EjqnwLb5NorxtFc/+X9mkcNd1JlmMEsYm5cnYdQdg==","signatures":[{"sig":"MEYCIQCH2rbikmFMZJ1j1koEr3kge+D4QAxdzxJa1B9S3Rs2wwIhAJ1fDqdDjEYkyysT+71w6t9VCO8nvlDMk5uGBuoIDElb","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":497120,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgg10eCRA9TVsSAnZWagAARbgQAJF0jzvmJqs/0xVHfWsS\nGTljS2ycWE0/tUcQp6PzPtrMFP3KEo6r4f4MlQV1iRMjXTS6mLqZHtnmYN4L\nR8L7EbiKvR+Lv97Ery8/6QCZI2r0a5WsYBz64kGD+Y3nRQBZk+mVQjZkEX46\ngCn4RqZGyiZjLLeKEDMoFhz8AqfDZmCuzNyncKeXbudB7e44nJCLXo1HMjI+\n6vDJMLi7yMIKIe15we86I7MrKSdAsQDqHOFZj9/hh7Ds38JUlTr/WOp/A01D\nbyOI6yKpp6VxYANE+v/cu6PRlhojUjNMoAl7C9AZtFFS7DvZW6xh1TZyvZ3x\neGMGr8RG1Vo+nounXooVIN1zpOz93YgCJcDEGD4T0vNjKVf2/ZwMrbXf04T8\n8RqDUYvHVPMizfKs7UJQFuoF02lVn6f1MKpDrtlxD+HU/hV9+5rV9sMpURwl\nVfZkeZY4jRDOGJsDcj4HIbtIrMcI/plpqfbbDC5sLxa7DPO4ooVyDdGPbYKL\nA6WUXwIDE2C8zCceX+jEM6vKxhTw9ZMfLsIJveYQQuvKpGAWfGBZscG64vhC\na2DQJK9wgudFSdfmloczVC0RRG3AO27aB/s3oF+4qRo/omMDSxfm5rDAu2ei\nPvj9eFm2gmPxSjH7iHfwdAU7kXO6BHlvQ6ZalMFTl4dta5bDKsRn4tOqvo5n\nBB7z\r\n=4xNa\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button/styles\";\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.**\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n**Note: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.**\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n\n**Note: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommended to\n always include it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color-or-map)` | If a color is passed, sets the default container fill color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`icon-color($color-or-map)` | If a color is passed, sets the default icon color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`ink-color($color-or-map)` | If a color is passed, sets the default ink color to the given color, and sets the icon color to the given color unless `icon-color` is also used. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color-or-map)` | If a color is passed, sets the default outline color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web 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/density":"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/button_12.0.0-canary.ef43e6d96.0_1619221790333_0.38854633930754656","host":"s3://npm-registry-packages"}},"12.0.0-canary.197f64fa2.0":{"name":"@material/button","version":"12.0.0-canary.197f64fa2.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"6e1bdc0cbaa1a6466d8f4e4e1b81046c6bd398c3","tarball":"https://registry.npmjs.org/@material/button/-/button-12.0.0-canary.197f64fa2.0.tgz","fileCount":40,"integrity":"sha512-prpJxqw1Xf7QmK8PSqvlysxMc7DLKZaUGF1ESs5KqTIojR2TPAH78nNyXBQnK4BX/Ok3RoomdGHY7vg1GXIjOw==","signatures":[{"sig":"MEYCIQCG68eLqlZDb5IchIEgIbKZ3HwOiGtZCzU/Hmle92zgIQIhAO4fSWovZriQ1TCjZp6ZJBrIRe/QcDlqcnDihav4EzSr","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":502915,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJghvP5CRA9TVsSAnZWagAAO70P/10nlr23kySyJ9O1dsXA\n2Ms/inZY0jMI0poIZQcrG/U+NN2p09Qh33TIk/AwCjr/aAFTsHwQH0IcunsJ\nK5sURLMduwaTAQA1WmKzcvnv0yplcEDCAgh5C+7BYydVxCyiXgIhkoe5FBWW\njnQ3p+aR1jXBJnvvPTzlGZLdksnOVnjdxSS3dGf/mro70RVOb/jle5xzfROS\nPdd9Qp1Kqf6jJJl8hMx8ayLSYJY5grspdOEmqnvKgQrt1MnKdHN83PznA0eD\nWyRvbyudkOMJU5GBSiQ5UBrZ4S7UKl0qsRP9+rLytCxPR4TbruBb97IVEqB8\nz3vmsGN/+E0HuqBjXAmKgUyoJgxIEgqqQNeBmk+d/9FrUQPt05mKue0jhQpe\nSQGgvFVDPhmR0rB0BiKPBZOgtC5NO+CtRzQflP24XJ4MNqYqqBxxIMAyVd2k\n34qHx4dJkWPk9ZyIyXoZwwjVNbfJwqROElMPZlnTszEGcOpGwLRTUVEDLPSb\nj4aC0UBkdO0sgY+GLOVA1MDJswFMwXC/5Af1q1ltqzdnaRsI7kQEAggIbIha\ndx6nDSf0rwNOJIQHNFR2DjPMuuKjVoG/6eSrw3GKvNyH0uyMX7GYBcOwY0w5\nWlQEWZth5OEWBDLTVKnx5lpD3n/OyTpnIS5oLT3s2wcNRW0pCP3v0rleohkx\ny18n\r\n=JKCz\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button/styles\";\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.**\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n**Note: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.**\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button--icon-leading` | Optional. Styles a button with a leading icon.\n`mdc-button--icon-trailing` | Optional. Styles a button with a trailing icon.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n\n**Note: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommend always including it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color-or-map)` | If a color is passed, sets the default container fill color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`icon-color($color-or-map)` | If a color is passed, sets the default icon color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`ink-color($color-or-map)` | If a color is passed, sets the default ink color to the given color, and sets the icon color to the given color unless `icon-color` is also used. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color-or-map)` | If a color is passed, sets the default outline color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web 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/density":"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/button_12.0.0-canary.197f64fa2.0_1619457017343_0.6255061031182141","host":"s3://npm-registry-packages"}},"12.0.0-canary.55ad2d7d8.0":{"name":"@material/button","version":"12.0.0-canary.55ad2d7d8.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"92f6306ff72e400deb2d81fcf7e5c10660e3bed7","tarball":"https://registry.npmjs.org/@material/button/-/button-12.0.0-canary.55ad2d7d8.0.tgz","fileCount":40,"integrity":"sha512-vcvLV9mehawKxNNAhkvZBME8Qs8gJAXfGiYSA6AdSk287k4LYg1vCD5Of4sDBr2kU/JtNWUuQ8e/1KfF/6xXTw==","signatures":[{"sig":"MEYCIQDfiTxoNwlA4aQZSO4+e+XFzO3OKOUEJwKSd0UPeH5TawIhAIl1TR3TP+l+adEnG/r/8ktXRtBro5Mf6x8VQM/ivQ1h","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":502915,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgh2bPCRA9TVsSAnZWagAA3BwP/AgrDnlOgkSFWev+f14T\nsQGVwWRB7CcxMfxziJPhc5S1rxwyuEdmS2apvFrywoM9aFXrEeOse1MgZxTc\npe4pb8R/XRmYbzVLHC6Ra/hVwSuv3Ruw7nAVLiBKkcQuazQD8INwMzroyYIo\n3vgdWUzXD7zxl+Ua8v1UxN1HrLruIyga/NuTdPSQHDyMLiGl7BRDR2/oGMB1\n6khmOYLBxmSrvhauWpfZ+o2kcJGz++Z6kt/O27j/LGnRm+EVlWshps8qYd27\nbbRJ8fQzVdKdhwUeHiDMTXVxvIzaalwzuVTM9SRYnZkcfdphcFtS2dJtdWan\nT4n9t66Ik/vKTkK/1TqjntobDa2K7bLuq1SyKKfNC/UyaMi29AJkO8XhOsmj\nRv8zLY8xTk21Yqp7kdzYUYkO2N9j026YqIZ1Dt2PrQXffQJdrx7fIkwIxkWO\nOgKrr2eYt5zjxwg1v8+iCL8EvNCFRbxZpzUOhQfdm5igHgkTONcJz9KUmn9V\n9213tNWEwaJaPifEgKlbWih7c6x4phHa6acRR5tvygO/ty9QFl9QE3ONkbMe\nZ4a/kbiXmI+DlCTC4KGq+ZYgJ6q7oq2N1A0EOh8S+fMFy/f8elm2q5g1xA2z\nvhOf9tR2jqY1GyxBnqik8yKar16HkqZHy6+OCPzaes+tYbPKRcLN28ftpltG\nsDpb\r\n=8vsC\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button/styles\";\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.**\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n**Note: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.**\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button--icon-leading` | Optional. Styles a button with a leading icon.\n`mdc-button--icon-trailing` | Optional. Styles a button with a trailing icon.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n\n**Note: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommend always including it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color-or-map)` | If a color is passed, sets the default container fill color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`icon-color($color-or-map)` | If a color is passed, sets the default icon color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`ink-color($color-or-map)` | If a color is passed, sets the default ink color to the given color, and sets the icon color to the given color unless `icon-color` is also used. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color-or-map)` | If a color is passed, sets the default outline color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web 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/density":"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/button_12.0.0-canary.55ad2d7d8.0_1619486415071_0.6642132214546468","host":"s3://npm-registry-packages"}},"12.0.0-canary.ec4ac5234.0":{"name":"@material/button","version":"12.0.0-canary.ec4ac5234.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"54c1b93090b3c441b27b64474fdcde3341011344","tarball":"https://registry.npmjs.org/@material/button/-/button-12.0.0-canary.ec4ac5234.0.tgz","fileCount":40,"integrity":"sha512-UMJHlONbOEryfOuYtcDcpycGM6wVaFydEKLvsuLWroXjhOlkigBCqQm6i9VL5qHLgmQ/+OGrM/79zkM3FYkkuA==","signatures":[{"sig":"MEUCIQCONYbTjsplCQmmioE3xdiKvhVwnb3UAO+rJNmX2yAuswIgQolcewvkUwe53t/PA2xo7t2G2Ch5HFs68yYy5qsP/GA=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":503693,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgh8RECRA9TVsSAnZWagAA9lUP/Rg64iAa61Q1Zpn4nbLo\nyxAZFJXRSpij1BOlQIwmPT6uTKP4VEf/UuOuzzbi8eyBR9HKTfrN9GyFS4ES\na+4VTJ9xkCIWee47+4uEN4YsLO46IPOqoriBsAJw6PzDObJvqE6i4e2vx1O2\nWb9axkLdKXGJTa/2k08+m+77gOeGL4KCWR5d87AnLNeFdC5KVMPeLq4iZlG0\nSUNu9lPo6hCh3z8wSXq8AjbPXZ/Srf2j0gZ98piLwUusJfDAS4S0iBRycyre\nAYlYCDHyypp+5ZALKYmeTTJ0GbbyLUtMM0T0JmSNTVNwcwcPF8X+hLbdZSVX\nqJf1x/i4bk+9/emhOihNkUpXxdaE2veVyTU4izauBVGsRQNX8E5iYLrEOX5t\n3DZMHDuA0RcLOeqIanpzhtBmGiMLMV7shksZHqqVMEVHTtXNvx7MVRECnR/M\n6k7Y2AnnHXk8o+U99yzsI8k6Cp0DrKqNfCxO1RdgW4QvJ+DmKsUNRKSiDRxn\nF2MCsGO83ERcjlgo/Yu3WcbkogIyNo01XG9jY23APMHVXVcIzRl3tCxKMIIF\nFmyqVzsDfpQGskC+ZXhnDYBnVIGaFueNjRqrylIC8oz+jPRwMn4BeLMNfUr1\nfPfKgNdKDAbku4/Q7e/XWVe/yUJ9K5bDW0s/R8RHJcK/qrNHRXZZ/EPa2nsY\nX6h8\r\n=sW2N\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button/styles\";\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.**\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n**Note: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.**\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button--icon-leading` | Optional. Styles a button with a leading icon.\n`mdc-button--icon-trailing` | Optional. Styles a button with a trailing icon.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n\n**Note: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommend always including it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color-or-map)` | If a color is passed, sets the default container fill color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`icon-color($color-or-map)` | If a color is passed, sets the default icon color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`ink-color($color-or-map)` | If a color is passed, sets the default ink color to the given color, and sets the icon color to the given color unless `icon-color` is also used. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color-or-map)` | If a color is passed, sets the default outline color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web 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/density":"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/button_12.0.0-canary.ec4ac5234.0_1619510339710_0.34708002423497897","host":"s3://npm-registry-packages"}},"12.0.0-canary.b0579acdb.0":{"name":"@material/button","version":"12.0.0-canary.b0579acdb.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"2e0001358a3c0678d47feca613acbc64394d22b2","tarball":"https://registry.npmjs.org/@material/button/-/button-12.0.0-canary.b0579acdb.0.tgz","fileCount":40,"integrity":"sha512-WHVJzZK1UYGyiJCffX5Pw5iMvmLxqrCA5r2u5OEiB6VYPi0BssHLpHoBULai1GRpsRwsRa8I9W2tZpnT0YTrng==","signatures":[{"sig":"MEUCIG4vAM/8vIOqGRiK1lYAi8BNHGkidcOji2KPDKvoT4adAiEAsjW5bVALnrdotENPEKV71ebKhM07A5IoYbLgkhdbrfk=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":503749,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgh80jCRA9TVsSAnZWagAAvKAP/00en0ZtB+jE+QPhmSAF\n/F8dhIJh2bRiBA1G+PUSMjqzRlwNIhJ0RIf5aZ+/3wWNz4xLWCwanSInLu8v\ngtwzy7jlIK350YEPzZBsZPHTMDUtNJdnE25KJ1UsSRPV/pUmA5XrYr1rH8Tl\npWKUFXIjRneOnq4kq5wski+gHZpYcGQZ7FInfPXdCMz2yKmA1L2/tA5LuEtb\nBaILVcH7/0DiayfjumagPzix5l2C3glf7SL06SLqywNpQYf30K28QZMmXUzZ\n95GPQxYLGVjBG5GDwAXtPg2TQx3O28CGP58ijDOS8S2YmRTJ2gbvmAVdjcDG\nswPt3P0oxNHILN0J2M6zQzkQG0EJUbmrFoyVOjBI+XfJsTEA1U0hGM/hTS8B\nTkNxO1uu/uQRwKTMRxLoK8SuZ4tzoOFSJNUXWXebc44wrX8fCYg+ZCvi26CM\nD1RtcFLnlZhkGOQb/zfeqbu7kj+RUGW/9a6/6Zn26Iqy3XV/JLSMhBS1LR31\nKCu+yEpIj/OIvNlir8LPcGlLIeaYLPX/R52Cuh7VlAqRo1IySFfVcNyhD/I6\n0dsCs8Go5kcuSk5aS6td/y/LFtIKuLs8Bqic0xWr8AidMtEcPzXfmZmmEmUC\nmZByuXfvuW1DlLhpMFXy/nW/Uu0dDYjsSP1LPX7/7QRiyTHcShOpUgkHs9DE\njBYi\r\n=PJQQ\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button/styles\";\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.**\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n**Note: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.**\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button--icon-leading` | Optional. Styles a button with a leading icon.\n`mdc-button--icon-trailing` | Optional. Styles a button with a trailing icon.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n\n**Note: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommend always including it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color-or-map)` | If a color is passed, sets the default container fill color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`icon-color($color-or-map)` | If a color is passed, sets the default icon color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`ink-color($color-or-map)` | If a color is passed, sets the default ink color to the given color, and sets the icon color to the given color unless `icon-color` is also used. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color-or-map)` | If a color is passed, sets the default outline color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web 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/density":"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/button_12.0.0-canary.b0579acdb.0_1619512611104_0.5621945248980524","host":"s3://npm-registry-packages"}},"12.0.0-canary.81e2d4ff3.0":{"name":"@material/button","version":"12.0.0-canary.81e2d4ff3.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"6a1a039845df5dbc527d9d7954f2e9b52fd0632e","tarball":"https://registry.npmjs.org/@material/button/-/button-12.0.0-canary.81e2d4ff3.0.tgz","fileCount":40,"integrity":"sha512-kofDU/z01FvqNSybrrVK0sHmjixXU1orw5BhTyb7EpqMVJZ6gMtSYbHIf192DsjzZ8MIaJfmloQVDsXqQtDD8w==","signatures":[{"sig":"MEQCIFmgFL919aHxUHVM/YC6QedVydmJJmF0sbfBoZA5P4XfAiBX39DG24mp5JiBSKNXjhhdfQuSoD0nFz36EZ2j0dk8tw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":503749,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgiHrfCRA9TVsSAnZWagAABXkP/j5id2P4Hq9c7RsJY3UB\nPosSC1mSzV+lT9R7mM4rvOaRhPV+Mv6HK1waefznmOJpzEUKiaefgE0Fmohx\nbRFSJbJhEhNiGYKU/IJCXXmi6CGOl9RG9xpOLXIiWavo0H1HrcMLqtIk/bCs\npJSN3lcXtw/vV+wD9Imi1xufclogux94wt3D2/BFNfw1sza+b4KnHxMeJQ24\nm5M6Tlv1vh274lgWBwEUW6wF8mvXMM267Ow0wbd961+3Kju7PSNa0ZoG91PL\nZcn3DzLLyrDr7T4AgVugIYOoQwq0r7M7vQ6VIZiPvddKH3k/7XhGVyfA2tM6\nKT3dgndJkiP4iz0LZ1NQkwz3CyGSpQGeyYrW/DCEJOyafs2/ZeZC+nrMQoMM\nbexneSJbZA6FDuMzEqM6pkYCw3ea6L8o5jH7K4rIp2nP1pt5OZJ2/qr4rVML\ngB394HRREJQWxBplax0U3TXIlobbSUUGofeVSPIibwNW7L0cyNXsgUpr/v0W\nIzPBydVIYXEPf2kwesIQD/DiLtOGIC75v323fZU3lSzegVfglbtPhKue+kAt\ndCO87RzNeYqCghjLCOyjVHBsXdLrSDRhmuh29BT2KaAnv7dk5dC9Q4zV6VQ+\nv2sacL0ZhaB80Tf6yIFixGtzkmLEozn+2i4rljmBMUzRJ+A+lg4d394V+mrb\nOBmc\r\n=zUTl\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button/styles\";\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.**\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n**Note: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.**\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button--icon-leading` | Optional. Styles a button with a leading icon.\n`mdc-button--icon-trailing` | Optional. Styles a button with a trailing icon.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n\n**Note: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommend always including it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color-or-map)` | If a color is passed, sets the default container fill color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`icon-color($color-or-map)` | If a color is passed, sets the default icon color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`ink-color($color-or-map)` | If a color is passed, sets the default ink color to the given color, and sets the icon color to the given color unless `icon-color` is also used. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color-or-map)` | If a color is passed, sets the default outline color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web 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/density":"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/button_12.0.0-canary.81e2d4ff3.0_1619557087299_0.7403871477371742","host":"s3://npm-registry-packages"}},"12.0.0-canary.c8edee52c.0":{"name":"@material/button","version":"12.0.0-canary.c8edee52c.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"d5b33a07067c6bc58c4960547c79330ee45d1a93","tarball":"https://registry.npmjs.org/@material/button/-/button-12.0.0-canary.c8edee52c.0.tgz","fileCount":40,"integrity":"sha512-KGu4qQWWp0OyQI4MoAHrucErjenxncy9fKiqFcBu1xC2FeG/m4b8wEx+/M7h4MXsAoTAYhl2pdKR9nVVQfe61A==","signatures":[{"sig":"MEQCIEV/OQG7KpZYGDpbBscaBy9U9QyaM1LLg8JQjBv2ZyetAiBLJ5yGddfxRIeIBEa2i4/bj/gUcYfXNYo79N+5isilpQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":503749,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgiIY5CRA9TVsSAnZWagAAoXYP/RoEdpFMD7UjZgSiSzRA\ndg5PTrpbAvky7DquJVFWanJs8JljN67X2SjMBLbk3y3V55q/WhdTBHMCdm4R\n1UemtxhDUWMK7fxkaYKJyT7dL6u4S/ifENtOhBUvGD5iyD8rYirC5ydE5fPI\ncayWYpx0fZygB/XctDmfsjkvt94tLYvy1j1fmT9SULbRRpSXqNj4OAIhxCXl\nakzldo1CYCom7JRLe9Ce3KqCVQU8SVEdk+5aV349OvD19AWs1geL+rjRzwMW\n7Ydkl1IA9nCVQDQrpzSiKf8PLUU3rTQg4QWk/jlWAH7IZVD7Tsw1wgLasDSH\nYoC6Gr2Ss3KmeXTaJrFhqhM0PgMFoB0Zm4Hen4vVfiuBfu2vLGvzFY21GdRr\nuNTkhcok02zer+Ksmn8k+hxJUer8TQ85vA03YaLkjYXHFjPorA1EEKjG/u7l\nTY886mHuJ8joy9rYwHuRXeIscBiTB/GRiSwgtRXqbwfGi3do+7RmRQ9jCIoD\n2XiR39QZrq70bwiiUG/YFqGZZHoL2E2vBuKUd9pOq6NffDFntvwAqGaKt2yB\nu4Q5uJO0KBIfeB5boRuosgeNBSine6eZAtexL622dKE9ZaRJHidgKa/Sn5UE\nGkIMv+dxUljwz9DQdhtJdwBBjCJp1fpkvToqWVNst4doCBiPMUS85wk4Af4v\n+IRG\r\n=z7UJ\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button/styles\";\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.**\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n**Note: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.**\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button--icon-leading` | Optional. Styles a button with a leading icon.\n`mdc-button--icon-trailing` | Optional. Styles a button with a trailing icon.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n\n**Note: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommend always including it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color-or-map)` | If a color is passed, sets the default container fill color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`icon-color($color-or-map)` | If a color is passed, sets the default icon color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`ink-color($color-or-map)` | If a color is passed, sets the default ink color to the given color, and sets the icon color to the given color unless `icon-color` is also used. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color-or-map)` | If a color is passed, sets the default outline color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web 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/density":"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/button_12.0.0-canary.c8edee52c.0_1619559993142_0.19776946612959145","host":"s3://npm-registry-packages"}},"12.0.0-canary.f5b6110d6.0":{"name":"@material/button","version":"12.0.0-canary.f5b6110d6.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"c3f1962de9b70e5b6524d7f711acc8b4e20b4cfb","tarball":"https://registry.npmjs.org/@material/button/-/button-12.0.0-canary.f5b6110d6.0.tgz","fileCount":40,"integrity":"sha512-FrAxjlOqBTy7UjrzX9j6kRdreWIH9YExML7QXivxkfiPWxuG6c7kW7snldc5lAQl8HHbdEu4LK6KDwRcK5v3wA==","signatures":[{"sig":"MEUCIQDngWoGsb+YSlG4yVBlfEqbuoTwyT+CoUqHHmCK37TJtwIgbipsvzRj28Oc+GdRF1xIoBzI+MgYxYznzQqxLxLZay4=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":504200,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgiIs6CRA9TVsSAnZWagAAw70QAIBRcontcSucTA6qnzZU\n3cbTQ9apP5YHS91WrvfteRd2pmTyl3xeXS+mU1IxIQjB2G2lCY1yguUFwgGn\nI6pl5FH6L2xurrUDdS6SluSZqSEdJ0TqNgna1aMhaei9jj1+pjZho1WSZvNk\n4QiTVmrL8Rpis/4P7kTBctNU4WiKbdvgcNl3xYuT02HzilyA969XALOFnydV\nbAg/rGCYwc1KsNqYhEteWLhOi4VCbUtFdgfotf31kdDWmGkwHN+7DBamLNwn\neq3B/F1QBPn5S4srj5O86OKoI6qhnObXRJcFUI7KWZ3eBEJ09CE7AxYWeYl9\nvo4qtZSnmLgvhpbPpm+IlZZnZ2dbmRXVnd1Ij1fj1wkWocY//HRhxGtk9UiE\nOCg6pXf3ZJl+1kEuSnruV3rYLDsnBL9jmo9T5p8aReB/gqn8mYGRSBmu8DNs\nX50qWnWfnOyrf4FKbpFRv+PkOEcgdMIBcy6JEIw4rS1hC4GzmyyHyrcVGclE\nwKQK59t2HnEgUi6CLZJhYzg2wh/q5mz5pIND85RwA+nffSfEK0S6b3yOk+Dy\np/8oybQGsE/i5T9c5o0Goi1v52/BRHSY1EnqnGmyRCCkM2Tz7AKba6wy+7Id\noPrp/Yoxp2gcRygb2/ARKNGGC1M7Enctiy0AGpJWMiNtP7yJtTcY52/CEXMU\nDIYB\r\n=aBEn\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button/styles\";\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.**\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n**Note: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.**\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button--icon-leading` | Optional. Styles a button with a leading icon.\n`mdc-button--icon-trailing` | Optional. Styles a button with a trailing icon.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n\n**Note: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommend always including it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color-or-map)` | If a color is passed, sets the default container fill color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`icon-color($color-or-map)` | If a color is passed, sets the default icon color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`ink-color($color-or-map)` | If a color is passed, sets the default ink color to the given color, and sets the icon color to the given color unless `icon-color` is also used. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color-or-map)` | If a color is passed, sets the default outline color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web 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/density":"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/button_12.0.0-canary.f5b6110d6.0_1619561274256_0.5072049476645766","host":"s3://npm-registry-packages"}},"12.0.0-canary.cee9b9e22.0":{"name":"@material/button","version":"12.0.0-canary.cee9b9e22.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"22ee4fe34aa0edee283b60a27a2f453208036e60","tarball":"https://registry.npmjs.org/@material/button/-/button-12.0.0-canary.cee9b9e22.0.tgz","fileCount":40,"integrity":"sha512-Yb7GnOI9G/AunSffUuWro0YQ1H55kB1hjZRwO1ykVaafUoXzyqgfqZIiwKufvVNneDOaUkrJWzwFrc3VlHXV7w==","signatures":[{"sig":"MEYCIQChdiBrrh72a5L6plGoBc92a++uAtUbm4TUBHcD470x3gIhAOJwi42rcRDUz066glKzwxTyV3+RIv6qg1PnF0RHaf8e","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":503551,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgiKihCRA9TVsSAnZWagAA0WEP/RLYWI/T0979EdxhIC3K\ncQJs00ewqBrj+LyvL6+eiWHrnEUUowf5P9fQBYB02fyVx/NLW1wmTZ7+5mw+\nHj2UhJiLalkpaJpW/GRH8kTCkvEnQXySVZNNzBoup/PGs+rcWENJ8lzRWgAa\nr7VLWRqnGCM6k+Wjt2lpK+xONr+v7BnodJObiP1yQcpwrmI+DvkQAYLSQLKz\n6qay871rdNpT196R9y1PpVo7I9WWRUC2yldgC0CVfnIzI9unBFwEEo2j530o\nH72mvB6EKkGEeN7HQ1td7do4IUlsYBpGGxBKFRufRe1GFD893Ob7F7HRzBOn\nCpxd/7P1e0c++GuNuzNLeOjvq9VCLSt4vdVqUVTFOrWBaIWjm/WSdLcpWDZ4\nUtp5mhOommItcYASgrmfp0Rq/VEZWAz0kdGZsHZlNNDKGGaWGaZDfqJvMcxW\nJQ1NCHSEGmBWtTefjH46HG9Fc1p+2ZMO5PYULUqwVkLnyETxCOaiHCvZ2w5H\nDU75RMqm0JL7kQbEyqHWB6tZt3C+KeddgjHb8VxAivai2YFxZBz57ufwdAia\nDBgOs6nxh9jZ2ffq/6jehATPErnTt3uEIO7AQDeTzZ6iT7FcUMRLTqyo4z4n\nKlM5s7wYb/uWgqRkHJnZutkwhfIIbxNCzb90oY0yJ1RwKchxPSWIcuNaAnHp\nrUuh\r\n=X2Qe\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button/styles\";\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.**\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n**Note: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.**\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button--icon-leading` | Optional. Styles a button with a leading icon.\n`mdc-button--icon-trailing` | Optional. Styles a button with a trailing icon.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n\n**Note: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommend always including it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color-or-map)` | If a color is passed, sets the default container fill color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`icon-color($color-or-map)` | If a color is passed, sets the default icon color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`ink-color($color-or-map)` | If a color is passed, sets the default ink color to the given color, and sets the icon color to the given color unless `icon-color` is also used. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color-or-map)` | If a color is passed, sets the default outline color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web 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/density":"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/button_12.0.0-canary.cee9b9e22.0_1619568800651_0.46741655879875865","host":"s3://npm-registry-packages"}},"12.0.0-canary.96e83fca7.0":{"name":"@material/button","version":"12.0.0-canary.96e83fca7.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"3bdd7cf5d58b84284917359f94857aafd6bc2ca4","tarball":"https://registry.npmjs.org/@material/button/-/button-12.0.0-canary.96e83fca7.0.tgz","fileCount":40,"integrity":"sha512-FDQTjuDa1ZikRX41DVfHePvOV3yApjo7M2xKG9i4gBgismN6crE/YUGPQ78n6SK8+rZXaBXVtgJMRz0UPXbfCw==","signatures":[{"sig":"MEQCIHpdXU1vsdDFjpNFhKbw59yCre0VYKcuCsIvpmb4PQ/AAiB0NH080xtBLMnVKeoJVU8frQ3JRDIqy/rv5dW5tZ6r+w==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":503551,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgiMz0CRA9TVsSAnZWagAAQ8EQAIZA8k9s7i2pXzN3NlH1\n5N8/4dJ45ZG0gOjS0AQ2TXNdbbbBNLZJvKUNGno1IH60JxJU3sgy5XDEIkFm\nbQbi2cXJrlYSSLKk7rwdetjQVdgV/MNBYsiKnQ+FUCXlA5MBkQAY6drurc3W\n7+DoTtQki9B8UdPyy+pFDR63rGDVR87cTfz1nL2ETHY19ap+0YMLHEDDxNh+\nLQMscmpNWx4QuN6/aHuDfQViM62kDaiK12i2z2WuydPjDUI6y1xDh/gGZHYL\nQMGJQj36DK4ee/FScJ86gyp2yhgOZoiRbhPdkIGdZ8+rr64jEiG5rAfZ8OtN\nmlIp/lZ1u00nz6SUZtsiSLZ5GOrP7514PjfcuSaLX62kx5Ju0KDn5drJchkn\nIseqnIyZzrR3zPXRqbZpZsYRH8Sp34NRE9qJ+fQTCKgWLFs/iq1u6Sx5scaH\ncJxVQDXQV8gbbAVK5VhVJll4QHqTvaEdPH4fzNaQ3+HeA3i0rw7MxhoPKlbo\nb7Um6Qpj9i8X3JXheC+dq9liIeJcFRUX2F2T4kW1HoOZSS7jfeVlujQBCQeM\nD+LWaHMYH5LrHh/1AnVdJWbaOzdFMDD/uBoN/jNmlT0CYgjG5LzYB3k+ZdDp\n5uPxGZJM8nj8SWPWt/A+qi9ziKq2yayr3TXNqMOFTU28U/3Vl3mJi2R2VYae\ndbQl\r\n=FlY5\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button/styles\";\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.**\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n**Note: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.**\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button--icon-leading` | Optional. Styles a button with a leading icon.\n`mdc-button--icon-trailing` | Optional. Styles a button with a trailing icon.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n\n**Note: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommend always including it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color-or-map)` | If a color is passed, sets the default container fill color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`icon-color($color-or-map)` | If a color is passed, sets the default icon color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`ink-color($color-or-map)` | If a color is passed, sets the default ink color to the given color, and sets the icon color to the given color unless `icon-color` is also used. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color-or-map)` | If a color is passed, sets the default outline color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web 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/density":"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/button_12.0.0-canary.96e83fca7.0_1619578099727_0.26826018362512816","host":"s3://npm-registry-packages"}},"12.0.0-canary.4c497bd19.0":{"name":"@material/button","version":"12.0.0-canary.4c497bd19.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"74e05f8cd3e715d70c3dd1938e930774d8cc29c9","tarball":"https://registry.npmjs.org/@material/button/-/button-12.0.0-canary.4c497bd19.0.tgz","fileCount":40,"integrity":"sha512-93jsqkk/GtL2nmLFw1x1Rtk3JCMp51/CtZLba1bVOIRHEZ8wUoSgzrjmi4GmYdCQPbEoPcof07dNu7gIcRzn2A==","signatures":[{"sig":"MEUCIQDBtYJjvZ8ZuMLdR2PWZmYGWPPkoIsxkCfGTOJoGI24AgIgMBCtulhiAko6FftCt1cKT6wbqpDg2pgHEGjcTN4Fsvg=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":503551,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgiaE8CRA9TVsSAnZWagAAZaAP+wY6SDFVOTUaoodeI7QH\nADv1tHjF1fWM11cKWDj6oe0+IOP4IjrHirui3I2H/C/dE/bYPy7gwezucAHR\nFeT5kX7Bg6KLGTRc1gNp0YkdTS3Be00hbqra62VhBx5HefMzTLslGDQ6dCfO\ndpBzLRpW01O5lG8JwgWOhBalaqHt4bD3kkKMAiCW2eqkSWtbqaRVunURw+RL\nBAj3BSSsa1krwEvjJ6WCLlag8DuGWUIYbJWMZP7ZbNbrMquYQ9dKA14zoGjC\nnTP5rG9cbT9Fu77l9BIZFtqAcxtfXN8vjFcnUIq8RV+H1ACDdezuTWx1xFJU\nqIAsA7JJEk7pOMUY6scCy0UXuJcJuh5rCgsWU+LTMDs83XtF2i1D494ZYLk6\nUB7vVze5Gjbu/raFuOMRG/fACA1QbWlspMam3YDQVDtQ8OuWLRf3Xnmg7zI2\ntvw3RLbfL0A3SOFO6T8LXD5InOgg4NX+sdALJCuAqLw6ywYFS77TUDvQMtvz\nylAZBiuFyHG4zvPtvy/TPchQcJwwOmmSz4tFSdmU/miCIs8CNhF4XzAOzIcz\nUM6re4kUyB8CIxxDTrhVkqfTaCoz2VhcSKDuqe4JZqK1og9Cg9Htrxcaf/Bw\nrOYj6pQH891ceEA5plc0gnFLpGo2gY/9wQSlcCLSWLioX470aqUzeNYMYK7P\nZKJY\r\n=eC35\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button/styles\";\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.**\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n**Note: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.**\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button--icon-leading` | Optional. Styles a button with a leading icon.\n`mdc-button--icon-trailing` | Optional. Styles a button with a trailing icon.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n\n**Note: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommend always including it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color-or-map)` | If a color is passed, sets the default container fill color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`icon-color($color-or-map)` | If a color is passed, sets the default icon color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`ink-color($color-or-map)` | If a color is passed, sets the default ink color to the given color, and sets the icon color to the given color unless `icon-color` is also used. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color-or-map)` | If a color is passed, sets the default outline color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web 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/density":"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/button_12.0.0-canary.4c497bd19.0_1619632444219_0.33686392709669466","host":"s3://npm-registry-packages"}},"12.0.0-canary.105b15b96.0":{"name":"@material/button","version":"12.0.0-canary.105b15b96.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"af229fb75f0e0f78b1e0870f2c55bbefc52da1c5","tarball":"https://registry.npmjs.org/@material/button/-/button-12.0.0-canary.105b15b96.0.tgz","fileCount":40,"integrity":"sha512-g9Bwg5408asIGIwuKtJeiqbX+zIKxj/pcGjwdx+twSANGQw5Os1EzsF48nyE8VY8u6bzaDzR2eVsUuO6AgJSNg==","signatures":[{"sig":"MEQCIAuYUHMeuUAhS/YQgygoMFxMlmRwknlifgfqQNtmmdPCAiBG2XOQTeBlB5OACFGPNh8RUmouTFtekn3tb4y9eIYv1A==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":503551,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgiddqCRA9TVsSAnZWagAAubQP/j0kBO49GxXziLqkh1Uw\nOsOA+cP1mYVUZYmH0+QmR7DC6u31X/daSvi2CtvPAEb1Dro2Rqnb1+0HMRzy\n8NPTfi6KgF05PO7dRaX14m8Eeg+YNp+7aLsheMs952IPkYvr/6BrlnukRg+w\nxqb9eO/NeILpVduwliCB35ezsrF4osbT5LGwxOT+Iy82q1idiJScl5UwnCOy\n3MjJv3JcpDtbPAd17v2WuijMiK8JCvcXpswYnLf1VM38bUcXfLwEc6Q5yrl3\ndyH6e8UsWt+HdSBeR/FasJLhGjLh45aA30t/l89AuQlVBIT3XSj6VUXurtQL\nMhOmxft21CN21byEcv56uA04wfNDdW1QwoXXH8KVNCPbP/S/qfbmfoFpMafF\nQZxiaAEEfkdkYiZ4NKdKbh3aF7mXU7Z8ohjO9K6NXtN1uk4bLDxGAcNA4OO6\n16q1363GU6uJYhPm9o1i8E8WEmJ3c+pNG3wAwqKpDmFzygV7zSmGjcAlm9FE\nqgT/C8Y6BTBU19Qvt2GxTAp1qe/xUZ73pCsh/5Ezh+U63KJ5Atw9EW6rfJ3l\nPR+xYWI6C7kzs3eRnKpw8KOYtwxgFi238C+HvR8vzfT0L5yzYUeEZlo1hpCt\nEP8vhQc+s2EMme5/H6iGimQu+VMrdBu3WEQGwYDeLuDrELkmM8KV0gyiFl2n\nv4/R\r\n=nuen\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button/styles\";\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.**\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n**Note: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.**\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button--icon-leading` | Optional. Styles a button with a leading icon.\n`mdc-button--icon-trailing` | Optional. Styles a button with a trailing icon.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n\n**Note: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommend always including it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color-or-map)` | If a color is passed, sets the default container fill color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`icon-color($color-or-map)` | If a color is passed, sets the default icon color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`ink-color($color-or-map)` | If a color is passed, sets the default ink color to the given color, and sets the icon color to the given color unless `icon-color` is also used. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color-or-map)` | If a color is passed, sets the default outline color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web 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/density":"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/button_12.0.0-canary.105b15b96.0_1619646313630_0.7558873871629528","host":"s3://npm-registry-packages"}},"12.0.0-canary.6e20259e3.0":{"name":"@material/button","version":"12.0.0-canary.6e20259e3.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"68d3c495df92b8394b0d45e578be3f3e7114d58c","tarball":"https://registry.npmjs.org/@material/button/-/button-12.0.0-canary.6e20259e3.0.tgz","fileCount":40,"integrity":"sha512-gXTO7c6N1W+w1pbGqW2qji+U5DSNhcJym+92iJuGMpsOlK2HQ4/MqR1Di3CAXzz0dCWJdacg/tYrlgk7OZ8c7w==","signatures":[{"sig":"MEUCIG822VvGeC0yV0KKQBSCANmqFGc2LOSWD4vWsgCO17GRAiEA87FFJf9iwz26e2bFHh+NDyLMWN+MqVkkmGvaSDcbgdk=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":503551,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgidh0CRA9TVsSAnZWagAAdWQP/17eBRPZdssYZFebiEUn\n5bROFe/LzC+zXhKAm+7+Pwae9dn949BKS1Pw2RJwtwu4FfurtWWs6EKW0Flq\n2f8FEBxN/dZk+mnAMKg8xz6RB5rx+qqX1z5587feo7wvYY6U/iq/fXVvsQtR\n0fq/JS6TCEttN6Yj2LM1FzlVJCmLxAPgdGaolXXjAi5xbniIRM3cv/fXU3qV\nsXUWUn8j9faXr0uZipKMJCZlO1ijUNunr7FtKpSy/d1Xi/Z/0PLpl4+syoq+\nHL7870eHrpqHwVusobg8W/JX0SI+MgwAttTMb8un2k0PBLau0PnWCoZWMZ3v\n7bykXucxDqqJRSA89CDnIfVtMsChoey0sPXtfvu8FZpIprSAgP7wxJ46AKSv\nWzdK+wLEU0j5D1dag87wDkniQNPNrORyYwtupAlcpUDNKnSFpbOBa93q1TbD\nAym3b5qav9QCzq3TkxtzT+tKQltK4/DdL24k83Auyc1c3qCjhlWV1aCFsAdQ\n7WGgzATY7RQ6pJuF2o+SY+MYS4aNy2Zxq1zoi4Y7OkakvAFh6ZrVSlQlTbi1\n/OiuSMN4eY006Y5x/sZrjl+eUd2h44k2sRNosvh0hL/7YcRZnRAxTvixlA5r\nRCzzt73iCo2giPR58jVe8es35ISyM2hLVYlxfpJaoM1hYPxxh6KjoXZkOpAz\nU1mr\r\n=L6KG\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button/styles\";\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.**\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n**Note: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.**\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button--icon-leading` | Optional. Styles a button with a leading icon.\n`mdc-button--icon-trailing` | Optional. Styles a button with a trailing icon.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n\n**Note: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommend always including it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color-or-map)` | If a color is passed, sets the default container fill color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`icon-color($color-or-map)` | If a color is passed, sets the default icon color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`ink-color($color-or-map)` | If a color is passed, sets the default ink color to the given color, and sets the icon color to the given color unless `icon-color` is also used. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color-or-map)` | If a color is passed, sets the default outline color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web 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/density":"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/button_12.0.0-canary.6e20259e3.0_1619646579674_0.4999344694668779","host":"s3://npm-registry-packages"}},"12.0.0-canary.0f79a5d74.0":{"name":"@material/button","version":"12.0.0-canary.0f79a5d74.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"354bebf812c0a04a34ae1585f513d318b5652708","tarball":"https://registry.npmjs.org/@material/button/-/button-12.0.0-canary.0f79a5d74.0.tgz","fileCount":40,"integrity":"sha512-jPDiTNAOZQovUPX5d7uJIIXm0WlzX7a8k+L7ESrJWJqCfUyu7LvkXMBSzIXl/YG/Aqd0VVPIvmTAbRlAbsk3MA==","signatures":[{"sig":"MEUCIHxYVq7+3ZBL7V5OoOZkbnWaGwvCwnh7S0ODx7p3h771AiEAj+3fIF0HO7XzZggNFDZRhvhxNFhTJ+JuH0KnGHv6FrI=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":503551,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgieUOCRA9TVsSAnZWagAAOnsQAIMczc7Sm4XmCI1Dj4KY\ncSQcXXJJjgDYLoDStcvTi6lnjrCoAfdu1ORpX1UEEb/xnWcPYlEwoWKGOLXY\nmEBRAU+y8vxqp5q/w81eGm1BmUSctBG48VDAfAIlzjYUTuv6B6/anQW8v+VA\n7vBegat5WVSRZNTwEPU8f93GXin7c1H1GYneTraHIIa3b2b6mLdWzAPlThJr\nU53aDtzDzdNgcwtMLHvgqWclN09ahs5bTcYorsGGEzFOctNco5hOMqtvb+sx\n8gvnHUziw9pJhs84KCGHBEw7bIAHHtQdamS0JHvitUhQsh4/0kDQ/JD5kVC3\neuI8akD0J8vLaBXx13UEB6H54ITf50zuktCXXK0B9h5KmIsqmdEuqDA2g9z1\nMU19ulwauoz7ZSOFXxXqj202z+SKKrPaBYKOHlRsm0m0XeahIYWBOIXlgK9w\nZcWE1OtPAYQm/33dlZpyGQxI1YQenGowKh3xuDaioCZSoqfiDvnCKfSqvMBx\nvu2Z+CEhxRxlrDpOx18PoVtCzIdSMyK3LHmzJoNL1d6w98oQXR+O054WOwCF\nRL3u88Bks++/TZcbVOpKC2l6OybUSTyKIQpkxopUr0SMWCTTcAWi2m7asTHo\ne/3aSaSetxS4TW73S2pEvkp9IxUdq1x1uptJ9o33CKXO3iZLZq+htDK3BCxO\n8irl\r\n=sDBo\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button/styles\";\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.**\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n**Note: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.**\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button--icon-leading` | Optional. Styles a button with a leading icon.\n`mdc-button--icon-trailing` | Optional. Styles a button with a trailing icon.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n\n**Note: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommend always including it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color-or-map)` | If a color is passed, sets the default container fill color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`icon-color($color-or-map)` | If a color is passed, sets the default icon color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`ink-color($color-or-map)` | If a color is passed, sets the default ink color to the given color, and sets the icon color to the given color unless `icon-color` is also used. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color-or-map)` | If a color is passed, sets the default outline color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web 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/density":"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/button_12.0.0-canary.0f79a5d74.0_1619649805720_0.021028495119396196","host":"s3://npm-registry-packages"}},"12.0.0-canary.84f3db9ed.0":{"name":"@material/button","version":"12.0.0-canary.84f3db9ed.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"45a36fcf1dd406d3270c1cfbe3b84d23e2419e40","tarball":"https://registry.npmjs.org/@material/button/-/button-12.0.0-canary.84f3db9ed.0.tgz","fileCount":40,"integrity":"sha512-8SjDV43j2PDNFBLLIpQz8PcKXt2oG1ynjeXHahud4TuON4bUblA8sHoKcNV3+fhESe97Qcmw+9fvd5p19evoCQ==","signatures":[{"sig":"MEUCIHjGNLEyTHDBhnyYYEG+LPvibSNdajAcni5amL5kmriHAiEAo0aIgKvMi6brWr/V8B65DfP6ohbgr+QXbd5fFaWbrYA=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":503551,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgisA0CRA9TVsSAnZWagAAgUsP/2t+ZAmvm+BxVzBSJhxf\nEfkfUcJFbYM1dVIhW5RY5/tAgQrc3Bj3NWvz0daWqIIDlER8ICiVozFIqPo5\nBFvbmPN8lRuW/xBrdb2Dea0F0JSCVfQsG+2SjVZ3OyWHao3Zv1gM4I19rMNm\n0hFjz3Q8Px5K1f41MUnRe22Dno+GdpgeTINtq8bZ5ow4qcJU02kMQcvWiiRl\nOcJJmFv1IE2UzmxmjmnmHFBzkGS36OBLKgv1TLaD+gdGrUrYQ2n/kxFVE65a\nXWQc3hhw7dK3PwSves/JXyXs++T+LABMwpczrTfJ8qoDaut/tMeRMS2IZq66\nW8suETvOFh98BccY7jN8QTKid/G2wfbQKVQA5BpnT/4x1uCQVUkdnGYLDQw9\nhW+dgwC/leV2FdAkwdB8uJBC9mCeScTir77PFE5gkbjt4NR9O4KCEGaKYqUF\nq+04arrqfG0N4aKhZi/3dNSDP9DWD2HTkkjZQ3mCdGheu4xCjuW+P7CVHStO\n2IFgh/uGi//jkjMon7+Kl/zZMavTdseHJlqHyAslYyj3d0uLr10nhClweRZA\nFH52JcYsJcp9LAOSrTMhFsrlaxouKUsHAgDx15ng2GSQoKNUdvFiQYaZ98xW\nmzvwqtkd2YA7VrPzzDEvtifncm5GAiMteH1O+YdXpKMYsWC8EzfgKa/ooA33\nhhoG\r\n=X9+F\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button/styles\";\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.**\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n**Note: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.**\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button--icon-leading` | Optional. Styles a button with a leading icon.\n`mdc-button--icon-trailing` | Optional. Styles a button with a trailing icon.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n\n**Note: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommend always including it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color-or-map)` | If a color is passed, sets the default container fill color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`icon-color($color-or-map)` | If a color is passed, sets the default icon color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`ink-color($color-or-map)` | If a color is passed, sets the default ink color to the given color, and sets the icon color to the given color unless `icon-color` is also used. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color-or-map)` | If a color is passed, sets the default outline color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web 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/density":"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/button_12.0.0-canary.84f3db9ed.0_1619705908363_0.34377621310217","host":"s3://npm-registry-packages"}},"12.0.0-canary.8fc29273c.0":{"name":"@material/button","version":"12.0.0-canary.8fc29273c.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"766176bdf7c540e4ef99314ef047d5735b724cf6","tarball":"https://registry.npmjs.org/@material/button/-/button-12.0.0-canary.8fc29273c.0.tgz","fileCount":40,"integrity":"sha512-vfeqiK2wIbBc/0QFFEL5/Sn68pXseTr4uIvyWYKToWp6+ZvFz4QHUWTIa8/iccApiADRcfKYEeMyyWqwa2jJjg==","signatures":[{"sig":"MEUCIB+goaZCv80KKaWCsDV3NvPfcLPURgW4rwYoqodCGgIyAiEA4HWmu//HX0dkpggbpiqO3Y/HTQDYYHOG1WvG6SDcYDQ=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":503849,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgiyP8CRA9TVsSAnZWagAAD3oP/3Gcm9j2f/lQxaa7ZyxN\nef1QQ0ncT+VPsNQnlZDMJgsO51g8H3rjW85IdwR8wiZo7nqyH+PLR2NeBFOd\ngol+JEc+NxVI242J7S+mIDOxv/ogLhMiWtIePV5LPAs10JjCquCf/cmsPnYi\nmcSqgsoJUUu7SgMIj//nBdsuY7CLk9rUtca4dc1Lp9JpDkNkdH+65ipstO8f\n8Y0HI8d+gT33o16MmJBZfbYQOuWisgnV5TC1GQg01FdyfuCgEGJZgagwRp0o\naLCyTYxdVD/Pca1jugY4HxKNw9Tpx5JifNj282tO42khCDj9m2un7Qm8iR62\nCQ0C/dSPR4EyLuIrYz45MSMRsiBKaeUf2lEZsKRwyCbMpscFQSa9YzcvPXOg\ne+oyloBIJ9THMf3xFYLuMUl/8jQ108JuTFkcE7cq4CCQZLOPJFx07A7sCTO9\nYxTXADdbq+y3bI6GbudmurBh6gbvC7kIh72bL50OGMLXZbPRyQKiVDUd3rNC\nmAUGQDNvgaQQn7uAKyjQRO/hXasc0qzdVRgWHFm0a5AJQpSfRKnH2D2HqQnm\nRo1lSctBJv4BARNaEmwcZqeRf6exrePyg1F0Gh6H1g2hhyaLMBHD3dT89aHw\n/mJQpadK2uGrpRu6JYvUZa/eh5hdTzCCpxTAqlOyZ8spO8vRSy0fY8tyYkHL\nW4mE\r\n=D4VR\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button/styles\";\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.**\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n**Note: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.**\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button--icon-leading` | Optional. Styles a button with a leading icon.\n`mdc-button--icon-trailing` | Optional. Styles a button with a trailing icon.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n\n**Note: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommend always including it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color-or-map)` | If a color is passed, sets the default container fill color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`icon-color($color-or-map)` | If a color is passed, sets the default icon color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`ink-color($color-or-map)` | If a color is passed, sets the default ink color to the given color, and sets the icon color to the given color unless `icon-color` is also used. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color-or-map)` | If a color is passed, sets the default outline color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web 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/density":"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/button_12.0.0-canary.8fc29273c.0_1619731451559_0.4979547823664294","host":"s3://npm-registry-packages"}},"12.0.0-canary.c50d20bab.0":{"name":"@material/button","version":"12.0.0-canary.c50d20bab.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"2f3cb772b3d4ff6cb363a2f2116064fd121dafc8","tarball":"https://registry.npmjs.org/@material/button/-/button-12.0.0-canary.c50d20bab.0.tgz","fileCount":40,"integrity":"sha512-chNgIffw9XN/RwpZ+NQF1uvNqeiOYInk0aF1NGSPtShOKy2pTL6h09oY9HHn2T1LgfP++jVXiDxIp87vpLhDaw==","signatures":[{"sig":"MEQCIA97hGZuVcj2lt2YGRdpWPWIhINObkxd5IdhW7K7hU6wAiBM77LwEujEi5wkzHBCJPIcFYH65iujBfhQpIHODcp/Lg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":504272,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgizsFCRA9TVsSAnZWagAAzrAP/0U1pFocw0IHQqCTbc00\nmR0kgaxr7hGEUVZn7Hh64ioY0St1hFmCvXrY4hEWziS4g7vEgUv/zjpUi993\n0Fy864DrhUMYWGSU/vQWgiFzurYBNyEcUE7+Fnfqd+k1WTLSle7DouRHOHAW\n8elxA1cDW6K+6fJGa5lMHx3htzH08YgjLN0ypjpsYaRsziWrmGkR1T97Kw7o\nkTacUvLCuQE1bb7NnSDkypHaCrKCAPTby0b3JjBfkHPa25NWHw6U/n6EXbaB\nfhR+p5KR2U5y83yon7ybbI4V8zWneMUODuYIT2DeXjJFAykwfqzq8e+DGzVB\nv0PLDavs5zb1BIzHiicjuAkcL7zV3n7BOq4m5N8lQf2ZyDEgmC5kSxYMAThm\nqE223YyhwB/9DB9awhDWA16h3XVkr0O8hCYS0urQ+L2Ypy6E/6GFpf+TBWva\noJi42iCbJkclaoDIry+QJVLJ8A/KNk1/5sJc1UqdKlmBE+W0LqsfyLpPSFHT\nxrtTCreg8/8K5ZisAredTMpYciQz7vCe0saXxNYf3K2j/PWqE2RsMAuBBdd4\n4wGwwN7yrzX6Sfh5T72md7L6U0TYfC0ukxM21IWcDtV8KQ5qWBTXxOAU5Ml2\nUTN/UsuHwjO02PqM9sQBNMK+giH6H00ui8Z5mlVaJoRWu8A9sHbYeOBTtar+\nWEHZ\r\n=bwTl\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button/styles\";\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.**\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n**Note: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.**\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button--icon-leading` | Optional. Styles a button with a leading icon.\n`mdc-button--icon-trailing` | Optional. Styles a button with a trailing icon.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n\n**Note: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommend always including it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color-or-map)` | If a color is passed, sets the default container fill color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`icon-color($color-or-map)` | If a color is passed, sets the default icon color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`ink-color($color-or-map)` | If a color is passed, sets the default ink color to the given color, and sets the icon color to the given color unless `icon-color` is also used. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color-or-map)` | If a color is passed, sets the default outline color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web 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/density":"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/button_12.0.0-canary.c50d20bab.0_1619737348558_0.5405555054388032","host":"s3://npm-registry-packages"}},"12.0.0-canary.474836ad0.0":{"name":"@material/button","version":"12.0.0-canary.474836ad0.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"87c85f78090721be09214a076875b3a75c716c1c","tarball":"https://registry.npmjs.org/@material/button/-/button-12.0.0-canary.474836ad0.0.tgz","fileCount":40,"integrity":"sha512-0iMhXtFvSnVoNGXZjltOKoLgr7FZT+boiPrD8saLFoDAM8voLcrXF/halHkx+n90A0SzD3p8vmIZPNg80KhebQ==","signatures":[{"sig":"MEUCIEHpcKaasFSLYeBMUyryOzf7oyxHMNH/hNaepC4u+VMAAiEAj7/tzHsPUPhy5iuvgvDMOCi9IrJS/Vn+iSqpgJH3qsI=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":504272,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgjM0iCRA9TVsSAnZWagAAWG4QAIWVSCVg9Zla4LzVgt0B\nHBVzRWei9OrYuYrqbtxMeJKBzoEKkbMQRoD+maC6Kszsr3USZbB2CQZdS1mS\nq/c9Ez/wqCaR4kAluy3Iv1dbz9dsgZZ/ZzG8i1AEn5A2rtQkn2Lg/bd2FjpO\n861cw0dtxypRQMbaLJU6RNSHeu9ovJWtJCLFhvmink3M/wCPC551Sj0/2Zfy\nx5zr/miPsZAXwKSy4DF14o9CR2q/y5hZr/+As0PCQ4VZUhCnix0FNF7Khh0+\nB2FKKmLW/mz+aqvqUk5JgXhEBKHmjBebjs8O+3NvXo8Uk2p9aeTSzIggrWIt\nc1xg77fxp0P8uZtjrJ+LMYZBPBySA3Nj00R8m50rG+A3nb4PddO200ytdTA1\nsxtJGpKXwCjGrMDSApZVs3M/bIWq1uezt/DZKxp9ReMVu6CBZKIScIdXzx6Q\nrNjgH/kShn+3ci6Qdx0fPcbRGiYAf+PbUFnr1NHWhIvJTxWnXQGlyjTtIMJT\n1C3s78S/wYv5B1RRFA52IpmcXAqYF9r1qcd+RbM/Xw1nAgyMoRWFrcEapGWr\nV/aEfSSekVnnvnTFz4DZqcTmHP8v95iVwU/8lLHPCEgJodQ1jb1vPslHRLvI\nAz3mocgS44BWPuWaUKjs+DQHw8yDKOqQjVl44cnUSatnhIEG57IFhyyI16pd\nWswA\r\n=xLUs\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button/styles\";\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.**\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n**Note: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.**\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button--icon-leading` | Optional. Styles a button with a leading icon.\n`mdc-button--icon-trailing` | Optional. Styles a button with a trailing icon.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n\n**Note: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommend always including it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color-or-map)` | If a color is passed, sets the default container fill color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`icon-color($color-or-map)` | If a color is passed, sets the default icon color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`ink-color($color-or-map)` | If a color is passed, sets the default ink color to the given color, and sets the icon color to the given color unless `icon-color` is also used. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color-or-map)` | If a color is passed, sets the default outline color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web 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/density":"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/button_12.0.0-canary.474836ad0.0_1619840289708_0.02655714538039744","host":"s3://npm-registry-packages"}},"12.0.0-canary.f5ad92287.0":{"name":"@material/button","version":"12.0.0-canary.f5ad92287.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"0f6aefb19e63b57d792c2a55c08911920a50c349","tarball":"https://registry.npmjs.org/@material/button/-/button-12.0.0-canary.f5ad92287.0.tgz","fileCount":40,"integrity":"sha512-dBeyMh4DIQbrVvm3FXV/bz2CigQlRzxlvP1wLuIahKzGCnYoLNH+3bElXlkSazeX9dwQVXigs9/f+Cqn7a0Vdg==","signatures":[{"sig":"MEYCIQD5IcW6pNnC524IdscZBBJqRzmjb4BsOv3RC5PI5pMAyAIhAKU4lwXFZlYBTRuq7VMSeEFx/gR5/8gEw3UM73LINBAX","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":504272,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgkD90CRA9TVsSAnZWagAAyxEP/1HhTauji2Z4Pi+SwXNZ\nTaccL8GC3yONhqAt4RKNjx+69nVlOD4kPRCPR8V2/qxX/y1NPaZJIEM7AEWo\nki2/oxTWT4N/TdZoq+aTPO2mcDG7nE12wtaddABb2njAz2SAGuvPMaP6+b/O\nZJglXzCFA6FkF7Xh9gRn7sqQAkwMxOfDMfh8CsBs2qMuXBdZSSxhylASOhlJ\nHJC2ShyZZeFW2V2svAa8NnY6wzrgA79oQTPgP75kRmgBUXVBVsO4/lA/Xjn0\naZRzEl+zo1YyyTSTWaShUxP5YHRvynOtdkfD8yKg/ucU0q3RiOi5REOPCEnB\nh134KD7uxjfqy0OtVlJ1auZTOSqcYgG6dVaX/ogJdPyuQ5QVMx2h98VuEZGQ\nhifRc0GkKemmqc3ka+gS/uiZflw2oSllpT9V5jHKt2sNiXPXBbtN/E3ojmFL\njBv0Qg7dfBiwpyOL6GrxWUmRk0YZzYKvjVzCBldCJdWdEj3J/lvU8sHEncL6\n0pLPsyqYEVXtUUnM3dLt839mKySsaVxNFRa/K6mRtTC4t4qfotaGllINvVSY\nJcFRb8zBb/qzwZ+VcrzUZIfLJlHdlwtl9+KkW2Ixr/rC3dhcLNO/IJn7Yczn\nyb0PJspRtQxgVLFCrFC6VNQHxoTRBZUaaZxfmauAaZHnG1gAFRdRxhXPAHW4\nHWZi\r\n=+GHM\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button/styles\";\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.**\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n**Note: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.**\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button--icon-leading` | Optional. Styles a button with a leading icon.\n`mdc-button--icon-trailing` | Optional. Styles a button with a trailing icon.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n\n**Note: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommend always including it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color-or-map)` | If a color is passed, sets the default container fill color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`icon-color($color-or-map)` | If a color is passed, sets the default icon color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`ink-color($color-or-map)` | If a color is passed, sets the default ink color to the given color, and sets the icon color to the given color unless `icon-color` is also used. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color-or-map)` | If a color is passed, sets the default outline color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web 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/density":"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/button_12.0.0-canary.f5ad92287.0_1620066163810_0.12998766917057702","host":"s3://npm-registry-packages"}},"12.0.0-canary.af453daf8.0":{"name":"@material/button","version":"12.0.0-canary.af453daf8.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"8fa2a4da47295e05455c2205841378bb76e938d6","tarball":"https://registry.npmjs.org/@material/button/-/button-12.0.0-canary.af453daf8.0.tgz","fileCount":40,"integrity":"sha512-vAceqqb1JN/AZNK4I7D0rf9BWkdjWiSDgH9bexwqRckRqcMHsnWZp6g/+MvMJAHM2H96+A3UhxlzFXW6RtHGKw==","signatures":[{"sig":"MEUCIQChut9UtZg1UvHFJ5kdUtlh/ghodm1XwOWt97e+DF/CZwIgDso0BBSbdhCi1r0sVxwbfS72KSaQx2GdWdpc6JW7Lgg=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":504272,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgkEbICRA9TVsSAnZWagAAePsP+wWfCJsEgJcs4AxLPH2/\nW1EDR9XUYrb6b7fFAGElOuRHXpmZ1cSNnDTpaWK6wtVn12UYmp5P4k8SvaQd\n+rA7bUTlsVZDZgPKYVNMPwJDZGNeNoKFOkn/nl2TFoAJupbEfzPpH7WPQWtr\nz/nOxz+fA0IXFJja2mgjbhMIR+WJ1zRkAQ9bg7wmYykpVH05ZT0dOuv85303\nxh8/2cnTDYaUWvqAu1l53ozBr+ZCNPt5r4NSrQErGJf2bgaB0AXgd9q0yHzz\nJ8RjXP7yPHJgHoJbmKk7dy+MX1zjUZmEWiAp2kyeiIdO7OskBRGBqVtvvB1v\ngGjPPtzFAQZG0yQYTa/+WKcA+14vtuV/irm+8BUlK/rl30HHV7LNANouxGEf\n80JzXn4PbR4w4u3hJf4YDIPkCGczqafSp5i8udxe1fedoa90xPF1e1tldVB5\nC/x9DmqqXZTa0I1TD878XyFRZ1U6bCXv8DAxInh1Htalcqh/6icP54acRxcn\nXgBIA+PQchu5beQxKAmbBtcbkYR3uUw/LoptfNC3CNlPERGEp/7RjmLxfLQq\nDvNWOtgiWUaBLReEil+OR/zs1+vO2eHDJF6hJn24hYJOI1aN8nveh9UNdxcB\n9pDvMtaRTjF/Vfllqi7uoc8bo77hGiyZV6krfu03KCu74BppWLbp+V4vKivM\nFyxA\r\n=ZMtT\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button/styles\";\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.**\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n**Note: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.**\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button--icon-leading` | Optional. Styles a button with a leading icon.\n`mdc-button--icon-trailing` | Optional. Styles a button with a trailing icon.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n\n**Note: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommend always including it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color-or-map)` | If a color is passed, sets the default container fill color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`icon-color($color-or-map)` | If a color is passed, sets the default icon color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`ink-color($color-or-map)` | If a color is passed, sets the default ink color to the given color, and sets the icon color to the given color unless `icon-color` is also used. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color-or-map)` | If a color is passed, sets the default outline color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web 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/density":"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/button_12.0.0-canary.af453daf8.0_1620068039993_0.9471735277234374","host":"s3://npm-registry-packages"}},"12.0.0-canary.1f1918c24.0":{"name":"@material/button","version":"12.0.0-canary.1f1918c24.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"80cd60ec4c03f98923ab5b4373e6805f4179f07c","tarball":"https://registry.npmjs.org/@material/button/-/button-12.0.0-canary.1f1918c24.0.tgz","fileCount":40,"integrity":"sha512-nCaVWjZYr9ykmwdcUO9g19noOc0sNJjVhJb+yf+8vgV8bzkT5imRvcHwulS2CQ8uzVbPPX4OgfvZapxu8L/8SA==","signatures":[{"sig":"MEQCICHPg0RsBd6hMCZLCyh6KqHV1/EALPk+ujEzocszszWbAiATcBG2Cx+6S9OZ3CwxvJZ+euaUFYC52C9v2YxutJ5uUQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":504272,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgkE2VCRA9TVsSAnZWagAAfv0P/jzfQnSDfMxqvgxcipbl\nhOqvM6hFM5DkOy4ywL4wVCcIUIZQWhJeUfkKU+xpOegJEECJTQ1A7fSApHsz\nONUOsyj47VdqNp8kV9xrMXZUVHUtiNwgysz5Y0Kck8O6VszYFNWq7itKW5hF\nio8Ec6oLZYxKb3a0AwEZiMXWiF/VKnlJvEcfX6g92Oz1vqRDtkystmfqND6F\nLVT/kosoQF1lJx60dmWEMwC5VmdDmvUVMHxDYSF2FaIAinqz3pbdkOfQPQdk\nsr3K44DnG+1VdpStFiwUesophUHDKiMOe68CrC5LrgcQXUTNlVUzgBYc2njv\n4OGIETBHkGgqhsWRDHYAI/iwxnvFRs9JqpoRyosgJnr9plPrf8ATY0vJucK7\n5fNmosT6Zis/YFB1R0+WvUH4EQTXD6tRH6Vfoncsj2eyjOjD4WhZKtluUmP7\nTYVzXM4UyXMc6+UszZtzD2s/A0BpDdm4GR0SofQXyXsBCgs5YCuBUepESPda\nmWa56rjEZLUIJbTH2DgFLORp0qaPmrRYtmOWLZfn2TmJDGYM9XWHk7t7tDG/\n6//DRVA3Mtl39BRsLK4gdsti6+OemZumRpYi8nnFjM/m0EWtbgGZVkejk6qH\nsQ2kr8Mu4ViJ18bezVaA7MunD/lAeuq0E/kKnE/JiQcyMJ+92H3jeyuYk8+e\nnTws\r\n=TGHd\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button/styles\";\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.**\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n**Note: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.**\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button--icon-leading` | Optional. Styles a button with a leading icon.\n`mdc-button--icon-trailing` | Optional. Styles a button with a trailing icon.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n\n**Note: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommend always including it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color-or-map)` | If a color is passed, sets the default container fill color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`icon-color($color-or-map)` | If a color is passed, sets the default icon color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`ink-color($color-or-map)` | If a color is passed, sets the default ink color to the given color, and sets the icon color to the given color unless `icon-color` is also used. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color-or-map)` | If a color is passed, sets the default outline color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web 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/density":"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/button_12.0.0-canary.1f1918c24.0_1620069780903_0.5083902339627284","host":"s3://npm-registry-packages"}},"12.0.0-canary.33148231f.0":{"name":"@material/button","version":"12.0.0-canary.33148231f.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"ad70fa7b5f90d5364bcaf9b03040b3bce4098cb6","tarball":"https://registry.npmjs.org/@material/button/-/button-12.0.0-canary.33148231f.0.tgz","fileCount":40,"integrity":"sha512-Ohar88vadQT/eym+bBHTUrnG/cI61K7jC6YFvFBsC207zZ1g83wJaUR70uAThph0qiJJJ0Pq6rqNZTln3VlfAw==","signatures":[{"sig":"MEYCIQDFOt/GoXzq06WBQNI36h5t2utsqs7n6/BBZReDYNqHugIhAP0c1Y5zjgXia2e4vGoxtXrssTjthsdfXHzkRFRERA2n","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":504272,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgkFFkCRA9TVsSAnZWagAAcWkP+QDtaoJYUjWivaVz64L+\n2Rxxr67X3txKDFgnTgdI2SYp+rkYGP+U+Ulbg2GsPnTmhM5JDCIVhxNFEK/a\nCXeAPHa23YxLyzBkA12NulGh1XSt1lEFT9xZPvJAdhLVcyx+P2RrfwEZsQjB\nGoAfnkqpYHOSGMTSfhPbinDdF/gWohu4DuQgARIkRRoxaBiMyoO8leod0SBa\n+m1IH76eY6sFCpaHpRSBFmjTZcQesHghHyXE+e48g7UJtCKzLl8TWj1qNLRP\nb5Hqa3nZwHilA6VnzW+9EIjT4Aw2xpdARKL/JEUKPba/A0zTnTQU546de8Bb\nInX5i6RgUvaXLCTZHy9/fX563nnG+hq5/tc8t7Aw78bF0ksjXfmTLrEqUrWa\n8vXMRvjeCv3i7oc4l2tGAFPTN5ZZDbCMF2MtHWrZHt+UNDT2Zxuo27MBxh8c\nT+Oo99iDFlIft+0zBF6KCEzi5s2tqxAYOfm6nkri9EwuEjGc/FZfP85qRknw\nU1x+WJW6tknrkBi13n1bK1Yr9xSPzj1grcXXeZiNNFbW1C18TUX0wRdmGGsP\nNitkkw4o73wtf2H8SnFmNKEhbCBjl7jpbAQbJEnGr+iBy7KT1U/GWsRbLRCu\nrhqgEuLMRCbhWocrSfQqTnmTpJu0v2Vb5eP9p1gad2trS3UCOGd0iU7uPrbW\nZRCe\r\n=xDlq\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button/styles\";\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.**\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n**Note: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.**\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button--icon-leading` | Optional. Styles a button with a leading icon.\n`mdc-button--icon-trailing` | Optional. Styles a button with a trailing icon.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n\n**Note: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommend always including it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color-or-map)` | If a color is passed, sets the default container fill color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`icon-color($color-or-map)` | If a color is passed, sets the default icon color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`ink-color($color-or-map)` | If a color is passed, sets the default ink color to the given color, and sets the icon color to the given color unless `icon-color` is also used. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color-or-map)` | If a color is passed, sets the default outline color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web 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/density":"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/button_12.0.0-canary.33148231f.0_1620070755555_0.24540886382414495","host":"s3://npm-registry-packages"}},"12.0.0-canary.06b76fa74.0":{"name":"@material/button","version":"12.0.0-canary.06b76fa74.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"57ef2a023937ede3c683c93b3c9b9e0b35f180d7","tarball":"https://registry.npmjs.org/@material/button/-/button-12.0.0-canary.06b76fa74.0.tgz","fileCount":40,"integrity":"sha512-YIKHOle4T/r0IIsCgOKV0Op0D6uX/4gnPXjgTwwGE2M7QIeddEl/u8CRRAj+uNXB7/KdFQmTnedMkvBHNpXp6Q==","signatures":[{"sig":"MEYCIQDvi1KLsIZ3VXmRatQ0VZ85bFexMuI6THqvyWppRw7/DgIhALCjy5hSuIrSmviao8633TWU9N+9cC+ALf4+MotLEnQP","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":504272,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgkFMNCRA9TVsSAnZWagAA/kkP/3KQ0N7mjQq9no7yC2fK\n+UapACf5IJXKX5LEZCHd7JJ0iGGSAVcTkZWUkMC1WCeDz6k2gXXVa0qIY2vN\nOxLwsdg8KgI1GQQxBFp//QYIEHzd0mahHJp3fH6Ny/JiKVeasNHyXiOmjBQL\nk2hvsBzncp3hA9B3AMMmZmE10GwtSsej08GtakAp05/CCnCiEiLY4NsjJmJM\ni71Jp+vQvJz02mcZIdCxla8kxjenPGsARgksVyXGE4pX5rLJxyp/uUGdQcdn\nRUlxVX3P/PWukRYH0Bjyf3g8cApNQy6DOXJyaxilRNUwoH8vOCv78KU72lJ+\n1FPv/jPvZDFcEnAmponU5d9wiW6eAt55JGbMaiAUiekAJBjktwCNuC6rQE8l\n1P4WcV/Hl33LLkA3Pqm4FzCln28S874T/tfGr329K/YOCwPB7lR6unzcBKGN\nxAnUD9FnN+rbrPljxbYt2CaXzRUfPxAZt3hPAyMfis7elpFj8+cZvmMFRGzL\nE6Md/bmx3clu4tL2ymzCox4gwzIEpBK9w+3oUODhDVf46li10v/oBMYbJfsx\noiJhUmaLULuXwZh01IPZ4c1n23SGKifH8AspbW67900jula0GRMenXBO/ZUn\neA09O6D6vVU4vIZlTdM8HYQyHlc04l0/kkkzqJiyujLwfKyNuJDLfVgMrLfD\nQz2F\r\n=nZfz\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button/styles\";\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.**\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n**Note: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.**\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button--icon-leading` | Optional. Styles a button with a leading icon.\n`mdc-button--icon-trailing` | Optional. Styles a button with a trailing icon.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n\n**Note: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommend always including it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color-or-map)` | If a color is passed, sets the default container fill color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`icon-color($color-or-map)` | If a color is passed, sets the default icon color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`ink-color($color-or-map)` | If a color is passed, sets the default ink color to the given color, and sets the icon color to the given color unless `icon-color` is also used. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color-or-map)` | If a color is passed, sets the default outline color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web 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/density":"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/button_12.0.0-canary.06b76fa74.0_1620071181157_0.3051394592651726","host":"s3://npm-registry-packages"}},"12.0.0-canary.7c5000473.0":{"name":"@material/button","version":"12.0.0-canary.7c5000473.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"92dd4e1c932fe5ecd95acbb7e39c93f607eb2085","tarball":"https://registry.npmjs.org/@material/button/-/button-12.0.0-canary.7c5000473.0.tgz","fileCount":40,"integrity":"sha512-KNHTcoe5T/PYws0DrK9HNrsH7EL7qgNm3ddc+TyyH+nsCNSUl51wnZ84F1HSakY7R0dwopaS5aeY5YEbnuDrjQ==","signatures":[{"sig":"MEQCIFG57e7VgzjVmAsCZNo/GoyCMA6ejnDp/uFbPUTn1qQVAiA92TUspPMowhWd9vXBHZ20fLTmc+zeefwDga3mdYEjvA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":504272,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgkHxDCRA9TVsSAnZWagAAn10P/1r2JMqm/5jSORSvUbDa\nnKXS1tg87iHRiNNIq5mJ4oDl4s2N6RxtKvaZC42fEt426ZVAhZYsSpKoBaPg\nTjYuNFAA02ezGsqy96UoWCbGbWH4JKGyAacTx2Itz8UGIYWBceGKM1t/GThG\nvYhLBAoBvM308CJ/Siuqco5KO4MEaNcjlwiao0IVuo37hxvBSRxCSc/5VvnJ\nx/7FQcNYuuFk/GBI1JNCpAWbNO06eu3Ql2hEhJDKPRQqarQ6W2L/J/nkuI98\nSRb5+Q/7TBXVea4lC6GfK9I+ldNd9BzIY1pMHiEFgENHNtAcdS/rXg+/7RBs\nOBxK0/dvBR5zqw70uzfxnI4IaZBNIbXmC3lIbVbsvAKz8MNBM8zFQMim7pqD\n/kPmLiDrhQg2+NzvFLARWN46oP2DGQq0U3vDgt6rNQKKOvHeunrSfITH+u0v\noXZAmZ29zgwT2XA2BJOlssteKnIfm9wgAVMgoTkJ0TqJqY2ZSDfkkedqR4KW\nQa4XBL6TZNIPW+ASU93vTcG2TjpfBQuHOrVgmN/hirSw4+Ne/vGtoWHXN6LF\nX61a1Wo2hr1o4ntfu0t2e9CmckskGO+s+VvuSQrgdy9gM7ZE66FnxrDSko18\n2Vsk7eND4GPNI2ZVw/drGi1l7AdcE+9i+7+Y97HvJjG/JfJ9rN/j4Ud1mC7g\nuWAs\r\n=ptaZ\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button/styles\";\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.**\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n**Note: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.**\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button--icon-leading` | Optional. Styles a button with a leading icon.\n`mdc-button--icon-trailing` | Optional. Styles a button with a trailing icon.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n\n**Note: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommend always including it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color-or-map)` | If a color is passed, sets the default container fill color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`icon-color($color-or-map)` | If a color is passed, sets the default icon color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`ink-color($color-or-map)` | If a color is passed, sets the default ink color to the given color, and sets the icon color to the given color unless `icon-color` is also used. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color-or-map)` | If a color is passed, sets the default outline color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web 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/density":"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/button_12.0.0-canary.7c5000473.0_1620081731020_0.9891262989951835","host":"s3://npm-registry-packages"}},"12.0.0-canary.de997644b.0":{"name":"@material/button","version":"12.0.0-canary.de997644b.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"e07d57ecf3ef10203caacef8acda024c014565a2","tarball":"https://registry.npmjs.org/@material/button/-/button-12.0.0-canary.de997644b.0.tgz","fileCount":40,"integrity":"sha512-HGslQeD2vd54E42629FU9rITvlEbLkBMMhl73zd1yKrMWUY9dzoEDAyApBNvkRjW/MV/Ih/xFRPQ54uCabS+Tg==","signatures":[{"sig":"MEYCIQDnxLnQHiAs77W05Cb1Wqqw7ErNHP+5RBBhizwUvm1NBgIhAPvG7ZBUHMCVtsIRAPbKlZupljexvNEf4NtoBi0+Sgob","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":504272,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgkYRMCRA9TVsSAnZWagAA/XEP/A8scV966jvKIhCK0V61\nEzRCQqgWpWr8pCxUdGv44vXo1sMecOMCY0FO5OeV8dGi5PVh9rquX8FOXzLe\nsKju6Tgvd/49TAIdKjKT03Uel46OZwPpnB+f8pYUNmKeSsrMCmRstbP+hDwm\nTyuS9AqLb+dTO6q14cLOSfVr62w3FnXUwBs26EXfYxMB8TB44pVaGjVB7VgQ\nuXSalHvDzrUxsCNOu8VSftSeS1mafoX27w5DbuxLHyeSN/ZWIcEsD8PnROpc\neFbvUq8nDpSJpEhR2j85o/oT5r31UVwVXTY3dqCfhQQONSPJduiqfgTcPDsH\n63J0mOBswAEmhJO7MMCk1W9PJMa7g/VsTXCn7583+lTsmA2/pkdTCUsFbvUC\nzWQ51HxtHSFa0Y4dNr2iwzxSLEH2WfHKGGzCJH1k2JfgLOZ6LRfYGfkr4yOl\nyjykUSgozm9PHAiyJdZBZ+G2WxjPj4wFHp7PAVjI7eXw/VO8MOwsmrH46NQm\nmPfkP2wQ3YZddl/5ZOemIhAMlOyHQRlBaENHX8RNPJD2wjGke7tkc7cvg10R\nf3okDbaP/fAvrL3/rSm6B2N43Jb6mroon2VMGIYnIHxWK/r91z/ZcinHMKIk\nxlMlgk120Ca/qmNol2yGuQiV39K/FYHW0FWAY2+5O11pQJ/XV4VBmSscGk/0\nqIFe\r\n=LeJa\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button/styles\";\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.**\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n**Note: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.**\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button--icon-leading` | Optional. Styles a button with a leading icon.\n`mdc-button--icon-trailing` | Optional. Styles a button with a trailing icon.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n\n**Note: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommend always including it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color-or-map)` | If a color is passed, sets the default container fill color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`icon-color($color-or-map)` | If a color is passed, sets the default icon color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`ink-color($color-or-map)` | If a color is passed, sets the default ink color to the given color, and sets the icon color to the given color unless `icon-color` is also used. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color-or-map)` | If a color is passed, sets the default outline color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web 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/density":"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/button_12.0.0-canary.de997644b.0_1620149323613_0.7141682313511863","host":"s3://npm-registry-packages"}},"12.0.0-canary.d4d7f1cc2.0":{"name":"@material/button","version":"12.0.0-canary.d4d7f1cc2.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"07a559976321777694dacfebd82bbed155aa7b4d","tarball":"https://registry.npmjs.org/@material/button/-/button-12.0.0-canary.d4d7f1cc2.0.tgz","fileCount":40,"integrity":"sha512-Dr9QiM3cxuSOkmKfs0Ja+Y36rSgiMA9UHlvE8wPbiT27QXxE2GI/NSN6mcFpHvKzWDK3FfhGoV/wOXi0l3tYUA==","signatures":[{"sig":"MEQCIHrq3aTVJtJ2RXcgSwiRMLpcgSt6MTUBqlD/dIB0bHxvAiAVK0VUvcAViAH9bAY62BzoR2TvahI5NtqbnXPrwWnuEg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":504272,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgkYqTCRA9TVsSAnZWagAAKBEP/0aNzBMN6tNYx1Xe0osf\nJ5pSKrVsuWpDXIJKXijreAATir8wpEix4O5+1Sb+JATEUuIkwIKn0qBtTe51\nV+m+eAq0cWx6qYQg77Nm9Sq/b/w42rDTl11B6GLsA3eIHAKJbepfPnuxeU5u\n7cLvA4yVMo5xAbrh9K7KAKH/jZzImH6kfh9DpxM9615IfBsCpkPZJezprrZB\ncoO4Jne79w2gmlj1LMRC2Z78lj+VdzZ4II7JoZFoC30FlBGzw+1GeUfJn15h\nusblmWLUJHi4FBljIIYv2U5zfIYidLX0o5XTH2/m46mJnhtBc2OnF2AP7h09\nqmb53W3qsBhiE3+RnUvvQu2/9ieh700L1lYpDSYfs+2YNAxtlMEDSevl/7c4\n6D3fTUcRY0YU+zbDj5lpHINUr1M1bEuBKMwjlJzFcJanDBOUTeFKsw5dWfmT\nyFSlhUhEUvVXXnMvdxJItM/Bswzqph5JnO5YIvTznF+JY6NusrWCMQVcLQVq\nhTTHeug+Fsu0OMcz63G17/iWiJdVm/HBvmQFLthXVZdfL68sxlvz2q7y37b0\nXcZWR1dOWzRx8rMnw9dLgfHqatU7UhvuF6EVoEQCrAl9s/EspNxbVdU7aiFi\ngsG2gNwcxSKZGQ59Pq9iiBv3x1NV+1BTXkr7R9Jvq95jlAFY35lGEoFA01ZK\nm07s\r\n=AJF4\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button/styles\";\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.**\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n**Note: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.**\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button--icon-leading` | Optional. Styles a button with a leading icon.\n`mdc-button--icon-trailing` | Optional. Styles a button with a trailing icon.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n\n**Note: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommend always including it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color-or-map)` | If a color is passed, sets the default container fill color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`icon-color($color-or-map)` | If a color is passed, sets the default icon color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`ink-color($color-or-map)` | If a color is passed, sets the default ink color to the given color, and sets the icon color to the given color unless `icon-color` is also used. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color-or-map)` | If a color is passed, sets the default outline color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web 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/density":"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/button_12.0.0-canary.d4d7f1cc2.0_1620150931437_0.7904348632918641","host":"s3://npm-registry-packages"}},"12.0.0-canary.be999eb08.0":{"name":"@material/button","version":"12.0.0-canary.be999eb08.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"b03ef2400b78ae998c34d47cbbe895be97abf691","tarball":"https://registry.npmjs.org/@material/button/-/button-12.0.0-canary.be999eb08.0.tgz","fileCount":40,"integrity":"sha512-PeBX1JgJm2fnbsARP0HoxQ6CBWxeg6zs0ndHctsnvvK0N7err8QTwlPJZ+OFk3t1GyT5VG9pJgpvp0oQIkBeJg==","signatures":[{"sig":"MEYCIQC4E/618AzZPX0DGQm+3/VlVAtIZOs/kcPR33uYVSt63gIhAM6uGDYpyLpZYaDKme4XA2nB7/nbZW3Rx/IfmkaasxgQ","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":504272,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgkYvRCRA9TVsSAnZWagAAQTgP/2qM4/+La48deiSc8gc9\nNdE6Iv9TmOBo2k0+N9E7k8hkdhFlfJTGLMvfHtJGYrn4H9VaM63ceoo8nSYN\nXjK7vsy2ZG4NC0U5m6FX1UwYV7FWIAgh6ah/uXWUYXF03mevew9hMTPe3kVA\nHjx/YO6rR6x6lgKJlXCgJZ/8xyBu9ESg+jnKAQecav/n2Ncs1RmA783ktowF\n1JMfboki2FgyN/xmPlqncie23qid3W6MFUVaYa5Gsir7PdnmuXmXv2BI6EW6\nGnPj8TZFmmcS1zinCgGh8ZPVZPkiu01+CHAIKslU29UnpLboEi5/GfnjIqsI\ncWRV48Hj5yd+/lJJYVdw+O4MU3sVci5s5J8lN1NthLy2m04sepYjAenbqtil\nxyvoLQpH9yLCfazRDqdFPu+gzLul4D7nx1zePri5fdw49SqyYJHBePIZwa3f\nId6kaC15zpLuiD9xpM8HLMtCLKY1naxiawKcR3E/UpkB2klDa2Z73+sGQqH0\niMau59LA2irIJT2DSQPt8f8GMKKCeBFYq2GVJw9WWjNniTX3y+uOerQTUqXY\nYFpaQH6dmnuezJzQFXTspI8xzR7sHmYE2AmX7oEM6h13RcSBLm5Vt6ldlLp2\nyFe4+v9016vfM2PpCFLrU+ofRdfMNbGGYTNFthC2wonF5RoIoPOpvZ7TNUlz\nenFd\r\n=XVsU\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button/styles\";\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.**\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n**Note: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.**\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button--icon-leading` | Optional. Styles a button with a leading icon.\n`mdc-button--icon-trailing` | Optional. Styles a button with a trailing icon.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n\n**Note: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommend always including it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color-or-map)` | If a color is passed, sets the default container fill color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`icon-color($color-or-map)` | If a color is passed, sets the default icon color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`ink-color($color-or-map)` | If a color is passed, sets the default ink color to the given color, and sets the icon color to the given color unless `icon-color` is also used. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color-or-map)` | If a color is passed, sets the default outline color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web 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/density":"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/button_12.0.0-canary.be999eb08.0_1620151248883_0.8631988069681507","host":"s3://npm-registry-packages"}},"12.0.0-canary.eda1705fc.0":{"name":"@material/button","version":"12.0.0-canary.eda1705fc.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"a508dafb6ef5e6dfb373a6f6505b4a389f3e5637","tarball":"https://registry.npmjs.org/@material/button/-/button-12.0.0-canary.eda1705fc.0.tgz","fileCount":40,"integrity":"sha512-YhMW34UKUmhpne3kiRFEgKEUDdP8hR4U1OcjECZ046t4hM3RcLeX9+nxe5TVpnLyUP7q6yboGlARNpol6uKsVA==","signatures":[{"sig":"MEUCIQCRaXNV0DOL+4UhV+Rm9IJe76Jbft0PO7dYcqZLFqadQwIgc1sV/vXa0gh9pSMYedKyuRQxIrMZ83l9ZMp4D9xYOu4=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":504272,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgkZw/CRA9TVsSAnZWagAAjnkQAI4EPosKv2t+/IOLkVMl\n8fpZqWeKYVbcBrZnbv2/5FgA8VWJpbCuR9CA3EM/u/qJml7nB3YIiuMClPyD\neeI78NJVJM/OHTWXIm2oGi34UuFE6kt2SFrACZcucRWQHfFjSTWO+BG1Si1d\nazWrGQt543R7v+LP32bZ4v2eMBj9f5k0fQ+Z/qAs0jGV27k3qy/Fd0jdnazs\nrITWiy0w/vETZPgApw3eVfZX/E3RnVVmKXpoSDbU0bOV6mtAx871Q5fEoxD4\n2gSj8/Iq36AOfnZAbd33euAaYGe6tmDKhugJwih4EAENJayRk0J+Da+s5f9Y\nPUvhmXGrdI5rchJFequyGCGlDKOmrshSBDewvaazITuyWAaC822YcNR742R5\nADiH0wbFihwQettF/505F1l+J1UJhX75pxB0POe8D3IKnSUqF2CMjIPbkS4b\npJ40mxNMyjhjwuBCeq6QWxFJFQs3UtxDSMhPc/1YsovQ0xNUIyO7lDNxnGZF\nwrIbjBRZoikbKIQq9fr+Uc5KsaId7MDfOd5e7KzvPRUewmaDTzyU6EMqm7MJ\n7GM83ss9V1NqysnVOsSdwDOG2YuhdievhMW7TAdkIxwDsaTwIcQFpy2Dm4PN\nanOAZrUN2OQpWyieIuuhGgIX37cbcgAZ2Kp7UCytTWQJrm9c6Om2M8zu2JbS\nqryr\r\n=H+Rb\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button/styles\";\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.**\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n**Note: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.**\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button--icon-leading` | Optional. Styles a button with a leading icon.\n`mdc-button--icon-trailing` | Optional. Styles a button with a trailing icon.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n\n**Note: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommend always including it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color-or-map)` | If a color is passed, sets the default container fill color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`icon-color($color-or-map)` | If a color is passed, sets the default icon color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`ink-color($color-or-map)` | If a color is passed, sets the default ink color to the given color, and sets the icon color to the given color unless `icon-color` is also used. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color-or-map)` | If a color is passed, sets the default outline color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web 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/density":"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/button_12.0.0-canary.eda1705fc.0_1620155454910_0.9959170298119095","host":"s3://npm-registry-packages"}},"12.0.0-canary.718c90178.0":{"name":"@material/button","version":"12.0.0-canary.718c90178.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"a2b273f26ae5ad025391c72bc08188620745c2c0","tarball":"https://registry.npmjs.org/@material/button/-/button-12.0.0-canary.718c90178.0.tgz","fileCount":40,"integrity":"sha512-uPuhoUM20St68gQsexKIGnTqlTjiKhtTAj819JdPKLbSQJQbfB+uYXgIS7Pdi59s/OmjXlPIfEJfc9ob0EZgXQ==","signatures":[{"sig":"MEUCIQC95Mc0xjZOLPsVcwD7y0AYJBrX4EM3ds4zZ5SRcCRvjQIgJPe7/f7AGT5uEImXV/X0OP8rkvd95Dso8RoUstGup0Y=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":504272,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgkaBPCRA9TVsSAnZWagAA64wP/jJbLqXssRQxKgVHZ9qQ\n7eKNwDe58OXMaEOG1bofpc/ja9Qjn/XAg5WmJwZ+H1y0REXTpO0KXMsSBdN7\nBLqVWWmQZqLJLYMSFK+qu6OnUqtJ2iIW6zDa0IkspqzQybE8FraPfqEosKBj\nlXFboZ2wOGOP+JH84j/d/n1dDY0rBMr8JkKK/yDobd6dJNxNcDMZdTlFTqqM\nooN60WleC5t7jdxnjUdjq+d2Se9QRdu87AF8+L1POYogZ71aR+Zjnt7SOEeE\nfk+MOnmkWeF4s20y6Pn9kTvFjrfZgzUTVBMKBS3xiQcLMGdgSlqaGbe1T1vt\nerbBXS2pL18DoCd3sAaeu6HeuAGmxnfos6JycSCR6ZUbXskjJhVJvC8v5Iw0\nsmq8sugCkYf/1ByP5oudrBnFZPDj7UVV6l++SKA98kIJ450xXu3m25rqLDf6\n0CbUWrUmdI+Llmty+TdRtx/nvFLcxHwsUxicDoOS6os/0HGm5EcnxFxw2q84\nqkex/6tuvQLJuLUkC9ITMNS2rNVDSmCclmiwmr5xiQcqk9jSDNwG/RrFq53e\naZeHC3UGJRcVUqyxbeMo8ckyOpKIjgNKiGrj73WG2UFpPAKwsmKR55MwbPkR\nhNA9FQX7rUCGxX2YQiMtdlHCjtrtLrPp2/UQh4Vx50syDMXQS2g0Rwcp/tci\nsIIo\r\n=akwH\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button/styles\";\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.**\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n**Note: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.**\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button--icon-leading` | Optional. Styles a button with a leading icon.\n`mdc-button--icon-trailing` | Optional. Styles a button with a trailing icon.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n\n**Note: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommend always including it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color-or-map)` | If a color is passed, sets the default container fill color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`icon-color($color-or-map)` | If a color is passed, sets the default icon color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`ink-color($color-or-map)` | If a color is passed, sets the default ink color to the given color, and sets the icon color to the given color unless `icon-color` is also used. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color-or-map)` | If a color is passed, sets the default outline color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web 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/density":"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/button_12.0.0-canary.718c90178.0_1620156495176_0.427550937291419","host":"s3://npm-registry-packages"}},"12.0.0-canary.0e3917299.0":{"name":"@material/button","version":"12.0.0-canary.0e3917299.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"d9fb6b741ff09b683ff27c65742236dd7311e664","tarball":"https://registry.npmjs.org/@material/button/-/button-12.0.0-canary.0e3917299.0.tgz","fileCount":40,"integrity":"sha512-uhFw/bHXbAxR687sxwnNnS08EFaY5uYV3uRbvES+pG7YdlQFSnCuCIQykrasYrFM42Uuqc7tAGBxfDCVNnNM9Q==","signatures":[{"sig":"MEQCIAhGI+PtK93pf0twztX94KtEY2KVMzC0yjjr7bWLZd/fAiAc/zyn+qtQEJY3CEgh6MW4oZWUxwC8mjlZDtM+knUEPg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":504272,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgkaDxCRA9TVsSAnZWagAAqKkQAJXlvDeCTDQAxVCFj91C\nj+rBfSiPJoIunfrpso+bzpHfuINRa0OOb/voQHu8YAmVDCDwA5NNs3WpmL45\nPV03mqvaZsa/ugflrVHsV/zGqbdq25Q3uT4ujPTuvgavg4fj7tiCl6aUtXyC\n5lDSEcJzxrN+dFj+47o0G6bNUJJJtzzsXx6cnhq+NH3PQRreUc5C3TwYKLJI\n6I1TMWtoY2stRuFAt8ZsNiHnI8ponrhQGk9TYLW6wfMKmZ58cg/FU9p/rh1S\ncel6yANk86B1TymUEj4q7BGspywO+iXpZoduyaBzQc33NP9lYM+wZp2ds9ho\nptrV20ROjDrInzfJIXSRu1DoHzroDiuMPF19QZWtXhaOGtectYfHHyUMpboU\n6uEAiJ6T29EJW/I5xJ91rlv9sl7FwSI9r7G1FwxLft/UAQICztrd2XCdnGbm\ncoq3KgH2aFvkBRRWU/gTsOaK4E0rUUGDOWMVysyGEBTshJ5t2DC57eYr0GNn\nnOCz5TgnOicC+F43awcRzVDDJ/lE8IeVV066MqA1QbOAD+TJsHqleU08SSJj\nXGi3xXltZjpF5ZKGmgRwwwwRIjTv5EJQTijxDxueEvbfkQWYtJwh2s/Mnpj3\nm8JIMDzeb4+ofhYyxQPUaymMcJ8IikoN2nuVSyOPSaPEMgzCxYnetyYGWota\nnFJE\r\n=dCsG\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button/styles\";\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.**\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n**Note: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.**\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button--icon-leading` | Optional. Styles a button with a leading icon.\n`mdc-button--icon-trailing` | Optional. Styles a button with a trailing icon.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n\n**Note: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommend always including it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color-or-map)` | If a color is passed, sets the default container fill color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`icon-color($color-or-map)` | If a color is passed, sets the default icon color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`ink-color($color-or-map)` | If a color is passed, sets the default ink color to the given color, and sets the icon color to the given color unless `icon-color` is also used. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color-or-map)` | If a color is passed, sets the default outline color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web 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/density":"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/button_12.0.0-canary.0e3917299.0_1620156656460_0.5094809864227321","host":"s3://npm-registry-packages"}},"12.0.0-canary.836b3c7db.0":{"name":"@material/button","version":"12.0.0-canary.836b3c7db.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"dbdde56f4fc3567b7aab836ac00d065ca3064817","tarball":"https://registry.npmjs.org/@material/button/-/button-12.0.0-canary.836b3c7db.0.tgz","fileCount":40,"integrity":"sha512-PREWcFnFh/2Eqh6o3SZcJLN4+gPrrSqOWbNsSg4zOfz8hC81mbaGoMAdT+seJuGBUub6bQMA00Ec+jByqJAykQ==","signatures":[{"sig":"MEYCIQDuKO323Kq+SfxW6Ua9/ZeKxIjhJ5IH9XwdicPii0oZoQIhANf7No1zbkZZ3U1TMfyQM5ZnqJ+0aoIZa75eAeuwQmd7","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":504272,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgka/OCRA9TVsSAnZWagAAFkUQAIlC78s6XHN76a9716XT\nBMVT8qTY0OvYxK9nunX3BeeXtwB0YeKvLiofKilR6qQWMqh0zIt8PeA+CgjF\nwFV8LEVMu0IUf/UVrvQKPBZLZtm12w3ZRZq7qPEM5okmD+GEEiZdwutpiTc6\nWs03RSMHySt+rciXmWRvwMWGVZx81YiJjdmCtNnf7Ashy+/hri5f1vCCr3k2\n+yX7yqCgscm9yZ9weppJZZ2dJUUafD39HfalxQPnUj5721fIkx6RPGTTamXS\n3DwRTKOMz/tlrwP+t3HTw7+/ozCHfbtruY89NHPkGCVY0ulkIguOWghAI/rY\nibLocPRUko5bEVyYgILHLwsGvBSsLzicIbTKsUaVSlix7ajg7sEEGJwPRV1v\nRO3FFFH4JrZwjrwDcRwucrU8E6zhNJzzssZWPNyJdwqhJWLPf9B4TaazSYwv\nWXes/y/q8t7xGuzkuAnyguz+5+NKxMnna9bzYDCLwMuf+SH2qVE+jiwCSNJi\nOTSGr+ICa35HMh74FzRhJEkEWiFCtaWOSRwbR+1g+TshInsz1WJiez9XfvGp\ndJccAnNSzemZIpFgyTlrGJFxFWbPn6EAclGfrr6DCPsGgvTvmEBtNw1SdeFg\nJbay72Oqpcz1YD5OK9MynI+VxIop6w1daGUNXGFog1vwTOfy5SP1SNeN+BYb\nXA3o\r\n=E36r\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button/styles\";\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.**\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n**Note: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.**\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button--icon-leading` | Optional. Styles a button with a leading icon.\n`mdc-button--icon-trailing` | Optional. Styles a button with a trailing icon.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n\n**Note: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommend always including it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color-or-map)` | If a color is passed, sets the default container fill color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`icon-color($color-or-map)` | If a color is passed, sets the default icon color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`ink-color($color-or-map)` | If a color is passed, sets the default ink color to the given color, and sets the icon color to the given color unless `icon-color` is also used. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color-or-map)` | If a color is passed, sets the default outline color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web 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/density":"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/button_12.0.0-canary.836b3c7db.0_1620160462305_0.4773006474625707","host":"s3://npm-registry-packages"}},"12.0.0-canary.53d4e6d59.0":{"name":"@material/button","version":"12.0.0-canary.53d4e6d59.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"ab06b17cce42baa3b05b8b11c13ec27a756a0ab7","tarball":"https://registry.npmjs.org/@material/button/-/button-12.0.0-canary.53d4e6d59.0.tgz","fileCount":40,"integrity":"sha512-xEejln0LxUSnTvghxTpdkRBb4W/+S9DA8svZ5cu77vUg+mfLb9jnMe+9OO4cBFfbGaBHRDvxUIL9sLkNs1crmQ==","signatures":[{"sig":"MEUCIQC+3rmtwKdb8333lpZNl8MOYLUFz9KQVDHWFgoUzoDA3gIgbZLvVSc2iP8StT7PDmaFNE5ExVasPUReuJNyKxDHV5U=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":504272,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgkbN+CRA9TVsSAnZWagAASjUP/Rcg7+j1XzJiWivgqWHo\nBSiPEFiyaB32f5vOzjrjXPuNEf638qgaXEL79LN8CT645WtVwRwCsqVKb49m\n+M8R/46LFuv9Jusq6mSh121spfg/LyWOySU8X3PyeAFLwie9lTwyazA9NrX/\nvUdNxDuSHRSk9/dP+Co3dCnY6wUmuQidkrlRXHen9XglhET06BIOBs1XNV1+\n7FR3jPPNr27imcVx2XyBSJ2jaIvDtwU9jMu61Bx8wt91riCkw6fIzCbkHWtz\nZQVOsmeVkLH8u4dpv8HDy747y2jhXzgbqJW7LZSOaJauYEh2+85m+x24SIVV\nop53ytj5HnVQD4YM5ZvYrUTWxrDtL+G+6E+q2jxuKSq1q4Lb22QU/FCRAVIt\nWdEwzFCekDE7jAqpFL5CuLzSD2uYRrBtYoR34x324F14GirNo0hEI6e7raJF\nou6nX6oDuZuOBzpeSE5zx5N2d6zm2FQ87EMHRr/7zWpxYExC0fZSQUe7yQus\nX/XUwdfMDgqeN0B9vWhm4rHdd83Zw7tQoAHMZ1cuqobF/H/z1xwDLbwy7rVa\nEnz5TjoQy9rgwqaYOJSGoouHTDQUpavqnAujg2bcislP+5aLVp41NmgcihTt\nsSx5mywn9ZuYPErLRwQUTwQhrWfkeWim3vSbDncvEh+zZWltKJijstVCZZHF\nAf1v\r\n=WsLe\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button/styles\";\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.**\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n**Note: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.**\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button--icon-leading` | Optional. Styles a button with a leading icon.\n`mdc-button--icon-trailing` | Optional. Styles a button with a trailing icon.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n\n**Note: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommend always including it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color-or-map)` | If a color is passed, sets the default container fill color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`icon-color($color-or-map)` | If a color is passed, sets the default icon color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`ink-color($color-or-map)` | If a color is passed, sets the default ink color to the given color, and sets the icon color to the given color unless `icon-color` is also used. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color-or-map)` | If a color is passed, sets the default outline color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web 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/density":"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/button_12.0.0-canary.53d4e6d59.0_1620161405941_0.4565915265603393","host":"s3://npm-registry-packages"}},"12.0.0-canary.18d147e27.0":{"name":"@material/button","version":"12.0.0-canary.18d147e27.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"01f7b6aa8018c5fb5cccbcf8b27e58275b34724b","tarball":"https://registry.npmjs.org/@material/button/-/button-12.0.0-canary.18d147e27.0.tgz","fileCount":40,"integrity":"sha512-9bZ1xDKyC2UEdEJ7qDfTf1hIDB9UHy3dUpUBfb3vjJCQNxOnpgk6GOooOsM9Bo0z60v2JKdKPFdeVJQj3aQ1ow==","signatures":[{"sig":"MEUCIQCmIovRYmEf5aQDbqyogX2WSVa2SyatGere5Kk7WnUv7AIgVLbUCeIoA7Ycqfcb1v8OBbfA655AX1AHxv4V6JC+6GA=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":504272,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgkbV6CRA9TVsSAnZWagAA/qQQAJRR4+hYqgR+uL4tP7si\nrAVWKWdF3qzsAwjCkZf3F8dZ1xntF48nKI8NtsI1I5o/dRrN6N7Gtoed2haa\n70dX0P2GIhLO4/XBK8nMtT0TyTJ9F2lV26G4J6m5iXrMRKafjNxN+uxB0ewE\nmeX2Lonpp8mHgPlBCi4hku87+UNP73zTu572TUDB4YW/YTCoE5FEVuqVpGu4\nYCkponoRymkR7J1VOM8KNTWyM5dObvPIvR6eJs0zLGY1k6N0aHAB0v/fSWBx\nY3TG2S4lCus6vzmScNEQ3G/RZQa843M+pcDzXWcqYfU98Q413x3/CaVOgy9I\ng29TYt/7s9ZXZih6MzpmbsKXV36jnJoW6FfzPVmv5lmImoP8feIVjUXj71mc\ndxEOwhAebFVKhwsx7eLX+sh4qr0giw4zW8q0pmH1DyQ2nxkGpfO3ETv1f3c8\nStI6YHzVCdVY8Anayg62Sg8KTj9KQgytxaKf+Q116nu/8Tt+72jqMZfOHukY\nsX8YUjYch5qMpbRnOvUPn29iXgIlA9U0YMssvJRmlJQi04AV8+pxUC34ZpZ2\nP+WQXpmqVRqiRDgfUiSOTH8IAWen8FH6jlIrfWQEoP0vFLeY3FyLVHb9//6m\nZ0Zl40fHoPhX2mAKdF/7Cy02+vprw6bZ9yDlU+G4LM6Lajh/POU3DA424DyZ\n1J7s\r\n=TTFS\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button/styles\";\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.**\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n**Note: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.**\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button--icon-leading` | Optional. Styles a button with a leading icon.\n`mdc-button--icon-trailing` | Optional. Styles a button with a trailing icon.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n\n**Note: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommend always including it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color-or-map)` | If a color is passed, sets the default container fill color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`icon-color($color-or-map)` | If a color is passed, sets the default icon color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`ink-color($color-or-map)` | If a color is passed, sets the default ink color to the given color, and sets the icon color to the given color unless `icon-color` is also used. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color-or-map)` | If a color is passed, sets the default outline color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web 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/density":"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/button_12.0.0-canary.18d147e27.0_1620161913414_0.29396914450683553","host":"s3://npm-registry-packages"}},"12.0.0-canary.b9984794e.0":{"name":"@material/button","version":"12.0.0-canary.b9984794e.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"802b62442e16bd7c90c1289ea344b81c210cff43","tarball":"https://registry.npmjs.org/@material/button/-/button-12.0.0-canary.b9984794e.0.tgz","fileCount":40,"integrity":"sha512-0j2R4/xKT5a4vbjK8v99Hgo4EWYJeWz6FN/VGnci7XITEPbxxSM2D8vUaMa3gmgMUFG0rIm4HRbFEQjUoF1hEw==","signatures":[{"sig":"MEYCIQC/DjQ5bor5VV+Ip8A0ids+IEX1mjOYU8F5nj59EAzMRgIhANQwqzWYv1XsTAS7vIRHCmdlTJHA2FKzJM4FuYykHT4N","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":504272,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgkdLICRA9TVsSAnZWagAAMsYP/2/EC//8x3rpdvAXzaxC\nb6mWfE6UPvyZWbek/yFMNH8CzJ0RLgSHpYLGyLznbNipsFVnl+rbMrKr3Lup\nMUmFwTXd3L6xC8L+XOvDWBd2t7XcWx/DVc1vzCytFFiICJoD5QdNFyakyrz+\nxakAG8oJ4R7LIv6+BJwjYNxMblwROMDlC9z6y9KmWZ3HIWTPI5i8f83u12CH\nVeGIYIUgYHEGAN8Sn4ESoFAU0ftRUfrdbwLK9NNF2Hh9c35htXbmB/kNlBul\nEGrcs+RydhQiapBeSChJMEX3/JonzRXISSiqI2ECx4B+NPsb/v558NMQOmtx\nPMMZFUEWSGvqp47V6QVyIuYMpT0CO35JX7FM630JYutguwBBnG09yuzQpD1H\nuo6qZ5lXP/E18fTBxzQPy99XXL4YorWmKyINmNCGkE2r08Z5GVe+l6c9P1hA\n0fCXOzcjf6vuNTtHblZsGMfQ7CQ6Ygt79w9iXvqAVXHSL8sLBwyLXyNa3Z5I\n03zWioIzHAYSfpnwqTzQTTk+UjFCyMwb/ZtXokTSi+LQK1sQfhuZGb9ojPj5\n9XA2Age1TPaqqFe5pHWnKr9wCRPma7fQ3xfWpnKACIDVzAtfQOrBAvLqUCif\nNOrQDBYxTVqhlEVdPMEERCFWJPEfn8Ynwqb0jmbfvJ8Mv/jGa9YWxYSV0y/5\nZKlW\r\n=WMju\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button/styles\";\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.**\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n**Note: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.**\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button--icon-leading` | Optional. Styles a button with a leading icon.\n`mdc-button--icon-trailing` | Optional. Styles a button with a trailing icon.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n\n**Note: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommend always including it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color-or-map)` | If a color is passed, sets the default container fill color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`icon-color($color-or-map)` | If a color is passed, sets the default icon color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`ink-color($color-or-map)` | If a color is passed, sets the default ink color to the given color, and sets the icon color to the given color unless `icon-color` is also used. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color-or-map)` | If a color is passed, sets the default outline color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web 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/density":"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/button_12.0.0-canary.b9984794e.0_1620169415592_0.621075266181327","host":"s3://npm-registry-packages"}},"12.0.0-canary.b76f5fc9d.0":{"name":"@material/button","version":"12.0.0-canary.b76f5fc9d.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"0a2359b45de1d862959f38d4a38fd63ec1bed0b5","tarball":"https://registry.npmjs.org/@material/button/-/button-12.0.0-canary.b76f5fc9d.0.tgz","fileCount":40,"integrity":"sha512-TbsnHluN2KSieg6GTHBeMHF94+ohqNDENjx4igZzeR9Ssf36ZyTpUvB1ssgqI0/sD4ypAGy9NosBq+M2dvQjGQ==","signatures":[{"sig":"MEYCIQDjVEuZGCKWwOLVQYBDqZifUQRrVdkCJYy8Vh6uHH0bjQIhAIEVJ6y5WctdOzSotpC1UimRUBPJLWCEsyTvYgk1M/U5","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":504272,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgkdOWCRA9TVsSAnZWagAAwxgP/iI6jJGiAVTuOEKXzihO\nywsvSZZyTNZFhlXKPArR/eY4+SKVf7YvFYkZL4Qf+pGn1+gQ3FK/kNnMnYIB\nY4XqyDbeT/7pcA0MXjyMdTVz/VsYxK8QdEwnv6thPqdWmUVSdM6IvWuYnB9w\nfozR5jfnyrzC5bn0AQWFIcdZ8SY/QMSpT9THQius6m0lAnJDlrv2yBJSSZGZ\nHW0emZwEGmdXHOqbCSU9u230aTcmHDakQKTm6wr1xG+5rduGlP7DHfA4jJar\nQ7caPCm+DgKwM37FA5xlFBuDSntoiQEU8+amhcIk7LlQINd1ixAfAxsslKcL\nTN2ecb4b7jO9I/Wlu+Qo5iSfr4224Ur4JPQfS2ijP26G4yke/lXIV0kitgOx\ngf3/7bilUFt5TpwFfkXaj3TuzCtI2mgZx/znDnGCOp630DkoY60YXaPpNsfR\nevql1uAQqQjbKhnh3uQ3tp/ZMNHktWZet4AWEd/rfPcefiK4w0B6dpzUpyct\nYRAhujir2sESFuWGbTXs1Z7KcT6L/MsIpfOofi4Uf42Twz9zQiOJa/Mlrtxx\n9lJSSFXc54v81GFb/n12UO3cPdPrLtVTT+9Opor4iyTxepFhJmXGDYexX8hf\nqbaiALueoZRFIzxrBcaTwYF4N86daKsHto21BhuBPUiEeLs2ZVgImUlRaLN9\n3ZK1\r\n=N382\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button/styles\";\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.**\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n**Note: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.**\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button--icon-leading` | Optional. Styles a button with a leading icon.\n`mdc-button--icon-trailing` | Optional. Styles a button with a trailing icon.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n\n**Note: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommend always including it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color-or-map)` | If a color is passed, sets the default container fill color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`icon-color($color-or-map)` | If a color is passed, sets the default icon color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`ink-color($color-or-map)` | If a color is passed, sets the default ink color to the given color, and sets the icon color to the given color unless `icon-color` is also used. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color-or-map)` | If a color is passed, sets the default outline color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web 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/density":"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/button_12.0.0-canary.b76f5fc9d.0_1620169621997_0.0037371037603728396","host":"s3://npm-registry-packages"}},"12.0.0-canary.055d4f10a.0":{"name":"@material/button","version":"12.0.0-canary.055d4f10a.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"6d20a71fb33e4e5475ff249c14381942707dfee7","tarball":"https://registry.npmjs.org/@material/button/-/button-12.0.0-canary.055d4f10a.0.tgz","fileCount":40,"integrity":"sha512-hrvP6hawBh2ywfzBCjfCFKKKLKC3JPxKjL8OT5l0Ok37iPIBasPAXJN0/XxZBFfilrQy3yHwRLrl+jBNN0z5kQ==","signatures":[{"sig":"MEUCIQDOz8xtifOp3p+JEQ9SlHkW4GxIwkJ+8a0cmuBcc6TkTgIgOz9An2IpX+AklW7Je1WJF7AazY/VNzSEv0Yy0Eawwgs=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":504272,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgkdcmCRA9TVsSAnZWagAAlLEP/iSdE5+nbad4A6A/I3bt\ntNsCzAwBr34VjQR9GM3ULNDRxlaYqlEzRZCk6zzozTlyEuAw/0NCgGpNDjMz\nF2LJz/XdkNjBr8fS0wfmVwQ/F6FUfRQk/DOVdwalG2rbq1YxZLvNddkXac4Q\nRL29VE5blMVLVQrw8Ynf3TpFAH3YuGGu7tM4pAc7KHxlQMW7T4C0+PmOjZAK\nBx9Bf4a7JjtPz6OmIVNSD0KviRxeCsJacetOxSMP7YAiBoMkyCUcCx+OU8gj\n/K0iLxpC8nYsI5aoDbBt9cGazbJXJNh3AmoiWIcPTJjr18jXAqxfm+aDuuSF\niTCQPFM2WeGjtB0aUWijFMGVgn05y5il3+KvltNJ7gTQQRZxKnfi6hwQ5fq6\nSD3HNCS5D1DxmRrwq/zMF1104r7YFwG/3baz0xZ6z2oyvHWHMctS8fKA9SwF\nY7n1+RXiQivNPBRAWN3hPFqsUse/eI0Xb2X7idRABEdAbWALcwkQdzPGwBlA\nNeUzLLpxdnfS/5WlG+tX0NrzWpSpokUcVK7NyBQBYBR9Nf5p/YN3kTI/VAWh\nS5fTwa5SPz/A/CNhP5lTjItD5/89BpoDpw6UbshdcVz1DPVoFGhMiBG+HhJG\nIUYg/NuQfy+esuWI+sEs9PhWKPLWXWRvRKr9JD2GR8M0dlWHeAcqT59j2kY/\n5V6i\r\n=OluO\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button/styles\";\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.**\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n**Note: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.**\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button--icon-leading` | Optional. Styles a button with a leading icon.\n`mdc-button--icon-trailing` | Optional. Styles a button with a trailing icon.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n\n**Note: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommend always including it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color-or-map)` | If a color is passed, sets the default container fill color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`icon-color($color-or-map)` | If a color is passed, sets the default icon color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`ink-color($color-or-map)` | If a color is passed, sets the default ink color to the given color, and sets the icon color to the given color unless `icon-color` is also used. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color-or-map)` | If a color is passed, sets the default outline color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web 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/density":"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/button_12.0.0-canary.055d4f10a.0_1620170534316_0.37858184119162996","host":"s3://npm-registry-packages"}},"12.0.0-canary.5b6a46016.0":{"name":"@material/button","version":"12.0.0-canary.5b6a46016.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"393e43a4f1ada0962345146ff465294dfd6b8534","tarball":"https://registry.npmjs.org/@material/button/-/button-12.0.0-canary.5b6a46016.0.tgz","fileCount":40,"integrity":"sha512-4m9LoqcxMxBUv0VEdYtn9K9VHerabn6iYeuVtFjanmTaSNwbmaI7aEN+UE5BJCk3tw2SdfFgvGpSWKhwLgptYw==","signatures":[{"sig":"MEUCIA3rxg1L9xGrQbRU5n2o1+xnPix8bRC1eZaN5EQRWWzxAiEA5ATbcOvvNaCSTqCQhh+eR6rBJAu5UCqqdjhuFMR2dmc=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":504272,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgksTwCRA9TVsSAnZWagAAUEEP/2pbfQ1DmUZh/Drv+1iS\nKmAxRoaHTV6NsL+HwOaVNbN2MvQ3klSD5fFE0XvZaULSxPm6M6f6m8LM+o5u\ncvoTvbaYoSNEqr5L1HBqSplhD68JftmgYqkhjqwJQl5OZJ4GYD/7H2Sm+SiS\n3RgO/s5x6EUAc8vIorcTCnES70U7/zSToPJ50HVOt/hmJVp7YHT7LqjIERJu\nVk9ucCg8YhhqBdplDXA3dh41cfnubaUeMenzFDYHv4Fb4TZqQaSL78DmbK6o\nCaA2wYkuNmE+gfhPNc7ngNTI1hKcvAwiilL5UU782QTaDf1auXWMQbMl7Zfw\njRIYuEW1BVEoRHHgQXYVQMsUs/3GBDnMM/1lD1DOZCf/Osdy1TjPNRkvqV82\ndBA0bVfYu1KtiB4gb6iPNe5vSCPogqzESbvPCyo5YFUc7VwJT3rpLKFGCRkU\n0aFWhEvchotrAJP5z/4psh+dDM44UnIFLp9tsvbZPawtklaDZqXbMv1aCiEf\narzcW7d8yCfZb3j1PZBGiGiCOJDt2BZnc19F6B78/46BiKAGM3UkJeWwkE4q\nSzfKzwCpjwVByOM2f82QVU/iiE9f0Ksf4dc7sBAfGA/sVh2DBa/bVeLlwVBp\nJEUzpmvE6xaz00940wVK4i3b3c9N/3u6Af7nut4cABVXN+b7woLyvWgQ7i+l\nn8Ls\r\n=Rae0\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button/styles\";\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.**\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n**Note: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.**\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button--icon-leading` | Optional. Styles a button with a leading icon.\n`mdc-button--icon-trailing` | Optional. Styles a button with a trailing icon.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n\n**Note: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommend always including it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color-or-map)` | If a color is passed, sets the default container fill color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`icon-color($color-or-map)` | If a color is passed, sets the default icon color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`ink-color($color-or-map)` | If a color is passed, sets the default ink color to the given color, and sets the icon color to the given color unless `icon-color` is also used. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color-or-map)` | If a color is passed, sets the default outline color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web 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/density":"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/button_12.0.0-canary.5b6a46016.0_1620231407943_0.06989806921071251","host":"s3://npm-registry-packages"}},"12.0.0-canary.33c9a737a.0":{"name":"@material/button","version":"12.0.0-canary.33c9a737a.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"33b321f67e915d338665a7cb985a7bec067655f6","tarball":"https://registry.npmjs.org/@material/button/-/button-12.0.0-canary.33c9a737a.0.tgz","fileCount":40,"integrity":"sha512-fCHZ0vEtQ9eQ3EZNTEUgItBVkPoj9YckxROp47Z8d0/6bSayu/JsM0q6OuSJ4rar6M5CqQ2LfirkQK8YQnByKw==","signatures":[{"sig":"MEYCIQDoujA1yXH4RoDuWGdUgC7e2ZjWfUNDf361ClDIN4X4RwIhAKXSAdTEM6yC9LG1boL41F8DyjfllR8UTMil/BQVuNbk","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":504272,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgktWPCRA9TVsSAnZWagAAvjgP/j5euSGZRojtPwiT6LxZ\nYrBlpuZ2+8xM24dGYTMTi8+QzTmR2wyzo+tO+pRzwpsYyqGjmw3fM5TZdzdd\nRz/KZhVsZ57reTkW1HHmP8OD3CEzu/zcs8PGhjYup+c50gv2mccMN26sHfHU\nRE3OxTvjFtZ68tPuGFwChKbK1GunagsXG1Rr1CmK31j5uQzq5s/3NXz6+L6R\nIhLjNuc+yFkfGeKfMXiMoTG7iebh7ffF5hNM3fnN2l2Z8r+MNKwa+yUonmtR\nv9/gpDXMvU8mDnjohMxxR5V8/gW7GxopMIA3V92XZKbNyPokdiuC/Q1X9vKL\nFa/heqJC8cf0shzhikyyzWe0J/zblueyfCKKJRzLbiXeEDTyjgo7NZKqL7PZ\nCEqu9t94dGPEf3+N8gOkTfKTe1PyvHkdBwfvHAUww1M9qzGo8gpj9EqYYQCT\nqB3qk29U73pMJr01kgJP1hGbMcrdzaIIOuzYszNz0Q+hl/8pbksS9vQLX8vr\nIB0GRyUZruJqO9oK7Acvwjg8Py0aEbQY7TaRDejNeNNEo0N/upkqDJ1wiAHh\nTyIQiXrNEW8f5J3pTKOgCEMca2S0Zz9Nb+I91i8cwk9HIOpTozZQS8SU860x\nFqZx2jpEhp3aGDjpR/WCUkIbJV1z7pYGdPXI4ycqJ+KjopAQFjc+6mXbFibb\nNV35\r\n=Lxvy\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button/styles\";\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.**\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n**Note: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.**\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button--icon-leading` | Optional. Styles a button with a leading icon.\n`mdc-button--icon-trailing` | Optional. Styles a button with a trailing icon.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n\n**Note: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommend always including it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color-or-map)` | If a color is passed, sets the default container fill color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`icon-color($color-or-map)` | If a color is passed, sets the default icon color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`ink-color($color-or-map)` | If a color is passed, sets the default ink color to the given color, and sets the icon color to the given color unless `icon-color` is also used. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color-or-map)` | If a color is passed, sets the default outline color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web 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/density":"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/button_12.0.0-canary.33c9a737a.0_1620235662669_0.44207378793125773","host":"s3://npm-registry-packages"}},"12.0.0-canary.9bc0effaf.0":{"name":"@material/button","version":"12.0.0-canary.9bc0effaf.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"c0df21bf4a285dce7341c323ae4b094a59eb876e","tarball":"https://registry.npmjs.org/@material/button/-/button-12.0.0-canary.9bc0effaf.0.tgz","fileCount":40,"integrity":"sha512-jJsMZibjTU4sJfY96bzDkRZ092zZn5XcaO6rTrblC/RIxGj7vxUZRCkP4ZDvpN/i0C21faC+eEm/TbaNv1ZLgQ==","signatures":[{"sig":"MEUCIAD1AOM5ThGZSytGGb3V7uYWHTjh4iDoHcoDt8xGsefaAiEA0GZAySjZZe98WyQbGu08Ms9Re2AuSL6zl69OS3gds1c=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":504272,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgkwduCRA9TVsSAnZWagAASw8P/jN2nd4mGcDDhE81Revv\n3wIvMyvA/C51BTv9crHkfjugV/Snz5cR7eV0MyCRL7GVn4B28CwUUs2OiSyl\ncy0jkLM+sGBR8WepvD3+yfS/Z9Hs0C25xqF1QK7Gv4PPiQerdl9/NI11WKCL\nzY+gVh9kDCj/ZI9lG/ym6+/jrbmch3/Hu/ZfZ+mglXfyO1saxBVzAPO98Tb1\nwiYsrL0sm/He3c1k2Bjt0usM7KPJT/VB1pVufM/6hFs3il3cFQl4VAkMOdCB\nNOGPF6+WqHCCqWHZZuNHE8U8elgJVjeYS/OMV0U1SCE9TlkQ+ipEywIwjv/a\nG8Y07SjsVqagQmjIxnyjiS8ov/blOmpJn2S2EK/YZQ6Mtab8YyYj6J7JNiZi\nhUV3+pWfU8q/ny2zroOD70BxUKIKpsHpwb1rpBGIvbu/rL7hR3uTx/tv6EsH\nTBvAz98Sq9A82o7RPIlTyM9r+adtJN3Czr6BYJ3Zjh7XnQmRy3FU260DDYzz\nJTWx0v274z6Q+MAmv1pGjqSIGxEPVmQw5xyEwzdJ1MIJWv6R2+KkgOuoQPjY\nVVAg/Fd4HDhiarhHEdjEF2+L/1MkoIbd88BS9H5hQ6b694JyntPpGG+68Cat\n8u8EPSv5eFw0vOJCxucHqI6NteqDIxJ02YJPNhaXUsbhQzZ9z7B1KqdUJbQC\n/Zh1\r\n=VU1l\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button/styles\";\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.**\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n**Note: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.**\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button--icon-leading` | Optional. Styles a button with a leading icon.\n`mdc-button--icon-trailing` | Optional. Styles a button with a trailing icon.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n\n**Note: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommend always including it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color-or-map)` | If a color is passed, sets the default container fill color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`icon-color($color-or-map)` | If a color is passed, sets the default icon color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`ink-color($color-or-map)` | If a color is passed, sets the default ink color to the given color, and sets the icon color to the given color unless `icon-color` is also used. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color-or-map)` | If a color is passed, sets the default outline color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web 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/density":"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/button_12.0.0-canary.9bc0effaf.0_1620248430064_0.10648270888788125","host":"s3://npm-registry-packages"}},"12.0.0-canary.a1e0f2af5.0":{"name":"@material/button","version":"12.0.0-canary.a1e0f2af5.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"d6dd3b58f75433ce41a10834397b57c8b3c5a86a","tarball":"https://registry.npmjs.org/@material/button/-/button-12.0.0-canary.a1e0f2af5.0.tgz","fileCount":40,"integrity":"sha512-5Qp4lx6aa3No14uPgrXMVlPIEWZ0kr5uycHsNcgt5nm+vYI5VznyxrDzC2DdgqLrtcHMPq8HrcTcChKAkJv2ig==","signatures":[{"sig":"MEUCIB8ENLrQmbSCE4tKKXWUAK88VCrp8Jtrf9Fod2VxEEHTAiEA+qeITc71seCggbpS4CcVSyqozan71osTvteOhGVL1MY=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":504272,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgkxEKCRA9TVsSAnZWagAAODUP/2LCsUk4xF/ZgyG1cqZ8\noYa51vHJg/2nQQFwduZZudTMhoUKuS2CDXdRONS/134kW4D1ZgEoPZkkqHS0\ngawPKSxAGIJvMu9Zy89w6Q1UKNIO1nems1GpI5LVTIkkXPZi2erZYKhvpWY7\nFh9CPoSqZlT48SncQk9KTOcPG8tysBOpxrYzFTW3O2E6xE7wLp06zmcAXgic\nZBlWJFD/Zlj5xhMacQ1alJ+3i0d6ntO+MkaEAp5ByMXSBelJzpiRtHdTNMqb\nE5riqPIpqymTtE+YdDLR30G4YsQ5VX+bM98V8MXXnitc7caUz+VyNwNGaon4\nUbbg4DPse+zwY1gjsBcd3jE7AU0NXZB5RR6dwAp3Tr3LmwlDp7r/aPTWDg4l\n6vBPn5i3hFl4wuge45H0UZtV4+jREIqxAnhC4oZKWB+7szWueKrglONrzwyi\n9PssgKrAa9/CdE0gqZHBI+FeJ+3FTucJzekbHcUhfS6Iteuv64t41APBddv9\ns+h7a+rXE3NGWDV7czDU/JFo3lWPRL28FZVdJWnSnj+tnmAGaz+wfL0U7Y54\n6STJFZrKpOcNbmYChxwUgi3BEAAuoUnnNk/nzmzJxmpBty+5NhbU/2qgqaiJ\nC2JKjmzo9gzsEpEmrEAGLHVw+ZMU/FpgK5Pm/b96xpc7bbxBcZHUhtTp7q0c\nhCnn\r\n=n269\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button/styles\";\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.**\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n**Note: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.**\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button--icon-leading` | Optional. Styles a button with a leading icon.\n`mdc-button--icon-trailing` | Optional. Styles a button with a trailing icon.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n\n**Note: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommend always including it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color-or-map)` | If a color is passed, sets the default container fill color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`icon-color($color-or-map)` | If a color is passed, sets the default icon color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`ink-color($color-or-map)` | If a color is passed, sets the default ink color to the given color, and sets the icon color to the given color unless `icon-color` is also used. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color-or-map)` | If a color is passed, sets the default outline color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web 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/density":"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/button_12.0.0-canary.a1e0f2af5.0_1620250890179_0.5552648807675136","host":"s3://npm-registry-packages"}},"12.0.0-canary.06930c96b.0":{"name":"@material/button","version":"12.0.0-canary.06930c96b.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"4dd1e7cd55edee0cf2576c875a62d9dbb32fb3c5","tarball":"https://registry.npmjs.org/@material/button/-/button-12.0.0-canary.06930c96b.0.tgz","fileCount":40,"integrity":"sha512-lZLeP/HlzBMLHtDFBynPy6YxT1SlFrLgzxaQw/fR/DKsw5Nzwz7l7+/cP077O9QIYrt5vEd1LCOUuGu/48KyWA==","signatures":[{"sig":"MEQCIApPyYSmpZagUS+RuIAOdL8x09MkZzffOlixRT3/Iw5VAiBVmMCaaMTcw+YNBgIJjMA3+NqtDVmOyMzyA6LI9JWtwQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":504272,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgkyzBCRA9TVsSAnZWagAApL8P/1GE1Am1Hiv1auE9Hxp0\nCJxPN1wSwwlBlcUJzEbbb9jJua1j9/gvOWiQ8n3sPhLlaOLSY0kMYwL2ex64\no7Q2dBg+TlhWal1yIS5CMti9O91os/iKZWLVIFVItm3NHxDQ1rwansWaP5wW\nH4gdoPqU9zKZOQQUeVeUt2bLxzn0vuVo1cHIO4n90IhCzcdsW0uTyWDfQ8g1\nTyGqSCjdJ/K53D+01FE2JMqFiLv7a+aRCZZEtNtqyZu4IafJuj4nlwmRGV8j\nYwi7Px9JgrtoQ+X1ErXXR+aXjNG0LII09bx4xtWEUVnNFtOGvNu8xCxvVCvt\ng+OFRkecICfi9FBU7Wy8VqmZC69MC9ap29g6kOxkTHCkriqikHqlOWZ0hT3m\n3KSDQpoSTUPhYcMQ0deA87gvxMXMARk0K5wvfylOlJA2acyfUrK8uEBSi4/w\nMrNhOPy/uZrPquOuNlPTV7z2CUrWsg8gclB5O2DR54KNC68cIyXU6aUXUsEz\n6JZpT9ogWT4IQTggaSMy42C3eDBDInmzxYg2TAKvc7kqaPwCu6cfKA7NX5el\ngmtzLObWTd52QzMeO6WWlx2Ga5FThnp2VpiYVBmErmjPKcB1jWYMLTGQLiu1\n6h3VUM8gisH/5+T7LoMgE1Dh9ZUBaHbu7E6suKQ1OYOKHHar9MsfRKbHKaGW\nEmaX\r\n=cVUR\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button/styles\";\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.**\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n**Note: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.**\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button--icon-leading` | Optional. Styles a button with a leading icon.\n`mdc-button--icon-trailing` | Optional. Styles a button with a trailing icon.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n\n**Note: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommend always including it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color-or-map)` | If a color is passed, sets the default container fill color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`icon-color($color-or-map)` | If a color is passed, sets the default icon color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`ink-color($color-or-map)` | If a color is passed, sets the default ink color to the given color, and sets the icon color to the given color unless `icon-color` is also used. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color-or-map)` | If a color is passed, sets the default outline color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web 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/density":"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/button_12.0.0-canary.06930c96b.0_1620257984986_0.9120349213971095","host":"s3://npm-registry-packages"}},"12.0.0-canary.03f525f9f.0":{"name":"@material/button","version":"12.0.0-canary.03f525f9f.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"69b56f4d2790cd9de0456e134c1e92df956b1dac","tarball":"https://registry.npmjs.org/@material/button/-/button-12.0.0-canary.03f525f9f.0.tgz","fileCount":40,"integrity":"sha512-lJkKqQoBOJJWZdjF46XS17OqHOu8iLBhzyAZDoE4B2iIp6+C/Sf0XuJHdACISSeGeFALKqTClZFRVUXaccaW6w==","signatures":[{"sig":"MEUCIQDu5F+jBLGn0bnNgJpmuVBSHqdKN4/LEqPgdRoUkmCJqwIgKcDYbEFlgVr69Aw2ODqxfntShLHG4CABpfuK3aqUlsA=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":504272,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgkzikCRA9TVsSAnZWagAAOHYP/Rc8aUGRBVkTHzfbjqTW\nmaNZrp0G/svzLrzonzSDYxFHI4Q/lhFBdzzxA/aOg9sfOpgOpxq9oALLliTS\njj7U/wOL8rdPZ1vBM4GPHDp7FlYbWmWf6kqeXrOyJwaVJJfz8gq7INQP0VNT\nhWxbNIODXytGPhWUdEwPr4hcF0LC97zHK/Fe09gG/VdnVx2uCQ95ppclyyrJ\nJqzkUlC+B4l9OqR17luB2MPa09N6aS3+W6OuF+pMAQpwzR4sT9PsAW/HLw9e\nOW112pBioge0adni+hbLn5qvjOd07bwY1B5+cqwgatdDZTloXxDnVZAXYn6P\nw2URVoh7syJybC4uLXX8EPpmovtjLPL2tNiA9E93vMgRNH/H9YRlTzZTC/lc\nYRDHsgZNDsTINZMCgAUE4lsdVAtbN9FkuXJ+fsJ+A+uFhMHcqdXMiQPqHPu2\nOxeelgLJpI/1EfCucXakTT0oKzuaeQuAY67VeB4drEDZTo3DUFcB70Zz3DPv\nzS/jxZtU4KFO4ItukGzgdu9/6Agl5RA+/hYaLR6c4xcy4G+o3B+mlFazYzRv\njDG0fTCC3wPHFhgnXw0uuTncvrljIdWhL3HPcKHGgaXQuUBeBkUI7Jb1vMZ7\nsNS++MyOBapaWkJC/Cnja5KfI9Ax/VvJ6Gz+lGuj1qCDTXC4/QBscgSmv7Rj\niCzE\r\n=WCs9\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button/styles\";\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.**\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n**Note: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.**\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button--icon-leading` | Optional. Styles a button with a leading icon.\n`mdc-button--icon-trailing` | Optional. Styles a button with a trailing icon.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n\n**Note: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommend always including it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color-or-map)` | If a color is passed, sets the default container fill color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`icon-color($color-or-map)` | If a color is passed, sets the default icon color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`ink-color($color-or-map)` | If a color is passed, sets the default ink color to the given color, and sets the icon color to the given color unless `icon-color` is also used. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color-or-map)` | If a color is passed, sets the default outline color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web 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/density":"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/button_12.0.0-canary.03f525f9f.0_1620261027996_0.1434813042241989","host":"s3://npm-registry-packages"}},"12.0.0-canary.e82ba2a26.0":{"name":"@material/button","version":"12.0.0-canary.e82ba2a26.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"68d2c5f1bdfd3eda0be2fa7af9383c198a36eb11","tarball":"https://registry.npmjs.org/@material/button/-/button-12.0.0-canary.e82ba2a26.0.tgz","fileCount":40,"integrity":"sha512-C0ZjXvEDZUbk67yOfDOGXRQkzbPSyjGSqWHP2AuFZjZTH/KlKm//pHNwIrP1n6g643MOlwCZEB9zzuSPvieCpQ==","signatures":[{"sig":"MEUCIC7XopJYeYg5OZ6z2SXbdCna00fzoEM3mApmGmqcKF+FAiEArJE/bFpUtCKRox6qKT3rQoUNxxBZE0N37N9AGW70eEY=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":504219,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJglBHPCRA9TVsSAnZWagAAUPwP/iSMSdfoybAu1qBSlJy+\nbY1T9UOu/7Ec70kMOdgxL7bP8VCGLFEkoN8MfwoOIhFzzmhkjZVce3uSGXK4\nxQ7GbD9oj2cs7ADIum5dZ1OvZ/wVJUxbIkx58hZwlobi86mcDc8A1iPQsTb4\n2fpsddQzvhnGiOehYfF0j2HBXufIKc5LTFnMC7eO5GAjIoTUPdc+QFFJt/Rb\npXGLKXxCW14/+FPwNUgAxhwVJael1DLJYXlMYDYlLjRRPTXJpCVALGKzXpTC\n6i9A7u+rmmVprLSHDS/LrIMu2JYJ70+vzo+NE17POka3/MjBCYGGqk6HCDc8\nuLlapmwHmmKDO5+mBb7FXmMWWmMkjbPbtObi6qBiMjK88Nmn4BlQs1a98lk6\nYRDml7fO76R5TbmbOOYOC3KYb6GSZQoPmVdFCiBnYfwR7SPbfT+518KvvCUo\nyjRpy7SQos72yhaPy7p3SWoqagAW07BBg7mjPJ+l+a/PdouHM7N5W338ZPcz\ndgMoAet2duRi7NzU14TcQkuRE2m19xa1iJ1/TO6vauzQVQV1pypcz/MLVTsk\nJX5sxuU/2w7Xd/df3D64fkV+fHIXhXQtiJj28RRZgEWDNDe5K6dsc32A8jVv\nZZpxePd0dwAWAeu/SFduGf9gffcBR27mRXJ8yNA4zJ029GDrvMoieJVTbo5d\n6RRQ\r\n=IBzl\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button/styles\";\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.**\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n**Note: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.**\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button--icon-leading` | Optional. Styles a button with a leading icon.\n`mdc-button--icon-trailing` | Optional. Styles a button with a trailing icon.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n\n**Note: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommend always including it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color-or-map)` | If a color is passed, sets the default container fill color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`icon-color($color-or-map)` | If a color is passed, sets the default icon color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`ink-color($color-or-map)` | If a color is passed, sets the default ink color to the given color, and sets the icon color to the given color unless `icon-color` is also used. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color-or-map)` | If a color is passed, sets the default outline color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web 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/density":"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/button_12.0.0-canary.e82ba2a26.0_1620316622810_0.5880272328099903","host":"s3://npm-registry-packages"}},"12.0.0-canary.fc7c4e5ce.0":{"name":"@material/button","version":"12.0.0-canary.fc7c4e5ce.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"2aaeec186a6743426620e42a9c4bb52fc24ca69f","tarball":"https://registry.npmjs.org/@material/button/-/button-12.0.0-canary.fc7c4e5ce.0.tgz","fileCount":40,"integrity":"sha512-4yDOV8XF37a9EeNNRMrMy76updJKuafeDEYux3Tp9Ew3YPlJdQFKhO/hN3MZo8WemH1dKv5GZYKfLbqtjWgExA==","signatures":[{"sig":"MEQCIFj3X5z+99BBBgJ18U+7Aa62U3zg891dixgZvmSnkUrWAiATqBdH19DFfHPm/UxZZrmUg+4iY34QBp9yU+jA3TvXGw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":504219,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJglCePCRA9TVsSAnZWagAAPuEP/3o22gqhA066aOm3lbPG\nMg8cvrWJOAkool2/2malOkO4PEBSPNSpENW3NXs+HA2/JOFjznsyzRWmPpjt\nEYLbht9i3ecAc0MAve681YhyQkDpEyrDAH16cEKguPgpPkVkZxmypgn53O71\n/zCI2ZKzHnHb5BZZxPZHDo/mxHubGPpv9iJVSASU2JaytudrEBtTndJDnIUP\nBxqeKcL397Ec16Wp5OyT51O2AzoePpiTJSxHh1usi6dEXPP/uvXrjycDQFbT\nywy8rSnPFtTuyCS14UNvkzErLtprWv+7LF1fVEUxJDZtfrC9GCIdKWwIRXRn\nFYxtmSL49623xdCiILr6tqc/qjkfpf96zqJ7k7SsxRJAP2mwWvdiGEYXaTM2\nxboDxk7ZoycIeXq0ZA5UON2RUmv4rzCmhEUOCffk4WTMk9nwILHwsKcp6jxM\nRQD1Ntp4jTsJJiyy3uFjNagaI1l9StnSLLnJlJf4DCPGY/81f28XhXjHHXL0\nHL+dSR4z+XQTnq/bKO3OVBj4RSDSz9roPF4fAHiRixRoMWj5g4S/k7E30idw\nKlqap00vz0QhDeDRp1xKB8PLK2TCnql5mXPOlnaY4AYAwQ9MTq27Gn6s+t1G\nOh5CwNsBvb2TBThgaveKDHt+MAkgYRdQvIp2ofqCz+AuH+5/IDN8nQLFJIES\n2N+K\r\n=Hk5G\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button/styles\";\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.**\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n**Note: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.**\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button--icon-leading` | Optional. Styles a button with a leading icon.\n`mdc-button--icon-trailing` | Optional. Styles a button with a trailing icon.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n\n**Note: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommend always including it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color-or-map)` | If a color is passed, sets the default container fill color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`icon-color($color-or-map)` | If a color is passed, sets the default icon color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`ink-color($color-or-map)` | If a color is passed, sets the default ink color to the given color, and sets the icon color to the given color unless `icon-color` is also used. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color-or-map)` | If a color is passed, sets the default outline color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web 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/density":"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/button_12.0.0-canary.fc7c4e5ce.0_1620322190642_0.37699109074026627","host":"s3://npm-registry-packages"}},"12.0.0-canary.65c04514d.0":{"name":"@material/button","version":"12.0.0-canary.65c04514d.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"bda68dd49ef66840047bf75941b7551f4d759450","tarball":"https://registry.npmjs.org/@material/button/-/button-12.0.0-canary.65c04514d.0.tgz","fileCount":40,"integrity":"sha512-hgcDIHjis5co3WF/OEHrQgU32194BUGqJJtnG/Ns0MryKmGJptfRnL2eNPd+lVW6IGm8RvnIDHNRTHz8jVgAgg==","signatures":[{"sig":"MEQCICh9pq7y3gEII9BF6gG0J85Z9TBMjnXlad5nj7hvxw+WAiBGkS92jFFRHyYl1EEEY7jlEvrXHGsvJIzVMIiQdwQHkg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":504959,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJglDj0CRA9TVsSAnZWagAAq58P/0T01RGCwhr4vtc1qFWh\nuj3jBuDQkAuSB6NN9IZV2eg31VhhgC3nDU6mgSg8TfFZueMy/cWBsgxr5wzC\nGBWpTZK0BWXWUV8+7SNEn0mEuBAeqHylptS5bu1RY0lZrSWeBJviQvtrMKGJ\nhP4bF9pdqJwCLNCf4QBkM9pmuBINV8mQBH/CPSGW3Fpskhgt8dyg7i9my9bV\nexkqd1u9IGjt+bynZEOpKD8MSOwbLZjnQm8v3Z3yW4ke6bbgm5FkqHEk0Qxx\nM2lxpuiavSyRuz5hULlbHehrg2mXA0+ggVQTYz1t+vvR/2dsrth2qEPRCT/A\nmIEu7nXmL1avcpeYaxlazRKzkbbqOaNs6WmeMH7SkyXzBS7zRf8WO9EHXN6/\nnaU6xiM2ruOrhrM6WHKgTd6UXrasqRDGV1l9xTWakdeIC5Mq1rO/R1n3I0R9\nyWhn7HtFzp3bsUwudYYMXpNHkeB7pZZHAlb1sGwnIs3kduSVWyMnyKFDpkiB\nrpw5S5Lso27KcapBsQQf5uHuYhrngw1AnP2ii/7YIyjdEVm55jN+8jTkx/58\nD7GT/iUWoqmB0VdaS1Xk80umBxvjgW1JYGS/sFnxfSwZO0eBF/Dy5QiuRCrH\nFEkqhDrjNDUj1rzzLI2txuXfI3BQrRtfPx1IAb6b7ycjRSAgI+QOXb7cJtsd\nxLBr\r\n=6XB3\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button/styles\";\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.**\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n**Note: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.**\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button--icon-leading` | Optional. Styles a button with a leading icon.\n`mdc-button--icon-trailing` | Optional. Styles a button with a trailing icon.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n\n**Note: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommend always including it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color-or-map)` | If a color is passed, sets the default container fill color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`icon-color($color-or-map)` | If a color is passed, sets the default icon color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`ink-color($color-or-map)` | If a color is passed, sets the default ink color to the given color, and sets the icon color to the given color unless `icon-color` is also used. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color-or-map)` | If a color is passed, sets the default outline color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web 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/density":"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/button_12.0.0-canary.65c04514d.0_1620326644473_0.5353807771009356","host":"s3://npm-registry-packages"}},"12.0.0-canary.c97779ca6.0":{"name":"@material/button","version":"12.0.0-canary.c97779ca6.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"04fcf3e304786e96f3b499d270e3b6b29319b67d","tarball":"https://registry.npmjs.org/@material/button/-/button-12.0.0-canary.c97779ca6.0.tgz","fileCount":40,"integrity":"sha512-nU9GqcXYWPyBtYTA1PQk3O7Jxvmqrkm0ybeAoA1pC3ZGbMaVOVM3kWh0aoB4PscFRz9cHfoS18ZdPJTzRHln8g==","signatures":[{"sig":"MEUCIQCNY2vcaxzXAt4C9TrCVIo00IhHo0yQHK7A6Eb7Xi0FxQIgGZpV+2p7ItiV+UNz/o6J0lSqFUYcW7tJOIvulPVFcCk=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":504959,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJglGMKCRA9TVsSAnZWagAA+WMP/i9nZ5f7fJ11EIO6NFKv\nVS9Hj0Qy6pHMXQGXKK92nn4vveeh9cNKAkf5Po9ktzYJ1VXzdLL2Vir67+Pv\nphyRjjfnBw4JEU0KAXcetheSW1H+dbVMPbL4rq8XPG4eR9+72PXsIXxqFG3Z\nde6XZtPp19V4wNIsMNLXfXoQLUFmCnlC/IzrUZ74QUstIrk9IEnXXxdcftky\nbgrgYdRBn/zlUJKaf0WJR/iVXoQcG1kCd23qNwe6XqUHsnZq3P1z/0dojqZF\nUVNC9cdcGHtR10KwjdezEy36/sUevvKS8tP3zHrzc9tQR1o7uGkXlPgNTDEu\n/PvtwDrbhhqhofIVCOmEsfR04e+x1oJ0DX0O9/WGfxFATnz61e5BdMjwoDVd\nzcgAXa+3Y4BRL6cAYMTZKeLPj1qILQVg+3gZcU0ZwqzBhaizuoOhBAfu4w78\nEvFL6J+XI8vdfKylMaJdV23mMgkk+b3T6UHo85lsVBmzULHCTJxZsOC9a2zr\nnuybDUBkbt8DwbO8hqXrcxt3uxBebm60M3wpd0IH86mxonATMjkNCTzNJ7Si\nySU8KuMBJyPy7evDFhK7iJrySkt2OHuTytPWcHaz0fGEB7HY3top532la2IV\nG5+Gwd2MCvNQDldkBeqY8WxHBfU8BYpb8QD+nTW5UzXvEhCteWG4yFT8C0NM\natsd\r\n=QY4b\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button/styles\";\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.**\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n**Note: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.**\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button--icon-leading` | Optional. Styles a button with a leading icon.\n`mdc-button--icon-trailing` | Optional. Styles a button with a trailing icon.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n\n**Note: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommend always including it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color-or-map)` | If a color is passed, sets the default container fill color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`icon-color($color-or-map)` | If a color is passed, sets the default icon color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`ink-color($color-or-map)` | If a color is passed, sets the default ink color to the given color, and sets the icon color to the given color unless `icon-color` is also used. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color-or-map)` | If a color is passed, sets the default outline color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web 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/density":"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/button_12.0.0-canary.c97779ca6.0_1620337417821_0.43932402137952287","host":"s3://npm-registry-packages"}},"12.0.0-canary.869d890d4.0":{"name":"@material/button","version":"12.0.0-canary.869d890d4.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"4b39c536d84abc09f707c95fac6237c5e59a380a","tarball":"https://registry.npmjs.org/@material/button/-/button-12.0.0-canary.869d890d4.0.tgz","fileCount":40,"integrity":"sha512-UD8p+xHF03iGr9RTsbblncmsztWHLBjk4OOvzZaXHsvwwO2ealQPPnpeBORXxC7DSssLDfxTlyZgEZV8eO480g==","signatures":[{"sig":"MEUCIQDab2XYW0hobnpvcttfnpN+SGQtqLBq1Sil21kMfp0EZQIgFxN9CPOo94Ow7vicX5MqARy6xjabNgVTBVBVRG6qhfU=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":504959,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJglVp5CRA9TVsSAnZWagAATfgP+QA2MV3ejWOUucW24XAf\nUtQU98aW+rh4mGccPVRF8isPE71IXrc7znFWwtvh50mdd3MuP0XkD8P3ZYzn\ndVeu4N6VJ6ChlFU5qIsS7llkf3VwQwD5cLXAj5kX+EyNpC1owl0Hna3hMBZl\nGDOo9Fq5ds6lDt8edv5eFircpIQoUqpeLoa3GYovlGJ7pCHIo6oucFfMHfqh\ncPZDq0QFagTblzt9D4GolAH0zcMePAfczQXLBDOAAIX0/FuvK5mq7PzF/4GE\n0UT6TLUg47s4ZZePi9Qb225bS9mOp21dtF2bWMM0CSC/4HQ84OT/EVCBEnAG\nCUGcEUq0DowOP0gm9YQSrYEykjChzfy2+0nJETnL9A9BZKdvPj5UHKtvznmX\nRQhIzq+1OzTymbcS8PEDvVKOb1O4lmj/CF6gzU4cP15/Yg5pmvaUsjVzONJ9\nIdOzNWdO+UC7Ss3oF9Ak7TSLFZFB7Di1AbrciW92urzQGaH9gOnDH6nC5Yyb\nf1Ply1DJvsUkjEO3veVsnklzBSfLUqa3QT0o4CGnLfZCAaNN4QZfZxP5pW6g\n8amtJkTW/hl+HprrTaxw33/pSr9nm8Wa/Ny/fS0QYtGgdAOFIt8ffnOFwfX/\n9mfFKjYYPXukelGiE8L0J9L5Zn6jX5YgU/5PTyg662LVWeInm7MrL4znnm5c\nbSrN\r\n=LaBX\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button/styles\";\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.**\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n**Note: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.**\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button--icon-leading` | Optional. Styles a button with a leading icon.\n`mdc-button--icon-trailing` | Optional. Styles a button with a trailing icon.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n\n**Note: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommend always including it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color-or-map)` | If a color is passed, sets the default container fill color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`icon-color($color-or-map)` | If a color is passed, sets the default icon color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`ink-color($color-or-map)` | If a color is passed, sets the default ink color to the given color, and sets the icon color to the given color unless `icon-color` is also used. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color-or-map)` | If a color is passed, sets the default outline color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web 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/density":"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/button_12.0.0-canary.869d890d4.0_1620400760964_0.2288108190810918","host":"s3://npm-registry-packages"}},"12.0.0-canary.ec22e1da9.0":{"name":"@material/button","version":"12.0.0-canary.ec22e1da9.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"c42efe6aebf180a180ee53fff612036291674bd9","tarball":"https://registry.npmjs.org/@material/button/-/button-12.0.0-canary.ec22e1da9.0.tgz","fileCount":40,"integrity":"sha512-lBbg0kzGc+EWzuZeuS9853krMoBB/PxUuH1RewsPnWCVRsR+0QVYImrLBDgJAascsExQE5omsctqf3M+SG7/6Q==","signatures":[{"sig":"MEQCIGCFUv+lNGoLYtJwol/tdqpg+tQYGfKuB5f94+gOFt5NAiBNPwW2119UMqqQ/rVTtLUPq5kJ/gxyJk2wK7TG3Z3oRQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":504959,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgmXo+CRA9TVsSAnZWagAAvfwP/igEKF7CWzy0O3bV2y05\nMkUqsZWwXzDBqgL4kmYWtpuNwK6nkVKcgcBBF5STjaGXQ9KXrSyVEN7xQt6/\nNWWDJrbCVKMFx9uGbkA12TVMbzk65DKefczAfwhwAseW1JG4OeUo7IgoF1QG\nVjzmCPn/V36g6AmLc2/X46O5tBJ69oFJgihLvdOyjuhEysSwsz1HfIdPVIwT\nhdZQx9mLeT/09Orhw6BYTj+ZsXO9QZgWR0rWsJRclRVpj5fpxBhR27ZmwFzF\nuWnCj81PTCHbC1X6XDDigOhy6rK08jIZOcfVTJTzF0owV5RKH19U07Qn+ioG\nikauUQAnSHMxUVwxGygP0to3IC+4sKiflH9nKrJDWoMI3gxCpPpKZ8UHmuAR\nS4vE1gHqqmkCL55TsSw1tpnTgqvoaJSNggCiS42Uwqf7eTY5+hudlf+coDXd\nKLh5O7//VbxKDGKOiouWpgBYA1EcOrCHlWZ41phvrYYfO0dWQwUPxhSO3RKh\nZuG+SK9vpi9DRipgkUBrYcyKhU8wWpQcK030jUZlhyu/5/EMmooWEcU8jHNA\n0NOBuYEth2GYN7Z8u8sJOwwtfOy6Fk7LL+K2Tx30hT7p1c57HPcM5ehRt0jF\nPWdNdlKytr8ceLn4StlddVOVQ9NYBgsDRSJ20krDZVofQkm0UEJYrp6F+ENu\nKMRw\r\n=vQ+R\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button/styles\";\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.**\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n**Note: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.**\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button--icon-leading` | Optional. Styles a button with a leading icon.\n`mdc-button--icon-trailing` | Optional. Styles a button with a trailing icon.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n\n**Note: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommend always including it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color-or-map)` | If a color is passed, sets the default container fill color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`icon-color($color-or-map)` | If a color is passed, sets the default icon color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`ink-color($color-or-map)` | If a color is passed, sets the default ink color to the given color, and sets the icon color to the given color unless `icon-color` is also used. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color-or-map)` | If a color is passed, sets the default outline color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web 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/density":"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/button_12.0.0-canary.ec22e1da9.0_1620671037983_0.5925076480460565","host":"s3://npm-registry-packages"}},"12.0.0-nightly.7427449f0.0":{"name":"@material/button","version":"12.0.0-nightly.7427449f0.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"1eaf811a510afa2973505c860c680ecdd5609b68","tarball":"https://registry.npmjs.org/@material/button/-/button-12.0.0-nightly.7427449f0.0.tgz","fileCount":40,"integrity":"sha512-Mb5aWDtLqaclcbrZ1eduM46BoeG8F8f4ncJ0uSawgi+UZM5zIeXrXsCB8R/Bk0txo6hMxtSmSbJ6f94UX5iZXg==","signatures":[{"sig":"MEYCIQCGG9OzOxwwKDY4lW7zI3fH7A4DbNYksi148lr4+GZPBAIhANAnuOOOf4B36ogmbCgooxsLKBFQraq4ygPW79Rc8Tvz","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":504972,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgmX81CRA9TVsSAnZWagAAhYoP/0t8AJwrq1odNUz4NM+y\nMpEV3vKOHDzJg+LQQX/r/SKX+HCPMctxBxBGljmR1OSthadokrAtV5HcNviF\nTKGauUzEz5f0hrqUSNWFjGuEzU+sOVEusHJkaE5Y89miAuNYtbUu9BrJYHQi\nC3LPbszRXsNMZvnsUKkpn1S+qAJCK4zR/BHkNODuWrwKDi3JdZtsqsWLfbhj\nYye831Ob0nHfaSzGD+NHH7DgGWc1Z0NpZo/EYcPEJT6bYVQy2XtdTn8EHr9P\nxP32XPT3/iiNuXruJiWVoVM4jdo1ghugRfqaqqOo5HLBkas3lsH8Pwn1nX71\nqtXVEp4moccWoAmBSX7BXpoRgLOL6OmL9qn0N6ElyBC6SamWUvCo5vlWSJhs\nJlhaovf77xRKR3sajGw+DWSEJOF3bm+50GOPRxgI/+p9KToIwKu0t20cKpv5\nea2yg+mIx+ttIyv+MO73Xoey0vyaOlycN77p07OxneEWNgCV/goSLExxugqo\nff/zNn1K2OZTHNjlfiFSRdWP6oBdYVGGPhy0Rcr8QUQV+X69zlc2tSyaA2bF\naz8dXmv/Ni39L6XjCLDLWl5hQ7cAcGHiIEl5Wh6SZiYpOByNJISgPJ6CdRlP\nPMX5pvWmuQJtRooFIfvB2szEdT2ke5WWIs7r2hzR2BGTyXhLMJnIH9+uXKZG\nPtHT\r\n=Pght\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button/styles\";\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.**\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n**Note: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.**\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button--icon-leading` | Optional. Styles a button with a leading icon.\n`mdc-button--icon-trailing` | Optional. Styles a button with a trailing icon.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n\n**Note: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommend always including it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color-or-map)` | If a color is passed, sets the default container fill color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`icon-color($color-or-map)` | If a color is passed, sets the default icon color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`ink-color($color-or-map)` | If a color is passed, sets the default ink color to the given color, and sets the icon color to the given color unless `icon-color` is also used. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color-or-map)` | If a color is passed, sets the default outline color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v10.17.0+x64 (darwin)","description":"The Material Components for the web 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/density":"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/button_12.0.0-nightly.7427449f0.0_1620672309262_0.4593765577513633","host":"s3://npm-registry-packages"}},"12.0.0-canary.957cc3bf5.0":{"name":"@material/button","version":"12.0.0-canary.957cc3bf5.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"1dc709fc2b621228b75c3e03480f2e6b98fac546","tarball":"https://registry.npmjs.org/@material/button/-/button-12.0.0-canary.957cc3bf5.0.tgz","fileCount":40,"integrity":"sha512-Mpcvsa/oZ0k8oYZBgMYgw90h0l/WQEZSpy0Xq6Jv9PQhdUhACmkC+mRwHy7d8upjWojyjcBdOaXyEQ9XQowRFg==","signatures":[{"sig":"MEYCIQCe0NWtKfr9+/ulyjcFOkw+9qX6Yy8ftCFF9grLEIi36AIhAMmtPHp7xobfgxYe0FeWYHBKwEu2fAjYnoBYAkZ4f6on","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":504959,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgmaw/CRA9TVsSAnZWagAAsf8P/jx8RMvewsWucXlnMXgq\nhUp3a/CMAP+14pPrCeL/MLeGJBwgB9Sqcbqm0jH1aThOyaqEeWxx5QHNdh1T\ngUo4VxIJ6mSMscDS/k2Orpr9l9j8L2MVbWxCXokA60qHen8kskXr9QaauCCs\n5TDze64E+vQ5QPFAwyBM7L0TK9C4il+gUmNa/Q5IfttKpTSvSVKO3Tx4fL8o\nNUufpJWx7KEyvT4ynJ6ucz6aj7ykXwlq9X+YJrkpmsPUojJ75eR3N+BX9MYq\nxlEA0pafcRTa4FPdOJjqagTbO/lpJ+K3NgkKcR9t5mebcPkPVNUIbSdQ28OT\ntriiSP0SDj2oVUXExqZQuX6/5j4GtOpS7zNWnCxKN8xRAJ7IqjcxdKLJ5rwQ\nVHIwpVpP/Hfsjjg7b8z2O3phtek+Ixjp0lTMz3nchVVv8GcBf83elcoE9NUB\nrWwaLtqy4BD2peUMkAU1kaSLY7Dzruff/+Ig1YYOMrU252PPjXt2hL9fEJoF\nooQNYflHnpuJq4J2L30XMvdznPL/05T6yVFw/3iabEPoiPZgoBt8I8ntJbop\n5cdpXAMIPV0OjWebMHHxtGqUHtNI2dOELws3LxNCO+b7YDG3uy43i1p6U5Nh\nUYU6qjTaE1Wimq3T6S8i4Eg4uiKlaXCXra7NB0nQazPtrQHW5rEqMc480GYO\n8UuY\r\n=7qs9\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button/styles\";\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.**\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n**Note: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.**\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button--icon-leading` | Optional. Styles a button with a leading icon.\n`mdc-button--icon-trailing` | Optional. Styles a button with a trailing icon.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n\n**Note: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommend always including it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color-or-map)` | If a color is passed, sets the default container fill color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`icon-color($color-or-map)` | If a color is passed, sets the default icon color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`ink-color($color-or-map)` | If a color is passed, sets the default ink color to the given color, and sets the icon color to the given color unless `icon-color` is also used. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color-or-map)` | If a color is passed, sets the default outline color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web 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/density":"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/button_12.0.0-canary.957cc3bf5.0_1620683839284_0.6810183388571782","host":"s3://npm-registry-packages"}},"12.0.0-canary.88a33cd70.0":{"name":"@material/button","version":"12.0.0-canary.88a33cd70.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"ca1bb83b936646fced85a20313c5d218e06f472b","tarball":"https://registry.npmjs.org/@material/button/-/button-12.0.0-canary.88a33cd70.0.tgz","fileCount":40,"integrity":"sha512-fFcBbECJr5norLgAYDoHr7yRSoczOxTmMycPF6ilbMOLh09n01YfwKazLcjaouY+0VMGL71pXGr8WZeew3HgOw==","signatures":[{"sig":"MEQCIC2gB9L72Z8meFdhLJLN3o+nzrFE82Maz+dWp688HMaOAiAbmkRZR+lP/a5EiSzCxtHTN2Dn94m5tGvWqszyi+4TQQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":504959,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgmcs0CRA9TVsSAnZWagAAY2EP/jNHmJJSm6Sy9Pm/icUY\n0EBsRZJf5bdNyF55V1Uo5fowNAN1TlMvVWrpH8t13SLjRaSjTZTAJyvXq5e+\nNOCc9ZVw3AU7C9d97rSDYsL2GevFv12I8wysY9Ym1L2k8OMAngWK2PTJUvsc\nwXy4hRyO/8Rw3fbup4M1dL9/Ul3Wa/QD70hr4pn8FnakfShGdQTvHvCQN0+Y\n6SEoE7nO7NAWgnvBacJcylaI54Whtw2uOdIxAXViv4pwdPOeE24qi6jb5XVm\n0/noL1j32Q2pQLFtxKtxwMPgX/SG0NCn0wwITzfWxzmWA3aisdvUzD2u079a\nN9jwwKYzN3ZkBzX0G598Gm5SuiOqlS/NaDwQN7kidABnZpn/QI3PgdikNUvX\nO1kJsAUfHf0z2f1cCepcRSX5m/dyTTGabhdkZ9F31Q1KBlHtJHBLvLLi0yn5\nlC5oSAZ2tElTkSRqNIrkHbn7DmnZV2CZLxIp/cz24ScEId7XdEgCelAV6Fgy\njM9MFmXQvJDNVQWZkeWW7gKSdeHwDHKwtkZI2fxilUsEI3drZOR5l1qIeJ0N\nm+x94NcihpylOn9vMH9KSd+4/NcRoJz/7CA5FH0IPfzoBefNavvFKjcwnddw\nGTw/3bI6UtuEkoIy4iNtawP+AAoeJgZd8wFxEzBT5HNH9B9jrJZShbwFqRrY\naW1E\r\n=ppq4\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button/styles\";\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.**\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n**Note: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.**\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button--icon-leading` | Optional. Styles a button with a leading icon.\n`mdc-button--icon-trailing` | Optional. Styles a button with a trailing icon.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n\n**Note: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommend always including it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color-or-map)` | If a color is passed, sets the default container fill color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`icon-color($color-or-map)` | If a color is passed, sets the default icon color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`ink-color($color-or-map)` | If a color is passed, sets the default ink color to the given color, and sets the icon color to the given color unless `icon-color` is also used. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color-or-map)` | If a color is passed, sets the default outline color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web 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/density":"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/button_12.0.0-canary.88a33cd70.0_1620691764275_0.16189816940428337","host":"s3://npm-registry-packages"}},"12.0.0-canary.d20dc6dba.0":{"name":"@material/button","version":"12.0.0-canary.d20dc6dba.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"3628d148803b8df934f7832acd446a7970e82a37","tarball":"https://registry.npmjs.org/@material/button/-/button-12.0.0-canary.d20dc6dba.0.tgz","fileCount":40,"integrity":"sha512-sGMDcCE3+2SL+j97yZcNAedCva/TBCBLRBS/sIkFDWJiu/Nh28BMZuLwOgNikt9ymjf9NBsGlPjwxmY7T2dbVA==","signatures":[{"sig":"MEQCIBSAZeIVCR/q844wklPszwnZMoOExS4wOJdjT0Y7I576AiA6p8dUa/lGSJDyV8Ta1RudpkLOD/QzmqBl617vymjnmA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":504959,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgmc7qCRA9TVsSAnZWagAAJsYP/iJRkhTbs7A3ZICyRSfl\nA/CnAbV6DI46C5uA+qsDxEF7zwipNvQSqM+7xQqmhlHI2T59KoxAvaYqegIy\nHAbORjh4HhfXBHroegyhjY2QWYr0dO+4SqlrgRB0wVfWBC0cZCM71oUqKx0A\nYSq7tpX2oLiUHVUKPWsR9F+dvuSn+M7ZCc3C2C55zdJs6qvJ90T+SfXINqb+\nPkZCSQ1vGI87LshaYEEBVIDG1tUDYrY7jwjJV9rVlMmVrfTfGJGpyaaNFcgk\nZ2SoSededrJaBwpiFP5ZgX44zhM/hAnBBPfOAdGi0sK+Ownrmil58oSMM86Y\nIzGJIbyDcB9B90zDjtk7VXCPthaUct6GJUsFtvndi0vdkOV80aZkPnrgw51Y\nUfmJP4nkwmsjjiozhJgP108nN4HFsQ631MOovy0DGv+deEQ7YjkM4/2MypW8\nZz4HIsxye7rYeduVirWkOZjQRFKMiINCAkQvJhd5oVSGzY8sSPYYr/D1W4YK\nzDb43iEsQXg9tDh2/Ugx9u5vmN9Zv807E4tI9rbDmL8SO0uk7azjVBIYoSe9\nh2zRkHiBSNoKJHCK+1PPNskq4ajnn+SlFO3e2KZthJ+tEEZC0Zny2/3PsvjZ\n3YwnfZUFvfsRLpPfX4zgu0XxNRmjxe2nRsCfTI1buaI7rNuIMiuyZ+ouWABe\nAzxU\r\n=ti3T\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button/styles\";\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.**\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n**Note: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.**\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button--icon-leading` | Optional. Styles a button with a leading icon.\n`mdc-button--icon-trailing` | Optional. Styles a button with a trailing icon.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n\n**Note: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommend always including it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color-or-map)` | If a color is passed, sets the default container fill color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`icon-color($color-or-map)` | If a color is passed, sets the default icon color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`ink-color($color-or-map)` | If a color is passed, sets the default ink color to the given color, and sets the icon color to the given color unless `icon-color` is also used. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color-or-map)` | If a color is passed, sets the default outline color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web 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/density":"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/button_12.0.0-canary.d20dc6dba.0_1620692713797_0.24542976609369038","host":"s3://npm-registry-packages"}},"12.0.0-canary.0ce2fdb02.0":{"name":"@material/button","version":"12.0.0-canary.0ce2fdb02.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"931a2bf53d2e8c833fd44fb00cfb16cd4dab964d","tarball":"https://registry.npmjs.org/@material/button/-/button-12.0.0-canary.0ce2fdb02.0.tgz","fileCount":40,"integrity":"sha512-Pfc4YDucwyFkwLPYsdefM756h8kNKpLtUaBuO04gllCnqHZbfUWg3EMiK/khwCKrenHS6IY1gsHqsID9StVnOQ==","signatures":[{"sig":"MEQCIEWlJGSOPO5ZVZ1Pt58FRYjXNoTMuKsKJ5AZ9J2P1294AiA5jXUUfflwnlMBLa0Txy+xOeSfUeQhgko5f/KTudob4w==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":504959,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgmdbYCRA9TVsSAnZWagAA0MgP/2spXUh73VbfYDbXjupZ\nA34HS8ZalqYciN8zmJow3a/Ia4A7wzKY6sSC5HW8Ez0RqdFcsM9XVHZg2vRJ\nk/C9CjoLKoxOHyCQTznFBdggilgGqGJXNUotzu5eoni2+cHLc8EeKQPsL67A\nDYy27i3ULVWtl43J1W+7MgMn3Z2E9xoCsYa7nDL8SxKsbm9x2srJqg6wrW4E\nIEkTOyiZrZi6EMN2NqwETiwPDMLQQxA3Lx57jNiGrO4W2Y3raDdAeVETKiPD\n8SYQ6sgyLzFECGnEoZilM6eKxGqKSOCSamWAOF5TMK2ncU3ir3fy45Ln8o56\n4VmHRiAhXg73OL1HvyP/2RrmA8OSFmc3qZJ27qAYQy2XajPbXmSmvyffV3Tm\nimAbx0UjOgsrwceOF+4/201Sb6Fmh4sphOX1QTky8m8gq37anaka0ZyreA38\nJjM3Rfcn9DBATyqvTVpdb6O3ntr9N+H0UKYoMrDjPeNzsOyUlkgxntRAfDVe\nNMFiBeiLdA/cdO2f0odec7wK/4Ax48JtpyRtmmJs6KJvEjqqTnOplEq9+zvD\nRwHaJtdx1y+ndmtERPUk+pTKoQ0OC2C0/KylTwkH9z9ymg3iHTgLH9O5qWPf\nPnNddXuKvv4Ann1rvqdF1ftNyJc5SQwtzEz/wudwnoN2nF3hztB6lD7cabGW\nuwFh\r\n=up+J\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button/styles\";\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.**\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n**Note: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.**\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button--icon-leading` | Optional. Styles a button with a leading icon.\n`mdc-button--icon-trailing` | Optional. Styles a button with a trailing icon.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n\n**Note: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommend always including it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color-or-map)` | If a color is passed, sets the default container fill color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`icon-color($color-or-map)` | If a color is passed, sets the default icon color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`ink-color($color-or-map)` | If a color is passed, sets the default ink color to the given color, and sets the icon color to the given color unless `icon-color` is also used. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color-or-map)` | If a color is passed, sets the default outline color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web 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/density":"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/button_12.0.0-canary.0ce2fdb02.0_1620694743736_0.4614764009910337","host":"s3://npm-registry-packages"}},"12.0.0-canary.cb162da37.0":{"name":"@material/button","version":"12.0.0-canary.cb162da37.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"caa4abb061f2028c0462c8681f7007fc29e1c4be","tarball":"https://registry.npmjs.org/@material/button/-/button-12.0.0-canary.cb162da37.0.tgz","fileCount":40,"integrity":"sha512-TJ/PrP/Pd3+V3T/X7+NQvWZoyyLKJukqzO1DEEecWCOoZXRYD++UZK2eFrtwGaBP4CIFWp5e9h9R8/VsHWKBnQ==","signatures":[{"sig":"MEQCIDV7IWXRj6xMaAEWqUvsJJ8ksok7JhE8zJIPtkLF/dnMAiAOXqU81WJugRarlK1Z7+ELQRCnA1JUp+MI6ToNIgEIaQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":504959,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgmeTeCRA9TVsSAnZWagAAUfAP/0l4brgZngcBpttsxMLv\nJejcC5/vvaYXhwhboiS+m/rKed+xY6aVY2dfcH6SnuDWmALQRFTk2Amz/dB+\ntuOWw+pU/HZv6zmRamHoEhMF1BbedCbFC8jVZibYPllDkkYwWtTboD9zHEx2\n6TfZWfzBVgasE+0GuYNzroaPPLltVS5G/E6PCzIufGbTpfkNUruCs7HY/s+E\nhe/QBGR5qfe/ZEIyfNbhydBaxNBbYkuF4HQMyuSxAfZXepjyMvyR3fyhwws2\nePoEvOLznf1RQdbTB/yVZ4nMbjOOklFPGpzfThcuU/XW9pm+bpfREBPmzPUs\nZdpg/ltvRuwNK0ik9a75wNEtU66Kz190quk2sfYcSKdf7nw5V1NeOCoJWtfc\nCKVjnl3MUKQmv6MEiHSFgXoRCO/EW5wJyHU2QnlffCAXzQ+odZq2OE8PKnRI\n/v8bJPwPMO9mxeiY/NrJIKL+IADuZEG8B6naaXuzwhSo0wyf//QMhnGb0xch\nPtC5XQdZESTERpSK59Y2OmuoYwy/5TXFNyv8C4wElhaiqUwrxytXo1iBo++A\nB4dLo8R3o3IfypiQbffesUTQ7R6yuY/njeNFufTpyUXr8obBwiqyEYDJUYjd\nhxq5mj5sucfSnMyjWzrl4XWFfs4Ht5IQX5e+FY07CBkW26IrDk9RJYm6kTdN\nRiGs\r\n=hldK\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button/styles\";\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.**\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n**Note: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.**\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button--icon-leading` | Optional. Styles a button with a leading icon.\n`mdc-button--icon-trailing` | Optional. Styles a button with a trailing icon.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n\n**Note: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommend always including it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color-or-map)` | If a color is passed, sets the default container fill color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`icon-color($color-or-map)` | If a color is passed, sets the default icon color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`ink-color($color-or-map)` | If a color is passed, sets the default ink color to the given color, and sets the icon color to the given color unless `icon-color` is also used. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color-or-map)` | If a color is passed, sets the default outline color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web 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/density":"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/button_12.0.0-canary.cb162da37.0_1620698334361_0.2847297769878241","host":"s3://npm-registry-packages"}},"12.0.0-canary.573dc7ffd.0":{"name":"@material/button","version":"12.0.0-canary.573dc7ffd.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"cf4fdf7cae7321857080a659188522233cdd9cad","tarball":"https://registry.npmjs.org/@material/button/-/button-12.0.0-canary.573dc7ffd.0.tgz","fileCount":40,"integrity":"sha512-MvH8Zzwk2pFKryVCwUwaDc1YU/DTYkZDGGWMVSiKM3UbZ4qRvEucujXYBV/+NUHwk+Iivf6UfgWxWz9pp+gfZQ==","signatures":[{"sig":"MEYCIQCThMHEuaT5q3YijxEYSvciWfc1YB/0FDRGMPA7x2V6LQIhALGOQRmvApYgBoDocAFNoFTpfNHeNbpEGpMK+xfMczfo","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":504959,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgmelJCRA9TVsSAnZWagAACyIP/134t36/Wk80JtDcRPdJ\nNFtKibCUFPNF02r1l0GD2TTqC0pllbS0IOV1yKVVanL9t44m8m2OIsq3vrx9\nHR121bx3s4i7RS1cxIOXdbYKLhijYoMLfwWA0La9tbqVLnma05R6XYLEBk6d\nZnQm4mvsN/JDh0msHrX1ypzWsSpwSsUr8xwO07MCcS7jQ0/rtZrlScCjsjpB\n49upa/pJEb2C/sA8pY2g1acPcQAZlqvqLL8j2YBw1skIrasyulWDflXRte2l\nBrvfnbFk+6UhVzxHJaw6g0edYZoJeI29v9RInl0gK9d/jx1/MGok5LYVHGfv\nSG7XKKY8LjFOgecV2/DC1l5t/M+dlVtPybs8pRWQBcBiRDPUFj70UdAb20l+\n5nHoUvDaFOxh4MlHL+AbziIEgW9iGdB436+wc6OE5Qzz0SIc8h6rZCAlBPrW\nxIiY3QopYXgca6dPuzR/eM5Z3D0gBndL9Svnf2Ai+aB9SLRTh3/duL7CIEzj\n46+19gfUHBgbUoj1qMStYX1rvtd01ZS9iVhXfWbSB6iZA7Jv/wXATMYWYwo1\nqO6SspRxbPTk3+3XscZNCqXz8F2+owue/h+LwtbSiQw8OmYsn4jsHXMXcAv3\nGXZwHlC+xGnkF+VSYjT0E8NkL2YuMN2ZgSM7e44TL+tTozcOhu3DgeVDhg41\njRTu\r\n=9rNc\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button/styles\";\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.**\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n**Note: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.**\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button--icon-leading` | Optional. Styles a button with a leading icon.\n`mdc-button--icon-trailing` | Optional. Styles a button with a trailing icon.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n\n**Note: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommend always including it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color-or-map)` | If a color is passed, sets the default container fill color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`icon-color($color-or-map)` | If a color is passed, sets the default icon color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`ink-color($color-or-map)` | If a color is passed, sets the default ink color to the given color, and sets the icon color to the given color unless `icon-color` is also used. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color-or-map)` | If a color is passed, sets the default outline color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web 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/density":"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/button_12.0.0-canary.573dc7ffd.0_1620699464763_0.8150003076503025","host":"s3://npm-registry-packages"}},"12.0.0-canary.d5f6ad3fe.0":{"name":"@material/button","version":"12.0.0-canary.d5f6ad3fe.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"0a602b2df596e85c5614e22d28059a82f74cb415","tarball":"https://registry.npmjs.org/@material/button/-/button-12.0.0-canary.d5f6ad3fe.0.tgz","fileCount":40,"integrity":"sha512-kmKnm1F1quBr3PH5FGW/YnTZf0VkcXbc4zFzUFSBTgJHXTL4ip8va7+u7D8t4vBnUECTAcIH8IZwNmVPlPE4ew==","signatures":[{"sig":"MEUCIQDEOASRSVfXcoXPyGYzAl8hmT7XbWMq22FUbiVx5iMNugIgPJ0Osdtn0lrzGMarUvaCeWcp4ErJHQcxk4RWDnkBob8=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":504959,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgmxHTCRA9TVsSAnZWagAAuWQQAJlMqvuU3dYFur5sLFC8\nP1TSF1UVw7IUoHDh4OCaDX47Rs1sb5yp0+R5v9Ze1nIXbwWpH/fITvRvcwFn\nBUKY+Mg8qU6b7ORNgfYK1Fr8PcBtvQhhEkb3yphA+i27U+5tmeLvQ7CPRrHB\nPvOQv3z/V4cG6H0wsrRrUPQ+joD+vhUFDE/gLMOkEPGx36rw7zuOJdD0nfx4\nfrQBF5x9vsZu7DDdk9yjHZdjyxZbY/JIh0tmy25ZRMWSd45zJDmDe/3HZHyU\n7wdw5PtPLrYnjkxqD0tU7yyQKEq3sGCb+GnqeZArWFG0AxyKug/vDizSQAT3\n9gP9Oa6Hrr8dx5WtF8pKPmQT7+kU7RiRevUL+bDbizZ/8INc2RB0hC8HRQTc\nqoWlQ65WNNkXpEjFJLevb/JZeFYtjbMl+kTvOlYPcNW6QHUlHKi4ibyfjIVZ\n+/r/A9OkXpDhRxftmmQ4eioTqajojtpnv9fZ9KJsiRrgyn0t3O5WDtpulKEp\n3SK6Rntu6cf/agaM6Vn1VlFNQZ5guPMflkTzitxa6nDFXAA+DHkzMAO7Uw48\nXjbBqVau3TnW1uRy1pRb/wVH/OmPQZ/kMwSE4d3HUZc+b+jqy6rmqrhhUBgo\nXJnTulMh+1oML4j+BCQc7v0pX7zRY7qftXdcYoH9mHM8pwQUJoq3X8VmN4Q3\nAmF9\r\n=BwCl\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button/styles\";\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.**\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n**Note: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.**\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button--icon-leading` | Optional. Styles a button with a leading icon.\n`mdc-button--icon-trailing` | Optional. Styles a button with a trailing icon.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n\n**Note: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommend always including it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color-or-map)` | If a color is passed, sets the default container fill color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`icon-color($color-or-map)` | If a color is passed, sets the default icon color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`ink-color($color-or-map)` | If a color is passed, sets the default ink color to the given color, and sets the icon color to the given color unless `icon-color` is also used. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color-or-map)` | If a color is passed, sets the default outline color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web 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/density":"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/button_12.0.0-canary.d5f6ad3fe.0_1620775379203_0.641159179380131","host":"s3://npm-registry-packages"}},"12.0.0-canary.25751d2ed.0":{"name":"@material/button","version":"12.0.0-canary.25751d2ed.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"683d361c94decd6a5a9981427834e6ec16e8b9ba","tarball":"https://registry.npmjs.org/@material/button/-/button-12.0.0-canary.25751d2ed.0.tgz","fileCount":40,"integrity":"sha512-cUm5FIEJU/9fARY+n6nFurbVa1Ps/DcJvwQbx0Exo+ZdBw7j9mVCaL0n2fXFLW+9/PV/kHQmDkO/pwo5y1OLwg==","signatures":[{"sig":"MEUCIQDX3k//SozsouYg4boagFnG9hUZPms447lVEftHZDtseQIgBqAUEBq8WBmrUYdmMnTTS/sFVSxOgJsEx++cUY+mzHk=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":504959,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgnAA9CRA9TVsSAnZWagAArfIQAIPkyXRSYWdnOPfbtzsR\ntXJJ0kbjArMN0pavpU++SApjyifX+hqEMzNRpff0J9BUSRh1GSe9Gm3HHO4I\npHPNd7iGPW7c9nVhRaT6wxr5sOkR43XGMsqv6c0ZbnCMBllPEBoMwndUaBNR\nMONUYA3mfcGLJG5nWqM8tQUU89IQ2Z4nLAmpyQjISXNXsroywMrRc0wXt0de\n6G+uHJIKpeym7yqk4BMk3wvqAsXqoMdikd68eUY7u4rQD4JShUnsouFu589G\nrHFLsKI30v6agYXdyib8+8o68Xu4zuQ67EcIK9blbAAmy5spaxq+zj3NzEAl\nP1opza2LVzVFKbEiGweT/O7xIchL+DNooNXhToZra72yghO01VQnYhX7McBc\nwhAGyin+joWfmF0taD+RNkhDHpJ4+2pSNx2fQJSOwcXvKf5AeO1NlQP3Bfeu\nyD67sWBheOHJS7ULvN2x9g4ekdFzXQXw3hCMv4PwSfHz/rlfxUq+nJcolb2h\nie3BoAaelixMpDh8qr0MqyDgeWLwjcsEeov8rTTmV/BHu/Bjog/qBL4+BQ7J\n8dvQ0N5iyCIqJ32jdOaA7L+tccbaVz9BRnXQK6cSuIh+u5e1rf6oTykNHphB\nqIZjgLgRP5QOI3u+QybEf67Dm7dcqWtln6FL/MQwdRQJq6bYHqIlJYwxhJyv\nKFzu\r\n=2HL1\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button/styles\";\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.**\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n**Note: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.**\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button--icon-leading` | Optional. Styles a button with a leading icon.\n`mdc-button--icon-trailing` | Optional. Styles a button with a trailing icon.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n\n**Note: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommend always including it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color-or-map)` | If a color is passed, sets the default container fill color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`icon-color($color-or-map)` | If a color is passed, sets the default icon color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`ink-color($color-or-map)` | If a color is passed, sets the default ink color to the given color, and sets the icon color to the given color unless `icon-color` is also used. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color-or-map)` | If a color is passed, sets the default outline color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web 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/density":"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/button_12.0.0-canary.25751d2ed.0_1620836413373_0.2626264624870267","host":"s3://npm-registry-packages"}},"12.0.0-canary.a23ecb682.0":{"name":"@material/button","version":"12.0.0-canary.a23ecb682.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"3eff6ad2a5e30ecc42ac227d5e4a26e0bed5314e","tarball":"https://registry.npmjs.org/@material/button/-/button-12.0.0-canary.a23ecb682.0.tgz","fileCount":40,"integrity":"sha512-fpwL2KIPz8ekiVeDgeSdhrI5Fet4nUXfYcHf1JrH4PIPuXBULKkii8ppJWld+DPR9pxPXk7N1v+pfSuCcBPKfw==","signatures":[{"sig":"MEUCIAQjQ8apDSYAAcxC7C0iKJo1VHdkATL+pqmbI4q4kWZRAiEAuZ/bCT6zgl3w1eBOQWLdNxvx/R/VVbGRfxwf4hfTx8c=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":504959,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgnB0tCRA9TVsSAnZWagAAsrcP/3x0eRuGjXY/QzW5xo9K\nV0ZDlu+FcC0SmGKIZblRqj/0jptLwenADnqyJKdBMn7YhPkGitQ2GqUzCnGG\nqZLaKgEahfjQSsb2BmYQB+yZXnZTU3RpKOvtBk8YK142nPZlFlF0FqdwEvJz\nPrc3vEuGNKLJslCHhe+RhZ7El5POBxn4yjL/nAsWnh/gJQF6sddpDoBMteA9\nYXH1B39Pf4sJqUnJoibzl9cKUggLZ73fI+DZK0J/AkL26eQqh9XXGPnT1z5T\n2vRhEQdhXQdL6Ua2tzz2qW7X3pEAdC7omfbWX7BKp0RXLVXZgo4JqODzI4IE\nqfzXC3SfALAVWv0tvAoKWxhHYcdcY+4xw9DwK07vLGd3cVew0if4VSwIVIU5\nyPAsxzaLwAqcD1B6zpPCLVKXzF3IMIKeCw0s7ufLDl5vXEluM4K5WrgzpVUz\nS1dG77XSpi7P4Fm5RM33jZwn33XGmjRvtCUNLnv1jZwJoDUKdp3A1AReItn+\n5s1o/ZfB519QQYDVWPq9UW42Ok3fbKZlOTG4xLWuuJZV/QAWwhE5Tm88O66z\nZoxtWSLPrc//Uyh/uWcMdhAV8q0MlNCrqhAtcpiRDgTx904kk4P1pZz+SNiV\nNxpjui+eTvu86Cnq4noEipQ5JHXnKR5clZx4TVdFPFPSR7QXho1r60SliJC4\n2kIX\r\n=saUC\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button/styles\";\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.**\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n**Note: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.**\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button--icon-leading` | Optional. Styles a button with a leading icon.\n`mdc-button--icon-trailing` | Optional. Styles a button with a trailing icon.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n\n**Note: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommend always including it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color-or-map)` | If a color is passed, sets the default container fill color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`icon-color($color-or-map)` | If a color is passed, sets the default icon color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`ink-color($color-or-map)` | If a color is passed, sets the default ink color to the given color, and sets the icon color to the given color unless `icon-color` is also used. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color-or-map)` | If a color is passed, sets the default outline color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web 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/density":"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/button_12.0.0-canary.a23ecb682.0_1620843820528_0.03462728677717086","host":"s3://npm-registry-packages"}},"12.0.0-canary.33a954852.0":{"name":"@material/button","version":"12.0.0-canary.33a954852.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"44463051d82be6f7ae606354105abfb7cb900eb9","tarball":"https://registry.npmjs.org/@material/button/-/button-12.0.0-canary.33a954852.0.tgz","fileCount":40,"integrity":"sha512-gefs7ie5vSmLRFYXmDEgPGXC7jbuqxFnBvon38MWxvgZNkcFZd2oAzWMq+Z/HQmuNEsjzP5igDEj6Oq3SL31+w==","signatures":[{"sig":"MEQCIHC00A2BCIfVf84YxirniBL5V6bm+aVI20ASZzpLJO6qAiBQvH8rlfqyIxYUjFQpTelPBuyoCGL5WHn4vZ6fhPRHqQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":504959,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgnUDZCRA9TVsSAnZWagAA1rMP/103SFfqVkGe3jUWGnQ2\nNarlL1PloJobxfI4vDVr1OgdWzJLB0dPmjVsuNyyOrCjooMmSxVwbjjEao8s\nFCy+/+k1ccGb1LoH3nl6WC279ntY7xhG3vburB7VMjq6gANHb1a94GuTiV06\nDEK3XtTbRgoiudqqWR8qjiGGJ7hzvHqfhqvk2/xy6q0dQ+Ar9347L5zjfVas\nPXva/qA4lZ3YDKw4lwmSOK8b9jPDmmDd2phCWgR5h0onYvJTJRxYgt9C7P8S\n7oRjFu9aL5r9iZH5AVlCaoXfowOZ+2d/xkdTrBlxPQrKon/H3oYQDvdJj3Wp\ndjTPfJIyN1Xd3WKiwT47bcMwx6O0BgykxwYnFXvfOinz5KcNOntl9A2eZ5el\n7GRY/XJNBuZpq4MlbHsUnD/BobErKABz1+1vskLaYZKQuGlBVGtcs/rZlZz7\nHxsx32IrMu3+RYgcmalUFi9+cYKXA0puOHZZ7EkTbK+CdOfoUR2chd1vJsse\nbMYUXQ0eRbtpYC/aNYwf4qji0Ajo01C5o80/fEQcR4FYD1pEYL94LAhLM5Sy\nid7A7Qc2eCH3iA1TB/b5M0d5NFo00BwsWy7BCcC6NGhkXmHNfIh1vnC172TY\nXId3THwBaqmXQ+5uDsgzXLoWnMmJWULb+ZBRXfUtbPHCyU8bk1HlAoXrJ2Q6\ngCBy\r\n=okeQ\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button/styles\";\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.**\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n**Note: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.**\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button--icon-leading` | Optional. Styles a button with a leading icon.\n`mdc-button--icon-trailing` | Optional. Styles a button with a trailing icon.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n\n**Note: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommend always including it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color-or-map)` | If a color is passed, sets the default container fill color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`icon-color($color-or-map)` | If a color is passed, sets the default icon color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`ink-color($color-or-map)` | If a color is passed, sets the default ink color to the given color, and sets the icon color to the given color unless `icon-color` is also used. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color-or-map)` | If a color is passed, sets the default outline color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web 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/density":"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/button_12.0.0-canary.33a954852.0_1620918488963_0.8322133830553438","host":"s3://npm-registry-packages"}},"12.0.0-canary.a4484849b.0":{"name":"@material/button","version":"12.0.0-canary.a4484849b.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"88692c30e11e5cd6f817b55748014b408555ebcf","tarball":"https://registry.npmjs.org/@material/button/-/button-12.0.0-canary.a4484849b.0.tgz","fileCount":40,"integrity":"sha512-G11fjMQIp0FB6XyFf+qTjzHHLZPBuQ/rzDDZ6gIxd4sFUZMcyUlOMc7qOLdaq+xDRr3HCyQBPjjHFYCciG5/JQ==","signatures":[{"sig":"MEQCIG/vcflWaAW1FBbek/PIYJ5CgwW31rIZJzIi1EBXwvzYAiA8oU9zdIFkQXYN/oQFuoBuwkTy3JDjXfpXshe0JXc+zQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":504959,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgnUZRCRA9TVsSAnZWagAAM48QAJ8LwGndD4ElL29TVfY1\nYW60BBl9zQcVrVJ05zUR0ZQ8OsctxJwoD70cUdXimAB7boOthIFa9vaS0mBy\nQhpRGlvic7Et7lbirYKbi+yG6qws231sMQmjXjQdRGAPwA3keIJRrsHsIoJd\nQgrFv5jLwHcbAvXkJvLXHDKWSjMCv8bKmTd80fFQXg4NIyQsWo4xJTfPlKFX\nU2J6For+UhSmb80oVoEihtx+9/hMQILNG9wfYkdsL7VfkdS4xVhX3iQqENlK\n7Mn/GG+kxtSBq9pIWlk3NZLiZe4DvhWzuwTTRa9UlL8PCimJrY5RbWWlkCb6\njhDEeJOaLElywT1VtRV3obhliySDViUpRrJQzQftV0QIESv3dY8Sr/QuNeIX\ntE+Ak0uTdlVSfk0ABLujT0uYoL98pnCLDiBXO0fFiQDvFV0/AxvjdSK3fPkM\ndpfMPJZHgL5zP9LfIO02pulYqzN196IKfFQxhnlI8zlQ0zefuQQYH/hvn8On\nX566knusATNHdi3iHZW3R12eUkzinq/Ls60kuAfhkMex2bCBui3QS1+zlp1R\n6CXbO8gw1RQ/hF96Bv/DiuFoLTSZtATt+OfqH/ORdSYmx9DA/UcXVATY7hZ/\n8Xhycoun4jG/FQEmo8+BU1uaZ7o1+1F3FWs7y0u3uQIKAh6kTKGvRgpb9l0j\nz23B\r\n=W+Yy\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button/styles\";\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.**\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n**Note: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.**\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button--icon-leading` | Optional. Styles a button with a leading icon.\n`mdc-button--icon-trailing` | Optional. Styles a button with a trailing icon.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n\n**Note: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommend always including it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color-or-map)` | If a color is passed, sets the default container fill color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`icon-color($color-or-map)` | If a color is passed, sets the default icon color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`ink-color($color-or-map)` | If a color is passed, sets the default ink color to the given color, and sets the icon color to the given color unless `icon-color` is also used. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color-or-map)` | If a color is passed, sets the default outline color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web 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/density":"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/button_12.0.0-canary.a4484849b.0_1620919889029_0.9965522669833211","host":"s3://npm-registry-packages"}},"12.0.0-canary.b4c3f513e.0":{"name":"@material/button","version":"12.0.0-canary.b4c3f513e.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"b95c0be2dca036a0f986342ea446c5fa51849f02","tarball":"https://registry.npmjs.org/@material/button/-/button-12.0.0-canary.b4c3f513e.0.tgz","fileCount":40,"integrity":"sha512-p3DvWOhH8dAk18gUE34pJU6qfWH/3u1Fj7XVC0h7h+7bD73ykpjmRJXFwzHTgc9BVFWz8bw5K69I8vkEalOmvg==","signatures":[{"sig":"MEUCIQDnJGdSMP98nkpsUJ3X7WmRzojhFuatVRhlU2M/siIWPgIgZuSOwBiMrWRltNvJbuxTcSUbSZaBMMwEaO2eXPY3GyY=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":504959,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgnU7+CRA9TVsSAnZWagAAjdwP/1cLV9hrrCIhTDF6rLi9\n2tCy4SAWbqzDy9OKn2V/pGZqKpVV1OHEbFMCKEdvxjEvNGsRCdc7IlptbgzU\nARoN6/4h1EPUN/AY9dynJdiSVhFdx9mQsm9PowrctvyRJO56ezwsITgNltrh\nhm9Yfe8VEoCMIaB8A7GAN7O0OdynIEeOL/8LPKkfShRdp0yKk9ntBd0DtX5p\nTnvrF7ElWBLDRtplj0FdAZsEWLQ9PCSVWK0hsXthPO0S5VbnY/OkmM9v0TRO\nTcs5aKCKHNz6vUW6PtNtBg6M1KcyPgPy3rMrBbz8EkMBMIkLChcX1pKD9PGj\nkceTha/2vxc5fzisYTMa27nN2798AtveuqihTC6bXl3A+hv8ir1F2uuT95Hg\nr9lyh0bVy6cy+JHMhuCAOsqhHikjPV4gI7tDYaNpDjVDekCzcufWXFnhZpc9\ni9IoQMObkEl++dhw6kYQTDSC5lqk0eCrhpvQUQkUOKPK3X2/+7E8g/cv9w0a\nEVr2r4QPohvR54M8HfYdHh5S+ev34uBzl7nUkHtvxIBAwu+/l0PIlFwIlZQx\nPZ1LzruGg8E+WLus5MF38Rp1ILh17ZoxqtykVOtYVg/U1UpTHqYhPOBaPog7\n2onCacp5InrSCqLdzQNlfBLm/rysvUIBfu8U3n5SC5bbdl718vYCaD0vAWM6\n8tMy\r\n=V+K/\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button/styles\";\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.**\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n**Note: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.**\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button--icon-leading` | Optional. Styles a button with a leading icon.\n`mdc-button--icon-trailing` | Optional. Styles a button with a trailing icon.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n\n**Note: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommend always including it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color-or-map)` | If a color is passed, sets the default container fill color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`icon-color($color-or-map)` | If a color is passed, sets the default icon color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`ink-color($color-or-map)` | If a color is passed, sets the default ink color to the given color, and sets the icon color to the given color unless `icon-color` is also used. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color-or-map)` | If a color is passed, sets the default outline color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web 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/density":"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/button_12.0.0-canary.b4c3f513e.0_1620922109879_0.609757077134593","host":"s3://npm-registry-packages"}},"12.0.0-canary.1a8d06483.0":{"name":"@material/button","version":"12.0.0-canary.1a8d06483.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"8dd20ae410c8f3064511c5ffd2efbd433539ec73","tarball":"https://registry.npmjs.org/@material/button/-/button-12.0.0-canary.1a8d06483.0.tgz","fileCount":40,"integrity":"sha512-AxPbx9PCYX1Lbez1gsS1P6Ucbmc3UgEHgbNB8kxrksK1Y+vRD1nFXqxGQ67bNCY1c9gTKuMVM84b8OTccRZg2w==","signatures":[{"sig":"MEUCICHVMJe05az8dl4VJKdOaUMjTEvdXoEIMM4zkVu3qyvxAiEAzMBZGmHE2jojGxmc71OqvkFSsaK8xjl3yC2EqeMu+jk=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":504959,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgnVBQCRA9TVsSAnZWagAAsH4P/1y/20/qwTr6Pwiyau/J\nVMw9JrAbqb9OOBHETj75AP3HHSAOeGrqiH63u2Vmf3EPoIV5nffGKpHjL3lV\nwanKGSIcQpX+Qc0JI/Y1SHsFrshdgyOkYL9GDPG58w/PFYyynLwmSiDDsgDw\nQKd+HUe/tBwqtvEfMLQfmbKbj5xTJ+zMszvasg9CC86w+7khTcCfcVkxKMae\nPeBEkPgAxeRsf6eF4DdV3Af+EcwHy40ReBrMBV0nq0ZjaGh2TQLofxOWTa4A\nUEPds4O/1uIZj97CS3j42GgMtqV38/V3QfNKTtqbL93pgYJCkt+FjCKBiB0G\n6+qZvwnDS4H2iYIG9Er1NZkDd4/GSW2NVYs3JJUgW4c1Oe4yaa2Zf31F9K+4\nzjOpW433nK898+rujwVNxX9Xa4NkfIPzp3BCsZfZoolQQANPdxdrH7cXhSag\nBPeOS96LccRfss/8IC8E6PPFuHa5Pe52KGhQvGdCqFFbnzr1W9MMNC498KB+\nnI+YPIOMtSquQF4WIwi8HcqqQHwAuO3E12liQXpaH4jOjoTm3QWG6SDoJehQ\n9VweFOftjf4c/fOvZiBGmkY9OVfj1HZznSd14KNUXttrwjNqNDufbb93C3q/\nTa3VkX7qsuM0GyysOhS+MonVceq+Oww9KSP5m/vpa7P0myJ0QD17aOlXE4mv\n1tag\r\n=5mWh\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button/styles\";\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.**\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n**Note: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.**\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button--icon-leading` | Optional. Styles a button with a leading icon.\n`mdc-button--icon-trailing` | Optional. Styles a button with a trailing icon.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n\n**Note: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommend always including it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color-or-map)` | If a color is passed, sets the default container fill color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`icon-color($color-or-map)` | If a color is passed, sets the default icon color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`ink-color($color-or-map)` | If a color is passed, sets the default ink color to the given color, and sets the icon color to the given color unless `icon-color` is also used. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color-or-map)` | If a color is passed, sets the default outline color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web 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/density":"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/button_12.0.0-canary.1a8d06483.0_1620922448194_0.8737284168091075","host":"s3://npm-registry-packages"}},"12.0.0-canary.8e6081836.0":{"name":"@material/button","version":"12.0.0-canary.8e6081836.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"773ccb8c6cafe817c3d6f4ed2d6e78474f16512a","tarball":"https://registry.npmjs.org/@material/button/-/button-12.0.0-canary.8e6081836.0.tgz","fileCount":40,"integrity":"sha512-6LTbFZgje9yjXqhrHGVefFU+7NeFAKWYtSAV+9nL9xYqSah5qEc4g1rhiZlOMaKFeIhswTI9sGV3dRDSyDR1fw==","signatures":[{"sig":"MEQCIGORoS45+fyl8lboK4M/W1VH1ERC6Kmi3oKzoX2lo8BLAiBjrEWg0XpFuYrwxt24NfNj16mk6i18hlkPSupO4rErAQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":504959,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgnu5yCRA9TVsSAnZWagAAuUIP/1hnaS3IwT6A5XyK/0mR\nj4FBjGGLUQqHXDtB4TZvIWf97dFFF7EOSsk3kHY+68kbW3fFsWix5fwOVWHp\n1o+lyD6P0agwp9wKZsa4i/xKlRXR7ZlQPY1IqmmmO9QWOyF6t6bhWUyLEpid\nyNQhbVjP0NBsyyoGC1JyI5tGSp83aOPsD+r7ienL4IRu5NMo7Rv8SA7BIhPZ\nS9M61p7zHi4KqDYpI1nWNVE1TwfT5qgvnA2FuGyPeRWLxkVmHMFBnspOmlkD\nGbJCCQEWYTomHEfX8zZO/SOeORhCXwTf4w/iksR7/wQjfK2plCZLJ6f/M++Z\naTXHTe9wdaSFvPeFw5tWJgP+BCxyy8mUy7qMzCukIAc8K301Y19f5aHa96My\nRdIluYYOU3+iiSIp8zxFuoTIYb5EkHW5MrXQ6zgJ585F0hOXsEDhp3j6o7pL\nG7hJpL7hNnhzYX2Z218c25fQ0gjuyGn0cuXk7F/GeBXLg9KC+8i0XOCDrk2N\n/uSVvHnfL00+0ZpL37lhNiDVbvdpBF9K0QpLRaF5m4ZLY9/IzxHHUxZz1yGO\nQIvvYmUtEZJKvSIXpJLS2+B/D9p18XAruvbD81g5Oda6nvLKAJrsQQla01MI\nKanmshkzcNrPHBHSx4yL9/pe/nmqT5mA6Gs46Nb3qwgFA8lEg4XdhdEUoyqS\nvMWN\r\n=ZQ4I\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button/styles\";\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.**\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n**Note: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.**\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button--icon-leading` | Optional. Styles a button with a leading icon.\n`mdc-button--icon-trailing` | Optional. Styles a button with a trailing icon.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n\n**Note: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommend always including it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color-or-map)` | If a color is passed, sets the default container fill color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`icon-color($color-or-map)` | If a color is passed, sets the default icon color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`ink-color($color-or-map)` | If a color is passed, sets the default ink color to the given color, and sets the icon color to the given color unless `icon-color` is also used. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color-or-map)` | If a color is passed, sets the default outline color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web 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/density":"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/button_12.0.0-canary.8e6081836.0_1621028466105_0.5950154235846017","host":"s3://npm-registry-packages"}},"12.0.0-canary.a2b0f4cee.0":{"name":"@material/button","version":"12.0.0-canary.a2b0f4cee.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"cd5d8e1e927020a2046902b58be1debc47609106","tarball":"https://registry.npmjs.org/@material/button/-/button-12.0.0-canary.a2b0f4cee.0.tgz","fileCount":40,"integrity":"sha512-MHbpYLSJPQhY4V0d75vAXhLorH834YDlDoD4APM/1Dgg8aCGTHHIdz35WIlX3mzvNB3ElQZuOeRqTDdXWVdxXA==","signatures":[{"sig":"MEUCIGZeZGKV0TNnVS8/QmoTd36ccUot5gjXpjUlSmXDbfi5AiEAr4uTpV18DI2/c+G/tNocxp1gdEUmv7GbZMKfiHLyjIU=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":507393,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgnvGLCRA9TVsSAnZWagAA2CgP+QGhokKZgbX0PaZD10pg\nBt9+3p3cOsnRzh6qfy2IiVGO+B9/sojMznIrkFcBlLs2ztelb0vFOZUMCTva\n6HvnV/s9dr3/Iyo2sMKEmNSN6loBco8HNqoC/xuM1YbDZHV8pD1GY287vDEw\nuXFeGHZRhFBYT0q1I545TrHdqLESXxmH59ZOxI/SzeCo9fqBVqfmqeOh11bC\n14g3YEHq0tXL+hlPO+D+JyAUiFh9YzkF7cSSv+T6pZWhvUAmhbcDhAe0x9Y7\nvydLf8ecNKt/rB4LHin4dBe14E4Ik+3lFDN46TQCesiNYT4aolMgtiv8C8n5\naCpyzj6CzJrWl7TLkG5CEinycLm8hHZtkd+W58eXgfg4HRuXKcJj2GAJfnri\nw/9MGYoJpmFyEXfAtsnh/46/CxkT1yt4ZmdPNOB9Ku4fiF/k0rw+qCkHeE0U\n3/1qKJjJsw5k9koHm2cDAnKQbssqhl87jOHVJYVrpc/RQuzVNny95hM5EpwP\nHhOhIEyoNMLlNolJO45g452JleC0BL0kb3yVF/Lm2Bi5+j1VESlSf8u8X9xm\ndpcPujoJsRMmhKFJHR6QjSdqpQDIeC7grTqCN9SV2CZc5RuY3CHrWkEAb03C\nzGeLABtFJsOz8m9W5elOjTpgrJBSMlelGfK1U3vKz1lZId06hhQHjNuEu4Eq\n6Cmb\r\n=3hi5\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button/styles\";\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.**\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n**Note: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.**\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button--icon-leading` | Optional. Styles a button with a leading icon.\n`mdc-button--icon-trailing` | Optional. Styles a button with a trailing icon.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n\n**Note: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommend always including it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color-or-map)` | If a color is passed, sets the default container fill color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`icon-color($color-or-map)` | If a color is passed, sets the default icon color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`ink-color($color-or-map)` | If a color is passed, sets the default ink color to the given color, and sets the icon color to the given color unless `icon-color` is also used. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color-or-map)` | If a color is passed, sets the default outline color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web 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/density":"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/button_12.0.0-canary.a2b0f4cee.0_1621029259261_0.014085097931749502","host":"s3://npm-registry-packages"}},"12.0.0-canary.e8e39ad19.0":{"name":"@material/button","version":"12.0.0-canary.e8e39ad19.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"2974669683b81884580166d770d2a42af402dba9","tarball":"https://registry.npmjs.org/@material/button/-/button-12.0.0-canary.e8e39ad19.0.tgz","fileCount":40,"integrity":"sha512-Bv8Sf+y/ZHd3EABUHANSDd/rDVYatJhL5Ps6k/BRLmUisZaafvafE3VIPRXR46I8iXrBqPEmDlLQeguXWVC+Qw==","signatures":[{"sig":"MEQCIBfuW2vZ+bq74na6ZMzLI6fmjW+Z+7QdUTKnCk0gdLfeAiBaGxdRv32VaoSh/kw/bmzUtbcifFc/YM6o5SQoZrPrSQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":507577,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgpB/xCRA9TVsSAnZWagAAsvgQAIO5S1XWd/Hs2HgLYIzL\nB9fWoDG6KP1cWgq6v7ySyLqFZ/859xiM62xtavghcdjBxUyH8olohzSFj250\nVOwws1/ppKn8PdZFzQZCesBRz5dOPT8+xuPgCQlnGOoWppACT7cZDa60aCHV\ngc9o0MrvS9z42X42QijWxriP/ACiopELTPbcxQWEDFFLhmItLgMwmeBsThX6\nPQ1m4O95odgM4pLddvmL3uVqsrXtDtYC7qTrEqfJISMEVmMqarpXOGo8vd3/\ni1dpB+yEJd+dB+UVpC3HSfRqv6SRjqBzuVB0vANlYgJb6LXmpq1t2im+jrJB\nLG/23uYG6uGKV8DH8m0S3szfZlPJO0VlQMBgG/1IWhhfLiluoohxCk7KACnS\nGd/3xXEErYLQ4UdtgNEm77Tb0MI0YKWpjSy+c/dCguIPNmkqzyChZvojr6Hw\nUC9+nt13ogns2mm/qMsOg7nq+65M7CAumtjCt/3bLDocOaQ+a2t/k8njX0Wa\nQxDFFy5cog4jRq6gMeoNN17PyRUq9bTbPDMd58z5kfvmruBJHyWV8XlmlEGK\nOgQJTd1P8bD6MFTD9w+Oug47bQoVVhG55eFNbarCLuM5aLtzmJvoV2UKlWdE\nWPOkLDOgMh9tv4mjhA8vi4wwfDZIuECdQarA/sbO6K4vT1c73ZpoM99up0eR\nLHEH\r\n=dY8Z\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button/styles\";\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.**\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n**Note: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.**\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button--icon-leading` | Optional. Styles a button with a leading icon.\n`mdc-button--icon-trailing` | Optional. Styles a button with a trailing icon.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n\n**Note: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommend always including it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color-or-map)` | If a color is passed, sets the default container fill color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`icon-color($color-or-map)` | If a color is passed, sets the default icon color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`ink-color($color-or-map)` | If a color is passed, sets the default ink color to the given color, and sets the icon color to the given color unless `icon-color` is also used. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color-or-map)` | If a color is passed, sets the default outline color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web 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/density":"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/button_12.0.0-canary.e8e39ad19.0_1621368816454_0.6517567631211718","host":"s3://npm-registry-packages"}},"12.0.0-canary.4bb5eea2b.0":{"name":"@material/button","version":"12.0.0-canary.4bb5eea2b.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"4728c782dae063a7228aa3b53158e5996697b5eb","tarball":"https://registry.npmjs.org/@material/button/-/button-12.0.0-canary.4bb5eea2b.0.tgz","fileCount":40,"integrity":"sha512-vz4nvssP61+sjZNb4/0sW/bIMbP76mkxz5TgO1f4uiNGe90E9ID+cTnfj2t1vl0CpAkmIsRX8TXOgh+3xeS7XQ==","signatures":[{"sig":"MEUCIQCt6gWyfCoqYTt9dN/bs7RIcGcgVfTFF47IMDjwy8IISQIgAJbM3W2oDUAO3+xl+b/IVmVJEcJuDGRRUdSasji072E=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":507577,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgpS6sCRA9TVsSAnZWagAAFQ8QAISCuzTd9lDH7YkL7gnU\njT/A9PO8Nz8yj8E+bApyaVrenn5TTtoSnMZGPoOu1IPBZf86+7Pg6CnQvU+B\nE2E+rTFPS1uVGLQ+VtfBS6P8UtxsAoB7Xv54V/RIb7aCwYmW0jeR7WkUYE4u\njVKk3E/kFS2jiRRcrLq8FMf9RE3UAwXv9jEQKbwXAuXcl5u0uekAFVMNm5XM\nwZG/Sl4EVdZEEPb67T17WPFM4LtW7szC4OdITQ6fTHKWuqHcRYJRl9nBS/YM\nN6qgkiVXVaMMJSb0K57AxOxWzq7HobgcsjLrqFv9mwrPCtvkQQ9lHc/Io50r\nGBGsQqEN2m5fb1+6C+iM6Mh8t81oOlUph6SwxJZ/uZnvoscwrBP0JwuWQGQd\nnksC8aM/JBQtrWBF+OdFaenIZSp11catJh5VprO2XWKgsnhsEbIhAQLl4f/W\nrjYBGQrsHFoZsRlLJP8KU4d6wbcnch+kN1zPnaQ6ZoFPD3uvS6nbPPalBLna\nLhjlyVfA0RI2RaM5527bLGkvJ/+Rx7Nw4qzro1dIelIoj3pTblGKsXjHFeTc\nE1eJME5UsXmsYRUNpWHtzLWzNf+0+fP9ijgQZ/DFidzD0yBUe0ng9NwIFbXr\n9/RrANMZoJPtmcTDEYsPbQ+sq0qi/z3+8Q4SDP99lCRMnbG3rHG6xRyyIa9Z\nXU1I\r\n=xJyk\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button/styles\";\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.**\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n**Note: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.**\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button--icon-leading` | Optional. Styles a button with a leading icon.\n`mdc-button--icon-trailing` | Optional. Styles a button with a trailing icon.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n\n**Note: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommend always including it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color-or-map)` | If a color is passed, sets the default container fill color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`icon-color($color-or-map)` | If a color is passed, sets the default icon color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`ink-color($color-or-map)` | If a color is passed, sets the default ink color to the given color, and sets the icon color to the given color unless `icon-color` is also used. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color-or-map)` | If a color is passed, sets the default outline color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web 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/density":"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/button_12.0.0-canary.4bb5eea2b.0_1621438123822_0.5155752107526375","host":"s3://npm-registry-packages"}},"12.0.0-canary.ccce99cd6.0":{"name":"@material/button","version":"12.0.0-canary.ccce99cd6.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"37aa5a7679a2276c1c966549d5b086a78fd72a38","tarball":"https://registry.npmjs.org/@material/button/-/button-12.0.0-canary.ccce99cd6.0.tgz","fileCount":40,"integrity":"sha512-9UwnxT1FaZaOpSzJGvGQOHPKa4GqQAjxxSGkQGSvDVS8QavKNG6ilQSt3rcd08kI7dk0bp+gFg/JwIQ4UezgLw==","signatures":[{"sig":"MEUCIB8PQ08scyWM2QFh63jp3E7rteqg3VLR+GGUYLvr0pS2AiEApVMhbkpgv0qp7tfgtAVWAytuZ/0WvMoeI8DgBmFnr9o=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":507577,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgpbPsCRA9TVsSAnZWagAAMRgQAI05qGnq7a7soDL98KMX\n04xtkBYIr5B3lH9Jh4fe3WqSoPMZT8gl91R6SasCN3kSjP+ykN/iiAhbV/1o\nvJ21kanvnE/gtxSolwhekTcV9Sh1chP9wxNj9vj9OcTapFNNmRNbWff5kBae\nx/TQ88zZxhVKmJdWImXF3mddkkZVAiwbUSJCakLg3yGeT7uM/dHzCjySmkCX\nflqt1Sit5epZKXl/CLwn9t1rUOafmJFe6aVqyc/QAkRS6f8vX5htQhgnoMEY\nnyJV66Z0d5Cjq68m8a8wTWM5+KamEyYw6s2Q3VYCsiS7zkXD3aDcM1qfDz00\nDw+s9LaHkFbJuFrfieA0BcURuj6fF6tio14dulaBa6mgmaz4MTsJQSwqY3L8\nqcGoc4hGR5lHLwGVjfnsLWk+H6JmD7v/lOu516SsMTIAMBT/PMtapAN5LMdl\n7DP2Hxu1Ar+wI+nPGMCvXUzvwh+N+oihcIeC8LjlEYJ8ZAnojlubqYwV3WnR\nFHK/kh5icNAGzO4eweN6Yu0xL0cSBjdVyeTzZf3e9cddwOzhtjaBDQEWa460\nmEqULTapLghO2fPIeNiZLYLEqQFDIbZwETkIcXIcpOBj3OMh9M1TD1SukO3F\nmreB/HfNRnXMNf12S9MzgbIzbMSvolbjkUVZDayZHqh7YyP7Ga8HRQQJVJu3\nLVFS\r\n=7ags\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button/styles\";\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.**\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n**Note: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.**\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button--icon-leading` | Optional. Styles a button with a leading icon.\n`mdc-button--icon-trailing` | Optional. Styles a button with a trailing icon.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n\n**Note: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommend always including it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color-or-map)` | If a color is passed, sets the default container fill color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`icon-color($color-or-map)` | If a color is passed, sets the default icon color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`ink-color($color-or-map)` | If a color is passed, sets the default ink color to the given color, and sets the icon color to the given color unless `icon-color` is also used. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color-or-map)` | If a color is passed, sets the default outline color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web 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/density":"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/button_12.0.0-canary.ccce99cd6.0_1621472235607_0.8069263990044526","host":"s3://npm-registry-packages"}},"12.0.0-canary.14767a8db.0":{"name":"@material/button","version":"12.0.0-canary.14767a8db.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"7c321f1fd263ab828fd7e1a582cd9ca4cc661804","tarball":"https://registry.npmjs.org/@material/button/-/button-12.0.0-canary.14767a8db.0.tgz","fileCount":40,"integrity":"sha512-2gk+3iH5QRiWgk+L6uABBuZvB6w3sokam/1QaqwuVpoFleKBPjv6rBpFOsMIi9Dul+f2yVhmGF8aBZwpkYwZHw==","signatures":[{"sig":"MEYCIQDTwIYaTacVKt/RrukoUqOKsXXa8lcLAgp7BZvyXoYysQIhAMp2hsxT1vzNw/yct+BpAnVzjHCvr70CovkH6tYHtdmc","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":507606,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgpsvRCRA9TVsSAnZWagAAK1wP/Az6zuDVOGZWoxjqUVXh\n61Ojkl8xUPt3KvmPW0AykkAjqn9c1Yk5CDOaAU3pI8NjO+gT+ndcrGxfvBTt\n0KYW4QXjDBn034wC/HT4d68coCAStjYjxjolfd5JEVPVF8UqGh3tUiEBRGJQ\nSjG/s9PbiUYwDk3RebvZ/eQ4DvcK8c50vfkxmwUq77uk1fBXorVvyeBFNJiW\nuBp4yCudbXxhI8qEjzm6U4sUy730mOhX0lO2W54MKW/bgvqNXUexZfnuZh+1\nExB4wek5IfQlg8Pw2XDjCKUcCKq5kXZb2lRIIAdWqdQQmyWUpVgo+VhgQTOE\nNE7C8JPkQbUPts/Uak8U9Z9+WAB+ObFGpMbzBiCQTzpdsuHJdJysrZ7bFx1C\nmulRHe3QgJqf6BaTDXJNploBwWP4SZgm7CjPaDog3axXzLXTAj0CMFNdjY21\nMHIcSijcFdStdAbGQBhhd3siCN2FpCptqjmPFsdeNiPspGbmSYcN126jAWJS\nyw0xLkoBl5ZUF5qdrMVwaSBKtTGJSWGfqIV+c5i74UUcCN9qa8LPOoI2648m\na0e6kaxgzPDJGaKAgmY0pMp9wEWapDkVmwX9VAwOfF+zoM1NSFyV0jy7sUoD\n30XOOw0T60Nx8KZ+R3k8A728ngnWEvObgh968oMwLshV25UjwzN2ONrqMnly\n+6hn\r\n=BIpV\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button/styles\";\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.**\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n**Note: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.**\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button--icon-leading` | Optional. Styles a button with a leading icon.\n`mdc-button--icon-trailing` | Optional. Styles a button with a trailing icon.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n\n**Note: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommend always including it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color-or-map)` | If a color is passed, sets the default container fill color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`icon-color($color-or-map)` | If a color is passed, sets the default icon color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`ink-color($color-or-map)` | If a color is passed, sets the default ink color to the given color, and sets the icon color to the given color unless `icon-color` is also used. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color-or-map)` | If a color is passed, sets the default outline color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web 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/density":"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/button_12.0.0-canary.14767a8db.0_1621543888653_0.7732315130754452","host":"s3://npm-registry-packages"}},"12.0.0-canary.22c6dcff9.0":{"name":"@material/button","version":"12.0.0-canary.22c6dcff9.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"b12ec7dc0be280a814f89f9041bea011606083dc","tarball":"https://registry.npmjs.org/@material/button/-/button-12.0.0-canary.22c6dcff9.0.tgz","fileCount":40,"integrity":"sha512-L2TM7YhE5UPBVjF9LlGYT35ZsKS3hXVUgL6cu08fYfh3+wfyCYIz6ctBs1c1Kjr0/mZvF51C4Rc4uAWl9KRdlg==","signatures":[{"sig":"MEUCIQD06/cbLoSb7KUpa8onqIDEcnu1B36JH+Ce0sFkYVOPuwIgSKIXmYhILx3KQVqYkn+jd2Kj/SMkH26pXdysmRrtgrY=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":507606,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgq8PpCRA9TVsSAnZWagAAjd0QAILrhrzjCnch8WBJzQg3\nvklLbtN1EN8/z1Ahv+jwYymoruD85GK8r9ib2rPBME8pA55I8yfKQKeo1jAA\nemvkMZN5BfGnhYKbT9diIs33fCmgCWsTUZZiZ0qnKu9VdJnyLHXfiY5E/8j/\nmwSUEv6ejD8qJEcKHPcji7H1b4T612fKfna4uA+piNDWiiPKGXKDlriUZuJK\ncB909y/bZpNDgMZFORqaccJ+j4NfY4lqlL68fAAl+DsWhDgV9W6gXvyP354E\nrRBS9Nh6Oj0SKEfjUSDGkaX1O0/aAasd4VoKTbL+gdOFzb0DdoZ942gWV370\nSK58mZKMu65qEQz6pt44KKBR2nEJVN8Zox2jtIOqDWp8IvYxU3K+RfQK2UXo\ntIp2DvdzNdnf6lqHURJfniY+6Fzhce32T/SNsfMl4NvlIWbIpM/Mvz9zOK4D\npBqGbSnNkZv3kS7h1trc7BMRiNiGW/Emtn/zZR8Bd5bCpqtMJRsXmQr7sON/\n7vjPlv0sYUe6h+Xl3nKMRNuex3/M3LOhia5WN+QiZN1JPcTYWzdrd7Lm7xwD\nBkYUh90wE3bf9tGvqQ/+iuoKXcjJVzw1Y8Ki3ZOojtNwpD3uGntLexFkAE/Q\nyO9egIdg89IXXHbp+zCGsDw93YvKGdxvHZeSMtvF7t8lLxObpOZVfo92fr71\nTAg6\r\n=CCVt\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button/styles\";\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.**\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n**Note: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.**\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button--icon-leading` | Optional. Styles a button with a leading icon.\n`mdc-button--icon-trailing` | Optional. Styles a button with a trailing icon.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n\n**Note: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommend always including it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color-or-map)` | If a color is passed, sets the default container fill color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`icon-color($color-or-map)` | If a color is passed, sets the default icon color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`ink-color($color-or-map)` | If a color is passed, sets the default ink color to the given color, and sets the icon color to the given color unless `icon-color` is also used. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color-or-map)` | If a color is passed, sets the default outline color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web 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/density":"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/button_12.0.0-canary.22c6dcff9.0_1621869545154_0.7713803097640031","host":"s3://npm-registry-packages"}},"12.0.0-canary.fadab3372.0":{"name":"@material/button","version":"12.0.0-canary.fadab3372.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"7658d09b7fecd0b42a4ad4795b375f95966471d5","tarball":"https://registry.npmjs.org/@material/button/-/button-12.0.0-canary.fadab3372.0.tgz","fileCount":40,"integrity":"sha512-Ofdi3fv7Xt9r1Rt4nytL7Ht+pBypm9ZHPCttGArxKSMbMKoCY8nXOsHTzZ+sD3QsWs/yxIlZdNhZXdm5Q7BAyw==","signatures":[{"sig":"MEQCICtmoEGVfE/UFYfLPbYr8su7iJ9pWPc3RAF+3PFJYaREAiAsTfFfNztLgCWPwnRR4sf8VdGx7wHdcphRAe4o93g6sg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":507948,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgq875CRA9TVsSAnZWagAA/88P/AoIwxiRJOKu2zxUup6O\nNj61KmkHJ9LX59AXAAmmTCX0UK6e6sADgeZR3YVR4GokGlNcb9raxrBNA2pY\n17WbyzzTXqJ4RsLY6M6Tb5iCzjtWMLihKbZ2iCiwjdZUIR8fysi/XcTMNid1\nnGdzcMaIY9IDBzdcQRraU8Rmrm0S1zCjeMm9X41C0fhk3TFYJ2K0lo/Emybi\nlSE1oMo8d/frmYBXFwTNizk+a4+d9wbit+j5NQZuCE/PyOYc+MCpHGzFavFk\no5PfzLyhqJU67XUVBr3ASVLgh98LUn9NjnMBqlANP5UA4M5mdTQt2F/Tp5Qt\nNhUDfPICdRxxu+5OLje9psWFV3WkhIEODePM4UsNvChGOMm6WsdkvFjUAbs6\nKjhPadWYVsigqsDH9qQq0WshSwZQiZQ6d4xIN4nx/U//tbR6VMyWI6TmMSP8\nsAqis3LbMYsXtbQG5tzep/Ms1WFVxO8URZSgmqQF6X98FrxgZ8EZiqBEcAmf\nWqNeXGyVRfSlZ3nZZUWiHbPdIAhnJyoklyCTkrgTDRs76fc8bS50cZw7Sgey\nu/mF5o7fVmKt2hP6cJOhO8epLj1Dd5+iuhXzi+U3s65osmhgWgnq+04izMGJ\nSb4IbdTsmCp35ZjBCxIDrg/b05kG7ZifosZo/qlaUJutnaoqfLiQQy5LpxaT\ncKj5\r\n=qKma\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button/styles\";\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.**\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n**Note: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.**\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button--icon-leading` | Optional. Styles a button with a leading icon.\n`mdc-button--icon-trailing` | Optional. Styles a button with a trailing icon.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n\n**Note: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommend always including it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color-or-map)` | If a color is passed, sets the default container fill color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`icon-color($color-or-map)` | If a color is passed, sets the default icon color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`ink-color($color-or-map)` | If a color is passed, sets the default ink color to the given color, and sets the icon color to the given color unless `icon-color` is also used. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color-or-map)` | If a color is passed, sets the default outline color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web 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/density":"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/button_12.0.0-canary.fadab3372.0_1621872377244_0.05489591262586835","host":"s3://npm-registry-packages"}},"12.0.0-canary.caa73aeee.0":{"name":"@material/button","version":"12.0.0-canary.caa73aeee.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"345a9c39eb553b14bb2c962f33b13a0b7a62f524","tarball":"https://registry.npmjs.org/@material/button/-/button-12.0.0-canary.caa73aeee.0.tgz","fileCount":40,"integrity":"sha512-cHJmiRNxn5PPQWUZwpQte95PXBn95H0cgKOWc3KJp/t54oU5m71bvMrMwXdxqtY9inNNv9tNgKjRoG66wjCayQ==","signatures":[{"sig":"MEQCIAy/VtfQAKGEPJIB0RZGw7gBMJD/cCzqGooUmW4kRrYJAiAgPBkoi1Q2eSnXTVOErRrRnjwJdjC0SpM+i9vaMeRW+g==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":508518,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgrQZdCRA9TVsSAnZWagAA2B8QAId0jIOt+uqUwfmBVuj9\nJg/1fin2QdpHxR59PvZsalthdF/J2CNrhfcugKzKBt+9SjUWRRZbL5fQ+uSa\nJ+mapLRYAzByZGsv9S+GX71Q34K2rfSNo/VbzH3J3lFUJZ/BDOiTnko4ugS0\nb19iW1DeWqYivQoYMWkUDz//f7p/oOBkyVyb5zlvbWBC6RiFIHFLUdqspUP4\na4+eBsXNHZStu7XYgK3cAXHPwHnkOrfoDzHD9/VZ2QR69ve/puFXussCkYYb\nTnQGJnodVk+uzn+lWE6yry0D/ForIIU+1mYdSUctsKwz01bD5vyWlC1mDB7h\nK+5YnLzG/qySHPJP8pyjX3ks4DMspqGX4hogTs5BToUnPyd3o94sv8Q/3v2Q\n0RNGs0fmeZrX4vAGbbP660G/j1gf3ro2C9s6Mw5cXf46u6EZ7dqB9UzlrB8u\niL7vtvQS7PYWws3C2D+d/YzAemdLThM3xWoLH/v2az5uE1CWw1N6ovhPanIm\nL3Bq7xc8/CUtehizaQqM0NQaDAv/v9pUSU2/xf2YXc1cviyBsS0IW8/IxlTh\nU57j2Jt5H3FvHglTDPV9rkS62u0rnqUQke7qWCXh1C0KbDSCLsQyEMhV8As2\n2OhuZymeBhAEqWKip1StSirQUOOSm/Rd+lW4xBbJuTcXNwJBt2eqvh39FfAK\nFKdW\r\n=fgjO\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button/styles\";\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.**\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n**Note: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.**\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button--icon-leading` | Optional. Styles a button with a leading icon.\n`mdc-button--icon-trailing` | Optional. Styles a button with a trailing icon.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n\n**Note: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommend always including it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color-or-map)` | If a color is passed, sets the default container fill color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`icon-color($color-or-map)` | If a color is passed, sets the default icon color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`ink-color($color-or-map)` | If a color is passed, sets the default ink color to the given color, and sets the icon color to the given color unless `icon-color` is also used. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color-or-map)` | If a color is passed, sets the default outline color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web 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/density":"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/button_12.0.0-canary.caa73aeee.0_1621952093407_0.12130520940193179","host":"s3://npm-registry-packages"}},"12.0.0-canary.ec31ae1ed.0":{"name":"@material/button","version":"12.0.0-canary.ec31ae1ed.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"ec5de6193558edb9d7a30dcac8adf5caa80c7e5b","tarball":"https://registry.npmjs.org/@material/button/-/button-12.0.0-canary.ec31ae1ed.0.tgz","fileCount":40,"integrity":"sha512-QUIVze3tvp90S0PEYapFD/TjgnuMFs1iwFDmj4EIuwfjgph+oWxEVRDDxKto8XOfSubyHeJQEO8nNQMGnh/7Ow==","signatures":[{"sig":"MEUCIQCfD75gE9zBaTfnd7YgAwCNfLGWO0Zg8mOZpMz+DFrhDAIgCuzgfH3sQtfp9gp1RCpOCxilr/t/C2M98RrpM9kMCI4=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":508518,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgrV+oCRA9TVsSAnZWagAAujcP/Rq7Al3LPhmaD+N861SM\n57r4gBcMJXPCCKPfrgweBbO2VwO8oZccTcFGkV6L8dno9PcNjJgiX8RpzbTL\nIGvU6VCfD8Aix24GWvai79pRKSvRK1MUqnv7Xma/cWlA7zhouV07Clg8iwJa\nssU3mR4A1TtQ0bESMcQmsPHy3C5738JaP+f3oepR1wve+6RHoppZrJ+kvO9W\n1/VbblTgQ2aBUASTG8KMYxuwNu1EvkP60KnXoEpw5aMkYiknxxU0PGFmFRE1\nJ9+g+DYcwPGGYvJJPhO24RixsStERF9WpCVxsBarqH8XrGMNOY8rYj4y7zw8\n//e4ljH3ZoxV05wl4AYrfJMjLvB12px1SDewczEFkPyY19ShSvfnH5knUfmx\nhGnlY6HGr9OAy1nnyf9PkRpKQnhlHhNJdvn1Ffb5JZgu52LwT+m/2+MFgYjC\n7fbO2QT6Lpeb8oGbUnMYsq3geiGr1sZkZlWobpAY3733VWz4toHjbBmlEllP\nFdNZZJa3FMA1KxdhfOgEM/mwmJ6acSRasK+Ga88CR8P3dfA2x/jYoRJNxkZf\nkXyBBPa9YTXtCdv+30E4kzqXzLu2u5WHkKx5fUqyqZji0E3EuPMcScqw+zJP\nmanq++CtSz9UIhQ+CYjIYo2yelx/Y2cT1ltNfs8A788XHl91Y8CGwLKLVP7m\nqr6i\r\n=6R5W\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button/styles\";\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.**\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n**Note: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.**\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button--icon-leading` | Optional. Styles a button with a leading icon.\n`mdc-button--icon-trailing` | Optional. Styles a button with a trailing icon.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n\n**Note: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommend always including it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color-or-map)` | If a color is passed, sets the default container fill color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`icon-color($color-or-map)` | If a color is passed, sets the default icon color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`ink-color($color-or-map)` | If a color is passed, sets the default ink color to the given color, and sets the icon color to the given color unless `icon-color` is also used. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color-or-map)` | If a color is passed, sets the default outline color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web 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/density":"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/button_12.0.0-canary.ec31ae1ed.0_1621974951874_0.8413746560848958","host":"s3://npm-registry-packages"}},"12.0.0-canary.8530d3514.0":{"name":"@material/button","version":"12.0.0-canary.8530d3514.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"3359fb9b5a0303dd80ac508170487b9c36544bd0","tarball":"https://registry.npmjs.org/@material/button/-/button-12.0.0-canary.8530d3514.0.tgz","fileCount":40,"integrity":"sha512-2KIWJFG/YsBNX0Y5o+cSJ4/hnxvDQoEUmJNCrARixW5aWkUpf+lrzxtR4109RK9Y03DWFZnywROTum2qXrJa7w==","signatures":[{"sig":"MEYCIQDl4B0OP/FVHBQWXyTpJaeQqz+eZJhsDM1DMysY2c2uHgIhAJ/4oDYr3f0eg0MYaA1rzKRHjaQuSQZ985d60R+hgbWN","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":509763,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgr8M/CRA9TVsSAnZWagAAjQMP/1f0su4W/VrMbp2wwag5\nB1+ZXNZJo2S24EKUVTD7jfqMxUPpNbWqxSwODfmwhntxQbBjdAjHVFJ7amqq\nIZiHociQXxLXmUm5pBkd4mpXhKxwID4hk9nl1GQHlIXNYaWV0ccq2lLKi+s2\noiZ4N13VitcRvmiWLIy/IIjwkXBPXUYTI+RRCx/bE6lrfCEzzbA/JpXUXbg7\nihDMiaddDc1fwyMPOrAO/HQG8pvMST2nioxjfEYjvQkfBIMoSpJ92tZu+EIC\nLZrI9qmqzSG2WtMzidi4WbZwHTBZFmAnl3ZznssDFaoNbQ3EJbLZKB/WDbZP\nFGu9KGGcOvUz2oFUJRSyVB83bKwnzADwicKKCXaqGjOlzr0udbeIt35jsj37\nHtCyVzQmFpFkJYuPO1G2g0XIgS5WLmOVrcr4vxxSMxXSqNaQJClzEL3Emudi\nZOCz1Li+nWX73Vn9tMspRz7ptKkhh+HWpfgRfeAnFUWKNKpISwCCoyrHzRc5\npGh+vBlWBho7dblU0Rc0s3QtNMO03LZlkkjU3JitJoKVC1zIsWYk2BF6HJyi\ncx4St2MkmGC4Aaovd+DXmWSielBNIwmG/IaUbU/h/YmCXvEIJeaYS8TDMbZI\nPtRgg1n9JSn0FDgiJkKGqg4hI8D6JW/MGLe3Mt6X0czSEatP8loYz29UZqc3\n2RLG\r\n=+uMZ\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button/styles\";\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.**\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n**Note: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.**\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button--icon-leading` | Optional. Styles a button with a leading icon.\n`mdc-button--icon-trailing` | Optional. Styles a button with a trailing icon.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n\n**Note: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommend always including it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color-or-map)` | If a color is passed, sets the default container fill color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`icon-color($color-or-map)` | If a color is passed, sets the default icon color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`ink-color($color-or-map)` | If a color is passed, sets the default ink color to the given color, and sets the icon color to the given color unless `icon-color` is also used. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color-or-map)` | If a color is passed, sets the default outline color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web 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/density":"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/button_12.0.0-canary.8530d3514.0_1622131519013_0.7091170869445274","host":"s3://npm-registry-packages"}},"12.0.0-canary.00b5899dc.0":{"name":"@material/button","version":"12.0.0-canary.00b5899dc.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"c3a5ad5b7b95272a21e71da322a55da635ced263","tarball":"https://registry.npmjs.org/@material/button/-/button-12.0.0-canary.00b5899dc.0.tgz","fileCount":40,"integrity":"sha512-kvQkp25E2sRPVACKVI9IoJlLGUnQ7D6JJB3sh2jdPRPkgVzTLobTSdKaPl2EdoV7uY3a3y1uSXKsDdx891aU1w==","signatures":[{"sig":"MEUCIHdAC2JvKnf9d4ZcHeRLgIESqVH0Ep560iv6YEU8MWPvAiEAg8QkqPDWCcio/nwo3bMHI4urCrI6Q4ZIqZ/QXu+kLvA=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":509763,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgtriqCRA9TVsSAnZWagAAjMIP/0Cfnkjj9TT7MJVXsf1u\n3DKNiRkxA7J+TOzUFrzERl2K1qEm5IAsSxXxEHwFdpo8rPOpXthhKokCaGjH\nAZOqyHYFT92aUgXP+6lB/tQCv/FsxbY/SooTGDwH/nh9Z/2sJviwa4cURk3z\ne6I6ZsqL/nGGqZRi4BTFpiGIxk2M6QvlTAntS0K0rugLApL7uz0G6c9NL/OX\nFWoyKGkXs0fK4Qj+ASL9kTehDWb11rS+F447hr1bAN/x/hWsflrxUjX6iQPV\ne0CqNRF1TF6B/6fN74Rp0O5unud2Riwwdjfh4kGfy4tBNfIIbzawxD2MHRiV\nG96fZi1Q1V5Fp0Wani++CkwMLE/Ths5p789gHqpxdSYNK0jnwzkPp98msW0q\nM8rtBiOexHizqgCS9/xHwABwH1f84saSQe54Txa9xS22YcOdeeEVrf9EC6rk\nTTx/uj2Ji6NiCCJ0+PD9mEp3HhwYIS2fbTTQMnqxctF5VsGOf6TeHrB5nQ8+\nkWAzogYK3cgzVgkArmBHghQdjQ4Tu96ixOt6kutyrU+/lSh7sQexcyMfnJRf\naXk7FXswARsYvM/i0gW3jdNVM5ohzn+LwAKZxXDVxdQ44pEP3sRFKfcR/XMY\nW5KmaouoCXfaulUMjnihqh/U60jUCx3QbCXKWkVpTiLZCFFCBmrO+JnvyvzV\nGRWb\r\n=wJVO\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button/styles\";\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.**\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n**Note: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.**\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button--icon-leading` | Optional. Styles a button with a leading icon.\n`mdc-button--icon-trailing` | Optional. Styles a button with a trailing icon.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n\n**Note: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommend always including it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color-or-map)` | If a color is passed, sets the default container fill color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`icon-color($color-or-map)` | If a color is passed, sets the default icon color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`ink-color($color-or-map)` | If a color is passed, sets the default ink color to the given color, and sets the icon color to the given color unless `icon-color` is also used. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color-or-map)` | If a color is passed, sets the default outline color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web 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/density":"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/button_12.0.0-canary.00b5899dc.0_1622587561695_0.9856911976726264","host":"s3://npm-registry-packages"}},"12.0.0-canary.f1525ea3e.0":{"name":"@material/button","version":"12.0.0-canary.f1525ea3e.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"6fc6e765874fceebe4420ad7fa37710121469c62","tarball":"https://registry.npmjs.org/@material/button/-/button-12.0.0-canary.f1525ea3e.0.tgz","fileCount":40,"integrity":"sha512-lSp5VL55J5ed3f5o6Lfy05UWucYweIekrZy9IzVNsNa62nhM9hZykzkavQ//Fyo8oEUcyjbprIhjKgjOev1CQA==","signatures":[{"sig":"MEUCIQD+CoEOxMqGWod1gAoSOhvmPtDa3kzKELpuilWU0jpmAwIgRXLLlXFVDWkOzWRjS3dfO8bkpgYqGoxYsjPJfDPt1TU=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":509763,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJguN8rCRA9TVsSAnZWagAAMB8P/RJOmMdxFr0sgjulhVlz\n/zLrv0PpjL8ngk2oS/a8ddcZGh6e6sEoj1Q7r8MJN1Jw/oNsw16ydZb7KyM2\nNFyM9Mah71kNm27yJwEnCYizItDGjYRvA+0Rubo07f3vMeWPERqlMBbVcgvI\nrUvejqKv4ChS4ZaMRs6S9UoOk5HAheYofAM7/B8Er9fxEsch2p3X6q+B8YXy\nGhPpFXPNNlQSBIy6zprrE9uaU/zj/KFnaJXDxD3f2XytovkRu2YXd8vGWv25\neDUr1/7YZRW/DFBxJURZOBFs+GKfWW7uFKSjwlY3koI5n/R1EFPI8N3kwopJ\n5RCe796BO6i/1g9A8vk49gLkFNrf5IpmNcExp3xby+s9LHbIwZwPNPBIyy5T\nTd2BEiuw4LktfRheGbgyhptFtTgJih+8SoSgXjdr4TI5pf1DXvGmD8Wl/we8\nKk1g19jaAHDDTxz2G+78pYZaVCfOFkS/aU8cGjOpjgwIyRGXQ1QzK3cwZMjG\n0we0gVNSUhA4+e242zTUc8sQ7t+GOODULOZF59R+WRuJcqdyFRAZegw4WzMR\n0ApPnnN/0BCQZtOLSucDfIqQS9dqJBOajgfx5evt9j8RjJWU7Vnx/LVSwO/W\n7atB3bG65ZnKa3Vfgd2ahPBe+ngKoiy51sEJhjvdP4Rr2WOx2LZQxZoYSu9f\nKoce\r\n=Hb4U\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button/styles\";\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.**\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n**Note: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.**\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button--icon-leading` | Optional. Styles a button with a leading icon.\n`mdc-button--icon-trailing` | Optional. Styles a button with a trailing icon.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n\n**Note: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommend always including it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color-or-map)` | If a color is passed, sets the default container fill color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`icon-color($color-or-map)` | If a color is passed, sets the default icon color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`ink-color($color-or-map)` | If a color is passed, sets the default ink color to the given color, and sets the icon color to the given color unless `icon-color` is also used. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color-or-map)` | If a color is passed, sets the default outline color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web 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/density":"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/button_12.0.0-canary.f1525ea3e.0_1622728491039_0.4715214047659355","host":"s3://npm-registry-packages"}},"12.0.0-canary.464a00286.0":{"name":"@material/button","version":"12.0.0-canary.464a00286.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"f9d4f5a9c5339a784c3cb36f19aa65936597c568","tarball":"https://registry.npmjs.org/@material/button/-/button-12.0.0-canary.464a00286.0.tgz","fileCount":40,"integrity":"sha512-JJvBUkMDeg5bPnVRsC9EBabXKIW0sdEc2+y8Iuk2zLvk87xU145clED0DEs2LRKXSWxZBlLzcQ8Z5kJBGtAr/Q==","signatures":[{"sig":"MEQCIG77w+EV+22M2dskJhapjaOWZFGvkFNHl0ze7fmK1hVWAiBqPfgfDw/MBMANrL9zdmpB1AQymPMt7FPi3rL1jvFAeg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":509899,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJguOtNCRA9TVsSAnZWagAA9gMP/1WR9LVXz1PJPQWArPvN\np3DEBuUH6TNXBmRIzqnQSNcphE1CzPTLR6dm8pI/uN3qsKflmtc6vZs+jHlU\n/Y5KzX6FcJjx/ZMbxKVKSUFFZVHX0vgvF1fBxBX1dZCgc3Aovz4TsgMYtYDt\nU6DHvA08gWqnvier00Nm9j0uE8szTPZzSjmbbZ3GHbWQQyIEIQ6djG5l9eh6\nRXkPqIZqP2gs27ifp9VoPYIHavfyORY4Bf6fZxC+C93i1auXvSfUrf0Eymv7\nWvAQC4m2CshSmGIXVleNTAByC5yIvAhi/sBjjS4hlwIE7ZBqv2olGtz6VO6w\nTXU4QfARlFfIZOXEyxpkykCgyqsjEo529KImoNZoRQj8o7BsOfWP53DvMRHO\n9XztOEOQ85KOyqIa5yBheEColoB0vq8I1NFKIAUaS8WN0faFlRKsddgwiHqT\nJ894O6SkrGI3A92dQJcaBiLMN5lktrReCtqZLFHkSkQiXhvJMJ4/Y93AguPK\ntaOWzxBPIXUKKp2/jEQ+3Kf0l+bnnglfcny4kroXLUdLLai+aag45W43YIWR\njbDiGcqEowphIEMestOsXqeeotcL9DtVwwbzImyka7+XRi0LshIBP9AphdEa\nHKDTsD6wZjBBxGCnlfMBUA8lMAMZ+p0gSVQAqMSpWUt7QFqT2eA3jdiHo6ov\nRuPE\r\n=ocTo\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button/styles\";\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.**\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n**Note: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.**\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button--icon-leading` | Optional. Styles a button with a leading icon.\n`mdc-button--icon-trailing` | Optional. Styles a button with a trailing icon.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n\n**Note: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommend always including it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color-or-map)` | If a color is passed, sets the default container fill color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`icon-color($color-or-map)` | If a color is passed, sets the default icon color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`ink-color($color-or-map)` | If a color is passed, sets the default ink color to the given color, and sets the icon color to the given color unless `icon-color` is also used. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color-or-map)` | If a color is passed, sets the default outline color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web 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/density":"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/button_12.0.0-canary.464a00286.0_1622731597192_0.1991323446451876","host":"s3://npm-registry-packages"}},"12.0.0-canary.474de7878.0":{"name":"@material/button","version":"12.0.0-canary.474de7878.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"1fcd7e25630364aa638f02df8e53b4f84f89c4b2","tarball":"https://registry.npmjs.org/@material/button/-/button-12.0.0-canary.474de7878.0.tgz","fileCount":40,"integrity":"sha512-wbsU1MhUvER/hExVXv/7On4eSIAP3nliZuQkn9D9KV0aY7SZcqvdlnCBjEGEEe5zG7F+jZA5c7jS+fiuEZLHkw==","signatures":[{"sig":"MEUCIFmvMdRseCmym//YZyjNErphrI8YrA+1/WCX2jHGUKwaAiEAwlS4gaNHz8/GGzBaiWXJydyHe4Fd5BM1lS6RQZc6JWc=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":509899,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJguPHgCRA9TVsSAnZWagAA8ZoP/0ciaeeZLKsrg4QNPkLI\nV1kGyzjk62w6SwYNBfB/KC53VDiv4uJLHkL2ttGx5SDRKDhbbPs3nsNTd9iI\n0hUtgx4g4g1eIA5RWALJAe0/GHlRpaa1JYJn7ySiIffjO9QqhhbXmKPyvIrc\nH9UnBNVgepjnm7OgfrW+9LLWFtt+WjaQ0daJP7+D9I22GbTVx7VtGXya7sbb\nCVUCzXiyC+bDz/V/K820sksSB8ZlbEeS0oC6xQk86nXdARYaqhLTCgRaTJXL\n7zeFv1mlIG/j1CyfKsxxpJI15V+ew/cp702cUonh10ZM+utSiThiXBedLSjN\nztQz3vGHQxo2GM5sXEbcCnBPlCh/RGXGSv3ko2pCtjCJW3qy/tcwvQTDZnC5\nmj0SapVP5jmVJt+W0lUJupnCsfwfVhxdqYE5JVrtw6HPyqD5p35ehBsSmkts\n1sCt8kZ85r/r5ys9MxUnVZ08k1/YXWgnwvqOty9lYpoY4J/XhQ4O42r/cLBv\n+a1+wyxvO1rSTl6mkjb4ymDZPnn9fD/5yjdpgcstoWjbh29drSrJZYe+CMSF\nwCg+3z0IV9gKdMo3JJA0//NBrdlIzZwCj3/l4cnUOOXUMv32dRmSkIrYwGX9\nR9Hda1to6Z8cWfC1VQ8qDwRoWuG9pNylJZaPcaMBpsqvtAPmxKawgHMfqIw4\nRwAw\r\n=zOG/\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button/styles\";\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.**\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n**Note: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.**\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button--icon-leading` | Optional. Styles a button with a leading icon.\n`mdc-button--icon-trailing` | Optional. Styles a button with a trailing icon.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n\n**Note: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommend always including it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color-or-map)` | If a color is passed, sets the default container fill color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`icon-color($color-or-map)` | If a color is passed, sets the default icon color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`ink-color($color-or-map)` | If a color is passed, sets the default ink color to the given color, and sets the icon color to the given color unless `icon-color` is also used. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color-or-map)` | If a color is passed, sets the default outline color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web 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/density":"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/button_12.0.0-canary.474de7878.0_1622733279945_0.7885575204172919","host":"s3://npm-registry-packages"}},"12.0.0-canary.b87ebf74d.0":{"name":"@material/button","version":"12.0.0-canary.b87ebf74d.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"948b2b7884671c3c9732bda188e23076c1504b09","tarball":"https://registry.npmjs.org/@material/button/-/button-12.0.0-canary.b87ebf74d.0.tgz","fileCount":40,"integrity":"sha512-xAcwZfis8uwHMnOPYTsfTnFnOON2McXtxdHYX88/LtMdqnCXUZuClXwdc1blbrGuarx9XULysBb3aOg3JXLtIg==","signatures":[{"sig":"MEUCIG4qMBKotTp4NtzT+4mIqnjMpc8GZbbCniiIy6PnP81gAiEAwNi3aINl+Ld5qFcY2hh9xg5pb3lb2FVQmNm857Mz2JA=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":509899,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJguRWDCRA9TVsSAnZWagAAr8wP/3is1dpiM9kooNbID3Cc\n75LrmS5E02L91K0be+IC7Nq2ISHRw552TbR/Q9v2eC+dm6j3JKFunetnELz1\n99GvzLI3gg867YyId5+W7Kg792gNbNwqraW9OYwU8vO0aHDXCAFsxX/XMm8R\nylb6cMXhmE2rXOSooa/ipstl3VMxm/W7zw1q9TMcBxopYYyZAdvaaebo2euu\ncGPmgRiTKCKoxrf+7Wb1306rZMne/PViFsTzvt2Q0fvnl7m4BRDS4PJZtXSe\nIHI9dpsd9rdEvCQU5oyFxVLSfVoRVuwtv/hPSQxsj0wVGaStUIK30rTHEGHG\n3hF7RQRedzABMMOyiQpNG5B+nEnr5NifCUnnqcl8gMMauiawGMGp0G4U39wf\nJG1Y81dw6vT2ypGnrrJ9Bby88balMLKp2kpV5471c8aNmSiITRpqNa6q5riC\nYegBln5Pc4y4XSW6eQ39B0Pqf0D02ykTFkmwjMXKuod5Ua16cru8oCP97ttK\n67o8b0y08qFP8Kofp4wDRxQne2krED1K35sl5ZhPC76uSYnBVbgQwrXXFvUE\nvNy62QZ3Jx6flJQ0u580Ko2zV6SKUbjBpfTEGibO8672uzjtgSpdeCfqznPJ\nUlsmlrRRp4a9dc3NNmgpJST18MmmSMPlsCFcFY/xrsUN3UK+WDMDEsebTcEF\nBDuu\r\n=FZxQ\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button/styles\";\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.**\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n**Note: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.**\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button--icon-leading` | Optional. Styles a button with a leading icon.\n`mdc-button--icon-trailing` | Optional. Styles a button with a trailing icon.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n\n**Note: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommend always including it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color-or-map)` | If a color is passed, sets the default container fill color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`icon-color($color-or-map)` | If a color is passed, sets the default icon color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`ink-color($color-or-map)` | If a color is passed, sets the default ink color to the given color, and sets the icon color to the given color unless `icon-color` is also used. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color-or-map)` | If a color is passed, sets the default outline color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web 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/density":"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/button_12.0.0-canary.b87ebf74d.0_1622742403038_0.722422709930213","host":"s3://npm-registry-packages"}},"12.0.0-canary.2daa49b35.0":{"name":"@material/button","version":"12.0.0-canary.2daa49b35.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"23475112c93de506d94980c011de00cb079cfc7e","tarball":"https://registry.npmjs.org/@material/button/-/button-12.0.0-canary.2daa49b35.0.tgz","fileCount":40,"integrity":"sha512-4Z/NZ+IqIab/Dl3fIWtlpiHEM8g+oamvlPh2lRyv8hNZ5rTBt9VuKFh7ZZ+zKLNv6yCr94nqNQIZv1oIMXQjHg==","signatures":[{"sig":"MEQCIGvPxNmWu+6dIz2UF8ZHPIKcfZ8VcYpeonjUtybyVjUHAiBH64mlJloh1MVgLAeJigTChAOakQhs/YCUuYKRa5FUsA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":510187,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgulFqCRA9TVsSAnZWagAA8jcP/1cPk06H7Xb8IxgWapt/\n4ksHEDJ57QPAZmU8kJC0tNqQwd+fpI7h4WNjIyT8gZDQ4ebRpzqk046NhIj9\nOlCbT2r9qfmiWUvzHa1qTE5iEHEb8c7ysWUikJO52lgCtHxpcIrWAqU8LTEu\n6Tf1wI5mVtLHyhSkIanAE+RwC3YPUEkFtmtSHZxf9tfxXofeVnJ4CNA8tNDP\nAn8ub0ifQ/E8dg5br9S9MvOiJoJhLbGLfeaj9sukQH4En5OqQZf8J+BDvtMn\nPLbwmVj8Q8QWQ0kuZpavKXXUhDeHeSSuFiGztPEKrPskVt6aBHCzBUxfN26j\nKcf/EXLqBYmGJKYgnQ1tEALLEmTR0fWemSIm0zaaOGiQbwQlGCHA8pns9DyP\nWATXDBkQwTx9bkNAXXTH2Sj5TNfayTVoJXoegRe9v28eAti/2h/cRfmTRqI7\nWePUGDyvr89epU2W+nXrP6hmplP0njpt4bfcy9F4WHn9oNnXSjXGfRpE40/W\nlSAE3DxAUWXJLHV0nPIBPYNI2ceRQxW2kqSaxlj3pxcG5A/fwibxCQXD4qea\nw80opqD+Vh4hq++24o3Pnp5piq5+zd0xTyQ/Fmqq+0DIVcj5RaZjGmQzcEvm\n0K5/P1FMDFolkZUdmz364/IltHSkwUp5vrt6hwyQX6yNHBppLDxEb/+Xl4k4\n9Q6E\r\n=3cen\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button/styles\";\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.**\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n**Note: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.**\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button--icon-leading` | Optional. Styles a button with a leading icon.\n`mdc-button--icon-trailing` | Optional. Styles a button with a trailing icon.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n\n**Note: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommend always including it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color-or-map)` | If a color is passed, sets the default container fill color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`icon-color($color-or-map)` | If a color is passed, sets the default icon color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`ink-color($color-or-map)` | If a color is passed, sets the default ink color to the given color, and sets the icon color to the given color unless `icon-color` is also used. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color-or-map)` | If a color is passed, sets the default outline color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web 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/density":"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/button_12.0.0-canary.2daa49b35.0_1622823274471_0.3753149821501871","host":"s3://npm-registry-packages"}},"12.0.0-canary.08db3d737.0":{"name":"@material/button","version":"12.0.0-canary.08db3d737.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"9eb63fa04b5af01a4caf8f9b912fea45b91fa76f","tarball":"https://registry.npmjs.org/@material/button/-/button-12.0.0-canary.08db3d737.0.tgz","fileCount":40,"integrity":"sha512-LAG3Dh3kYoWD3dxoVHBycid5ADKiVgr4ccsgDQmWMRiH1ksueXqE9y5XFU1H0sTuBph04Dw463bMG8Iy7LeWFw==","signatures":[{"sig":"MEYCIQD3z1hxiU8VHUNiVmPxGV4gXR6Fp3huDTFddB52OlhwegIhAPmRVtipBsnrBzYGPDGLdsPOOvN1iR98sV7bO7GJEMd2","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":510187,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJguoIOCRA9TVsSAnZWagAAKj4QAJMOPSzMGt4a/N1H/ntp\nIq5EGjsLwBf6j6kBuWHzs8JQDv6tIO97PVewrFbv3IXYuyFeM5iddoy8zkL0\nYEqtuZZO+JxrhK3TepCEHD7o/czftzduHEkERMQi/G4ZXAX33nI/tXPI6MOD\nA/ZW2NUo31rDFi3qgEYYi5Q+kNS4MfeLhKOmgqpwHO14i23pK12nF9ka4RoF\nO5xLmuGxVpr8nWqAr4GMuDmFaWCwRKAjXt15imP57YKjyp+Skh9bQLsu3QvW\nrpqlI/TNexCEcCyImSWu6eMsyJKTGcu1nfmxs3h0ev1kIZjAsFiJovXIcVGz\n3HGzkGGkrU01I1xQ909HLHILT+n1LNpzpdY09ZzNQUJ56gHzhZ3lb7FAdhHK\nEtkDO0fQWsDR9BOeX+kEyKMh7wzRpNStQwoQSNjZHkHNyTxFe7XqQpzwj1FG\nnK10HtX715lhe5BoS5AKQSBFMiJ5iyJE3aZFY/gGy3rc+fdiBUHOkRCDXEQB\ndvurnHk0qPJf/+F1Jy9Y1TiNBcun/TSpNWymPYAsef1tNHx1ywOwtn33b0hB\nqYGNEO1hhTZ2JXGu+nZ4LwP9AF2BXKN3YVApjcjSsbvr6X/fqZGWbL3cXrFG\nRZSYyqTGpF3goUPCLoUmOFx3qGXX2PrO9MwHafLnD7nyl4EU30bPLoOqrTF6\newZ+\r\n=9ODW\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button/styles\";\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.**\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n**Note: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.**\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button--icon-leading` | Optional. Styles a button with a leading icon.\n`mdc-button--icon-trailing` | Optional. Styles a button with a trailing icon.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n\n**Note: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommend always including it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color-or-map)` | If a color is passed, sets the default container fill color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`icon-color($color-or-map)` | If a color is passed, sets the default icon color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`ink-color($color-or-map)` | If a color is passed, sets the default ink color to the given color, and sets the icon color to the given color unless `icon-color` is also used. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color-or-map)` | If a color is passed, sets the default outline color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web 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/density":"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/button_12.0.0-canary.08db3d737.0_1622835726738_0.0730542438927817","host":"s3://npm-registry-packages"}},"12.0.0-canary.5823407a7.0":{"name":"@material/button","version":"12.0.0-canary.5823407a7.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"e3106248b7e4fd9619f6aeccbc94fd791d1ea228","tarball":"https://registry.npmjs.org/@material/button/-/button-12.0.0-canary.5823407a7.0.tgz","fileCount":40,"integrity":"sha512-losMNsUDwKzSoQSyan7u5LVF6RVGru2puzm89TuqzVO9nuniQ97lF0cN9n26V+SDiJDBaoUSzmjWM97gwuR75A==","signatures":[{"sig":"MEUCIQDhqkEUyMeYNISDinHIrDyh6jA5rzY7068oh/mQPBBMGgIgdwjU7XeFPAP/QFAF0nSRb/J5wV5+mECw6wW8MQv7O8A=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":510187,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgvr5wCRA9TVsSAnZWagAAvKoP/jlIjJ4QioFzFKPmB1x3\nXaX0zxaWAWZxaaVJOmcQbHO/xqIrSWt/4L7q8XAjIQH1mAH6C3/S++zBNJP8\nXIV5gHdThO+QL2Ny0mVKBGEKyST8dycdEEXdPaHeAnKdiq6EUfwAKw4SUkfo\nqxCj5cAATteH5njQqFA23XIOHu9iZNWXvnkS56b0/h7wpwb41PXSjF4evd67\noPjy/SlLLc87j5R1cOZ1XPnI9uwi5uUz/2HFePT9Ps3Mjju7IGZ2g7USnMuC\nzAF23VRQlYZDiHjtDji+U9hAsIWEGFjKtcEo3r4XlTo+Bor0IFraPjRqstNw\nZzvqMfjRERNYVszoalmg3DZueiLKThfu9Jn5HdJok4H2cXq9NCxoOLM9jxNV\nxrcPhSMgVdTft394CjvpaSkj4hU1ZCU1wN+65czfwsbb1XKSboYLLmsczpQ0\nBVd/us2Y4SScZ+1poAsfd3l2FV0RJ8fD0mgeKC+X0xA8R9M+RxELGReapMIg\n/6GHLlIkYQVzrLe4eGrAKHp7Gwmcw6ybGvzkX+UBBzAxlVyJ7wVXbH/D9ag2\nn28KlpWrd2+NRMjCQkHI7mbtqLkr7j9LL+Yz2RGG8Q4uWGa5iJ/VqWZwkSt6\n/q4IKQ3U9CBST+K2/4Rn7K62O7lJuVcuUGAiDz+Cif+6tkhKBlmlBJbT7UCy\nqqZ6\r\n=HIYG\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button/styles\";\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.**\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n**Note: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.**\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button--icon-leading` | Optional. Styles a button with a leading icon.\n`mdc-button--icon-trailing` | Optional. Styles a button with a trailing icon.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n\n**Note: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommend always including it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color-or-map)` | If a color is passed, sets the default container fill color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`icon-color($color-or-map)` | If a color is passed, sets the default icon color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`ink-color($color-or-map)` | If a color is passed, sets the default ink color to the given color, and sets the icon color to the given color unless `icon-color` is also used. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color-or-map)` | If a color is passed, sets the default outline color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web 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/density":"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/button_12.0.0-canary.5823407a7.0_1623113328278_0.02154971664839911","host":"s3://npm-registry-packages"}},"12.0.0-canary.23b0c5e22.0":{"name":"@material/button","version":"12.0.0-canary.23b0c5e22.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"dbc4d62c6e5cbfad7dfef146ca5f5319a28f6c51","tarball":"https://registry.npmjs.org/@material/button/-/button-12.0.0-canary.23b0c5e22.0.tgz","fileCount":40,"integrity":"sha512-nTPqsGxKTA/uehS/NROW2co9180UUr8Lo7KbEV4mbmQBK4GCTEHrQmirPDRUEkFTO1vdlvYFZxkUNI1zRUcPjg==","signatures":[{"sig":"MEYCIQDYcS3FIgjFSn8dg8lTXQKVDipaQ4BiOGb2wRB++L+BkgIhAJbpurRR5OIbko71jY6ulqmI0b6Mw8fsT00k0/jziWgK","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":510187,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgv5lPCRA9TVsSAnZWagAAUicP/iKX2u8pbZTVk/nUkNlP\nvukWgzaCxsNbsZ4hushyuNiPo06TBxMQQgrylriqP3vMDAjCot+PKvEfsFNY\nipJZMTGN8FcAMBCWiwxXwhni87UcPLRjV951vtNs+GSeKb8yrfxO5fJWlLx6\nF5abtE1tOrdxp5b/KyJhX716rmfcWY11CAikLxtB/+kgUQ22hf9Tg63a1hqa\nIxS3WBVUZxlN7qQzWVpgNeWlIMzK+RHNgOnZvUlCuEfgXQcM81rDhT+mlvSy\n5X8DvAepNwg7fbxmVTn1RyeJB6rmmE9TGoSTepS3J/XsHK5hV8FwhPPvqApR\nBX5I0XiqYGUtL7I+bYd+ugwHRxQqLKKExyy/C7iqeGQmb/1RM7pHhLDPNwmt\nwFODEJeWQIV49i9aUYguISt8p1tD21y/pdpB0ssbEzDomX0d2aZMyOj2tYoF\nYPKYQxy1Rtz4MVDJnfSHZjNw4GRevNim8laDgsZrZCFVqnl9H6yhfkgd5uNy\n/JWhlIvLwelRlq3BkaI98I8T1CWaF7bMNMRJIsuIm6J6J2ecZrEerVOoriqk\njYPhkxIzPUiM9RbmcTRnCZ02KA/O6jGi/ifUYEcs1w9VZk8qavrNt/D4tIAL\nSAoQQMAWBwS6lNrfDg7DPzYXloZyIKa31wslM+H6uBYVziX5QMm7qZcUaXsY\nKXkS\r\n=Zixq\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button/styles\";\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.**\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n**Note: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.**\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button--icon-leading` | Optional. Styles a button with a leading icon.\n`mdc-button--icon-trailing` | Optional. Styles a button with a trailing icon.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n\n**Note: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommend always including it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color-or-map)` | If a color is passed, sets the default container fill color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`icon-color($color-or-map)` | If a color is passed, sets the default icon color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`ink-color($color-or-map)` | If a color is passed, sets the default ink color to the given color, and sets the icon color to the given color unless `icon-color` is also used. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color-or-map)` | If a color is passed, sets the default outline color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web 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/density":"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/button_12.0.0-canary.23b0c5e22.0_1623169358935_0.8117200811957455","host":"s3://npm-registry-packages"}},"12.0.0-canary.2952c6a76.0":{"name":"@material/button","version":"12.0.0-canary.2952c6a76.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"6314a792dd6666706c05649ffd5c2290855589d7","tarball":"https://registry.npmjs.org/@material/button/-/button-12.0.0-canary.2952c6a76.0.tgz","fileCount":40,"integrity":"sha512-x9kqPfh6ITuuFLBs44V6nwTxOeVe9sNon4u2+uzZ4YO/8kVWCFwQNeHCdinqlv9apLlx1LVpopxgzU6vGOmjyQ==","signatures":[{"sig":"MEUCIGonhp20bj/PMdDq7SD0A4+FMtSXeEkEoqcbBaaxGxAHAiEA64uyHYTsxggt7O9BwAnD9SM1H761wCAggv8rlJkgJjo=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":510187,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgv6u9CRA9TVsSAnZWagAAQ1oP/icvM8iWzzQe6Zrl1cWF\nbhNFcu3tOLXNXvf1wzqaTP+FdrA3emqvmJUBbf1QHqi8ATAGTeLmbeeJq7uG\npHdDH8+oHzCRhdqXf4zmtcqF1ynR0TeOjYUmXpEwtDpqgJQbst6GZ0Km//Lz\n8nNAiVfhvBi4zojpprSlSXn6hwmcy/X5HhdNIL9V7W+VrW9VIwNWOIhTv7uH\nhyZEaBjDOZYQQKEbiSc+VIhbAM8/A8MB7RKKRDuwCU86EjshRvCq8qIDaWyN\nwWJyMoedu8/M0870eu9O/2/hJBLJeCgIeQg2gwkFV/u7K7t6xQg+EcJO1yQB\n+YSN9gQ2j+XaUaP9y8AOhGL0zuVFAzQD08EzkkG9Qa6gVDDkEdN5iuBEeu4C\nfWb6S9ok+iwf8hLdbPBDQ4Ch0iY+jUblxVrdnn0HVr8rSUXDNcKj0cKaCfK0\n2C7fDJAQaMa9I8A8yuMkePBhuzfKhvHJIuwv74R8Uhc01HaUPQZYkbPY0RiY\nrwfJXFagcrvLqGrUCHn9BMGIxA0B/guYPF2GBUsXrnBbNvtK2MAVxlfz0R8Z\npkgsavR/5tHxDnu3LvLlT2YiDZM4VYVpsvnKOkD8b3u0ggDK1qxsyeySYlxR\nzfizoRthumqPEdsoKGIt+S8PLm6uywdKbBHOhFG5k6EHqvqQD64crY2AYVsc\nSFcQ\r\n=ja47\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button/styles\";\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.**\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n**Note: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.**\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button--icon-leading` | Optional. Styles a button with a leading icon.\n`mdc-button--icon-trailing` | Optional. Styles a button with a trailing icon.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n\n**Note: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommend always including it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color-or-map)` | If a color is passed, sets the default container fill color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`icon-color($color-or-map)` | If a color is passed, sets the default icon color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`ink-color($color-or-map)` | If a color is passed, sets the default ink color to the given color, and sets the icon color to the given color unless `icon-color` is also used. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color-or-map)` | If a color is passed, sets the default outline color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web 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/density":"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/button_12.0.0-canary.2952c6a76.0_1623174077085_0.7475251445652111","host":"s3://npm-registry-packages"}},"12.0.0-canary.f12425f88.0":{"name":"@material/button","version":"12.0.0-canary.f12425f88.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"a567e68deff3b681c50c41f81b26d6abf86b3a27","tarball":"https://registry.npmjs.org/@material/button/-/button-12.0.0-canary.f12425f88.0.tgz","fileCount":40,"integrity":"sha512-2PoJUsEUpigkonXS8a9tF523ZKgPcr8zgmx8Z/6p36rgfdLddrJCrJLYhTrCOzc8FQPZwVLiAVbSG54TasP+yA==","signatures":[{"sig":"MEYCIQCUIhtNlth0f/qXVNOOqlI7fBgboqVAH3JaUaKg6JSXfAIhANkkPZwN/2Dy1NBOAQDtRkpFBNL+3MbepmbwmRIsAHTd","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":510191,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgwWWfCRA9TVsSAnZWagAA0B8QAJaDqTW7tdhbZGyXr5nN\nnDg8ssmxtONjh4hR5PKV1OCLghsM1cDEOWCjr9eY/FNopbJjsOoiR0q6c2XQ\ngRxckoosZVM1ZbDqUQ+QhynpffPcBiakb0AINiGPTJtAtCFmLDyIrcPBAHGl\ny0dbwtPiwaCoC5E94GnLO1kK5jDaRrZniDU9ccuMFARvNHIcI3HU+yYdpyFG\njdQL38zTO/xtzlIHgvpcCo1f7pbQ5tkHXjICYwMuHjudUWGiZ6+MDLcBLWIq\nFKA98VPo6cBylpBCR3dP2hY075ryfw6EupiXNI1FMn7+ib6g2lpcfHS651wv\nrElzfJsNqc4QbcWCb7P5byiqqpnwd7xnNNMUC4IKyud1WEXtssidbXILb/xz\n3tqVkwSjmh9iAiIPJ41EyIP//xNbbVgOl9fgOzky2nM/1YG8I0FoEHciULln\nx4Yw7ItfmC9+nQRN7FzTXylDegogdHAunPnkKPqM6Hsy/D62WGTJSFaz7x96\ne6/3lx1Vilk3c4UHffKwbQu0YsXCrJg9cYsLzPvhdBJFp2TmGdz0sfBWx9y4\nd7ZzqnaegoSQt9ja21QZvpTsI5YNhhEBoZ9Bb2e42pYLsqQodAeyXxg7l0V6\nTq5aaZ7F0++8Nyl8HKC+lNgpe6d6glSniJCHaB/7j5mZRxoyOcNDcI5WixmQ\nKFyx\r\n=sctQ\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button/styles\";\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.**\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n**Note: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.**\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button--icon-leading` | Optional. Styles a button with a leading icon.\n`mdc-button--icon-trailing` | Optional. Styles a button with a trailing icon.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n\n**Note: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommend always including it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color-or-map)` | If a color is passed, sets the default container fill color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`icon-color($color-or-map)` | If a color is passed, sets the default icon color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`ink-color($color-or-map)` | If a color is passed, sets the default ink color to the given color, and sets the icon color to the given color unless `icon-color` is also used. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color-or-map)` | If a color is passed, sets the default outline color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web 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/density":"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/button_12.0.0-canary.f12425f88.0_1623287198955_0.8439192650461986","host":"s3://npm-registry-packages"}},"12.0.0-canary.e543628c3.0":{"name":"@material/button","version":"12.0.0-canary.e543628c3.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"bdec64a3821337641b0d092d3c115b3b732d230b","tarball":"https://registry.npmjs.org/@material/button/-/button-12.0.0-canary.e543628c3.0.tgz","fileCount":40,"integrity":"sha512-NqrieMihoj6WriznUpztVzfSj12IWe/+axKDQ2EDPYl5F+VPIkjg4bzCsHaiF23ywZy1u5o07/hOGL1TFH52Ng==","signatures":[{"sig":"MEUCICaM5xdyah++9FmGRTnIj9SsqS0n7egxK8PeZOCLuvGLAiEA958YFiE4lglNIZKHbqfSpsn3h1rUj9FbGHoRCUSH3UU=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":510191,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgwWXdCRA9TVsSAnZWagAAnrMQAI39Jr4fLE4BdBKPd8QE\nIY+i5RDGM8oWoipkhAQiAjAU47VEXr/rzRjDxUU6TcOiXGsufo22Y0BpVC77\nA4Iz65AkmsI3aQiNAxkpEWAdYa/ow4+MQmZDG11tY+q51C6pUvoAA/rMfiMH\nwvNLOTFRXbZnvr6pPGufGKo9WHcNoC2bB9ocCpuMvAyWc/890DncflQAKKka\nXXMKwln7VHwcxAzzAkn+Zbbq1cmswvi59WUTcslo615URZWvgEny66HToeXF\n14Adp+iV+UU00LQ+bXIr+x8BqGUeY/TI/vg/EMOhHqlIILQjQk7hen6j3TkT\nlASbXTLOYiqsNHeVlgeFg+0TbMyGc3+2hiZTVopk0Cu+2lOp282R2n6LFwEz\njQasnTpYjRYntDP8wx1nolVaMc35zmR0H8cT6vlW46tgIxkmJwbdxEmIknqh\n2w/d9rfl0aCf/BMmezYbbHuN25y7lxGNuK2oa3YXceE2/9qty5eXrD5I9BFa\nrm0M+8EpRb4RTP1LxI4AREaWJzx3xzZwceXIx1fNyN4avALqGH3NLY9jEVoc\n6bQPBdY2I16XZkflfgeohX0RVCrrnvNA2Alb+Hiz3vjPddKP9AFirG2GJdC+\nu/bCBK3o8DtoDGtD9DC89z/GMtfVd7rUIpRY91avHemDKUPnQl7cN7Hsi/fY\ns0zS\r\n=IQaJ\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button/styles\";\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.**\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n**Note: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.**\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button--icon-leading` | Optional. Styles a button with a leading icon.\n`mdc-button--icon-trailing` | Optional. Styles a button with a trailing icon.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n\n**Note: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommend always including it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color-or-map)` | If a color is passed, sets the default container fill color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`icon-color($color-or-map)` | If a color is passed, sets the default icon color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`ink-color($color-or-map)` | If a color is passed, sets the default ink color to the given color, and sets the icon color to the given color unless `icon-color` is also used. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color-or-map)` | If a color is passed, sets the default outline color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web 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/density":"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/button_12.0.0-canary.e543628c3.0_1623287261028_0.211288303756195","host":"s3://npm-registry-packages"}},"12.0.0-canary.e0c346286.0":{"name":"@material/button","version":"12.0.0-canary.e0c346286.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"1db65f5bc7e1160831faab669ca4874b48561597","tarball":"https://registry.npmjs.org/@material/button/-/button-12.0.0-canary.e0c346286.0.tgz","fileCount":40,"integrity":"sha512-/N+FU4Jc8Da9b91vKyVOu0A3WgDhZJIS2MHHtFbQYDIfZ+JkvwSHo8oatbd5r5UiSnY73Vv/Awkjp5+B/3gPCA==","signatures":[{"sig":"MEYCIQDQxk0HJvmggW7TL/nQgIkJ4/iEtIA+f1EoSzossgAPRAIhAK09Jwp+gSWU+0s8o9+/MyIjM47r+II4VTkPI2Gp3UkJ","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":510191,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgwj+ACRA9TVsSAnZWagAASWsP/Awh1hgeG4bAqaWKqzhk\ni34xc48DNhNKU1YUR6qVXMSB3Pyf8Ny3FFfZyIAO1/qhWxXoD+UH70iGoPXG\nUw67LVfNfDDIAET8u/3MJBkHDjjswXGHARDVROVcLK/S25BbSiVb0M0KK9FV\nezT48Lb+gVsG4QCD4UEKMGXIHpTorrU0Tx9/qw88GFUOjOvEsarldRM6y8WX\niny+wecz4FdXxutfc7waaOQ363Sc2QewyfXsdqVkI9pg1M1Yh1uLpILkaxoa\nwVCL6DTszRxyVoLuzpN6nRPvC1ChPmUuT291dH6UhUfNwuqp62Yuj0vVmiLV\nVdt4S2gl05Zd7qaZIGc1Eb++paQ9zHxoCUtbsJhWECyyN7Xiuw4gq/zuJ0ND\naQ0M8Sys5IWMLmBPnmwzoqaBxa8eyGuPkMbiGuKTKyFwntD8leL6d+v+TEGm\nx2MK49xb4rA5YyebmWtWT+mDIsHK95HUuyoE5qm36vr/InexjsBQM2jmJOR5\nh5gfweag+jG1aPgdkkqpUqt9Ty3rzLASZx/b8Flh14zScSW8h98hi1FHVDlU\nPNetaCpNSqXh2WAKOCiW3ReJEQGjf15PQn5Te2INRhtPHJAvKGfOXZQa+fqI\n28l/ECTbhESvyZGyDZwEqgQIBXK3SalslS9QW06olaneSBFeDyvdYJl/3hrf\nDKO3\r\n=IXCZ\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button/styles\";\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.**\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n**Note: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.**\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button--icon-leading` | Optional. Styles a button with a leading icon.\n`mdc-button--icon-trailing` | Optional. Styles a button with a trailing icon.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n\n**Note: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommend always including it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color-or-map)` | If a color is passed, sets the default container fill color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`icon-color($color-or-map)` | If a color is passed, sets the default icon color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`ink-color($color-or-map)` | If a color is passed, sets the default ink color to the given color, and sets the icon color to the given color unless `icon-color` is also used. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color-or-map)` | If a color is passed, sets the default outline color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web 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/density":"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/button_12.0.0-canary.e0c346286.0_1623342976192_0.3149987521784323","host":"s3://npm-registry-packages"}},"12.0.0-canary.f43af5633.0":{"name":"@material/button","version":"12.0.0-canary.f43af5633.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"7d71fae48bf4e22aeb8ad03bbe570ce53f94c2b3","tarball":"https://registry.npmjs.org/@material/button/-/button-12.0.0-canary.f43af5633.0.tgz","fileCount":40,"integrity":"sha512-Uer9QopfAAOrEU30YG7Z05Ep/Wcr4kdvdsapv7Km9lEjHmXSDP0GQf5qazRP8b6Y00teTO5ukylFLcJvaCv59g==","signatures":[{"sig":"MEUCIDpeU7lf3AjGCeHEQTcQQNtirKTjrsKzQ6zXbECUmESIAiEA6k8ZjZY5xTl+FkxDsO8u9yh/OFji7BmtV6tMBhthNlc=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":510191,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgwne7CRA9TVsSAnZWagAAHw4P/idJS3DkNgJPNjTc6jrm\nV9fYkbXqEmcKTO9rGp1+/RhzVlD0w0d7HGfYM17KfB1cPD7yHKeaKD4Pq8vL\navAANHF+qcvKZH/QcSORD7BgH64DlofHa3Q5YqTOfSCoaehQL1deGjHFiJVO\nBPVBXXsy3039b7RdiBmnKs5ykcmz27iHvHL1YvprWfEBsAGC31KfDRwHxPtf\n+bhXd2wlOBUtw+OnmJdxbhpMPZLZO+jQ2UzduTvTa/3vL2sTx3GOA/sCI4gq\nnpE+Ie71GnI5Ggt4yTanHVxjOg1tKeMb4xYr68fz8TIs7pNdn6rsHPJDZezG\ntfxEwbHifRZgHwexy5enq9n6KPOC8hv6ngTOXdZeDAka3AX4s3h34QCRzII1\nKRcLXG6/xhwZXEz6Dlf+l74OnSV/Ua8L8l33JqwbWsNXj6gZM8N8K5f/6ddw\nhAQ+h/iVCck+cSVyoCRRt60W56fyFHQPo4BZ9tNXREpMMV02z2Vz5dpEG1wP\nV/dr9+NrTUM37Zshp+D6k2THN0yCTnll8PDFe1ggzeJb+tuy+0TkQ2YTe6LA\nJApas5g0o9gJr+m1il5S1pD5TY5hEfu3Il97LfKWrJKxyfM41wV15cVGYKze\nKMuHV/64DZnimwqesmzCgrVuvNgecXnWFtQEKLzyul/w9uPXZKAD2KQpJL6W\ngTuP\r\n=K8MP\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button/styles\";\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.**\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n**Note: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.**\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button--icon-leading` | Optional. Styles a button with a leading icon.\n`mdc-button--icon-trailing` | Optional. Styles a button with a trailing icon.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n\n**Note: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommend always including it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color-or-map)` | If a color is passed, sets the default container fill color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`icon-color($color-or-map)` | If a color is passed, sets the default icon color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`ink-color($color-or-map)` | If a color is passed, sets the default ink color to the given color, and sets the icon color to the given color unless `icon-color` is also used. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color-or-map)` | If a color is passed, sets the default outline color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web 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/density":"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/button_12.0.0-canary.f43af5633.0_1623357371368_0.24624472031979971","host":"s3://npm-registry-packages"}},"12.0.0-canary.8415ae585.0":{"name":"@material/button","version":"12.0.0-canary.8415ae585.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"f63cd538c917d1b4416454edc1d6579ac076de7f","tarball":"https://registry.npmjs.org/@material/button/-/button-12.0.0-canary.8415ae585.0.tgz","fileCount":40,"integrity":"sha512-vxlgrjVgDFT3yFwNgLtV10fnvpuT+JvUZBJa7i6R4f/PEzMI56zTt/PXwW3b0pdqi+Vj92Dnu4JL7xyOlnkfKw==","signatures":[{"sig":"MEQCIFGfASX9rmskuBLGbzrTTSTczVNnmu/nt87QdQmAe/ExAiAmYMwydFbjy2Z5sOYhyfs+aWXgFR8CWPWhTzOT2DQzpw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":510191,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgw4n5CRA9TVsSAnZWagAAfxMP/Ayl6E9dNMRTuiLmZKWm\nJMxJ4uDbBRtWxxZkkpObAgjWpAjMLOIGQEK0b1UhOCZB6biuiYNdHeKywkbU\nz4oxKe6ygcGT3QN6HGIOn5oz3nNEWNyep13Bfrc5gj9dRSKkEyLNhisg/brw\nwPJzbFih5PTAH+a4vdZsMTVtuMrxjK3g52h+9iOF3KkqjjycNGHmj8DllHIh\nQvlE+oLgXlGlQqEoLHlBLXQAY7wjV2QNTFn488jhXZ0wn+WZYgFiY6u2LSyf\ndODLkslM8pc7pl849h+ZZsYwEAEo1rLTBw95GXqdiUfspvb+ZlXWlOA+HQKc\nBzAcyXkwEf9WqVit/HSfKjKCr0XyD3epQbZlaSwGsLq5wBfIhlD0glqcJNzp\nFcs8DuIz+iXH7ekZQ70Yl/OLsZn16chVEBmhteMRDeityV52Y/t8H31PjH8K\nzE4e1iOxta4L8m/G7mNcA+U46nN4LXjUJveBHECl1lhSRMthWS77XJUJDHti\nu2VGYQtHwIUS/64wHGCZmd4BSzBlOIZ6sG9b79ugwz5oefveJkbLrixzeK/8\nU2M8rTj1AKxjGnjM0vB1XKWoXiLlg9M8g/MEUdrVUucp/Jpj+nOU9cX8CyLu\nyU85y4aWmPtHx32Kxb99N9yGHdxKHv4adWnXBtjFTVZcXkgxdAyP+q57j8jo\nbTeB\r\n=Jus4\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button/styles\";\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.**\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n**Note: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.**\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button--icon-leading` | Optional. Styles a button with a leading icon.\n`mdc-button--icon-trailing` | Optional. Styles a button with a trailing icon.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n\n**Note: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommend always including it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color-or-map)` | If a color is passed, sets the default container fill color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`icon-color($color-or-map)` | If a color is passed, sets the default icon color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`ink-color($color-or-map)` | If a color is passed, sets the default ink color to the given color, and sets the icon color to the given color unless `icon-color` is also used. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color-or-map)` | If a color is passed, sets the default outline color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web 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/density":"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/button_12.0.0-canary.8415ae585.0_1623427577092_0.4215291539469992","host":"s3://npm-registry-packages"}},"12.0.0-canary.598fcccc8.0":{"name":"@material/button","version":"12.0.0-canary.598fcccc8.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"4826caf851c52364ba89bbccbd5dc137359fc1ea","tarball":"https://registry.npmjs.org/@material/button/-/button-12.0.0-canary.598fcccc8.0.tgz","fileCount":40,"integrity":"sha512-tO4NtEEIvHiOa9Kw3dGTaAOHftOIS5BrXd737K0zySsMsAAsEebk8k+cZvdZIc05lOz8vgQlZkUk5CJbsAmOTQ==","signatures":[{"sig":"MEQCIByMpoDSdRxDEPYQG/lvuEMdQjxxVnvYwym3gV/3kG1ZAiBAzWN2JM/RxB4BiRq7YuGXrwb1MAOBb757ieexfIsVkw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":510191,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgw9nKCRA9TVsSAnZWagAAWsoP/i3lRYKu6XlpHEl1Kas0\nEt5m86W8v+5fA/awiGBwLYWky62XLDeURbApdEYzOxPsC736PqW8Bsi/fMI2\n4oTqQwuWZYN3HYiNui8/AuVrNSyCZKW32ld3rye+9KJqXpGdQFFw4OlVz/Cx\nzWi0R2y8qkZL1p4vuX/Kjtzj6jobV0HGTBrOKLBp8Ns9Gf1i8s7QFsaoPqTF\nzEsehiybW4tTWHHloLnNixZSo0RkR/E0nVCHQ8Iinhblsut7m0KILnac9eYa\nlN7rtxh7avaSqAJGUrKdJwHg8rYR0ktO+jcb7g7bWNfRT/LEjF6hK8FOI5Ge\nKyxyid7nSGQgEMyp5OsTyFGE6IOk3xKYjfe48fJ5GsJOGL0HHeJz6BgavIlj\nfp32d5afiClOjmMvuxv0xn/xBHtlqHvCu6SfHmRY3+jlKsMMeXed0mbD0r9W\nMwCN8K5n7l39hdcDUjHIqo1XVgcA4lFAVQSYLH28Wxva/FiWqhadWlmLTUWs\nfWuLJKph3xYB1hF3l1czDsuGoMl8iUgs2WJo551uXZ6fSXNO16sYS+cyB+E6\nk/tW0qqzwNaLgQU6qzARnQpMia/+oTTFvZyym9U+JD+yjC/mPg2ATv/XLCnQ\nq+fthVeTCxDohuut/TwjaQ+afB7bg0HnMHByLuK0l63G9xLDZDbCTTbhfhom\nn1Gc\r\n=+2LC\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button/styles\";\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.**\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n**Note: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.**\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button--icon-leading` | Optional. Styles a button with a leading icon.\n`mdc-button--icon-trailing` | Optional. Styles a button with a trailing icon.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n\n**Note: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommend always including it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color-or-map)` | If a color is passed, sets the default container fill color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`icon-color($color-or-map)` | If a color is passed, sets the default icon color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`ink-color($color-or-map)` | If a color is passed, sets the default ink color to the given color, and sets the icon color to the given color unless `icon-color` is also used. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color-or-map)` | If a color is passed, sets the default outline color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web 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/density":"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/button_12.0.0-canary.598fcccc8.0_1623448010326_0.5011115267898834","host":"s3://npm-registry-packages"}},"12.0.0-canary.5d0605188.0":{"name":"@material/button","version":"12.0.0-canary.5d0605188.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"ce2e30b427a1829e94a64d713898fd55d3183a9c","tarball":"https://registry.npmjs.org/@material/button/-/button-12.0.0-canary.5d0605188.0.tgz","fileCount":40,"integrity":"sha512-65/HjO3gEVFtvvUOgTZoXrrTyqf+Q18fOvHpog9hYWCclgM8axvK3IAmz3JzsBVOCY3bTBlIlqPexencyUJ9cQ==","signatures":[{"sig":"MEQCIA9URdugDffDTOTXQ5ClIu9vyXnKGHV9UNfWQj74v/iqAiBEPLOrUtTCe9xgrakZ1PIatQt7jk3Al2EXWoealZCkHQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":510191,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgx5RXCRA9TVsSAnZWagAAHn8P/igqJtwh8iynb66KDLz1\nkdi9SudVuZIAoEpcIUYUyaojtd7T/E9Gmro0TSuPk/KgQS28RcIEarkq6t55\nafQpE/n4ziootu6AHDwgbOsAlvKqa8t2U2R9KcDHvIwn42d1QOnocOuNtqiF\nUa+VVdU9a3o9cUO6o7CDhz8VW8nyJEU3dOF4sJp6pZYbpUO0qssi5LxOPCXS\n7gQ801EX7sKbxfJmv7gZj3NMYhMi3AJN2KoYIL39ThRKL9mzAcTpandHwXg7\nmfW5ydymsx32pLYvKOP6vZ+ibtbpWMd1VN39OIIFFYsnR74r8iYkLpryIOj9\nkgli4vjcEMCl1LrT+CJr5j4nsAn0uLGJjHuOuJewYTmR4R/IL2e5YjjIwmai\nNq7veFmQlBwGmoJ/dOckVYc3e/q/6RiLCJmtUf7hSTSYLWUpVdETYwcICDiM\n3m8KgP8H8VO9A8piyIKEirKKuLiAt0Okj04lFJFG5Vh7OqZj3Y4705NdKDcy\nRnoUtUX1YCApA7bS3xE7DM4vqk4OnYZJ0tihZWc1kEdap2ewn7aMfbCulOdS\n9IuInoivtAUQCZUFLfM6ZfDqUDkgMyNAzHs+XwkA76cDWuxNeJgse+Tk037Y\nyiEiQdRtdE2iGOj7krZ1p+vKZvfdJV4q7hatxRInCa8h9Q/ZSkK6ltWvbZF8\nmNgU\r\n=DsSu\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button/styles\";\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.**\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n**Note: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.**\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button--icon-leading` | Optional. Styles a button with a leading icon.\n`mdc-button--icon-trailing` | Optional. Styles a button with a trailing icon.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n\n**Note: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommend always including it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color-or-map)` | If a color is passed, sets the default container fill color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`icon-color($color-or-map)` | If a color is passed, sets the default icon color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`ink-color($color-or-map)` | If a color is passed, sets the default ink color to the given color, and sets the icon color to the given color unless `icon-color` is also used. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color-or-map)` | If a color is passed, sets the default outline color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web 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/density":"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/button_12.0.0-canary.5d0605188.0_1623692374838_0.8579403904436067","host":"s3://npm-registry-packages"}},"12.0.0-canary.f147a2271.0":{"name":"@material/button","version":"12.0.0-canary.f147a2271.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"62263aac60e8e33cc3d601244adeba4bd5efa963","tarball":"https://registry.npmjs.org/@material/button/-/button-12.0.0-canary.f147a2271.0.tgz","fileCount":40,"integrity":"sha512-2PBC0AVIvHQky3BR0Hgcj9YvuERwKxzueblW9izSJkMAKZqmqoFq25cEGMTgNXx8usYIT1+aFpqVfO73Ud7krw==","signatures":[{"sig":"MEUCIDbMB+AJBusAfwr0HqIQzBP1lYUfayMCOEbjbYWxjcdNAiEA+QepSR3G2Wf8+3jQgSnsSZMrzOLe6fyHOQKXTvG7RWU=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":510191,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgx6uHCRA9TVsSAnZWagAA6JkQAITLt0/VfR3gBReh2prG\nPZUHpjiZfyMQLixUCXlqgnQrLlFMMK1rwhy7OI6da1NaGF0UK1rWsvq/PxaL\njvc5ic5N1OFdZC/wq3wbYK4RyJFYoR5ne4WaZC1/bs5dWrvGwq03ja+I2mqN\nbX8PviOXyx4tDkX6qD3UspAZJEWU4uADSZ1yD0lYvvDpSc4fWyJtK/8ttr8W\nD4t1mTvnCmNdXC6Znzcf1eYnsiLRy6U+yqx0z+N4PhRMCfe82+bzzBv10kZf\noQEy8f+ucLQpAilnnyG+Yhk1vUfwoXX2upaiFJEuFQ39kse8Mtvzou2DgKMQ\nYdemGWsIeWQErOrg5ow3nyf9owGS8545gWy/5oQgFWJwIHr5b+TdaSJN7erq\ncGrZK7BNNweo5bFw2Ya+DAf2N9SLUniuewvSkCm5wr+xkkIZZyueeSazxnTM\nqiQnnVol0GRVz33r1Wnq/Mplt4HXjgcERCZbT7KWNvCA+4ow60DsE7EVid1d\nYHXYmKD79jy62nSiUYdIZQZwPuYyOAyIW2/KyLNODqR8zVdx41cXiihFeosP\nMHYMRZRH4q2wL2m3t+ScTNdzUMWgxkrt44zohY/EvY4cUNMisIm1XNHN8b+Y\nun0vUehSBtmet+nY4KF8HZi4mdCfZc2eGvujm3Ow+qHpY5HXNYyi4XgCSEh7\noQkL\r\n=FMa5\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button/styles\";\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.**\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n**Note: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.**\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button--icon-leading` | Optional. Styles a button with a leading icon.\n`mdc-button--icon-trailing` | Optional. Styles a button with a trailing icon.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n\n**Note: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommend always including it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color-or-map)` | If a color is passed, sets the default container fill color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`icon-color($color-or-map)` | If a color is passed, sets the default icon color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`ink-color($color-or-map)` | If a color is passed, sets the default ink color to the given color, and sets the icon color to the given color unless `icon-color` is also used. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color-or-map)` | If a color is passed, sets the default outline color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web 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/density":"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/button_12.0.0-canary.f147a2271.0_1623698311565_0.0424261956530656","host":"s3://npm-registry-packages"}},"12.0.0-canary.33579e00b.0":{"name":"@material/button","version":"12.0.0-canary.33579e00b.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"426d9bec3269b1e7f360dc2e5731ce85fe40c704","tarball":"https://registry.npmjs.org/@material/button/-/button-12.0.0-canary.33579e00b.0.tgz","fileCount":40,"integrity":"sha512-4WBYfNXZGpE24R8QjIr3L1FF3Vhk+smtObsT4yyyzqjRt1+x5PIE/LbQw1u6kJNYHaD5DbK2/OrzIll8aF1onQ==","signatures":[{"sig":"MEYCIQCfrVJFjxbghwiqRLhxYkNs0GjQy3EWbs7MBNg8w+UF2gIhAK3SnTEr/NQ3hbYz9bHb4n9RUKwawwJISdimvMV4OiQs","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":510191,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgx/K/CRA9TVsSAnZWagAA1y4QAJIMAAimvgPfGeQ3IUkP\nTP7Z8ALNcsPtvOAH7B/qSu876gnH6iwLaGaPlrdNrnUcIaQRix8bTq1tjPo7\nQ4h/Tr8suX/XQAsvomOnfUYTT9OfcMA/WuqBZY1l//Dq56wCo+B+hkYA4fz2\ndPz+QCIK7cSPOevwR+iuVgvUjs0SbbFx+RAJS7Ze42Dy5rEwQyvqU7EvUTe9\nNoIWJP/aTax9oR4oJThg+V9keaRVCAb/PEHyhFji5dQmhNhjBCoWOyrdePkQ\necvuCP2PtZ6zJotZ6bD4r27zoTz+/DfpmtSleSgfoqp2j3jHtLc9RPGTnlqK\nM+TlF7nqToQVDX/emQLKV8sf2TuLoDPOkEzyu+Nfi8n5tHUEtCJ0v6jeB2OU\nWKOooHFQTKIM7HSUBd8WlqxiAEBa1rHhrYYRxfA4A4sahLYKYlHyscTcQXpj\nA4Yff+ewVwfCzylF2EPAj2lFktIxw0z4BO72E5qP1zh2u+h2cbQkGzXpC/Wh\n+iDdhSJMqiRzkbTcZ2lxw1xwK/DHwO2TI0Zov2AUZ6FIjSbp2ynKFTRu8QSo\n6wWB6trPq1yx+zN4x6Vo1s2K6NBzHN/BW0ZxIyqC25kXRANriGwrKihHXgSs\neeITgJ2dAU1QhTi978vIvGvSwYLZZxBZpDNME/dxHB5sZy6DRgWDqUNz9GHh\nYN0f\r\n=dowo\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button/styles\";\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.**\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n**Note: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.**\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button--icon-leading` | Optional. Styles a button with a leading icon.\n`mdc-button--icon-trailing` | Optional. Styles a button with a trailing icon.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n\n**Note: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommend always including it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color-or-map)` | If a color is passed, sets the default container fill color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`icon-color($color-or-map)` | If a color is passed, sets the default icon color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`ink-color($color-or-map)` | If a color is passed, sets the default ink color to the given color, and sets the icon color to the given color unless `icon-color` is also used. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color-or-map)` | If a color is passed, sets the default outline color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web 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/density":"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/button_12.0.0-canary.33579e00b.0_1623716543744_0.38710689560279343","host":"s3://npm-registry-packages"}},"12.0.0-canary.a6909c0e6.0":{"name":"@material/button","version":"12.0.0-canary.a6909c0e6.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"47a9e474947dc0333dc5a53d9ddd9f9d5402dc2b","tarball":"https://registry.npmjs.org/@material/button/-/button-12.0.0-canary.a6909c0e6.0.tgz","fileCount":40,"integrity":"sha512-k56MJ7I1lPxBKmL5J2clrY6UhFtNUq3h4k6u/XiIyBH/CVsPOv/Q/DTUyj7L+h/vDq0eOtS+7US/xz7Lp2FDIQ==","signatures":[{"sig":"MEYCIQDnWyvVg1lYCcAnizfJzHguYHsxIoMjrh1k3Q8ib9HlpQIhAOmPeEUG40cFs8WVTX9my5AvqVSgQjyOq9gaERSL2oHY","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":510191,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgyPHICRA9TVsSAnZWagAAPksP/Rc7WjX/dz3QVJ6beqQw\nQeIP10QUAu0l5WzqPMQiWdykzwooLRw3gwQO0P6GJ9RXfJmhmMdQqem3B2wd\n3QUUvIUwrwC3gWEgjLhB1YXJiC794OE5KM2nuC0sfIUBBIlkW+ScapKQcu+A\nOp1/U9krswrTH2/cBYqKVAF/yJOzWQW+xqGzJ6SM2kK1nr4pB47p2kwL3sNj\nx84WnuL6bYEekGZQ55My9TY9vxpo1vNkf4sieRgo1kjE84A+gQzarPMIbZQp\nSHsYDxKSR3cd1rjdglmlHt9FtYj7KfCa/b32T6h+aCQRleHz9YWdtdHBBqbw\nN9ArmGYARyB+Cn6MYlksAmktV1C6q2ohiCwqpIueNi6guRjRkXAbwQIeKVot\n5ObpigdCS+jyZTrmbEwhvlUZaZlhMzXprq+Zq6880PO46TI+Na9xQDnMnluT\nXzu6fEXtVHWjAlPO6lBEqHbeTt+oDioijcWJQe3S7SAr5FtFyjOC5dXnpX4C\n/eN7eUq0FYJEvBc1jyXfesD6XjZHuvF0BTb5+7IDVXgSPQJgrUVt0xvasnY5\nppCFjd77zxKH+MtGd5hcN0pVOmin8YfXbC4j7LlxUcJ3Ov4rIjifKVjlcIDx\n0ccOyzz/2gJNzjzdkMVviqT+rZQ3wnRzjtIwpiek7qu7uzruM2d5bcrL4yKp\nYvwP\r\n=8v1R\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button/styles\";\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.**\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n**Note: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.**\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button--icon-leading` | Optional. Styles a button with a leading icon.\n`mdc-button--icon-trailing` | Optional. Styles a button with a trailing icon.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n\n**Note: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommend always including it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color-or-map)` | If a color is passed, sets the default container fill color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`icon-color($color-or-map)` | If a color is passed, sets the default icon color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`ink-color($color-or-map)` | If a color is passed, sets the default ink color to the given color, and sets the icon color to the given color unless `icon-color` is also used. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color-or-map)` | If a color is passed, sets the default outline color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web 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/density":"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/button_12.0.0-canary.a6909c0e6.0_1623781832621_0.13952266464802565","host":"s3://npm-registry-packages"}},"12.0.0-canary.c18b5925b.0":{"name":"@material/button","version":"12.0.0-canary.c18b5925b.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"4471913d4a441c50b1313e23b8df6801afa8a4ca","tarball":"https://registry.npmjs.org/@material/button/-/button-12.0.0-canary.c18b5925b.0.tgz","fileCount":40,"integrity":"sha512-pr2ilz1rG50dW4X0U9YP3Hts6pLRD1eD+59LjH/x4mlyKpawTiUGoBwI2M5Gwcuunv31pUFoNBS0jYlqTIqHhw==","signatures":[{"sig":"MEYCIQCvQmLDwroLnKE6fBMFfKrP1OAtTcFGF1meigQkiHloawIhANhK6qMfmhGwZDeCcko+iEigxGTnkcOWAQbpQzbc6mT3","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":515605,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgyRW/CRA9TVsSAnZWagAA19MP+QCkPgwVHCfvq8qKsLta\n2H9sVnN+8mRWjzyrtY+qNn5l/5NXYODAExXYP9JxDTUyay+3dSKum3PEAx9A\n4evFNYcKctFqTsJx3xDlxNXWvPLayVbhTW6h58Qj+Ekf4suKRFvpeegCZY7Z\nv3n5IzqtNQNLltAFinpKsjgiYQVYIpTp30QjNjIK6YAnOXFxLTPCEzHfYt70\n3Sj73/nbW2F1aqwnbGZyOA3iXpGf7ic2FTwJ3zDklwa3RLKpwxou8n1mcQpW\nyHmwPSyniI4J/3qa1thGkAHvhXVYGxS7gFTkY7eGdch7K4uvdZPkpYoEHYaF\njl7Gf3SaB+eY3XXgf9hVr0Gd+LSZBoI6rxJBthM8lycFlL2p3Urqz7p2uMtV\nR3JnrgtbuTXeFhAPTIXdY0hVuPATn0TIcT24lTjSTanm+UQVvi7d0HMvVd7T\nNjpGbsxmrpLOrEA9RaDnT4f1BDuYjyH++XMM/UF7uidMNYoQr0YjaqiF42FH\nONnRSOcyXhezsGjObSqm73wFcgEJpJPs44rN99zt3Nl0u+0dcv7PY1syq4E+\nYsj6rGyAYahLUh6BpnOXPhUcE2ZTdYqKW7NHmvdfqbIEgzJMtQ/dENau0bER\nOjVJhocAwinhKwq6BKn0uaL2v+lGVr/vi0v4jpjmelcj3Il0au/RHS/Z5lhu\nUR7w\r\n=/nTT\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button/styles\";\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.**\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n**Note: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.**\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button--icon-leading` | Optional. Styles a button with a leading icon.\n`mdc-button--icon-trailing` | Optional. Styles a button with a trailing icon.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n\n**Note: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommend always including it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color-or-map)` | If a color is passed, sets the default container fill color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`icon-color($color-or-map)` | If a color is passed, sets the default icon color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`ink-color($color-or-map)` | If a color is passed, sets the default ink color to the given color, and sets the icon color to the given color unless `icon-color` is also used. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color-or-map)` | If a color is passed, sets the default outline color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web 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/density":"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/button_12.0.0-canary.c18b5925b.0_1623791039141_0.5463647906010916","host":"s3://npm-registry-packages"}},"12.0.0-canary.271fff902.0":{"name":"@material/button","version":"12.0.0-canary.271fff902.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"b841d76789de76d0929f1fcc152822901560ba77","tarball":"https://registry.npmjs.org/@material/button/-/button-12.0.0-canary.271fff902.0.tgz","fileCount":40,"integrity":"sha512-c/B9q2w+5Nf1zbC0ThHsnvrUiHy0Wu+yfempbPegapghhRG64uKkRELVAdftm5yzMzGt5Uzeq3QK2j/xdjVbeQ==","signatures":[{"sig":"MEUCIQCteyKIzD0q+2PQIWGl1skt2VrLBW+NXJ65cAVViX+hsQIgCBaFujg+53noR4PbsrXK8e8ZgSjrA/ThD7stvqE9ZNw=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":534343,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgyS7xCRA9TVsSAnZWagAAka0P/j5OMo7NSD1hNNNcVoYJ\naqX+4IqJLcopHP7CXahl8XJmu90cBmW5JQaPaei7pUdMKrwCrxuGcl8FmDOS\nTPjSbOD2dm4nkTdy57NuvZC7XktUm9cj6rqBfENbE1RG6PqmDsG8lvuE8L8s\nIf6fsZDLA69TFlXj/Hs5MC5q4OiIYqrvS+5W/4P4h4WTpFuOuaGQEDwJ/gPV\n8vq3fxE+60nJKk4VAVm6j3jJa4IK/yLi87byK5DlVN192yC3FWqzq8vPiH8J\np51/T5oo3936uqCv6Nz0Ui23FH9gysder0r57pYEtk+ZnHV/NgVa7MOaWiF8\n6rsMgD9egK9YpKLponLP0tzhMh86bVFAiH3PWGPb8z6xaKOIZXtTveULodP7\ntFPkJadvZ/XJGS4RdcOxJXDFa4REvwY1QQgJ45R8oNb81335vxRN/DOGeU2w\nFYUqFfertzlzD+d8rE3ov4uw2VWsT3rYv7lvLBDf4SIQqiumEHVAzdn/prN3\n3w352LFADSjX7JrsvEQ+QqOjKFRcHkD/E95SO3fAkDXd16rkSmTdk8bj4TBv\nufEqR0zR6JasFepHSXFIL2e5WpMkTzC2mrAAzfoUuKS5eCABT8S4hTjhx+Cq\nY+3jiyx5/nw2PY0eyxU3iZokTHavupNyoYbZWsc2beflinC8IXg8u9VkKzXM\nQ1DX\r\n=5Bct\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button/styles\";\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.**\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n**Note: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.**\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button--icon-leading` | Optional. Styles a button with a leading icon.\n`mdc-button--icon-trailing` | Optional. Styles a button with a trailing icon.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n\n**Note: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommend always including it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color-or-map)` | If a color is passed, sets the default container fill color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`icon-color($color-or-map)` | If a color is passed, sets the default icon color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`ink-color($color-or-map)` | If a color is passed, sets the default ink color to the given color, and sets the icon color to the given color unless `icon-color` is also used. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color-or-map)` | If a color is passed, sets the default outline color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web 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/density":"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/button_12.0.0-canary.271fff902.0_1623797489496_0.2967276659627034","host":"s3://npm-registry-packages"}},"12.0.0-canary.7ea2e830d.0":{"name":"@material/button","version":"12.0.0-canary.7ea2e830d.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"8744d7f79f46dfddede2cc0aaf876e20af2cbc25","tarball":"https://registry.npmjs.org/@material/button/-/button-12.0.0-canary.7ea2e830d.0.tgz","fileCount":40,"integrity":"sha512-Pt5LX4Eg/tpbetB9EaTLOsnb0ddQMtkMaABaI1crM+cOfpzB7VhcDF0c+2T6q/i5koFWgYEXgo+EiqPPB1FpyA==","signatures":[{"sig":"MEYCIQCdYBboP2cFR1l/S8U0TyF1mtD80ivqpC4iJdVtUMfH4QIhAMC0w5ib4eGbqBUEKKz6L0X/bK2EQe24EjnJbi7mh5UB","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":534343,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgyS8nCRA9TVsSAnZWagAAtAgP/jiBrFZ6tlzet/7qM6e9\nZA9YJvwCg3SpqsBROJfZcrmvV2JffxIZgSrmBkxtBxY4ssIBGABNH5oIkOnv\n+s+1DbVmGIDDBXlweFG+rHjnWmJZZU3VRzgU64BYp8vSlrgEtbV6Wurg1zkN\n4cJBRrchyGRSnIOc5zTVRMxBJe9MN4SSu/3sT6APfPD20xQAjKeqt/XPKMSZ\nKPnw3/oNUeyFBuniUhO5N5O8DhkpWK8G2Xsa6Gqa9LMYkdlB7qCcLW0GbTgU\n5BQ5jy//1Gv7eU5+bXsxCfPxv1r+Vj7Z+paAsIKVEzI3GH0ub6W7rellGfEp\nrF39hVoPrGRBusbiTBAgVT0PF1M+Cw6ryjiyLLdbQf+ASYNXL+oYOophU4o6\niCci6eqatrkWEXN9TY0DgaL08JgKRui3uA+YtrXe3NK45WIZ3uc46H/PwEZQ\nh5KyDXJF2adkAfrbVEVRI1Z8+BkFGztDFX5S6GmesgTF8gfY1Y0RcKLNdtS9\nEbsaUVUlHJWh5KwDuGFXKrz37tjQui6Y3KBPCIgJSMroBBVGnGYNyTuaQUPB\neCKLMGn3PnW+NLm6d+hqfEDB8IBKsJI/ZW+sbl7xfRnlNdu98ql6thv/s1Xi\nxSEU/W12AFGnXl8epDRU3z/1HGLcmRwwvFf5WGru653RbuPqquWIqB5rr/z7\nkSSA\r\n=0KH7\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button/styles\";\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.**\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n**Note: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.**\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button--icon-leading` | Optional. Styles a button with a leading icon.\n`mdc-button--icon-trailing` | Optional. Styles a button with a trailing icon.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n\n**Note: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommend always including it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color-or-map)` | If a color is passed, sets the default container fill color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`icon-color($color-or-map)` | If a color is passed, sets the default icon color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`ink-color($color-or-map)` | If a color is passed, sets the default ink color to the given color, and sets the icon color to the given color unless `icon-color` is also used. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color-or-map)` | If a color is passed, sets the default outline color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web 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/density":"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/button_12.0.0-canary.7ea2e830d.0_1623797543708_0.4063737773871312","host":"s3://npm-registry-packages"}},"12.0.0-canary.d96f0a1e0.0":{"name":"@material/button","version":"12.0.0-canary.d96f0a1e0.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"40594d98d1d8e44ab6c6d8618d5b4bc83ad1c1e4","tarball":"https://registry.npmjs.org/@material/button/-/button-12.0.0-canary.d96f0a1e0.0.tgz","fileCount":40,"integrity":"sha512-mWshDC0Xhm4JMbzJpZ+rPcXWHcVJ78fiY+PsbNtzt0t24X9+ZHYrUmkg8EoMIHhlSkfPYxhisgbXElxfgiolSQ==","signatures":[{"sig":"MEYCIQCnRG5eMkDVJCf3na0TIumom2DpyToIb++Huf2z4QfV6AIhAIX9O7RwIOIOe+DgatU4/SFPFC2JMjQcQ48ZjianfIiQ","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":534343,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgymflCRA9TVsSAnZWagAAnhgP/j3n4FsayzvP1nVNn7xG\nJnXpZuDS+7ZV0o+sUZPMSZk2T5twUD/xob5FTxGNvbUrb7tSDRYckNKpy+dH\n5B1wQQiljSre/4tPj+S1og2x2CJyP5wSdfzxvF4nW6nGWE+Yc58pXBTq1HJ6\npmbr+w4uBACd5TlyhO/omdNWJmN5HhYJ2psWDNMDjdX/iCeWcZwdDz22lE4d\n0KDLGNtXOH1iLy2vz2xfSmxDkMbjA6BCOalISb8dxqyOC0fyImSCBQ8MDidC\n+ckXM5gDlbl4Pr177V9VomBK4b8vfhOHxbGaJ+eKfcjy7PJqn/DQeamzMEzy\n8W4qoTub78NsD/BS6KaTGTisMFqrEnARQsM3zHUtKOW7cJTVmaErZMCWqIgx\ntBiVvuhTbidLfPWww1MdNBe1CQd1HR+2bWGOAcGPlmUniBb2khENfRuzvFDZ\nVvDsygP2XgMzgUCEU4m5TPFD/f15uXLCHKWYwvqas4gsnPzQ99O9PD/SpOhh\nRvrP/qByihbjzWUkeqPB0Qau5XE0ODlw5TU/4dPFdk45yoLLA6EZ9Ab/3rSc\nEXiJzcvvGoXUmAPEyTyCk6EmcfptGCGmGvH/UR8rwtLoprtxA24xb03Q9uqI\n9A/uuZS8Aul49oEpKui2ithnlxtdPIhTi8fuGLM8UosTOhIQb9YqDEFVMnCG\nWZqa\r\n=KAYz\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button/styles\";\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.**\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n**Note: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.**\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button--icon-leading` | Optional. Styles a button with a leading icon.\n`mdc-button--icon-trailing` | Optional. Styles a button with a trailing icon.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n\n**Note: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommend always including it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color-or-map)` | If a color is passed, sets the default container fill color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`icon-color($color-or-map)` | If a color is passed, sets the default icon color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`ink-color($color-or-map)` | If a color is passed, sets the default ink color to the given color, and sets the icon color to the given color unless `icon-color` is also used. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color-or-map)` | If a color is passed, sets the default outline color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web 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/density":"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/button_12.0.0-canary.d96f0a1e0.0_1623877604528_0.6911166793701169","host":"s3://npm-registry-packages"}},"12.0.0-canary.a6183801a.0":{"name":"@material/button","version":"12.0.0-canary.a6183801a.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"c0c7eb7e61ed3a6076885476a6d6406131bbc587","tarball":"https://registry.npmjs.org/@material/button/-/button-12.0.0-canary.a6183801a.0.tgz","fileCount":40,"integrity":"sha512-vNWPIIG+wPA9ajfZ5/cD9W1xc49nAiVv+9+Fe6qKPVceq2yH1w9xrYgtEmsWL1RZDceoFKjDzLK+xEQwRjz5rQ==","signatures":[{"sig":"MEUCIGnhQ8DAMRsbpZUI6EN9qLmBzOXNquBIZqO+7szgaZ47AiEA/rg0Ohe5v9MTisanTAGrgk00RYybz4PqkQECDCiIgOY=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":534343,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgynXCCRA9TVsSAnZWagAAIocQAIBiT6fUxKYZ7BL10ifp\nCtxtPMTzm7qzIK6ewNlHWHu4553IKNEA1lYjdajUZazLeFJFoAzEKYWg4SLd\ntYV/OS2wZQ6ht0N2A2jD5fBnsJofFmmZz6NkL97w3FOMczMMnjeTsjcjz8jX\nw4OzaDoYABYfAudYVu1cHFY0/pdB0u+rzNPFCMm3BcQGohxZn5UD+/T8PQAG\nurqQQEU2c9tGbowDS1Kd6H7OzIn6MhJ6ACagZ3nVtIoUqQ9L02MJ1rL+NDRL\ngReyx6B0WwJwXiIwaxXqEKQJPUFIlNZJzKmWp3TNn9T1aByiP2MsG9YSqCWd\njgiIBDWAOzx2y0Z3JqOt0DKCmCoBJykJLTJtuW0uOIgTH5o0poPLlX2yEekp\niYD6TFl4n9X+ckXo+K8yifkEMEFB6a6BqsnlJ8uqX3Rjn3rsVOCxyIJKlNtZ\nkUmRdVcVO7arWwC/MOBfzFztkrc4OoG1vWibukzc3L/026HRPw4F9abhKIBd\nrU79QV2CLrvl/W+H2fYxqrUNysIJtosmu7phgCPXkAm3kBOoizKY2NhcF7TP\nxt6KGwYg7pO0xqrFFgh+yFFilWxVbqn+eYOK2l4rO5mZzoMXJF18vZsdKcgF\n8PW6I/RreeQht/ljvO41bAy6V+MjwrJbp7eW+MbF8OE4pD9GDWjDK1lZ6fpv\nghP6\r\n=TcYk\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button/styles\";\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.**\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n**Note: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.**\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button--icon-leading` | Optional. Styles a button with a leading icon.\n`mdc-button--icon-trailing` | Optional. Styles a button with a trailing icon.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n\n**Note: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommend always including it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color-or-map)` | If a color is passed, sets the default container fill color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`icon-color($color-or-map)` | If a color is passed, sets the default icon color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`ink-color($color-or-map)` | If a color is passed, sets the default ink color to the given color, and sets the icon color to the given color unless `icon-color` is also used. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color-or-map)` | If a color is passed, sets the default outline color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web 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/density":"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/button_12.0.0-canary.a6183801a.0_1623881153685_0.17343661779943575","host":"s3://npm-registry-packages"}},"12.0.0-canary.940550232.0":{"name":"@material/button","version":"12.0.0-canary.940550232.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"9fd480b2edecafabaf23e5d2c317133d57783714","tarball":"https://registry.npmjs.org/@material/button/-/button-12.0.0-canary.940550232.0.tgz","fileCount":40,"integrity":"sha512-2zm1/QZ5K6sTTBteLoc6FQrdZmiYbQmDNmI44Ye4khlR7vGP1l+yDqd4Tc4gzbBo37bcerUkHI3E5v+WO58XBw==","signatures":[{"sig":"MEUCIBuIn2l1AfZboyT+gAd3SrJXl7Z9faqPNttCdIGSW71XAiEAmgpizEeHMq56F3tgP9k8S8xn5LKfwFPIQ6otgX06IxM=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":534343,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgy6U3CRA9TVsSAnZWagAAMM4P/33MJHYtCfgyss9a8JF4\nkRb403SL0ZbkYmDzxG/0ikHQOQz5OODSdvrP+/hQ8szpqwBKjF2ITYHiZCdg\nAoSzkGq2aiwX6nlhPR4rU5E6MmknhQSPyQP+6aPG04EbsE0ijpdTKsK8u2jD\nj9i4FfzUfOzPrVT8wwo0rCNDpiat9ZD9JXaE9XS7A6aAh3msTjUoRPQJ/8/h\nD/lOwD3hB/fGzRtxjkKYxbA7mxvOAz+Vvs04qHtwNc/P02R7HayCvWfba33M\ngyOfEW16yLlbzLAIN8RXYXp9OlkS4R9z9u3PPb1VHd2zQv8znCfVJ73xSptt\nCUY9d7Rig5WHnTdRhjWt8AXerpd464L1ivDifIsjQgI28767rS5Vmhew2ms0\non6cbgvqLN7qAwK1x/oPTKilqYvDG9xuxQGr4jcubpFWYJ2bvqDHK9zdir79\nckOnR0OlUvYqHotBi8RZQUlyH915uEcNcDDuWEJrGE3XM5+OEuLkEi+2O3K3\n4uXZAwswi2yArrVBg8xt8SKew8naknJaoGQ84kWE0kSml4ZNME5MJVWRgrE8\nsgeoOLRZ1SlFFTOzcN94kJ/GLkuWC/VTUVmVHE7iNd530XAVcMrGMWSgwu69\nSY/beiyjsn8s9K/bj1/nQdD08WElnGGKy5BKdVTOtiJ57nOQkq0s9KQJN/xb\nWUtR\r\n=VsBA\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button/styles\";\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.**\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n**Note: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.**\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button--icon-leading` | Optional. Styles a button with a leading icon.\n`mdc-button--icon-trailing` | Optional. Styles a button with a trailing icon.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n\n**Note: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommend always including it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color-or-map)` | If a color is passed, sets the default container fill color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`icon-color($color-or-map)` | If a color is passed, sets the default icon color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`ink-color($color-or-map)` | If a color is passed, sets the default ink color to the given color, and sets the icon color to the given color unless `icon-color` is also used. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color-or-map)` | If a color is passed, sets the default outline color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web 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/density":"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/button_12.0.0-canary.940550232.0_1623958839371_0.0735735003971072","host":"s3://npm-registry-packages"}},"12.0.0-canary.f705e8048.0":{"name":"@material/button","version":"12.0.0-canary.f705e8048.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"8f2a87a907336a7dfb9684efe6499391007b53ff","tarball":"https://registry.npmjs.org/@material/button/-/button-12.0.0-canary.f705e8048.0.tgz","fileCount":40,"integrity":"sha512-9CQQzKMMxQ8Y0gsNKOfCBNdvDBASc6SqvgBchZgIYVaMFtqNTd4R/D84+/z3fX2XdGJZXhwC25lwRsTTY/iE4Q==","signatures":[{"sig":"MEUCIGkqAdBlMrDKdNjMW280B3pCMIeUJ4UHqfPVkCedb43FAiEAwTyUu468tUjRgWVynpOK8oBpgmVSTh5hP2x3RUxmkbQ=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":534343,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgzLrJCRA9TVsSAnZWagAAMYcP/iD2UuuAfamhFB8uNp1/\nler9okfBrDhgxYKgAn/6CW+7Cn2PC8RSPw3cQ5yiLwujeMKMEAInEw7cvBQI\n7qV6a1a0VSC1c2Tqlflice+uNEwPrCon6S2ylQh077mnnUIpA1H+vbghURiD\nIJWO1m3p2TaFbZKLiTEz9KaJHcLKJajAuQ6obbsWUS2RB7C3e0EERAjnjsOk\n/l6WTj5Ypu2yMpYH3J3ToZsKCmOojpOmydmNUznTy+6sSlgI2rk2rTr69YtO\naYs7T3UcWilKZArf10PMa2TzR5irXkVpNpkNzPSWGS6lc4aOQTT61XU00jL5\n00aEhj0SyLjYxrzT2PIl8/v0fq8ZodOyfkwFta0yz6b7PDQVbAeY8AYCqSFh\nl5iJoXVecHbZOWhCIkV6Z1yvt0kWtzRuVGZr1pdM9Y9kDecQyzWZuP7Otez5\nSkESafQAGtH1S6QYtnLNR/ZXncoOUWeEwBs/WDTIgqj0gV1Xs2pjf7kMoUJ7\nFdVY4lTwA56X5BdfzKhxRLJgfecK2sloC5xgxLP5LlP9HSyWlJUDUhTu8Uao\nlUMF4uBvIiVKZ1Pt2UmUWeab78o9hSYc97DK+QRqD1vDny7Pby92e2hnNCCh\nXlXeTrLT0eJxyLq+76OohmxUItPQgHpRAxPX9J7gGgw/yIv6xq01ek/QcBH9\nBhnW\r\n=Sbd2\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button/styles\";\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.**\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n**Note: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.**\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button--icon-leading` | Optional. Styles a button with a leading icon.\n`mdc-button--icon-trailing` | Optional. Styles a button with a trailing icon.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n\n**Note: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommend always including it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color-or-map)` | If a color is passed, sets the default container fill color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`icon-color($color-or-map)` | If a color is passed, sets the default icon color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`ink-color($color-or-map)` | If a color is passed, sets the default ink color to the given color, and sets the icon color to the given color unless `icon-color` is also used. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color-or-map)` | If a color is passed, sets the default outline color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web 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/density":"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/button_12.0.0-canary.f705e8048.0_1624029897449_0.6450091775455462","host":"s3://npm-registry-packages"}},"12.0.0-canary.08d791f37.0":{"name":"@material/button","version":"12.0.0-canary.08d791f37.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"86f1340020d3038026d6b2e0100dbcbe48b39b34","tarball":"https://registry.npmjs.org/@material/button/-/button-12.0.0-canary.08d791f37.0.tgz","fileCount":40,"integrity":"sha512-yVTVZDn8qZINE+hoogCglNJOO8i9pMKbgBKuTiVWKXGL96kmgLxYiJwkAtwkPFBmKD9isACPCGkiWmqW2d94Mw==","signatures":[{"sig":"MEQCIDOixHpJHy4kMU91spuOqfggrtPBnu/krPb+f+Y1MiM6AiBchCOaeb2lnz0eEjos6drLq2X68ki2kLwJ6L7/dORxKA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":534343,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgzQwoCRA9TVsSAnZWagAASBMP/iJhr0PPUiOqQ0RjPCxs\nZjFK7keuisoYkFSk9qI+kViXGq6SZ7Du8s33rYYPzeNGWAY5BrKXhUXXXWww\nFeYPBGv/PGC2rDi0zASepKNEcJ9HDNCruk6p6lwbmDfZ7Ztsohe9RE3tTYtB\nVfHvfPy8WgsPNY/2aYmMNSIRl5NqszxAnzDcJOBt+VJf1jzqUspwrYWiky2E\nl9TjtsbJXbwKIxz/7Nijpn8OuSdhM9Mq4HT7F6vB2V2qkeeYD8Qj0djJPQLd\n/IPZ5ut2Y9Za7K4HhJvvxhL7DDAV14nYWh4imkjTgLztEOzEzOi7M7Mvzn9O\nWPlzdO0yN8R+ufOSw7sniJ56unJN1THY1GzJPwSaXgNLo2jetwAmmrFcFlSH\nUTBlvQPW9TIF93Un8IovpPKMQf8wWW1pWSfomjbcoe0FkNESE7r6ThIDNbFk\nNN2KgIm6ptbPixbBnPO5B/cA729p7FlIf+6/tXx2FaztKp+U8IgRWhMnfqBy\nzvMngDb51TbnAi0DR+b90SmgqkOrQzW0Q7eEGZJwoebXK+/ptAARghRt6EOk\nfVlZZDt6MMEJk+9SB5dac9ym4AMT2rX37xZsGriICr3bLVs4QMgQSH6VLzB5\n8ZedPpZv5Qp7B6F2hDi5cGjt1ilKVoU9tGqdUDud7JN0ZWvN/4mIMc9+Q6as\nmRQS\r\n=Cels\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button/styles\";\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.**\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n**Note: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.**\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button--icon-leading` | Optional. Styles a button with a leading icon.\n`mdc-button--icon-trailing` | Optional. Styles a button with a trailing icon.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n\n**Note: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommend always including it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color-or-map)` | If a color is passed, sets the default container fill color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`icon-color($color-or-map)` | If a color is passed, sets the default icon color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`ink-color($color-or-map)` | If a color is passed, sets the default ink color to the given color, and sets the icon color to the given color unless `icon-color` is also used. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color-or-map)` | If a color is passed, sets the default outline color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web 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/density":"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/button_12.0.0-canary.08d791f37.0_1624050727905_0.6478111570181218","host":"s3://npm-registry-packages"}},"12.0.0-canary.e38d7440f.0":{"name":"@material/button","version":"12.0.0-canary.e38d7440f.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"20ac499b90ee22b060a4634f2a4dff0b4cd005bd","tarball":"https://registry.npmjs.org/@material/button/-/button-12.0.0-canary.e38d7440f.0.tgz","fileCount":40,"integrity":"sha512-j0XNupURUl/ik0aquAFmbAPsRwfT52aZG/JA62ucLQ8fn1ToBUmGMat9Xhjm1uZm88rUQKTUjvCkgIbkg4BT1Q==","signatures":[{"sig":"MEQCICw8JW+wtJzWUlQYfPgRxQH8nx38g7mN8yjoc+AxjXFnAiA98idaG+P7fpAn2IbmAEuV0Oz/LbTmpb/0EstP4aUlNQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":534343,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg0M8qCRA9TVsSAnZWagAACXUQAInHelZnqJqncbsmb/YD\nOgJcwD9dN4JUFHu7DwRqOPn2laNT5lrojuViTu1A0RAKYsDB57ozu2nOIwQH\nHvr5vIeMctCl+yUpSNQ5yP8eA9b3nATp5l37LzBfwWlx5cu2ssv8+8RP7YUC\npOiO952Kq84Hk61FLcLCEqA8I87mv4tEQsBMqW4kZBOK5BzNbeDTATlgvv5b\n8BVbm7YlEdrU7eZqtm3llgNJOaMt9ZtPMrlJFkPAGsqcgeJur6BMaLc937Zv\n0paQYNiRAXFrhLAtumfSMTh4+VJzt5U3VHGAYG4MRt03Yx+BYFuHOG+6ID+s\n89Sm+K39xWnQU91Rcz0DEZrrTB0ejzPOBgzqacDq1KO4KZY5wkno6lsJZy/+\n2whAd2mLNykE28BXZ9qXLOVRm4MUQCdYbzYsZ5K77VyKe7USp27KkRY5LorG\nBSygtukU/wrR19HpE2IxEHsKtzqsnEmyl9txJNeYc8oJ+gBtiXw/PwBy3GE+\nMLt4upvCpDH/NUw5gva+KDDjNCmok3gNg0Xv9/3h4x3BL46cIB/eIAXHKmdK\nrBH5A8rfVi4x25jVosHm55F4bF/lJ4H6s8TCJT75dWkpPlqA4f/S/uJ64tNs\nTmdGOzmRUUils+x1Wpe+5ZjYLQAZxTKoq4r9jT3lIhhWA9bJ3w3D3Gi+aH9f\n5DgV\r\n=MoLL\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button/styles\";\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.**\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n**Note: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.**\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button--icon-leading` | Optional. Styles a button with a leading icon.\n`mdc-button--icon-trailing` | Optional. Styles a button with a trailing icon.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n\n**Note: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommend always including it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color-or-map)` | If a color is passed, sets the default container fill color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`icon-color($color-or-map)` | If a color is passed, sets the default icon color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`ink-color($color-or-map)` | If a color is passed, sets the default ink color to the given color, and sets the icon color to the given color unless `icon-color` is also used. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color-or-map)` | If a color is passed, sets the default outline color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web 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/density":"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/button_12.0.0-canary.e38d7440f.0_1624297257722_0.8357108282743284","host":"s3://npm-registry-packages"}},"12.0.0-canary.75900a5a9.0":{"name":"@material/button","version":"12.0.0-canary.75900a5a9.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"ea767d66176555374be87213ff5aeb3d79bf9537","tarball":"https://registry.npmjs.org/@material/button/-/button-12.0.0-canary.75900a5a9.0.tgz","fileCount":40,"integrity":"sha512-r947Ap3HtHYySC8MSX0aY4p/IPbF/Im0gklk/kr8DsmloVVUoUkwIfPQtCQ/gOu7wEjo95XkO4eqAoF3nYt+aw==","signatures":[{"sig":"MEQCIQCIMBllMEb357UO+DL/Mmzx6IHEO8GOJ9R1GZZqQvY6+AIfGuW/LMR2/kaJHOZjZqO4JC92zvmWPZNBnT8EVviXmw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":534343,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg0NxnCRA9TVsSAnZWagAA/MkP/jWE1Sn7hpWRn54TTiwi\nrxtE/mssEg8yUraLkK2XW0Zeveemmr3lXDT3bMqB01FNZ6yyY+Ao1SQXq3P/\nb8E1+GtogumoWnikot4IkxDWkMkphBgSYylaejGuNrtNAtcwe7pbJCfR7lfV\nPoB5xQN/CCe+qrmRGLeqkWuX7kZRFPYK8/To7BsF+bNmR86shmYCgSxucixO\n64mVuXDKA0pB2LqvTOJ636M0QhFBONtmb2mtp4g8FsmrmHOlOLnhvWl6GUUC\n4UQ2p2ylBt1QjZqgSAQYQjeqQ3vcrHB6g7zhtnYV7YFehmaksuQkRs7bac84\n7REjfBC+fhDqr7FmPQYTTxMk3FyPZRneBFGVQ38jdKx4V9cZJ4/B3H34OnfN\nRbX6yE2ElFYHXFVH2Fr5l1thzqUF1nMMGS5GqZ4sQCJ2Kw4I4Y8db/isPtsX\nPCUBwoUo+dr4yDqtqr8EWSnQ16co7hIHI7wOExb0IlTTFy6BRQSq9g8Px4yW\n0O/1bMDyLeaVjVHt1+J4eP4Br6wSuDSjehPkwsPPzI8jKQFW4J/BN9uaPzSC\n6loEEneVpdzTFZbuRbOcQZO/H5LPC4YL5TomZ5KE4nIBDk8xi4COZ2N8P3XN\naK13znI/tGt8FxbrMe4F4NqahpyiyxQEKBajS812f1XmbAT35sx9Gpeg5Jpu\nois3\r\n=7fy6\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button/styles\";\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.**\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n**Note: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.**\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button--icon-leading` | Optional. Styles a button with a leading icon.\n`mdc-button--icon-trailing` | Optional. Styles a button with a trailing icon.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n\n**Note: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommend always including it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color-or-map)` | If a color is passed, sets the default container fill color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`icon-color($color-or-map)` | If a color is passed, sets the default icon color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`ink-color($color-or-map)` | If a color is passed, sets the default ink color to the given color, and sets the icon color to the given color unless `icon-color` is also used. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color-or-map)` | If a color is passed, sets the default outline color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web 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/density":"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/button_12.0.0-canary.75900a5a9.0_1624300647319_0.9441212779024715","host":"s3://npm-registry-packages"}},"12.0.0-canary.33e6f50e9.0":{"name":"@material/button","version":"12.0.0-canary.33e6f50e9.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"ab19098826c59dc397d5d872e296e50cce5f32e8","tarball":"https://registry.npmjs.org/@material/button/-/button-12.0.0-canary.33e6f50e9.0.tgz","fileCount":40,"integrity":"sha512-Gy0/gcMVypiwUTG9AqrHfJkcqPi02Fe6FIRFtg5oSPqTjQzNpzBTE5VB/UA6dlhAbM+fuBIymfGr1ZZfLCu0OQ==","signatures":[{"sig":"MEYCIQDc8heFUZGyV/UErqcL/RdY5Pe0iEciJ+yqNAbSqmZ2DAIhAKOnduni0ur3vHGIfXRnSNqzVZvcACLUTt8Lc+MQELl9","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":534343,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg0nxuCRA9TVsSAnZWagAAMpcP/ihMP1JpMWEk3YeYKklX\n+7wgNIxCIKpFdYtreBZ9UhnxM+l2rqA+fjyPioJuFG02nVEFW5xkAD0xM2hF\nMFiNmC2fB/CI7K/pe+mBBF185mHCIAWvkxOmvMxbPaJuBHTxNir8jPgz6bTJ\nFq/Zd/TSKJWgcx9Rr2NKvCOoghv2+csIWvjHzBsmQIK/4yJw94jCk2pIQnZ/\n3CY8cgP+MoXWj/ARaeVfHvQxJDDVN3f6hnffW8BAuZIo2f7tJFU3eOJnXgCB\nk6+gpfWVYYbOORtCAYTwJULuloGYxoVeuM0SSZfWciSmnUqwl/9fyL91bwb/\nCJ08gClDk54LNPTEhevfH1lsxZhSwF6S+txEX6Xn5UuVwjjNIF+qbmfGv8bR\n4iTVqZe7Ns0e2LAxgnXeVJC1x9E5MoZVLyZSO5cbNCrksNCeF0INBkiSJsMW\nQ9WZZF9wf/GCZQSaNBu8DJnjwL8LgtlUQRp/eZHMoWeXIITxZYowo3yhQGoe\nk2eaAALSsky4r+q0/7BWLKtDzEtGJac2K2F2F0J5r9zOuFHwWJEcOmn/+pub\nybxdy7YvFbIYktZCu94GJohWMNHqZM0iZGZNF40VmaNMDrPxwKGXkkN9TDp+\nW9qFXy6MzlgeVdXZjLdNboOixsxLqR1Dw0BoVi0HOnyUHvoUoddw+IKIpcKI\nYKAf\r\n=x44z\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button/styles\";\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.**\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n**Note: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.**\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button--icon-leading` | Optional. Styles a button with a leading icon.\n`mdc-button--icon-trailing` | Optional. Styles a button with a trailing icon.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n\n**Note: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommend always including it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color-or-map)` | If a color is passed, sets the default container fill color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`icon-color($color-or-map)` | If a color is passed, sets the default icon color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`ink-color($color-or-map)` | If a color is passed, sets the default ink color to the given color, and sets the icon color to the given color unless `icon-color` is also used. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color-or-map)` | If a color is passed, sets the default outline color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web 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/density":"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/button_12.0.0-canary.33e6f50e9.0_1624407149717_0.1446891388179139","host":"s3://npm-registry-packages"}},"12.0.0-canary.8c685301d.0":{"name":"@material/button","version":"12.0.0-canary.8c685301d.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"ed531c5cc0b1f1ab1a9ea6514fd911324d14910b","tarball":"https://registry.npmjs.org/@material/button/-/button-12.0.0-canary.8c685301d.0.tgz","fileCount":40,"integrity":"sha512-XICKj0OX+TuB7zih5PEDefR7H5Ro6hAcIwaGzDeTZiodQTqyAk7qvEMfViKukmU732RyiMGZws66krCU/loWjw==","signatures":[{"sig":"MEUCIQC4qn8XuJcDnrqYMTuIdrNB4ax72r8AeBeBAt5cyRvrnAIgL+6vyjjD/Rt7Dh4m5khUfa4sRxz4LT5GH1Pc8bR5j0M=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":534343,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg03x9CRA9TVsSAnZWagAAnAYP/AyPO1PqjXYLquWffvks\nXsaTK2MNIO62Slo/XtNisL08QVUqWLwlk+0GP0hGEzx6hsdyQtVoKvM5RPlM\nh30XpMjdWSCmdR+dLBU0MwPygtnn5lCRV1EFY7rwPSp6tyWk4/tEcKurNlZ8\nAXlkoHPV+Xf2S0tU8PoWnP10o9ioA+1cPDzBnf8m2TZLHmcWdYPgIfddKc7o\nRo6Y1qHZ2QJErblE23S4vl9u0u9U1ujkaUGkfSapNl+IgWIUEs8QpeCi5cMc\nuvon8gS/QizfWoArVTa967vqywXaxJmNEFm21BlCoGnH6ceMzQy7YvBeNufZ\npP/X0+owDn70rKGbLLWndX6WRdb2Rl1r0kHVsfm91Ba1gyOaadFWhGj3EJGS\n5VwtPRNIy/tKXZQ0GbSqnXLPX9IpuZZDOrwZbZESxBrkpLMb5tacVyehmeTG\nVWK9+Lmy+ITNZy+sX3tSFpCW5af3EeqRMkF/yPtqS0Dw1Lngr8RuEqDSGqg5\nUgMzvMNS7I6+BKF7ueWQ8VunGz9GbexZSsk+RRGQvSu0dDKOJFLxgaH7lO3S\nWuuhsTQk3OkFNU5xmjTAkPVXpjmec/DUGkYtoBe0C+36LlJJxuk1r9aNatcS\nwPg8YSMv0FsfBxQWj4Dfsa5sBlTGk5LlIiH58nbQ4++okgWrNKeLaUCkx0YI\njEmX\r\n=eOY8\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button/styles\";\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.**\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n**Note: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.**\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button--icon-leading` | Optional. Styles a button with a leading icon.\n`mdc-button--icon-trailing` | Optional. Styles a button with a trailing icon.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n\n**Note: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommend always including it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color-or-map)` | If a color is passed, sets the default container fill color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`icon-color($color-or-map)` | If a color is passed, sets the default icon color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`ink-color($color-or-map)` | If a color is passed, sets the default ink color to the given color, and sets the icon color to the given color unless `icon-color` is also used. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color-or-map)` | If a color is passed, sets the default outline color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web 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/density":"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/button_12.0.0-canary.8c685301d.0_1624472700833_0.8794082342172556","host":"s3://npm-registry-packages"}},"12.0.0-canary.8c7d994ae.0":{"name":"@material/button","version":"12.0.0-canary.8c7d994ae.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"8de80e1187cc842a29504c58cc20a41d4873b7f2","tarball":"https://registry.npmjs.org/@material/button/-/button-12.0.0-canary.8c7d994ae.0.tgz","fileCount":40,"integrity":"sha512-9dEOmOddwPtjVANlvzY0kkKYBULq4JpvHwYY7Q3Ijn/s1ipUMC2wYzH7U6LYx2/JT9k/rcJbaH2QXLSInhyRJQ==","signatures":[{"sig":"MEUCIAsIOGCfOaupdPKWHDHMd0ZYE7UvlZy2C5fH+MdnUCrYAiEAjGaF+TiTfmMSvv/Gp1xyjXsCfkyQ2Va1Ij8rCL2aiHY=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":534343,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg04s2CRA9TVsSAnZWagAA0MkQAIQDzCay8O+ri2jHzQMA\nAM1r8Wa9mwKMVzc5hIJWQDFs4WQOgK+J1zqBE3ZY3CQlHro2whiMsLqOQ1mD\nyMXnzlzuHMR6V3pkEO60kU859mQm0/VwJsuhwvqdxTwQKaCoAMyJMYi/BSVJ\neQqNuuDudGZkkM0sYJNtZGg4Ylw1BgICxNdI887v5X0wu5/FAR8Lz5F4zu5B\nhyShIfsjKLv/VWXas//MPQaU3wRGDQzhpzxlor4mnidDC4RpTD7aA0zSiGyq\nC3wMJ9uJ7aFqGZ3VbLusLWPjnWbz1QwQ6OyY3tVTxu3EXf4BbaeSo+YyhuCA\nCcdEJ3LHq8/s04K3/1O0qghFesB48Lz23ix3/a1nRlPdTcvUVPdTWh+KpeJr\nhgfj4jwtfc21raAdtL5u0bS5rJU9cIrnhjrvy/0fXY+rBS+iHKAhlvfQdVAS\nhHxyzej5HpezhkBvssBZ3N5C3IjswzIAsSfhA5yrrOhXRhOP2jQoPNuY4sr6\nFKuAIl7QGnHSyGYK2xu+TWq7i1KYAc9y6r2/p+YYuVfgSxolMEFvWmkahrMw\n5e4d4u9PKFe8EldUr0RcPDKh4Jyuv6Fe9rCaoFgS6c/Z+OxUrp0gE7dhAyYu\nug0h+Jmx5Mo3hMxCWLi+GqUIptW/BYXdbCeTbxTOxx6tanYnOz6q5qKAr1eV\nqfOi\r\n=Iq2E\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button/styles\";\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.**\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n**Note: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.**\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button--icon-leading` | Optional. Styles a button with a leading icon.\n`mdc-button--icon-trailing` | Optional. Styles a button with a trailing icon.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n\n**Note: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommend always including it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color-or-map)` | If a color is passed, sets the default container fill color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`icon-color($color-or-map)` | If a color is passed, sets the default icon color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`ink-color($color-or-map)` | If a color is passed, sets the default ink color to the given color, and sets the icon color to the given color unless `icon-color` is also used. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color-or-map)` | If a color is passed, sets the default outline color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web 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/density":"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/button_12.0.0-canary.8c7d994ae.0_1624476470465_0.774758510654808","host":"s3://npm-registry-packages"}},"12.0.0-canary.4ccd39bdd.0":{"name":"@material/button","version":"12.0.0-canary.4ccd39bdd.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"8b0472922a161c7e5beab7745c6987283fdd109a","tarball":"https://registry.npmjs.org/@material/button/-/button-12.0.0-canary.4ccd39bdd.0.tgz","fileCount":40,"integrity":"sha512-q3wwwn5tlfONxL9kvMTRweKWiuUnSnC7OEyDn1l9Zc8sHuTXXzr49XOInB3aMdb/xt/vogqdL4vgmMNJj97saA==","signatures":[{"sig":"MEUCIGMsFuC5hvbECRPK1GlWP8s841p8XCZACRdeuPur718GAiEA/49y4T2G4TdhclrwqCExKDEEJBYnFYPuGb+df2Nuhzs=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":534343,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg1K+aCRA9TVsSAnZWagAAb+IP/ikHXUOeFWWsCPO6FXH1\n0vK2QjIz5dqDSFGBga9VjEsEkrY9LqCU2mNLL+00vukkmwv+rnGqjjpyLmUt\nDfzvMfXlD86Vp2JhqVl0koLhUQMZ11iPHvBGrO9SnCCvf8fXoBxTdE7NoSpZ\nQG4SlG8itjvYAWktToEvKFU1XkmnpBryXt+LgfPPFUbpUjFaurhbbB/xmOS6\ncfji2Ic8xt0e+QZHAc4tIadrL4gunzzgx4cWTcMnNFYITyXi8g26Syzy9RhF\nWrLAQuzIIhMZA9Bv5WNkeeVt2P1WMAV/1CyYN9wHW2ZUXD9TTDdIeINH+D2c\nXdFC3A/EDNiUUl0BSWfiC34Nt4DhLsTm8qzQniuuDZne3EbpeDRBDPmuI11Z\nFLPxcXyWkDRWlweDVUoQ/OTf2uFrsodRdl13qdtrqtSRjuvrw4NnuY+yldBu\ns6z3trmQeWO6VWK/1dMYNJyByXphei+nO9tMI+vruiEinzoapXGXUnyc5c26\n/OoCcCC5O8mcCSqorD0B97qgygkg6LO/sV7VdKGIVs6HA7SlDjcKU0uUACfm\nGi7A3+JwUVLAT/GS2dgjIr6/VZcLJYjqdN41kt+Fe1LXVsoIVtipmXAh+vrR\ngSe4Og2c3K7xVETGjZRkAsoq0HasAx0TppKiylBXGBqaVsz5Q/ORm+4Mxxz3\nJWei\r\n=ZwTH\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button/styles\";\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.**\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n**Note: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.**\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button--icon-leading` | Optional. Styles a button with a leading icon.\n`mdc-button--icon-trailing` | Optional. Styles a button with a trailing icon.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n\n**Note: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommend always including it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color-or-map)` | If a color is passed, sets the default container fill color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`icon-color($color-or-map)` | If a color is passed, sets the default icon color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`ink-color($color-or-map)` | If a color is passed, sets the default ink color to the given color, and sets the icon color to the given color unless `icon-color` is also used. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color-or-map)` | If a color is passed, sets the default outline color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web 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/density":"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/button_12.0.0-canary.4ccd39bdd.0_1624551321442_0.6416355580412207","host":"s3://npm-registry-packages"}},"12.0.0-canary.17553e9f8.0":{"name":"@material/button","version":"12.0.0-canary.17553e9f8.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"4f02f1754af798f1f69048f884107d3eda884b22","tarball":"https://registry.npmjs.org/@material/button/-/button-12.0.0-canary.17553e9f8.0.tgz","fileCount":40,"integrity":"sha512-ueGk7mn+DmAN6lfa9tiyEBmPMgrpN0hM/+vLHGvSUDmo5YxylNUixDaMTvKNTUiCvnBl48QJE82LO8FYuLm7Og==","signatures":[{"sig":"MEUCIGTiLpiibYNm84QYhwjftxvSe4xdZUGF7ScJIJzBgmXzAiEA5xEn5cy/HV4qUwMdrrOdoxXM6HiRuAqZT5+3SDCxVyo=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":534343,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg2lLLCRA9TVsSAnZWagAAsrMP/iUjarYK8YsdZK+P07ti\n91tCjscNl3L2d2MwVyobOrtaSTwEW5hveo4fJdbKAQsQb29+ggttIYXutxED\nkosnuMgqbEmtb0IooXdHrAFw3fgxVNzmK+kB37pHHBOVpTjAoMq4CtuF4xhj\nZNndo4iCjp+DeYPLpxX7nEY/s7/kj3932xgQre6i3H+FewffNDXmymgCI+yf\nugJGZUD/q3+3zuDSgbbkylW8AFL9HvsGYsj1m2fS310FvU5BMdhoX8jmK5pu\nl15yK8zAORgel+e81RLmMyvT2BgwAPzIAM+ff9fZnSUDkcTeZ2yQga92MesS\nXosc7iNiv08usvqlYHngBxZZjViw9aHCzVllevoZjArhI23mJoDoufBYS+9o\nY7rUZMUvm0awEvQn1mwUWI3zJBFKz/gtbJn+N0v58Ddu+CjKvLlY+MaGrtOk\nJogps8VI7monGxk/NrWj09j9aRTARK9Fo/eBRwTOBjkwK7Tj/x8ioq8rTJil\nkqCeJ8h6AZ9+ZKrjKIataEKxAUL6ZJ6WglwF7yQvHBCp9NZVoMuJMXqJfYwN\nY1KiqleyfK3S8LQllXgSPrK+MnOpQIgoICBUxuSu5f/yPNgGJN7BNqowThW/\nbRkUPXfMUna7VDCs37r2RkdpMYDuhSqje6IgIjraoy9MsALbc6GZzvvSX9tt\nH6KQ\r\n=aecB\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button/styles\";\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.**\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n**Note: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.**\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button--icon-leading` | Optional. Styles a button with a leading icon.\n`mdc-button--icon-trailing` | Optional. Styles a button with a trailing icon.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n\n**Note: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommend always including it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color-or-map)` | If a color is passed, sets the default container fill color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`icon-color($color-or-map)` | If a color is passed, sets the default icon color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`ink-color($color-or-map)` | If a color is passed, sets the default ink color to the given color, and sets the icon color to the given color unless `icon-color` is also used. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color-or-map)` | If a color is passed, sets the default outline color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web 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/density":"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/button_12.0.0-canary.17553e9f8.0_1624920779270_0.042656504414560814","host":"s3://npm-registry-packages"}},"12.0.0-canary.4c80072fd.0":{"name":"@material/button","version":"12.0.0-canary.4c80072fd.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"f563bd9baea38086431a90900855d3d6ad6c4185","tarball":"https://registry.npmjs.org/@material/button/-/button-12.0.0-canary.4c80072fd.0.tgz","fileCount":40,"integrity":"sha512-oXLmeV2gcJ6u386qoIk8wZtHyX94ZYsgoPrmdy0D3A2tyF3yIzM8+UJFWHWTsQTMbNAVItfL02AqXXtkVfkVNQ==","signatures":[{"sig":"MEUCIQDFIuN0nvNmboY8nWf5Y6QL7FFB7r4ICrzGaeodyv/T6wIgDWeYBnkRsX1hbqQOJENeDcEBW3Y7J4ipgLQNOSrpyEs=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":534343,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg22lNCRA9TVsSAnZWagAAMZQQAJ2GOv6KlhGpOvWTHP1p\nvGMaCWp4aEbXv9x3LZMpxUKg/8KKSoOVsHzTZAJtQxbD3XKb7zDUy0evo8Ge\n2ZJC63K541BHVaUIUC/YIbMcfIDJa+B/FRIYl/vMlHi/lcusQ5wyVWB3Rb9d\nujbFzV3D2sZKNXL2nld7/wkaIcreduwxQI2RHOavj4jGpBPymNr0kXh/JuiO\nzYVUwOouU4NvrfHD1ycfCuoECVz5tupAyyV2qoFayIp07m8kDr1FZDavYTPv\nStSEonQk7uqmASKgIYgKksKy6dgmeLr6jsInY4s7VnMXN1SKPEPSuA7vT7O2\nPjDOp51l4Zfczn70XlF3LU6TFJYchzOIIUvVUcEMsiiZmMYRRJmidlwTlPh4\nSbeBp5ec9KOgfi57YomkoeBqGZDLwr4tw0INb1VjB7M6NJGAPMriywc+kqpu\n9WsXF4f9xH4GRJnhqQG9ZspyXo+SL0kk3DfbQ2DJqWWQ8PJCX3dvlV0AaKcd\nIGqKrzE7DJmA5SHzDIvPyI27A7WemQSXyMyjJf4hdcsoRm7mB+w8nRPb/6Bg\nSPmoJGFYmJXo47e9UPOTRvHdgLCU/9/G7rf+XVoVaV0fOBaqY0+whv2Os/KX\nlnoE6MZyejGdvVT32x+F6qWfBf4dxyecjQArLf+cV7dmxiuCGVFENBnMVTTm\nWAR2\r\n=JpqR\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button/styles\";\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.**\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n**Note: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.**\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button--icon-leading` | Optional. Styles a button with a leading icon.\n`mdc-button--icon-trailing` | Optional. Styles a button with a trailing icon.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n\n**Note: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommend always including it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color-or-map)` | If a color is passed, sets the default container fill color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`icon-color($color-or-map)` | If a color is passed, sets the default icon color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`ink-color($color-or-map)` | If a color is passed, sets the default ink color to the given color, and sets the icon color to the given color unless `icon-color` is also used. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color-or-map)` | If a color is passed, sets the default outline color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web 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/density":"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/button_12.0.0-canary.4c80072fd.0_1624992076911_0.6469567388901869","host":"s3://npm-registry-packages"}},"12.0.0-canary.796811db7.0":{"name":"@material/button","version":"12.0.0-canary.796811db7.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"463210f4865d3b08d39ab62a97b8901135f71600","tarball":"https://registry.npmjs.org/@material/button/-/button-12.0.0-canary.796811db7.0.tgz","fileCount":40,"integrity":"sha512-ebS6x2BKpGrlwDrENEfqPCjzkGIkBGJ9q1QQQCUtoRBkPzz4QHDbxUauXVPUxw+rkIugNaMiE/cqIjlEVii7TQ==","signatures":[{"sig":"MEUCIQCoVpfmH/ODRI+GH1RuyFb72xDFNom+nZ2EiP3Vl/akZgIgBcRXVUvX7vFQZx//h6TGnrtR45d108TLxBTcZJOWG1o=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":532638,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg3QZnCRA9TVsSAnZWagAAKvMQAI+oPR0RpPKiNr72mQeI\n02ZWJuDpyVcjk4yKfIqF6xSp3oommBeYsccsKhPp3epDb4oy7j+lCg6oK5WS\n94iXDGY2zdAdjXyV+eFcsSau5HqwBnXdPIIaDkut9VkSg6FcQemVTnF3OIlr\n+Ev0xEPzgz23OfTmuA/O92Bv9rwJXCNGvJpyude9xFClqt1LUORaoQpn/xN5\nvXhdpQdrCxE1k3j7l5APc91O4UxrnIhvjTKzdrSzWfGPrEuomMzMsIIXAwo7\ngEYgFPnTNqV7bCGTdB4k4Jkv+vdaD4hTQIlFg6jbYvU9nHu6U4n4ZIjRxgps\nc0pJG2jYGjy95J38HeMB5RnNVwMgyrrozEgksUlnusWbCdeza0SEt3eVMwqy\nt3yN/uboGs2oAV2jCvBa4bQxI72KfTBRICzAzvzq0It558801D8le6CiGaLA\nWf6zWHy1hZxDIZAmCLVvDKGZhPWNZgrcqAjrI/8c44RO6yEZxIDf2MjgL7H0\nhu0LuaQLfJhaioTVmcAVheNSMgErENvkJ1z7h8fZbEMwB2G8jC/qIAIreiX5\nsgmbrisXYJfNp6L28XxtWXn2dIshfF8crTV24y+zfujfpFVHvLqkw76HmChp\n4IQYcVukGscKykOyONovl5+mK/godI4ZR3wT9HxfMV7cHNLT+S6gGNbZQ/sp\nxtJX\r\n=xAvS\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button/styles\";\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.**\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n**Note: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.**\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button--icon-leading` | Optional. Styles a button with a leading icon.\n`mdc-button--icon-trailing` | Optional. Styles a button with a trailing icon.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n\n**Note: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommend always including it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color-or-map)` | If a color is passed, sets the default container fill color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`icon-color($color-or-map)` | If a color is passed, sets the default icon color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`ink-color($color-or-map)` | If a color is passed, sets the default ink color to the given color, and sets the icon color to the given color unless `icon-color` is also used. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color-or-map)` | If a color is passed, sets the default outline color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web 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/density":"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/button_12.0.0-canary.796811db7.0_1625097830463_0.5968473574891711","host":"s3://npm-registry-packages"}},"12.0.0-canary.70e1efdca.0":{"name":"@material/button","version":"12.0.0-canary.70e1efdca.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"44107bd6a8c8c95d30e65bec82ba44d7a84ad026","tarball":"https://registry.npmjs.org/@material/button/-/button-12.0.0-canary.70e1efdca.0.tgz","fileCount":40,"integrity":"sha512-/CR+dqKCLHkZ4nlGK45Q0rMSZ3DylV/aZMQu6ymcUWQtAAtOhIFbC783Y3/eN+ND4PQubeqtRinVqGEb0LjfVg==","signatures":[{"sig":"MEUCIB2NepT4hGM72KvVRWH8HYNToCD7vBR9lKMbX7aLoky0AiEAqkZZpUrm1IlRgg+Zwok1oXqekJOUz5d7KGlu8gxrwZ4=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":532638,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg3fY1CRA9TVsSAnZWagAAqjgP/06mjKpNXmZZQfw1BYI0\nSZHTd23OEX/fDr9Mx4V6DEmrNziJCGVYnq4PgqCT3ImFkLXmjm9pV9r8HYfW\nSk8/3tMvrTd+63GmZ9LKPmWTDUedQAZcY3/xAC/tsivXhI5OOD/Bk9khnMbQ\nMKCWcI83naexQVVEBVFpHtTmu47akM99yraGcoR7s9OnVb41N+3kG1/P/sgG\njHBZAhAjtdvXeal//jEPOZf7ZG0FXFVQLzQGTR22laOC7jzpWsDowNQoR5mQ\n2bUmi5QbodAtppqVPSEvZFzqpI9mUb/b+uy2ho71rAMGPw3wXgvhR67eOjPX\nQZXGF3I57mbiXzzcER4F6F9xsRXLLM9IZkZMWekYhOWQutz/nAU6I48G8ws2\nej682HzI3tv1ayOlXJE/oLwfrk2LXUEknF01Kw4UvFlWu2jBj2UZewAnqWbL\n3WpY1lebdWEtK2VdwiE7TJ3mQQajzG1FGTBy16LycORf1opPtlhjnF4Fd6oI\nyV/saxPNzCNbEC3W+/45eESpnC8rGMPkZRAZASaI6FySMuDTIf7dsARKffPy\nuOExtF/3rk+LUsdgFJ0s2d1J0aVloVh2LJqVfPQjnN/4kug8MjeA+5Tfdk7R\nr8hkJ8BHqOyNLrDOeKEyRgyojpK7Y7iYeTzKKqdW6KDhvDpZrwc6CT9G9VtH\n99CZ\r\n=Pywv\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button/styles\";\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.**\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n**Note: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.**\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button--icon-leading` | Optional. Styles a button with a leading icon.\n`mdc-button--icon-trailing` | Optional. Styles a button with a trailing icon.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n\n**Note: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommend always including it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color-or-map)` | If a color is passed, sets the default container fill color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`icon-color($color-or-map)` | If a color is passed, sets the default icon color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`ink-color($color-or-map)` | If a color is passed, sets the default ink color to the given color, and sets the icon color to the given color unless `icon-color` is also used. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color-or-map)` | If a color is passed, sets the default outline color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web 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/density":"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/button_12.0.0-canary.70e1efdca.0_1625159221063_0.4086325906239199","host":"s3://npm-registry-packages"}},"12.0.0-canary.435866d32.0":{"name":"@material/button","version":"12.0.0-canary.435866d32.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"f83f4fdf8c4d02e3301dc6bf190f6aca83fd21b7","tarball":"https://registry.npmjs.org/@material/button/-/button-12.0.0-canary.435866d32.0.tgz","fileCount":40,"integrity":"sha512-xZRkKvpcwyl48tQExUfWVowutrczNhqud/Uw6YwIUlUmG7rgnkxZrkmXy2fqv1D7wdKaGZp+WVJiblJRBMAjLg==","signatures":[{"sig":"MEUCIBq47ZavAugwCOiRDXYDHJS1/7bS2cZAbxGfV8MAvf/nAiEAmaXTzua6Ihs8RjUgX60+gHxNkffpRoNSB49+yEeDG+E=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":532638,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg31kzCRA9TVsSAnZWagAAQPsP/04WzpQyDIn/uLozDs17\nq2eURITkpNuKUZRDRwSVhZEdgSRFEAsInaQyNcE6CsiSYVqFQ+0X0cEMvPNo\nd3xSZd0v2yuqX4UlFs3WhtOAxmsRugyetTbdyeIFs+nGiI+sF8SrlZGw3vTm\nU+XsqewbolgcPFBIgVv0QEEEINSaJ4edWRFd7nwV9RpFwDv+nfrHOE0UTPvw\nyJs3bfHrINTbi9UL6yhbqlTX8AxcEsCsGF9uUlYkgLvLCDaS9c21GUgPtux5\nVB8WoBJHwfvIaYrxS+ZX5/8dTVpKJasLuEjX4NPD9WxGo78VwSXjB455xCPf\nKhcfCuXLXaQkJm+4qmTxJiCUWO4fKTLBrkrlZ1jqSlKZemcEf430dm0h8dA9\nfNH0PlUxDdaOwFl1hrmcJzixJgN2E2D9AuLq7wpWogiySeG6A7YZFdlUVXeX\nl/OypvGsd9VFE0kewwJMkuX2bOT885FECHt/h2+cEPjHto0lMpnl3uLv9j2f\nQmyGwItEXUIUaDttge18Pnsh38ONAwzOwtb/oRBRk/FdeLk+vMUdTnYVHc1b\nxNjBDGuUeGgDhsBTOdKPPD/7sDM8WhBLWhkrxoNRpG0+ZN5o137bkcGuD6Kb\nBR8TXkkPARgQGiZAHr+oGez6YqIzftdg2lDcbB6HSi4ccirqM8daVluDJdWB\nnJEY\r\n=VGUM\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button/styles\";\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.**\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n**Note: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.**\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button--icon-leading` | Optional. Styles a button with a leading icon.\n`mdc-button--icon-trailing` | Optional. Styles a button with a trailing icon.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n\n**Note: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommend always including it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color-or-map)` | If a color is passed, sets the default container fill color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`icon-color($color-or-map)` | If a color is passed, sets the default icon color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`ink-color($color-or-map)` | If a color is passed, sets the default ink color to the given color, and sets the icon color to the given color unless `icon-color` is also used. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color-or-map)` | If a color is passed, sets the default outline color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web 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/density":"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/button_12.0.0-canary.435866d32.0_1625250098586_0.4952913579332574","host":"s3://npm-registry-packages"}},"12.0.0-canary.d0f9f3f2e.0":{"name":"@material/button","version":"12.0.0-canary.d0f9f3f2e.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"b9ba26658dde0d914419b75ea0937beb24530d92","tarball":"https://registry.npmjs.org/@material/button/-/button-12.0.0-canary.d0f9f3f2e.0.tgz","fileCount":40,"integrity":"sha512-hfFfKtNTFXKdwZLRQ5kTmgkI2+HAQAQH8f+mXpajEIFM2zLLjbmLbH2QhyCPX5i999H4hAs5RYnysCfjVhXzMQ==","signatures":[{"sig":"MEYCIQCDyr324giT4baPoIY6tMmBNxGucD5/Om33evJ3DJc3NAIhAJ7IilMIi/6vOz3PnJa7Panthox7QzFFyq4e2KUi62t2","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":532724,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg36ieCRA9TVsSAnZWagAAruEP/AwDpZFFYL48VUO7cLz0\nj1IGeT/skhQpNXfr7DxrSfXSly9VWMlbWagC6G4ho0n0ahadsEiunw/WDfuR\n1MASQq1QdEX0IqJZ9mWmf7Vc02rPiJ06eADQ/Q/WmTV0/RBjjfxeiGjhpH49\nKCdScJWjqYVauae9mqCqMrt/zHOuquhEBy27xCmBLdJN/wEPkGEI+a3DWGUF\nlKJd+lSkiUSRe+WU/Oteua6qhA517ZOyP0sdieEug3tkIUSvHIMa5T2Xj0J6\n39fxaOC+6So5UYrnANY47YASG0qJc0M3wr2E3YpeGaBk3aZavS9j3mV+jOrQ\nAmidF0Zzsd7SCDp9oxRncX7qXRro76Iejy64S4ipP7tmTyxz0DLRg8CMpUtD\niH7WdrLuZJgODDDhYDsWxNCNw1w/p5UpxLbEh2WWvcsHNitOWnLvA4NSa14G\nySeb8XzpOLYVIO1ZC1GqgSJq9KDlHFhH/cg5FtnezGEPt8jzjTa++cJUPc6D\nViWZAqFoEONg32IiJFBQWR4H1gMzVtt+FuMUQfo5kDDY1UQafcmDnya8sEKV\nglSIv9d9me1opnn/4gQF2X7cKWeWnq1dckaBJ15Ugnpw8DkkYkNZia7a+qRB\nPX7Ev9yOAuluWWCMkFRKQ880PPzkHLmLmuHBIaDsUvRWe4cP4wWLb82N4Ub3\nDk+e\r\n=GQPI\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button/styles\";\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.**\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n**Note: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.**\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button--icon-leading` | Optional. Styles a button with a leading icon.\n`mdc-button--icon-trailing` | Optional. Styles a button with a trailing icon.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n\n**Note: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommend always including it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color-or-map)` | If a color is passed, sets the default container fill color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`icon-color($color-or-map)` | If a color is passed, sets the default icon color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`ink-color($color-or-map)` | If a color is passed, sets the default ink color to the given color, and sets the icon color to the given color unless `icon-color` is also used. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color-or-map)` | If a color is passed, sets the default outline color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web 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/density":"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/button_12.0.0-canary.d0f9f3f2e.0_1625270429996_0.939778903996314","host":"s3://npm-registry-packages"}},"12.0.0-canary.adeac0549.0":{"name":"@material/button","version":"12.0.0-canary.adeac0549.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"e648ffc69d49f4194c4745ae457b02f6536bd63d","tarball":"https://registry.npmjs.org/@material/button/-/button-12.0.0-canary.adeac0549.0.tgz","fileCount":40,"integrity":"sha512-Ur1I4MGoESa1+R8AM66L7qPJHT2dGDYUyK7DcgBeQfFwXSN2yR/s0kbla4xpYhcZKJZNe3/IJJWH4Y2Cwp9KmQ==","signatures":[{"sig":"MEYCIQDULDW32MO3GhHActF1rtp+nLmarpF4RNuRhVue6ZBwaAIhAIT0Xbhse00rtANljJIvDit9bUuJWYAK66aDfOvC8lmf","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":532724,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg5xU2CRA9TVsSAnZWagAAOT8P/j9mFvcgDRDO4DxbRDWm\nBiN3Q2EYyqLKaHHnSMIfjTJZkORwrJ/b5d6rAn9O3Ma+ELV0W+hhWL4NLv71\nRy6Hzo+ZvRjRppMyHEz724c3VJtFowJaEHoSI8S18N+2Fow0YKFlm6P06gy8\nu+YUZ5vX+MLeVDE3qZZcoY9pf2QOptJX0KCpzNjwsepEvWUBUHOHuoJYL88r\n1am1A22eeWebBttQUxPZ0tTPAUEMg+b+Xm6aUNHBdDBUoqmeUIJ9OInue78o\nDlHIxEvoYaAQsBtL/zVG1RBPkaaycXwEokW+GdrWENSLslvHlxpzQ33gDYHe\nad8ffROrtHfHz8AGwCQKhje5/DQ4nGAdjXjtHa930S7bukWPkGpXgLdgoYON\nfIhSz3s0FEkdOwVGDo9r+zu8ZjtscoeD2I5GeUWlGtSOP5oqgM69BzjmwBTR\n6ePG0IH++R/SeAk97cwsVSbvjJQW5nCRI7BAx9g7UJnwfjTLjF8Ysly4OdM5\nAbgcmH+BzCxFDcdyWvc8+04QNgg7scy/UsCTtUEomFhdSC6D1LghaMFTlUte\nFYdN8Pu9h0eS5UG0joLaDqmDtC99lmX2ALhuRVhKfo5SXBxXatKC+jj3jDs6\naSiFTbCd1Bnue96iDCOix1TSBdj6O/vgEyF0U8Kmgf7JbR+7PrCTuO1/y4qt\nP4jA\r\n=D4eh\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button/styles\";\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.**\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n**Note: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.**\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button--icon-leading` | Optional. Styles a button with a leading icon.\n`mdc-button--icon-trailing` | Optional. Styles a button with a trailing icon.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n\n**Note: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommend always including it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color-or-map)` | If a color is passed, sets the default container fill color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`icon-color($color-or-map)` | If a color is passed, sets the default icon color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`ink-color($color-or-map)` | If a color is passed, sets the default ink color to the given color, and sets the icon color to the given color unless `icon-color` is also used. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color-or-map)` | If a color is passed, sets the default outline color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web 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/density":"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/button_12.0.0-canary.adeac0549.0_1625756982096_0.5895022649828117","host":"s3://npm-registry-packages"}},"12.0.0-canary.068fd5028.0":{"name":"@material/button","version":"12.0.0-canary.068fd5028.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"dea53b2914e4bd48c94fd8d6c3915c377ff6a326","tarball":"https://registry.npmjs.org/@material/button/-/button-12.0.0-canary.068fd5028.0.tgz","fileCount":40,"integrity":"sha512-yCQoyeFi+mLeloROu3g9j0PThRZeuk9bB21l5B/3mlFc3q2OM5ah33p72xnZyCsyyC8QaUTztGt+/umgic+OJA==","signatures":[{"sig":"MEQCIG7FW423YBsvQVpRkFHYhZgyt/SGT7llWXqg7R7vRgk9AiB8hKcUMSZicXhif+J+pPXXhseRH/Gx+y8F17cEqsu1RA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":543947,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg50wpCRA9TVsSAnZWagAAYTwP/2DFi7AobBS7yKt5lmQi\ngeJJ/vVJa7xCh/vv+9TAedBUdmyiTIjRuU8h7PaXlI9x8crIQAwU134HA49x\nRNF8Lfy2n9gv7G9JZSRsGnDZI70FGVRjXKAo8JxmAcHHr6X4L1PV+a7U6UDW\nvKFqmPOuBayPhQdFqe8OJ3exzSA3sUuz8JFs/ppGCrBP/1VSPvPrDTy3G8Ps\nJDwvpQ1m7qdG+hUsMJL4XNdYkurg5gtqV2SOLhNoT4TB/RQCAcIOz9EGIFxn\nz+gigFzkBLduSLPmW/GFI5DCFl5JtY18FdNwL1mo6YslCAJSQB5hohfxGuWq\nvLYlPIxWTmhry6NhtxL/KknCIoG5PK8QZNXtn+c82cgvaMwH9WreU9ZG9LyR\n6VNOsFzA/KZrvEDXfgYvwPCZbau7RA61StZzk7BY/M7odGM6mAS29U312LN4\ngdNsE0g0CPXjK97+iD9oOr2BBT8a/m+9l7nqm/vsj3i6CFrkxmxnoabX+GO0\n+BWQsTxgJeWCWhr/3WfnE0clL5F7oKIoY39/Kx3hZp3eHMEaG5cFQj2nBVu+\nxA6DMEBROPTaot6o4mIkNl56Ok3VmW+V90hr5XhqYQBhpxUo2f/0Nd7w8s/S\nTL2bDpZpTrNkcCKeeuPePMR6F3SAMfZ/cUDqt6hTdk2gD/0sRvdd6Ld/i39+\n+jxz\r\n=FtV/\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button/styles\";\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.**\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n**Note: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.**\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button--icon-leading` | Optional. Styles a button with a leading icon.\n`mdc-button--icon-trailing` | Optional. Styles a button with a trailing icon.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n\n**Note: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommend always including it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color-or-map)` | If a color is passed, sets the default container fill color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`icon-color($color-or-map)` | If a color is passed, sets the default icon color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`ink-color($color-or-map)` | If a color is passed, sets the default ink color to the given color, and sets the icon color to the given color unless `icon-color` is also used. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color-or-map)` | If a color is passed, sets the default outline color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web 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/density":"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/button_12.0.0-canary.068fd5028.0_1625771048715_0.20361883403217784","host":"s3://npm-registry-packages"}},"12.0.0-canary.5dfec7a14.0":{"name":"@material/button","version":"12.0.0-canary.5dfec7a14.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"19874e985e04384aa1d881c004898884b4b3009c","tarball":"https://registry.npmjs.org/@material/button/-/button-12.0.0-canary.5dfec7a14.0.tgz","fileCount":40,"integrity":"sha512-FgNdyLwDVregJ1QkcSLRZPBSL4hKvmk8uIA8PlMZgF4T8Fz+I+GSjBSGy7faMZJYFk3pAkihwvMOMRVk5vdEyQ==","signatures":[{"sig":"MEUCIQDgJVs+41gV+fot/hmOFkPjPoLiaXLAdfrfqG1aBFBCOQIgBn59+ThCxV2l/RfW4BQNeJ/NlS1ME0HM3c1+Pu2O+ZI=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":545991,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg7KBWCRA9TVsSAnZWagAA5l0QAJTPAk8VBDB2H5kYjx0X\nd84pLCZjaKdeNrO2URVoC4y43FP+VoZCrFfM/FQHPSE9YkSL2KBXo8XWrLtQ\nxOBGCj0TWQUm/02eS+ex8GMQ4UtmMd/CMF1tw1O/Uw6ho0m5FUnUCp0hHAPZ\nl6GX7TIRzp/yv3ZyzE2DpdeI2NJj/5VP+q40POps0LzVOjF7rz3Ek1r0KbBj\nya7a9PPCkoWD15v8X5JqXbC6k8ZhAxnQWsnugNwP5RxuJ3grThuut13mRAwG\nlB2VWqIZKmnsr2krsESe/8AMvGqfoz9B7C7RQIEWK3L0Fn0CRVVtVcGf4ETq\nKPlfzHb08HkQbi8AHNeSqyNBHqELTQkhEPOwyGxV0JHeWxvMdfsn/NCojmLn\nNAP/wrDqSCQuzh6syo7lXQQ0p5akFwMFsm2Tj1eJRmZjbWxcC+qdrlPO6okp\nKsesnUuDCR+nFRd0YcT9dzTPUueBJeqrciy2LgbII9qK6NdY3IGWmfDZ+oKO\nAQbDVaoJBM+4cD5Q2hvQhUAJLnWLX32V9M7PFOxwyaCgebxF9VH6hGDv5Rp5\nkM00xH0FokIz5NoAC2/Uf+FAl2qpabEW2gBRU8tNlQD6Vln2JlqNMe/23jVV\nbWvB8zQ4+8WaNoq7bGLYHrpcoCrKC/smvfED6HT+K4UmH/aOnVYTUfhM9ySp\nyRd3\r\n=Zd06\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button/styles\";\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.**\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n**Note: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.**\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button--icon-leading` | Optional. Styles a button with a leading icon.\n`mdc-button--icon-trailing` | Optional. Styles a button with a trailing icon.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n\n**Note: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommend always including it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color-or-map)` | If a color is passed, sets the default container fill color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`icon-color($color-or-map)` | If a color is passed, sets the default icon color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`ink-color($color-or-map)` | If a color is passed, sets the default ink color to the given color, and sets the icon color to the given color unless `icon-color` is also used. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color-or-map)` | If a color is passed, sets the default outline color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web 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/density":"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/button_12.0.0-canary.5dfec7a14.0_1626120278493_0.7575296543558356","host":"s3://npm-registry-packages"}},"12.0.0-canary.07a73750c.0":{"name":"@material/button","version":"12.0.0-canary.07a73750c.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"1fc6ce1081362058e24cebdc1ed339081eb605ce","tarball":"https://registry.npmjs.org/@material/button/-/button-12.0.0-canary.07a73750c.0.tgz","fileCount":40,"integrity":"sha512-nqR4Hg2G1E+8sTVqr4R2qPinXUG+iKnf0B4lBvG+db+G83kSAO7cWcz27QybLzyB9NFgmHmkB13Y/ElxbWwGEw==","signatures":[{"sig":"MEYCIQCeNMRN8MsMNcLrlH5TNn3ajJYbO8RCHVVu+3wIA7ZVhQIhAKfamrwX9eyv7MF3NAdkG2KeKa2ukz/6cInwSbCL/XG3","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":546763,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg7KVWCRA9TVsSAnZWagAA/EgP/3nbFbN47aw0mxE8n4m7\nbMy8DkJUhdwE6b5rbtYId+o12J2Bh7qqIn7bY11LZLNznI/UGujvL7bcWFeO\nJImhOBa9uidHm/MzhisaFkQACG40Wo9vuKLPHqVdD2eb8jxTQugK2+kVgoA1\naRrMeKbyJRhMtHyRPphpBANzd5veWkEdcxjuC86PA1umEdr16tnHAUQR14II\nDH+Kka/AuahSwfsGvZkQFYYBjlz5DqgLmIMf+3oLfoofGRdqMMHwOTM9a41S\ntIrpZ4VoTLvi/kerkzuNG631E42w/9f9ycMfOlnFaqVMpsreFwud87MBL2wy\nS+JTOQx0lFZupCl6H+GJydGdNX1xe9Zn5/9dkqDVOW6wVNtlGhDVZTJD2y62\ntSPyuWlfeqlrlkj2EpD+pR1KNduC7DD0aSk4x/dPD8Ev3cl/EKVqgjXSzjjQ\nBrWwzhS+mJ6CyKbb3gt8U8nc/wkE3ZVPA8yn/RNVBBhft8LA+z975Sd9QX0I\nGS+5v5zhs5NbOuqPwA28uTx6w4VBTOMKJfaSxGeolCeZCb3oKJm2vdmbt3X9\nbBqHE/sa92fJK1FDarP+irg4vko0VMAafwS6AKa1d/MhpcB4dtxyQgrgsS9K\nWcLPDdR5mH45E2LUy36v2H7tMczyd0IcnAOuoDEu4FEwYAgTShPnbRXC17Ff\nOfVl\r\n=xvc1\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button/styles\";\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.**\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n**Note: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.**\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button--icon-leading` | Optional. Styles a button with a leading icon.\n`mdc-button--icon-trailing` | Optional. Styles a button with a trailing icon.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n\n**Note: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommend always including it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color-or-map)` | If a color is passed, sets the default container fill color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`icon-color($color-or-map)` | If a color is passed, sets the default icon color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`ink-color($color-or-map)` | If a color is passed, sets the default ink color to the given color, and sets the icon color to the given color unless `icon-color` is also used. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color-or-map)` | If a color is passed, sets the default outline color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web 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/density":"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/button_12.0.0-canary.07a73750c.0_1626121557660_0.17362339552966244","host":"s3://npm-registry-packages"}},"12.0.0-canary.3e4c6dca1.0":{"name":"@material/button","version":"12.0.0-canary.3e4c6dca1.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"8610658e9f5ee28877750b1d91a00efc19289e54","tarball":"https://registry.npmjs.org/@material/button/-/button-12.0.0-canary.3e4c6dca1.0.tgz","fileCount":40,"integrity":"sha512-GOWmRsz8lC/ilvrgN5jgFYFXRsknmKzP2DEqImEBM69jVG9Zlgq/LNiyQm19EFAvPz3+x/kPqKhDa1f/GnFtoQ==","signatures":[{"sig":"MEUCICwPqMoaCXN6BL00gT5VeSzrzdgz8yL0CXcKe4Psse10AiEAknlghx2v3OMF58ibKjjrObQ8zHdR58wE6bcMAcfqOPI=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":546763,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg7PGzCRA9TVsSAnZWagAAvxQP/168AZFJJrzRcfohmrkd\nnGw5aySNvitgumeP17LH9k1N3yb8enOJcEDqYphzU5Lm++VJGRixhtqeHuIz\nH7cqXmFsWd7ihgjIotB7DjsqgaLDWIHOzyPV2Ey9ZiYd2NR08OdzT4Ktyztr\nz+Vu3WIuqfzi49ugoo/T0LSXzvdB/oe1S9UKEqzoNyAYavYVcbzJ8+G+YC5B\nNlaChUYYcq2/yOOESGvBi2UbTMV/5Q5TaZgLFFz5WGZ0qtJVQV37q6xi7Die\nFXNXp6dVPgsmdL+BWoeDPL3ZClRVYhodFeGMJh2t8elLp+TCoL2gAhnVAL23\ngFvFY8uloC38bklSLUGMfUv8ZiZMCfjwYPaG5N3clDRg5EiSq+sTntlBvNRw\ncB7PbUXhiDJfXEYPZjEyeb7g81bLQNka8GXknPM55uee5UOXrLCeFa7E0imn\nNsiw7MsALC6e0CdcfqpIdPaY+YE1la5vBs4kopoX4+fRj72FtwmFGpe8bJ9+\nD/todenjvImWidtuczMMsyRvPMh2XrKd5rG8FUVXHfxSRiezCDQxdXL7RSHe\nbJQ0h4WN4oTEWZP5DIPRn5cO6KVeT9YhG6URoX7sVji4S48t4Tm26kAjJRRs\nKR8LAdZ3+x1IQSvDfAY5u4yL+B+ZDZI/liWVUMcmNmwYh7Ii9oLXYGK/StBC\nENXm\r\n=McFO\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button/styles\";\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.**\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n**Note: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.**\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button--icon-leading` | Optional. Styles a button with a leading icon.\n`mdc-button--icon-trailing` | Optional. Styles a button with a trailing icon.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n\n**Note: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommend always including it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color-or-map)` | If a color is passed, sets the default container fill color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`icon-color($color-or-map)` | If a color is passed, sets the default icon color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`ink-color($color-or-map)` | If a color is passed, sets the default ink color to the given color, and sets the icon color to the given color unless `icon-color` is also used. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color-or-map)` | If a color is passed, sets the default outline color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web 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/density":"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/button_12.0.0-canary.3e4c6dca1.0_1626141107378_0.45868448409301177","host":"s3://npm-registry-packages"}},"12.0.0-canary.ea77795b1.0":{"name":"@material/button","version":"12.0.0-canary.ea77795b1.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"7a601ab2ec818b3d1849a272ff7d427c563c5daf","tarball":"https://registry.npmjs.org/@material/button/-/button-12.0.0-canary.ea77795b1.0.tgz","fileCount":40,"integrity":"sha512-mVke1nQjJBcA7uLJWE4aXwza92mh5smraTcNhItULHRtS9a6FJSf2vnr6FO8zJl0VKmaauYMMeXBEpIXGT7veA==","signatures":[{"sig":"MEUCIQC4vK9gh64ZY/HM6Yd3m793IKlPYU9pXkPldrbg04/KhAIgP6wdeInlZqUdh6zwUT3p0RGIXcDjuKB1tFipyvLOdYs=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":546763,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg7bYdCRA9TVsSAnZWagAA5VEP/0AfuG95vxMF9e6gWEit\nIBykCbSBA1HiF1528PNVNOGk9PpbA+bHl8q+ywzANixEtB7Pc9TzTrRYeYC4\ntYZQz6ACarxHbdzNtTa2byNszRrx6Ho9trFf5JsRHd6cn7ZqbCS28x2VSlG3\neHZNbHfYW85S0Nc/PU6S8fgupznKufO+iY+gU6TBYQ4my+FBeaGJAjbRCvJq\nMNIEc3GYX1irpMqrJBK5zTiFo7otxY2mY73J0QXzNjB6ZChYYbYmAGX7+RSh\nWDChtTy1yCFpK8lrz93cQRFxOx7qvLq9ZyflM4Lodhdi/AtOtx6cYsP8lReJ\n9Q00bZ4xH0s973XOAdFoHk6+bkYGZ0e5ZIxFpiJgDAk4NVi1Bud6B234wMIJ\ntmOMWPFAVLsRM8iJJgaDYnD0Prt/AA5bFLsm0p4JXBgh04N4wKAhs7bCvd2P\nnTbmIARwNpNLZVHAo9qN3vIA+vhN8h6kgb0oLZRNwTztJ9Y9cAVpugcvxEDf\nSlEwXCMdcTZRhLs0Yf2nSw59FiVBGj/6UEPGECtNOYWRtXScc2qCSpRkhWk1\nRD2RNPsU44LWGfXIvT63InLTkJWoGO2DAXJSGE+lbZBPlGfwHu42D8IcWbGa\naVzmXKEIKKmt5Kg0zqONMy848EVRMTSMVpf9wAddgM8PDkwgmhdTWLaPcG5x\nn230\r\n=HJqL\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button/styles\";\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.**\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n**Note: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.**\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button--icon-leading` | Optional. Styles a button with a leading icon.\n`mdc-button--icon-trailing` | Optional. Styles a button with a trailing icon.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n\n**Note: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommend always including it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color-or-map)` | If a color is passed, sets the default container fill color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`icon-color($color-or-map)` | If a color is passed, sets the default icon color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`ink-color($color-or-map)` | If a color is passed, sets the default ink color to the given color, and sets the icon color to the given color unless `icon-color` is also used. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color-or-map)` | If a color is passed, sets the default outline color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web 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/density":"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/button_12.0.0-canary.ea77795b1.0_1626191388748_0.19046781232465748","host":"s3://npm-registry-packages"}},"12.0.0-canary.15a179fad.0":{"name":"@material/button","version":"12.0.0-canary.15a179fad.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"f35823e2c74d59b3355b66c284aa7421016e006e","tarball":"https://registry.npmjs.org/@material/button/-/button-12.0.0-canary.15a179fad.0.tgz","fileCount":40,"integrity":"sha512-giWgY7fbg8liZdFgZeA7mTlXL6p6ckRfHpEnKE+KdSEjoXTHMelADjHbG2Y2qtwaopp+V4cWIkvGRPlBB4nb8g==","signatures":[{"sig":"MEQCICxri6sE9VAtU0QfODqk/fT+53f4JK9meJJ5ESSRpSiKAiANg//gREAIkRbLr9wFpBbT/5lji9gXfJtL7qgTnCT6tA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":546763,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg7dbxCRA9TVsSAnZWagAAQqgP/jeFKKOWOW2oahQjprH5\nu4RV98nfUxLTY11Dx5wEaRrpavWPkGTgSx9eQF8XXvFW0o3myixTv3Z8Z0nR\nYXohmzmDAzBRjghJ7ryoA5FLMLvrTfg+Q/Wjh4AcYuK4ku3hEHRbYPSkCEub\nkiqWtc0BJMOouHMHDgJC8GMo4evROzLEx4cuHkTSapseoEV1bBvCPKo+Kg4G\n/Lf5F+Pzrl8YW3dEmCNm0I5nOOtQmm07YjRg5xWLlBjBz7VA+9FNi2A7tid9\na0comgIhLzKf2Gn1ap8z5ZXpsa9N1/jxR+pZBInuFqmvlXl258bhcIMZslkA\nPNS/H/XqyfpXhU8+DmNKoc2b/5Q+YoYDCkzuzeAkttkF07SpVMyjdIsidZly\n1BLQzwbNtqy/t0aK6Hb232+pz/SnSO1QXiLhCudXsjQEdDdFTmoTVhrB7OoI\nLzHuqTYMb+I7ofLZcTr73BUR/37JkEMZ//+SaBvxpHl5IsFiCPXXBPGfHdB1\nA06fT9CnAM3Zdyl15rosiD4VLcn/89AlbvIAwmSajI19Y7TZrGap0JYSpI9H\n48UlIZ7vI4sHNfT05YPtMA1q6/6D2j84QjxPziDE4nqcUR3fw74m2qOAJyGn\nlwDxIAVKQ/PkL/p5+SEEFrzr6HxofvLJqx9GcCh4MGa95Rd7xmdkFr8YUofx\nr2Xe\r\n=X+vk\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button/styles\";\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.**\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n**Note: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.**\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button--icon-leading` | Optional. Styles a button with a leading icon.\n`mdc-button--icon-trailing` | Optional. Styles a button with a trailing icon.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n\n**Note: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommend always including it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color-or-map)` | If a color is passed, sets the default container fill color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`icon-color($color-or-map)` | If a color is passed, sets the default icon color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`ink-color($color-or-map)` | If a color is passed, sets the default ink color to the given color, and sets the icon color to the given color unless `icon-color` is also used. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color-or-map)` | If a color is passed, sets the default outline color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web 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/density":"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/button_12.0.0-canary.15a179fad.0_1626199792993_0.5096068083051257","host":"s3://npm-registry-packages"}},"12.0.0-canary.c73142a1b.0":{"name":"@material/button","version":"12.0.0-canary.c73142a1b.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"088eaf952bd92778194a217d8b9383b6aaa8cd03","tarball":"https://registry.npmjs.org/@material/button/-/button-12.0.0-canary.c73142a1b.0.tgz","fileCount":40,"integrity":"sha512-dJRzhjnK2KD/7W0Qb3zLK2syiMJ8cRtKKQIuGv/GWcaKLk6RSeBG6R4VEsmIz7RcOw5KkzlUAqk1JZ39cV3EGg==","signatures":[{"sig":"MEYCIQDoPt7vHZQKRmVderb7s82G8tVevvmZm1ciURECjwszwgIhAJNMECbSjuOUFJuTMTJ7wrRpiWjBVQoEtpnZuOJfvuoE","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":546653,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg7d8ZCRA9TVsSAnZWagAAh70P/A786EOjpo0VA5eQzY8k\n8kKlt4P82qbnKBSU7ly9Azd1fpdxyjmdBpr8GM4kf9HLsaESXMgBTL0lKrIe\nORuHi2y8yULOiA12CNEWeQhix8dOLeVh8PmupYxLqw7wmJvIiRkoJftFQYbc\nYSMbFTK/5dMAfMwgJ+GiOXYqmmH8lhUnXwIuoVHDZmtA81LPF5XH5Hen25xM\nkBSh4KaI3AKCeCVtYMCHGzLq5NfQh2YzkTdl1FVg4G1BUsTCCwuCixCF2fiA\n1p56RZj2flRgHa/Nqx9f4MkmkaGoq20MR4ZczEAyDkUz5SvDzvmLdid6s3ce\nOcG7jGdcOfujTkjhTbvl785IUXc/AHaa0kMJeXEKdWk11actenbx2OuLFyIx\nzE7Bwmls5Xyn2nKMU9MLhVn0oBZSVxGNAzHBhHbb48ESgLTlFh6apOlivgbT\noLPWcAvYMm2LU6VSbxFivyE9KNgOiEUTP2ZvNuW0i9iT18GnNzsFq6h20f1R\n6DyvU61tYfjZbVYP7kz1MxEt6+JbZeLEur2If2s10pfub/CzAa8tryNTeHrV\neCKtNvupl9Ba64YSS8Z4IpF3XhK9eelUCKx8nku/KLac6NYhjaaJ2GUmL1rr\nUT/5cloL/MGaDw6mrGwT9E3TlJMgdQz8bmeqQSyu4X4KrNUJITQYcDEil3NZ\nIj/v\r\n=t/Du\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button/styles\";\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.**\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n**Note: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.**\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button--icon-leading` | Optional. Styles a button with a leading icon.\n`mdc-button--icon-trailing` | Optional. Styles a button with a trailing icon.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n\n**Note: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommend always including it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color-or-map)` | If a color is passed, sets the default container fill color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`icon-color($color-or-map)` | If a color is passed, sets the default icon color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`ink-color($color-or-map)` | If a color is passed, sets the default ink color to the given color, and sets the icon color to the given color unless `icon-color` is also used. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color-or-map)` | If a color is passed, sets the default outline color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web 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/density":"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/button_12.0.0-canary.c73142a1b.0_1626201881381_0.9040773510449054","host":"s3://npm-registry-packages"}},"12.0.0-canary.d923db73a.0":{"name":"@material/button","version":"12.0.0-canary.d923db73a.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"b7256118ae85bdab65041c083794b195ce9b0197","tarball":"https://registry.npmjs.org/@material/button/-/button-12.0.0-canary.d923db73a.0.tgz","fileCount":40,"integrity":"sha512-LgJ2+eOW2OoDIgZM2SQunp9LmBUMWZf79Ur6gmjn+b6gwuJ58aatOZtEdtcjsh7U7MCnySB9oE6vcBdZB1Nzqw==","signatures":[{"sig":"MEUCIAtxdjUc2VdQMeLU02VIvDExNkPZGkwclOhowCrXCpzfAiEA2uMJ+51io3i9gQgnuzVelEVZU2fxXI2jIeVXuYgBEAQ=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":546653,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg7f1/CRA9TVsSAnZWagAAC1EP/R4prlhCakq013rtDOu+\nQxcG0DG90lol3/P/QpvkZ3FvxmOv5YWT9rFTH04fjsj53XL6SIPkoIQHT5vZ\nHJTKxc818dD7Zr5cgrtcNKyNeBNSGIokX6wXlIbKIMP+dfANTIhn1y0h8Npt\n0F+tNCWu/c3k11JCHp8xqYaHHwYC/ixUY+Vytr7hzy0cPVZMILczhOapH2rY\n8yZrsZUhgDJaTzWtXfkqKERyLwBOPOq22lIZVByy06Sh/UnpByDwETV+Fl7E\nNsaY1tHw3QJEtX6YYIiWcFsM0NBeVTlQqnoswdoRTPtD6jL/PRwgUktkfR9p\ne+YELJt5f4Dk2ClehBpSqToVtcMELFHxMd+FDCBsXW6XLCmdF/+5zUaKZ1Dh\nK+tRjAeKW3jexSorTJpKRoQZv8NtThepUBF3PT5ToaBoHICjw/BQppwM4m8F\ng6Zoo2bdKyLzUEOrRsXzNGkugJTxnLtCSIOozZcyjy5zkDbRyqqltYk/3xCD\n2Ey5VA8jnJqKrhP6iKz0kbwsy9Z9mBkn1X/DvK394olQ/xH2tTA0tNFdaZr2\nIWM3+bFGxhTNEKNihpRHYCq0qHGDugxUkAG1PmK172ZPcjlDmpY4CLP0Mdx9\ndnvkNrJLtOxZx0GcstswoW7kqEhsxx7QwyeQctpjnPEk8S8lnQA/dqr7ic4i\niY8j\r\n=HL/h\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button/styles\";\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.**\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n**Note: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.**\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button--icon-leading` | Optional. Styles a button with a leading icon.\n`mdc-button--icon-trailing` | Optional. Styles a button with a trailing icon.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n\n**Note: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommend always including it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color-or-map)` | If a color is passed, sets the default container fill color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`icon-color($color-or-map)` | If a color is passed, sets the default icon color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`ink-color($color-or-map)` | If a color is passed, sets the default ink color to the given color, and sets the icon color to the given color unless `icon-color` is also used. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color-or-map)` | If a color is passed, sets the default outline color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web 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/density":"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/button_12.0.0-canary.d923db73a.0_1626209662568_0.2435164144455193","host":"s3://npm-registry-packages"}},"12.0.0-canary.22d29cbb4.0":{"name":"@material/button","version":"12.0.0-canary.22d29cbb4.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"cdaa5d3a9e29ff663ecd2aef4bb221bea1c16d53","tarball":"https://registry.npmjs.org/@material/button/-/button-12.0.0-canary.22d29cbb4.0.tgz","fileCount":40,"integrity":"sha512-FV44k7WH8d0Z7TjKldEILWXG+bgVz0CplqAYiPiRoxIaGljOq/D7+enuC8tJOUst+zyihVSKyYT69ghWuOKjjg==","signatures":[{"sig":"MEYCIQCOsi1GqQWr1VAjkEqtRY3cv4byALVmqo5cCNgS6KyNlQIhALb4xw4SEMNa+pIJ0thbN6ILdMel0yr/WE+AEpCn+/SI","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":546653,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg7hjXCRA9TVsSAnZWagAAgxcQAJxyeh4M4vJo3cRkG105\nxfijF1//cV6KoBvdIWUyW4LIv9Ok6vYkdOInswxJs2/NvZtiFdU7aFXwPZ4r\nH3tf4X1gZtY1uVPeISfSbQolEcIqF/Q3gGbClWqDYN9BCBqwt42Z5FESbZOy\nlwDr0tRXoqs170+90RfG8vC7a970/L3gkiQ0BqQUNMQqdrW0H4MO/fu4kj9x\nBJZPEnjt/lWOggk07zdC7qwQ7XWPtggLGC9omaXW8UhsVFQNa/vD5JuIDAdH\ncsJMgjrdC5HQ/WU68xSRJtne0y2JG6S4hG2g4TJd/9pb4C/wAgrO/5fbamm+\n41UydpCCZEODd4yMmIdu7lL/j4hWO9LkJV1NQ+VvTBLE0wvL58SgzvY3oOsa\nY9sghNMenJCUlrFnsGA0aR2ygCJjgADAIcnweCqSnQSEHr1j99QNaV31R31Z\nOayCr1EbLNCLO/EJSQh3zY+IG6r7Y1w1fN10XmgfywbrxKsCf6l4cTCSyrcz\nUmlrrY7hvmNI+sCHVJA9bE3HOv6DiARiUfn0IjspRoreer51e/YQ26oFazKr\nb7hxtWt3tTKQ1dCQ2PUkwxNKbb1NK03lMrc+SMFg7ZhCXG/obsxd7qAzcRPj\nEIQZnPs/lGiFFRCV6K8i5tcup8oFycqz+mpEGzIAPcEn6hrmvfcVRnvBcMas\n/RaQ\r\n=axL6\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button/styles\";\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.**\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n**Note: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.**\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button--icon-leading` | Optional. Styles a button with a leading icon.\n`mdc-button--icon-trailing` | Optional. Styles a button with a trailing icon.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n\n**Note: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommend always including it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color-or-map)` | If a color is passed, sets the default container fill color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`icon-color($color-or-map)` | If a color is passed, sets the default icon color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`ink-color($color-or-map)` | If a color is passed, sets the default ink color to the given color, and sets the icon color to the given color unless `icon-color` is also used. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color-or-map)` | If a color is passed, sets the default outline color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web 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/density":"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/button_12.0.0-canary.22d29cbb4.0_1626216662950_0.4620565452574299","host":"s3://npm-registry-packages"}},"12.0.0-canary.2749604bc.0":{"name":"@material/button","version":"12.0.0-canary.2749604bc.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"bafbbd691d958fbfafa67b1adadeab89bb7d4926","tarball":"https://registry.npmjs.org/@material/button/-/button-12.0.0-canary.2749604bc.0.tgz","fileCount":40,"integrity":"sha512-QTOI4neWh18JKtSTjJvWpOT66RlC9Stbz4b+Dh/WJa1TriQkAWqf1QkAflHW197sqxbKOCGXeuHn38ZrfAKlQg==","signatures":[{"sig":"MEQCIB/PxypsRGgmucVihrjWaK/NPcH1fWL/QIO4306HvcqSAiAJnQIfZJVQ8MzO9C8NcOvTMGZQyPrEbIb1u6aqS1VHpg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":546653,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg7w9eCRA9TVsSAnZWagAAOuUP/35K9sRYAx7Yv51KCAti\nMPzeK7gjxbggRShH7F3zcPSnhPyCUTG5EWOptyGx1I4luSfxo37WwBvcuNYm\nfLUlDDMlasl37rpBWK7savprSKh2Y0t1birPPP3AqJK9id/5X3qS0F8kp/0n\nTNxpHLiKixXi1hxLpBpmRSrYIHr7x9hLwwHSXSlXOksMjqe1Fe+TyqBb4lLx\nQVLyy7kyy3S/hYJL7owVpiF2xcLZTplkKE+9IXHNRIx/zBd7KktOKW4Rc9tu\nDq/0Eoe1z/JlW64NXlM29KUxyZaKOirRG7jMtrU6dlvxqu2bV9NTBeAp+eOm\n3KOg5wNEd0oavQKyZRoXeVei0kZoRPoIeHkO5yj6qBCZIpFW4mWzHI408mtD\ndJYt+Kff6uUU3/ajwdxLVLdN7o0WkY08XLZTVYGalB4IH0SpY7skG1YqUBlZ\nr0zrWAO46ApIUMQiq6v7ks825RJ57t6Q3wxtbaAxuF37vWIlfw9KRli7IKdE\n7GiQPq99qOg1v3GLu731IYQPzHi4TkGqS5I7jvxbV2dX19iAScTD4jrx2QIr\n2WYjdIm02ZVa2MVHYb6NguhY66CbHfAHN1ZVzScJ+Q1/SeiRZgGUczP2VwQ4\nTJMb06HRKHZvjDy9C1g61ezXWkzgJoo27hdewFIzkTDzLPoK3M0BlOEh77+9\ngTzs\r\n=3nZd\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button/styles\";\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.**\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n**Note: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.**\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button--icon-leading` | Optional. Styles a button with a leading icon.\n`mdc-button--icon-trailing` | Optional. Styles a button with a trailing icon.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n\n**Note: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommend always including it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color-or-map)` | If a color is passed, sets the default container fill color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`icon-color($color-or-map)` | If a color is passed, sets the default icon color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`ink-color($color-or-map)` | If a color is passed, sets the default ink color to the given color, and sets the icon color to the given color unless `icon-color` is also used. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color-or-map)` | If a color is passed, sets the default outline color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web 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/density":"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/button_12.0.0-canary.2749604bc.0_1626279774138_0.42271918130610886","host":"s3://npm-registry-packages"}},"12.0.0-canary.e1703bed9.0":{"name":"@material/button","version":"12.0.0-canary.e1703bed9.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"a2cbad3a7ebe93d426d748da8dc186b12b973ba6","tarball":"https://registry.npmjs.org/@material/button/-/button-12.0.0-canary.e1703bed9.0.tgz","fileCount":40,"integrity":"sha512-ORGJ7y//iAtn/pk1Qg4K1KRSmagUxz0JvQkqXHmMrdDTPca9eYLb4GF5JA50EZiaDkleIQuN55vBrPEnaQFXug==","signatures":[{"sig":"MEUCIQCUXOiRZv5jDlQ3qhfCXHp4C9cuRQ8pW+mAkOIFIPUyqgIgbPheQ6uNmO9Z2kJ8OMNXCpFZbmf5WtB6yNjrGCMT3J0=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":549133,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg71uyCRA9TVsSAnZWagAAz2sP/RtbvHcIcQZFLcFzQ+jq\n1hBSTVfNWmuESjskF5i/XQfoM53IYXPXXPvby5Yfk0qoWBxMPe9QCrjjQriX\nXK1XCJgV568KpjjPErWWb1heSrgmjolkfhs9ZI2N/73SOs5+M7d+yPFre7JI\nFtqztny7clYPplgjIX40+MLRbEACmaLN0mIcFK4MWrRtIbi+reR/pGWVL9yG\nDjKodbkR5j+0ONyx4JmA7onuWFRbKECds/pnHu/+uzcUXt/IxEiqa2Pb9FvH\njgJ2g9mY+HoROaH5pWA2HmNBl6p/mOY25Ndf4ChmK35EDPvRvv2QJZHQr7QB\n4FZFB53Okz2LtC2URFCKB2ucjBPR9QszeSSPC2SqhyBi/iam4lYskca6sw+3\npWgJfq2rw4KNATAkwmni31pc+MP/arlti7buZ5olcbzVXCLUTMcSdfdydP6f\nw+0gAcA0ZRma1IkW9puJHtArZe/Zs9aXOLkkE4U14CUB2ScmIVdE8phEyAhd\nUKhvMDv3UVv5evYs1VSlpUzbAF4CY+r5WIdPU9Ik3xLXFi+ur1pR6mQKxb6L\nUy8E/eUfEI5yH5xEvAwBqZgKAWlSNnpRHdqwbYjZIj09kgBLrkidww9RDai0\njzvJLNgUTzbE3YP7tAO3D0iZzOlJIAZWHQ18sR2xiBro1EEyoDAJU9pS2BjR\nsuGu\r\n=EzaP\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button/styles\";\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.**\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n**Note: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.**\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button--icon-leading` | Optional. Styles a button with a leading icon.\n`mdc-button--icon-trailing` | Optional. Styles a button with a trailing icon.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n\n**Note: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommend always including it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color-or-map)` | If a color is passed, sets the default container fill color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`icon-color($color-or-map)` | If a color is passed, sets the default icon color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`ink-color($color-or-map)` | If a color is passed, sets the default ink color to the given color, and sets the icon color to the given color unless `icon-color` is also used. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color-or-map)` | If a color is passed, sets the default outline color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web 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/density":"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/button_12.0.0-canary.e1703bed9.0_1626299313949_0.01886355217059177","host":"s3://npm-registry-packages"}},"12.0.0-canary.de48eff0d.0":{"name":"@material/button","version":"12.0.0-canary.de48eff0d.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"ac54b6ad67f3b15767a24186ff517c27eff8e75d","tarball":"https://registry.npmjs.org/@material/button/-/button-12.0.0-canary.de48eff0d.0.tgz","fileCount":40,"integrity":"sha512-muGE6Q4yV6XYSaItG+/6xP1uIhMzMUPlg0iTu1P4JcOnOC8484qVJOZODE3/wheQ1C1FZo111cr4sYF6h2V45Q==","signatures":[{"sig":"MEQCIAHHyQAaJ1ddqhRojclI2mImcnobfXe2ORLc79F5zsbqAiANBHY8ZTCgfuyuYZi0L8BrLsrkoEwuXsujquRXP21Duw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":547499,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg8GuTCRA9TVsSAnZWagAA6AUP/2dZDua0nxZLY7Bj5314\neyipw5aiEt3KO6TatibNZogZMVgUHz/H+tshaHRALxw+f9fGYhSKCei8yVYn\nZinlTmbZMNYMPqwm+edeXFJj7m1kwF1LfnI41H2EIZOteeR88rxkJYX9OBGd\nUoQPO2/IoNJswpo9gx8AadW/eR8FprJQ6p5KSku68Aw+jB6wxsMEu5Ojw8bG\nBSnCYVJiNYmi2n0tODjjXpmfnNPKYLnYZQ3rxyEwzuN39M71J+Alw0MxQZz8\ngNuKdHN/mtZQ03ecIReQNe0g76kaQBmNu3J3LTK1RMZtcQFu6S+Vb/He16fu\nP99LOdGxd6BgRhrLS1C+fUVx9TvoBIFCQygsv0qWTop9lezYRPKGGCAvoOjL\n6PAZFU4r14bjMEuDeq2T8+Pu4Z8rmfkBlrYTtQ2m334OlygjVnxeuoLpjdHz\nszzSuxGkw4Lh7BboYfzEOmQVJzriLGkTqSbijtmeM85lHvg4A8f2Qylo2G69\nnGcnyC4cqk2rqtyzwTwqlCknuOxo3iZ+Bt9dciA0AP+4Lf9pkrTEvgmxJKWf\njrVeVIiYaNGSnZ4FqObMYyf0HM1bqY9uebDHrcP2+Vj+Nm3qytNKv7fZPV/A\nuTMys4rqvhtKrjH4utqCMiII045pmm2RflrpFZ82mygiZb1Y9R8gNgPu6jDi\neJcW\r\n=hj1g\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button/styles\";\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.**\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n**Note: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.**\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button--icon-leading` | Optional. Styles a button with a leading icon.\n`mdc-button--icon-trailing` | Optional. Styles a button with a trailing icon.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n\n**Note: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommend always including it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color-or-map)` | If a color is passed, sets the default container fill color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`icon-color($color-or-map)` | If a color is passed, sets the default icon color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`ink-color($color-or-map)` | If a color is passed, sets the default ink color to the given color, and sets the icon color to the given color unless `icon-color` is also used. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color-or-map)` | If a color is passed, sets the default outline color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web 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/density":"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/button_12.0.0-canary.de48eff0d.0_1626368915314_0.09981480676690513","host":"s3://npm-registry-packages"}},"12.0.0-canary.4f060adc5.0":{"name":"@material/button","version":"12.0.0-canary.4f060adc5.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"6c25c660630d3c3c5b9be04761d8d679d3878ec7","tarball":"https://registry.npmjs.org/@material/button/-/button-12.0.0-canary.4f060adc5.0.tgz","fileCount":40,"integrity":"sha512-tA3Daf/4Ghxr1OGR+PnsyfHsHjmSi0XnpxGw/n+EHcNJww5ZAPPQoJg+UJsLkgpdzxE30GYeoK0mPZoD+jP8ZQ==","signatures":[{"sig":"MEQCIHu6w9htZwtZ4mLyqX+mgvncryA4TMDUtLA9EvzDujQBAiBzhn9D/DtMInoQbz7htH753m/MXuaci6rMjqkQHJN70A==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":547515,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg8IruCRA9TVsSAnZWagAAzb4P/2tqxpJ9jbDAqSFr8fAR\nytdYoD3csL0Np+x4eFdEHjfiefUTk9lWCZ9nPyIKkWWpgFoIWcs57pQbXgMa\nGBtgtRC4ZuFqjMw3vDfsdpMOP2bGirPdePWMEZ4uO7RWoIKaYqj4YOXISY5t\nR9iEru09e9aC4WZQR+HBi9TxmC5httBknOsfuB2gOC6nO2lN0MKB1r40pd8r\nqD9y48bHcrArG5FaiwN9jU+Q0qbY3BNv0NaMSS7D1ZdlF9skVxIaPzaam9a8\nuKr9wduVKfIxEKwXVA11iqrhrjhxkUd0wgkYFIbE+J28HmHTMXfUkkCw2dnI\nifMyB3H7Bgy0nc3o6g7AhRZDmy4REVRT6EAy4zoxeisj9UrjM5ToCmTx3Zn8\n9zxrvvK0eD6O3FsC1he8mHZrflzSLjIo8ZpMmw55py9YGiN8ulgRaS32gPMq\n66H7tjFJP1OlWIz+LftSpvGCMezDlfNSCdreNOmD+VmyNlYWT/U3W3e2f6bo\n1WzbNfCkOdxyoXNo9OBAnUuDjhuDJl5pWfCcXpYGOFPJ9GZAROAMhKmA9nuH\n2BvmV92qDzISxJ9VH552OFOlstJanYWSYvRr+seK326IqsRE/TS7hyXGqJLr\nVKtKIJD7dQ5NFgP5ztB9XZyhHV+RKrwww0625qmoR8IORo167JLm2V+2Modt\neeQj\r\n=RU1G\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button/styles\";\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.**\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n**Note: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.**\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button--icon-leading` | Optional. Styles a button with a leading icon.\n`mdc-button--icon-trailing` | Optional. Styles a button with a trailing icon.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n\n**Note: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommend always including it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color-or-map)` | If a color is passed, sets the default container fill color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`icon-color($color-or-map)` | If a color is passed, sets the default icon color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`ink-color($color-or-map)` | If a color is passed, sets the default ink color to the given color, and sets the icon color to the given color unless `icon-color` is also used. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color-or-map)` | If a color is passed, sets the default outline color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web 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/density":"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/button_12.0.0-canary.4f060adc5.0_1626376942219_0.824609649066925","host":"s3://npm-registry-packages"}},"12.0.0-canary.bd25779b2.0":{"name":"@material/button","version":"12.0.0-canary.bd25779b2.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"e15a1d5342a08e553ed8ac2302a1458e70961e18","tarball":"https://registry.npmjs.org/@material/button/-/button-12.0.0-canary.bd25779b2.0.tgz","fileCount":40,"integrity":"sha512-3L7PQNZCMJYuBXgVkDU40S5W2RHBdvHArpey1ik8bygAdgjs523xorWqJkZKzMbDdlxyFcqcZrI+kloV78ND8Q==","signatures":[{"sig":"MEUCIHRmujEAxgN7x6cOgRYzjX2l0HMGIkAXQ7HABh/7CWsZAiEA+0j3DxV/LBoprdFHtTWoEgsWID+PnXoj6wCcQgTc4co=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":547515,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg8J3HCRA9TVsSAnZWagAAPP4P/3x1uDSt8aBze4YFCtt7\n67hILUfPlsrve4isdv0nCsK30B70LSz8tKuAR/vGDcbX1k9O1CfhyDm3j/LU\nawSU34CC4d1vGee4IGmhmum4O3/MTgk0v1ZvcvvnCmvUYc8cQE+T3pd3VsL0\nPOYFxKRhBcLO5gzXs8CmDAzNTGI4SvbzpMB/vt8a2xbOsbVCW2n6a4z5LMON\noO5qvgJQnvPBIios8l/5q1+hCt985+GWJntnuxTlZRLJ3XRNQcDt/gCG2y22\n4Q8pDz4Bq3Gqni5y2u9dDtrNWSQBiK/20SQ1bKTcWIfm97AZ2BUZqdEDh6BH\nrQkUwZhAGiQd72w2FBFfGz2mgqXBVHTSpnQoUQDw7GJeVQZDQw5gn8yqgYu0\nX9Q4tJSEGm/12AWbiFXn+YLf89Wmpm/fO/XxpoPpe1JF8sHO4aAYatkSuzi0\nf8fEi4GiEBEJZRykBaeQ1ewXs9k6QPHkoKqnw0EcpqmmVFfYDD1p9ApS2+hJ\n6AnzYU8piZJbNOHOX47BINnP3ErK1Hot+PtzMjQRESQ3hkXjOgVxa+q+vIKi\nIKqV9WWgZgHn9pnB1DhwW4B585C6SDPfFkcXyYf5WbPCp6wz2loapLRrD1/c\n1jyk4b367l5ylM81X+pIlUziWiQKWcmumGuio34KtmVtxNtNBskAsgiOZHX7\n5Lat\r\n=etpA\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button/styles\";\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.**\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n**Note: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.**\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button--icon-leading` | Optional. Styles a button with a leading icon.\n`mdc-button--icon-trailing` | Optional. Styles a button with a trailing icon.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n\n**Note: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommend always including it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color-or-map)` | If a color is passed, sets the default container fill color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`icon-color($color-or-map)` | If a color is passed, sets the default icon color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`ink-color($color-or-map)` | If a color is passed, sets the default ink color to the given color, and sets the icon color to the given color unless `icon-color` is also used. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color-or-map)` | If a color is passed, sets the default outline color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web 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/density":"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/button_12.0.0-canary.bd25779b2.0_1626381767320_0.040848660438550066","host":"s3://npm-registry-packages"}},"12.0.0-canary.9f68a932e.0":{"name":"@material/button","version":"12.0.0-canary.9f68a932e.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"63db3be50ae91c7e7169981fd9b747306d96d262","tarball":"https://registry.npmjs.org/@material/button/-/button-12.0.0-canary.9f68a932e.0.tgz","fileCount":40,"integrity":"sha512-dFnMmapqE/E5UqGJrcBCGtlBJvN+sH+75htvQ60Ov19gcRhkXszQITOC7maQNuh6fdt8FZRuZxZ9Ie5aVkVrjA==","signatures":[{"sig":"MEUCIBR4wCgR2Qlj9UsDHG/EDTEu/T6pkNiayCn98hViKuScAiEAgiQRdYlHp6quOVwzagbt+d9TaGaGhMvFUWy7b0f43+o=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":547515,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg8LGqCRA9TVsSAnZWagAAks0P/1L4VnIePk5orSSbmkaG\ny+6kQssgL0yZlC5VXAplmqbuG3IvfrS4KPeFEozTSNUjPCJPCLtHD6y5jCWO\nkif9gHvJnlcqhHsBM5iSvlCkWKw6csw+C+1AIKIIQsYbZEdi3VVc7xosZ4tW\nKJee8t4FwWTeACuk937aEJkh9w6/sufNO9EJb+GAQh9HtrV/qnO1NAWvslrl\nFslUkbRZCyzKrqIHjHKbHQrdYcvRFPu6QtuCn1T4l6cewX0zDgrQna6ctdnh\noT6Ft95Sgit6tBpvX+b48glLn+itYsDnfOuuWDTi2gVR6iJHxsAxTr7puNdH\nNyY+Dh1mh6fEc/KNM+tlWFaGzE+Tu3barXKpp0oEQYk54s1g4wqZqqvC+aDD\nfFNTPGit4zRTQOtp8xW2KC/jO65BYzZe8AWa0JMD3pzu4cuForPWAswL6F2Y\nLnB+Ix5UWlRKPH2ud+rQmJ2iwpYG4V+UdZn6SElCcnRkWzA3f+BqBywMbfkg\nzES4KFkxAVdM1UB+fUiP8cpzW8YJEzvs642miJkTOkZ6cIjehxVUVrFp6Iee\n7/qS35qK73V4n+brhQrlvS2d9e+cELJP7dBe9s3EVZjuu+9vCXelSxdiKgLA\nt1NrL+nLfg5ryDlc4IYa43TJ/2OMKaTUVqC8FONIbqZ7giFXi2FnFwJkTFFF\ndwQ0\r\n=PfS6\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button/styles\";\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.**\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n**Note: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.**\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button--icon-leading` | Optional. Styles a button with a leading icon.\n`mdc-button--icon-trailing` | Optional. Styles a button with a trailing icon.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n\n**Note: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommend always including it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color-or-map)` | If a color is passed, sets the default container fill color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`icon-color($color-or-map)` | If a color is passed, sets the default icon color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`ink-color($color-or-map)` | If a color is passed, sets the default ink color to the given color, and sets the icon color to the given color unless `icon-color` is also used. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color-or-map)` | If a color is passed, sets the default outline color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web 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/density":"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/button_12.0.0-canary.9f68a932e.0_1626386858213_0.7875683578071182","host":"s3://npm-registry-packages"}},"12.0.0-canary.4eecdeaf0.0":{"name":"@material/button","version":"12.0.0-canary.4eecdeaf0.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"55fff2ad258a7d58f39cd67d7a08992db59431b3","tarball":"https://registry.npmjs.org/@material/button/-/button-12.0.0-canary.4eecdeaf0.0.tgz","fileCount":40,"integrity":"sha512-I0O5awemz7azSk+K+PswFfzPRWRJ58FRQ5ABtzasE73ZRMzx0Zk44oAEjwNoajAzB0b4ovfzQl35poU7l2Fk4g==","signatures":[{"sig":"MEQCIF7qiWhGPNpY5fzwJvo3D1n0B1PcXMpKfymBEDyHOTuDAiB2IxiYlmtZUpELcvh7fv8ZgMr9jAPI72WwY9o9+tqzNA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":547515,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg8Z6SCRA9TVsSAnZWagAAkQ8QAIj3RpkmXiM59MZsi68i\n8SilDk7XeJl9iud3KBkgJAO4dnvlojJrKmOAp5S6npRN6hYhOoCWsfazHZLW\n+/C2gN1wJBxe2q1F6E+SWm3mHyQyYHGDSq0fYTkD3zzAqSrFc5iZAB00lAyx\n+9xK7WURgCS2bUJfb9gn/mPAPDNNbKEqnvaPsflclBvWAx8Wayuv6IF6ipC7\n0gGwt8Aw0rRIC4S2yNea0SAeYa5bzLEEKN1FnExRqh4OoiTLW8SBWbOfwxib\ndL2rf06bk+yv5ZPzGE+v1rOeY3Asiw4O+6KXom547Uj0gsG6YWSKTqyfpZrd\n2TjYDo9fAoBge+2cOtpl5sCjd22/9UFVZkja/G9iHFc1hw9nVW3qjLHTNfW/\nYu7+tnv2/tEbBo5Kus176HjVVDFIr2oH+NXK+EJnF1+wHaZQL4Tco19pzF5v\nTeixe0MMEhyAe5cZWjmB2tU14We68Jus/ArNh0rdjDC49YWhaQ9ZR4YS502w\nppQ4tlno1gt2SS4O9omSIBDgM7mxRpTuhz04YTI/l239V4fnHIp1T9uMYyub\nh5mXeJF2VuOOZCTgbA718xca4xAB4K5/jJ7NOnHjEmqdMZ08HXZzW2EtJqsP\nI2ufhmQG6SaBbrmgAZNkO47RKjiseGtPLuTIO7Tx2+XxltmK4JRElvL92XkI\ni5u8\r\n=0ig+\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button/styles\";\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.**\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n**Note: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.**\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button--icon-leading` | Optional. Styles a button with a leading icon.\n`mdc-button--icon-trailing` | Optional. Styles a button with a trailing icon.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n\n**Note: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommend always including it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color-or-map)` | If a color is passed, sets the default container fill color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`icon-color($color-or-map)` | If a color is passed, sets the default icon color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`ink-color($color-or-map)` | If a color is passed, sets the default ink color to the given color, and sets the icon color to the given color unless `icon-color` is also used. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color-or-map)` | If a color is passed, sets the default outline color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web 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/density":"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/button_12.0.0-canary.4eecdeaf0.0_1626447506705_0.6563743687254093","host":"s3://npm-registry-packages"}},"12.0.0-canary.7239684d4.0":{"name":"@material/button","version":"12.0.0-canary.7239684d4.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"7a65db78d75ee61c021b54c9210767872ed4f452","tarball":"https://registry.npmjs.org/@material/button/-/button-12.0.0-canary.7239684d4.0.tgz","fileCount":40,"integrity":"sha512-cKbXTjD8jqHDXp/hkb+i3hk9Epxstd8lwe/PWjEGD4CDqXP9Q0+7SUb3RT3X7NuX8fuWh2Nqlz3ONDmzpNJQow==","signatures":[{"sig":"MEUCIQDyU4scudWFtcmqrfC1xzsA/ABDHWqbub3SUZj7uNv/9wIgVZHTdGsC8kfWLfyXtztM0Z8nsxH6vxvp6RuKEn/4azQ=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":547515,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg8azoCRA9TVsSAnZWagAAeKIQAKJFWCmwDkHnBqCtlwIR\ntITyEF1+ctUhDssetaGrfiocD/faB3S9C3d6aJ6S6aX4ouQ+O+fJLUaYBxwG\nLmD85Tdm2yTK5WTgiVwRN59wYpf9bdgDd9ZWWdeDDzJdD2n6VA0TGOhlibO5\nSPaexgbvAbTi2ZU+4KqZPrBWXix1PAvHky7Sx6GPBwxfMHrZWG9qoLN9wRE+\nuW7TlesbvkcbIyD31e3WEY18l0WpBh3CoQdKVCPLUAqOtX2OOF5kgnJgcUyo\nWuhD3ehFk6FwgWWQASJgzw3q83LCDAYVHTNYQOZj5lkVgBhgDq+DsGId4+nz\nlHkVmnrebBVm7Y7dG5IEcS+rG0anDSrlwY48yDYSo1XRyU3vuH8SeUVtg0hl\nOBTPa26CQ9Hqin6EAp12z5yQf74NLimzwsEE5DAhyLKdFgRD4HZmEsDR7+37\n5CjT8ch0Gx+YYYx+g6E6NCAUq1V1ksL3YvBNCnpZTPcfBE0/0Pbu/1AdOohs\nKEPe/tL5LnP8C7HPqHdavH0N2dma+J7svsbJMvOnWadK9unAocXWCFn8sfEB\nZc219wN+lNkHKEhd1NuIC95ImsAbIRuvEbO1mci2y9mBXjx7aRS2BciJ+fke\ndYDgbdUsvFDwlKC6n11dROoKUm24fafo/owkUPhVL7MhuaeaSvAgLZPEG1Tk\nYqkz\r\n=gkoB\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button/styles\";\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.**\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n**Note: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.**\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button--icon-leading` | Optional. Styles a button with a leading icon.\n`mdc-button--icon-trailing` | Optional. Styles a button with a trailing icon.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n\n**Note: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommend always including it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color-or-map)` | If a color is passed, sets the default container fill color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`icon-color($color-or-map)` | If a color is passed, sets the default icon color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`ink-color($color-or-map)` | If a color is passed, sets the default ink color to the given color, and sets the icon color to the given color unless `icon-color` is also used. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color-or-map)` | If a color is passed, sets the default outline color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web 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/density":"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/button_12.0.0-canary.7239684d4.0_1626451175969_0.37686112130284366","host":"s3://npm-registry-packages"}},"12.0.0-canary.d5f1f7c72.0":{"name":"@material/button","version":"12.0.0-canary.d5f1f7c72.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"4466c1a96db006f9c0595af9b66fb0d55feeb9b0","tarball":"https://registry.npmjs.org/@material/button/-/button-12.0.0-canary.d5f1f7c72.0.tgz","fileCount":40,"integrity":"sha512-zCdpEcNAPXzj8LZV56uQBkRzKqdr+ZlYsT7H7ctou+dEPZ11I6xqmWJ64uIyTOTHGhUjirCdAE8/qmYTtmYe4Q==","signatures":[{"sig":"MEUCIQDkHwFeEpgJb9Xn8C7sYbNdWUafWqLfBaE+iVOzbGDjxQIgZlW7uTNzyB7U3lvbZ0XrJzg/MpJhDR/3hYl6BJGyigY=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":547515,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg8bBlCRA9TVsSAnZWagAAc1oP/1RdUWG4GeInWmj+6VQN\nHSAW9wgRwfisc04WTcD1aTB5DGLc0oVMkLAWp9FsHYS/vICqv71ILxuq8ESo\nI3SEs/RShgYwi94qnrybQCueayzznYQQrVO1rnAJ1Tkq2K+VQ7itOVX8UJPe\nLUlh9bLH4hTzA9P4/M7Dp5jZ3TQay7kOenwYJI8hWHyEuzfEebWbuGVFtS1Z\ntcGAqLSAO441n+baoBv9St6HWgiUTVA0Tll/z5ZbwYTOQK23SPf8L76/iLOi\n8QOzonVuFXGw8uv+8tlA91RBoz3Rw5Ih/HRxHDAu9WPAYJLBHoEaoxdkEvNJ\nVp05VOUigFzu4Gtc2ElgTc9g6AtC0/vSrOyE81mH+PgLYqZRqkn9Qv+Znlks\n92IivNbx1CvBXxyDhzriGp4b9Y1MT6a1oGn0KN+tO1IfN7WClnGrvX3cRzHy\nhVsvprbLcTlMGp5ZDkY/SfHjhNIPB/+Z/+KHCsJ5a7peUArZlHMClETUy+Ex\nVQMixcnrcuHgIaVtSJEiM6viO98OfE87PSQT/hegxpC4Wg0WNQlERSS+F1F4\nZBZhH4OZH9tj9984kGUO/iKixiUCBZHmQ9a5eugLhoV61YpTS62n7y7p5S76\nWLQeNtFESGQOVEjKNWZQ5B01n2nMo+g2ZrG0kxk7fF8RI5BMUjw7LoCGzmql\ndKWq\r\n=Lwfe\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button/styles\";\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.**\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n**Note: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.**\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button--icon-leading` | Optional. Styles a button with a leading icon.\n`mdc-button--icon-trailing` | Optional. Styles a button with a trailing icon.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n\n**Note: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommend always including it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color-or-map)` | If a color is passed, sets the default container fill color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`icon-color($color-or-map)` | If a color is passed, sets the default icon color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`ink-color($color-or-map)` | If a color is passed, sets the default ink color to the given color, and sets the icon color to the given color unless `icon-color` is also used. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color-or-map)` | If a color is passed, sets the default outline color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web 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/density":"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/button_12.0.0-canary.d5f1f7c72.0_1626452069583_0.20603988124564987","host":"s3://npm-registry-packages"}},"12.0.0-canary.4d95812f9.0":{"name":"@material/button","version":"12.0.0-canary.4d95812f9.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"e945f207f025607d13af080ae09c9dc2653766f0","tarball":"https://registry.npmjs.org/@material/button/-/button-12.0.0-canary.4d95812f9.0.tgz","fileCount":40,"integrity":"sha512-WE8ei7bh5GzovaE3F/tZp5qXytBlZlEiSHQ0gks40YqP0DzJDOkKhcZgehW7V8EFRSmTRtpglXyRE3ExotXcZg==","signatures":[{"sig":"MEQCIFh08fzWGqNTzIPw0uH5AtdytImKIKxXBU1Or/a2fjQPAiBlPlZH9OXwg+2FF/DB/zb+8uu1K7BvAWltuLlVAEre+w==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":547515,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg8eFpCRA9TVsSAnZWagAACHUP/21LLhLsBShDP0VxxMLO\n1rCfb9fVXfNmR51gb5AOKjPkcVm+jIvrm6hQqZv2S/Xl38k8fuh5il9rqllH\nWW6kXidE5PoNAC0pPMioKBhxADrtvQI0qok7gqdhoezn/PPRTGyqEaHi9UJ7\nKKFvP6ABWoyzWDOlUckDq3Nl0aTAwLyQmy1/hPcSZThuXGz9zWiJL3BHBVp8\nY9mQVAgvF7Q8qRD54Hh1YoA22EPD/IlxvgN7QHJPQ9g0NTDP134tQKFeXPoh\ns09g6tz1oxTSECuFsOb6ZrWstta+G4bR+6BMLQWOoWWZAc8ndSPV/40p/EZG\nXjfxnl5Vce0FIHSEfyz1L8CjATCJFSqgF1bA3uyApKEBTjAqsoOsl2Gt8j6e\nbQ9KT0unl6Qg/SwcWxs84ZTHbR0mwAijn669rwPA0vSpZPx0vSVvVe94zTf0\nKI3f8rH/v030Ier/HpBIZe2kBHllrhXX4VKLdCJbXHWtzpo8+Www77/szSjt\nL8ivoQRclNFZcgNw+cxzw13dMI87+rCw0UeUSw+S4a4hF1pHn89pmR5soQ7W\nnNfIuBOkbtNL1VY1qHjzGQnKNKJJ8gpPpt5YDL7ZPDPLwN0WhhZK0tZB6xp0\niFvSRkgUukV+Pq6gtGwdOwKzDbOoKpb3/0VU37ZZQw0nExPnXEV1sgOOOuqy\nFjQE\r\n=Sll7\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button/styles\";\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.**\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n**Note: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.**\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button--icon-leading` | Optional. Styles a button with a leading icon.\n`mdc-button--icon-trailing` | Optional. Styles a button with a trailing icon.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n\n**Note: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommend always including it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color-or-map)` | If a color is passed, sets the default container fill color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`icon-color($color-or-map)` | If a color is passed, sets the default icon color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`ink-color($color-or-map)` | If a color is passed, sets the default ink color to the given color, and sets the icon color to the given color unless `icon-color` is also used. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color-or-map)` | If a color is passed, sets the default outline color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web 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/density":"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/button_12.0.0-canary.4d95812f9.0_1626464617140_0.336250805868034","host":"s3://npm-registry-packages"}},"12.0.0-canary.38d1846cc.0":{"name":"@material/button","version":"12.0.0-canary.38d1846cc.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"50a827d302cd94b97493f9bbf05b5b68ba1f47be","tarball":"https://registry.npmjs.org/@material/button/-/button-12.0.0-canary.38d1846cc.0.tgz","fileCount":40,"integrity":"sha512-vEQ0hBKjAEQsxnPn3RzLbRbgyY5YVLjzHcqgzP1tzRlS1KyPFncRZ72Qofv5rBVyCrpOfo1jiIunkJ/GswGFZA==","signatures":[{"sig":"MEQCICGF8wCCVDBML4Wzz2VigIYSNa2fbUxhXA/cLoNo3gSwAiBpvx8I92gdDiiP3cIZV7YclqQnz9ej4YhGuD2SCxbiyQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":547515,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg9ceUCRA9TVsSAnZWagAASH4P/iKahtAkJj0lDHZe2VsS\n26Cam8NJZB1Bk6npMwJ5D4hho5DPvDg0KArcX1e0MbKjhT+anyO12mcrDs1/\nkXgwcQOXf//msLESSD2VEClAkFxA2B3GJ7RsCojiMvM+YEq0xpPVfRMuw/2n\ntKdcCXiHyh7DLJdFxpjY1jcnsNPAt9sOK6SpGB/j8dauSjrFEqn+A7+R4vfF\nEVJd/Mz2YSbvCEb+8D0WaDJpTRzzngLcnE1Z0qzvF3rX3hycglIqMom9z/28\nmabY2HGXkhlDYz6dy41wZIpXtrZWji16mTOpYZF1qdxkC2I90RdITdqQrflc\nMcwnoNDx+5IQQMk1XZ5keOcSy3Sx2M6voHAgnnKa16l9r6Rvw195mCQOcqkA\nefKozEdAUJNyP40hixq0+axniiGkWUlk/UghnEfWCjsMt7E6yCSqCck2CagO\nEdnhFhN/vdF/HAFaGxqj6tjsZKt2qkxmvf6vPKPAFIE8NXoo74EHYxcNu1Jm\nB3TnGwThIaYqjfQA8ZROrFyIzOft8NmTofLuuxdxiyHRee4QXkuU32G1hjol\nasCjxkwPBj725Ger4m8getb8VT52Ae3so0ft09Q8l1amJI7NkeLLgGfVSd7e\npBsRtYwbe0fmcDa4eCyUbEOxCZprXdoYaLmBsvmysCCaklJMhWUXar4h3SCi\ntC/d\r\n=OOjV\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button/styles\";\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.**\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n**Note: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.**\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button--icon-leading` | Optional. Styles a button with a leading icon.\n`mdc-button--icon-trailing` | Optional. Styles a button with a trailing icon.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n\n**Note: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommend always including it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color-or-map)` | If a color is passed, sets the default container fill color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`icon-color($color-or-map)` | If a color is passed, sets the default icon color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`ink-color($color-or-map)` | If a color is passed, sets the default ink color to the given color, and sets the icon color to the given color unless `icon-color` is also used. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color-or-map)` | If a color is passed, sets the default outline color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web 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/density":"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/button_12.0.0-canary.38d1846cc.0_1626720148687_0.21174660803284984","host":"s3://npm-registry-packages"}},"12.0.0-canary.3f691eccf.0":{"name":"@material/button","version":"12.0.0-canary.3f691eccf.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"6bb46c1d89bb7c2f84cfda5602b9f927150e9fe4","tarball":"https://registry.npmjs.org/@material/button/-/button-12.0.0-canary.3f691eccf.0.tgz","fileCount":40,"integrity":"sha512-awOhGSgMBaEOYQdWB4asmhMsAXi7lVCKgXZnX1zKnJR7zLhjgdNLjoFC9hHNEjIzb/F62szvVYqXEddohEHWOg==","signatures":[{"sig":"MEUCIFSECCLsBxfQZF/+i8kGWkkvFjN165R54xDAIl2a1d40AiEA0Df7dV6uwcoFvRhzhv+B0IRW0Dqv8TB3WLyj3Bxndzg=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":547515,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg9vUwCRA9TVsSAnZWagAAYNIP/RRkb5d/+QqH6cmPjtzR\nYAHG/Z/ZgHN/A4gyTn8ZJ1xIALIycJpxj5PqX1KCsIHu0e++MqQxr6fTETpd\nSG6RXWhepRG72lwP4eE2l8K140wkyqm+WipRWhYNAirkex7+yslFFjVxyc0U\n/bnhnaotcKYYE1rPN82dydPd94C/wA5lY8gc8J5Il63JxXtviuNUiCUNgYRJ\neJBa7Ki9cDygldUFuPO5knUQpClL127yeVL6lEEgOK/rNrxDJnvQyNUUoxQw\nlp9JTci0NcrK7RugjNY9kKi2un4ism7Cs0W7qOxgFkPkRfLxlncGVCuN8EN5\njfD3kTQZNAADtXltuIS4kbEWM/ZdipC7iWwwh1L6Y+6Vy0M9u0AF6jKuF87G\ndL6OcSf7DVwvUj5/st0ZoLuN5/EN5IrkOSQfsd4qst+96KgwA7w8hwLehIWT\nWMnF5yBUy6OCONbPiU345HLE9TWXmN1BbJ7B7QTG1+cPpx+T/WhU6zs6ImE6\nh6LU3PKIYGLd4wUkyPK1MocUJE6ZZtyOW41VQETDVkIdoAbbSrc56VAWpBCA\nTlYGLOW5/Jbi3LJURsE0PXUcXNHkIUtMzPV+sLmSJfOsYjC5gh0cX3lxAtU7\nE+FJ+X5Vaj32rff9RQn5RLtxyRuE9hMiY6cNmzildERltmT+r132AOoChC/I\nxFO6\r\n=7Q32\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button/styles\";\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.**\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n**Note: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.**\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button--icon-leading` | Optional. Styles a button with a leading icon.\n`mdc-button--icon-trailing` | Optional. Styles a button with a trailing icon.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n\n**Note: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommend always including it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color-or-map)` | If a color is passed, sets the default container fill color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`icon-color($color-or-map)` | If a color is passed, sets the default icon color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`ink-color($color-or-map)` | If a color is passed, sets the default ink color to the given color, and sets the icon color to the given color unless `icon-color` is also used. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color-or-map)` | If a color is passed, sets the default outline color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web 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/density":"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/button_12.0.0-canary.3f691eccf.0_1626797360743_0.7035489635273475","host":"s3://npm-registry-packages"}},"12.0.0-canary.ebb5c73bb.0":{"name":"@material/button","version":"12.0.0-canary.ebb5c73bb.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"996d6c835f646e332c9700789c5927630c01dd5a","tarball":"https://registry.npmjs.org/@material/button/-/button-12.0.0-canary.ebb5c73bb.0.tgz","fileCount":40,"integrity":"sha512-yp77ZlqygqEYZmjPVmQVG5SX7oLrctWFrlPz27A7PJ/xjpkvWYNKyBT900YWMor+ttWO77mGiNatnyOw6ldZWw==","signatures":[{"sig":"MEYCIQCryr07jEMwWl4p1Cso1xPlMjhXJXfPhc04r4ks47EuoAIhAMoHiqDZSViyQ+PfQpjIwuPNbJajfo38HVd19g5S7HKU","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":556927,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg9wBuCRA9TVsSAnZWagAAcpEQAI34wIhyckSXg0pcdnrX\nRvDfKD2EpSM/uis2msNlwJ5RyHO3/gUXU5D3sfhZFgPTWUs35wk5sBx/DwK4\nOhV4cSscCbSbUqynmaDmmAf2QZJ+TnjnXkdo5V0fscwBzEz6lLeqUJE+rH9X\nercbFsxoadTPQXaYgXhbgq4NsWCp/9kwBz2vlDnCPTJjWCH7hi7sD1T7UyRE\npbGVadWyh4ST4WEqa97u4UaEJ7sXX2MTnSgCZPm0St12iWqfjfI8Ar3YUiG+\nA0Ee1heGTQmFmF39bAohjkaIWrPp4FONPQ2osEymaY4sNEFsKgLiW8Q9nlOZ\nDk9hazVITeW/30yfOijcTgOknwljrYQqENXKuR1SE6unfiho1urHP75KiA9k\nwSPspQsJiE6jE8avBSRc64kH43sezzlGFAqhpt0S9KKapDjbewom1LQVocw2\nXDznaWQyUjYNnz/HYi4nZymQZKfrep+822DmstHUdUCupUSzpu8mMCgG/Apw\n+AJTsXtQ807CKSCqN02V9yNFvAJQ3K63an+gyGPCOAxqIcUhciUbkYRQJkuz\n6b/oRp5OaD22PXh3L169gn6n28Iuuv+PJ2irAt2/qFgqJ1TTVKvpZ226qf/b\nf3z5jLTPc0JwIuMN84Zg5JzyzRvYHd1IWl44O6QFqJudHAW2zn1Hbch3JSI6\nLpdK\r\n=LVGI\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button/styles\";\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.**\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n**Note: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.**\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button--icon-leading` | Optional. Styles a button with a leading icon.\n`mdc-button--icon-trailing` | Optional. Styles a button with a trailing icon.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n\n**Note: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommend always including it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color-or-map)` | If a color is passed, sets the default container fill color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`icon-color($color-or-map)` | If a color is passed, sets the default icon color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`ink-color($color-or-map)` | If a color is passed, sets the default ink color to the given color, and sets the icon color to the given color unless `icon-color` is also used. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color-or-map)` | If a color is passed, sets the default outline color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web 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/density":"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/button_12.0.0-canary.ebb5c73bb.0_1626800238313_0.8488101309161697","host":"s3://npm-registry-packages"}},"12.0.0-nightly.778a0e8a.0":{"name":"@material/button","version":"12.0.0-nightly.778a0e8a.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"9cbdfb6fba01a293bb40a5335803485d90b8bdad","tarball":"https://registry.npmjs.org/@material/button/-/button-12.0.0-nightly.778a0e8a.0.tgz","fileCount":40,"integrity":"sha512-sMcwYX6tA1pwRfe7rNXOjr4bgNJn2Bfjhb6YNTXtJuIJDQ8+NEw7dclKongHOU64VW+tGjptCqDYoQs+b64JWA==","signatures":[{"sig":"MEYCIQDoVBn9YEfcqA68GiTrMtvahosswHTPHRKcVIodGucHswIhAKXg/Ot8PBmo+JKUsqvzcYeIz23iSEauDJhC7WIxf23q","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":555691,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg9zqyCRA9TVsSAnZWagAAOhAQAIhR3Yv9rx1i2kzVVSsT\nqocmFVAW01022GX3ID7KgauEngOBFq2U+m/LbK/Fn//fCiOF2iHx2ebRK+RD\nogEPubHC5uBAcinK1zte0vC3t++LBe6VfOKLY7ZgAssiz92bzJeXwHKv7uUc\nChXSAqUwL9XnW8kyO6oh5GuMIOAue3Xv9ZToux8lDOl31BrmWQRiAQ45Wywm\nba1WnICbFeAv3XQrWnVvIRxpPw7Snl0NkM0IOWAe4+11+vm4w/eZBPSJSQMh\nATgMqOfqveSuOJauc3gU6Vrh/ekcXhjW+flH/ZIhYUKc0l8QCZQl7Yi/W6nW\ncBUz9byReyx8HfxXv+kbHBrHGdMJXMNfqowPj10HfioxBnAHl0blmT/K/7cF\neEC9XEhiw1SC6sRCEe8RdamnoxrHTLttC1gDtq+pp/whsOFEHhRaB85sqAAX\nYWmPAT659Q2kwoT3lRM86CzJuL0D4XdfbHF9wrTOHTHn4GH9i+V5cgdkPJ8a\nnjeAvlIyI24CgT89izdNwNvzRVwF5uY8gpjXm89fELlTQX9alALqqyw4JcF7\njC8d3LCGWVC3rskn2P3EBpuQbH37RLcvhAGzaqCtSaLg64bZHwAbJ72ofueo\nuLD/qQ0OEfo/Hb2H8svRIOJLZIyGtX6MuQcILeWqE5GJ4HQXw6gn9WMKfhuR\nIhJU\r\n=1Gpb\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button/styles\";\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.**\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n**Note: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.**\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button--icon-leading` | Optional. Styles a button with a leading icon.\n`mdc-button--icon-trailing` | Optional. Styles a button with a trailing icon.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n\n**Note: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommend always including it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color-or-map)` | If a color is passed, sets the default container fill color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`icon-color($color-or-map)` | If a color is passed, sets the default icon color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`ink-color($color-or-map)` | If a color is passed, sets the default ink color to the given color, and sets the icon color to the given color unless `icon-color` is also used. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color-or-map)` | If a color is passed, sets the default outline color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web 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/density":"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/button_12.0.0-nightly.778a0e8a.0_1626815154384_0.07770009783320098","host":"s3://npm-registry-packages"}},"12.0.0-canary.791311bba.0":{"name":"@material/button","version":"12.0.0-canary.791311bba.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"6cbc435d3dc62e7fbde5801a346877ac5049d46d","tarball":"https://registry.npmjs.org/@material/button/-/button-12.0.0-canary.791311bba.0.tgz","fileCount":40,"integrity":"sha512-EpqjmhaF7ewtInRDZyNi4PXZeWqmewnawD0k9OapXcXzeuLaQPTTXx0vn/3/lNxwUg2NFiL7lzy41xhK44vHUg==","signatures":[{"sig":"MEYCIQCtg4k95ES5viuK9WBbblFMvBeIL3ZnNHt67TnjAU9K3QIhAOXPd6Ah3CGnV1tFZzvM6orXg81VPGz9VV5auT77FG9j","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":556927,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg90lACRA9TVsSAnZWagAABFoQAIb1UCAaKMKObatVVinQ\nF/M8G3vVSeO660aJedvCrxuaWQjTj6Hcph+EDbnU8i6VXRrq8FTBdx9Xax60\n80Jvk6eGyyh3NMKqLfakPbmON89FulByUR0xh8RS9ODDJt07XCyoh4DQDMEG\nA1QiCj+YOiChtT9ebuNQp59+Osriv5t/J1aycOsYJhz2puhNaAHPoH54k77x\nGv4c+1Mnq8Yw49ZTej6IAImQIKtMad1sZoRKIM/djIa3fWtjQvJJvTKzVdSf\nVsJXLGHWHYACFU57J0dmz4ClQt0z0GtBsO4aHf4pcGaAqYHpPnHb3sqFi8QA\neuikiShFA/xMZHVVpJY2+k25Mq5wkuhxK8hrKDYWqoM5MeA9ojSWd3mWIJ/H\nDmyOR3Wiu9oJxhzAlaCpl3K1EAL4/fL+C/hcImLAChFDw27yfXklXf421+nZ\nuouiL+jjpCkRLaE7a/GVUJkSZJFX1F4rHcYwnujcAkxOuJu7hdxlPDGNPTDp\nToeiLn/AN00/MgIbz5frzC31+VMe4SuBXdZy5FElN6jKzyAL75VlGE796ZSB\nJ7dalpMbyLszOfw/1+VZ8BofuzShPpfIz8SkgpmkeVVQEBIL5rSq5nM0vQhY\nLbK9YWXJXmkLHyhnVICXLb8dx+zAP5rajQrKcpkjp/aq2q1KVoVttfzsuHBX\n1HRK\r\n=uHNT\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button/styles\";\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.**\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n**Note: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.**\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button--icon-leading` | Optional. Styles a button with a leading icon.\n`mdc-button--icon-trailing` | Optional. Styles a button with a trailing icon.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n\n**Note: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommend always including it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color-or-map)` | If a color is passed, sets the default container fill color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`icon-color($color-or-map)` | If a color is passed, sets the default icon color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`ink-color($color-or-map)` | If a color is passed, sets the default ink color to the given color, and sets the icon color to the given color unless `icon-color` is also used. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color-or-map)` | If a color is passed, sets the default outline color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web 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/density":"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/button_12.0.0-canary.791311bba.0_1626818880698_0.4188308876176219","host":"s3://npm-registry-packages"}},"12.0.0-canary.85e9a6ac3.0":{"name":"@material/button","version":"12.0.0-canary.85e9a6ac3.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"1f5022e6622ed60d28b9f73884864e59667ccd67","tarball":"https://registry.npmjs.org/@material/button/-/button-12.0.0-canary.85e9a6ac3.0.tgz","fileCount":40,"integrity":"sha512-mShDjghnqicKIVSGbUNMOB71iGKJy87XQEF9tHfStDuIIr+MfSeSEwmGY++axwDjR0xlm6dKX8YQMSM3BPz0IA==","signatures":[{"sig":"MEQCIE0YoTCrQm3Zw+TaxoRBBJrAqdHN//wyjOHNgTFnA0x1AiBbOCACQ8mTF5hl9o1tBmyP6xTUvB1zQTaNm80LzcfTjw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":560504,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg+D75CRA9TVsSAnZWagAAv+UP/RLaR5orabZjL6+IMNuP\n5dttupVPxuURxNxCn+x60kQ2+az/UOQNZPZ6GUFvhUKsUlvMJ3o/o5kvQXpN\nyyc9eun/ictkCTiURRxf/G6xjgIGhLc8ajEMN+s4AkFcMI5kbHQzqR1ClyVn\nZuANJ2jzHwLmfoJsRrfi/7RkFauBS/oz74tsD1+mGUNQ8MKvMbVVJ9jZXEmx\nMkHXGgtvm95kAZgA21bBcI7KEg0zJjJxUl1kyonw4Q4VoJg/VBBav3rRb2KM\nBkzu/pAwUMmxnTGzhB1gUCm6EgN9TY1DyPuFJxocdyyJgz6ahA+8usIxczip\njesLJ2s4er2gsUGsaaFvnvry+Qpud1ALx3QKY1HYCtxquVRQWPKxtY82u0mP\n7i+/UEIvpuNV1E+vQxZZxmsmCidUnY4faWHHQNr9BzoVIUiEz51tHVHRVknq\nvT3UyYoG+/kR5SNznBUy/MqQzfovmZw8W3Ihy2xx+8nlm8VyZt1i3Zs5IjLO\nzQnfAO98cPQ7S857Zo278nkMPHSqoWZuetZrnZEJnB3fJuAc8aKUrUuExopy\nxk4SLkfF2pG0MQ5JlqMQPEiKxjqZ5rvFo9P1RkdrtWtrYAuVoViJj9AH++/Q\n5QOktzr8l8M+Y7/nR7I4iq7s5p5uXj/0dzRdh1G39AJpeLjCaRiZMsm0s1QL\nN30g\r\n=NnZj\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button/styles\";\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.**\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n**Note: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.**\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button--icon-leading` | Optional. Styles a button with a leading icon.\n`mdc-button--icon-trailing` | Optional. Styles a button with a trailing icon.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n\n**Note: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommend always including it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color-or-map)` | If a color is passed, sets the default container fill color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`icon-color($color-or-map)` | If a color is passed, sets the default icon color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`ink-color($color-or-map)` | If a color is passed, sets the default ink color to the given color, and sets the icon color to the given color unless `icon-color` is also used. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color-or-map)` | If a color is passed, sets the default outline color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web 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/density":"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/button_12.0.0-canary.85e9a6ac3.0_1626881785352_0.08963819914013604","host":"s3://npm-registry-packages"}},"12.0.0-canary.6b0442278.0":{"name":"@material/button","version":"12.0.0-canary.6b0442278.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"f19c5d5bc2314e0156b1601b27010ac648203064","tarball":"https://registry.npmjs.org/@material/button/-/button-12.0.0-canary.6b0442278.0.tgz","fileCount":40,"integrity":"sha512-lyZLFINkE0nizpppsgQKRNmbG6P93xz3OwCLrEwLM81asQFZNKP8LWRQSyCv/PIjIiMdFN8ueIjdLGZ/+osR+w==","signatures":[{"sig":"MEUCID+OtfsWmA4l+fwRe7mOAP4B3efDG3M8DAN+hJA1AyBPAiEArKnRlc0zojNXmoFuf7ji9tkJsYgTyeAwWzBDtYnuTLg=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":560668,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg+GxuCRA9TVsSAnZWagAAT4IP/Axg0wHlyJetSHDYbxJr\nJnl5WbqCF7MyhuO0HNSZ+jgtlwZM4oHmgWe4MhIT9cVGqyrhlXzB8WCiNZ0f\nG01wFgnAL2RNXWi74aG3g/V/I/u3MmByquiLdQV38NUva/ALFR0CTDqPRsRJ\nsm+CaOTa1GImt81MJF/cFwxejpwvbU2+E4HYKc9G3Juq1rdsGad4rnaiMvPu\nepf6qig9YOSyhYVvkys4vq2nN6Qq813ePyygDYQvruD935n0/BTFmr993Eqm\nUcJhrRiK6BD4lgYPEvFYp5QO9yNSs0C1OOlRzF52mZK54joFWzsZP7zhf6FQ\nKoXROhgpgQ5drMqZlMznDuNSf9HU2iNA5LIuOCQJYzBK/jZfFQoCzS3UoBAE\n3jwk+ksjS97+SGg2s015lIZ7FVtHB5BvrdW1szDcb3IZKJnO48tWLJDvL4Zl\nyzgvwZzh++vAn1RChitME8W9H5+Z8tzx2sZkPoEUB7BtTvIlritF5Dt8MnCJ\ntTYBcEv6Yp6gaoTdZuXgSSdVc0/mqtLHFYQUZrQhMCG6TpVLUoegvv9j+6K8\nZ2c6Tx4Brs9uScG7V2uzbigUvH7NPpfh7bOi1Et1Mh9/PyU1OM8EFV2q7ThA\nQpVI7heRxY/U9cPGHr57zI2MQVWrTDJ1spI4owUzT5gTZRIEMf9X4km5zzoz\njDao\r\n=qu+a\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button/styles\";\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.**\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n**Note: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.**\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button--icon-leading` | Optional. Styles a button with a leading icon.\n`mdc-button--icon-trailing` | Optional. Styles a button with a trailing icon.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n\n**Note: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommend always including it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color-or-map)` | If a color is passed, sets the default container fill color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`icon-color($color-or-map)` | If a color is passed, sets the default icon color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`ink-color($color-or-map)` | If a color is passed, sets the default ink color to the given color, and sets the icon color to the given color unless `icon-color` is also used. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color-or-map)` | If a color is passed, sets the default outline color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web 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/density":"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/button_12.0.0-canary.6b0442278.0_1626893422276_0.43490422098411474","host":"s3://npm-registry-packages"}},"12.0.0-canary.5f00e454a.0":{"name":"@material/button","version":"12.0.0-canary.5f00e454a.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"491e284d4c92506c72d6cc816a97049fdf601f7e","tarball":"https://registry.npmjs.org/@material/button/-/button-12.0.0-canary.5f00e454a.0.tgz","fileCount":40,"integrity":"sha512-LbU6haOaaadc8a3+Pp5kBDf/LWTzQQ6A7xCIaBvHPUKEo+up9jlV6RmkQNGRFeDpveSMW0gE1+soTYMV4GkLYA==","signatures":[{"sig":"MEQCIC3u9ahfgqKheABbioAUfmrPvWNRnVcOqnc2zA3n9QvmAiAPCbUGDFfe9VV5JxXuID46O13kjmd1FthiWOyuLelQjQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":572291,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg+aWsCRA9TVsSAnZWagAAR5oP/jq8GMKdlQpH1QHR4vlB\ncalC3zwYeuKgn5zUQVVKHFqNEKGQEjFyg87704X1Tt+VWzRt70JhoUnoZnzW\nhK3fvBEgpQtT6cZe5ob64SW8qCmt4D46HIYnwS3SCw3MclnpVjaY4aoBQ86v\nWj2RcmolJqYUeW3xRrpSZYSBssv4wT3McpuvN/HkzYHY59euo3T1CcT68KZ0\neVkT4gwgykewcneW1LdOnzvY5Boh0cE0HjyiNSRxmeJhs8+T7gb0L1zeBWsc\navLHwoYTwcNh491043ohMKU1/6tMHRLOlO81NQqkPiPaNzinrurN7k1gQ2N+\nNdftRTHF5PRlNg3tRf9KeztzpJA3x2izhzfj/qj4Zh1Z2DybMaJIYjYqYkLI\nG16c13R57+fQzLI5DqZs+EQGDTH035gTrGuER7AiAiTeGh6vCJXAmo7rIGzo\neV4VSvp9uKT+dcE5VjSn9yGrBIfk3rWV60JGsmbGtTRrYWdRWH8OGwm5i6gr\nKYJ0OMHZuzY1hNPaUo4dLWvsPvZeuaiKyJ7gT41s4HLqVr+R24EYFxeGx/6n\nckAywMPaBFBkwdzzQRRfNu65R1KRBmOjKDGgtKGj19rndPEjc5NGXrYbtrt2\n9/92Lp2tIsmE2U9Hz3mLUb1Bk2jAKPur9NEYQRTL0WMZ2TaAUfGci+PfezYu\nMeM9\r\n=YF1Z\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button/styles\";\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.**\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n**Note: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.**\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button--icon-leading` | Optional. Styles a button with a leading icon.\n`mdc-button--icon-trailing` | Optional. Styles a button with a trailing icon.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n\n**Note: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommend always including it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color-or-map)` | If a color is passed, sets the default container fill color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`icon-color($color-or-map)` | If a color is passed, sets the default icon color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`ink-color($color-or-map)` | If a color is passed, sets the default ink color to the given color, and sets the icon color to the given color unless `icon-color` is also used. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color-or-map)` | If a color is passed, sets the default outline color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web 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/density":"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/button_12.0.0-canary.5f00e454a.0_1626973612707_0.813469809235436","host":"s3://npm-registry-packages"}},"12.0.0-canary.90e08fc6b.0":{"name":"@material/button","version":"12.0.0-canary.90e08fc6b.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"2af00e684616f214bebc46ef612df505fdce859f","tarball":"https://registry.npmjs.org/@material/button/-/button-12.0.0-canary.90e08fc6b.0.tgz","fileCount":40,"integrity":"sha512-3zzyaZY1SFI5wBT7ZyL75eNoU1niqb/9qQu4u3RdJqks24H8836MXUO0ob5dbSlWX4kYUkWNdwr2cXd5ry20WQ==","signatures":[{"sig":"MEQCIAPlRaop/X5SeIRwP4UWd7yKgQpbBYK706iaMvfqpD1rAiBjIUmGVI+aSypi82AO9btnWehyvEAebLChULQqpT1Jcg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":572291,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg+gGGCRA9TVsSAnZWagAARNAP/2+72rbqKC2ai23/N4vL\nov/otmV4yeRwHw/JMEFuddpznT8KO0iVRI9swfRhPV9gRmRnEj2cINbp4apc\nd1uB10zZm8UROx1hGHF2jtGZ4AxfwRZaZI1EIlygx6DzPzNVnK2dTg9/MThV\nCdNj0ndlq4Uz+GZCyebAl66+sz0gbbXwMHVSmyIb5j5mOKXeFhzQ16a3ZFub\nhMNe4RV90uRy1TolK4fYr7hDOH51M0nTOcyYHTTHzIpdhf0G0gl3wjJf8EPz\n3834Yu1jcj7bHuIAPj3hfF6mQT3Y+aiIsSLUaq0Ige67fnRuqdbc6NGLWiCt\n7fYToPvYVXZeIyJYCRiapwKw+YkLhEsKzz8KdponN/4OWBa5KnsndxI4jd+I\ndwS5Poh4l4VZ0OJCev2RelGVjf431+29OJooilS241ZMcnpQTvnpMYsS4Mr7\n7NFXyp0DmnTUxO3BY1tTrXC+K7lwBoDygfp2xQqM+Q3VC0xPuY4XwSnhuz9G\nq446luanmKp6GDWmMxbF9t6Lf5b2gVvw9SBMJxx6WzXyB1KZJUogMWRCEFZM\nRd+xKVPSvkuyLDxc2F5ciKtbRx5eEkJLkvnn8nGuiRFcvb7oxlSdQMJGPo31\nsBGv9TKWvTh/qw2oMab1xKjwz0Dh0ZJEu2JnmhvpMx5jSG4Dc7hZ+3g8+LXJ\n8j9c\r\n=FL38\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button/styles\";\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.**\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n**Note: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.**\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button--icon-leading` | Optional. Styles a button with a leading icon.\n`mdc-button--icon-trailing` | Optional. Styles a button with a trailing icon.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n\n**Note: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommend always including it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color-or-map)` | If a color is passed, sets the default container fill color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`icon-color($color-or-map)` | If a color is passed, sets the default icon color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`ink-color($color-or-map)` | If a color is passed, sets the default ink color to the given color, and sets the icon color to the given color unless `icon-color` is also used. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color-or-map)` | If a color is passed, sets the default outline color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web 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/density":"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/button_12.0.0-canary.90e08fc6b.0_1626997126451_0.44274054543382335","host":"s3://npm-registry-packages"}},"12.0.0-canary.cf5b9eb86.0":{"name":"@material/button","version":"12.0.0-canary.cf5b9eb86.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"30bae867f84ec298b3ccc8145dfc33a81d59012d","tarball":"https://registry.npmjs.org/@material/button/-/button-12.0.0-canary.cf5b9eb86.0.tgz","fileCount":40,"integrity":"sha512-+MEzc+c8Xmxe0Q5iKCL1R2nFrrEcI2GPXm6VZStYsTY/sQcTarDBqFjqaCukCpfC9x6sXaXRbhoXKfO2OpSRZw==","signatures":[{"sig":"MEUCIQCNmTR+vgUkkmTDYMZQHC/ulNVRa/SyWzH012LEf9QYpAIgH7V3jJXfr0fWq4XVo6myg3y6AsbCvCfBpEIYU/kJwa8=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":572291,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg+wabCRA9TVsSAnZWagAAbOgQAI6clB7rW8kndJa4jKBY\nbUs9np2L6fMfJaOJEp1A3tAHcSYY7Uv8lwRs22YuTJTWTATi0QlLvA+xX5/x\nMk9mi9niKczSNUBhF7dUumGHveEZYmgXWVf2tYaiQo48BzZ7PP5woXee7lq1\nTfEaFzExPXItfsYchnPD3Qw1nXvF8yPrioGQnxmXFSAya439mPNSSnWoi17g\nyAq40rvB0VTn3H6RXR9/9wm0TvBE2DPuibi2AlS/6fmxHcB80dLN/6eh+E5Y\ni0OfLGNyPUOkQDUIEIuEscmhR18mwyZQ6L8iQUDxR1td8JMtAA7FvJHzYv2p\nAjPboh9pmYwJx28psWn33CnjdZFHnLI6Uy9D5X8CKhrnto3UGh8LAKQ8efkL\ncOw9W8JHS8/bZVLg7BvKtQZQyS55G3Z6yEIZOODUTw8dwYpel6NBko+Qx0no\nkNuNLvCpq44JKmB/1kpFAoHMZ85f/wg9UNqWNJGrmz2PUPcG4emaMBtZJ75m\nyDROGJz6LxN4eMligLZ/wiKfX1cacKObeLYTePcSR/2E0gYR2lz3fTN3UU7r\nlEMWaZdpdN42V5vL4h38yf29+fH+0Zg+gFhTQRPn1k6P23Az0+RHFUlIAbi4\nmcSff27GXJ3vatw4NpgkzwnlpBzXwGF1l84ZM/F66khm9R3cVfc/cQG0CRP/\nuAyC\r\n=A4H4\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button/styles\";\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.**\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n**Note: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.**\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button--icon-leading` | Optional. Styles a button with a leading icon.\n`mdc-button--icon-trailing` | Optional. Styles a button with a trailing icon.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n\n**Note: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommend always including it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color-or-map)` | If a color is passed, sets the default container fill color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`icon-color($color-or-map)` | If a color is passed, sets the default icon color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`ink-color($color-or-map)` | If a color is passed, sets the default ink color to the given color, and sets the icon color to the given color unless `icon-color` is also used. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color-or-map)` | If a color is passed, sets the default outline color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web 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/density":"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/button_12.0.0-canary.cf5b9eb86.0_1627063963419_0.07162943459940041","host":"s3://npm-registry-packages"}},"12.0.0-canary.3f36ac75c.0":{"name":"@material/button","version":"12.0.0-canary.3f36ac75c.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"a0a0781dfffcca5dece3d44aad6df8acd144acaa","tarball":"https://registry.npmjs.org/@material/button/-/button-12.0.0-canary.3f36ac75c.0.tgz","fileCount":40,"integrity":"sha512-23U1JzkL6zsjXtqmY1a6MhgNaecmM3v4MZbuh9fu+wbZFpV69i3UwG7FU9P1A7ux6rKtnAGp/j0YcA3gn0S8gg==","signatures":[{"sig":"MEUCIQDsCwsMOvHIKpE5tnyLgtOlSBOq4i83iSYVHKD+YIlGaAIgQGI3A6o0vgzlZoRJp49BFjTQYP5j2E0DYZJT/ntQcpA=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":572291,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg+wtICRA9TVsSAnZWagAA+xkP/isymEkYC9VLsFHVl9Vv\nnOp9NGBRkwHiLMbiT8a0CZDH9U31C5nj+3tE2KW+gG/8zjqgWO+KXVAX8rhK\n0hgTKi490Oo0MnEx/fMvQDDl5WWqoMbC1cf0QbblkJjbxC3WXqRWZr+g/DjY\nBZ3V7B0DmpWEg7h3X2lQkaI7r0I0T+vMpf8x3lFlrrj5k7PdRHAZn3xphIXk\nlDOKdOwucrOE2/3JjDZzSjcMSoGCUb7JypxzCLAejUcxRJiVxQEZAsEIh/14\ncwe3EVwZbprwu2rHX2Rhbr8ocdpS0yOgVFYKQiPR0mmKdMTzW9zlA3fKBQfd\no9rt7jLCXq3D5vTKLbJ89bsN7TBEm4XK7bXfEILI2eNU0GH+kQjG12mncp7T\nQRZqcSuuZXTHAWKoruucgagRH2VO5ZB0f2CXlWVkiovP339JgHmvji3lPQc2\n9s8x4p5AKl+WBRSFB3oXntRTFvXvOXTbj0xo98MVZYfB3xNc/7OO1I7vvUgX\nqholFBXRRVbIf+1sO0TNWUPRGBk4FbD62cU0ta9eZMbfdB3uOWwyj+iWj72x\nDhBtA4zUCoRAMW0b5md4/+8QcN+ER+uFO+ZdgHy7K+ROlvlEeF/FD8Lg2NeS\nuicpHn/qhBQ/x1f5cGWdC9ITb3wl616KK3cev6pKUuSkRiyo6ecuPbFz0Wdv\nwQHQ\r\n=V6Yl\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button/styles\";\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.**\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n**Note: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.**\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button--icon-leading` | Optional. Styles a button with a leading icon.\n`mdc-button--icon-trailing` | Optional. Styles a button with a trailing icon.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n\n**Note: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommend always including it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color-or-map)` | If a color is passed, sets the default container fill color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`icon-color($color-or-map)` | If a color is passed, sets the default icon color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`ink-color($color-or-map)` | If a color is passed, sets the default ink color to the given color, and sets the icon color to the given color unless `icon-color` is also used. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color-or-map)` | If a color is passed, sets the default outline color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web 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/density":"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/button_12.0.0-canary.3f36ac75c.0_1627065159979_0.43134565967535266","host":"s3://npm-registry-packages"}},"12.0.0-canary.ea1e1b850.0":{"name":"@material/button","version":"12.0.0-canary.ea1e1b850.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"fb2a22516208508166748f403c12d093bd8fb34f","tarball":"https://registry.npmjs.org/@material/button/-/button-12.0.0-canary.ea1e1b850.0.tgz","fileCount":40,"integrity":"sha512-DTuAt+PhttSBKNbabPpexC1UddhaoJS1kmn/MBzYGLznvMYAwrDsS4jnNl27BZEoxZ+1cCrobweiItQpsbnnVA==","signatures":[{"sig":"MEQCIBAtNczDHJjITSctX9GsSAXEhdlDOGvL+oRSBgiH5uNjAiAce1QvIuHbzfrHPSpKpeTcmQCpdaTu+JZSdr/PeqVoeA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":572291,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg/H5vCRA9TVsSAnZWagAAsn4P/2YIGAzCjWVDtDfYf7fz\nF7XCquikOd8IRri8gbPlTwnLw6y4lR6du4rlsNf/7V7X3nTZp58A552TLl5u\nci6I4Q5hAG669Xu/JYTfEnAuWGBNgLQPDohYVRrCO1976XHdzV6IUOLGzCH2\nrVt35Ir2pBVRGd/RtE/00NJhblQfY9T0zSv7ZLem8uESzPZo4I0uQ95Uc5eZ\ntUKsT5Oprue2o3mNz8i4HLdsRhX1IRLVFwsJXdwB3sOFSPouC2SvNxLS82pN\nMWVnfoF+lNZGUljAcPy9ZYSo1/I/DTDvRBLkv6B0ueV/yKv2g16TQVhOUPBc\nOaYpo5s6jxfA5IeBZ7POH9U9nrIcBzSfXJWXV1pFAEKp9hKvKedDDjzOlNu2\nH00vvYFivZC3uJXtxBFdvDgzfBsPAxHQnSu2I5EzeNYt9fV1l7WPAml2QCUa\nyHhvbBBVQODvP2G/lJICLIRlK1OE1fnbJyIJOB4fcmhlT0f9wnTA91r2rn7h\nbwVNmlXdzgtiWHv7SykZ4IJoQJa+FV7C6onbIZVohWkOEqylQHwdbVfG6h2W\nhj3cmxW/Jp/YacLO3tPU58p8GPXp5hTCVQgkUE52ypGJfwAU59xzHO3ESiap\nz0PqRUvVnzZ/gkfNVmj58yjZnkIIBT2OnoVO6m40jgCK9T6eejQ7VldKDLze\nB4SA\r\n=EoxX\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button/styles\";\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.**\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n**Note: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.**\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button--icon-leading` | Optional. Styles a button with a leading icon.\n`mdc-button--icon-trailing` | Optional. Styles a button with a trailing icon.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n\n**Note: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommend always including it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color-or-map)` | If a color is passed, sets the default container fill color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`icon-color($color-or-map)` | If a color is passed, sets the default icon color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`ink-color($color-or-map)` | If a color is passed, sets the default ink color to the given color, and sets the icon color to the given color unless `icon-color` is also used. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color-or-map)` | If a color is passed, sets the default outline color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web 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/density":"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/button_12.0.0-canary.ea1e1b850.0_1627160174766_0.20081901621214304","host":"s3://npm-registry-packages"}},"12.0.0-canary.22f390c43.0":{"name":"@material/button","version":"12.0.0-canary.22f390c43.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"8634aabe63d64edbfc2d99057fa55efdefd4d633","tarball":"https://registry.npmjs.org/@material/button/-/button-12.0.0-canary.22f390c43.0.tgz","fileCount":40,"integrity":"sha512-aJHCkzbEueUSD7gaZbarWSYCzcEbGCzrMZuQE/Lb+qYwVhiln1wNrNZGEc00daJbdkLgnURtGcJuPQgmwjnDNg==","signatures":[{"sig":"MEUCIGoy7wKBQ38uKZZEO8H/QJNjV7QmBGs3CFmxa/+5+a65AiEA0z2ailPVMt6/PpTctLBGPeTl3W4UXBbj8YjuIQDst0k=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":572291,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhAFfGCRA9TVsSAnZWagAA9yoP/Ri0WK4bYRUjR/BqvIZw\nu8BBxsaBL/dGUh9sIOkZRgkapmeEqeXDtWM9tgUwfRQoFs71a1jSH3TVDRAm\nDEN6qLKfc6h3Alj1e05YsH6s9J2z1GJ35l/0JcdLbfwuuzraz56SWHFHu2iC\nm3QAWgCxGwRmf/lleoVRdOfuAV327OlUZ09l6vatzGZC5mYtTQxFvTpDr3+H\nZv7fz5Zp3HWd2nX8NLRv46sogm0F90w+nh7S9e/kbfwdrgqNlJpEvXT3byXr\nRnk2pZ7dgETUOOZciRuK/vD6ZGO06FTkjcJyc5HWdupS7tf7VwCSGZvrtHVW\ncGnn/G42JG2k/vKqtynBRJBobvlKYTe3VWzfaMYwiZW6cngukoaF6EFUQwWu\ncCMUALmC7HeoGL1deyrqvGNUsTOiQm6cRBqA0NTeODT1n6SF092QSE38j0WL\noZP5edQuPi1gqkeUUyHzMbgbKY7c2GIxqMiKAQqMozZ6QPwuBDmSkN46uH6f\nz23x+Uo0Tr6weMFk3nT9tLzOmVG1REUKOWzavvfIvOS2FwQJ5jaryZ3FwVYN\n4+5ou6s79gE5RBPsJRxim2Kq3viLK2vaR67UaQwauCg22IliAggZEKqmKxVB\n+k66Kwp9iYrcBeVbAKI599xARb69Mm91ouPE40472rZGxWq68qNgdchT5MSd\n3fSt\r\n=MKG4\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button/styles\";\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.**\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n**Note: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.**\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button--icon-leading` | Optional. Styles a button with a leading icon.\n`mdc-button--icon-trailing` | Optional. Styles a button with a trailing icon.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n\n**Note: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommend always including it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color-or-map)` | If a color is passed, sets the default container fill color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`icon-color($color-or-map)` | If a color is passed, sets the default icon color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`ink-color($color-or-map)` | If a color is passed, sets the default ink color to the given color, and sets the icon color to the given color unless `icon-color` is also used. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color-or-map)` | If a color is passed, sets the default outline color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web 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/density":"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/button_12.0.0-canary.22f390c43.0_1627412422202_0.6102014682945827","host":"s3://npm-registry-packages"}},"12.0.0":{"name":"@material/button","version":"12.0.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"4e9fbea89dd23813f5f90ec2d224a69d3f55471a","tarball":"https://registry.npmjs.org/@material/button/-/button-12.0.0.tgz","fileCount":39,"integrity":"sha512-+Vo9+9nsMy8XZUC4E4CDxmjPAAGCogoIskQSduceuZf8Zdoxy3mQfmmQqWaxtBieXJScybpQyw55RRC3MWu6fg==","signatures":[{"sig":"MEQCIDZrG3VV393rhedGB979eSnoCQzifavNhZZmf364zPekAiA4EDlyHKU6cUkxeZgknfbLYNHGBMrcCextnlfpyKtZ4w==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":570404,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhAGN/CRA9TVsSAnZWagAAJiIQAIpYKauMRVvGhaV/2sy8\nSNCtx3WP3WiQJTPl3LS78S7mJP66OfuDeWkUbUv+edr2ZXnozJ2r2ADaW4Jf\n0ZqF9m9kcwia/ujQn1OkqUQbK0049SnyugB1XM9Iqam63duIOQM8/4I5owXD\ndXOMjh2ilDR0BeiNXpSjFbtalWFmyYpVFBydM/9FXa8wqupDYpkEeHNtL1Fc\nRjuV4LKMC1dblUJ+q4zl/okZSidb7L/VRFBY/4VtLLy5FFGWw4kan+NrjfNG\nnIfWcAhTJXDhGpsK494e15qh+Vr9DA3Pv51TLJyewgLIt0k7Al9cbCnDKSMm\nu2YrlqAMgeWoFlnucf2chujrMCfcLpYwW0AAFcw+0+MjyOWKOQ6ZDXtX6DDO\nimIcPKia4YGP754O+PaY2sJ6f84Bs1WK/50/wqzrGe7N5Gbor+Ovi2Gumd+b\nUJ6Yb3F/1kPRyH8JvmvTR2gwgZXEW+Mp8w/MxVT3UFl4w312F/9A2jh+AURU\n/fDqWXGytMGR7YhaM3JsdHfM2WnMsxqlnrVyTkFyDPrfOpARscVMpRAwCs/F\nG70qCbSc/MELX6pLV3zVfgWp/JHto0w91NiyspcfY4433CN0bD9sWQ+tgr3B\nV0P7wXvoOiaGvvWgsLeslWb3QLgk9Z/Z7+ZeaWPfoYdtUbT9ic690GOJqAxp\nFVHy\r\n=yiTp\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-button"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web 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/density":"^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/button_12.0.0_1627415422845_0.19477631387779248","host":"s3://npm-registry-packages"}},"13.0.0-canary.ae85f7eba.0":{"name":"@material/button","version":"13.0.0-canary.ae85f7eba.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"ad37953c966c7ac99bda39ca0b7796dedadbaf3c","tarball":"https://registry.npmjs.org/@material/button/-/button-13.0.0-canary.ae85f7eba.0.tgz","fileCount":40,"integrity":"sha512-DWmEOPbJ/11qPI8dWoCLY5bjB8b2ywYH3AaeVwkOkDtqinMBtA9c/AsVQ5hSuGLKyoEtezBIkUztlfohswL1gw==","signatures":[{"sig":"MEUCIBHjZb4G161LgKS8VwjTBFQ0yT2ZO/hTBzpJM5tXyBKAAiEAg4gq4wUXuZ3nPkQwhPBo89YJllCW5ZwWKc/f6iuvti0=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":572291,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhAGPfCRA9TVsSAnZWagAA+zAP/RApR9OMyZRN4+hCawDq\nYNt6x24vaGa4cnPgZPwMTPz9VAXWbzwQB+FpAnacny0BVDrdwf8qTwHG1nRh\nraTILluJwX5iTr9L0/l6DU6JrJX/Y/Wgg9MTGiCorcCntUEDwzY2cUWWIDJ7\n16oGbRIhnio9/p3tT85JKwoh1mThVnt96vvKJ5nNQdqeeiMdmdU0qV+viDA6\nk09b7w6friD+vR6RvGv0pd+Eejt4mcBWJ81Wi1LCEvDoNFto40NW52r/1fBv\nGZejrIMyAOF02VYBK1gBV/ha69cCiw4WxQrdRuS5izfTD4j9a6Xt5xWHRJiR\nh4/GXWe82S39jfrFcIxmOqNddh2QdOvYSufaNh941zB4+L8In+IKH38GwmGu\nkGPQ3B+zjtaMh/3Nxfel3Z3NvdTTOqXyCo7FsDN5+o34VazKN9n8bzJrsN6y\nrgwCD1GzjpQeQpgZnrr1Qd3JsD3ucuOy9eZTIINQ00q/Qa7ahX/Nn7mTpmAT\np+jBwNEOPkGDi7TjgOt1hhyM5GAJERciSSKd65Frj+aCPeSTW4HjG/XpiDCe\n8ixwpbs9+NRAKbtTZVS4LGnNFGyIJ36yd5D+6GMUzVduaXgxft3SdF1GsLJU\n+qoQbsYQnxIss/6syq3+1uMhXfSnU5N6fvmSjx79hX37xGGn9vXdO/z8qpJG\nQyNj\r\n=QJzS\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button/styles\";\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.**\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n**Note: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.**\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button--icon-leading` | Optional. Styles a button with a leading icon.\n`mdc-button--icon-trailing` | Optional. Styles a button with a trailing icon.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n\n**Note: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommend always including it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color-or-map)` | If a color is passed, sets the default container fill color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`icon-color($color-or-map)` | If a color is passed, sets the default icon color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`ink-color($color-or-map)` | If a color is passed, sets the default ink color to the given color, and sets the icon color to the given color unless `icon-color` is also used. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color-or-map)` | If a color is passed, sets the default outline color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web 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/density":"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/button_13.0.0-canary.ae85f7eba.0_1627415519444_0.4165772857358654","host":"s3://npm-registry-packages"}},"13.0.0-canary.5981207f7.0":{"name":"@material/button","version":"13.0.0-canary.5981207f7.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"8ca3ef5256ef57c4a21e08200cd07d5a4073deea","tarball":"https://registry.npmjs.org/@material/button/-/button-13.0.0-canary.5981207f7.0.tgz","fileCount":40,"integrity":"sha512-5ByuifVlM76jxdl+TUuUEcQC1FMKEn/BsvF186Z0fzY8cVIFJTEKigk24HdTX3bnsndbyJ/xy+GDkoxZTPJd/Q==","signatures":[{"sig":"MEYCIQDpOBddk6kh2qJbtBav4abMEnFCbzN5U7hU4NBIJGsajwIhAK7Z9EdDwZcRCzQrDitlqCSsRw8/sP0UDxYN1QX909zQ","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":570998,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhAJRPCRA9TVsSAnZWagAASzUP/2iuP95wmXqQ660mpVPV\n54PXVJ6/8vQF8sOwu5rd1jbNTs+dVGYQUwIOIcWIfPr2P4z4F42gip/Hkowf\nNVwy0R6MKYZ57wQhsLgs+8WuQgW/l4gyZUPdOKeDwVOpoRgY9d1J5x00cyNu\nNFzGx2aZ+Mz8wRqPNdgGR8+1m6Rfs8fbkRxsJpjekJ9XulH9lqEdmrBwLAyH\nX0ZjR/fMHce1qkgLZ4TjDJVaHdQP3oOyznefGxCa3om9O22P3roB4gP2E0pw\nv8rT1n7KqFnHxhzaVZdaw2xYxXGj4rn6pYLrrfyB4pStmGag8vJlnqw8mMhk\nKw2w2XawuhYaDnganYflQ0Ii1GPbtRe7vsn4zWgQaf9RQlY+Sp8nvjBsVPpx\nQiAKdGzShU5Gai3M4h/w/IBFcvwC6daXMAayUaJFM6dBDdEU1qn/acXPI0AM\nqEDq87sXDbip6slrTLIQigpJIb5PrpzceRSzw6SzySduty7u0mPGKreMMzDv\nyrlipN4TJyIicwuTBmLApImRPrMGVWlAKF13v0FvrvK05pTaOPVbq7Dwr+PT\nAgcFFa7Vd9+2VTXsTKcbOtgOnmwtquD/YRHfib4Kn8Pota7c0ASazSY2aV3G\nfN6VsJZya6KcqjE+0AtvQwCmEoDRZpAybmzemieIgRRBXsYj7F414p5qx5uw\nlgy0\r\n=IUCF\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button/styles\";\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.**\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n**Note: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.**\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button--icon-leading` | Optional. Styles a button with a leading icon.\n`mdc-button--icon-trailing` | Optional. Styles a button with a trailing icon.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n\n**Note: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommend always including it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color-or-map)` | If a color is passed, sets the default container fill color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`icon-color($color-or-map)` | If a color is passed, sets the default icon color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`ink-color($color-or-map)` | If a color is passed, sets the default ink color to the given color, and sets the icon color to the given color unless `icon-color` is also used. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color-or-map)` | If a color is passed, sets the default outline color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web 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/density":"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/button_13.0.0-canary.5981207f7.0_1627427918900_0.6643683065541257","host":"s3://npm-registry-packages"}},"13.0.0-canary.83bdd0222.0":{"name":"@material/button","version":"13.0.0-canary.83bdd0222.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"da74f8971d94e10940a89cd8a07084ae09f66d98","tarball":"https://registry.npmjs.org/@material/button/-/button-13.0.0-canary.83bdd0222.0.tgz","fileCount":40,"integrity":"sha512-Jj9/FpjtEVbTW4ZpPEKtC++itu+9wKX0TiDighFWOypq4jiqpfJKwYXcq9kwI1+em4aJ2ffaP1AlyzpoAyy/Bg==","signatures":[{"sig":"MEUCIAzGnzhJmVPn+gotOcXEwxtMRxZ34awsCDqyKAFeoTw9AiEAz57+pV4Yome9OqGJvfFudc3XzhE62m29v6saRAi3sF4=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":570998,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhAZM6CRA9TVsSAnZWagAA1ksQAI5xWtgGos99ekj+tU31\nGZrCNNW425JbKQhGBuqdJmqgvYgbBwKh4HHDsygFt1bEutvUXw28DKE5tPm0\n9wLqHj6En3NVOFUmeM56XwdsvbY6rVcZAbgYeeoQE3VTKSX35OA4VfuB9PRC\nM+rGv72xmAs7OrGkUzJLEVCSBATHul5UmuAr1Qzk+ivjKAJLliYqg/+69qUm\nyOh4n4O6JqIWWFUBxdohG8MpObtyzAYoD8oPcTcYeuSs6BCHVnY5vRi+utjv\nRED7U+16UYojbvlgWqLFPRa63/fQNMNrsjfunKw59R2cAF+P6m2IvFSz0BDh\nwy9V3Dird4TcQLqgDJLKqUFkdvkeDZmXJcNmyRbhy13Gc6KgrvartNpPawJc\nSLH13sQhzYIYZofHoa5bajEnjnRnougT+wL2nU/JbIux3D6ogWLB2WOJBv0s\nNL9V1oYhPHk5I60ho8Iq3/lTxQw7mFYrHVU0pVyuq3wKfyl7OygtOJaX3M1U\ntyJmqZCxpC2ruHqt34xjC+fqFiF84+hxV6BiPW3n7kPtJ9/fla31TSdFjDYn\nPAcE8urxCFNx+p+GLHPPDawiB8KERZ5Lb2WDzR1NJgllwZD/JjwwdoGRIWnB\nH69e1bNVILL5+IzXa+0rBoAYEehupYCl/5Yl7UHrGTKJqo5dh1q6JT6ASrPU\nfbwy\r\n=yMx+\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button/styles\";\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.**\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n**Note: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.**\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button--icon-leading` | Optional. Styles a button with a leading icon.\n`mdc-button--icon-trailing` | Optional. Styles a button with a trailing icon.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n\n**Note: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommend always including it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color-or-map)` | If a color is passed, sets the default container fill color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`icon-color($color-or-map)` | If a color is passed, sets the default icon color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`ink-color($color-or-map)` | If a color is passed, sets the default ink color to the given color, and sets the icon color to the given color unless `icon-color` is also used. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color-or-map)` | If a color is passed, sets the default outline color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web 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/density":"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/button_13.0.0-canary.83bdd0222.0_1627493178420_0.009015904420119458","host":"s3://npm-registry-packages"}},"13.0.0-canary.28656298a.0":{"name":"@material/button","version":"13.0.0-canary.28656298a.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"293a510e19feb7fdb082545ab9fc57bc8eb354d7","tarball":"https://registry.npmjs.org/@material/button/-/button-13.0.0-canary.28656298a.0.tgz","fileCount":40,"integrity":"sha512-tUf+Zb69QyEM/6e/PHCpgnXFvft5W+xCZt74wzeQoo3pUrwCz6R8Pv8tWl4SJfi+djnVGSrquwNTqlPPN/l/yA==","signatures":[{"sig":"MEYCIQCHee1m6gYJvahRKb3deHaMt5Or9wNpN1OkrLjjtwe5iQIhAIlHpoZaG4YtF7HIGL4jlNp/5Z6T0vuoUWhCJNZbEPl0","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":570998,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhAu/NCRA9TVsSAnZWagAA3VcQAIgz/NuzWxA+G329xJ0+\n5fp/YvvowfPCoZtxMk3hzIPjfoUzPCJXh3M9zrkhpaEOlDk2fsY7Q6+sDCbm\nwD1mZOAXTZFr+3b8JwC1XxEgV9zwncAKvQPaDKHcfTHUK/wrmt7JdiAuPs5x\nJ/CVvtKNw9v5hgTzOkD5iJjui2HmuQAAGe9JlL5SVvOfmFeoFrBB3mChGS8A\nA5rPXJt1cuzLTTXIu870CNylTH53Kx6XYjV/gbqyWLwgoqUjOCfYU3/zeO+B\nLc2OAnbbcvqF1MBRGe5lshsamL18WGs7CuX/nR5MKRFx9Wk4qUO1wtjqXcCr\neJ1d+PCi8+spNEMjyXofwOQc0SxJZZCIZbQmbGyOXnvabwjdBYHTzUxwbOPG\ncxyEGa7bK8SPl/kqQhqY1Yyz/uWlqUOYXYKzBnQ/7BnTeaHAqxWAdRHuDRx0\ngRQ/f7ZZVtfWvdWpEgSZiEk2PzY+AC8gREYIoTYg+iiLz4pc/8rb1FoEWClW\ngaCjlWCeHJ5mrx1Rh2++DHid41Q2sD3CsT8Wkzj/BDcKkOuUnsGgU8YuokUz\nxKGA63RUr+vSUiNK8YnynVdmS3/nqS4brsZyxjxc6Wnmg3ZA6aVaz6gDaYj4\nVQ1rF+GA+Mk8D6xduFeWPGg1Oh+R35uoBDKnaA+PpuZn0f6JnWTmNR/WVblZ\nnA86\r\n=30Uk\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button/styles\";\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.**\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n**Note: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.**\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button--icon-leading` | Optional. Styles a button with a leading icon.\n`mdc-button--icon-trailing` | Optional. Styles a button with a trailing icon.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n\n**Note: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommend always including it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color-or-map)` | If a color is passed, sets the default container fill color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`icon-color($color-or-map)` | If a color is passed, sets the default icon color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`ink-color($color-or-map)` | If a color is passed, sets the default ink color to the given color, and sets the icon color to the given color unless `icon-color` is also used. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color-or-map)` | If a color is passed, sets the default outline color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web 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/density":"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/button_13.0.0-canary.28656298a.0_1627582413351_0.8906787679776969","host":"s3://npm-registry-packages"}},"13.0.0-canary.9e797daaf.0":{"name":"@material/button","version":"13.0.0-canary.9e797daaf.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"058bf1bbcacecda2833e6c654a047b383e4a43a7","tarball":"https://registry.npmjs.org/@material/button/-/button-13.0.0-canary.9e797daaf.0.tgz","fileCount":40,"integrity":"sha512-zUDsUwpGozhGayjUrRXHAGM09NTov6SMNXZ5m8oQwrX2rG4OZJaKR79wp5xncs3jlrHMFh5YVb4X7cHB676KOg==","signatures":[{"sig":"MEUCIQDgjpXQ4zl0e9bIPmrXDQ0aL3vfeuzuxWbE5lXkDCobegIgUISWoCnzrIc6DelUMDCR3BoFFnd8wlll2/a0PWSeG1U=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":570998,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhAvUECRA9TVsSAnZWagAAO+wQAIE9fbf+HbyXJLMBufFU\nKoWHHzYS27Z/4y9gTGJ9gfWBJKRCvV4cnHr1Syd2y0ZnHuvKqCyKsr1ZVjYj\nHxGn4r7B21fyMKyIME1w45dS4gytAKbfVJcKC2XB+Z74OESOOK1i0LelpdO/\nYRRtNop3tusVZeIluukQ1GjElxPRPwYEwUEhWnlQBo1odv0wDwdCHGFtKQ4D\noMwM9F7y9kh5rx4eY1HjXqrOnOa5r3Hem1oRxl09w1V1+FWCfx7mcEjgJP2z\n4K6q/6t+EXCwqL7Phmbcu5fgB/KvdDIRE6TSGvZwZXvf5jO98vCdMc7KTPDp\nl+TFq3b0iX6sqzJKeXkUch9RWj5rO/N+zUb7gq5kIBibQcdnqFKSn9sLG06A\nBD7YHDHtNs5f+2sxrJqazFU+bX71XQ/cE1vg3SzjQh6gna3pXa63jIpYaRk3\n8yEb2Bm25cRWI0deE8G1vpKCW8gCDHCQEdFofbOvruaBhw32Hed6pqNcd2fD\nco8ke0HJlUM+ueYFfogrnvWv5Ektuvy60WA32Cz5CReZGnyvqD6UkIMq+Dcp\nzu88uFADIc6Ulkw/7wl7xuXeqsjjf4CPVFyGa1Y1rnRGrNTCPLv6qLMcauye\n8+xeWMTU3rG0UfGwV7Osj43Jc7yF8oaT1pZDtUvXL33aDeIJuLduUKvw/6yS\nkWkX\r\n=q0Pe\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button/styles\";\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.**\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n**Note: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.**\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button--icon-leading` | Optional. Styles a button with a leading icon.\n`mdc-button--icon-trailing` | Optional. Styles a button with a trailing icon.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n\n**Note: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommend always including it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color-or-map)` | If a color is passed, sets the default container fill color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`icon-color($color-or-map)` | If a color is passed, sets the default icon color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`ink-color($color-or-map)` | If a color is passed, sets the default ink color to the given color, and sets the icon color to the given color unless `icon-color` is also used. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color-or-map)` | If a color is passed, sets the default outline color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web 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/density":"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/button_13.0.0-canary.9e797daaf.0_1627583748318_0.24735671736067566","host":"s3://npm-registry-packages"}},"13.0.0-canary.adb9f1ad8.0":{"name":"@material/button","version":"13.0.0-canary.adb9f1ad8.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"cb8ec500d348a900b3e51c5e40003e713621dde7","tarball":"https://registry.npmjs.org/@material/button/-/button-13.0.0-canary.adb9f1ad8.0.tgz","fileCount":40,"integrity":"sha512-XQ9uvO9lFUU622gRpltjR/0PaojwFY/77KVI22PyCdCBZLLgLmy8XzauIi0nZrP+3kwim2UY/jsGFV+Fq7qKPw==","signatures":[{"sig":"MEYCIQDfnWoiXjtWvTMATsf2gbeFevi4bqt4n9cYzS6g8JnpUQIhALGDIlUoL7TeRGj5UZVCYgqmthgRzWrEZaW1EYipr3Xz","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":571626,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhBE19CRA9TVsSAnZWagAAD4wQAIpuiRbhyBbMQSxh1/G/\n2GjZNaisT7RB5I83VnzqHUJ+o0cAPTOz604AE5yorlQuvAxjGaMznm0M73ky\nl+3E0y2UaXL8ezZIuHPvd2pyTlZXVUM5jCuo3W9rJcBjgrLi8Qxi9uVLlPk6\nWd2qypt+gQGuu/TmeFnx9Tn9oO8LtwK1+30z+k7YOcY2MZS+OWEM/ZVU1j8t\nOzpOBgPx8Vp1PJ2dfYrpmI82yPDI57+g0O9liQZ2yupD2v9LMF3ECvUVmm49\n72Y1RQPCfnqiZO/LWbFUHQaJBlIOmPQxRQJW7Bd9WN2x5TMG8pkywv3NAsOv\n//aZJw48Y/WBFh4GVrfISrN2blsSifrtBcX+Zy8hYmcCWNIxsAbxxXb653s1\n+OV9/wiUlP9iDthXkpVcGYWdekqOVTCHbB7zr08yNJksgZNvKBZIedCVJxyD\nVnRvIFrAyydmiCesyLE1fdjCP5rfI48WTzDpHWsmUkoOcxWBBh/qBXngumZw\nqw3LTriS/Rinuu6Uv9sg5XKIfPglOAW9TV3tJWeRJluN5NIu3IUTBfubllsp\nn3yMUmnHmuv8rskk4T36EHVoPwHOTrKp2N9wLYL6qVMiPkfha3nSWNiZrBO+\nV19t4EcGmTKfxlgZS6MMzPDBvcjwDWnfPKlFOo6X+yTlrJLSK1uClT7cFjfR\nOPQY\r\n=pgkC\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button/styles\";\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.**\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n**Note: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.**\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button--icon-leading` | Optional. Styles a button with a leading icon.\n`mdc-button--icon-trailing` | Optional. Styles a button with a trailing icon.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n\n**Note: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommend always including it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color-or-map)` | If a color is passed, sets the default container fill color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`icon-color($color-or-map)` | If a color is passed, sets the default icon color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`ink-color($color-or-map)` | If a color is passed, sets the default ink color to the given color, and sets the icon color to the given color unless `icon-color` is also used. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color-or-map)` | If a color is passed, sets the default outline color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web 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/density":"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/button_13.0.0-canary.adb9f1ad8.0_1627671933207_0.12665562163523547","host":"s3://npm-registry-packages"}},"13.0.0-canary.cc5377458.0":{"name":"@material/button","version":"13.0.0-canary.cc5377458.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"862cc3015f8d641c6aa7099cbd8416462a8cf0c3","tarball":"https://registry.npmjs.org/@material/button/-/button-13.0.0-canary.cc5377458.0.tgz","fileCount":40,"integrity":"sha512-pTfIV0AfqAmQGFuvsV42NQu4EF654hpRF6ijdSz63aMojjdH/YQM/r4fNOtDFpJn40mINVYUz+bOUoPhe80R+g==","signatures":[{"sig":"MEUCIFF8T8haafZR95tPguhxmkwy83sm1FF0c5Up+H1Hqvb5AiEA2ARKn85ZQERejqnn1i3rN62nVcxV44GoqaPecmteSfA=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":571626,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhBHA/CRA9TVsSAnZWagAAb14P/32kJBlHnBtO/KLap2/F\nV5PhdgKfylZ3V9pLwAQ8ncOHYw75gNTBoDPEXhy5zC/m3/ucg7Fj82P67AjC\nG6T7Zx0uwmg0c0A5GL522QYZRLZoplZ8oo12xpsN9Vuclr/d5c44s/DQif2i\nE8Y51WopPpkd+8ybkSk/LQFLLc/ExpNm+KXjaQlyXkMo0CdM0ZmGCoD/Quuk\nTtzQWem7dTp3t2POvP6KiNRbagNWv0Ln3t6kvpOnuryWAdmfVSinClcBMTmg\nbKkqHCjJ7G11XnvCR6S9kjB6NcQik4URpNcah/mq7xq/5TnJpwOLy4p23F8E\nZikbociBYE4SYV/ZM3ST/HVSW+qGPzx8tvfJ79PX/ZLFjZMg8wioZEhyGcSi\nnUyyqUk3LfBwoVjLcfCIrsV7dbxj82GyCAy3fQvvoXEx2fufaRcT/xmWiq92\nZtirYu3V8rtrJ3HmS6yEGgadqadfx1IStvW/E3qAsS1WX2HSXFpSl36WBr7c\nL4COLWH6Km0IMH83HemQURewzMUO+8SkeymyTBBc7gAxLOqF0deVNXK2DtRE\njndqhe7SZSRR67CNs8LkvNtyVrsiCoTDtg/Fe5Kie4LIHIsOIKYMcLX/oyzY\njUZPGD08Qd+8+DjU3adooSaaNaZI5h5vwDmuTUm6lOcr3vOn3YHcsg0XRZ3s\nAFNl\r\n=LPOk\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button/styles\";\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.**\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n**Note: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.**\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button--icon-leading` | Optional. Styles a button with a leading icon.\n`mdc-button--icon-trailing` | Optional. Styles a button with a trailing icon.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n\n**Note: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommend always including it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color-or-map)` | If a color is passed, sets the default container fill color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`icon-color($color-or-map)` | If a color is passed, sets the default icon color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`ink-color($color-or-map)` | If a color is passed, sets the default ink color to the given color, and sets the icon color to the given color unless `icon-color` is also used. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color-or-map)` | If a color is passed, sets the default outline color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web 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/density":"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/button_13.0.0-canary.cc5377458.0_1627680831498_0.02053487183657121","host":"s3://npm-registry-packages"}},"13.0.0-canary.a395972cf.0":{"name":"@material/button","version":"13.0.0-canary.a395972cf.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"d33a6982fcd70e6f11c4d2f6ac0af8ad7ff79dbb","tarball":"https://registry.npmjs.org/@material/button/-/button-13.0.0-canary.a395972cf.0.tgz","fileCount":40,"integrity":"sha512-Li7x4jLU91FscmTPEFmHGYooNyac40UCRBLgQQWxxdia/Q8tnI+i5cT2RqW56xspwT6jnbKoHGd3ZEi14tzgMw==","signatures":[{"sig":"MEQCIHfnruz/umkAZlwwshAl23gX9vKoiRd0pfwDTIVTpSpeAiBS8Feb1g/z0mgB06oY6cIvk+a1x053ShVCYdi+6ajEGA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":570661,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhCbPkCRA9TVsSAnZWagAAKg4P/i+llAtziY4e9lm2fXoM\nPwKQv3cW2VL0EAfo9kdW5FTaBncbopeqK9ml5kdCSQZwGfPxbvMhOlkB316G\n8tP/LeAKSiMUahgABvf7fJqEpPFg4NfT7jh/YPXabBwzN8tLWp0rhq6fJ0pE\nGb8ZUAw5uJ2j7+8FKNiNTU/RP/SgT8uu2Yn81MsSi4JDeR1IZXXcyLT8aeif\n+7tfDtIrudbPVOtCCZ1awHAk2PQbMoyLZ2BnHmnuYUwMYxAuOh6sTTYG6zhs\nyIlvhvzzLD8ShGinIGbdqZnVNVsq3MFeFIYIe2zzoEMVIP8O9sKkwVOY3WOE\nvXeBoTr/uxTMnrLxAUNBRIALniVKjrIS2JkgM6tA93vuvLdct6JPVWM1mV0V\nPdXr1KMagZH/2OqbUs7jscDVxQHarOaE4jPM8p8U9dwApR0961tAm8TfLCsC\nJAjhXNq9sCQ6VJVbYL7cVVPUDfXp1UScKBwtI2PjRoKzCKcEWPacCvgXKUG6\nBFWlI6+cS9KD7N8WKQNBuC3fGGN4EjuzxZaGWJoU9oCcUI/zl+03xZ2oM7YS\nswYZl9Bfb9LILxln2/uyvIgT2C1cFreKvmizKhzZQr1ax1w+0L+tuCCEm63c\nKQRZymPv755DF5UlIFkYdR2t/HhBrwbkdnrZLDf3EeNtswhee8wIBQ4qjno1\n1ZPw\r\n=TEsF\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button/styles\";\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.**\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n**Note: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.**\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button--icon-leading` | Optional. Styles a button with a leading icon.\n`mdc-button--icon-trailing` | Optional. Styles a button with a trailing icon.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n\n**Note: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommend always including it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color-or-map)` | If a color is passed, sets the default container fill color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`icon-color($color-or-map)` | If a color is passed, sets the default icon color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`ink-color($color-or-map)` | If a color is passed, sets the default ink color to the given color, and sets the icon color to the given color unless `icon-color` is also used. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color-or-map)` | If a color is passed, sets the default outline color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web 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/density":"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/button_13.0.0-canary.a395972cf.0_1628025828281_0.4603473549197359","host":"s3://npm-registry-packages"}},"13.0.0-canary.7c96e6b98.0":{"name":"@material/button","version":"13.0.0-canary.7c96e6b98.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"6106fcebf0dd2eac1036bf752f1aa97d85940769","tarball":"https://registry.npmjs.org/@material/button/-/button-13.0.0-canary.7c96e6b98.0.tgz","fileCount":40,"integrity":"sha512-dYS2fuOWPmHQ79qksuQZElSVKRomfuYPPyrvTMsw+dVqtO7xR21l2IywIpqUQzPUjlXICOa09zvPW+8yfs6I8A==","signatures":[{"sig":"MEQCIBhI14WhZD2Z/KQIfnTkNzLGFAGOquElyIOx7Uv5dW9rAiAN92IJuK+henH0ThFIZFxuo35oxc+cMEFdcgq2fszzPw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":570661,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhCb+9CRA9TVsSAnZWagAAwVUP/2g6t8+Hh+kBMGNO0qj1\nmqMYAcAAFRTQ0FC442SAE1tuno1vPLdTypMxKsCBU512fDFWZ1vj03KvvDtS\naiC9c0odl+FkzoqcBlVPlhdnNG3QZ8LV8/QfCQ1QxSMMB9gSvE38kI77w9Pf\nfCPgrsHowyDGNKASugFB5D1YGkp9SNGlub+07+hLoxNjE8wSGqUVFGJ5W5OE\nUBK9ia01LJIeCP4i6TY3Hx2FmHvn3Or+kXsnlHQXtfiS5qgWhWNx/9SINwaF\nsmNrZBnyc4ACsyCKJxeXKmPYE/tCUAEZdYU8IPXshSja8WCTOqEGf6OPUkOy\nZPCSe0JKwt1MqvkzGXbKGR2vw7zRgtR9KPZpDcMDgUfJatL2N+lG6XNLFZR/\ndvfxwHXolTR1VedC/7shyHuWr7kZvol/yyfIOhDGRH3QeZxVvdj90eYprVYN\nk9RgvcowmrV3HGI6vgpnfJiHzWhtB0ovk4Byox0NDHMtbJkhEj+pAexqteIr\nGjxeCsHzm+vpJ+ryGBnQnHPvFU5iKL0yyG9jSMFJVHWFLOubs2AJb5+qa8hk\ndVqiBjn6RG+m3HUuZ/LoqAXROyd6UV7aSyJRyPSMIwu7adueWfcrZLzPXzlt\nFnQBG39aYUaeajO5LuCfFrMtb3VzkJ2ObMSqd+Z4U4eDQo2ij+cpaOA8OXOW\ny9d3\r\n=3XhD\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button/styles\";\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.**\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n**Note: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.**\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button--icon-leading` | Optional. Styles a button with a leading icon.\n`mdc-button--icon-trailing` | Optional. Styles a button with a trailing icon.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n\n**Note: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommend always including it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color-or-map)` | If a color is passed, sets the default container fill color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`icon-color($color-or-map)` | If a color is passed, sets the default icon color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`ink-color($color-or-map)` | If a color is passed, sets the default ink color to the given color, and sets the icon color to the given color unless `icon-color` is also used. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color-or-map)` | If a color is passed, sets the default outline color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web 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/density":"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/button_13.0.0-canary.7c96e6b98.0_1628028861631_0.07887909920002789","host":"s3://npm-registry-packages"}},"13.0.0-canary.a80c8b2c2.0":{"name":"@material/button","version":"13.0.0-canary.a80c8b2c2.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"c1dde75618fd13382af2053a320b304b4dd131fc","tarball":"https://registry.npmjs.org/@material/button/-/button-13.0.0-canary.a80c8b2c2.0.tgz","fileCount":40,"integrity":"sha512-P7vcKnVKTVoFVukxxy2AgzZ/EhrY9WX5uDpmy4FOmO2zMWaBQgJCh5zws9ug57k+rFE74+/ScQfOvtgiioyPaQ==","signatures":[{"sig":"MEQCIGuv7m7PcS3qD8sht+C1TlsD4anN/v8QEapFnghbPv7xAiAswAWUtLPG6Stcii1cr57Px6fVt7u0ixn2Lc668GJK1Q==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":576264,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhCyoOCRA9TVsSAnZWagAABEoP/12OSWCtA+QKjmzis0fy\nR8ZgxyAmE2HHDqPbnZBbvZwYmqfvoruiiJ5x4Lp2Ss6D2/7EvnFbjCWAveqe\nJJVGyljo3HDfwEYgxRw7IM0yPJm8pi7u+dqdcTrSRNHbwoJhb9A8fIAmT/GQ\nEI6Jg6gxpljfjaEkMUd5qIiqF4N3z54Sqf0E5EJLwpsI7CMXNNKZwp0nN45l\n0U6PZOv1i/YEoNQii3IpFTGYGYHpNHPrhxrD8xZnPHb4RW6ISsUW3B2t1gbr\nzcg2FQSD2vYDOz6KCpR3SfTb7VWEGoPe/TELokrTeBeKtwyFKeDFgLn+2fWf\nhLlDf/om8S32/RwXZ0gmkP7T0sYA52KUF+XxkGi0Uc5GpgCugD+YJSGIn33a\nzTrXxO8KB9Bd+AHI0wZh0Rg3wA47tNWlGhrcGgLLuF5tT5XJEfSxBmCWw8uo\nfQ/ohr+evUjvDR+QobmFi89NLNf+W3pw6EfP1uiJ8DefndOvMMV0busJZvbA\nHT4n3SKPn2Lr4YCAq5wGpLTnFtiaPgBSNc87nTvgZ4KVJX5OSZV3fxniDZ+z\nCtY+l4VSXeP0sbHFvU7drmDjRUBBksABLjbqF5XTvYn0ZjnUSvztGCDj6qw4\nTguLXDFKexyIvVP7GvmrBklO/vUExbiAgTgl8OcPBUMhgQ9HdVOEgxWWxwlP\nGHYS\r\n=KRB5\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button/styles\";\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.**\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n**Note: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.**\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button--icon-leading` | Optional. Styles a button with a leading icon.\n`mdc-button--icon-trailing` | Optional. Styles a button with a trailing icon.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n\n**Note: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommend always including it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color-or-map)` | If a color is passed, sets the default container fill color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`icon-color($color-or-map)` | If a color is passed, sets the default icon color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`ink-color($color-or-map)` | If a color is passed, sets the default ink color to the given color, and sets the icon color to the given color unless `icon-color` is also used. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color-or-map)` | If a color is passed, sets the default outline color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web 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/density":"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/button_13.0.0-canary.a80c8b2c2.0_1628121614461_0.7945520375413422","host":"s3://npm-registry-packages"}},"13.0.0-canary.3dd611091.0":{"name":"@material/button","version":"13.0.0-canary.3dd611091.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"a865dc9de0cf4f6d41214004c84766086f352787","tarball":"https://registry.npmjs.org/@material/button/-/button-13.0.0-canary.3dd611091.0.tgz","fileCount":40,"integrity":"sha512-qGoluJ4bJx8f9IVJb5Kg4SUSQjN3MHVt9R0oYnhcYP0hAD4wjBF9Abv5KO8qhY56sei0PQOAgfojrfo5haYtNg==","signatures":[{"sig":"MEUCICqTXxKjfWbnVgRY1AscCYbt3m6bdCESskxwPSOV45eLAiEAmV2DHYTramsZomhHKiRbvBqKfCz5p6yXUutnq6G4rtU=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":573906,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhC2GJCRA9TVsSAnZWagAA3zwP+QEaGuWJvCe8IBz0O24W\niUWN5gMZItwIdpVCcdN/pwvGmMOW6idC9nWfutEBLenNBcr524fHGwYszs+G\np0LZfUMByt3cH/eqNdappq6vQzDPCJD28eTeeWKfnJvXIfEY9cYd53IhXcm7\nAPm+ysNDFsORCM0tJF3PLwnPinCTAEshZBd9TUaiwQy8BK99W96s8q0+PzZO\nCjJSBE3C8ZIr9EQhAoift2DeqGPjer+H4FeqzZ9lzzHsz3z1xewlkO1CxjLp\nSH3eOsBNsriRseW9N4GA3Wp7KR0ON/4wHQSFmI6oLiuC5nv5+6W861Eg4tLX\nqoycb46GRDgsSSP2ZzMmwFTtXwjcPb45UFBKI+Hg23SFpeaiZk2VkIxK242n\nGiGOGmRl04SjKL5KHEy6sJ8k4aIDDrDEmhucOjlYW7zgITVLdwIv3lpB3e/8\npB7YU4OLaD+u0xq4PEdJknWP0DkQq2BV21r0Vvy6W6HsMYU2tAfROjrzt8/y\n+LgA9+PkaQL+YqHtgEZFmeUtcvpfjBGSzcoEnkP0BVcM75C1FAaZ9eZdEJrB\nGYsTiWzwFZk6AxFv9HVDwjKaYZjlR0BYSA5IXG28tShT9pNzVf0ZqYNeLB0E\nPNOwo4f2BwGOyKoTSyvEPX0+agogDHJiypnWvzhZO9XGERlbCrzhK2K6LHIM\nloYo\r\n=moFZ\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button/styles\";\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.**\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n**Note: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.**\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button--icon-leading` | Optional. Styles a button with a leading icon.\n`mdc-button--icon-trailing` | Optional. Styles a button with a trailing icon.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n\n**Note: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommend always including it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color-or-map)` | If a color is passed, sets the default container fill color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`icon-color($color-or-map)` | If a color is passed, sets the default icon color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`ink-color($color-or-map)` | If a color is passed, sets the default ink color to the given color, and sets the icon color to the given color unless `icon-color` is also used. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color-or-map)` | If a color is passed, sets the default outline color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web 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/density":"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/button_13.0.0-canary.3dd611091.0_1628135817137_0.6190163626499952","host":"s3://npm-registry-packages"}},"13.0.0-canary.5dee37ff6.0":{"name":"@material/button","version":"13.0.0-canary.5dee37ff6.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"b9cbb0a69ac2373f12fb048a86c116d41e3373e2","tarball":"https://registry.npmjs.org/@material/button/-/button-13.0.0-canary.5dee37ff6.0.tgz","fileCount":40,"integrity":"sha512-AESIOzro4VuW5xsZfsn1bEWe22cAY03K6VcgeAP1nJJwU8UrAOOtHpY9bPovQFyiX0UJsgP8G/UoyCvvKaPrYg==","signatures":[{"sig":"MEUCIDp32+BkG1pJ2Cr+Qd4wsiWKkPHU7gKzXt5Wd4FupEXoAiEAzEpd/wHQgpkEM0fvfeog90HhlyFg5oYRbBbpmXk83V0=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":573906,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhDCMWCRA9TVsSAnZWagAAI5cP/ROPvOKz62J3w70eY/jt\nrhCzHSjl0X9xuJIjErRAhFQA+NjxfL8V8SOAaqda9oSHsvpnn0A+AnlJiLll\nLEv+vX5GSccMR2GMyhOzEpXkXuRKZksA8YNSoDAJ5OYkZtS3QCPlzJRPlwjG\n3dd4fLuxz5iIjm7Pqc7QV7L6nSzs89QuHcAJU3OUIBbvEVBRhq1EN60WdJzv\njLG35aRbGgxcKx/dxtP3AGtkBstmrIQAjdEnWaQi4yCWzwAgTfg3Q7YCP65t\nfVgpvjPNDAivjTT7quQrhPOBPk+8f62Mck90IL7KfMJ1jkaSgz0MOqyYSdf1\nrF6WTSj1TVpnN2WpnXm1H1BH3hkNvwy72au0o9JLJIfGRtgyzheMColy91OE\nv7kyZr+k46NyzmWS8amCTLHV8DGpalHekzrO67RzJP5vz2PC7d+i3QK3EpSA\nkhdNrdeFGfXkBtBKB0pb3nvsk8WIcKDSwjEBcWR9BT4/qUKlKsZV0/uEqY51\nnEyH5rTpFTVve/mRfv6XIB4ZuyvV3rxHC38qVIKLMx+egdMGiCo00MfeSKOQ\na0geVp01gLq0Wkz49JXYbVhAcWj5kLqGGQgDa92BG5L9uoIIdxEiept+BuvS\nVtkmfkNhR1WKhNPTpvANqs+F3RYAL1Tt1jEbzrLkpnS0GHoY7DBWDxTjkDNn\nk5Av\r\n=hs/H\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button/styles\";\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.**\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n**Note: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.**\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button--icon-leading` | Optional. Styles a button with a leading icon.\n`mdc-button--icon-trailing` | Optional. Styles a button with a trailing icon.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n\n**Note: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommend always including it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color-or-map)` | If a color is passed, sets the default container fill color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`icon-color($color-or-map)` | If a color is passed, sets the default icon color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`ink-color($color-or-map)` | If a color is passed, sets the default ink color to the given color, and sets the icon color to the given color unless `icon-color` is also used. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color-or-map)` | If a color is passed, sets the default outline color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web 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/density":"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/button_13.0.0-canary.5dee37ff6.0_1628185366732_0.6260446342637795","host":"s3://npm-registry-packages"}},"13.0.0-canary.bf405d22a.0":{"name":"@material/button","version":"13.0.0-canary.bf405d22a.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"92ad7b57d282739428369547c601dfab99a3941e","tarball":"https://registry.npmjs.org/@material/button/-/button-13.0.0-canary.bf405d22a.0.tgz","fileCount":40,"integrity":"sha512-Q/RQTUMPPCShUrqS+mMpAIh1+4nAUg2dQs2LI0FOFEXf+Iryu+kq+CD2Lgd3jAomYvobaBPiOKTkk4hcZ8PuGQ==","signatures":[{"sig":"MEUCIGIt3m+d/mx4IUMVut8De91ZgBOa4/8UFppsjwpQKx4IAiEA7whcsFQuz8Rl5TKR6QesmKbTh3tEkg5JYgjcAMQBIAE=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":583430,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhDEecCRA9TVsSAnZWagAAEdEP/2tJ+jS2b7CiCFU2Xn/1\ngEVKUyyJMckkYILTZ+RXPRmhaHFYwT7beYimW/eXdbh5KCZ8nW0Pb0cFx/ni\nc+6uML75YrQkhc4v+Bvi7TWPuQ6Pxem7C7x2JW74erKdXCKfwvViHpEAwprF\nlnOa40eZB7X4+VWTBIpUzuVyohZc5+9u4PJgOhoIaoSXTz/19kya/qZHTDo+\nof0i/ZTB0VLaEgdKfkeJAwlQBrao3gybrJKuaGFsRk/nfxpofkiad2r+zlEK\npdznPO41ny4NejXNYEWQ4a2+050WbZZXwpj3QEZNLXGiyLizcxzx61/A8AVb\nHkHXcG/tCi0P3kMgXc2c7t+ZLUDkBlXZUt+CZGNGOOSvUCSQEQuawBYJa0yt\nVvgjDLIwIuEFP3b1gxRDmmmWUDHmw/dcrCrSSRbLpKhkvgpGxKhgWvJtZ2I8\n5sKoA8EgWbLpX3RlS9nLzp6Hd1V2SlXlVkfdnQzzpDarS/qNY3l34olcyVqq\ny38PY5Rk1mvkeRYWsQgcAKn7LRl+7ZehUPznnqL7H8hu+ehISFY52+C4fneT\nqnSvKDKsvMcbwqBfq0pB8FRrLqgPWoro9Z3KS78xS2Olf5JRNtw/pxkvPwMc\n+Sg/Qrqf4hdFBWyDHrOnN2qQHz/3uioTriJ67sSvAz7GqAV2Gd8tXVBsJUPy\nFF11\r\n=ap/X\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button/styles\";\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.**\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n**Note: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.**\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button--icon-leading` | Optional. Styles a button with a leading icon.\n`mdc-button--icon-trailing` | Optional. Styles a button with a trailing icon.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n\n**Note: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommend always including it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color-or-map)` | If a color is passed, sets the default container fill color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`icon-color($color-or-map)` | If a color is passed, sets the default icon color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`ink-color($color-or-map)` | If a color is passed, sets the default ink color to the given color, and sets the icon color to the given color unless `icon-color` is also used. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color-or-map)` | If a color is passed, sets the default outline color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web 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/density":"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/button_13.0.0-canary.bf405d22a.0_1628194716290_0.38330422648224904","host":"s3://npm-registry-packages"}},"13.0.0-canary.b47dd37a6.0":{"name":"@material/button","version":"13.0.0-canary.b47dd37a6.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"d16f319cd7fe4f702d0946ac49ec9bfebfe04429","tarball":"https://registry.npmjs.org/@material/button/-/button-13.0.0-canary.b47dd37a6.0.tgz","fileCount":40,"integrity":"sha512-0hQ6f6xpGsHgB2TtMFQ/8i9rlgD+2Kx8p4BwbZ4YfEN5k0KBw3EbkO4gPgMtAgv5CAlIJpiJiTEkvwPs+9Zr9Q==","signatures":[{"sig":"MEUCIQC1nMwzcO7KQm6nwHFcO1N6Wwamfl7QaIYixiQfj/SnYgIgVlExXGKuomZmBweFx867sTP+fE0P2kaOXC4NOnuJiWU=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":583430,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhDE8QCRA9TVsSAnZWagAAr3kP/jckH283FoeBBN0qpNUY\nGfu0j0acdp5E03vu8mnj3QHCHZHBLbVvKtrzeOTWUzoMK1be0tHGvTWnJc8b\nf/eghrTKlcR/szkARupsADpmKjMls9hUCleQnNsiRFh24spv/PwfFNSpl4wD\nhw28Y8REsTcz0/S+ystH81y9ojXkUGwvanFWe8R3l6EAc9+b//XxHXzcQD4R\nEZAaru4Hs/ijZICoZcBWQC9s/jFbKrgRv7nPEWnpqZE2d3wBrxYGolkJcNpv\nwmxQVowRBYlwMsi0t0K9YVBxCMzJosgPQGSoLw74sDmNE6dI5jACfkIzAHQ3\nlJeAXI/TZNeOVSy7waFxzKEXuzOAtOH1zZTowP8FRfIX8eGcWndyLIAmVJuf\nwMyyThZWI8zcXtd+CPaG29T/cdjE9J8aOM5Kyz2L7+JAqYLS+JTD5Y62eOiZ\nEBlBamfS+V5aFWjhFhkNErZQdKEaQKmoV0YIMjAIjaAwzjxtSLwPdA8hcvHb\n+QzPZwLClNZPSzANB1iui1rRk+1vLUo4l3MjiN9mNkiLP47GVDwE1V50+OXt\nhvfC1MxxF6jOIAw37/uzxSBECTdjFn3baBS19URDf8g3WAfUH9s/r0jIsHBY\nhHcPPbTUQ4KtnbMer6sJaNffZ3XUOgJ4SpZkWV7bJRQofAoN8q9zi8FMNAlW\n5+M1\r\n=hx+b\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button/styles\";\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.**\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n**Note: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.**\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button--icon-leading` | Optional. Styles a button with a leading icon.\n`mdc-button--icon-trailing` | Optional. Styles a button with a trailing icon.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n\n**Note: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommend always including it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color-or-map)` | If a color is passed, sets the default container fill color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`icon-color($color-or-map)` | If a color is passed, sets the default icon color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`ink-color($color-or-map)` | If a color is passed, sets the default ink color to the given color, and sets the icon color to the given color unless `icon-color` is also used. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color-or-map)` | If a color is passed, sets the default outline color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web 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/density":"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/button_13.0.0-canary.b47dd37a6.0_1628196624774_0.5472541598761003","host":"s3://npm-registry-packages"}},"13.0.0-canary.6c82b965b.0":{"name":"@material/button","version":"13.0.0-canary.6c82b965b.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"771da93df7556c0b9848e1aac556763f90ca5da4","tarball":"https://registry.npmjs.org/@material/button/-/button-13.0.0-canary.6c82b965b.0.tgz","fileCount":40,"integrity":"sha512-cQFjybYLs4DnduXg4hD6yCYRQwAE2/w1vjgLY1jB1murfwSiiBaId4hv8uvcux62zjB2XUqVyE/lY+P0cI0DOg==","signatures":[{"sig":"MEUCIB1GGGC2dN4fsMEBs2ELfmYdeLHiqJlqOftyBcWqDWR5AiEA9qiFDF4aPO1W1xJslO7QODJV12T1IUIVdeX1fYFKOHg=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":583430,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhDWAZCRA9TVsSAnZWagAARHcP/jjozkY1AFIOtBgc55v7\nHlPjKQsEWJrNgk00EeqXrZ35k4ySVDZiiHfFr0cPtN2mAd6DoPsr2+Z6cAyw\nXJTtYgsfnZBtFzwdS4ywlQb/f1Iby7QgLDpNsow4jxiQ7171PC8YmSSJNjrK\n4xS/j7Pp559Rx/z3Ocy/qVB6rfEinxjZStuBwJWahO22Tx0sJlwVjKL/u8ps\nYmoxMRTO9Uxah2o5fTG8qfEpyXX2bRXBRQ55eBbKZhZatlnmez+M5XJdajCt\nXoEzu3W2F34rt5v0jwfQqwAU7ANICtSJxk2Om1tfOC+e7851nmx44SJeZFY2\nlgjIaFfOyLoL1F6YD8H1xukwdZENHjJ9lkhMmZ8cstdgZe+5DXV/QjwnmFPf\noI3VXMjJEfSnja4r++C27foS4mUUjbI18PP2D5+7rdeHy2UlaSrnpuya+EK7\nz8k/QU6K56jt6f1E3OU2crsDX3gqipucovbzgB9IIk3aqH2KZMe+zk95ri5h\nQh5wo1kGeCR8sl3d5tiEXL01Q9X/4m2Xy16wM3FZd9uJR4oqPm48tVwQPo/w\n48K0zZjv6cnenJTLh+PzI1EV147Pua0XKcSF+0/WbvmYwqr1mqHPc+0a8Hf1\n+A2UzrxnrrkDB1TwzqeIfe2vl1cCx9rfFMg0x+zS41aYfaUBlpN1vyzAdUtx\nL9ra\r\n=P1bE\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button/styles\";\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.**\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n**Note: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.**\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button--icon-leading` | Optional. Styles a button with a leading icon.\n`mdc-button--icon-trailing` | Optional. Styles a button with a trailing icon.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n\n**Note: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommend always including it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color-or-map)` | If a color is passed, sets the default container fill color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`icon-color($color-or-map)` | If a color is passed, sets the default icon color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`ink-color($color-or-map)` | If a color is passed, sets the default ink color to the given color, and sets the icon color to the given color unless `icon-color` is also used. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color-or-map)` | If a color is passed, sets the default outline color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web 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/density":"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/button_13.0.0-canary.6c82b965b.0_1628266520927_0.6857940259031758","host":"s3://npm-registry-packages"}},"13.0.0-canary.4ca11fe76.0":{"name":"@material/button","version":"13.0.0-canary.4ca11fe76.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"84be861aff3e0b86a5a0c38812876111bab49e2d","tarball":"https://registry.npmjs.org/@material/button/-/button-13.0.0-canary.4ca11fe76.0.tgz","fileCount":40,"integrity":"sha512-bUw6xe7h5htwz0tgvrDTYAVV42ToALiBjO2wCP3CklAxuJVq9e2a8iebDka1f7r50ARuPrjXilEH0fIxcPKmBA==","signatures":[{"sig":"MEUCIEK6ag+ADZ6JokfvxfYnkzsXSC/AsflxUDpto4xpvetFAiEAusVPQLGPaxXMX5dWeUXPjKIPhUmQJubHCpJOHGzb29w=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":590494,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhDWxqCRA9TVsSAnZWagAAkXQP/2a7cE5J9aR9xXn1Bexp\nmtl38WsXGTKR+8pZiAhJPmnto3Zpm4M7rjygGiqdK6TQ419PfaHtsp+vNY3N\nN4ySY6JPA9ZcSrAgy0TRxhCEyAPRA7JGnS1G5fjZ0IMsxcHoCevOMYCYe7Fz\ne06j3dJ5c4NRBgrM4rKa3uPtMLatOHU0V+Hl0KPZAZQo+J5rYVXrIEGqXdop\neXSgyq4uqPxVff44L1VaiaDi1i4kX/ERlIHGI6uc1LGVrQLNS4rHKbnYdmug\nygIfD0X1VPMZSHb9NhvNQ3Dx68vl0zTFbR2MDXSsleyCSKAgetw/sGEhjeHa\n9mIMr7AOV1YQqyYXuDF7lL+p5KCkpHIJzWF1nsM19XnXMykMBoo+EqQefX/c\ntUs1yCsTw3BrOmOFBDVp1ql6KWS5sl7KqHy5yX9Lx4vq5nk8hvznTQwQBncs\nb62HCW17eeLmcxehS24vAxHax52UoGKMs97smtLe09TwkKqLUtJf50NsNBQP\ngiKcSxq+RByMPfBLnchohG9+k6L+qgIz9LvKSpgGgvkeqI/6Rpxj8PO9v1kI\no55Ljih3+UtDzbWy2OV+NUcpDKR1RgODwBuR+7/vy3u+vgpIBh7CIQbKdbDv\ndVq9qppwPs4yWcv1gHSvHqI3+UxSVRl4MSsKFWSv/hsnqL1tuNDftyKRGkns\noHgD\r\n=drXS\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button/styles\";\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.**\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n**Note: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.**\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button--icon-leading` | Optional. Styles a button with a leading icon.\n`mdc-button--icon-trailing` | Optional. Styles a button with a trailing icon.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n\n**Note: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommend always including it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color-or-map)` | If a color is passed, sets the default container fill color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`icon-color($color-or-map)` | If a color is passed, sets the default icon color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`ink-color($color-or-map)` | If a color is passed, sets the default ink color to the given color, and sets the icon color to the given color unless `icon-color` is also used. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color-or-map)` | If a color is passed, sets the default outline color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web 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/density":"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/button_13.0.0-canary.4ca11fe76.0_1628269674333_0.18720477744747832","host":"s3://npm-registry-packages"}},"13.0.0-canary.510cf90f2.0":{"name":"@material/button","version":"13.0.0-canary.510cf90f2.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"93268db0b6d021f2a651eec8a755bd506145df07","tarball":"https://registry.npmjs.org/@material/button/-/button-13.0.0-canary.510cf90f2.0.tgz","fileCount":40,"integrity":"sha512-gtLzlpjJM6JDn6XYDFoqIhfg9WksBSzSnTsWzBTKo2RtZA5xqryk7dayt3E8PJ5T4Zpi+jCGQWk6BZQ1oADl1g==","signatures":[{"sig":"MEQCID7zcwzCSTGQNeKzWfr7C83eh28OR1jICJRqtVcOEcAoAiB+vcUXfsh8jhXzI8hxvtub8qPjTfiun9uvMWtyj14tLg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":590542,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhEWM6CRA9TVsSAnZWagAA9pEQAJ4Z7uIvd4qbR5lVMfLP\nnSzw+hfrsTPe5mdBACaHegXxYuJjeNjiLS96ZQCF0+q9l9S865kLfJBgzr5x\nKsoB2iT52Dd1bTVRAc4l8GBNErekUqjw7YFehK/9rD1vEwYRsAHinfh40JHB\nKHZS4BmI7HEnll0nn+9E5Pf2sL4Q7NXZKb7Fq9dKvcNJvQSNQxE8wJAtOeqa\nWA1TaW8NPyxw6orXNgylQuidaujNzDk8AwuFhUfvcFwit0X0F1Vj6lmpFccW\nAODyAgbILLxKXhiIs0gHaBUKZmsJZofBNKBCuMbxuYXba3YGHjSQcvIff6hO\nI3O1CZPurJwdzrAmi+HBjJhA3nf0vD6LwJB7l1VRZ7rOS4SVzQ1lXr3mx0+J\nbhCBfXYA3WxM4o2HWeV3rbk6YTJ/rl/8BczHJA4Aqb3m3yccjm2xAjJ/PX3I\nPo/aNEt54Ox2DzbunjDcxtAKTW7lMmimgVMW8wlWQ3s/qB0mPzRbI0IjLlbx\np74+4W3YhITeNQLyPvj4fVZjHytJgsDTvSKG5mlbbbKNMlKihgyina6rZDl0\njyZkw3bUa7PYqI6rvRqPiRsrO3GLHzRNTCH9EA3JnpNVeFFVDXwcYJJL8Fms\nug/LX56bXAaoxvg0Al7RKPqQhN04aNp5RhcH52BxgLORjWjoHcam3gRhLI/i\nv/SY\r\n=8IHQ\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button/styles\";\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.**\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n**Note: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.**\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button--icon-leading` | Optional. Styles a button with a leading icon.\n`mdc-button--icon-trailing` | Optional. Styles a button with a trailing icon.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n\n**Note: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommend always including it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color-or-map)` | If a color is passed, sets the default container fill color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`icon-color($color-or-map)` | If a color is passed, sets the default icon color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`ink-color($color-or-map)` | If a color is passed, sets the default ink color to the given color, and sets the icon color to the given color unless `icon-color` is also used. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color-or-map)` | If a color is passed, sets the default outline color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web 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/density":"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/button_13.0.0-canary.510cf90f2.0_1628529466412_0.47585694052986804","host":"s3://npm-registry-packages"}},"13.0.0-canary.17580ebf7.0":{"name":"@material/button","version":"13.0.0-canary.17580ebf7.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"746d353cab4debc8dc788124f8fdc32b9af01e90","tarball":"https://registry.npmjs.org/@material/button/-/button-13.0.0-canary.17580ebf7.0.tgz","fileCount":40,"integrity":"sha512-Wb66pAnFbPAQ89XWH+qSaW3oJdVpJtrz4gW0AIUNg70fuzejn9WzuJRzMiLe+ub5rXjuD38C3VSOaf6tKt+5Iw==","signatures":[{"sig":"MEQCIA50SVhI7ZcRA42oRHE0itcwy1TvHkmOkVEn7hWvf5ecAiBEESOokxZwgTATg07rweG/bK8grZEy9EfQJTCXfpXqbw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":590542,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhEXFcCRA9TVsSAnZWagAAIIAQAIkHzZtw5iKrvilDhbm9\niBWAVthPV749t49vZyE6yMSKPJFqSulC92kdOjW4jTnmcvQEmlUjvZH8UEoa\nihgGBpoGdMfvdchLIpTifS6WrCXqHkjIS9VNh3Q0SDMQvKY9UFRRlaGfuG+5\nMtxvHH6kvxd7o8f5hBmiFOly/bL85YzobaUlA/GM5VDYbTPObYN4lWxpYDTV\n222yT/HjLX6MFyWAASacl6CFb/ti/BwDhJJTwyygeVKJStBNWnKoK6NtOBI+\nhteija+kvjmlNVhc++r90NYmG55w2y0vBdmBpV5ntOHswDs1Gw+7t4ym/jlC\nQWn/coIiz/H+zNLKff6PEw4sZnNFCgfkEkIqmRdUUkay/Kh7f7V4cMK+G/YR\ns+D3gsfWeDBr9SThLb6cHqDw+iLKkqLo0IHGbSpw7LV++0TGPj0kVSWzCjhR\nTyvDzLGUZa2VnnqdZ/4FhjXBcFVYrSP+Shfnp0OzdJTBxzSqF0GQIkHJT8XL\nRLC9+zbaY7QMyB/BHNnOdbKOvJAuqg8vEAfxM34ylj+Afyx9sUbYR2rw0YuD\nc1YnCjljBsQPuxN10ECpwajbqiEj9hLmxGJAqO/oBTC+FH7cfFTFQcr9P9Lv\n8JNj/GJsVYj+01hCJmMOvX9sycU8HzNJ5sDGGIUXCv440eZC21Q2u1z/FIwi\n7wvv\r\n=2Hk9\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button/styles\";\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.**\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n**Note: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.**\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button--icon-leading` | Optional. Styles a button with a leading icon.\n`mdc-button--icon-trailing` | Optional. Styles a button with a trailing icon.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n\n**Note: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommend always including it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color-or-map)` | If a color is passed, sets the default container fill color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`icon-color($color-or-map)` | If a color is passed, sets the default icon color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`ink-color($color-or-map)` | If a color is passed, sets the default ink color to the given color, and sets the icon color to the given color unless `icon-color` is also used. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color-or-map)` | If a color is passed, sets the default outline color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web 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/density":"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/button_13.0.0-canary.17580ebf7.0_1628533084738_0.4721174293371462","host":"s3://npm-registry-packages"}},"13.0.0-canary.7249a3060.0":{"name":"@material/button","version":"13.0.0-canary.7249a3060.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"f6c046952e82fd3e0d79233148e95ac1a34b0b61","tarball":"https://registry.npmjs.org/@material/button/-/button-13.0.0-canary.7249a3060.0.tgz","fileCount":40,"integrity":"sha512-rGGRpir2GuG1L+GCUmad3MWoZCMMzAwaSOVKJq9/0Z6qa9VUyXFy30Yitd7/r6J435hYaijtbjiGA/YiF+PSow==","signatures":[{"sig":"MEYCIQDxvYOpth3cFTQil/I1NCjrPYcLC6c57meMrSeZ1UP1DAIhANmlt6cFxxgaDh6DmLlrrz1Q4BQLIrX5qyxP61+hsrQ8","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":590542,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhEXJMCRA9TVsSAnZWagAACJkQAJV8tlAGKuqyJ98oKXCw\ns4xeCzpzwUCTdE+g+HKkC5nDcKbxeu0emKDF6e5VWduxEUms3uG8czVwpTbt\nVSUba2rkt2dLrqOvj3Trx9W76NPtjGA+SBmv+HPgRNLWVWE6v398n0akYWAA\nSRwUMvKU0zm2evFKpisVMRE9Rib1vCUQGNh3sGAK1DZbUPVid/l4gF7nPgvv\n0vd/snbMFTtHWNbP4NiwqQnsn818upCN4Sfk84e5GZVNQgcNgR6YjZWnYCSd\nGHEdVWFiMXW/HWa4fgNHUqi+LX7zeEi07XKdmaueb/iRLlsSYJ6jJtAoUOw6\nd9boK8oP/pFQcfflp6csOZZzBL5mXDVqOFSb+BfRV7DaRpLJosvi1Qep6mxo\n0E2Zg9TWSI32MfKVzIILHvMvbZFjNxcFdY6i0V8tXAwCzGNCWP8YGMSnEwkR\nfvmMDilacJqw89gwxn2VnyCIl/yVAgEkX1W6apg7Y3ndei6C8U17977NdWbP\n3XcDhpYmu2wgbkn1xGYqC8brrYnDp0h9J5tUvPbapGs4UG/KFhbAPhDoI/Di\nVRxh8eQNUXFMKrJZqrJXB5e/kMlXua//qJOa7efO8qOALjqciYFfDNXZJcPn\noh6wlCSb0lJNc2DozPK3Cb0fZoFBA5Q/5EbpJeT5GwDyhGp1pdalaYss/U+E\n7eEU\r\n=ytmo\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button/styles\";\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.**\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n**Note: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.**\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button--icon-leading` | Optional. Styles a button with a leading icon.\n`mdc-button--icon-trailing` | Optional. Styles a button with a trailing icon.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n\n**Note: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommend always including it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color-or-map)` | If a color is passed, sets the default container fill color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`icon-color($color-or-map)` | If a color is passed, sets the default icon color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`ink-color($color-or-map)` | If a color is passed, sets the default ink color to the given color, and sets the icon color to the given color unless `icon-color` is also used. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color-or-map)` | If a color is passed, sets the default outline color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web 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/density":"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/button_13.0.0-canary.7249a3060.0_1628533324733_0.3981967195565801","host":"s3://npm-registry-packages"}},"13.0.0-canary.4c405863b.0":{"name":"@material/button","version":"13.0.0-canary.4c405863b.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"2bece4ee5186cd9de022672898ece3b8496ebaf4","tarball":"https://registry.npmjs.org/@material/button/-/button-13.0.0-canary.4c405863b.0.tgz","fileCount":40,"integrity":"sha512-2EUrw9QnC8vul39GjNoFkwJDQP6/zXqpQndlgTwkj+KohVS3tLUsgfmy3SSx4mdFQf3jLYypw0ITy6b8yBojRw==","signatures":[{"sig":"MEUCIFVYrYqJxn8p0JhuDX9hMKCVzTJbYxPUFs0kplLC8iF0AiEAll+aoru0sAaA8idvpZJZeIBe9HglqltW4wtTBVRLvzw=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":600989,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhErpDCRA9TVsSAnZWagAAjuUP/jWKwjMC2e09NDBVXbMT\nFutvsrxcvbmmC9roT0c5GkUcOurPtLhCs6CMYmWhF72ObBrse2C6mSol0sg4\n4pVis+Eyfn0WdZwQNR6jGz7C7WQJ2dkDhtYSESc9J6HL1Xir+EEREepTaRl+\ndxppu+XUX+dSDWldYHcZxb5Xv28UXyVcA/nkATHjeMekBoswzoTsW0uiM1OQ\nCN6KT/ZuAaMdUesmcKshFYu8r++Uz0VmBqOEqbk2v5XwhhMnGK+Qvecq5rxt\n+7XiV42AcGw0d8C7IuriMBBw5j3WfqCE2AtJBgTcy8lpXP0igEq+wW+xHue7\nPjky9MuEa3uW7t84conpO9C6AFu13IkUiOF6B177XKozo7/S0DqongvCCy4D\nhx6M7j7i2OBRvtDhuF0aqfLXe8XUKlWV+g5rV0M+gKL7yzuMLIAB6SjaUBE4\nsNRgoIYL16dsqr3C3xXtpJV7jiqsIc4VQdsjfcpLxOuUtPAcacgp69EezJs0\n1e6JppWVdNf1VpXAC0EJZ7ZIrhsmd4moTkK5VZtvmAf09dwEUzb72PChWkoy\ns1WNdDN7JTICLoohFNB3/1MayTNwAgUSH+MaFiUdADFuBlAANvN3sXzyJUGU\nVDrtfFip+tQ8HYC0AMeAH0yar72a86aggvfdSd8p7qlmQEE8nONSHlwIqB4e\nh57k\r\n=3DAc\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button/styles\";\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.**\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n**Note: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.**\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button--icon-leading` | Optional. Styles a button with a leading icon.\n`mdc-button--icon-trailing` | Optional. Styles a button with a trailing icon.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n\n**Note: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommend always including it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color-or-map)` | If a color is passed, sets the default container fill color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`icon-color($color-or-map)` | If a color is passed, sets the default icon color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`ink-color($color-or-map)` | If a color is passed, sets the default ink color to the given color, and sets the icon color to the given color unless `icon-color` is also used. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color-or-map)` | If a color is passed, sets the default outline color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web 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/density":"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/button_13.0.0-canary.4c405863b.0_1628617283472_0.37477676826778494","host":"s3://npm-registry-packages"}},"13.0.0-canary.f4241a42a.0":{"name":"@material/button","version":"13.0.0-canary.f4241a42a.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"7de5adfe2e2b396d17671efa48cf17249f147a92","tarball":"https://registry.npmjs.org/@material/button/-/button-13.0.0-canary.f4241a42a.0.tgz","fileCount":40,"integrity":"sha512-Rb3bct3YtgzhaQNyblxXuyLcirSxdNAzI7xk5ICaohOfMrD7pZtVa8jhhCzc/XaywJVlwiaNYcTv+0sAX9kVUQ==","signatures":[{"sig":"MEQCIBR5h6vrcwcXfaJtjyE5H6H2+Jk4ZK3Sw8SzkYsO/Ht4AiBoO1mazq1i3rnaJDeUKFtzAZjWsktm5urrHgFycV13Cw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":607649,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhFAIWCRA9TVsSAnZWagAAoe4QAIrIU2KyVRRGbv1tlQar\nUJDaQN0y+sQBSo4fQAFvFXIyEQspYuaMmzYtec7k0zWZgPitI/1or08kmI4P\n0rCWn2oj529YDZmsfVaMt9pz6qAmWZ4scbD8T8RDqBv5iYHsOjDRbCRNX8Pi\nvZ88HT2lVlM7gWFpfYiYsB9G3rT3AuBOFiXX08kY8mSvQjR6/qcFRjSFWb7v\n0fePjkjLulO7A+1/2H7qDUcbVBKE9RKaKs62ct3SfYiDTqKNOyQQfww16Am0\nN14dzq/8MBqc7dhngmAuNLSyf20aTlvxydiVmKsh6XnZq+hN976vN4tkIXJP\n/S6Be9eme/Nc8lvPViZmO4oSeh/OVwCvb6WtNrWTE/6Ed6d3yp9+g+orH1I9\n8/DbYQgbeOg2ard7qkAmfqfR4vX+2x4aWOnhkH0qFVC5ofMsd4CeIi54aJNk\nm+sTyL8mF4oSjWYr56B7r4fXytKcAsFVZSpTHFL4o3fi/vWO0qlORPzqXgnG\nZHRHzwLPFApIQ5qyBwKxrKTN+qon1Bal0RCyWbi20SXgqeBTiYHaEiR47/4F\n5HKOYFYcdY2U6FrInHbDWqAbezesgGWLsoAZOv3d28jkELRYeoKxtouK8ikM\npJt4Uhh/Yu2sLZivvWZ3mLWD84eu6hRLWvwuVWg5yyRAI2ps5Mkivee7HNml\n2vLI\r\n=Eht4\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button/styles\";\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.**\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n**Note: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.**\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button--icon-leading` | Optional. Styles a button with a leading icon.\n`mdc-button--icon-trailing` | Optional. Styles a button with a trailing icon.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n\n**Note: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommend always including it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color-or-map)` | If a color is passed, sets the default container fill color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`icon-color($color-or-map)` | If a color is passed, sets the default icon color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`ink-color($color-or-map)` | If a color is passed, sets the default ink color to the given color, and sets the icon color to the given color unless `icon-color` is also used. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color-or-map)` | If a color is passed, sets the default outline color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web 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/density":"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/button_13.0.0-canary.f4241a42a.0_1628701206587_0.18353336797620434","host":"s3://npm-registry-packages"}},"13.0.0-canary.0ad12ed3c.0":{"name":"@material/button","version":"13.0.0-canary.0ad12ed3c.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"ca7ec85c22025fca67dde6d8473710ccd180808c","tarball":"https://registry.npmjs.org/@material/button/-/button-13.0.0-canary.0ad12ed3c.0.tgz","fileCount":40,"integrity":"sha512-HMTu9cxYxHTqCzQZO0yB/f+KVZaVJc+KOyUIoeTtp45nQPucySOlyBWD357Q+1i1ZEP1R8SY3+3dRZWmb6x3Uw==","signatures":[{"sig":"MEUCIBDgYWPpAR2VvdY52OGK1noc7NtJ+uMURsPoYr+jALLrAiEAprp4TsUNglP5uDhF+6rlGccFM5PqnLJhFsR3kRDX7rk=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":607649,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhFEEsCRA9TVsSAnZWagAA/uEP/2LaDINHxbFi0433htRl\nhdXPi1rfcPQJxn5B4lGL8Dp4O/uRdGWbHsM3BVoq46I9ZExIyQsLcD47P+oe\ny0z0vgF6vKfnaMc72gwakDjkH8xdIgEB8RZ3s+G7ni75s+xJQL3yONhDOXii\nBAnwjDMe0wUyL1m2x2vqXCNeeepbT8282Fc+XCIc57AUKpyPRvUHfECOf6XJ\nN7q88d5BXEJZuy8MNfkhVfgEBONo1+izTWKsWws7IzizagvkQPVkSpWA/XXF\nvb1qxjQoDAd41O5j00RM34pciK1SEVhJ5LgEiuasO1VXfuwIspdhy6Ht3v0h\nhfqNROvNaA+YuJRc9I6LLcAwuqgOM2R/R0Q/W6P05+kEBFgW9rZEELv0Pd0D\n4IkXvGzEZl514UR/J9/P8A8OQm81qSoFWKsjaYbglM3/TXg+RFEe76BEIt8v\nvR1NilKCrd2rJJpSnzzT9bReESoF3YH0+bsvI2F6cakpc5CXvSx1QNsLMBnt\nVjW6CJ2O7f1qlPYicLNkrRW1YNnHTsBoBN2AY0qKRS3ApyyTokIh3vWbK9Qs\nBzWTvvvvJYGdTfY+4JcpkP8gucyp3RaJ9EOJ04eHF8c6zpjmCbmU0hi2YvZS\ni3aYJqp6lPN+qmB+HvnO0Oz657+I2IT+sre8yHe7Vwo5MZ6cnPge5tKOm5Q7\nrUvF\r\n=sRR0\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button/styles\";\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.**\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n**Note: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.**\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button--icon-leading` | Optional. Styles a button with a leading icon.\n`mdc-button--icon-trailing` | Optional. Styles a button with a trailing icon.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n\n**Note: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommend always including it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color-or-map)` | If a color is passed, sets the default container fill color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`icon-color($color-or-map)` | If a color is passed, sets the default icon color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`ink-color($color-or-map)` | If a color is passed, sets the default ink color to the given color, and sets the icon color to the given color unless `icon-color` is also used. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color-or-map)` | If a color is passed, sets the default outline color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web 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/density":"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/button_13.0.0-canary.0ad12ed3c.0_1628717356172_0.3345010463163145","host":"s3://npm-registry-packages"}},"13.0.0-canary.077dcfcfe.0":{"name":"@material/button","version":"13.0.0-canary.077dcfcfe.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"bfcf4e55c74f3e495ea9a00c42320a5c54efa493","tarball":"https://registry.npmjs.org/@material/button/-/button-13.0.0-canary.077dcfcfe.0.tgz","fileCount":40,"integrity":"sha512-pUcVDC7YDV9xtjcr4N8irt2wzEpSmDyL4+SURDX7AZ8gQzUxHDCDYhI1YHrzNw2JTbMPo9kMFyU7QZv478aeuQ==","signatures":[{"sig":"MEUCIQCvXw1b06vJuuNT+eMnBS0XeY27WMpEgG8F154yU8KfvQIgNeUW9+8NAxpGfmNWHvhOaUXbeopjV8eba8uHr17xlX0=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":607649,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhFWClCRA9TVsSAnZWagAAvbEQAJyfO7tgTks1rQLaim2R\now/qRvzFC5OX4/oRMXl8sQH3Xj6EojjGf0GJcBXwOth5PoLffd4R0DQ2kzlg\nyZanL+9ZNcdoB9vfAJcBRIpbaCzsEoVJT9FSKmlaMCi6sPv8jvFk93WMuK93\nENV169VaExtAuRpau+5CqO4wg6D4c+HFmO6XkshGEQUyRZh/l5O2JLhKdKb7\nrkV6HnOmG1RF0pOLTjDGocmqFQm2gKg/IIvF1Dz0TeNuQQ0SmkW12eRZuTQF\nY4n6sEkZURQq+I1F/oKa22in606ulyzMyG3mxdwYkTHebai745tppHR+RKlh\nGSM9afjbjt3k640s/C6BgxqYEB6PoOu8qGdf3xmyjGvjEo/LrtUep25YpheS\nwJj9nIxSF16QiPk8NsZBlG8XfcF/VAwCVYXsOCuX1tl2xxJcBWkevZPLDQvR\nCT/zxPA7QKv0WSeE6OPYvHXbv6dqPyU+3QoD1iwmjRGUrMNPC1vjCH/nyGtO\ndTjPXZeEA1hotvxB1seuA89zwFqrGDc68St3CntOspMrB4Ho714IgQ/5nwcU\nPxWtjkpx96BuSRDpJDXCRZdkfKnZp9Vk0XIFTeAOkjUtMqhxCAK0KXI3suES\nCu8pFVv3kK38Tzp18ckBU190m3YyRH2OvuyKjPWq119LbXsXZgmiyOHY+S2a\nZBM0\r\n=1FcM\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button/styles\";\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.**\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n**Note: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.**\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button--icon-leading` | Optional. Styles a button with a leading icon.\n`mdc-button--icon-trailing` | Optional. Styles a button with a trailing icon.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n\n**Note: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommend always including it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color-or-map)` | If a color is passed, sets the default container fill color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`icon-color($color-or-map)` | If a color is passed, sets the default icon color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`ink-color($color-or-map)` | If a color is passed, sets the default ink color to the given color, and sets the icon color to the given color unless `icon-color` is also used. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color-or-map)` | If a color is passed, sets the default outline color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web 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/density":"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/button_13.0.0-canary.077dcfcfe.0_1628790949032_0.5821946995112095","host":"s3://npm-registry-packages"}},"13.0.0-canary.e3346766f.0":{"name":"@material/button","version":"13.0.0-canary.e3346766f.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"5860103f4601ff8d2b8524ce341bdc1ad0064aec","tarball":"https://registry.npmjs.org/@material/button/-/button-13.0.0-canary.e3346766f.0.tgz","fileCount":40,"integrity":"sha512-JTKd98sgwUNUsxoXgvMkshSIglCjODJgy+RMYTlZi6F6ts9CHguqaSONorFxeLh+1uzOHyQ5VIQ6uYJc6/Qx7g==","signatures":[{"sig":"MEQCIBaTM5o2x1fYFP15Z9r9DeugdIwZmrqvYt+xLseGU6B/AiBhrjDRmdcqxlbi4TZYFk2jY/BZE7oorJH7yo3H9mNkdA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":607649,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhFsvsCRA9TVsSAnZWagAAF5sP/2q9iPV4JtW4YvxAWScu\n8FpGHLLgn4ak4n85M6JP6tkwLfa+Ixo0MfWetxtHkuDwOQBAkNQKtRSO66Xm\nAFX3bYLKhV/IkOXzL4xPggSl8BqCyopluFk7if/ThYtoTI2PWr222A2kXXi9\nd9ZA/m7iVDh4lhu3PZij1Nu7xfcGC841S/84VKBHW9DurDFCIfpxe8giT6/8\n21sw14YS/ylZWEMWA2mV1agJC+k8NDEDrqTqMGk/VY0WjkVo6mLmhONW8fE1\nJtBA4M7YQ2/+1rnYJ3tx9bhLZzTpys4/7c+qQzoe4vP/+Ed6FsOJ7c5+dY2B\nHVLeZGrhGgPsjyubvCysN9s6utpgKcWkExvofSA9jG+j0gAf0HTqUZac64Fo\nQqr9MBby1f/FNKVKO/9jyjaMNXjxXoHEZtDx8cTwQ/TKcWRIOYQMZ9vYAorB\njWnceTULPQ+TjsMC/acblfjXOqlWCzBs2tA9VBePVc/D+i79GgmRSdbJopzW\n2zVbAn1vs3qbwpu5XD4mzMrAzhXeanpu7P3MsSJTkyYuYv55RcGo03KpTUw7\n5wsvQY8PXxkwIt7Chw936LlPaajWwUP4v81TFbU6wFJx9G56GYLNyGWLSdlc\nAb+PM2VRrXiaUEif+qecOgCykNJGJ81buYd6iH5yCSUHgbgE50xS24ukqTv+\nD+/1\r\n=4S9d\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button/styles\";\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.**\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n**Note: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.**\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button--icon-leading` | Optional. Styles a button with a leading icon.\n`mdc-button--icon-trailing` | Optional. Styles a button with a trailing icon.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n\n**Note: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommend always including it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color-or-map)` | If a color is passed, sets the default container fill color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`icon-color($color-or-map)` | If a color is passed, sets the default icon color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`ink-color($color-or-map)` | If a color is passed, sets the default ink color to the given color, and sets the icon color to the given color unless `icon-color` is also used. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color-or-map)` | If a color is passed, sets the default outline color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web 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/density":"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/button_13.0.0-canary.e3346766f.0_1628883948009_0.7773219433546987","host":"s3://npm-registry-packages"}},"13.0.0-canary.2fb068fb0.0":{"name":"@material/button","version":"13.0.0-canary.2fb068fb0.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"7be081417aba8c0e5403daf2bf672aebcb07db8d","tarball":"https://registry.npmjs.org/@material/button/-/button-13.0.0-canary.2fb068fb0.0.tgz","fileCount":40,"integrity":"sha512-ed0Q61XhlP2Ba1/JFCI3OdE4neBd0zHVT216aBIiGxQU46PRhYqTSI52N2kIUmNDlk0a6C1Ma3dbsEpm0bJLYg==","signatures":[{"sig":"MEYCIQDrxIMozaDayIwq/jx17zRZSozSrKlqJD35DifUpRhEPAIhALF2xrv456CMtduOM8YWa5h+fqDVN8AKNHbdmOOA6TSi","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":608015,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhFsyrCRA9TVsSAnZWagAA4kgP/RZqJ5yJZW3vSm1s89b2\n0MuUiNDyJ1xoqxBwH3MMTKaSGjxqyKY6Y8QUT5qGPpUt1AYgpW1PhAIgZknJ\noVBWk5UpS+pl2scXiWYw1yUpWbgXc8EJ+gfn21TLZvXznskf3Q1dtaRnOqfF\nJc2l7WuelvHI89ZK5OnBDaMnln+3pH+iexEBV/9WXycHFvaelMX2sAoUD2q1\n+57RtA4knzmV/VPPfTJ43r0Gosn6OJE/F3uePZMCtI7auBMlhOXDEEzS162k\nAG2mq0dNHrhpWnHue5gOdSUIqzrB7vMEK/RFhXuMV1A2D5aIVg6u7+ADgf07\n0D+x47wzew8RkcMFlIq0xgV+Mp97mELSop4ROFj7r8o/4S/vlrpQS939ZrDA\nQop2KqHWxPVejw+TvONZR/LphbORAQ/9HT5YVBgnSXrgmZNWlAP0tKJ+J0om\nSNf96zDp4a9BqlMDhRzbfaIk0pUFWtRjF2bosprdOPfoilOvR3YyzHWtmnJE\nRoKhwuOfhph+Yfjs1jfMcWz1a90cfgYfUkJIEcljzAGRMUwXoiuvOAWmQKaw\nXaUf0CRSoNSOlTgUP7jNidrPxEohnSJTI4EuuwAd6g6CTJfm5uImmq8JkdLl\n/s2+0Rb83Q3rG+Lvl45uZNEjfMCZTFjBBQP16/+bu8oMB5l1Dhey/k1RQYHU\n3wCv\r\n=YVAY\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button/styles\";\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.**\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n**Note: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.**\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button--icon-leading` | Optional. Styles a button with a leading icon.\n`mdc-button--icon-trailing` | Optional. Styles a button with a trailing icon.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n\n**Note: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommend always including it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color-or-map)` | If a color is passed, sets the default container fill color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`icon-color($color-or-map)` | If a color is passed, sets the default icon color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`ink-color($color-or-map)` | If a color is passed, sets the default ink color to the given color, and sets the icon color to the given color unless `icon-color` is also used. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color-or-map)` | If a color is passed, sets the default outline color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web 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/density":"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/button_13.0.0-canary.2fb068fb0.0_1628884139491_0.5875259113581563","host":"s3://npm-registry-packages"}},"13.0.0-canary.fb76c5069.0":{"name":"@material/button","version":"13.0.0-canary.fb76c5069.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"80a7f30feca1eb22c696f36cd68ed9b3536398b3","tarball":"https://registry.npmjs.org/@material/button/-/button-13.0.0-canary.fb76c5069.0.tgz","fileCount":40,"integrity":"sha512-sAvWNwFgeES9H04PAEGv3jOQKQCQteGl16mUsf1KEyM9K4LcLemiI9Iy4+xINeJkX0TWEXtN8UAZDshjzMCkYw==","signatures":[{"sig":"MEUCIQCXMnQK6LDBc8X17HIIC0ALESzMCikYtuQe3mGafCzXTAIgeTkj2XhvB4kp3lacFGgDq/9NkMA51DFrLJMEa6MwRas=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":608015,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhGsXECRA9TVsSAnZWagAAqkoP/iNeTQxTNpSpZAr9uQiV\nfpa7kic6LCkJTbiXvwhA9GswcawsC5hZ3+tRXs/PXcT5K8BZyG0nQqka01UA\n1oEvHRzvjHzB/zGV63766+cK/84oXCA1gZphMwPiSJIPD+nIB55hW2hg4/rF\nYqfwDQNiKzIYQvPCQe8OwEd9lRJoXos2Gi8JJFnaYczGW98KZwc2q/a4B5gj\nyQpW0dIXsAetezy56npXIHWDJb/ksb8gr8Y9BmBkJ2HcNlLOH1lvsnv6Q67e\nGTgaJjrDUl1WLxI4k2VzBlkyKlP4mcLM7qw2wHtmttX3WUIAQx72PaBXbAr4\n2bVObBqWt+rc26nO/b++eieqBVqX5PPQ9fsH0znOqCeYDu5HK/BGwwamnLvU\nOu9AXV8gQaZl/2glGkG1iGp6F+zXpSSrBGTEP+3QrqHMjR5ZnbZNk0XawwGx\ntpqgH/bTlyd+KSW1Jh8MSR+J6XS8wRNSKUFnN8HPZSSpOa0zGUNuynawgN3R\nyOmgaCcIPmxeQLzj/wi/ZTxadrgn6A8E79Fj1pVyKpBjbpSr14ZaAH0Lu3lx\n7rDMvOIeFMRxY8Z2s0QKSZr/agWOrxYtcAoR6yNH9JXoatVXfsKCuk7Jfvw1\nt+jr/U+wg4JuAH3Dd+KgMtQPOf4nBtuib/c6QRS3AdvlQ0cNbKWfPY3tA24h\nLFaA\r\n=dsVm\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button/styles\";\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.**\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n**Note: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.**\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button--icon-leading` | Optional. Styles a button with a leading icon.\n`mdc-button--icon-trailing` | Optional. Styles a button with a trailing icon.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n\n**Note: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommend always including it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color-or-map)` | If a color is passed, sets the default container fill color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`icon-color($color-or-map)` | If a color is passed, sets the default icon color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`ink-color($color-or-map)` | If a color is passed, sets the default ink color to the given color, and sets the icon color to the given color unless `icon-color` is also used. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color-or-map)` | If a color is passed, sets the default outline color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web 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/density":"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/button_13.0.0-canary.fb76c5069.0_1629144516781_0.7013262932436537","host":"s3://npm-registry-packages"}},"13.0.0-canary.457d89aad.0":{"name":"@material/button","version":"13.0.0-canary.457d89aad.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"bf3690fe617ce29c0ca04eb5a2283120dd6958fe","tarball":"https://registry.npmjs.org/@material/button/-/button-13.0.0-canary.457d89aad.0.tgz","fileCount":40,"integrity":"sha512-vdKRETn+QgbpOxnz6AtqAN+5HIDQB36HtAJSHPkcLIwyRN8c+2vtJKi61oSO1FmK7rKl85xJz09+7LhyXiKZ8w==","signatures":[{"sig":"MEQCIEMQ+uctvKVsu98qG59syfqfnjkOuMZXB+76iCqtNEKZAiAs/wumpAk0evqtAiyuTRFWY2VrOQOyMR60IwAJdJ9cLQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":608015,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhG9QtCRA9TVsSAnZWagAAiWoP/AtuBz6ZownKHdg3a/HJ\n6BB3M8ek0GQj96Zulag1OlUd2ux/t+69w/clGIpejrA7EUU3oVlpA76zbINE\nsXc6QXzAbZ8FNosj938fZY1x/ywhcP8H5tMfUGTNuaxOgcDv5grKwCVLDQpY\nb9eMVjFFURnZc4O5KpgV2l2YHM9AV4EqFyf66UBARZg6xGU0pUV4R0hGxuRD\n7fdSgrccVovU9m/0F/3FGoXznn0SsZ6x4HoGSijQjbDtnviMR7c6tonGLPK+\n5W4V5vq34N6EoD06rLsX4E4x2a2blaMQfv1l4Gkh0uwg2QMip5XnkwKVj/cu\nol++AY+UQvQm+JXuLKEp7lbMP4gqRIYQ+ZHYZFSebJad6qD4GF6EhkU/xr9c\ne+Nu+Qu1BT5yChm2dhIgFzfSJpFsrvwYqvfQJgbyq04Xay0xskude1lMh5Ab\nbEV4nf1+y9kubDKbcDez0FV6kQMMPmgWPjzFnT+sDnQIXZW3VR9CdoWc4avz\nWPgGb7NvoZw3Pm4WTWc2RdoFebihljG/USPjAShnwhT+W259CxrpPObQprAo\nY9nNDckG6n2nU+QVdSw1I93nsvC56I8AZi2MMsqBn6wjtgaU4Cnk1ALy3qFy\nzktOU/OCcqnQkr8BxlfI3yuxRh6aoyokg0m7rZEi4z0YnjBxrfRZF7tfRW5j\n9fUv\r\n=bHyY\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button/styles\";\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.**\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n**Note: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.**\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button--icon-leading` | Optional. Styles a button with a leading icon.\n`mdc-button--icon-trailing` | Optional. Styles a button with a trailing icon.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n\n**Note: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommend always including it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color-or-map)` | If a color is passed, sets the default container fill color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`icon-color($color-or-map)` | If a color is passed, sets the default icon color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`ink-color($color-or-map)` | If a color is passed, sets the default ink color to the given color, and sets the icon color to the given color unless `icon-color` is also used. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color-or-map)` | If a color is passed, sets the default outline color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web 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/density":"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/button_13.0.0-canary.457d89aad.0_1629213741369_0.3928177468813452","host":"s3://npm-registry-packages"}},"13.0.0-canary.0de2f2edc.0":{"name":"@material/button","version":"13.0.0-canary.0de2f2edc.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"7b087980801d6a88a36a182028ad43896335795c","tarball":"https://registry.npmjs.org/@material/button/-/button-13.0.0-canary.0de2f2edc.0.tgz","fileCount":40,"integrity":"sha512-DK2SuOg31/wVycNjtIITq8+pB5bJIXz9LSCiOwqgKr6A6xMCElM4FCua9cQCUARl7T6EhALUG9GBGvZDzKs5vg==","signatures":[{"sig":"MEUCIQCkvbZVXrAyEUysTzTLJwT5RWlsHqDcEGGE3cZgwl8TlQIgR1ESRtsaMim/fby37ATq11+3nRY7BOjltP9NPhnvTxw=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":608015,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhHCIVCRA9TVsSAnZWagAAFzoP/jD/7T0K1veHOc3P7c+l\nbJB05haz6MnX+M9aY5fDWms7rgaVYT3b0DCRjZVW7hjZEgUGmCPh45LNVr7u\nyM5T30NMYGN6fRtwNaCHT+2ziW3BAVs2wRFFT4bONT70QgholaMR0toxgLaz\n0OezMnUYaxZtDriro8GQ2j9oQfxIYOcf2zTMtWxlhB1k/GaAv3/Y+gHmtN6w\nrpOrnFK6IsjHOoJhhAVm+FnKzgomlI7Pn9tXUqS5E7wLWB3MrLrU0P6aPtzs\nz1cidVTeCJRsL3t3lYraNT+UbJq59JXJ4rruvhCjZ9lTHdN7vPaoMcycOK0J\nVbH86Rcg81pg3oMjNN8pbMVA5VDY8UfTV9LIcssO9JX61CONFlwqjDh/jmug\nUqSpy3isgHE4tPMSHQO4Cm9thk2ZRTEEG5+2n476d5atL/BeGLBavxlLtWZw\nUWvjUlDHZ0i9f1rTTVbDuxTA0KfnrKm7jThBOwUfVgqtjYQ1Q6EyFJ+dhiKd\nDjsGA+/ldVdHOZCZJCUZrXkFAT7NAlpD65ibD5NnSsclPnzw+4M5EIBR//ED\nOAlDV0k+EQd24BW3aTuqLUmY2TA9bZV5yRpccxr399z8hUkgQob8NTkbwVJy\nL5T2ozPwEP8N8Arg5F+KdZwnOCyMn3zMzSUwspbAw4vqH4uIx6ihXfDyQi0W\nCqsW\r\n=/2Sg\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button/styles\";\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.**\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n**Note: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.**\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button--icon-leading` | Optional. Styles a button with a leading icon.\n`mdc-button--icon-trailing` | Optional. Styles a button with a trailing icon.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n\n**Note: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommend always including it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color-or-map)` | If a color is passed, sets the default container fill color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`icon-color($color-or-map)` | If a color is passed, sets the default icon color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`ink-color($color-or-map)` | If a color is passed, sets the default ink color to the given color, and sets the icon color to the given color unless `icon-color` is also used. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color-or-map)` | If a color is passed, sets the default outline color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web 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/density":"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/button_13.0.0-canary.0de2f2edc.0_1629233685011_0.4750388739419964","host":"s3://npm-registry-packages"}},"13.0.0-canary.1f9259b9d.0":{"name":"@material/button","version":"13.0.0-canary.1f9259b9d.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"aa2ee7237c64419d4c73e07751043af7226e5ec9","tarball":"https://registry.npmjs.org/@material/button/-/button-13.0.0-canary.1f9259b9d.0.tgz","fileCount":40,"integrity":"sha512-jrvSiBAAQd5hq+won8wW16hv/+M5jWDBXDJlj0PslhO7MlpM+1hjnWwnhrgwv1yn5T5NxEclBA3DG+wOQw3GlA==","signatures":[{"sig":"MEQCIFS0RgLGljf++Yqy/7iRvMvepETd5ZufUjJ1NujrKMJBAiAY2QZcUYDXBisQyMF6BGdCpFT8VPCL0MUccA/azsvH3Q==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":608015,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhHDTXCRA9TVsSAnZWagAAiBIP/jjYYF1kJltOXN2iu7wU\nEGCFq303WOvzqdCs1rcnMjafBrvL3gN0MBHaexjzG1ZrFU9F3Imz4ePSDyxq\ndcmrgVvI/ZWROx8VyypzKyk+Kysrp9Kbt+IE1l09l5Bv25JQ8dtJdzuBKIFm\naG2yYYInpp30sbZ8luedZbxAdDTCkjRrXQqgpfm3gXVNANWFb14EFqY1yS/W\neg1AnVCRjjUM7LBZ8ea8I5oEiyG18Xsfqrj1PhkvT9lNaI4Swz5/zc8jYeqo\ndWpgseUkxlgbkQ6IjYaxeb9inNShDIaqGBXZb+ap4Fp/MhWLh4ONWTGMhbnU\nt2FAeuwhs1MfQfCGaP8OZXpf4Hqfv22knN3Rvaqy3S/Rgvi3b9urKVOEeZEK\nXfy1xORB3JC1519G5M6U9wUvuA3mI4LcnLCvIWibB8pjpMkah5RCLRQvN5Zr\nOvIBeNG4DAGItHRTpkswh9NXKOe5Cf1sDinA0dPW7cCjFeRZcPj7Ta//kAAi\nMqVQkii1CIIdLUm0iNdF0nbpbaAaIcFaKghwH6llgrgk9eetfdHbBoYKKpa8\n//E3wWH1HlUOczVP8a1ehctU0ftPwnVtx0vY72piHF68SPk9a/LjooKK3j3D\nAhZH2e424ByE7Rq32ppBo/sKcnn4MnELiz/1id2AYlYFQWA3qFeF4mr5ozPo\nAHsv\r\n=drOS\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button/styles\";\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.**\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n**Note: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.**\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button--icon-leading` | Optional. Styles a button with a leading icon.\n`mdc-button--icon-trailing` | Optional. Styles a button with a trailing icon.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n\n**Note: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommend always including it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color-or-map)` | If a color is passed, sets the default container fill color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`icon-color($color-or-map)` | If a color is passed, sets the default icon color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`ink-color($color-or-map)` | If a color is passed, sets the default ink color to the given color, and sets the icon color to the given color unless `icon-color` is also used. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color-or-map)` | If a color is passed, sets the default outline color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web 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/density":"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/button_13.0.0-canary.1f9259b9d.0_1629238486912_0.1493380882276416","host":"s3://npm-registry-packages"}},"13.0.0-canary.3b9290351.0":{"name":"@material/button","version":"13.0.0-canary.3b9290351.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"ed91dc5e6a29ffb5a370dea70c2650e4d7eb1da5","tarball":"https://registry.npmjs.org/@material/button/-/button-13.0.0-canary.3b9290351.0.tgz","fileCount":40,"integrity":"sha512-n61GBTGGHfsuCoLHtMYPyysevy56SryEvTIE3cU4t584NFKvuShALzC0+0ebu3zHpQuYoWFOA60FRWG97E4w8w==","signatures":[{"sig":"MEUCIEGBiUequmm7/JUuGTeIjPDXn0r4IepH93xKSetWI34iAiEAxeEsNmAx3yJ7ADeTFJveMnq6B/HvOyADWl34UcCcqTw=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":609837,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhHJl6CRA9TVsSAnZWagAAwmEP/RJqA2OaqTA/++fdLDeM\n84E2kO3xGc2jKh6kjXW2fWUIevpbr+20z+HhmbCqUx9Vxuxvh7O2WLQJKuSm\n8V/RIXiPaXKgLpRu8/U9dhScCu+HMbJWNphTFEViELW9ywiSM28w3baJZRna\n1aeoUCXAIuR4YLEgu8wRWeZa4vNByMzpH9hzWjUv14SA3c9yZZz1B14Oev0S\nfajovl2kT8gjNhEsEXyThUy0etmr61QmL5R1GJxJpY2IWmbv9xmXqNCphtma\nJPRxFBU9MtRKQOrsUswscbCz+N2Zx8XcIId+vawsus4EY05s1vU4TRsgr1xn\nexglVsOj5CWRL4lRSLfQz8cKcqSnGr6Gkm17ufBrgDRBE21rGuTTxON/m+lQ\nBw2jS++lC0VZWVhDX4KR41tiE9Gg4u480C2qA9CWoCaqbmHG9s/vP1Nx0PyF\nzGWwNDgVq7iD21XiPAxpIRSp4eBXwU2xY+r1SGFOLOxzl1ywMfE1P4ETUhTl\nU76gd/ERabL4J8iUe26kQ8I0g27R3LLtxlpv2IRUWuapmLL1nVd5IXEUxSaP\ns/0x3EpG7evR7ysk+F0fRyaoc2FD6fTl7kesomi747FTvfqYvkl+yOBeouwQ\neHvhdzk7odDbV8080zxevF22uBpDyy9OV7i4Ke4XJ4P89sD3f3xSEtYjmgu2\nz+gU\r\n=xlCk\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button/styles\";\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.**\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n**Note: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.**\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button--icon-leading` | Optional. Styles a button with a leading icon.\n`mdc-button--icon-trailing` | Optional. Styles a button with a trailing icon.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n\n**Note: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommend always including it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color-or-map)` | If a color is passed, sets the default container fill color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`icon-color($color-or-map)` | If a color is passed, sets the default icon color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`ink-color($color-or-map)` | If a color is passed, sets the default ink color to the given color, and sets the icon color to the given color unless `icon-color` is also used. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color-or-map)` | If a color is passed, sets the default outline color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web 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/density":"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/button_13.0.0-canary.3b9290351.0_1629264250113_0.5180986392110243","host":"s3://npm-registry-packages"}},"13.0.0-canary.43d2eed2a.0":{"name":"@material/button","version":"13.0.0-canary.43d2eed2a.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"1d89789e978ba472beb1df55a03b11f7ebff9eb6","tarball":"https://registry.npmjs.org/@material/button/-/button-13.0.0-canary.43d2eed2a.0.tgz","fileCount":40,"integrity":"sha512-/hepTRhpp9SAXwuUE1/k8tXpqFnJOHY4NW3d6G8eun7WrVUpCEWLiPVthXIhsHHoM612H0n0saYYnklYKVzjpg==","signatures":[{"sig":"MEUCIHKQzhKh/Oz3BWlvs092PaVQJaYNszz07ddA4tJA3PLCAiEAimYcIvBTD4FjJYvVkRl4+mX8yjrA0z4JUMEqiOJRjqs=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":609837,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhHS8kCRA9TVsSAnZWagAALjYP/jSs8hW5zKf6K++88HjO\nFlOU93D/yaotk4FKC55DKIdXqTNWVBYOijjST0OF5v3D5Yr8XLsibPieXot4\nLC6xkFGjeEAjcfA/jZRW+dt7g4JgDk1IYTc/szxWAjV6jrOSt0wogt2ioVKN\ncZwOxATOLZ1dqGGb6Fp0yiTNMxKWxpZHusnhV9I+LegUnSHi8Gk/M4pJ0JOt\ntFSP+0arn9n/+6oh4TFktVs6YnIjy3VDkMTsD6LL9an+A6sBEkeEwMTjFr9I\nSH5QY7jPLL3gr8tOvrqvQGGCCme+zaX9vkfmg5Dax/lzBD0oYAGxgK1d78OT\nzsEt1olkqK6rPh0+T2vXZW797dHRpRFUHyRpn99ipgnYU6IULc6f5zztBmYd\n4W8A9XXrsqs4HzTH9vTuLVMQptZm6IYGRfl9NeV5GUqqgxhAO81wDyx1Xju3\nbotvRHPoe1x1mGONbEN2g22aTAT3MZGKaZSfewHPS0AIfJqtamAx//JZ60QE\nLYBdhQDI9UdiaLTY6qzkSl3zSldTid4GxAlLm4zY54BWOvVybN2u08zKwERn\n4LUaUS7BsPuv1ThygU6Pq14HzwIV9sG1y49M4OdDWnYsEglQZWbTk4cd3seg\nzlNNjjNf4HKJzB6ca/H/+QmoERQI8AlznXTYPGjIN5y438vq7Uoe/aq5ycuC\nV1i2\r\n=hWM3\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button/styles\";\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.**\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n**Note: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.**\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button--icon-leading` | Optional. Styles a button with a leading icon.\n`mdc-button--icon-trailing` | Optional. Styles a button with a trailing icon.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n\n**Note: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommend always including it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color-or-map)` | If a color is passed, sets the default container fill color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`icon-color($color-or-map)` | If a color is passed, sets the default icon color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`ink-color($color-or-map)` | If a color is passed, sets the default ink color to the given color, and sets the icon color to the given color unless `icon-color` is also used. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color-or-map)` | If a color is passed, sets the default outline color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web 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/density":"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/button_13.0.0-canary.43d2eed2a.0_1629302563684_0.11986802135725272","host":"s3://npm-registry-packages"}},"13.0.0-canary.0a9069300.0":{"name":"@material/button","version":"13.0.0-canary.0a9069300.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"3b1826a150efa4abaa555d05d0e43177113b67bb","tarball":"https://registry.npmjs.org/@material/button/-/button-13.0.0-canary.0a9069300.0.tgz","fileCount":40,"integrity":"sha512-O14xcbuXb2hZT3q/miTIFbE2CzMx3lkVPVjcAR6IMaM9glQx4svR6/udtwc4lXe5GRHDyKG1OzGWzu1zfmURFg==","signatures":[{"sig":"MEUCIQDx7uRBTMKFzgA3kmu6rMZ9fhqxoEXYK+tbsxU/pk9wlQIgQ4TI5aG9YCbMUjzgyCV9yhDOmhxDiL18vjyXyrBX74o=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":609837,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhHoRBCRA9TVsSAnZWagAAVfEP/2HWwz800LqFbuTNQBEE\nIhhYxqydGkH1lF1kvGwjzZfOAiNTmST/HDqxx7cOW27qSQ1NpyGuDNzThknr\nFa3cLgNgaqADsluFRsHrzQyhCbop/r/6CeoyVg5unB2huAs7iD87QUcwjqFm\nFLwRveBe+swlAfIZPjCK8KHqe7MiUjwulOuFYmYZ6Tbsr6d/USXdJA0vm9Sw\nsMSlM/moSSRzs3teKV67mn5ULMWYvyJMujxQWuWx2FRe+cXeQafij4PkZT34\njfbuXfY+qCsboZVmPSUQ4IJczvJ03aEDMe3fNRK5uNEYkS2t8kMg5EN38K2p\nKf6VY8meh9aWqTqiT8RjpIED18evXYefNshES2SeieMmx/2JFapy0QagyN6m\nrFCODSSngMJv5w1szBRnJp2OF0557X5uV1m9SBt9E/orY7g4TBG0DnWa+H9X\nIHXbZPXQdYEds2AnazFuTTdZQMxCmZquIc6lehYLwYnDfRsgrZEZuINv/Xh9\njFnXWe/IcIL/q+wRC6EChDKgwbEN+MYud9g3GJkjqOY2l0qm/L++xtEolJt5\n3DR5jkRZNi7f1HJNAYF7/lnb2ltNl0sNUr7yCmTaVP4+dwQ6ari/wwxun0JR\nzE/sbw18KHk9wj45RS0zoKsypAKg5fHDg2PoZXW9XVItjsm1SP9xhZ4ZQphZ\nJyeM\r\n=+uOM\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button/styles\";\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.**\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n**Note: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.**\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button--icon-leading` | Optional. Styles a button with a leading icon.\n`mdc-button--icon-trailing` | Optional. Styles a button with a trailing icon.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n\n**Note: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommend always including it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color-or-map)` | If a color is passed, sets the default container fill color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`icon-color($color-or-map)` | If a color is passed, sets the default icon color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`ink-color($color-or-map)` | If a color is passed, sets the default ink color to the given color, and sets the icon color to the given color unless `icon-color` is also used. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color-or-map)` | If a color is passed, sets the default outline color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web 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/density":"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/button_13.0.0-canary.0a9069300.0_1629389888651_0.2806213658150425","host":"s3://npm-registry-packages"}},"13.0.0-canary.7da413ed8.0":{"name":"@material/button","version":"13.0.0-canary.7da413ed8.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"2b9e295bf1e22ce0bce9dc8db31c42fe9aa6ce0b","tarball":"https://registry.npmjs.org/@material/button/-/button-13.0.0-canary.7da413ed8.0.tgz","fileCount":40,"integrity":"sha512-ZohV9yCv7lNxcuOpHWO05HyTflgyjbRhzeMrCLPQ7AgajJvK8qtiVLsqCTpHs2EQRJXmvlI8TOPmYLtcKTJ6xw==","signatures":[{"sig":"MEUCIQCcsXJqe+2h5MCmfSkBp7No4Dg6QDujkr+GmmXq2FglpAIgMSmVHd5KOXCkVbrfK9tdjlKG8Vz0sesopXh4wrn2/xc=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":609837,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhH87/CRA9TVsSAnZWagAAmxEP/R9BkuE5vUBE/Gm9l3dG\nbRtyY9W0vu6Qal9nnFRydhSfOY3RapBa7AQfbnLOUVKlxtrbEmj73wmGH8YV\nxv2eCTCqcfvKJ22Sui5RpZxBUfe+pw2FmptZAeYgmqzp21z/pjcG79j7X1ak\nJ97kADT0EyEsykL/l/jYwwocSVIw/BjHPUfjZIK6xdjhnEfkuOHrDnVaIK5T\ndTcfTnzOsGEtngv+eM2BrbuyJZaPIVSpK3CGfK+UMpBN2adf0LcAaV78rtVG\nUziP7ltm1KTP/4IEFiVAO4DQioX18PVDy3Tdnm4RSrXB7QGVhWa7i/Dxn/yT\ng+Ojouwhqsb5fUhcxNqMhB6kCRHADfcBzdQFlKZbM3/faMIR/NPH82AuELl2\n4Rm7x5Mcka3lF/G8X9xsvbOJLN6Xk8unJI9iz5vHZk8ZcJRIaGkkvv9AJ14n\nvTN8SRL5ujcCoqFPbQH5ViaifQz4jxwh+i/6Jpy4CBXmnSlTNqGRTtPT0OHO\nDuLQFXvOIHsL7NWWEpvokyIl9lNj1buvb/BObBTR09b7z6vF1UlVYzM0V4R1\nYElerrInurW+E4z26GoLovQqzpx6MaQCYTIr/e+h3kV93ptZKE2JyqetmvlQ\nNa/HDXhcavzjZmswTTT8WLkA37AH0FtPtz4zXmHEDAL/yU/JzZtv8I5RcMuF\nHWmU\r\n=SChE\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button/styles\";\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.**\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n**Note: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.**\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button--icon-leading` | Optional. Styles a button with a leading icon.\n`mdc-button--icon-trailing` | Optional. Styles a button with a trailing icon.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n\n**Note: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommend always including it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color-or-map)` | If a color is passed, sets the default container fill color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`icon-color($color-or-map)` | If a color is passed, sets the default icon color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`ink-color($color-or-map)` | If a color is passed, sets the default ink color to the given color, and sets the icon color to the given color unless `icon-color` is also used. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color-or-map)` | If a color is passed, sets the default outline color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web 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/density":"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/button_13.0.0-canary.7da413ed8.0_1629474559415_0.3305519226970426","host":"s3://npm-registry-packages"}},"13.0.0-canary.e1e69fd8e.0":{"name":"@material/button","version":"13.0.0-canary.e1e69fd8e.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"a1965c0fbeff7bf3d071b0cb654338a48c0e0452","tarball":"https://registry.npmjs.org/@material/button/-/button-13.0.0-canary.e1e69fd8e.0.tgz","fileCount":40,"integrity":"sha512-DGBzz83bQXWM5Yo4zExVNa8Ej/vHyVpJYnhwhNtHjILY4GlHzaP1xE36gTakh9mr/TMMppkqb2VWoBuBcQOnlw==","signatures":[{"sig":"MEUCIQD44sx+etJBxcJjoMC5dwI33mD6EYxHuU8/dmV+b7rPJgIgWa6SeDamlVAaCy6tsJkEMLqTPDJq4evlqchd5z+gJwU=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":611222,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhIANeCRA9TVsSAnZWagAAxpkP/0+ZylQCu7sqm4sbT0Ws\nKKLZHPnxSB+dhmKMih4N1s7CybUgP2KkA/4ZGABKgARQ8J2HLPvFPVpg2G7v\nXwSZHdwC/7+02wOXFkhI+/dVbGhF+TLbpg8Gnxfm6uW/+zP6o78vgG7y6D1K\ncYWRphA4GyKnc5kR38oWd5AeRE9dswKlKr2huWK5V1hJPrgHkwq6cXjFtWse\nJcg1j8BA/oBoM6fKGq6uZT6RBwGOFUxm5j3cy2RRNDBKVnoPfNBbq430tQrA\n3GiEvAu8hrMmW7MyXFSPWdSzgyD8B9aVI7LsggJdNN0ZYFGpRrrU2yqVXNeJ\nCRrlWCIOGG9KgqWFTHHDSjNkfgoq7KS+PhlUa2cAUJPMBpf8fhvzctQ52SLl\nvpSdEJBrIIVVXt6tQsjAtohv31b/56JXvHLYttNcqfX1RzPMbxT1NJOEr4Lw\nfL3TMMhvKJyQWa80T3gtsBtXLkvXGiIgTbcbaojpLC6v3ACx2/PSZxW8vd7K\ntQQthKlyl+M7GLdA3FmspVsFEZpA6NS5P9/qz6f8TQb3gGIXScqU6AFSbMCJ\nujavlrsqiaLTbWy5J4XCzGlWuuTEOAl8NsEr+H9oPNvahFdizAWA1ZeZpcDC\nNcdDJth6hQMxht+2WtgEv4pg1xSji1mjjt/Fz9Sw+mgUfwXP++6leIkoV+oi\nQX7N\r\n=Zu58\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button/styles\";\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.**\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n**Note: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.**\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button--icon-leading` | Optional. Styles a button with a leading icon.\n`mdc-button--icon-trailing` | Optional. Styles a button with a trailing icon.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n\n**Note: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommend always including it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color-or-map)` | If a color is passed, sets the default container fill color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`icon-color($color-or-map)` | If a color is passed, sets the default icon color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`ink-color($color-or-map)` | If a color is passed, sets the default ink color to the given color, and sets the icon color to the given color unless `icon-color` is also used. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color-or-map)` | If a color is passed, sets the default outline color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web 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/density":"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/button_13.0.0-canary.e1e69fd8e.0_1629487966436_0.4433038167010712","host":"s3://npm-registry-packages"}},"13.0.0-canary.f5afc16df.0":{"name":"@material/button","version":"13.0.0-canary.f5afc16df.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"6e52c1ffc0a05624bd6076ab2de154a63151c58b","tarball":"https://registry.npmjs.org/@material/button/-/button-13.0.0-canary.f5afc16df.0.tgz","fileCount":40,"integrity":"sha512-wRMyA0Z8sIO9TRUpFCY7J96B1SX/5iPb732O6gN/5DsjuCyboXxH5eLfk2VAHV1eA93tXN+T6RXYfPiKJrDlCw==","signatures":[{"sig":"MEUCIQDLGy5BP2dkFNSsLyJ6zGlocKBYypjbq6jpVO5k0lX3YgIgIVnHxkBavVf4feGoenJ6HV6g7ZF2/Yhi9PUxSOyoXps=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":611222,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhIBAeCRA9TVsSAnZWagAAjfkP/2IjeZ/eaWAoKxtTWSq6\nmxtvmCnwNS7f47/Je7rHXaW+TvTJ9jNjarMmZ39YcCpTJspUuXSLEfrRVwQy\ngPHuN8i8FY8JNB6iNExGJR51Ml5sJHCveDqmwOghLkOOE0kA3Vf8pS5RKIua\nlmZTqPxFj5gAwJXQR5c42kNOXvxSnEW4gb41E3PaN3H/AtBzrzZ2ssjTVck0\ndEwbIvzbkoBBjAiu7ifR0umXTXlSmJg/n04lIPUxe2FtIton0/pAbKhc2VLO\nD+53TYgwPLVn6h+O6WBinA80ZIcqgTsGAieZv7TPlgxrD74jgLdC1pTResFo\nTmd8O13snBR9DzrYyMhN1y4KDHsgCrJ1bMHsQ1lhwJHW7Lbu2paQvM1tSNNc\nGmQhzlUgQcJwIaqthKfAthcSfTvTPH1lEPYL4oedUlzV2GwJmrWkiW2m+A4C\nDqAAiGxUqJdIOcEv2blnasgmUMQkd/maTBM0zap9TFCylbQr3hwhkMOMdEQ/\njoUa9/3XLz7t7AgtjDTS5W9jPJ8TP9H1sfWbXUsUyPL+oAIFUd+t4rm+1Gqr\nCe6xEPFPv6fDl3d6Cxh6joZ2huAi2rs3dVUrtPLJ3F8CDaF9aD1jDxSdjrKM\nd52Djav1ZdP/975gWPqydOdVvTzpLEWheJD3ETimyTAv5EBXrXaJ0M/2Q89g\nIITW\r\n=vATB\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button/styles\";\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.**\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n**Note: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.**\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button--icon-leading` | Optional. Styles a button with a leading icon.\n`mdc-button--icon-trailing` | Optional. Styles a button with a trailing icon.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n\n**Note: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommend always including it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color-or-map)` | If a color is passed, sets the default container fill color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`icon-color($color-or-map)` | If a color is passed, sets the default icon color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`ink-color($color-or-map)` | If a color is passed, sets the default ink color to the given color, and sets the icon color to the given color unless `icon-color` is also used. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color-or-map)` | If a color is passed, sets the default outline color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web 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/density":"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/button_13.0.0-canary.f5afc16df.0_1629491230636_0.966893847345244","host":"s3://npm-registry-packages"}},"13.0.0-canary.28d0d75bb.0":{"name":"@material/button","version":"13.0.0-canary.28d0d75bb.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"3db9b804b4fa873a12f3d62ddad2ad956734768b","tarball":"https://registry.npmjs.org/@material/button/-/button-13.0.0-canary.28d0d75bb.0.tgz","fileCount":40,"integrity":"sha512-Inem6uDPcWoz5WvY0NCwL/z7THLmseBgJdJ879Gd2ovINTUlJuIDzhvsrlTetdQO6Ql935NrdAzxdBM1WQqgwA==","signatures":[{"sig":"MEQCIDsjtAMk2C1xFCU6AEbyDEUWksCjWEftfCf1XlqdDVHEAiBp4KihxQm6vwl+0AZbVakWrMxfC7sc1ctog/aFjaZ1dg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":611514,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhICrFCRA9TVsSAnZWagAAicgP/iLp71drgkwVQu1uKUdD\nMcKDLmj8UoNola8G/mSKrCIO198H8orbAvlb7zGPF3WdZQB2mrDPSLpMSg9a\nKYV4pdF1wQiUw8cWEEsucW5Vap0kD5g2ebCeQesP2o/HFkksceskLni+eMCj\nKYIhcT+K5hba9TTSYFe54wuNGJ8GltoVKo5Rw4sav80JFusQqFbwqNW4l1Il\n91m+1A4pKcGJCe8xVWj/WYRIjzBjhjvXcgRs1xIFgQeRidyCoBNRGuP8jB2I\nF+485oteIdCXjWznLag35Ac2V/p3etcbmki8s1m/dVOqLkVeis893JTQbV2X\n19k66BdJlRUE2ltxq8051C3VIC1tdry1n3SaZ4nOyWlJDhwp7DYC6Q5XnhZa\n6DzTSWscRb6gGy3gUUA3E7ZUqx6p9s6b2P1AJlHEbJGPwT3B8t9H793jOF8o\nAOynINHK+Ubty7GdhvWOpQUn4upmAjPf+WRZMTQ2HCrXt+t9jw8bd+UQdC4v\nYJs7bK7vGLmTVn+l7LsaTE4dMz4yushD2yqzicu9G0XT0BwAlFEY9G08nCYV\n+1O07Zjz8kIHKolyTCkSS11K01kfhPrIi86LC3bW/I+vRcBI29jELF8h418o\nSOjKsvs4CPB5z88+2iXEAQ5Gnd6HbN+O0yPWQo0KJaco3OSoFykJEo0boEQW\nxFA6\r\n=y7GD\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button/styles\";\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.**\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n**Note: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.**\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button--icon-leading` | Optional. Styles a button with a leading icon.\n`mdc-button--icon-trailing` | Optional. Styles a button with a trailing icon.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n\n**Note: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommend always including it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color-or-map)` | If a color is passed, sets the default container fill color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`icon-color($color-or-map)` | If a color is passed, sets the default icon color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`ink-color($color-or-map)` | If a color is passed, sets the default ink color to the given color, and sets the icon color to the given color unless `icon-color` is also used. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color-or-map)` | If a color is passed, sets the default outline color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web 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/density":"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/button_13.0.0-canary.28d0d75bb.0_1629498053096_0.4123704002830846","host":"s3://npm-registry-packages"}},"13.0.0-canary.21ece5360.0":{"name":"@material/button","version":"13.0.0-canary.21ece5360.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"6853d0e079c361e933dad1019bb9a507d6872dbc","tarball":"https://registry.npmjs.org/@material/button/-/button-13.0.0-canary.21ece5360.0.tgz","fileCount":40,"integrity":"sha512-7Nxf6+dEh9nMYlJVjjvkwZuxMOANefmdgWVW+o9PIl2sPiine2v3/12F7rmHMf4ysowR7ZPdBQw275jhgFiERA==","signatures":[{"sig":"MEUCIQCRB8RyK4/yYlgnyP2EER5CSznhhz5O8+CxahOuz1nwPgIgXVYaADlYywcQRGRwoSKa72bZfcJLP5hW3vqPbe7IVnY=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":611940,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhID5vCRA9TVsSAnZWagAAjEYP/jV+lFSOxtNUEFDRjwSw\niiawVmFuZrR5TWoIh/1w7yzaU2aUQMCDPbDAGh1on5sZpxnmpQ3ZXcMYgPpD\nX6VnmLJKf0pB2KsiM+ic2IaXf/Reo7OYRdkGqmbRO2YiwiDlaeuEmJZXnmWu\nSZUX6JAFiJYnKQ+JbqNGsM8oLZp/M2RX85bOD+uZ1DUXW0mSMOteXDV3DqnE\nwMlFnV+4x/dc/fKTRAqUVG2exx4NZChtbi9G9/Q1iSRgpweKLM5orxvdjSOX\nZ90+V6ODKNx/FI39CDGgzFvs2oXLnckdea9KlT2Wf5uc30OZqelQhRUTC8RG\nALh80UnTtBv5FVl0Th2CkG9RwpAC5nvkHonlpk2cxo1PRpwkYRsoE/nlVfVg\nodR0hYV8YHGGVIrHKOYo6VAeGUb4A6h2WnMFgzKte8JYq40MN6gFvENmX6LD\nyIOayk8dmJRAvl423cdIF1XJwKdYrZGGYu1XW6wdU/Wx5z0AGmS7AE3sL2V/\nsFsoohax/X43MwK/1DaxVi6ntbtPM5m8V0r3FsAqNlOUvR73UAWKBS9mtsdN\nd6om6djIPgKfmQHbiRFUpw9wE6O8CqYpyLzQ410hDYmbwCikfHf0gDtYeB39\nRIBjLFkfcTxZk4owWlyUasjYxWZRjppLQnFaB5JQ1Q5gdlfRIprRYqAAfIqt\nygqz\r\n=LsSZ\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button/styles\";\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.**\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n**Note: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.**\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button--icon-leading` | Optional. Styles a button with a leading icon.\n`mdc-button--icon-trailing` | Optional. Styles a button with a trailing icon.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n\n**Note: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommend always including it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color-or-map)` | If a color is passed, sets the default container fill color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`icon-color($color-or-map)` | If a color is passed, sets the default icon color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`ink-color($color-or-map)` | If a color is passed, sets the default ink color to the given color, and sets the icon color to the given color unless `icon-color` is also used. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color-or-map)` | If a color is passed, sets the default outline color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web 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/density":"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/button_13.0.0-canary.21ece5360.0_1629503086670_0.06893932626078869","host":"s3://npm-registry-packages"}},"13.0.0-canary.8de07c02a.0":{"name":"@material/button","version":"13.0.0-canary.8de07c02a.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"56f2457b821efce9f774b3728796215af3a51a93","tarball":"https://registry.npmjs.org/@material/button/-/button-13.0.0-canary.8de07c02a.0.tgz","fileCount":40,"integrity":"sha512-gox7+8GzacGpwWOvd/PTcv0GxedZ3njsAJY0KGYm56KnYkFHQdS8jmDfQ/qoEKVQHXcqFfHMpggm4ea9vcIxHw==","signatures":[{"sig":"MEYCIQDVRO1NIR1IjcC9YsRFf4lIxkt+VqTl1SKS5qP/iuIPkQIhALu9SNl2pqWR70q4L9jYqLifss4rOzXkSi2vcbyg1itF","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":611940,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhI75RCRA9TVsSAnZWagAAPGIP/1WO88Jg1laMhqDPxoPd\nYgFT1+iA5ZIkTKOlBi0xWD9QD2noKrkwIWSNEk+8VqqznANsAnSg6XNq3WwY\nJEGmWK09EXRlU17uNTN7zJwUNOo07iHiZXeHfr/4qwNv9QdvFfdFsXhSEmZG\nVzaWMz3ZVKPfppCGdp7z98PWTkcYCA6H0dI6fsn9jJZGhHBbWWnskNZG4L4Q\noT47P5UBdrovroC3gFMxTdC2s9TUsxIzaTF2ohB5FvlrsUmqsMBabvCGSI9i\nDgmK6CLDy9JitqvZnYHLPEp1qlFu3RVPPVtTXVjkttpsayh1kEC5hwSpS08N\nzVJIDNVA+hTUaHeSzUgllz1D/CIQE/xMP2YtOOqI/VBQTC4+Xk47DhO9YW7e\n0nUrjsjoNDJWjeMf16wlpFK3kAkUg98ubmH4W8Fjdefkt9yqqXie81h2GGyV\ng9Vj1fF42Wjyibdf5wzsfVxmZQMPJ2x7RDdq4ab8mzoSZ2lUlpfj87LKLNUA\nIa9Yvli8qISJblni1Li4meT4p1XCnHGXHj0WQMy7ZqnaG3y+DoHBYADlJo2w\nWxK+7INN59pYhrAexeDQXushfOmLWRSbfG9daIN79BQEannqzSQA3N19vUvx\ndFi3HcvGe0gQV/r1JJGgN/PZH2qDLvUOhRp6y6pQ+X2gq4KCNifG3/5YhwI2\n0d5J\r\n=KYbu\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button/styles\";\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.**\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n**Note: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.**\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button--icon-leading` | Optional. Styles a button with a leading icon.\n`mdc-button--icon-trailing` | Optional. Styles a button with a trailing icon.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n\n**Note: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommend always including it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color-or-map)` | If a color is passed, sets the default container fill color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`icon-color($color-or-map)` | If a color is passed, sets the default icon color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`ink-color($color-or-map)` | If a color is passed, sets the default ink color to the given color, and sets the icon color to the given color unless `icon-color` is also used. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color-or-map)` | If a color is passed, sets the default outline color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web 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/density":"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/button_13.0.0-canary.8de07c02a.0_1629732433306_0.2918699170666663","host":"s3://npm-registry-packages"}},"13.0.0-canary.65aa63b0c.0":{"name":"@material/button","version":"13.0.0-canary.65aa63b0c.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"6b3a097c955674fb6f64197bff88366ef7c69780","tarball":"https://registry.npmjs.org/@material/button/-/button-13.0.0-canary.65aa63b0c.0.tgz","fileCount":40,"integrity":"sha512-zyvhxUI8kUMa5Gv08YjMEB9I9yKBLx7ZEW1lgHG2QYYl0eBrsvRGTwnM2hMK1DE7WaSblKiyxFu+vNPhHPc2og==","signatures":[{"sig":"MEYCIQDHD2SdUoKcJQ7lhDURDZMrKj/PlXPIkiLYIjuKCoAdCQIhAIEtQwRBz9x0S9fzfNW+RGLk4T6rTMmHQyV3zx5oTxVs","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":612358,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhJRBHCRA9TVsSAnZWagAAUjYP/2fkfZwutm96XPtcQuLp\nwH9I9E3ZOuy7Xx4d4CKDlCNi4bRJioTE/f4GeWuu+dTLpUfsp6nCAxE2fuMo\nQ4QQyZHlKYEcdudFTuvLGbzp6wkeCr7FnHYEiAD2xNEwqPnN57nP0zNs+715\n3QzNT2tGRj0aGNHypsc4zhAX7fW8Q4U/YwGY5QNdKslLxz6o84z/o/C8dOi2\nXzBWWEEtYC3rYq3DNUc/+DxbrEOueqSkoSBwk9E9gK8j4v0ZcK+ZLnkSJNMf\nZLNQeEQfEe5M7kNK1rse1eXrNbWXG8VZPMooHrCJzLOuq4UCE+hF5Scj575Y\nIY8BjY3YYm39zGlrVJXO8IgWzw/CHEee4rZGRAmldn5M15UQ4mjiZOKAXFur\nl7lA/TaUf2MnbWO/wOOa9yaYOYgPe/HNuf8qsLFmOnT4qgBIXuJR4rob8XMG\nF3VYQWd7b33q7o7bs/KrZHcHaqmOupXMSvLyrpX8G8VTOzqiSL+Mpx3Esc/A\n9LqmK6O2YIqf1ePYIZ49Xzgt76bqlhymoxpk+70DxZAnVaTEC4SupbsjZ8yc\nL00xRv5ZIAXBHujgLvey409Rt9XGTqiplPx0KkL0eNl599WZpD4myFyGuHTo\nwU601BTFrR9l8+oEySPUO2+QE87lKVCFUeXDlsFqLDjHIDiEyBrjcijMzmrP\n2Zs/\r\n=qRk6\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button/styles\";\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.**\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n**Note: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.**\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button--icon-leading` | Optional. Styles a button with a leading icon.\n`mdc-button--icon-trailing` | Optional. Styles a button with a trailing icon.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n\n**Note: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommend always including it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color-or-map)` | If a color is passed, sets the default container fill color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`icon-color($color-or-map)` | If a color is passed, sets the default icon color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`ink-color($color-or-map)` | If a color is passed, sets the default ink color to the given color, and sets the icon color to the given color unless `icon-color` is also used. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color-or-map)` | If a color is passed, sets the default outline color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web 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/density":"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/button_13.0.0-canary.65aa63b0c.0_1629818950742_0.4529095078747509","host":"s3://npm-registry-packages"}},"13.0.0-canary.15981e9d9.0":{"name":"@material/button","version":"13.0.0-canary.15981e9d9.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"4a726cd14600fa3a1b15d132eedb6e037df648c3","tarball":"https://registry.npmjs.org/@material/button/-/button-13.0.0-canary.15981e9d9.0.tgz","fileCount":40,"integrity":"sha512-FyUbJHbGe0AT76FI9XBoSP0BJ/+DKhSitwHJzGsiTyg33fXH3f7f+CLO5obgNOxfr+4xP4sIuNI1CaLt9+oIPg==","signatures":[{"sig":"MEYCIQCYJvefmO55dhOXGWtYbIjPPgFxtORqVKRRtBBEVUga7gIhAMs4I/pkNNScjmelpNWxNk739KGUEiIgvodwJE745B1s","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":612358,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhJRulCRA9TVsSAnZWagAAqk8P/AgrcEvfbDpMO0wbJBFl\nTClnHAzA9lHU2aOV09+MMktGA76WTULMaQBF2S5hQT6kQwwb6DfMyKg51TNf\nXRlQU7B0I/Y8yqkGzKSC6IUsDlo8c6uD5C4DV2R93CPjq/6c3XxhYVXhDds8\nfEo0TLDOtGQXjnFihDwEHdJ6PMbNowS3KZRoR/kRYxK1frJthi8OAbLM74l7\neHiFjKxGOtpKxODV/xNggy3FkdDx3KFJ7JR7F94NAb7NKuOqNEHp/p5Zwq8U\nvqDY4g6YjiODZ9RFqnlOQPnRF6DZNc50DpFueCOi1FwSzz0j9stIMoqhqZmq\nbIOXTfo/w4sVL70boHZszPiWRFHOibGyRCC1OPgLN2w8pyq+B9W04MGqve9d\nDb4Mvi5i/e83DMqSeu8jbDyfjgfVro+5AfrETaSmwwZn1YDLZNIyGh2nP+a6\nGXdaAVdtwI1etfINH0vaRzF/yvZj2IW5UF92WVZ1c2r7xHIafhnChIkiuIZW\ns28Z8tW+eYADVmAx70Ka9OoFQyIQMsgZT2K0kGfUFzeQVVSOaTZQXoeE8rWe\nr8JFQm+mUOfcCy4ues5VchRV5mNwRsPSTDAvlymoX+f+WdeVUkwVevYgQeRW\noYH+tnJ+EE18GuYOBAcfZmdSjJjdIUfRsKJhEMAEVHGKwPA5yJcXWttByvu4\n4YEW\r\n=0VsF\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button/styles\";\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.**\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n**Note: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.**\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button--icon-leading` | Optional. Styles a button with a leading icon.\n`mdc-button--icon-trailing` | Optional. Styles a button with a trailing icon.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n\n**Note: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommend always including it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color-or-map)` | If a color is passed, sets the default container fill color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`icon-color($color-or-map)` | If a color is passed, sets the default icon color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`ink-color($color-or-map)` | If a color is passed, sets the default ink color to the given color, and sets the icon color to the given color unless `icon-color` is also used. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color-or-map)` | If a color is passed, sets the default outline color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web 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/density":"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/button_13.0.0-canary.15981e9d9.0_1629821860958_0.8972364718694172","host":"s3://npm-registry-packages"}},"13.0.0-canary.fa7520f62.0":{"name":"@material/button","version":"13.0.0-canary.fa7520f62.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"949aaa2a5cd106c340fdc89464b3b3ccf98053ab","tarball":"https://registry.npmjs.org/@material/button/-/button-13.0.0-canary.fa7520f62.0.tgz","fileCount":40,"integrity":"sha512-U0UE5g+AvYksWGJy4p05sHjpbXDwQllYu/qr0L0SP66y8j/AIW6urmF+xMcIGP9RUjoxXqPJgUSO76p25PDuqA==","signatures":[{"sig":"MEQCIEpeL1sWrgQKfrg3zIfX8RV9zO/Q0TSRKhigpHpR4OfVAiBFztmXu71EYeql5KlIFFU2FMSMNWIOJYyZ22DiQ+A8ww==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":612358,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhJXKICRA9TVsSAnZWagAAJPwP/R5sLzEv9mI3DoGF264s\nCv3nEretFS3vXbbQ1g16lwJXckhCOp3f39ZBPTnJzQWK6JTnQu0PbcOTB1bo\nsU5SpxIY6SE0j/XpNcAGDgV5sI+/9SGH7CnWUS4skbgXzGuT7g72TXLEkWjf\nFcVI72q2fVGq4YHZcxSAnXdpYiIocQs0YiUvq7hJUY/GyX+ep65Lk5M0fjic\nogbKOPPQilZW+RiuPU04/nbWA2jRNuv94tyod/xmFmSA6IMRogpHBGN76hYE\neb3ffsSdvNEk340BgnAnqt0s9l5uWvBZOJ6CL7G5BhQpFT3X7OKBGxw4DXnS\nMfOUy+PNsajZr1ZG3D6wYH/EnDhraTeJ3inm9ZrkQ/otfewZi7kwpBuYi4qQ\nhEGnm4/ZgmzK/M2rsyhdb2uz1nJQlmtcyQG2KzNLhxvEWdjy0a0WXcYkX0HF\n9AiVV1tSZfYQcXdACZynN67uDpy/Fgai6ej234FmpNvrqJF8hRK+FEWodIig\nSlBbi2Rfnce7xvjWHlBZCpqFswV5Ifnug8OPs/EO3CPxXf47gIGJ+NXGC3G0\nxFhRnZx2PMv+oTeBbExcFv+2n7y61+3dMvFaf+1wqPe00b/mJDeUTD+oDE8c\nHTo/Kltg4HBMPlrGYYlycC7RlRu8zprjBIUyj8Pq+FV4Ig2R5cmRwf/GZ220\nHMpn\r\n=PAuX\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button/styles\";\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.**\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n**Note: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.**\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button--icon-leading` | Optional. Styles a button with a leading icon.\n`mdc-button--icon-trailing` | Optional. Styles a button with a trailing icon.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n\n**Note: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommend always including it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color-or-map)` | If a color is passed, sets the default container fill color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`icon-color($color-or-map)` | If a color is passed, sets the default icon color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`ink-color($color-or-map)` | If a color is passed, sets the default ink color to the given color, and sets the icon color to the given color unless `icon-color` is also used. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color-or-map)` | If a color is passed, sets the default outline color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web 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/density":"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/button_13.0.0-canary.fa7520f62.0_1629844104187_0.1780077872817063","host":"s3://npm-registry-packages"}},"13.0.0-canary.ce25bc3ec.0":{"name":"@material/button","version":"13.0.0-canary.ce25bc3ec.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"5bcf5a585307df0cc542148448d050743f7e4e50","tarball":"https://registry.npmjs.org/@material/button/-/button-13.0.0-canary.ce25bc3ec.0.tgz","fileCount":40,"integrity":"sha512-gSxh2P1wdJ/g4bIg5Ji147j52G1XmKwEap0KSSQQIdXAxhMrwP4BZ1ftbU9CX7M8RDZy6HklBtZL0Kt+ZrFIxg==","signatures":[{"sig":"MEYCIQD2Ji9GIrEJItk+SYq8wes8qxN5qcgo5cjG82uOgaSAjgIhAOwrCPtGEjs9RfQ4Ei9yapnJIC20jLP0QfGZnLpZ1ln2","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":612358,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhJXdeCRA9TVsSAnZWagAA810P/0uDmBuAkwo2bQztO/7+\n+5SIm67iT4LULl1AmpWY3Rff/Cn6YCBoxm6Sgkwp0jbW+I9DqzxkRs+CvCKi\n65Sj1MkGf9ZTkqZAEl9jvuUSTNcerm7p6/Z93VP1j1u+jXgPnwebIRZ4S6kh\ngbJ1WvLziHVoUxAf/XrcuPA7pnB3UhgGEDXAnG02SUvzD3wBRM7q5whzDPGQ\nDYk8R4CNz1Q2Ib0Ome5Q5bvAL9BWhXHi3Y8GZnB3C/3DWsmG1yXJrzAfoA+l\nGG2HupcTnR4RGwVRJVBHj83M7HR7YmEdEpBcTDNb592dnKJDsx1uKQxYLkbP\njbpfhjvgXUCUVvzUQfPKS/77wyFVk8MA7raZZd6L2WoSMbVwA/+sqvky+oTE\nAvvXmpNY+M1ClL7KSw2izPziyz7gswPLCIEVEbeEuG+BcNdKF7oVa7vaTksZ\nxAGRR+ceV02NswwyEro3wfZ+EIcsbsfARHF5hLRN0Z940LUrcG5Aft925+JP\n6PYL59U2UBsnkKH3X8yihO/ktVMczjmQvYjdFup5X/cfWeaxuaT/rX4cFarX\n2YM+x1vQawSqx10lULBb3B5fg+a8aa5JSaNCKkRu0DqiXxmr5Ri19R9cAcPX\nx/M+1GloEmESPL/PYrqqeMRl6cAYqyIL9Q5fFDxj3PY9jnz0zSfY9FD2oc09\nDvwQ\r\n=10pm\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button/styles\";\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.**\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n**Note: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.**\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button--icon-leading` | Optional. Styles a button with a leading icon.\n`mdc-button--icon-trailing` | Optional. Styles a button with a trailing icon.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n\n**Note: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommend always including it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color-or-map)` | If a color is passed, sets the default container fill color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`icon-color($color-or-map)` | If a color is passed, sets the default icon color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`ink-color($color-or-map)` | If a color is passed, sets the default ink color to the given color, and sets the icon color to the given color unless `icon-color` is also used. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color-or-map)` | If a color is passed, sets the default outline color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web 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/density":"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/button_13.0.0-canary.ce25bc3ec.0_1629845342060_0.3188804995235994","host":"s3://npm-registry-packages"}},"13.0.0-canary.12f5622e1.0":{"name":"@material/button","version":"13.0.0-canary.12f5622e1.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"cdaf7acf3d56379596d5da6a1cec7f144311d08b","tarball":"https://registry.npmjs.org/@material/button/-/button-13.0.0-canary.12f5622e1.0.tgz","fileCount":40,"integrity":"sha512-Eh9KgZIW8wp71WBvGUIp6BQD5tBmaBAxI/etDO0LknOQIpYIFFZmiPwm2AbPDVdye0bsAfHnb4QZ66c7z2jq5g==","signatures":[{"sig":"MEYCIQCKrRhskdb8stluwqdBAVGqtq4viqKA46vx975gzs+txwIhAOOxtUIrhBI86Z/S/s6+uvWbRiaXbwetKEdOh0nDw1z1","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":612358,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhJX5PCRA9TVsSAnZWagAAAbIP/RQhVkTtqUbo2qWhtJU7\n0tNOEe1LNKyKuZHaFcQXWzNQQvu7kKo7wBmlr9uJWOwEo1sXYGAut+UxTj7O\nhYOCJY/uKUDKctVHIRDzLIPidFq+rYzL5LSIs8YPE3YpZiBvuAHIArdl0yGr\nyB/zQfqTVGW96GJdZ3lquzL+OkBWM93Ffoh6UgMrbNPUpGARVRhBrhVsgYoU\nZkQEY1FspfixvPBKZ+7jR2U7d/TQu/LAlbMyRmPBTLQSqXN6CSkX0uXiawpe\nE/xhK6iNIeYWCabOIW9f6KLv6CbjKEhzfR054NBJvjCogxWxVcYC4K1SLrUa\nK5sJmxeRsGWn6yunwrv28DyCagna+QqFzNx85+eNpxHfbLBMI7Rv+CvAmuTD\nOEiLuac/2kkl69hcyRcDuIdRMHfqGvkaumlv59mHpgMQnwkAX487pdVqEKWY\nGVSsh6V1ekyjv02VjSLNQntHYm/M1RXUjPkL265+A6G0pY08hc7mY6+vbGbN\nBLnUFlwwi9vmHRmXoZsDTgFYzmm8MU7vs/pn+2mGbGIGdk5TouSfVlE9LMo2\nqGeTJZ4y/tlI0WFVnRJsypkwCn9e9XJST5Z0i1E54gqHf2CPEKka1A475Cby\ndcaydKoRrzFIwYrIx3PNLc/WWWfrCIvNAV8XeM9Uwm+f6KkijBtkNCUCGKb1\nFV1C\r\n=7jmn\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button/styles\";\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.**\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n**Note: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.**\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button--icon-leading` | Optional. Styles a button with a leading icon.\n`mdc-button--icon-trailing` | Optional. Styles a button with a trailing icon.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n\n**Note: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommend always including it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color-or-map)` | If a color is passed, sets the default container fill color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`icon-color($color-or-map)` | If a color is passed, sets the default icon color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`ink-color($color-or-map)` | If a color is passed, sets the default ink color to the given color, and sets the icon color to the given color unless `icon-color` is also used. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color-or-map)` | If a color is passed, sets the default outline color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web 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/density":"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/button_13.0.0-canary.12f5622e1.0_1629847119202_0.26729906300688144","host":"s3://npm-registry-packages"}},"13.0.0-canary.d97f8f133.0":{"name":"@material/button","version":"13.0.0-canary.d97f8f133.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"ac7be27ff3b289d90da18041343e4a863bd33151","tarball":"https://registry.npmjs.org/@material/button/-/button-13.0.0-canary.d97f8f133.0.tgz","fileCount":40,"integrity":"sha512-/vQNNL7QpPSUnnoYmP6m0zNS+tqL3g4p+eDygh5z0x0NxPTxvMKoffFiuGNbN7zpQlrgL8AyKYlCK4mIirqQeA==","signatures":[{"sig":"MEQCIDUrY1JfHpRj9JwpfxeNIMxHCQhr5VPBnopb22DCp/2WAiAVUDjpCsuY744chGJF0ECBfjKPjOwgV5uEsQ1AMFLIig==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":612358,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhJo0LCRA9TVsSAnZWagAAdfsP/Ro01RbcNyAKP1mzR7Hn\naUrgeqFOaH5f0nfrctllZnrj2SygP5rr1PyPB4nmg9e/htyFf46arTE0QkoL\nk8UzRw8rL5myoVB6pk4ZPOZXn6x8cs1Q4IrpFVPLOC8EE8F3koiv8Q+3i5vl\nWlrFTc+0p2G39wlzdwUa3DJF/DghOpSvBnoHneQZLNfoyne1RI7xZ/Ox6WUV\nx1yQjY+n8z2SuYjud/W161P89n9HRpzidPEN/8zfDJEu6nQiwFXXSNEsJ5Y7\njsuRaD2DT9KsqjiHUc2WVyhnX6KeLAlns1o+gBZqC4A7TRELWNGFFAP3AwL5\nDpzS5ST+ie4auWMn1cCdfw7GeDWlHA2q+jgfiU3l8TpNztVV5UBIODnDm8xQ\ntv95LEQy2DoYFYRYBucub+02B2AitizCg9Tdm8ohcN385MujhjiV3dmSTIhn\nzXvEhDvzM/vwjlPdF0Xc5qRs37DOx7EIWzEWXetzbI50WZA+wgYRNvWvvJoW\nTFa3HTCbupfQeGSSevszZDgqVZean9pLjpZUFeBi92aTCzBskikHMn0ss68p\nKCwOmVy7y3aFRwCk3qPqXnfL6m6WyVmsqvNmEQyM6aHNSgyNIYIb1v/TkVBd\nDd1DQ+2CvxJ7eU0DFubCs3NGnNv7y+2y37CGhfj/JFWpiZvyy0YFHiU8clNB\neDei\r\n=zXN/\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button/styles\";\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.**\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n**Note: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.**\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button--icon-leading` | Optional. Styles a button with a leading icon.\n`mdc-button--icon-trailing` | Optional. Styles a button with a trailing icon.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n\n**Note: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommend always including it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color-or-map)` | If a color is passed, sets the default container fill color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`icon-color($color-or-map)` | If a color is passed, sets the default icon color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`ink-color($color-or-map)` | If a color is passed, sets the default ink color to the given color, and sets the icon color to the given color unless `icon-color` is also used. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color-or-map)` | If a color is passed, sets the default outline color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web 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/density":"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/button_13.0.0-canary.d97f8f133.0_1629916426660_0.46250385593355103","host":"s3://npm-registry-packages"}},"13.0.0-canary.d86fb6fac.0":{"name":"@material/button","version":"13.0.0-canary.d86fb6fac.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"66bd707b91fa33894ba973b2bc82518529c7c036","tarball":"https://registry.npmjs.org/@material/button/-/button-13.0.0-canary.d86fb6fac.0.tgz","fileCount":40,"integrity":"sha512-u8sib8Iw7V1U/qGfrWHW290jInRRpn6L0lICf5ociY1UttNc5AQCdHat/5xCY+8Ciz/8PDxDtmQsJ4CDF9UyPg==","signatures":[{"sig":"MEUCIQDzvBEzOSUcKzJ15JzSH9DASaQgcmXbC/395yZNcFuylAIgIDTgDt5H8q5Li/vjwGVztGXzkBpfkAijDz+FRFtmcqw=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":612358,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhJpHZCRA9TVsSAnZWagAASLUQAIJ8mpK5DcpSVVfV886Z\nn++Y7xleFE4/NCWyVV6mrjnKK/pLggkSLRo81MWY15EeBZKJWAoeoBv8A7RD\nHFr6ojbQVPzBUF5MnEhqvOid0QpBAij+ya/jGYzfwOdvryOnZh2FA+z30Ulb\n1RnbNIa6mTBV4AYH9z94GcTJNw6J6iDtxlbLaVbXUDpu4yX6Y6bImIbUwjxd\n2eLA2s65WLpDkOG9VD1ExCZi4JrmpnFFn5KsdriG0Sn+AxcMpAhmjWdg57jK\nT2dWpmmfvNUlVbq2p4raXqIzzQlR4E6YFGctJ/asFREu/p8/W3taMp6cERSE\nfrwt8I1lF/e+yMNqgMcshKALiof6nmONdoDTmBLQX4tDW/dLYxsuSBhhzh5x\nySivLFBCR5T/tYu5llQLxbTPWbyERjm8oh/bRNYyLuKIyvB++iKKmHX63WBa\nU5N65KgKfPmQKQpleCgkr7sY/uTCCrlT1Clp6T3Z8wMStbDC64fUqyJ3Ng+v\n7E9QWjYCgvddc3hDxBjJvqjvdtjtdmPyaXgnBfzOLF5NlDxjNAXQA+qj4Fg8\nbBAM+q3lu3m9moR8eSvtd6J//ewYUSW3F2Sl3V/N+0KZyK03UvE0teuwnOsO\nn1h2xm07m6DbFq6YzzT7Oe6EP4GIAbFmDHM9iahTN8pGJenShOmNelBzL1/V\nxa6N\r\n=vMod\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button/styles\";\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.**\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n**Note: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.**\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button--icon-leading` | Optional. Styles a button with a leading icon.\n`mdc-button--icon-trailing` | Optional. Styles a button with a trailing icon.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n\n**Note: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommend always including it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color-or-map)` | If a color is passed, sets the default container fill color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`icon-color($color-or-map)` | If a color is passed, sets the default icon color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`ink-color($color-or-map)` | If a color is passed, sets the default ink color to the given color, and sets the icon color to the given color unless `icon-color` is also used. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color-or-map)` | If a color is passed, sets the default outline color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web 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/density":"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/button_13.0.0-canary.d86fb6fac.0_1629917657118_0.680457116743415","host":"s3://npm-registry-packages"}},"13.0.0-canary.e8554dbbf.0":{"name":"@material/button","version":"13.0.0-canary.e8554dbbf.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"12e237e882dd165001e3d6e6287a106fa492647a","tarball":"https://registry.npmjs.org/@material/button/-/button-13.0.0-canary.e8554dbbf.0.tgz","fileCount":40,"integrity":"sha512-0cVkPNSbUrhyOAv1BbTBcfvxQC09WdVEnOZ4DMftN0AhgvKf7SF+guW8QMjPvyFqFIcEbvJNiG19HdSMgnLeEA==","signatures":[{"sig":"MEQCIDTAq5UH2GcDGoFVAXeQPRBiLn9YL7SO9VWB1xlin8f2AiB+Cw3dDJ+qVAClFUeYK71J8xA2D58c1DAtC8Y/RIU1uA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":612358,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhJr1dCRA9TVsSAnZWagAAwzUP/if8Sf3Cfd2WY9E+hLSg\nOEbLLMtP9CtiGwAHCCiRhKuceJ+EM1e360c9CgT85U1aHKQhJlUKwxTM6gUd\nxvP6DNOJ11IpN2DYjAOGoXJUFH5ET4+qQ9qca0MzMckWL85FtANUSp7ixJh+\noL0FPh9V/HHvGsoR8eM1ShQ2ZFAa2JzlAqeqToveKrFU7y+f2zWf61fFJPlR\nLCboXItBDBCu3Gn6hhBpGsiGs0RruRa7n9RxIJw4RWckVtnV87eSkxk8EoWN\nmr8htdTEeU2J59JL1WsgVoymd6A/aCR1lQk36xEsAhQmBqoOb0tmg+BPA1f3\nIx1wn4fN8XzeXwbnC0Zz539DUpY/BNvVrARu/ZnQMKfChw/+DXRAZFH7rCmw\naLMNSCDiq06dTIqbAEqORKYgmCAkga8Fgmrk+pRKkGn3JmkfBo3rpVloXxGr\nFUo9YT5N1CZuJ258Hp2TMdRj9hkw0T8T/A1UaMnFl9NaHgVvcpJix7KX/A9i\ngwmkd62I6T1ymUX+UztIb9+oqF+kYWS3SCozrtbwcAE0PCKccWMCXFRt8dLF\nNkO6nKND+aDJjMX/FnZv5JVqsGeYtvUWB9yQq6ga50To/Xi5shXarDpx6vsF\nz3RBVx9aWvwnqYeqjCtEtB6KDioOqSi8i74Fe1Yn56g9+huoxjh6djv7OnSn\nGtk/\r\n=bCjB\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button/styles\";\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.**\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n**Note: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.**\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button--icon-leading` | Optional. Styles a button with a leading icon.\n`mdc-button--icon-trailing` | Optional. Styles a button with a trailing icon.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n\n**Note: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommend always including it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color-or-map)` | If a color is passed, sets the default container fill color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`icon-color($color-or-map)` | If a color is passed, sets the default icon color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`ink-color($color-or-map)` | If a color is passed, sets the default ink color to the given color, and sets the icon color to the given color unless `icon-color` is also used. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color-or-map)` | If a color is passed, sets the default outline color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web 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/density":"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/button_13.0.0-canary.e8554dbbf.0_1629928797369_0.8246468790268406","host":"s3://npm-registry-packages"}},"13.0.0-canary.877e3fb0d.0":{"name":"@material/button","version":"13.0.0-canary.877e3fb0d.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"2b11e2a07761b0caad53c5c843c7f9f09b7ed437","tarball":"https://registry.npmjs.org/@material/button/-/button-13.0.0-canary.877e3fb0d.0.tgz","fileCount":40,"integrity":"sha512-9qrDLAEXi3NUrW63Kxq1JIE7jbM3slO89oEL/MTW4VpVQw0qcYWFyhiHQ+/OfRSE6FN9c++enjpmBbZGQx9omg==","signatures":[{"sig":"MEUCIDQ27RvARWWLfYukiooj22y6KmF3xSU8BISmzi4/fMeZAiEA9eER0TEv6Heip0lRyRGgCKuGVhF/3Gd38+xPFv4E+5Y=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":612358,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhJ7WCCRA9TVsSAnZWagAAxzsP/iMdo/umoiZwo3O7C9AL\ng1qBO+C6N3fFf5ltT/g3CfL2LUICpMDAqjo6F6PsPzh/w37sTLCtIN9YGTM0\njuGBxSSBOXS26aTGSJX35hVEv7offVJ6qB6Hh+jsyIIwn5s85tkhZgKOJoxD\n3tda3TvBb5sRrmW9+tZNp3KqsDPEb0ULobfZaXJ9cccspPsdooaWfxDFEsWJ\no92Ixw7N+hYfe9WybV30qrHLzNWvRuyn1pTTf8mmW/GbsRB5lmWQAaG/29/+\nREFAfP/ErhjhRRnt8cmOWPKmQqRZfIKb1X4yC66cnO8FPw86s06sQfdRa+M4\n6veW5/+zeUsaQvOoaVl9hWNM9cnE0HmqyKHPUTauBUWmOBqR6Hjse6ET70Ty\nhvtXxDOZZ3YQpGpAJtgdsmBu44ZP6TWLNsh9A8LQjA2zES6GjArTXZgqmo77\nPw4Ml7/D76WSfcb5N7Mr50xrbCN20DNgYqR/VQBhHUOpkeLyqycsq3InI3Zn\nUy01yiizrr46WTJsdyuf6op2pQBqbsqK/66AlgzUmdXGSkXmLatiuk4CIcXu\nHwq5Uuh4wHw+k6mitZcJnpoVSNsuJ7ht8L6GFP443ZXT1MDlEiZaXfGX4dGN\ncKNj2pUhhBl8y5vqmth3YySJxv3Oww1oOhy8lcbXKHQCb9lMK9eXq5hWc+qQ\nCJuj\r\n=cU9/\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button/styles\";\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.**\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n**Note: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.**\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button--icon-leading` | Optional. Styles a button with a leading icon.\n`mdc-button--icon-trailing` | Optional. Styles a button with a trailing icon.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n\n**Note: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommend always including it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color-or-map)` | If a color is passed, sets the default container fill color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`icon-color($color-or-map)` | If a color is passed, sets the default icon color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`ink-color($color-or-map)` | If a color is passed, sets the default ink color to the given color, and sets the icon color to the given color unless `icon-color` is also used. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color-or-map)` | If a color is passed, sets the default outline color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web 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/density":"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/button_13.0.0-canary.877e3fb0d.0_1629992321856_0.6883387422984055","host":"s3://npm-registry-packages"}},"13.0.0-canary.6236f3576.0":{"name":"@material/button","version":"13.0.0-canary.6236f3576.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"4948f46addb9e97534b8aab37fd5d4146d6c9c6a","tarball":"https://registry.npmjs.org/@material/button/-/button-13.0.0-canary.6236f3576.0.tgz","fileCount":40,"integrity":"sha512-/9yJuIG+jFQsF/HwslS22XKSrge5dKZP7eDfSS7i6J+ynTvGiGgcNB8g7dDRvVqFecCSnbGsawN5tDsDDNIMkA==","signatures":[{"sig":"MEUCIFvAzBzRUyti6s+SAHCTT3VH2fNZlVbbhuhGVBfHMg4XAiEA7N8yrkcB5qNbtFV+f86oHjrJPJZk4r6Wb1EPqB4ikuQ=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":612358,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhJ7wFCRA9TVsSAnZWagAAAtQP/jeku+v2IUQCKFNqiVZ3\nmkf2sNsSXnKbEntJB8fdz78Q/u7Go/8alp+im4ouJefM3Hop6wAC+oxb7Pfr\nGdxij9Wr6uV1amsha8T86vlrcF/fCU7RFxJtSxeHF2mWceUPU20mNjshCMHM\nfqO87o6Nr+BFmw3m2CrVwsUQZsrMCnx6KUeMc2r5QaCrc7AGTozYHi8eP/gD\nvcaECV43ANSNn2/gVOP/9h15X/KUtAuomQBXCo/mL8YBzT1ReTo6A8zajTcB\nj1hoKoCb3uyNacIx9ASrlo+OrqLxrGxjeR+g4GLm5vPZ7HMkq7UyZ8hSWFyj\nRQLKfioJjNIpyOrKcOsE9Em/jJZ1xZmxkMtq+i47/EyJJpNXJ5E5xmt/Oyq7\nSkt300mXpjWow9w2a/If/MYf+DRT6r5apihrgWGPTyPpPUL25Vab91WiK6J4\nR4xiSFyBGHkimaXLZuqmMmgCg5EKNFpvg1COItk1NdyRGSeGHNkvy80Rpz3q\n8LqPAO1q0LrUjUoVuWbnbzMEfFIT91F84Z2T11NHtR+cFpMrdZlrmO2US2z5\n4DrB0OUTIhn9nGwjP7TCDEDBEOcE+IuEJAZM/lxceRJOlUwpCkfcQAmNzH6Z\ncJ2KJ7VEoZ9nTn45biLDiTbXmDoY7RbeVGoo39edEfZ4cTrrxRJM71s6LY2o\nMIjw\r\n=llQ0\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button/styles\";\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.**\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n**Note: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.**\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button--icon-leading` | Optional. Styles a button with a leading icon.\n`mdc-button--icon-trailing` | Optional. Styles a button with a trailing icon.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n\n**Note: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommend always including it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color-or-map)` | If a color is passed, sets the default container fill color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`icon-color($color-or-map)` | If a color is passed, sets the default icon color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`ink-color($color-or-map)` | If a color is passed, sets the default ink color to the given color, and sets the icon color to the given color unless `icon-color` is also used. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color-or-map)` | If a color is passed, sets the default outline color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web 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/density":"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/button_13.0.0-canary.6236f3576.0_1629993989560_0.6214919899894085","host":"s3://npm-registry-packages"}},"13.0.0-canary.1d19158a1.0":{"name":"@material/button","version":"13.0.0-canary.1d19158a1.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"df239212ad91f9d2420483961556d56723213932","tarball":"https://registry.npmjs.org/@material/button/-/button-13.0.0-canary.1d19158a1.0.tgz","fileCount":40,"integrity":"sha512-yyca7Qn3lTNycSNIJkn4kmdHp08UhbiDoL9qmW0tEXvnTgBRVTkq7iZoN5QWn2xYorgfEVy4gYH+iEJfufEuiw==","signatures":[{"sig":"MEQCIGnrIDsMTCGNNyUAjIQD0iL/v27LtKY9CnLc+qxYj51YAiAIiken0OFWaUzrEt2tiXcYCtFcxcJEpbRyfULxDEiE+g==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":612358,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhJ8rLCRA9TVsSAnZWagAA0AEP/j8byUwd1UmTifZk8qdx\nwO4LV7ziOEht4RWEtmD4nktFS3qTC94ONyI+H0GBSWFquu54xo6xL9sEM4M7\ns5m62yaSRz2ErWYIpRuBkBEqPyhwQdyDCeukNqvtL7GITBOMFEWqBiLLZ2XP\ntL3RR975W54MrBEZhzO3Q8rhnc5glqi05L+TzRLDzan8Va96fn9Rc0ibeb/K\nRMABgMjxsI+4qC4K+2ZRbG+aL1oD2aBeYhN7KnMfAjcyCiwwOy1K9ojvgvg1\nZ7+MsynEKe5IleiHsR1hSlZkvT5PPZWFd2vKu1fOp/ctm+ph6qrgZEx1b7yx\nS2RksN4q0+hp+9I4YmsZ9BUyb0dFnosv5FFcZidoNRLm19RCk1s/XU1PJj/+\nW5P2o1A88yASWWdL3/pZaNPM8QpSJy2eoDd4CvuGI3raHpXwLBuFBkisrLIW\nSQI3Mo/LhbPO6Df0iRF7LPm6wADXhmoFKOIGo6yVXsXBFd247U9vDs4+JvCf\nnUPhFJERZReDT5LIf1elXjYEsKqiPAwyYgRHzvW4yTW3THndsekiCewPeaQC\n8Ir+o6Az9SSvuGCJ7wyzQhChLxkVKoVlFeIJpoJNUdSE+CBkiepCP+ETiDHo\ny2N7ovIjvEPjXstKzyHxRncLLFNv1BDDI1JP1p+o4/GeHFh0t4QY/ec9hA1e\n5EUS\r\n=Htvw\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button/styles\";\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.**\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n**Note: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.**\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button--icon-leading` | Optional. Styles a button with a leading icon.\n`mdc-button--icon-trailing` | Optional. Styles a button with a trailing icon.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n\n**Note: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommend always including it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color-or-map)` | If a color is passed, sets the default container fill color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`icon-color($color-or-map)` | If a color is passed, sets the default icon color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`ink-color($color-or-map)` | If a color is passed, sets the default ink color to the given color, and sets the icon color to the given color unless `icon-color` is also used. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color-or-map)` | If a color is passed, sets the default outline color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web 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/density":"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/button_13.0.0-canary.1d19158a1.0_1629997771640_0.40466403804149365","host":"s3://npm-registry-packages"}},"13.0.0-canary.6adc9e83f.0":{"name":"@material/button","version":"13.0.0-canary.6adc9e83f.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"df2c68f9eda3945867d85fef796abd5487a690ff","tarball":"https://registry.npmjs.org/@material/button/-/button-13.0.0-canary.6adc9e83f.0.tgz","fileCount":40,"integrity":"sha512-A5ZUKzxo5W8a1EPdNnmVWG/lhdgu0Hn8kgTIRnnfjdFIYpTAsnTEKJ/3lFmFpt9YpA9BpV/7h0aFvAewxh5xfQ==","signatures":[{"sig":"MEQCIGWbomyseEaFfz5vCluqOxCSsKgYzwui76OdvxZb+NvKAiBYhabnQd2tE9hX5fTOlfVN1vOKcOqPy2l00PlSqa1t6A==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":612358,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhLV9jCRA9TVsSAnZWagAAGfcP/1Kgfu9mnPRAEBs3nWlL\nGU8Lxu+EuFrJ5TBFNcU9O22FcxyG+S6RD1Z2p11f6zh/eR+ugQCSmpQEJOp0\nGhLQtpbyfsLkCWOHS2xGtXDLxYFAyNzIeVD5AancEB0wN2rwiRDFVe84j3aY\ne2/O4npK8yutUpXyE8g+ZDZ3vMHo3lZoKsdrNEoEAtXsSigCxVIJPMxzkeOA\nHeBwguAQnc7kKPuS7H4i31bnSUTEggSK2nDTXBvO1cHqEXuISm9N5YEZD91x\nfyMXLX9rrXGNTQcthSLU7GxW3sjiHBCFNy00ctFKEFWankHgJPaALkkOBwNE\nJoyLNpQ4aqPYdKMiG9153IghZshi8Rao5XVUG027aQcPIXEvhP12WnOaL6wD\necKLyraKoqBPKYQ9EoCZuIDWLoILqrlqSAf+41gegtPGQlDHKRZmXyXarwjL\nFkTyN9JjgEQ6mSVSiGHYQuWIAjAWEVhOtDV0JFp7xb7n8r9WsJdMqMtDxUpf\nbMIskQISEUAhOEoPeYZpKNHAvN4nfEUijZoh8sUtBvRj7Bj7TSiRy556GSv6\ntCHAVgWahJRg+rKuGqizLeVkDQuaUZfUClagRrcPjq58YzeqOtp+aTCzN+Hv\nSP4dIkDr9Ik8OK6NWOQq3/YY420XimeS9toDioFt5OvnbyFDbTU5mcHbzhav\nbN4Y\r\n=D3HF\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button/styles\";\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.**\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n**Note: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.**\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button--icon-leading` | Optional. Styles a button with a leading icon.\n`mdc-button--icon-trailing` | Optional. Styles a button with a trailing icon.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n\n**Note: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommend always including it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color-or-map)` | If a color is passed, sets the default container fill color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`icon-color($color-or-map)` | If a color is passed, sets the default icon color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`ink-color($color-or-map)` | If a color is passed, sets the default ink color to the given color, and sets the icon color to the given color unless `icon-color` is also used. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color-or-map)` | If a color is passed, sets the default outline color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web 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/density":"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/button_13.0.0-canary.6adc9e83f.0_1630363490931_0.6301929368786761","host":"s3://npm-registry-packages"}},"13.0.0-canary.d082790f0.0":{"name":"@material/button","version":"13.0.0-canary.d082790f0.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"444ddbd5070000522fad32128aba1f4988bf8b41","tarball":"https://registry.npmjs.org/@material/button/-/button-13.0.0-canary.d082790f0.0.tgz","fileCount":40,"integrity":"sha512-z7pimq379LII3TNM8jt+T0N61dfqzr9DBzyAdhcHe/pB/UbD8tCgYFQqoj/YEhcsjrdIIUGeIu7XB/Wx8HoHbA==","signatures":[{"sig":"MEUCIHf2Cjd/gNeTZkM2BdB80/ocobUrcv11cObVGAtr5eeNAiEA7hrqM8mkFCEAWdpXn3RxDotORm/RNSCCO82sfytcxL0=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":612358,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhL/asCRA9TVsSAnZWagAAargQAJ91Lnp1DyQ/gQODtzEL\nSETycPc3/E4LblEn3kowl1MBkZcfNgUas1jWoomC9kT7AAEtUOhnD6j0YkEO\nQhcxsRr7JALjch2tLSI2fvB8eo0FBJ9RGLz9wZUdjlzck/zOvd5jjOt5wV9S\nsTqprBfe0Gy4KyI9QWIq1lzdjmISMgTryy060XOR0LYNGsQMkMZcL+QAf2l1\nYuybE7QlF6OV/9/kHQeNwUYzTqi4K0+/IJz5qT9y5N4xpoopmEJQTibd0x2Q\nbJgHb1LxuGO2U/xd0guE0+S88u9xQ97kefVefU1jKm1yRZ/GzNfsDbeyVLie\nl4wmsLL9GtWtzJj09R18bJpwyeQKnBiiT8aLLNoC54KexgAka5A3fTtubuF3\nC13W041OKVpJlKWVTPei6AqT7CsgcVv2BYvpYopd3Ps1Uy6tjEpmZliy1gDt\nxdqhVgstkGrGPSXiE03x8kencj5E223gFxQ8f4sMm2YVUUFLXA5XIVpPwcxa\nOpa9+ci5PN4R/AkfnIIMlxicGtEL7RB/pA4ZVVhJqBL5kzGey/gqlJtNs0RD\nIILh4BlWgvFyHw3gZftrqMkufWFO1+wjmbCk+pQtdj8QTkJMQjJsSfgP0g/q\ntGbFW6Sbk6HVy+jyS8zv5sfAz/gaDoXnvvXGUVZ3Dn97riilFXapTxoEXxTS\nd4Di\r\n=eIiY\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button/styles\";\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.**\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n**Note: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.**\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button--icon-leading` | Optional. Styles a button with a leading icon.\n`mdc-button--icon-trailing` | Optional. Styles a button with a trailing icon.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n\n**Note: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommend always including it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color-or-map)` | If a color is passed, sets the default container fill color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`icon-color($color-or-map)` | If a color is passed, sets the default icon color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`ink-color($color-or-map)` | If a color is passed, sets the default ink color to the given color, and sets the icon color to the given color unless `icon-color` is also used. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color-or-map)` | If a color is passed, sets the default outline color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web 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/density":"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/button_13.0.0-canary.d082790f0.0_1630533291994_0.6876584915472954","host":"s3://npm-registry-packages"}},"13.0.0-canary.e2c4f0196.0":{"name":"@material/button","version":"13.0.0-canary.e2c4f0196.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"49ccadd2a5f6f1f94de5046023e3dffedcc7860a","tarball":"https://registry.npmjs.org/@material/button/-/button-13.0.0-canary.e2c4f0196.0.tgz","fileCount":40,"integrity":"sha512-+K36KPERq7s0O4uBmrYf3oKXtVdbx3kVNogJpMxg1m090c/4KyUiZR/aFbsyisOCvBh0UeH3o7p0oQZJdhRkjg==","signatures":[{"sig":"MEUCIQC3svy6KM+AlYlQFzbvUyGmXLKTx/5z/t5OjsZcnQgcWgIgH/wpfrp/mOtlsie+80loYeXnidympClSil3O+K/kNi8=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":612358,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhMDLsCRA9TVsSAnZWagAAooQP/0GVQmPTndHE9iTyb6Lg\nKvRBZ1rqXzT5TdS5dKb8y80iKgg3TI+5LYRFFaJqCCJsA6PJbpzhSsM49krE\nalaYDSkL3bBt3bKywoYAMNxKzgmpMTfwm4LzVdJ9NqFrxgaQvr1IkRC4BUst\nalMxtBwFdo3jke9UJv4sZtbCj0FfAjkFk+SD9wO+K+x2PjX+GOcmHcbN1Nuf\nNdhWMnm61eJKTVdUVFgzL7HvYZXIbsnGvnG674dtiCoKWZP9vI+XRWGQ/oaZ\nBcOhL2YitXtfcra1pi9sgtgN+POLvmKqwdZe0Jq6jeobQ71RoQ9OWTA4s2rp\nFecpkvufKvv6MbRxOCHdt8nA7PxVcZ8TDZ7IBCLRBzYF5MhuEUP0emXTIHXe\nH6Q/cIPkvvnlziV1FlHdV57xWkDgl4FuD3/qrV7/Hk1jE6WzD97wLmHzhCEY\nSCPwKHgGUwMQoyAX6Mjq1zCbY/kpkBelEmgoRZZVnedSSnfzUGXbLgCh2uje\nhQa5DGW6//VNTTe91YgptDcqa7yoFjwSooOPN6Pzc3SaafEfH5OIW0RJBlc1\nfTS2hjXtcItTGiAzdl/XIHw6fQUI3Ki0veBYYAvx6xsF+XfL20U06U0YLQ6/\nb10xKB3N0GlqNEFay0UQFLb86Fw44q2L13OKCr/RWil3z6Vu0UscspAgjyvO\ndHnw\r\n=WH4O\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button/styles\";\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.**\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n**Note: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.**\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button--icon-leading` | Optional. Styles a button with a leading icon.\n`mdc-button--icon-trailing` | Optional. Styles a button with a trailing icon.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n\n**Note: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommend always including it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color-or-map)` | If a color is passed, sets the default container fill color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`icon-color($color-or-map)` | If a color is passed, sets the default icon color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`ink-color($color-or-map)` | If a color is passed, sets the default ink color to the given color, and sets the icon color to the given color unless `icon-color` is also used. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color-or-map)` | If a color is passed, sets the default outline color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web 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/density":"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/button_13.0.0-canary.e2c4f0196.0_1630548716233_0.5886105203177479","host":"s3://npm-registry-packages"}},"13.0.0-canary.611db508e.0":{"name":"@material/button","version":"13.0.0-canary.611db508e.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"479ca28a4b4af00a126ef20732ed0d2790c173f0","tarball":"https://registry.npmjs.org/@material/button/-/button-13.0.0-canary.611db508e.0.tgz","fileCount":40,"integrity":"sha512-+5RboNu7I+7qt5QaQ0b2jKT+89jLHrXlpINim6bXnqdQKHebx5QkNgYsdykHQenqtzQvVq/pCNokSyNCInCt+A==","signatures":[{"sig":"MEUCIQD17ISV3LnK191u/3nsLU/bKTg/pTUEZaXnMlJ5tMUCQQIgTHtwrMYIQ75CzBeKp+7jU6ohHBpe2R76hbGIbg0F9OI=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":612358,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhMEHcCRA9TVsSAnZWagAA/+IP+wRBOYGNDTC9Hj3cuyN7\naJ3EcQiM8e3YGyTGPD9MfEZVKf9dlZiIPD9yKnd9S2IBL1aoEmumGvBaOsVR\nctRbYpMli5svzmMp8rsv9qeQIiY8aKi069/+TacKtrs1KnRMrq8bPeAYAaMJ\nmhcijAz9eI/lGyzUrv+YDXKtowM1lB2XrAHy9VKbtErnKhkpbziG5BC57jF5\nOhN7cIkNgl2IgB67A6lph6tcKC9IIklHLQyboQ3+4iTwgaifrAt+mk8cMtGb\n2BzLE8St7CWU00SxiSwO/I9ZNysmR7/KgpVccCfQrhVssIFND8wWMrWzcw1S\nNT654PLfl/12NUSED7f6BvoiYU8s4NfwPB+BYApfqyimhRvizuQNrqQKgZ/T\nKDI+8JBQv5I3t5S9yc74fE0kaZLCyt5XgQLsPF/A4DUEYt6TRqlWrQQ84lGc\nDZNLBO6q7uAqXpiFrXi4tYkJmShKIYyODguXQFhmYsD46gUGGiPMjkfoAyUH\nasTmjup4/5JKPbG/l+24QF9TmpZp2q3yqZhRvcmJD4YC+voO6lwI70HjU4Ht\nMLtY5QVoSuc2PfPoAMInWEVxaCv6BYNwZzDc/xstyIiLhHBVl/0NSvj5dw69\nJXJjvbDbohGz8knEhTC+sl8p3zdxIItCC/MsP7Q7v3r4pIC5rPhD6hUbzxO1\nmSYg\r\n=mA15\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button/styles\";\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.**\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n**Note: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.**\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button--icon-leading` | Optional. Styles a button with a leading icon.\n`mdc-button--icon-trailing` | Optional. Styles a button with a trailing icon.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n\n**Note: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommend always including it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color-or-map)` | If a color is passed, sets the default container fill color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`icon-color($color-or-map)` | If a color is passed, sets the default icon color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`ink-color($color-or-map)` | If a color is passed, sets the default ink color to the given color, and sets the icon color to the given color unless `icon-color` is also used. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color-or-map)` | If a color is passed, sets the default outline color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web 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/density":"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/button_13.0.0-canary.611db508e.0_1630552540506_0.6378225397724697","host":"s3://npm-registry-packages"}},"13.0.0-canary.d4706933f.0":{"name":"@material/button","version":"13.0.0-canary.d4706933f.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"628b7aa4526524d5cc92c1e4674801384f957c51","tarball":"https://registry.npmjs.org/@material/button/-/button-13.0.0-canary.d4706933f.0.tgz","fileCount":40,"integrity":"sha512-RFdBM26M7wlUzdLakkf9uJGM6ijM4MfTExSOh0+2iHZ7zL7Px3hNBKQbtaWqknfOqsc/5AkQkeSycCM3HIF6xA==","signatures":[{"sig":"MEUCIHFv7R/UVXk2Jo3vlVt57ZxKVlUif1EWb7gZ2khnyIVhAiEAweh3wp9w9AHSw34dm8lTGEm2itHDt/iioERTX8mAg6s=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":612870,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhMO/qCRA9TVsSAnZWagAAGgQQAJLfOn1Isc6vI5fnuw+m\nPUgbZ0DAg9dhuOQPjzskeNYIFIGIpe7LqvmweAb9SY2D+y5YXUID5z06xcF0\nvtT0IARC3dsbBefu8dCWjM/dgB9SwG/iBldMr4GFikBc51xnNN9DcpafjCoY\ngOMhUIHDmvGAQX0EB8TvC2fr6ebRK//nPJVTzI/UtoGSwRPOKdfkV+o8CPWJ\n/7mw3QtYcNmYuKqVaOTpKF+bWUJ+BdLGo/0OPo0+kGuEwQDssrcw5/VTwDw3\nDzQ3zi0jWeHlynTYZJrbRDCfDO0xp2V08ptcO8XNSgIpL93nPTgolnifv9+y\n2+0RFfe90zdFpuf2U7cwCkYCL8WJRZKu4PFp09fUKo+VSwldnl5/5qF6hBGa\nZeX9xX5tOMdq70DiHt5R4RdcDJmkhqCaUZIEiycY9foHjox3SYHadcyh0Sz/\nNHMODUqpTEhwsH1YhCuPem/Nf4OYKQFPvo+oAdEgS+C3WbQY+D8AT5WN8rek\nGgs1gz0Vx2CXgeQbrb6S5aGkCrTusgpiURJ6PNvefJdtmUOQZLl1V2+nOggc\nbydpTCReDsC0FZp3RPZBV05tnQan50WP5G5W6nSQzUmoK/wkfqpEDAq9f9yv\nSmGHI4zb80KioIn2lklfyBn+XVzlxEW84CXyhXbkRygSaP7ryCg1DEu+pQci\nlf2G\r\n=DZr4\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button/styles\";\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.**\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n**Note: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.**\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button--icon-leading` | Optional. Styles a button with a leading icon.\n`mdc-button--icon-trailing` | Optional. Styles a button with a trailing icon.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n\n**Note: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommend always including it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color-or-map)` | If a color is passed, sets the default container fill color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`icon-color($color-or-map)` | If a color is passed, sets the default icon color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`ink-color($color-or-map)` | If a color is passed, sets the default ink color to the given color, and sets the icon color to the given color unless `icon-color` is also used. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color-or-map)` | If a color is passed, sets the default outline color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web 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/density":"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/button_13.0.0-canary.d4706933f.0_1630597098382_0.3101060695761244","host":"s3://npm-registry-packages"}},"13.0.0-canary.c16fe03ce.0":{"name":"@material/button","version":"13.0.0-canary.c16fe03ce.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"c26394d7300fa72842f1d789785a06150c849515","tarball":"https://registry.npmjs.org/@material/button/-/button-13.0.0-canary.c16fe03ce.0.tgz","fileCount":40,"integrity":"sha512-exJT1O7qbeB4dJyleKY2bWVpuqkqHbOZzx8qhHjeFnlUsDOeTdsEu5N1MxEJk0UHUACnBbTC928WRVxir5XDgg==","signatures":[{"sig":"MEQCIHNThdY8a/5KpKNtxdQalyVHquxY1uqH0xWNxpMVBZCnAiBx8NHBpq4kVe/mE9bgXIM+SyQJgYt/g8kKMOMf55XzHQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":612870,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhMQ2vCRA9TVsSAnZWagAA0tYP/0EpoA6qIAz1SRVG1yIn\nARypP2OHXW4LNz7FcO2JnYZ3H2xuZeI1686+PWSdQJXy3DvLCJbhULfl9Xa5\nb1np1Y3l71APU0KkQOQrlUd+5fUdRqqqv2rRxAHsitVoG/TcxNPBpry/W1v5\nN0D8CAEBea6TtYbq+j47gqxaPwaK4NVfkAPlU2VNM36KZt4eVePVjA772Xey\n98IIr7sucdWkjNKV0HVM/mFlDeeUQ4y/epXXTxzv+5qCU1bIgPBAn20qG1oF\nxmkQ0qHSgPdf+TXR+RMqW/JwulNE57XgfnVC0/D+5LpfdqOFagspIUX6tpBE\n+pw6DlQfmskjDZU35wCcAVAx2u6TT+ztSioCOP6sM8A/q1t181zGLKZXyh+B\nA2YXrMDND8MuhHfPOvVPM/iCA7uBXC9FsWVkLWqQpGTbPeJUTsq7d8xFLWjV\ns4nxHdgIsGItKqurjYhOAx/LaiO9A+gm7s/i3F4VmdzSEFGVVlyJ1SP6njQs\n9i9SrbVg+Nf2W7vrnmblu7kmqoxovtqLG+nigzqK4+v5XqzpOpwEF2OTP8d0\ncR8NJKzpAmoejHAMJxgq6SXr/FU5R0qdBGKhOwDFcKBvyLTSW73oCGr4INyl\noLF/qgqrDCx+Y+87/Cklbw+JW6owoY0zpERZHbXn07rxGA02inY5FETctEs6\nXXH9\r\n=oeEa\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button/styles\";\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.**\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n**Note: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.**\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button--icon-leading` | Optional. Styles a button with a leading icon.\n`mdc-button--icon-trailing` | Optional. Styles a button with a trailing icon.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n\n**Note: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommend always including it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color-or-map)` | If a color is passed, sets the default container fill color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`icon-color($color-or-map)` | If a color is passed, sets the default icon color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`ink-color($color-or-map)` | If a color is passed, sets the default ink color to the given color, and sets the icon color to the given color unless `icon-color` is also used. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color-or-map)` | If a color is passed, sets the default outline color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web 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/density":"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/button_13.0.0-canary.c16fe03ce.0_1630604719459_0.4681561604266484","host":"s3://npm-registry-packages"}},"13.0.0-canary.9203a958a.0":{"name":"@material/button","version":"13.0.0-canary.9203a958a.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"5b2bb93991f0d9f532399314b775b0e2e4fe1026","tarball":"https://registry.npmjs.org/@material/button/-/button-13.0.0-canary.9203a958a.0.tgz","fileCount":40,"integrity":"sha512-pvA0km/Tl052m0AG0vmUpEN68stT+ZaUIMS8VtmHZzQMmmR33KX+w2mK/ygjer9hiH8JO7a+EKzWFURGG+2dlg==","signatures":[{"sig":"MEYCIQDbA2zBTzbXLYnprA3xL2b3vo5cunUv1lssnwNPGyiMiAIhANbT9tao+SmtEKF19pkpl6jmsMKb/Cj8zzqovW1r7pfr","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":613711,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhMWKKCRA9TVsSAnZWagAAQkcP/0L3OQqg6dD5JqTBZQ47\nYWmIMOViQ7cnUspZAE74t7xEDK9v9OCo1noB9Zxfo59Dfr9c94fAVWhac5ho\n1CC7yFq08aMUgBIis2ZHsvpAjeMzvC8rG6HFqTvdPCN9MPmvbuMbIxdYZ80l\nIPlhWD9ZaZKVcc/ounjHEhAN0I3wNgBfgWz7SONkIZHA7hmHdMj6APqJkaCU\nIMN0ZWxdZlED8EBSA2vw17bJtBWt51/Mx6ObhTrlZF/MHnagWVklB+/n/SC7\n6YEAAFKKOCRo01YcuPq/0BDa8Or8iD6V0dQMDt3rNwDFiEHRmAoHyQeReImE\n4sjmpn0mv8MtY64N+PIo6CUNKjkE6Lt4tvnL536jwux+rlGpLoDAbgsQdqs6\n0rS9N3PxC8rWRnz/bwdDfgZqpe7PWhv3+roUMHdq/zTDXHTMrQRgN1fnTrhy\nwbjyRbWjaefX2ZP62ITpzMHagyMQaF3PkSfK3CWMwz0ObpgwvU8Zt5zmIX0f\nLM0ndYNHhhrRJZxNHKJ3J8+Xom5M4Fp1ZKSi8gkyaoRh4Ok9Xu8ZaxHk1GgH\nfGgaK14H9AHrLfLqID/bcyINTOzojMzofILw1277NiHRt+rBOaBg0ATyqQ3w\nJnh+/OMgFvKQ3XBoCjsKahKg5cA+Xwik880WcOzbUQURBv/N3A/q5rOPgui7\n6vCk\r\n=iBGI\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button/styles\";\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.**\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n**Note: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.**\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button--icon-leading` | Optional. Styles a button with a leading icon.\n`mdc-button--icon-trailing` | Optional. Styles a button with a trailing icon.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n\n**Note: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommend always including it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color-or-map)` | If a color is passed, sets the default container fill color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`icon-color($color-or-map)` | If a color is passed, sets the default icon color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`ink-color($color-or-map)` | If a color is passed, sets the default ink color to the given color, and sets the icon color to the given color unless `icon-color` is also used. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color-or-map)` | If a color is passed, sets the default outline color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web 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/density":"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/button_13.0.0-canary.9203a958a.0_1630626442506_0.45864676549052996","host":"s3://npm-registry-packages"}},"13.0.0-canary.fddd5ae93.0":{"name":"@material/button","version":"13.0.0-canary.fddd5ae93.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"bf2e1975c22c7c732646180afbc2ca8c7228396c","tarball":"https://registry.npmjs.org/@material/button/-/button-13.0.0-canary.fddd5ae93.0.tgz","fileCount":40,"integrity":"sha512-fSzzp/YGde5ydNjZadk5F5KNuknQcm6JX0SFsKA+dsI/GGcBOc3s11qEe448Rut8nvKjMvXEH3QJ6tZLcMvlZg==","signatures":[{"sig":"MEUCIQDiW175Q+0Ws2JQf6Mp2mc7JkBNZ0Y9tW7kn6MBP8DRtAIgHGyyvhMcL5Bjo+kc7i+siJ0gw0aScVr70AcoKEv/LKk=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":613711,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhMc83CRA9TVsSAnZWagAAZZUP/RH+FNvgUhpYrlVFupHx\n/sqE1qW3SPkWQAVu9BIDPBKllrP2G5GdPJmYJefiY1BwUpq+E0B6WWTWPuh3\nqSLhKL06JXigb8moXVOs04VApaYnG9g8AG/9qjtgmXfrnyUloRLlBKZowWzt\nobUXxxqvsUX0hg/abRYdrKpDQq3Q/Fjdd/8s15CI+gnEqxjOjbeE5oixPdAg\nTD0446QYmBsnbtvIX38Jkr3jhthWq8ZK1mDMJcmKd2tCC3AfIoTjhf6nG7SL\nwhLzVtPY0nrskTSQJ4KLqDeBvSj6/BW5GZyJdJ+fGXn1qf1bclgwxX1wbtxc\nLd01fH1dKkjdnRPjs0v5OukfPqR5Yf1x+kqCrzbh8TxzR5eB7f6yJ3fj1iv5\nzogSqJgQxBHPa2XgV+CxOm6TjSps0D24vDxJHd0V259HTRYs0fVZWpXoz96G\nDCxJcuei9pQEiPuaa4wLWp0YFRWrG5Q9mcLe+/iyUezXPaRexkcD8mEWoNqz\nfHthdN9mzO2s4unekcj9xppw4HPYVHgfHyvOSIvEqzfX6s7CA+lXBj8owHBZ\nTTVuSM2MzqyqwuroIG4ud7GWpGers6yCRNrXSrPKxcVCearrBO5bhBvnkNcR\nD5WOvH4079SGQtnb1fKIckLPZTMeQVRTe/gm4otJWf8JwgA+1EE7vrFoCGLz\nKcaK\r\n=O7Mn\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button/styles\";\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.**\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n**Note: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.**\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button--icon-leading` | Optional. Styles a button with a leading icon.\n`mdc-button--icon-trailing` | Optional. Styles a button with a trailing icon.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n\n**Note: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommend always including it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color-or-map)` | If a color is passed, sets the default container fill color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`icon-color($color-or-map)` | If a color is passed, sets the default icon color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`ink-color($color-or-map)` | If a color is passed, sets the default ink color to the given color, and sets the icon color to the given color unless `icon-color` is also used. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color-or-map)` | If a color is passed, sets the default outline color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web 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/density":"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/button_13.0.0-canary.fddd5ae93.0_1630654263518_0.3485450953769098","host":"s3://npm-registry-packages"}},"13.0.0-canary.117599a8b.0":{"name":"@material/button","version":"13.0.0-canary.117599a8b.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"117e4fa30c0d953c02c6284e60e72bf56ecbcc19","tarball":"https://registry.npmjs.org/@material/button/-/button-13.0.0-canary.117599a8b.0.tgz","fileCount":40,"integrity":"sha512-f1c0cdcpWGRYAfLCYQcI7+MbQ1sqH6YjTEbCsbl+sl3mtKb5nAqBeiv2bYJ7odhQYvs2Vkc0eStajwOuGIsG/Q==","signatures":[{"sig":"MEUCIQD8c+x1oKVedtwEqulDBN8WakCg+WzEhjHoTVNHwW8tdQIgScvEMB5+eeY70KuJ8Pjh0wwxOhYCqXMYIxSgxrSrihk=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":613711,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhMc+XCRA9TVsSAnZWagAAUpUQAKEy9yGpnKR6mbcDWzw9\n2EtDIdElEBGQkhI4IIOcHjKr76yTGEyIcqn8TokwxG8MyO5Hs4+a5ZSiRz3q\n4HDfpZzheWugIKZRZ2rSSzUuwJGSsOGuVmL1yxZlocQ7zW0V+ddb6dwJJ5Uf\nCREaGWpQPsjwiDhPbVOIeU5UhSSl7MPQQqW0FRRRHn2SqzJKLhJCSr9Pa/c0\nIhJVSYJEic5ggNW+G4OZiCQD8tKhLKDJs56D/n1t+IFP6imDJ/2EWgtSdqb4\nzAyOjLfBD8OwMV7hyayq+8tcNZ1k0Rluq62WkoTqP8Ec1qd0kv9nSbcHXo4r\nfQOOverepIzGUpq7SJZmTONUyUsILtwZoqNbMt5z3nlZKt636hr6DsqotbQt\nMvo4LCdIgwmX7ZftsqXXIGlAwbcWJv+3bJ5on42fDy12Sv5FsYo/LeMHAHtU\nRGFhiuW/1MeOWcMvm0gpOtzWEpQzmA6fzMseKCnQdQ9KK1ZL8+yeclFG4NBT\nlpvF5qqZ+/1QXdW1DP2J/bYvo4Wyz1+1Kibk8SCA16LdoDG6GZLjIuBPk8sQ\nhMc0gcKiLyuggzx8CALCfgMMT91Lub/TgUMMQ9LZz+MG0A+7mKaCwKwAmYyo\n7wOj5LhsiPGVRnZ9NsCGkkpidBBFMNKnHiy0uLmByJr7TxSUAfnxtteJkP3n\nOgOf\r\n=+3/Q\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button/styles\";\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.**\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n**Note: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.**\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button--icon-leading` | Optional. Styles a button with a leading icon.\n`mdc-button--icon-trailing` | Optional. Styles a button with a trailing icon.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n\n**Note: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommend always including it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color-or-map)` | If a color is passed, sets the default container fill color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`icon-color($color-or-map)` | If a color is passed, sets the default icon color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`ink-color($color-or-map)` | If a color is passed, sets the default ink color to the given color, and sets the icon color to the given color unless `icon-color` is also used. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color-or-map)` | If a color is passed, sets the default outline color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web 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/density":"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/button_13.0.0-canary.117599a8b.0_1630654359168_0.8381087038671182","host":"s3://npm-registry-packages"}},"13.0.0-canary.e4180d07b.0":{"name":"@material/button","version":"13.0.0-canary.e4180d07b.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"34aa32d186610595253b55e6a7e90918e11997ec","tarball":"https://registry.npmjs.org/@material/button/-/button-13.0.0-canary.e4180d07b.0.tgz","fileCount":40,"integrity":"sha512-pk5H0wJ5RDkyAXyUOU3l6tIrQt/TYV0CL7wtifBnGwOCUi3LmqI1gmEi4a0HBMDsL9Hey4GclkSkkApY/60V3Q==","signatures":[{"sig":"MEUCIH/3d2mJAjy4eFYuUgGknCR3EeE6GvboBwigvywKUYABAiEA8r100fMpH+eZ+OSpZJgqA5ZYzXhbwKb8+aaHRaEjOzs=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":613711,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhMc+yCRA9TVsSAnZWagAAYksQAIUldysYX8VC/LNXsKdB\n7aaWXXlOic1YPtPbzRYwQIFFhVw4BM6DaWhqKUi8NPMP5regAXFckS8FUTPB\nDraq/TP7DLyX4R7odBdgqvmdSHNq8Ptwa+I0HiVj68cUF2nuhxzbPgnREQLR\nUzjnSOIoRQJbJFhEulTSuAR+CVdnAlw2/FM5wjPKnsmYvwvvpgq2dMaakvDp\nK4vmXRrcAtzjUS6LVvu3tp8+FiIvkxf1fSPYT/4lz/Vy1RftGfBm91E3l1ZP\n4OiHUZWaWCA3Xzg1V84kVzC3PdGfw5GFCPn5u05WJY9aOIkplPkqWxME2cK1\nvfZROX/4sL2bZAzMc1GNaNJahHlm7asqNvhU0oHjPQnc9WzwTwsjtugGBE8z\n9bWyAe3XXKbVFQg8YhywEb15LvMhy61Z0jpe9YF3CNUmDkeZ/iYcobI4KOio\n4ennSYcdlW8eS6tgfV4cZukQ/7qF2K7Zl1UEAXcG6XjOPj0FfGfiJcKRuf6g\nxezuiWf97fzAxqF4SB+GxaS2YkLSCdtqaqVrFIQ3XMnaJVH9o84+tntYYB81\nu0m2gIKVYYeSPkj+aTJiRNn8YzsJZaHXXI0pQ8oCOFp5dpwbZcWOU7VM5QhB\nTqyTzRZVcY+jvoAsa+hO3JsYfjWH/hsYS0UjE2V9NRmzVkDqNcWmFRmx8vtO\nxKIk\r\n=R1Kv\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button/styles\";\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.**\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n**Note: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.**\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button--icon-leading` | Optional. Styles a button with a leading icon.\n`mdc-button--icon-trailing` | Optional. Styles a button with a trailing icon.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n\n**Note: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommend always including it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color-or-map)` | If a color is passed, sets the default container fill color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`icon-color($color-or-map)` | If a color is passed, sets the default icon color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`ink-color($color-or-map)` | If a color is passed, sets the default ink color to the given color, and sets the icon color to the given color unless `icon-color` is also used. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color-or-map)` | If a color is passed, sets the default outline color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web 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/density":"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/button_13.0.0-canary.e4180d07b.0_1630654385871_0.7254913280297866","host":"s3://npm-registry-packages"}},"13.0.0-canary.42d175efc.0":{"name":"@material/button","version":"13.0.0-canary.42d175efc.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"9dc5d62ca81dafa721b8480bfaa7c3eadfced8e2","tarball":"https://registry.npmjs.org/@material/button/-/button-13.0.0-canary.42d175efc.0.tgz","fileCount":40,"integrity":"sha512-frdl8B1KIWbFOLcIQKykzYFXbXF37tdeK4ga+bbYTXZE8x2ioJdPlWeIt/Mbl2eh5gVQRWoJq71ZlcTIJU02SA==","signatures":[{"sig":"MEQCIGqelLRb5MO6mWArH9GRCI4CdzbJH7eQ004bvNHD4tnGAiBMsYv8FOzyXzL4E6s4fh9xbH2PLnezVEO8fncWQATF9A==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":613711,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhMkK5CRA9TVsSAnZWagAAukcP/1zFmPr+Ydrw/rsjwhnL\ntCwMDvyuOQ1jZt5HkxLLRyOWo7QYBkV/19Npxo7Yu37OBugb0XjjB1fVfPdb\nzbYbvWqGU9fni7QOI3fWhx0iUsHN9B5Ide5WapKkYGIRBuUpkYMdvSD0OTzJ\nm97ZLPWxKc26u7az4ayJqqadcRmSdUoKqQagYDm0YE6K3kn13Pf7dpd71Bqf\npMW5tm0p3ddk1jC4s3hy3ZxcbwXlaFHqp20XlOgM7acTezpsP9s6GDz9gRq8\najYqGS9acHTcrojmbZZA2BTpxZFZYf4T2JSZ009v9WB+E4yICxKOOcqg+9mW\n+5uMJbhBFRHjET5aBQxi3Wp3MwDKE7EWATRTM4ahl26nekj2xD4QgpRVWTx8\n7loaUMKdboEOsIEwK7y1P5h+O4svdlT5ZEpAcu/OhuJMD4WFYlNYssxADMmx\nHLLoJ/mcCje0zaYQgDHG+wGUwf4Mv7rsMDobKierYJu7xoN0wEHRMB1n2zc6\nMgbmXYp7zgqu2RwIdSoEK4cBB77WyVyYTqQdL4mHc8OGVEcDh9Uv53zuEc2x\nvE4Wv4bPwXi4DUshvG09Ro0GOsb5dAH00GdkFxfxs+YPxBzXyRMt25dfhrwo\nkcgenFo4epGP8rbr6ayaiLCbNPPshwfuGD2JG1TQLWn4zHw1nzW9R++DFgjB\nS47b\r\n=CPYy\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button/styles\";\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.**\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n**Note: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.**\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button--icon-leading` | Optional. Styles a button with a leading icon.\n`mdc-button--icon-trailing` | Optional. Styles a button with a trailing icon.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n\n**Note: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommend always including it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color-or-map)` | If a color is passed, sets the default container fill color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`icon-color($color-or-map)` | If a color is passed, sets the default icon color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`ink-color($color-or-map)` | If a color is passed, sets the default ink color to the given color, and sets the icon color to the given color unless `icon-color` is also used. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color-or-map)` | If a color is passed, sets the default outline color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web 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/density":"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/button_13.0.0-canary.42d175efc.0_1630683833074_0.7149318696913369","host":"s3://npm-registry-packages"}},"13.0.0-canary.72464476c.0":{"name":"@material/button","version":"13.0.0-canary.72464476c.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"768943ed4dc4c96a11f351f0df3aedce0df561f6","tarball":"https://registry.npmjs.org/@material/button/-/button-13.0.0-canary.72464476c.0.tgz","fileCount":40,"integrity":"sha512-CLhw5HNCeMjcG7IfazH8f/nad1c9IhLzjjzGK2G3SOSi78bmqV/mHaQYa4ziHjdVoHqoWjTdfMEH4rwg0iqAZQ==","signatures":[{"sig":"MEUCIQDcreGPR4K+gwdg4xrk7YtzdnENS9haVlrpKlGm1Ek9ZwIgPPMX3l5bXB0V+7mJrutrcVvVkNFzCbjS+MNhhX1nwkA=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":613711,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhN4awCRA9TVsSAnZWagAAOI0P/j/RYDDF6SgVxBi56wAF\nv2dUymMHj5051Qz0+JtqLL0AKWWEyD5jGWmI0n0KMxPGHJ7yTAZ12eJg+PJ5\ngH7sXQhaQIgMlr6vcyJyRV9QmfZz2SsbTi6GJKLZQqkbZXZSHkVxgSAUx+4z\nB16npiguzWVE/XjP1DGHTmRW5RSu5hjNW8yXlBFpmYvvcbrQZieY6s2JKcdp\n4n2KdjMIb3oo3OedbLxRK+7wzqHYElNAn4O5W0UwK1tCBnT4AWZU8eh0dYaQ\ngImfM0s8qxv4MvtLeGZvktdr1l0J344Fi5RuhwiHDMa4ndi6tsCmOnor7k1a\nyyp09EZsui+qIkDTJp/VRhTIj5R5lL0w2mSpdKGvsvcV5fzeNEolSaKzHtnL\nv8EoOHY1FhAbsoRo7Zz9EfzSrUGGU2d1uwaMiGSBNxSQcRTnVJ7r10EMvZ+x\nWy3/iyU27LOyOpvzBhb2rZc05W7ZYROcqwJIVwFkepRghtLBB+3c/mo3Tbeb\nz9PIbn/RqTtZsXU2rzOrd6RSI93NGlSNNJIq7bD/M4gfnqy7luCtMt2oGLMy\nVFw6SiZdu7gaQ6MH8W4no1j3m2sSIgnvSdXPvkj/rcL/bSb4ymsc4h83S9bB\n6+5qxij0RMeyimsCJtGlxUk/XOcOCSh/idnP1UIUheJj8EpMfrt9mzOr0F6Q\nUAoZ\r\n=2Wzu\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button/styles\";\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.**\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n**Note: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.**\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button--icon-leading` | Optional. Styles a button with a leading icon.\n`mdc-button--icon-trailing` | Optional. Styles a button with a trailing icon.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n\n**Note: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommend always including it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color-or-map)` | If a color is passed, sets the default container fill color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`icon-color($color-or-map)` | If a color is passed, sets the default icon color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`ink-color($color-or-map)` | If a color is passed, sets the default ink color to the given color, and sets the icon color to the given color unless `icon-color` is also used. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color-or-map)` | If a color is passed, sets the default outline color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web 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/density":"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/button_13.0.0-canary.72464476c.0_1631028912385_0.49538042160217155","host":"s3://npm-registry-packages"}},"13.0.0-canary.37d4db866.0":{"name":"@material/button","version":"13.0.0-canary.37d4db866.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"6923c55f18a5b428bfdbfff218ef4592d877814a","tarball":"https://registry.npmjs.org/@material/button/-/button-13.0.0-canary.37d4db866.0.tgz","fileCount":40,"integrity":"sha512-Uuu1J94MpQo9DVP1Gk2zCLgfRAC6NXvVaWAzOtXTV8rMk5HdL2WTmYmbZmm9RsKZhL7Lmi7JckteR02C1UuuDw==","signatures":[{"sig":"MEUCIQCP9sMq1WcvLObYSt9um6fDojaa1pR/d3p0GY68N4+4MAIgWh6MhAij629j1J1Z7s648Jd7crmNnAYBP5Ir9N2iPu4=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":613711,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhOht2CRA9TVsSAnZWagAAL/4QAJRH17pEMWhFGl0BpHaK\ntkgSykZxWii+8cKF5uNqHpbBzOJTZzGdW6X3uwNBYWWQ6MEnmMLsN9NrvLEW\nE3kXsnGDetlSFbAK+UCPEnXjAc3ts5BsRRhj9br1XEr9nkN1DpzD5Tqb5ss2\nt9dhNri/2DgPZMZDBHMMYeVTjSxUx3+NBiJYwOkF13qAAjBkKIZrfvaJuV4h\nACDpWbdrdOm3tB6K4T/clHT9LIQAaVSwMkV8QM6RVAcjuNd5xtsib0nAh9dV\n+rOYzIJP454tyJtpaSzXSd1a/1NTaym9dflxcZ7/zPGOYMxvfKV1tPEFxwjF\ncEEhfJEpO+5ck6IgW2N64V3zo8pZRio4RbaIYE7UajOYxD4JimTzjSB0cjPt\ndbS9Ox97G51gP80ScGIrDEWTyKedhMFtjQWmdINqAw+mSb6qRzcU39MKtS6R\neJcQ6Frrw4tZJR2yU795YjUm8+TJtuG7b6iGNjhMBRu5anZ2bIqwgBJYAwWS\nmDHqfJyjLVrhaqswO9F+MA+f/v630QbnaI7063yguUsQiPxVRfcAB6xmbajq\n6jVUzOnRL8kRPSayz68JEa8T84HSY6Um7b5KeHdSQezhjLUduHveF5wy6CzK\nyfWgncArF8kzxRaH0ChJLeEZpzbDsvA2MbSZdgX20celP0S+9u3Ov6iRjANY\nkIVy\r\n=zS5v\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button/styles\";\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.**\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n**Note: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.**\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button--icon-leading` | Optional. Styles a button with a leading icon.\n`mdc-button--icon-trailing` | Optional. Styles a button with a trailing icon.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n\n**Note: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommend always including it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color-or-map)` | If a color is passed, sets the default container fill color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`icon-color($color-or-map)` | If a color is passed, sets the default icon color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`ink-color($color-or-map)` | If a color is passed, sets the default ink color to the given color, and sets the icon color to the given color unless `icon-color` is also used. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color-or-map)` | If a color is passed, sets the default outline color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web 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/density":"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/button_13.0.0-canary.37d4db866.0_1631198070461_0.061430787194440395","host":"s3://npm-registry-packages"}},"13.0.0-canary.6df682e74.0":{"name":"@material/button","version":"13.0.0-canary.6df682e74.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"def3c429599cfc2204a3d334222defcd56bab605","tarball":"https://registry.npmjs.org/@material/button/-/button-13.0.0-canary.6df682e74.0.tgz","fileCount":40,"integrity":"sha512-HIUDJa0VPtLXNeYuB2+Ro7EdgCm14uk5HjdnVeNTTOVDhwEMjjdvh+kL9gquiCw3ySGfiPYtZS7Vi8cOnuh5jw==","signatures":[{"sig":"MEQCIH+4zhl2rHbzIV7lNQXcJGPRIYOau1KpF/7SCobu6MEcAiAJVsIU5A1bT9C4BUedVe6LHkhuPu0Dj/66S97ridauIw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":613711,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhOivNCRA9TVsSAnZWagAAOi4QAIuFVPJqRItH4BdVnv6e\n9DOxXfBjmhLB50gdnZc4+CnNr1CrGjmW6Kb+ZD2mfgf5/Ftp8BxLYu2W11Ag\nUy/zQA8ZkWHutdgyUZ+Lk2Myicj2XeYxwCky0xxk3rebtBAKT4DqtLCmpkZT\n8y3T9+Da9G4Ld8cZ1+S6AVxR61DO5XxVxWux8Q/7gIPEr2Jes6ZMvYCQ6dgB\nBSOXxOzzlCSNcm1XZSNUrbWoFLCe1A2MTYjHLbPXK96UG+O2zhAdoSkbIBun\nOVkKkOMcJzb7+XPirAfRTEn2LfnauE2ilubpmwkiSkoXDSVzd8AD4gpOfmqG\nECcGjVKeFbQZxiAqYD9MlJh+S/1fcR0fQLK/xfNmGLTqOQhKJdYSTEXr32j7\nGfOk52SJNNSuOgZC6DJ50Dx4P1Jm6xUctkYrc5/To2q/vk6sGOheRroQoru+\nri1TGTC0mr0SsAUepEX/jK4Q4NgRZ0bdZ8FjIAJqMEs6bLvjns/JCRXKV5X5\nO/g9qVJ2hm1PlJunIunwtn8Uz3mAXyu+qaHBptWYkPg8c3v+o/Bv8lSone9u\nDf4oJ7hO/xdY1B9u8nZBpDSB/oeT9o/lMcGaEtwCInmYX8TQcWaDc1yQN91U\nVZxVLxGce/PApP9UmwV2tfSgltQ7p7Eqsv04+FISgLANAScf2Itbt7ZzH1dw\nHFFZ\r\n=xf9N\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button/styles\";\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.**\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n**Note: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.**\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button--icon-leading` | Optional. Styles a button with a leading icon.\n`mdc-button--icon-trailing` | Optional. Styles a button with a trailing icon.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n\n**Note: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommend always including it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color-or-map)` | If a color is passed, sets the default container fill color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`icon-color($color-or-map)` | If a color is passed, sets the default icon color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`ink-color($color-or-map)` | If a color is passed, sets the default ink color to the given color, and sets the icon color to the given color unless `icon-color` is also used. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color-or-map)` | If a color is passed, sets the default outline color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web 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/density":"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/button_13.0.0-canary.6df682e74.0_1631202253457_0.5372327421355285","host":"s3://npm-registry-packages"}},"13.0.0-canary.b49359c35.0":{"name":"@material/button","version":"13.0.0-canary.b49359c35.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"2cc11932969ae0eded2e0bfd5e31ad8ad7501859","tarball":"https://registry.npmjs.org/@material/button/-/button-13.0.0-canary.b49359c35.0.tgz","fileCount":40,"integrity":"sha512-CiX8guaP2CSePP1PBHrSZ2CwPou3YI1UoTtPrPsPG2u3xktAHo5NyFWlGN/roVy+0uDD9MzyaF44Zx35AoLS/A==","signatures":[{"sig":"MEQCIHCYwWtWc0jTtUKQ2dVAqTwIqvVNVPmSDhlYK7TONT13AiAwyAlsJxslgRacpJ+p0fsFskmdtW63fM3O1vRx5l/BuA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":613711,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhOkYfCRA9TVsSAnZWagAAc5wP/Ro6gkz56lLg9qxa+6+G\nooeJ1vP/fkrxhk5hFMJXbZ1cU0If0iotEvUS29QoRm06gbhieIpEJaqWo71H\n4Jgzj1HTYRwOkdlrL8hJyBcqbYRYnKvRQQghnPxFha/QPCe4Z+vn0ncKCP5T\nRAUf/0rtTuH9DRbc9PAMwanvwmoRt4rBrl/BnJq3cP3R9P6iV5Yf2O+88eOp\nqvuDZIQhoBS1Zjmzl4zr4PfSh6jCR3HCROlEsF3BQBbW5qOQ2vEVqgQ/GfxY\nG2YYm9PRWQyfuzxGog6LxNStBEeKEXD4oKj488OxsGbKT+0AgwSCT7IQeYsP\n1hUAYqgpVkPn8zUViG4IyCsUXHpEfiEonE/zClEOai1130ChIr2fQYmv+0TN\nWJEq8BQIovOpsrYcStY3GHyfJgDcgUF8MmRICucuMrWqqKnJ0wzuw9Cjljy8\nkqigz0dnp33QyjCckTUPzLYBjyatFHNf4QWqh+ij9vHo6UDcHmH4XaugugYE\nglY91x2MYbuuzJecpC8TW0V53XFrToco4bRRcWMVeAyXG/QK8sAMCAmh1Rd9\nx5AOLrhRKealpRoqYMTKmJFgnvMRG1BrC7vITxb8JCBr9l32e/j/yN3JA2e3\nliJNx/x7TsX0Y84e8Z44CaHyIKBgXN1Xr1bB/unuCjvlG0++UAmMssZkWPT+\ngFU1\r\n=4sFq\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button/styles\";\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.**\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n**Note: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.**\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button--icon-leading` | Optional. Styles a button with a leading icon.\n`mdc-button--icon-trailing` | Optional. Styles a button with a trailing icon.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n\n**Note: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommend always including it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color-or-map)` | If a color is passed, sets the default container fill color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`icon-color($color-or-map)` | If a color is passed, sets the default icon color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`ink-color($color-or-map)` | If a color is passed, sets the default ink color to the given color, and sets the icon color to the given color unless `icon-color` is also used. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color-or-map)` | If a color is passed, sets the default outline color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web 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/density":"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/button_13.0.0-canary.b49359c35.0_1631208991318_0.812330902686548","host":"s3://npm-registry-packages"}},"13.0.0-canary.470bd34e8.0":{"name":"@material/button","version":"13.0.0-canary.470bd34e8.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"4e1e483720740603372f07c6b7738c283060be4d","tarball":"https://registry.npmjs.org/@material/button/-/button-13.0.0-canary.470bd34e8.0.tgz","fileCount":40,"integrity":"sha512-SNHd4j2bbbg35upU6bPEdNVQW0s+ScAMRWDykbF7OZ9j06JLCvlVzez9XIJ0zrhaWPfdMiOOHh1J1y2B1Qhgjg==","signatures":[{"sig":"MEUCIQCq2Vce+Cw5VQSuauQYf3OGJ3e0O3ELT0IOXPWkbJhehAIgBW7ACqqSj3uyBkoEGfQG2+1Msf7hY8VswafUEWsrmMs=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":613711,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhOkwrCRA9TVsSAnZWagAAncQQAI+ihk4e9eUUkyRcEd+g\nVlbR9quOkXnjvvFncVwzhwxDRszxh1WZxhHLxl6fjAiKl2BDmRE6WCoc+2Z5\nhIiokU7fZYkLr5+DDYc40gGhUilf8/WsWrH8OxRevSA6Gr0Q8a72akmzwWSb\njdQ3jdh0u+csJei2PgW81GnpgpgzXVjlfOAXnEcMVKuijHQbTxH0cw2mIvzz\nODXtAiFRrN68E9eIHQ1nPG5WYzB1Ac7VGHi4UumIXho/9/zb/U4Yp2kuYZc9\nthadMDhrWkzKgF7PoCUdZXvpm4ptgAFg4v0dhOaXxvOn2UYPvOKLbnFFf4F2\nJfO3syK37yJbnf14vayCLOivyZGNS2MovtLf3hFHcQnUUK20bwVVB7ZaOsAg\nc6u4xfe9T3Jk3CtCebnTTcP8+chsL6Yo12J23YmC+HjMUubeRuvaf6quJjA/\n5XxjV0I6I3YLdO4lx2Obaas7K173oWIbo/dvafMB7YsVbT1uueDfhMD55FhY\njS1iIvFyQ8d9aA6kWVSg8HmzCIVnscn4yCEx/MBv1SZLT5LdzUSiWWfpkwW5\nNOU4N8U/zMqpFi9IaT5LolfMOa/y+aF5xG//pHnEABeMQ6HQ3WmJErF2PIeD\notT32x/oGyJi3VjgTna745Ta2aMI/EvcmM47ogYWXBpaSZX7U2JQdvuHJJPJ\nEDz9\r\n=zeLq\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button/styles\";\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.**\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n**Note: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.**\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button--icon-leading` | Optional. Styles a button with a leading icon.\n`mdc-button--icon-trailing` | Optional. Styles a button with a trailing icon.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n\n**Note: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommend always including it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color-or-map)` | If a color is passed, sets the default container fill color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`icon-color($color-or-map)` | If a color is passed, sets the default icon color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`ink-color($color-or-map)` | If a color is passed, sets the default ink color to the given color, and sets the icon color to the given color unless `icon-color` is also used. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color-or-map)` | If a color is passed, sets the default outline color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web 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/density":"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/button_13.0.0-canary.470bd34e8.0_1631210538952_0.541221531286538","host":"s3://npm-registry-packages"}},"13.0.0-canary.d48a01771.0":{"name":"@material/button","version":"13.0.0-canary.d48a01771.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"c1ab3430c916ad3a8a4bc055c4a1bcbcb7b1d4aa","tarball":"https://registry.npmjs.org/@material/button/-/button-13.0.0-canary.d48a01771.0.tgz","fileCount":40,"integrity":"sha512-1sh+bwCCfnx+vSoLRdiKcpAFawQATYNsn4Fq51XfVBuzCOOdNzRioGzattVQP9KEsRFrvx2wFHhCBSv5E1kgoA==","signatures":[{"sig":"MEQCIAhz7U3kt48ljV31tvFyUAnhuFrKmFOT6wHt75ZCnDlKAiAxJQora6AMa95DsgJCXBxwffcYuR7XT9dk/twgz0gx6A==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":613711,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhOk5KCRA9TVsSAnZWagAAcM0QAIxvhd1CwhqAHr+RvIjq\npOWsdrXhAtZzeGMeYwe4TjvyL387kaFxU3kYDmkKi017kOkpp5DWqBx3hi2x\nHMNCtEdCF2OLlu5ruNd+Gk4rgt5cdPaIX3W3VJVXrcziGaxeagmEJMr2volC\nH6ESaivCljfGsiFELqzr0koeGGdOtcMT2OIqttLLwL85rmc1BEVOsskr7Pc7\nx9Os0ngW1eA16c3TmJfeCnk267PE/hT1nTfZjl2Xagn4JGTZtiD3Fl+3BLQ5\nWXvCJMfq76FLzbryxXUXI533M7X2y85Fv6GV5l+D7Jc9q1G4fu1Rz8K3x+mA\njzG/YUEdL1BM5jnAQwlw4rUvbXnY0lCZVRg7LXAs6yqN35aIXc10x0OaJZMO\nhqIVFsZMzW0GLVAFyj/LQvKicPycbR4qQyTTGMSjGSrIKAQkCYzOkneg04GR\nz+eTas6Edq8JBIFJNWx6lNB0djvgqS9vLnfxyeqXaF35XCqDBax7YgzMItwY\n+wyX4mG4lU0+Y3GT1jK9hiLirNbFH9VpYpka4Ov77QPtCxIuxr6cfl/wHBqL\njHW76UgkMpxZMakTQaRiYbOmj+y+NNZT11NYEn30e0uDBfINqe0DuSQ6Aud1\njvCwgDoQA7MsDJN3F7BEi1WfcVLbH7ugP5fN/kSi30wvFPCEv+QxexAlD+AQ\nh2eX\r\n=rITi\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button/styles\";\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.**\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n**Note: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.**\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button--icon-leading` | Optional. Styles a button with a leading icon.\n`mdc-button--icon-trailing` | Optional. Styles a button with a trailing icon.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n\n**Note: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommend always including it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color-or-map)` | If a color is passed, sets the default container fill color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`icon-color($color-or-map)` | If a color is passed, sets the default icon color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`ink-color($color-or-map)` | If a color is passed, sets the default ink color to the given color, and sets the icon color to the given color unless `icon-color` is also used. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color-or-map)` | If a color is passed, sets the default outline color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web 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/density":"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/button_13.0.0-canary.d48a01771.0_1631211082560_0.9808546276644221","host":"s3://npm-registry-packages"}},"13.0.0-canary.13db34b34.0":{"name":"@material/button","version":"13.0.0-canary.13db34b34.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"0dfeb064153d2c1a5894baf6df28dac105f6b026","tarball":"https://registry.npmjs.org/@material/button/-/button-13.0.0-canary.13db34b34.0.tgz","fileCount":40,"integrity":"sha512-y+SvVSha+nLDT+BHLByOuSMhMPto4+I9yz8rJSigU6SVK0NyVyut1hHjxMFqZzVNvuzFXxNEJnjnGRf28RSwlg==","signatures":[{"sig":"MEYCIQDBAkz9+fQK0nD6MEhX2Fi5Wl42skZ3OXultusiYOa2YgIhAKszxtWcvnqaAr3ZUNzH8GIq9s0QQMb9QAn3mvx4TFjY","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":613711,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhOlHOCRA9TVsSAnZWagAA2rgQAI6l9V6TdA2A1i6Xf//k\n5iaDJwhVta0Owir4XafxgRzmb7KkON7HuFPwEYRek/tLokk5k2ZPpWuaXXBa\nC3k11/VG+iBJOV2DL7QyV7BnNdEZLLiTDGry4KELOj188j0sntQJX4AFk/yB\nmZJvr8logpdBrIeO4LjUIfNoh98zZTuQcqRtxWVXAlE4462DB8MpBOVCxIG8\nl6tlwhynNHGzV+XgljIPMpjAkScwOYr3axWzyf2pZg2wiNGBQOPvULGS7HhP\nsF7XFJ1ohcWE0BwPkcPXFwd1M/jTEJ7GOPkzP5P/zQz6rRn4oW3fQoBJeuVQ\nTx9DObV8G5wV8Vw/bx+WHDa8GR1zut3aLyq7sFgdI+Ya90Qa+lqvywNbYu79\n7VEbLN5sw3GJ9LyAREMrL24w2IownGWWV01LG/BtMofvVj0MJ6pleUGoW0lW\nUolqXV091DviXN26A6DYKZ5gHcvlnlBaco7MLaJoIwjivjB76y1DhFshCwvL\nO5YCWe8QdevUGyHkQ/I2zZVCSMssuWg12XcicXoZhQ2uUgWnOmaIZeoIVIpy\nZ2yBy7OsX4ELTmDLVhSqW793HMjcMUJUFS3Pa4mlScL6y7dKbL6bsh7NrL2i\nACm2x5tG6BPMfzmKExGDR8LnsYt2KxhiI2y91aKC3D+9K0BIsJIdvEVHROTI\nVG+N\r\n=J55J\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button/styles\";\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.**\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n**Note: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.**\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button--icon-leading` | Optional. Styles a button with a leading icon.\n`mdc-button--icon-trailing` | Optional. Styles a button with a trailing icon.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n\n**Note: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommend always including it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color-or-map)` | If a color is passed, sets the default container fill color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`icon-color($color-or-map)` | If a color is passed, sets the default icon color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`ink-color($color-or-map)` | If a color is passed, sets the default ink color to the given color, and sets the icon color to the given color unless `icon-color` is also used. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color-or-map)` | If a color is passed, sets the default outline color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web 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/density":"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/button_13.0.0-canary.13db34b34.0_1631211982290_0.6111967721842526","host":"s3://npm-registry-packages"}},"13.0.0-canary.864798678.0":{"name":"@material/button","version":"13.0.0-canary.864798678.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"4a1b885f6049441c4db1edc1e6bd1c21e4b86ff9","tarball":"https://registry.npmjs.org/@material/button/-/button-13.0.0-canary.864798678.0.tgz","fileCount":40,"integrity":"sha512-vN7t6t/CIVop7GM0MvTNlh/a8SbS3eWaPRjmZRTR+m2FLeHU+YLslqOsC0Mz3R3O/cA0iMNW3uE4i7PBrSKM9g==","signatures":[{"sig":"MEYCIQCaJD1+NLLeERBoYkjte77WDlAsZBum8tOjGOGyhsI3rwIhAOaEXdmcg/3kQ6KYDZHRONyEf5nhoC9QJHvHFfxcPfeT","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":613711,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhOlSDCRA9TVsSAnZWagAAvCcP/AqelskYUy6vRWK6LtLu\n6CtDabH81DMKWBj+LYXEnrM0F/1sVxLtPrzL0Pp+3fC469BEuQ4IUb2R7e4d\nsjmy5fp3FVcVi8oUwgjQhJ32pQxxzTqPs1EKl0eYPV+8WRlUYfdCQ+ExqTXU\n2Ygl3wgfuK5hhE1n8X7eGrznD5tEcnv4XY+xi+ckgzYyGBwPa1aJRggVNyFv\nJTVfDETGW9rK4wrxB+NcbEwMT3IL09iTVPE7wv8JR36XN8LLyao8YSeozMsx\nbFRclHxgnlkUywea31PFbpLm82mAAXs9J3NlP9igAEt9fVWe0FvzK5EcV5Gu\nAZrR8T+274JgTFIpH8VAGu2r46cYE+T6vh6X3WHOsX6wNs7ECkOuMqP1dB5v\nlMTzyFoAL6Vl8XhjONwHdJv+6228hibUshAfQRqKT7JqLtr1ad+AvOJEazpz\n8+2W4WUQCreq2htDj7g1m7qMfzwFEF/ny/djxfO0oWEs8VEE0eAKy2u/3qde\nC2YKXTuzrCwlgu40dlSLm0uEm3IzrzpAOYN6seNY4XLILPgTY4iEzvEsZZ2s\nJHunD/x70obkzRTmP4FGFWonXATez/JEFarvF9/ZPO5/RiD/dbRlDmsPzETh\nx5uJOR3MAUc7hDUt8s4m9WC38ruEg2yXP/z14eqJxXDWTvnuXjAJMHhVQmu7\ntbKD\r\n=ChOJ\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button/styles\";\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.**\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n**Note: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.**\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button--icon-leading` | Optional. Styles a button with a leading icon.\n`mdc-button--icon-trailing` | Optional. Styles a button with a trailing icon.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n\n**Note: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommend always including it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color-or-map)` | If a color is passed, sets the default container fill color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`icon-color($color-or-map)` | If a color is passed, sets the default icon color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`ink-color($color-or-map)` | If a color is passed, sets the default ink color to the given color, and sets the icon color to the given color unless `icon-color` is also used. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color-or-map)` | If a color is passed, sets the default outline color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web 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/density":"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/button_13.0.0-canary.864798678.0_1631212675654_0.6722732960611189","host":"s3://npm-registry-packages"}},"13.0.0-canary.d04bda3fb.0":{"name":"@material/button","version":"13.0.0-canary.d04bda3fb.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"15393d342279cc6b6033624d7186a020fd3cffc1","tarball":"https://registry.npmjs.org/@material/button/-/button-13.0.0-canary.d04bda3fb.0.tgz","fileCount":40,"integrity":"sha512-qQrb2nQAc30pkp/VialCy720CD19dC3fJfRtLAJBZTe6KODwd4z0H6GKa9K1s7ZQOpO2ahe4i0XvrC5fosOJmQ==","signatures":[{"sig":"MEQCIHT8jd7c8ulaMZU2xTekws7S+fpLRxcJk99sVlqthzttAiBhGVz08EvP0vhYwOMWCkf8jokaRXEubzqrM6SGTRGEdQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":613711,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhO3hGCRA9TVsSAnZWagAAyyQP/3DkYJzcldWn2o/ams6S\nE85t1j7jsRCYR8BcpQMXFiySz3DdZzG5S63GMpn9ysFRSWa4RtbYs7dz38ky\n9wo9XhkUfBmGkcyQNSRgEAe9JJfbmzShhNkE+Uh6ltWNMR/WZVU8l8krA1+9\nhkYyNkelafAcfmnNv3QAFUvE5diSJ6ubBXXR9PSb1Q9om539UF9Y1tzYsabl\n9L+vzxa3RMayYfqX2uCustCDhBufs47hua3EAWw6rdLqF1Sd2cbQx8cU0HUl\nlTU1OLmZ0iM11eP/S5vf708weaNNH5bll9oi/F/JWDkloOAem0BigqVjjyrs\nNSbVq/N93BAzgwPhCUqhI6sy3ltqk9GONygNaVzMpXesfR7NfVRUJ8Gr6y3Y\no5GUFYZKZGUlofvH0hW6qwEaOlMsFA9D3r0qPq4w2Suc/tgQrUfDZgGHKvaI\nFbCgeypxl1UL6dupOdpETIiUIA2O3FRtEVCJUEcH4Svxb76VO9Zg6Ggp+tfr\n+3ZIQ/6Lp0ooGtn7B2a5n8CCoB8y/jsWHIGvb+g3GxexxszeEm7UakLhc/SG\nIwG9s5yqo0Rzxz204tlSjYg4QDha5GWUasS2XwgBIYyjCe+L+Dct8fegpN5U\nOWV8g+umHyPZt1W6QNZnDK4Csb81HiJgOY3lfz4W/hNPxT5xkmbWmvSTe+z5\ntEua\r\n=sTdj\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button/styles\";\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.**\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n**Note: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.**\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button--icon-leading` | Optional. Styles a button with a leading icon.\n`mdc-button--icon-trailing` | Optional. Styles a button with a trailing icon.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n\n**Note: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommend always including it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color-or-map)` | If a color is passed, sets the default container fill color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`icon-color($color-or-map)` | If a color is passed, sets the default icon color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`ink-color($color-or-map)` | If a color is passed, sets the default ink color to the given color, and sets the icon color to the given color unless `icon-color` is also used. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color-or-map)` | If a color is passed, sets the default outline color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web 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/density":"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/button_13.0.0-canary.d04bda3fb.0_1631287365953_0.8109752681462723","host":"s3://npm-registry-packages"}},"13.0.0-canary.5533f73d3.0":{"name":"@material/button","version":"13.0.0-canary.5533f73d3.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"855df30d1a50a831f3f569bd960f123287889734","tarball":"https://registry.npmjs.org/@material/button/-/button-13.0.0-canary.5533f73d3.0.tgz","fileCount":40,"integrity":"sha512-EemJmy+rpV8W7o/6aUMwgyH6EXzfPt6sxvjn6qH9YcRWv2RAANPS+WvKCojSBDYuIAcaKcuACYDXrvYXZS8oCw==","signatures":[{"sig":"MEUCIQCzkncMTQG2G8Vrm1F4PTPIal60a3xbm9qoZ3jkc59TggIgCsMWl5uHxf01qsDu0MqNhrnIbfEAKOGse/FeOGbARNc=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":615070,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhP9kJCRA9TVsSAnZWagAAUVQQAIU+iucA/MsayRRIU5Jv\nI1NAU3f1LlthHhLk0K5W0xALvmFDEyaCVqi/RdYQ+fS3XelJl2DG03YgvdER\nJfPfUgGr4VIFm+es4UZZPGtZQutlPUh+UURbk3B+EHVrL67gRFcFco++Yxmn\n9hmNSftuDXTa4+jIDUMQv0ahyCOWNzla/jCnWWe2bARXr/MY8BWCRTj6sQ7k\nTLmGJfJJfahp3uNuteNH5HYPK0PMPMdD5V0cN72tDrkXUPK1cqNeUU0mrCAk\nsFowA0ncS7La7GFqZO0jYYTZnp/xpXu66gR4cZ380bI0KRx89Eq0Fd9UmqiX\n8jNoD3kztHgzIscj4CxPAxbXPwmzF49kPHim8+MtWzKX8YPki6TB2GNzmArx\n3WF6kgNkgzBombNqhP55sH5wW0jm6ONSlYX+3vRVjOv6honEMEQUqcU0NfOV\n4GTqUUH0lQHFT4LDpprgfhhVklunkF/2ZmPz3SJ8qVKapZMkQfgEUaDAmUXb\nK88utFGwF9BKzJ3ip2s3UOz6yzATFZfqqqKWyidDHETh0rr4JoDOQ1cIti/v\nzJEIOXoRmg9ikaR4U3slFC6bstgIPcUjBwXE+aDyVI4gTc9R+3iOeWpwKDuF\nLUnmKRK0BAaUVzvCELoLjihPTyMq7ZwDABS0OnzpvZStDPmRjCg0+xKheWhs\ndq8B\r\n=nhit\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button/styles\";\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.**\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n**Note: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.**\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button--icon-leading` | Optional. Styles a button with a leading icon.\n`mdc-button--icon-trailing` | Optional. Styles a button with a trailing icon.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n\n**Note: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommend always including it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color-or-map)` | If a color is passed, sets the default container fill color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`icon-color($color-or-map)` | If a color is passed, sets the default icon color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`ink-color($color-or-map)` | If a color is passed, sets the default ink color to the given color, and sets the icon color to the given color unless `icon-color` is also used. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color-or-map)` | If a color is passed, sets the default outline color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web 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/density":"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/button_13.0.0-canary.5533f73d3.0_1631574281662_0.2786396519473402","host":"s3://npm-registry-packages"}},"13.0.0-canary.08398f880.0":{"name":"@material/button","version":"13.0.0-canary.08398f880.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"4a6701e697b1b25ea3b8ad168721ebed39cac0ac","tarball":"https://registry.npmjs.org/@material/button/-/button-13.0.0-canary.08398f880.0.tgz","fileCount":40,"integrity":"sha512-ykhlqW93Q6GtcjwK6qAGSF1cR8c0ta320MbvOAfuTJgTYqkGqFooWkNepBG1/57ozpeFJ0/QiifsGA6TINfJlw==","signatures":[{"sig":"MEQCIA1hF4pQ/8ZMptiqrkbCHBJTaRzmFXOGI/4hIKIFsxk+AiBIYe2MYv76Ogq1F7sYS0Gg/qlLcEQHEIkxd3sRClp7tA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":615070,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhP+A1CRA9TVsSAnZWagAACzQP/1FqslAX5ocF7pG9pHW5\n/EDIRvrTAzTCG9X+EQF123wL2+5jhGyZbuqZDPklUgC22tzdCy3AFb7yMMKp\nhRuEOl3cHnVGkgQ1G+1Qo7dHyd0xCs8PwtVQP8EqJJ6a0Skr+WzifEzEmBlB\nz7xVBadeJFHbWD0xd/ZvYd3XkjulChQbRAplDBmStrndNcnsB4SZeC6gbpUP\nWAttd5wH0Sw/rPQON8qyc0kYxHM1VuBHIYjF/fYE0x9ss0nCYDv/n3cfslEG\nD2y/KrrmRQ534Z+jLUZ4cChnotuzr1o1dVcnkozq5xToJlc7m+Hy7WZ/G0Dn\npK+N+wbUxQ/KYzEPNBn70Q4J0KGUWxX0riES5q5tVzGal2MG3ni9lUunXeWM\nLFAesHFETNbqL7C6CX0wf6rvjm7prM7Roe88X/ZdfHaFVg/xAqWIULTgE/2D\niOVWjwr8lG4JFGtI9iMNXhvWFWRox60/nhZ0keHQr3WSZGAiqd1ME3NwWGo5\n0aO1Hf2mObpkbeN1FYnPRL03iR21+/VXb2XSHPhTfeznXYU7SjovtH9ut5VZ\nnON8EQ8tlMYw73mJXJgUwje0XQtxtIg3SL2hsRFXF0qLtEvOpI9ZFwnBMhIc\n3oapd0N8vXCINW0oVvRqjfAZ3+wDJilJO0r7qRGhas+ByS1XVuud7/ZuSEh2\nXZ25\r\n=ZFNY\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button/styles\";\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.**\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n**Note: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.**\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button--icon-leading` | Optional. Styles a button with a leading icon.\n`mdc-button--icon-trailing` | Optional. Styles a button with a trailing icon.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n\n**Note: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommend always including it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color-or-map)` | If a color is passed, sets the default container fill color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`icon-color($color-or-map)` | If a color is passed, sets the default icon color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`ink-color($color-or-map)` | If a color is passed, sets the default ink color to the given color, and sets the icon color to the given color unless `icon-color` is also used. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color-or-map)` | If a color is passed, sets the default outline color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web 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/density":"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/button_13.0.0-canary.08398f880.0_1631576117287_0.2926949344631762","host":"s3://npm-registry-packages"}},"13.0.0-canary.818f4ee93.0":{"name":"@material/button","version":"13.0.0-canary.818f4ee93.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"b49271c7da48775c127f7784b176c38ca9572e97","tarball":"https://registry.npmjs.org/@material/button/-/button-13.0.0-canary.818f4ee93.0.tgz","fileCount":40,"integrity":"sha512-XP9RPWXqtt1ScIFlzEuUEX8V+zbEjhtlV5/PCl5x4SOs/aNsNMysp7V0Da9mv+sgbeMlTn710E8dbFHV0kPKSw==","signatures":[{"sig":"MEUCIGSBlS8SspREJ1DwPMHCdZfRkCqA11K/+YRPk/Q943UmAiEAgc/0bLEZBQl2zbvxtUqL7k+YDpzPw14g+wcw5yO8SYs=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":615365,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhQjKWCRA9TVsSAnZWagAAgYQQAJkbII6Lf77q31ICjqif\nQ7f5Af0oXwqNxj5XkOmb7dm5vX1VeAckUSatsIT/pS1nHRa0CUrfzIZ4NZsk\nQ11um4CEl2cfeKFNkYjeA2isuReDJ0GNJvnfC9xNEAUv46Ejk66FUr7j+ihG\nxymcPQ+0MRt6+hPHCQDZxp0dUNKK1D97D9i24OAOC3oGTvMec/hxLwUmbxkh\nhjg1rpKFyPaiIVgtX2hLfV+va5uZDjiOgMO1j6UTLjY4qnKOwT308lM3uoyL\nTmnMTbpHei9s5LK+MMfKkDn6ZxVWZxObem+xgmAjRFzo/Bsl+CuDs4eyn4tP\npPiRoeq/GGDS+I+a0OzF/i3zSSyV0142+8IRf3BrI9WcLICTqQggSm7zd5cs\nWubqPl8EaOnIYQIMyTZyDZCUMgZeR/ytsjprXdhknTtDvSzFlPB+xE3euSzk\nVuHFVnXCujCtecdWNlM0NyYYkZ82PalYO4UkoaOa4xA/9/zD3o7fO/NxRC3W\nV9umH3G1Ex5oVPWAXO3HjIaW5FlB8gwHJPFE9T5bXaE6vRnLgeq9fUqycXEg\nA4Gk2sLJV8eAEC/lYXyB+v95qE9RC5hg39z14QsO6sDBhoB8kcUeD1ClIhZl\nroCctzsHBhyRHh82JRModvrGY5m0HSegjrA6O8jNXARSDHJwGQ6GV2cTqkRS\nHejq\r\n=NNvR\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button/styles\";\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.**\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n**Note: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.**\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button--icon-leading` | Optional. Styles a button with a leading icon.\n`mdc-button--icon-trailing` | Optional. Styles a button with a trailing icon.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n\n**Note: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommend always including it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color-or-map)` | If a color is passed, sets the default container fill color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`icon-color($color-or-map)` | If a color is passed, sets the default icon color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`ink-color($color-or-map)` | If a color is passed, sets the default ink color to the given color, and sets the icon color to the given color unless `icon-color` is also used. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color-or-map)` | If a color is passed, sets the default outline color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web 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/density":"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/button_13.0.0-canary.818f4ee93.0_1631728278308_0.4440730266671109","host":"s3://npm-registry-packages"}},"13.0.0-canary.8355e14dc.0":{"name":"@material/button","version":"13.0.0-canary.8355e14dc.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"f9105fd645017e21da8cd8438f610d5db9bf05be","tarball":"https://registry.npmjs.org/@material/button/-/button-13.0.0-canary.8355e14dc.0.tgz","fileCount":40,"integrity":"sha512-fAeHGrStyCgwh4MrS9eFdmcNgMQxzuLRFN9uemrllIej+f+dCzG+/VEXg+kkXLvzXXqlrZYUm2gsp6/zSczCwQ==","signatures":[{"sig":"MEUCIDFO+2zokUh2JFjAyY15SgAq2te9jCoEQDaRHpj7A3LHAiEA13+F9JDPRV6KDqTsRX68P9zjxjd7hppSJK9iUH/JZ6k=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":615365,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhQkXMCRA9TVsSAnZWagAA2FgP/iQGIA6Obg7UbShUbbYn\nla6p+we3nNp+Z6pJ48KF2yhl8tEwk8eVH5K400mPFdmCAr+K0HnB19egYDf9\njd7Ej6JFQVmOnJcAlOHIt5e/0bRIPLqxB6r9mnBS7WxwzgO1bTjDO2o4Tm3a\nwIjK6Ui7/tlKL4mX1imswG1L33jFmPPCHjQhyIOVIL9cKB9M9eYqLqMOVA67\nUW7sUbOz2tIJ7QpVykshF8x6n38AYBVuqYsO8DvWNDj7pvQdg4oVIEZ5LaGv\n0SLy9rEPqgsv/n3mazAjC5/S7ddRVhPPSfyCBLLfBiIJPt4R+qyzwu9ysKJm\nUzoE6koR4qUfp6Hae1wpkk9vseaD3IzVX3H/Pm7Bu0wvO1lmFCIBIc5dQfx+\nYqk1TmOGrGbaIw6eq8xEIvqD8RrHHl4gEfRzCN7n51RR3WA/3vsqfdYPcVnM\nIug2hHSiO38/eSZR4ppgqzVS+M+YHi6t2TYH+TTOmREBBcKKTghiyfmz0q0E\nNbQOb2yhrsqVeTn4V1kvQZy7ULoJdWQ/SPU8SOfnxnXOCez6pACAx+7aGQhS\nTGlZXF+idILft7omCA1n/+IBre7JDVc+lThna4/G1oGJsyOVzywgJHlCP4sU\nBG9RkZVAj5TjRSBWE/C9J2RYKIUiXdPoAiD0w4XrhniLWth48+8qMpHL6tfK\nv9lL\r\n=KM/W\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button/styles\";\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.**\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n**Note: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.**\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button--icon-leading` | Optional. Styles a button with a leading icon.\n`mdc-button--icon-trailing` | Optional. Styles a button with a trailing icon.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n\n**Note: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommend always including it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color-or-map)` | If a color is passed, sets the default container fill color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`icon-color($color-or-map)` | If a color is passed, sets the default icon color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`ink-color($color-or-map)` | If a color is passed, sets the default ink color to the given color, and sets the icon color to the given color unless `icon-color` is also used. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color-or-map)` | If a color is passed, sets the default outline color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web 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/density":"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/button_13.0.0-canary.8355e14dc.0_1631733196425_0.02794496802854085","host":"s3://npm-registry-packages"}},"13.0.0-canary.d4e16a6c4.0":{"name":"@material/button","version":"13.0.0-canary.d4e16a6c4.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"7cf0b52e0b90e097768d22ee660c5802861f5732","tarball":"https://registry.npmjs.org/@material/button/-/button-13.0.0-canary.d4e16a6c4.0.tgz","fileCount":40,"integrity":"sha512-SmSZJbGBjlsMKhKgIl/9wHNPPrcVtfin+J04UZJzRqO830LbKftLy8KtWHL3NiNaCKKGnM4o8rtm5m+adfqgHA==","signatures":[{"sig":"MEYCIQD59CU6ZH1Typ2Stn71sD1YBWgTYAHwMa7y0/BSaE3wSAIhAJ8nzGfuxT+0Ef9iFv+vyEAvKy3U3QrPN9dC5QW0AEOu","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":617560,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhQmzkCRA9TVsSAnZWagAAxLMP/10FNeX44gNSB6gaVlLw\n3W576bZhBj2sM3eYLeOV7IeKdgGYM0Fjg4fJUVeJvhzAr5DE7uDDs0rtzly8\nmYpd5xu2U9H3+CyW+/KtWydSmjrt3ezsac1cNQe2zwlL8K/uWgM/dJXCTk0M\nRq7AFEibbVVYCz0bATOa7iVMQ75YJYaaXkuF+US6uLcOLWweI6Wgvyp9zlNj\n+0rWMmYRehVhkWRD6ViiIq6+yFCSli67nqbYPaqTsY86sgMWk+fNGXy75sNg\n0QsIcOZUtu1dgCOYWZXyIDjMaA20fXpO5AASH5VADHZ2419FZ0Bl22LhSLmY\nesiB1XmLYdfKZU7JO6WoHhi88mXg+b9jX9D7tuia04GYbxm291BN8LvKPTKz\nne4gxY5JGA3XPsZZ/tMQwV4KsjBUjCDr2ILsMNbD9UxP7hF/qF4HzUpHonyA\nhodmsB9DYEPfVtc7+MpUyiHEpr1a90mI7ZCO27StXl+kiFoX8OOyAh2R/xKb\nrRAMtkYK208up8/HGbAO0YnhXU94oK73uJrKcZ8Nmg2ObqBQeSUOCyzM14lC\nOsQTQ7x2JqmAbqFAGu9rPqcOGY2XTCp2dtI+wJ0XEGL2CQPTCwpN5e55k2Yx\n0jeKe+ZGL7Rjy6LQwbbHG08OyMMdEwqNW2FHT41e8HwSis1QsMLiXvxsnpVy\ntT6M\r\n=ElM8\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button/styles\";\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.**\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n**Note: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.**\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button--icon-leading` | Optional. Styles a button with a leading icon.\n`mdc-button--icon-trailing` | Optional. Styles a button with a trailing icon.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n\n**Note: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommend always including it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color-or-map)` | If a color is passed, sets the default container fill color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`icon-color($color-or-map)` | If a color is passed, sets the default icon color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`ink-color($color-or-map)` | If a color is passed, sets the default ink color to the given color, and sets the icon color to the given color unless `icon-color` is also used. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color-or-map)` | If a color is passed, sets the default outline color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web 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/density":"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/button_13.0.0-canary.d4e16a6c4.0_1631743203822_0.5969946257388035","host":"s3://npm-registry-packages"}},"13.0.0-canary.65125b3a6.0":{"name":"@material/button","version":"13.0.0-canary.65125b3a6.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"b003f9726886d841c6aea17d77409f5411f01017","tarball":"https://registry.npmjs.org/@material/button/-/button-13.0.0-canary.65125b3a6.0.tgz","fileCount":40,"integrity":"sha512-e14TEyz0GpyfCTvkcHgqUVPxZ+9nXM6XTnMuMI9OEP5a0FydvtgVRs72Pc2UluHPZ8T+uHU2wO4NNccC6+Bfjg==","signatures":[{"sig":"MEYCIQCw84HWnTPcphAth+rQ7T9hNxNuhJEsnJTgFCNLLTC3+wIhAOm6O395F//WXgjVFOPoUCmnVNL8iyfxRTHf6II+PZzZ","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":617560,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhQ7ShCRA9TVsSAnZWagAAb6wP+QE1TDAW42eZQ8i5x6u1\nBIaztLROIVh4yrD8J1fAhn2dGoF6u7l75p/9qqyIYXmX9AgV0bKd9ID0abro\nCOxUIHXJSpfSm7Smq4NLrNQkhSj1HpmbJm7Rgrv3doij9s5uMLstR+Pw5zSB\nDZcMngq9A0XJeKckO2hdADVzEv8KdRnHmhpTuHSif2gM/Uh9/tjLyMnwwOk8\nwijsIgM0ttEZ/q1lxF0wuzKs7kFHIEriRmwstFysPM8C4IzhBbAtY03EYDwN\nNHUC58VhIjn7A0kzDGEMJROsFS44l/oSx1/hebYL4C1drjunCXldf0OkUHLs\nDjvyDLDa3n9BVOYj1aPfjSq/qBcruDHz5h4v8wIeWW/j85Sejv2x51nrZm8B\n1+yo5D45AD2ZSH5/onrC8cqpYFdjHJEcW+UEtcy0IfCQnd+E3Vyb/midUbaA\nbXqfXdaQRtIh6KoAW52Gijgq2F27kx3rAKqv+jtq/dut1grYwCllUHMllhys\nlRXSQuXjkPrgPytv6cYXIm4NcSLEJnTZX7fFPMfwgKQLTTaECpPu8yK05CND\np2693YA0UEXt+89Nf1tFB6LfWfq6UpoMYBLKR+MM6uZ7cBYg40vvai0qyfue\nycukCcbY/Pi/QKq/xOcAhZiHvitQ1JQfJjFTpY8YjFYFW4BMWFlEuNgav2/v\nm5vg\r\n=oJ7O\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button/styles\";\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.**\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n**Note: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.**\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button--icon-leading` | Optional. Styles a button with a leading icon.\n`mdc-button--icon-trailing` | Optional. Styles a button with a trailing icon.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n\n**Note: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommend always including it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color-or-map)` | If a color is passed, sets the default container fill color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`icon-color($color-or-map)` | If a color is passed, sets the default icon color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`ink-color($color-or-map)` | If a color is passed, sets the default ink color to the given color, and sets the icon color to the given color unless `icon-color` is also used. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color-or-map)` | If a color is passed, sets the default outline color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web 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/density":"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/button_13.0.0-canary.65125b3a6.0_1631827105029_0.13735647772980952","host":"s3://npm-registry-packages"}},"13.0.0-canary.80a583365.0":{"name":"@material/button","version":"13.0.0-canary.80a583365.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"8239f8f7510e461799e1ab1b49521983facaa819","tarball":"https://registry.npmjs.org/@material/button/-/button-13.0.0-canary.80a583365.0.tgz","fileCount":40,"integrity":"sha512-cpQqgbxmg97pkZGzFs5LH9UoAHsv4WBR5geYszA5145tYaImQItzpMJDbsXduS36wCn5jiqen6S8JWAmxRRGkg==","signatures":[{"sig":"MEUCIGot4TTngfrWwY6enF4xMzwTudHhiyfh+m+WsPPCk/fGAiEAnVd3a8N545OuiSJy2WWTVS0/DghsgoxPlkzL9I8rrj8=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":617560},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button/styles\";\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.**\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n**Note: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.**\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button--icon-leading` | Optional. Styles a button with a leading icon.\n`mdc-button--icon-trailing` | Optional. Styles a button with a trailing icon.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n\n**Note: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommend always including it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color-or-map)` | If a color is passed, sets the default container fill color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`icon-color($color-or-map)` | If a color is passed, sets the default icon color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`ink-color($color-or-map)` | If a color is passed, sets the default ink color to the given color, and sets the icon color to the given color unless `icon-color` is also used. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color-or-map)` | If a color is passed, sets the default outline color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v14.17.6+x64 (linux)","description":"The Material Components for the web 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/density":"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/button_13.0.0-canary.80a583365.0_1631910987072_0.4459209154109618","host":"s3://npm-registry-packages"}},"13.0.0-canary.83900936a.0":{"name":"@material/button","version":"13.0.0-canary.83900936a.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"11d99ccc6bc97c04d04d3e2b1e202bbfd440d275","tarball":"https://registry.npmjs.org/@material/button/-/button-13.0.0-canary.83900936a.0.tgz","fileCount":40,"integrity":"sha512-o/Dz+ESiDTrzatbix4ydZClsnM4kOtj77+YLKrCePNiP+ENFXB2z+j/O0n7pME0QOoO5tRuv2tKD71+lsTQEIw==","signatures":[{"sig":"MEQCIBxi3ccWzWyhTJWuyLHXNRlH7P3ZwI3FF9j+IW7L4QGYAiBr1hOBbfUsj0K1xqkKCA//0w+58s5BR0NlGXA6n/2ppQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":617560},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button/styles\";\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.**\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n**Note: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.**\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button--icon-leading` | Optional. Styles a button with a leading icon.\n`mdc-button--icon-trailing` | Optional. Styles a button with a trailing icon.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n\n**Note: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommend always including it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color-or-map)` | If a color is passed, sets the default container fill color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`icon-color($color-or-map)` | If a color is passed, sets the default icon color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`ink-color($color-or-map)` | If a color is passed, sets the default ink color to the given color, and sets the icon color to the given color unless `icon-color` is also used. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color-or-map)` | If a color is passed, sets the default outline color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v14.17.6+x64 (linux)","description":"The Material Components for the web 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/density":"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/button_13.0.0-canary.83900936a.0_1631921094929_0.9498479320248814","host":"s3://npm-registry-packages"}},"13.0.0-canary.860ad06a1.0":{"name":"@material/button","version":"13.0.0-canary.860ad06a1.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"ce85774040640e5b0d2c98682f9eb88a370eb3c6","tarball":"https://registry.npmjs.org/@material/button/-/button-13.0.0-canary.860ad06a1.0.tgz","fileCount":40,"integrity":"sha512-6trRuw/Sq9GGTSG3LacTH3lWHE7ZDq8sINAyMoUSdrhtYuBZNtRFSvnT+YoY4lTyXO1D+1Xfzo1ySknSUXBLQA==","signatures":[{"sig":"MEQCICw6ElLu1qNfw4TSOj53hbS7VAWjw/J39eLi/289XpqSAiBixvUrKqoVlG1dCql8yKZuwnDuvF1/C5gyeMuGr4D40Q==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":617560},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button/styles\";\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.**\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n**Note: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.**\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button--icon-leading` | Optional. Styles a button with a leading icon.\n`mdc-button--icon-trailing` | Optional. Styles a button with a trailing icon.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n\n**Note: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommend always including it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color-or-map)` | If a color is passed, sets the default container fill color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`icon-color($color-or-map)` | If a color is passed, sets the default icon color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`ink-color($color-or-map)` | If a color is passed, sets the default ink color to the given color, and sets the icon color to the given color unless `icon-color` is also used. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color-or-map)` | If a color is passed, sets the default outline color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v14.17.6+x64 (linux)","description":"The Material Components for the web 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/density":"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/button_13.0.0-canary.860ad06a1.0_1631921794828_0.41569441121884765","host":"s3://npm-registry-packages"}},"13.0.0-canary.3b8d4429e.0":{"name":"@material/button","version":"13.0.0-canary.3b8d4429e.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"9d29833c9bb577d95fb211d0b6e6ddba649ea9e7","tarball":"https://registry.npmjs.org/@material/button/-/button-13.0.0-canary.3b8d4429e.0.tgz","fileCount":40,"integrity":"sha512-cAgqVfIPR7kGlJiUoGxfKZpCb/7TCWrsbnqSy6T5x2woU8xnHRMoGKV6AjVjGRHZfDuGzSFowG1EA7kRjsliww==","signatures":[{"sig":"MEQCIBZHyW5UtpJTEtms3KlJ3wL+RfmQACLM+XVWGRGDUeLxAiBD11FASbhBBiSfRwuWSDALTYbw+greflrb9sAlQ/hsUQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":617972},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button/styles\";\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.**\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n**Note: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.**\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button--icon-leading` | Optional. Styles a button with a leading icon.\n`mdc-button--icon-trailing` | Optional. Styles a button with a trailing icon.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n\n**Note: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommend always including it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color-or-map)` | If a color is passed, sets the default container fill color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`icon-color($color-or-map)` | If a color is passed, sets the default icon color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`ink-color($color-or-map)` | If a color is passed, sets the default ink color to the given color, and sets the icon color to the given color unless `icon-color` is also used. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color-or-map)` | If a color is passed, sets the default outline color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v14.17.6+x64 (linux)","description":"The Material Components for the web 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/density":"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/button_13.0.0-canary.3b8d4429e.0_1632160090422_0.3237469155069459","host":"s3://npm-registry-packages"}},"13.0.0-canary.2da3606b9.0":{"name":"@material/button","version":"13.0.0-canary.2da3606b9.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"7cd4b386531a5751f3a3377ed9faa70fa21e9b92","tarball":"https://registry.npmjs.org/@material/button/-/button-13.0.0-canary.2da3606b9.0.tgz","fileCount":40,"integrity":"sha512-yjG12j/SvZ25wPTD0JesgMz2BeB7VArgzbc3jpA4U/CWw1Osi8w1AdGqcZkAX8WThBcrgBenG5ikVHALLAE9MQ==","signatures":[{"sig":"MEUCIQD0Tzt/m56BnTnYpLB8mIw5h/70lRWyl668VY7BbmYIpQIgVlAKNkuVV8qNICWDaVzfy+wDhQJx/sFH7rHc01+668E=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":618062},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button/styles\";\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.**\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n**Note: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.**\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button--icon-leading` | Optional. Styles a button with a leading icon.\n`mdc-button--icon-trailing` | Optional. Styles a button with a trailing icon.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n\n**Note: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommend always including it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color-or-map)` | If a color is passed, sets the default container fill color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`icon-color($color-or-map)` | If a color is passed, sets the default icon color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`ink-color($color-or-map)` | If a color is passed, sets the default ink color to the given color, and sets the icon color to the given color unless `icon-color` is also used. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color-or-map)` | If a color is passed, sets the default outline color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v14.17.6+x64 (linux)","description":"The Material Components for the web 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/density":"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/button_13.0.0-canary.2da3606b9.0_1632166696506_0.46682142648104996","host":"s3://npm-registry-packages"}},"13.0.0-canary.e8c598d1e.0":{"name":"@material/button","version":"13.0.0-canary.e8c598d1e.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"1aaab9ade9de5f879cecc9ef4ebd126d115df564","tarball":"https://registry.npmjs.org/@material/button/-/button-13.0.0-canary.e8c598d1e.0.tgz","fileCount":40,"integrity":"sha512-5XHIrmMA1wiy/d3WuOm1IwkGPKYJXtkd9Tt3IQHhPWtuGpGuhCZfKp2YBBSuzcLYMrGg7WO1GyPfHH0OT2rqGQ==","signatures":[{"sig":"MEYCIQCUSCsYsc2PKLm/+TaH1zraSVIg6X2E3rN1mBruMZIm3AIhANTTzvCxcyodSfVTfGyeeXuQDlh7TUlLK2sxTsou9fKr","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":618436},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button/styles\";\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.**\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n**Note: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.**\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button--icon-leading` | Optional. Styles a button with a leading icon.\n`mdc-button--icon-trailing` | Optional. Styles a button with a trailing icon.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n\n**Note: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommend always including it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color-or-map)` | If a color is passed, sets the default container fill color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`icon-color($color-or-map)` | If a color is passed, sets the default icon color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`ink-color($color-or-map)` | If a color is passed, sets the default ink color to the given color, and sets the icon color to the given color unless `icon-color` is also used. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color-or-map)` | If a color is passed, sets the default outline color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v14.17.6+x64 (linux)","description":"The Material Components for the web 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/density":"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/button_13.0.0-canary.e8c598d1e.0_1632172355866_0.5567663586596745","host":"s3://npm-registry-packages"}},"13.0.0-canary.1340ee9f7.0":{"name":"@material/button","version":"13.0.0-canary.1340ee9f7.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"d22ce391f326bc5eccbbb06fd7571f1939e4ceff","tarball":"https://registry.npmjs.org/@material/button/-/button-13.0.0-canary.1340ee9f7.0.tgz","fileCount":40,"integrity":"sha512-TqR9MDQMllIJO+N2acEdbxG8GtzWKAha4H+nMq4YQHsCcm4ENaNvQkgqPjTN6SWqj+5iZWV1oZftFjbSfM91nQ==","signatures":[{"sig":"MEYCIQCWlUfRbzd1s7eSzg8T2FNezElYHzhKn5v4CMJ3MZoFxwIhANs3OfTdm0KOXPa7AU6dV7npmdF3hWSfRNbKEFgnFShD","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":618468},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button/styles\";\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.**\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n**Note: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.**\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button--icon-leading` | Optional. Styles a button with a leading icon.\n`mdc-button--icon-trailing` | Optional. Styles a button with a trailing icon.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n\n**Note: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommend always including it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color-or-map)` | If a color is passed, sets the default container fill color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`icon-color($color-or-map)` | If a color is passed, sets the default icon color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`ink-color($color-or-map)` | If a color is passed, sets the default ink color to the given color, and sets the icon color to the given color unless `icon-color` is also used. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color-or-map)` | If a color is passed, sets the default outline color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v14.17.6+x64 (linux)","description":"The Material Components for the web 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/density":"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/button_13.0.0-canary.1340ee9f7.0_1632333513855_0.9240379815767334","host":"s3://npm-registry-packages"}},"13.0.0-canary.65084baff.0":{"name":"@material/button","version":"13.0.0-canary.65084baff.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"eaaa4ae52c82ea47b282f3d003a0d3f500ff825e","tarball":"https://registry.npmjs.org/@material/button/-/button-13.0.0-canary.65084baff.0.tgz","fileCount":40,"integrity":"sha512-5UI9FJ3bGRxzPJfpnxbzGQ5KcBDin4tbU04zXyEJNrH3nkPjwQBzsuehJzU6d6vIK+Bz/oTGil6ZxwVi3DzcFg==","signatures":[{"sig":"MEUCIGYAah4UkmaOci3cBZAUVeYv7sk1ucUUQMfgYbjjmv+PAiEAhAXRa1K33jitVZK5I32CCWPAoYB4aUOm4padu0b+HMI=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":618468},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button/styles\";\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.**\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n**Note: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.**\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button--icon-leading` | Optional. Styles a button with a leading icon.\n`mdc-button--icon-trailing` | Optional. Styles a button with a trailing icon.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n\n**Note: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommend always including it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color-or-map)` | If a color is passed, sets the default container fill color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`icon-color($color-or-map)` | If a color is passed, sets the default icon color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`ink-color($color-or-map)` | If a color is passed, sets the default ink color to the given color, and sets the icon color to the given color unless `icon-color` is also used. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color-or-map)` | If a color is passed, sets the default outline color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v14.17.6+x64 (linux)","description":"The Material Components for the web 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/density":"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/button_13.0.0-canary.65084baff.0_1632432364621_0.3192658739145291","host":"s3://npm-registry-packages"}},"13.0.0-canary.c79aa0cdd.0":{"name":"@material/button","version":"13.0.0-canary.c79aa0cdd.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"844b4599b26eb33311b54874b11d040484161d4a","tarball":"https://registry.npmjs.org/@material/button/-/button-13.0.0-canary.c79aa0cdd.0.tgz","fileCount":40,"integrity":"sha512-BsgsVr9fcVHdSA8j5+99/f7Ce+1hhzBwXb6nIihrYKKatfeTVR6l22H2B/wsGrIIL+sqhqbAw5XM+8XAtsoaiQ==","signatures":[{"sig":"MEUCICsqk7ltVAcGIuRvwxUOdwmlyzmYizucCKNCORh9nn5sAiEA1GuaofZ61s47qTquGF+6BKXkIQTTKJQkuKqV3jSAo0k=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":618468},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button/styles\";\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.**\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n**Note: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.**\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button--icon-leading` | Optional. Styles a button with a leading icon.\n`mdc-button--icon-trailing` | Optional. Styles a button with a trailing icon.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n\n**Note: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommend always including it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color-or-map)` | If a color is passed, sets the default container fill color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`icon-color($color-or-map)` | If a color is passed, sets the default icon color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`ink-color($color-or-map)` | If a color is passed, sets the default ink color to the given color, and sets the icon color to the given color unless `icon-color` is also used. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color-or-map)` | If a color is passed, sets the default outline color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v14.17.6+x64 (linux)","description":"The Material Components for the web 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/density":"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/button_13.0.0-canary.c79aa0cdd.0_1632490955741_0.7290225122890681","host":"s3://npm-registry-packages"}},"13.0.0":{"name":"@material/button","version":"13.0.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"0870da4069fb92dd5c3dbbaf1b58bcb62bb9dbed","tarball":"https://registry.npmjs.org/@material/button/-/button-13.0.0.tgz","fileCount":39,"integrity":"sha512-lYorht6fcEd4P+dsLVp2BGtaY5cGYNp71LMajuDe71GZX3dZPoKeVvb+Ie1S7vcB+o+WLTeaisMk9/vA4gfi8A==","signatures":[{"sig":"MEQCIHUtXzQ0FZ0gsW9pVFhZOfuNv9vik9cDcRE6eV/sFe3iAiBJ/1gyEvHmVYHhtS2r7fMf3PFY9n32gkgEzT4UB2LIvw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":614724},"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-button"},"_npmVersion":"lerna/3.20.2/node@v14.17.6+x64 (linux)","description":"The Material Components for the web 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/density":"^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/button_13.0.0_1632512788667_0.47239323550968737","host":"s3://npm-registry-packages"}},"14.0.0-canary.198431fcd.0":{"name":"@material/button","version":"14.0.0-canary.198431fcd.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"a95d2ed560bbcaa41e3788f7ef9941aa10c4c12b","tarball":"https://registry.npmjs.org/@material/button/-/button-14.0.0-canary.198431fcd.0.tgz","fileCount":40,"integrity":"sha512-i19Qz25hri1zHBIvGLVjgSgqDRDOaAEC9b6S3PCLjTUogP4MHBG7CkIm+zrFJUa+ZR+anY+tZPKj6aYU8WiciQ==","signatures":[{"sig":"MEUCIQC1l/qH+B0eGM1TX7cochRZLDn3XpXNDfjgTFVutdCS2wIgBKWJ3bLom70Z3W4o5U0hv//iAbFlBodXkpAxO/v0mEE=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":618468},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button/styles\";\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.**\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n**Note: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.**\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button--icon-leading` | Optional. Styles a button with a leading icon.\n`mdc-button--icon-trailing` | Optional. Styles a button with a trailing icon.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n\n**Note: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommend always including it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color-or-map)` | If a color is passed, sets the default container fill color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`icon-color($color-or-map)` | If a color is passed, sets the default icon color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`ink-color($color-or-map)` | If a color is passed, sets the default ink color to the given color, and sets the icon color to the given color unless `icon-color` is also used. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color-or-map)` | If a color is passed, sets the default outline color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v14.17.6+x64 (linux)","description":"The Material Components for the web 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/density":"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/button_14.0.0-canary.198431fcd.0_1632512832420_0.29382055569269716","host":"s3://npm-registry-packages"}},"14.0.0-canary.9a02b6ef8.0":{"name":"@material/button","version":"14.0.0-canary.9a02b6ef8.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"3ec88e558880772786783833c795ed462179cd30","tarball":"https://registry.npmjs.org/@material/button/-/button-14.0.0-canary.9a02b6ef8.0.tgz","fileCount":40,"integrity":"sha512-aKl3/p0OsbMooHKGPAwOetG1rSwhb3XzpN8piw65tTTmkeDzdgP2bzqIiYoz213bW0OAL1LIQShfeNLE3skXAQ==","signatures":[{"sig":"MEYCIQC0VQ2j9sp4NHAbbPuFreBh40fLeoff7hmIC/Nh/ffdEwIhAJfKE8ZYsbIA9JKYwhntuRE/v0ekm+9LPyvDYCV6Pv6p","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":615796},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button/styles\";\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.**\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n**Note: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.**\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button--icon-leading` | Optional. Styles a button with a leading icon.\n`mdc-button--icon-trailing` | Optional. Styles a button with a trailing icon.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n\n**Note: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommend always including it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color-or-map)` | If a color is passed, sets the default container fill color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`icon-color($color-or-map)` | If a color is passed, sets the default icon color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`ink-color($color-or-map)` | If a color is passed, sets the default ink color to the given color, and sets the icon color to the given color unless `icon-color` is also used. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color-or-map)` | If a color is passed, sets the default outline color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v14.17.6+x64 (linux)","description":"The Material Components for the web 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/density":"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/button_14.0.0-canary.9a02b6ef8.0_1632575498082_0.6855040509407153","host":"s3://npm-registry-packages"}},"14.0.0-canary.758ce31d9.0":{"name":"@material/button","version":"14.0.0-canary.758ce31d9.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"b2079064718b6ff8573e20bebabf1c1ae0f36e33","tarball":"https://registry.npmjs.org/@material/button/-/button-14.0.0-canary.758ce31d9.0.tgz","fileCount":40,"integrity":"sha512-AXs6CBAy64mokoYd0i4Ho+iKHtCEwHC4IGmOMPDNF/k/3PGGuwi0wgDXkQ3ELMzigT/tO0tCyQQ6tnbQ3tokSw==","signatures":[{"sig":"MEUCICCAjvudRK1bC0xB3AYHQWHpE7/P4hyh6tefbhy1DCJFAiEA9ABygxBECtkeD6bYuPDFJEmul+Spk4loM13X+A4AlKo=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":615796},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button/styles\";\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.**\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n**Note: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.**\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button--icon-leading` | Optional. Styles a button with a leading icon.\n`mdc-button--icon-trailing` | Optional. Styles a button with a trailing icon.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n\n**Note: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommend always including it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color-or-map)` | If a color is passed, sets the default container fill color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`icon-color($color-or-map)` | If a color is passed, sets the default icon color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`ink-color($color-or-map)` | If a color is passed, sets the default ink color to the given color, and sets the icon color to the given color unless `icon-color` is also used. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color-or-map)` | If a color is passed, sets the default outline color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v14.17.6+x64 (linux)","description":"The Material Components for the web 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/density":"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/button_14.0.0-canary.758ce31d9.0_1632763792912_0.9340310164954742","host":"s3://npm-registry-packages"}},"14.0.0-canary.86b50ef74.0":{"name":"@material/button","version":"14.0.0-canary.86b50ef74.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"653ad512c7a9169e3275032e19939c3a9c22ee2f","tarball":"https://registry.npmjs.org/@material/button/-/button-14.0.0-canary.86b50ef74.0.tgz","fileCount":40,"integrity":"sha512-gEOom+AenbnmLoFE1FdbS4+hgGrvO5o69JuNgngTmWsS9XmIpqrB85xPJU4i9z9Sr+xLyOxESHYALBxLerJHCw==","signatures":[{"sig":"MEUCIQDHsm4H5O+UAp2uLUso/9aE/vhn0YMcf8XNVwO2deB40gIgaDOicB9G7ewEI6MrvuUT9g759e26pWWrJOqvbibojEA=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":615796},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button/styles\";\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.**\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n**Note: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.**\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button--icon-leading` | Optional. Styles a button with a leading icon.\n`mdc-button--icon-trailing` | Optional. Styles a button with a trailing icon.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n\n**Note: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommend always including it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color-or-map)` | If a color is passed, sets the default container fill color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`icon-color($color-or-map)` | If a color is passed, sets the default icon color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`ink-color($color-or-map)` | If a color is passed, sets the default ink color to the given color, and sets the icon color to the given color unless `icon-color` is also used. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color-or-map)` | If a color is passed, sets the default outline color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v14.17.6+x64 (linux)","description":"The Material Components for the web 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/density":"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/button_14.0.0-canary.86b50ef74.0_1632851021451_0.48951415001655607","host":"s3://npm-registry-packages"}},"14.0.0-canary.b2fe3528b.0":{"name":"@material/button","version":"14.0.0-canary.b2fe3528b.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"a63e5e6ad0ad2bcaa0eb8e2696b16f9d24310080","tarball":"https://registry.npmjs.org/@material/button/-/button-14.0.0-canary.b2fe3528b.0.tgz","fileCount":40,"integrity":"sha512-9HvrIXT2aCatHOo1DC5CxjtSziFU6AqJyDo6HKFvbTBRjFNztdKqctSBOV+ixIQLp9VtEs7YFtNFadN6pR5Guw==","signatures":[{"sig":"MEUCIE/Tjq+feHFZ0PiwFEwq2SqrbvgQMWkF0ksCzVdapYyhAiEA+0rsiC/ZsEj+jHD2/D/BJXBTu0vAagSYWOFv7zjJHho=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":615796},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button/styles\";\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.**\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n**Note: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.**\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button--icon-leading` | Optional. Styles a button with a leading icon.\n`mdc-button--icon-trailing` | Optional. Styles a button with a trailing icon.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n\n**Note: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommend always including it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color-or-map)` | If a color is passed, sets the default container fill color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`icon-color($color-or-map)` | If a color is passed, sets the default icon color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`ink-color($color-or-map)` | If a color is passed, sets the default ink color to the given color, and sets the icon color to the given color unless `icon-color` is also used. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color-or-map)` | If a color is passed, sets the default outline color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v14.17.6+x64 (linux)","description":"The Material Components for the web 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/density":"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/button_14.0.0-canary.b2fe3528b.0_1632956250352_0.21977370215760827","host":"s3://npm-registry-packages"}},"14.0.0-canary.586e740dd.0":{"name":"@material/button","version":"14.0.0-canary.586e740dd.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"af2d415dc5dab366df5aec4f08df1f4165a56efb","tarball":"https://registry.npmjs.org/@material/button/-/button-14.0.0-canary.586e740dd.0.tgz","fileCount":40,"integrity":"sha512-Z4eNaXOjDBq9hh1ZfM1hyKRYSVV5UFiVGJvYcvo6iMoW5Iye2TvENZI3uVWSa8lL5iW0YBzCvn9By0fP05AI8g==","signatures":[{"sig":"MEYCIQCd5D+WmMjl5lCNkKWTbctdVf0WfqyqSFRz/8Qq5PExCwIhAIMf4rJa/WcGmC3a4DWuXfb3y6+OoOYneECLF8D2Lc57","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":615796},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button/styles\";\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.**\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n**Note: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.**\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button--icon-leading` | Optional. Styles a button with a leading icon.\n`mdc-button--icon-trailing` | Optional. Styles a button with a trailing icon.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n\n**Note: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommend always including it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color-or-map)` | If a color is passed, sets the default container fill color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`icon-color($color-or-map)` | If a color is passed, sets the default icon color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`ink-color($color-or-map)` | If a color is passed, sets the default ink color to the given color, and sets the icon color to the given color unless `icon-color` is also used. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color-or-map)` | If a color is passed, sets the default outline color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v14.18.0+x64 (linux)","description":"The Material Components for the web 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/density":"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/button_14.0.0-canary.586e740dd.0_1633019514221_0.3929210486682704","host":"s3://npm-registry-packages"}},"14.0.0-canary.2ac92d766.0":{"name":"@material/button","version":"14.0.0-canary.2ac92d766.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"c987e8030bc4e0f3923bad8b8eef12fd45e96ce4","tarball":"https://registry.npmjs.org/@material/button/-/button-14.0.0-canary.2ac92d766.0.tgz","fileCount":40,"integrity":"sha512-KMzTeYPCqoircCLKTJWcOK9tLmtgjnKUKLED8+H1fcobIcexMlhABZeJ9CERijraS0lmxvkBKdG6c6+bB30z3w==","signatures":[{"sig":"MEUCIQDORpC+LX8fzPtmEyAXUzKJNAZnmbpnRD1/NI0nN/5D3QIgX69Urkc41/r4RSAeqjfBB7HjGZ12Rx/1kmwp6v2Uxww=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":615796},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button/styles\";\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.**\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n**Note: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.**\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button--icon-leading` | Optional. Styles a button with a leading icon.\n`mdc-button--icon-trailing` | Optional. Styles a button with a trailing icon.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n\n**Note: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommend always including it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color-or-map)` | If a color is passed, sets the default container fill color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`icon-color($color-or-map)` | If a color is passed, sets the default icon color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`ink-color($color-or-map)` | If a color is passed, sets the default ink color to the given color, and sets the icon color to the given color unless `icon-color` is also used. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color-or-map)` | If a color is passed, sets the default outline color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v14.18.0+x64 (linux)","description":"The Material Components for the web 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/density":"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/button_14.0.0-canary.2ac92d766.0_1633462148350_0.5301125403167635","host":"s3://npm-registry-packages"}},"14.0.0-canary.353ca7e9f.0":{"name":"@material/button","version":"14.0.0-canary.353ca7e9f.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"b61c48e5861ce1ae68b4abb74d35a27885abbd84","tarball":"https://registry.npmjs.org/@material/button/-/button-14.0.0-canary.353ca7e9f.0.tgz","fileCount":40,"integrity":"sha512-MCM64fQosxpnBxzZxzzcuDxt5N98kcUgXJX+HtBaJ0aCjul2X8NfJ9JB+581dPYXNjDfLDErkiQ9HeSTbRsJqw==","signatures":[{"sig":"MEYCIQD/zNrpn5mYDe3z/TvVUQUqHuu5fkXrdN347c0Iiuv9kgIhAN/oZfyZ5o/bfKamA/rbsCs09UzrOBU8GXC63JZjQxBI","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":615796},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button/styles\";\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.**\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n**Note: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.**\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button--icon-leading` | Optional. Styles a button with a leading icon.\n`mdc-button--icon-trailing` | Optional. Styles a button with a trailing icon.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n\n**Note: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommend always including it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color-or-map)` | If a color is passed, sets the default container fill color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`icon-color($color-or-map)` | If a color is passed, sets the default icon color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`ink-color($color-or-map)` | If a color is passed, sets the default ink color to the given color, and sets the icon color to the given color unless `icon-color` is also used. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color-or-map)` | If a color is passed, sets the default outline color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v14.18.0+x64 (linux)","description":"The Material Components for the web 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/density":"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/button_14.0.0-canary.353ca7e9f.0_1633718851911_0.1954548985210791","host":"s3://npm-registry-packages"}},"14.0.0-canary.c78ff0429.0":{"name":"@material/button","version":"14.0.0-canary.c78ff0429.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"01aeb1bf164f2405a6efcc46a55429a6b444722f","tarball":"https://registry.npmjs.org/@material/button/-/button-14.0.0-canary.c78ff0429.0.tgz","fileCount":40,"integrity":"sha512-hkqFYzac+qsRWxwh3/N0zvew5wI3m5cvRA+wWJKXg0JVZ2bxhI/XZmI/aATgWayizh7vQdY28QamJO2VY7R2fQ==","signatures":[{"sig":"MEUCIAvC6jOke4VFmUn8gSLTtFToQ978Ub8KSSXlvWckXg6TAiEAjlMo4u1r+lURBxsJ8CoWox9lxhgU+xjA06HPZxXuQW0=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":615802},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button/styles\";\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.**\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n**Note: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.**\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button--icon-leading` | Optional. Styles a button with a leading icon.\n`mdc-button--icon-trailing` | Optional. Styles a button with a trailing icon.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n\n**Note: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommend always including it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color-or-map)` | If a color is passed, sets the default container fill color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`icon-color($color-or-map)` | If a color is passed, sets the default icon color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`ink-color($color-or-map)` | If a color is passed, sets the default ink color to the given color, and sets the icon color to the given color unless `icon-color` is also used. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color-or-map)` | If a color is passed, sets the default outline color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v14.18.0+x64 (linux)","description":"The Material Components for the web 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/density":"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/button_14.0.0-canary.c78ff0429.0_1633972965229_0.42646415706898533","host":"s3://npm-registry-packages"}},"14.0.0-canary.261f2db59.0":{"name":"@material/button","version":"14.0.0-canary.261f2db59.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"d4453aa0c03dae2b4a009d15fe4a2cd529a59af5","tarball":"https://registry.npmjs.org/@material/button/-/button-14.0.0-canary.261f2db59.0.tgz","fileCount":40,"integrity":"sha512-DB0MAvdIGWKuFwlQ57hjv7ZuHIioT2mnG7RWtL7ZoCWoY45nCrsbJirmX5zZFipm9gIOJ3YnIkIrUyMVSrDX+g==","signatures":[{"sig":"MEYCIQD+a7KEllYqf+R2EZycRkrsA6N02MHFF6BxaXDnUS4kwQIhAPNbsjxUxccr+6LCjCqQITHQTWbbQHR7fN9LsGI5qdC7","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":615802},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button/styles\";\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.**\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n**Note: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.**\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button--icon-leading` | Optional. Styles a button with a leading icon.\n`mdc-button--icon-trailing` | Optional. Styles a button with a trailing icon.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n\n**Note: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommend always including it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color-or-map)` | If a color is passed, sets the default container fill color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`icon-color($color-or-map)` | If a color is passed, sets the default icon color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`ink-color($color-or-map)` | If a color is passed, sets the default ink color to the given color, and sets the icon color to the given color unless `icon-color` is also used. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color-or-map)` | If a color is passed, sets the default outline color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v14.18.0+x64 (linux)","description":"The Material Components for the web 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/density":"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/button_14.0.0-canary.261f2db59.0_1634749216476_0.04709499875399015","host":"s3://npm-registry-packages"}},"14.0.0-canary.9803d2dc1.0":{"name":"@material/button","version":"14.0.0-canary.9803d2dc1.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"d918dd104d0868ed639f4f0d7f4ed3741b66e89f","tarball":"https://registry.npmjs.org/@material/button/-/button-14.0.0-canary.9803d2dc1.0.tgz","fileCount":40,"integrity":"sha512-hm4wILAkhRrg8Xkg60lT9IN1oEQjak+r+kEo0DBRFNwVbL6k74MSCNugE+x8PXArmQQig8Bt9eT8ejY4W73/zQ==","signatures":[{"sig":"MEQCIElon2yqiBO23ueGmy/j8bw24VO+f4UhWUR4jst5qe8FAiBzrjPFUc63prilTlviBfdh/etX6luQy+W7FP8okpTixA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":615802},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button/styles\";\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.**\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n**Note: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.**\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button--icon-leading` | Optional. Styles a button with a leading icon.\n`mdc-button--icon-trailing` | Optional. Styles a button with a trailing icon.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n\n**Note: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommend always including it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color-or-map)` | If a color is passed, sets the default container fill color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`icon-color($color-or-map)` | If a color is passed, sets the default icon color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`ink-color($color-or-map)` | If a color is passed, sets the default ink color to the given color, and sets the icon color to the given color unless `icon-color` is also used. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color-or-map)` | If a color is passed, sets the default outline color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v14.18.0+x64 (linux)","description":"The Material Components for the web 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/density":"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/button_14.0.0-canary.9803d2dc1.0_1634757750183_0.3585667916231956","host":"s3://npm-registry-packages"}},"14.0.0-canary.348665978.0":{"name":"@material/button","version":"14.0.0-canary.348665978.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"6459cfc2a8242a13514cb70c834c1843f66d4357","tarball":"https://registry.npmjs.org/@material/button/-/button-14.0.0-canary.348665978.0.tgz","fileCount":40,"integrity":"sha512-bmsVeLilJcVouqAXYQy0j3gjw5fX1ue3JjkQ8cSyyeYss7bP47wf3Fe2hCQNq/0Q6w9f6hwdEEX20yfylGNSLQ==","signatures":[{"sig":"MEQCIFvsRoo+u29aUXrIlA7Kc3oDo6Qz6TnEkjR3FR9fmWDYAiBGfJ+ldwQr/TYLUUiQlo5RT4dD/bVNCezQulhGQ2qdlw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":615802},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button/styles\";\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.**\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n**Note: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.**\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button--icon-leading` | Optional. Styles a button with a leading icon.\n`mdc-button--icon-trailing` | Optional. Styles a button with a trailing icon.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n\n**Note: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommend always including it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color-or-map)` | If a color is passed, sets the default container fill color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`icon-color($color-or-map)` | If a color is passed, sets the default icon color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`ink-color($color-or-map)` | If a color is passed, sets the default ink color to the given color, and sets the icon color to the given color unless `icon-color` is also used. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color-or-map)` | If a color is passed, sets the default outline color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v14.18.1+x64 (linux)","description":"The Material Components for the web 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/density":"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/button_14.0.0-canary.348665978.0_1634827886092_0.8568195200356243","host":"s3://npm-registry-packages"}},"14.0.0-canary.b2b979a8a.0":{"name":"@material/button","version":"14.0.0-canary.b2b979a8a.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"37d2dfd47779b929e6b8e67308accf03ab0a7c54","tarball":"https://registry.npmjs.org/@material/button/-/button-14.0.0-canary.b2b979a8a.0.tgz","fileCount":40,"integrity":"sha512-E+ugOqLoYRnD1clvTHSojfKmQkbk4D/uUzFcmTOpu9n1ZeiwWMxy0V9abX2eAbiXFdUN+QAI9P25xpZHvfM23w==","signatures":[{"sig":"MEQCIFYmmVD+AgtnADGx92Af/jFod+XpwUIRreO1rUi76tbgAiA5yR9RvhkfdjZQH/+8nmM/nnIRY39xB4hTREJNaZv7iQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":615802},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button/styles\";\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.**\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n**Note: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.**\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button--icon-leading` | Optional. Styles a button with a leading icon.\n`mdc-button--icon-trailing` | Optional. Styles a button with a trailing icon.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n\n**Note: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommend always including it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color-or-map)` | If a color is passed, sets the default container fill color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`icon-color($color-or-map)` | If a color is passed, sets the default icon color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`ink-color($color-or-map)` | If a color is passed, sets the default ink color to the given color, and sets the icon color to the given color unless `icon-color` is also used. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color-or-map)` | If a color is passed, sets the default outline color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v14.18.1+x64 (linux)","description":"The Material Components for the web 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/density":"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/button_14.0.0-canary.b2b979a8a.0_1635433978182_0.9639391491795788","host":"s3://npm-registry-packages"}},"14.0.0-canary.1af7c1c4a.0":{"name":"@material/button","version":"14.0.0-canary.1af7c1c4a.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"f415afa0bf066a962c243c78b06b2b22bfe697a2","tarball":"https://registry.npmjs.org/@material/button/-/button-14.0.0-canary.1af7c1c4a.0.tgz","fileCount":40,"integrity":"sha512-8IJXZ4xZN7pyFiXMqZf8TIAd0MPmm8bCfzo87A4xBsOdG7ffwqcmDE3CjTKojSi1KualqCWgWenCZaLZn27zBA==","signatures":[{"sig":"MEQCIGZqLp/q8wdJfxShCxhHAkcMl17tD6OMNqmLMhsb3MzcAiBEVcg95+NV4dhZNRhmjaOFlgglhptiAqkOCztjJKNtkA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":615802},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button/styles\";\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.**\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n**Note: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.**\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button--icon-leading` | Optional. Styles a button with a leading icon.\n`mdc-button--icon-trailing` | Optional. Styles a button with a trailing icon.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n\n**Note: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommend always including it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color-or-map)` | If a color is passed, sets the default container fill color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`icon-color($color-or-map)` | If a color is passed, sets the default icon color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`ink-color($color-or-map)` | If a color is passed, sets the default ink color to the given color, and sets the icon color to the given color unless `icon-color` is also used. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color-or-map)` | If a color is passed, sets the default outline color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v14.18.1+x64 (linux)","description":"The Material Components for the web 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/density":"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/button_14.0.0-canary.1af7c1c4a.0_1635443607734_0.818537432675629","host":"s3://npm-registry-packages"}},"14.0.0-canary.4afd353cd.0":{"name":"@material/button","version":"14.0.0-canary.4afd353cd.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"cce104a4c1c65e471ffbf370ce206a15a39e95a7","tarball":"https://registry.npmjs.org/@material/button/-/button-14.0.0-canary.4afd353cd.0.tgz","fileCount":40,"integrity":"sha512-R5RNFhc1B85acLuhPt3wtkGoiwEla9zst4Hr3coMwUFM9TpQV4iz0kEXM4u2DYC9BbBJWM4r4NZar3kSUadRIA==","signatures":[{"sig":"MEUCIDjXpeT9jQ+CEKfSk93JhyPBUPrVqmlgeO7aP84vdOYPAiEA1mUP6TRS7lMlem9NmrYwSV2dHW480KXQwpNIEcLMoGU=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":615826},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button/styles\";\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.**\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n**Note: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.**\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button--icon-leading` | Optional. Styles a button with a leading icon.\n`mdc-button--icon-trailing` | Optional. Styles a button with a trailing icon.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n\n**Note: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommend always including it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color-or-map)` | If a color is passed, sets the default container fill color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`icon-color($color-or-map)` | If a color is passed, sets the default icon color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`ink-color($color-or-map)` | If a color is passed, sets the default ink color to the given color, and sets the icon color to the given color unless `icon-color` is also used. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color-or-map)` | If a color is passed, sets the default outline color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v14.18.1+x64 (linux)","description":"The Material Components for the web 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/density":"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/button_14.0.0-canary.4afd353cd.0_1635519733024_0.05581847204049417","host":"s3://npm-registry-packages"}},"14.0.0-canary.a986df922.0":{"name":"@material/button","version":"14.0.0-canary.a986df922.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"114c3a98a8e417d552e8789c96929d0616ea3d2d","tarball":"https://registry.npmjs.org/@material/button/-/button-14.0.0-canary.a986df922.0.tgz","fileCount":40,"integrity":"sha512-EjP2IQj/aXsZfhbb0as3QhsWgb8yoPSf3aDzWO4n1WhMYghgI4F+Fr91beSrBMD+hfJd3dkqF3e5vut4Hs5o+Q==","signatures":[{"sig":"MEUCIQD7EAemQNAg2xZxaoboo7ZsML+DpV5gdAvAak2UVK1JqQIgdSoUautHoRJQQSkbY9Dlt68kzBFtYbO539nVzYm/GqI=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":615826},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button/styles\";\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.**\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n**Note: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.**\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button--icon-leading` | Optional. Styles a button with a leading icon.\n`mdc-button--icon-trailing` | Optional. Styles a button with a trailing icon.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n\n**Note: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommend always including it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color-or-map)` | If a color is passed, sets the default container fill color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`icon-color($color-or-map)` | If a color is passed, sets the default icon color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`ink-color($color-or-map)` | If a color is passed, sets the default ink color to the given color, and sets the icon color to the given color unless `icon-color` is also used. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color-or-map)` | If a color is passed, sets the default outline color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v14.18.1+x64 (linux)","description":"The Material Components for the web 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/density":"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/button_14.0.0-canary.a986df922.0_1635543338172_0.4754867472647786","host":"s3://npm-registry-packages"}},"14.0.0-canary.c3cdff07b.0":{"name":"@material/button","version":"14.0.0-canary.c3cdff07b.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"334052ff9e8b0751ba33138a6cc1bdf41c7b5fba","tarball":"https://registry.npmjs.org/@material/button/-/button-14.0.0-canary.c3cdff07b.0.tgz","fileCount":40,"integrity":"sha512-9bDSZ2RzJZ7eVZsnuw2TkK8O8KLbe5RXlIEUJziQtcpjKzFAdrjl9NKo2wWugJh/uBj+ETe3dzBc+u5VBA28jg==","signatures":[{"sig":"MEQCIFu3Y1SaOZ5KolFZvm8a9q6o4J0gpJIPjIc99h3DLF5RAiAjD+LQAMBMeh49jOVEcPjrqfa7kujPZmLkyDnQYUvfiw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":615826},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button/styles\";\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.**\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n**Note: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.**\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button--icon-leading` | Optional. Styles a button with a leading icon.\n`mdc-button--icon-trailing` | Optional. Styles a button with a trailing icon.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n\n**Note: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommend always including it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color-or-map)` | If a color is passed, sets the default container fill color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`icon-color($color-or-map)` | If a color is passed, sets the default icon color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`ink-color($color-or-map)` | If a color is passed, sets the default ink color to the given color, and sets the icon color to the given color unless `icon-color` is also used. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color-or-map)` | If a color is passed, sets the default outline color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v14.18.1+x64 (linux)","description":"The Material Components for the web 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/density":"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/button_14.0.0-canary.c3cdff07b.0_1636484794263_0.7333914617884894","host":"s3://npm-registry-packages"}},"14.0.0-canary.468392606.0":{"name":"@material/button","version":"14.0.0-canary.468392606.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"6f2d0da3698fd519a5b2eb09281d7780bca6b646","tarball":"https://registry.npmjs.org/@material/button/-/button-14.0.0-canary.468392606.0.tgz","fileCount":40,"integrity":"sha512-kI8BUrE6HeWnziXRAPzP0S6oKCO2A3XeBf/S7cZHxae/77xbAoM4ctSMd/kB2LVVCJPtQMBkr7Q4i+gto3bCNg==","signatures":[{"sig":"MEUCIFcj6rLPI7K4/ZtOBKAwO9ZPuVpl5k+JFAFLxH9Ye0WwAiEA21GfPe+2qEs55M2mFW6q+xBk+7FUHViimLp9cuubjKk=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":615826},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button/styles\";\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.**\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n**Note: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.**\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button--icon-leading` | Optional. Styles a button with a leading icon.\n`mdc-button--icon-trailing` | Optional. Styles a button with a trailing icon.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n\n**Note: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommend always including it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color-or-map)` | If a color is passed, sets the default container fill color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`icon-color($color-or-map)` | If a color is passed, sets the default icon color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`ink-color($color-or-map)` | If a color is passed, sets the default ink color to the given color, and sets the icon color to the given color unless `icon-color` is also used. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color-or-map)` | If a color is passed, sets the default outline color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v14.18.1+x64 (linux)","description":"The Material Components for the web 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/density":"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/button_14.0.0-canary.468392606.0_1636659646831_0.5033669665775655","host":"s3://npm-registry-packages"}},"14.0.0-canary.828f9803b.0":{"name":"@material/button","version":"14.0.0-canary.828f9803b.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"34abfc207b420ad012074b0af9753d5d8c7e9260","tarball":"https://registry.npmjs.org/@material/button/-/button-14.0.0-canary.828f9803b.0.tgz","fileCount":40,"integrity":"sha512-UY1jTk5Hnhkm12OnnX28QJMFP+MvDJYelIKUVXIp427MGxH8QJz1+Rg8OVQtfVcnrFyyPE/a5pHtR5PkMTp9Fg==","signatures":[{"sig":"MEQCIA8DN1vbs/d/tcGyYyGgX7lNDpYwUn1YI19k6GgnQ22+AiAI/3Y+PTiJm+jTnLTUTvrpoDe/eN36G883qi3Amnd6rg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":615826},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button/styles\";\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.**\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n**Note: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.**\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button--icon-leading` | Optional. Styles a button with a leading icon.\n`mdc-button--icon-trailing` | Optional. Styles a button with a trailing icon.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n\n**Note: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommend always including it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color-or-map)` | If a color is passed, sets the default container fill color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`icon-color($color-or-map)` | If a color is passed, sets the default icon color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`ink-color($color-or-map)` | If a color is passed, sets the default ink color to the given color, and sets the icon color to the given color unless `icon-color` is also used. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color-or-map)` | If a color is passed, sets the default outline color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v14.18.1+x64 (linux)","description":"The Material Components for the web 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/density":"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/button_14.0.0-canary.828f9803b.0_1636660285220_0.4229319241474985","host":"s3://npm-registry-packages"}},"14.0.0-canary.8795cba87.0":{"name":"@material/button","version":"14.0.0-canary.8795cba87.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"56ba15c7095147755148c36a7f973aabd8248abb","tarball":"https://registry.npmjs.org/@material/button/-/button-14.0.0-canary.8795cba87.0.tgz","fileCount":40,"integrity":"sha512-mJRHpPx4Y1zat9EAsBp9dH/y3czgcmd9K/5KpAkFQOuiV4lSAynjaKx/ZiP2FqStnQZZcQlfhJ2KpxPwHmtEFA==","signatures":[{"sig":"MEQCIA9XbxGjikFigKSL7ggSYJGOqqGsKV6o12I77cnHQXY8AiAFcZ65jEEBzL7EZYTcUnBCeogksjUnudmnmrFH3mNwNg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":615826},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button/styles\";\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.**\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n**Note: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.**\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button--icon-leading` | Optional. Styles a button with a leading icon.\n`mdc-button--icon-trailing` | Optional. Styles a button with a trailing icon.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n\n**Note: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommend always including it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color-or-map)` | If a color is passed, sets the default container fill color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`icon-color($color-or-map)` | If a color is passed, sets the default icon color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`ink-color($color-or-map)` | If a color is passed, sets the default ink color to the given color, and sets the icon color to the given color unless `icon-color` is also used. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color-or-map)` | If a color is passed, sets the default outline color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v14.18.1+x64 (linux)","description":"The Material Components for the web 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/density":"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/button_14.0.0-canary.8795cba87.0_1636660642778_0.19996489526131778","host":"s3://npm-registry-packages"}},"14.0.0-canary.cd7f8cace.0":{"name":"@material/button","version":"14.0.0-canary.cd7f8cace.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"86bb5cc9ee476fa1cb936afdf47f26c5195fd64a","tarball":"https://registry.npmjs.org/@material/button/-/button-14.0.0-canary.cd7f8cace.0.tgz","fileCount":40,"integrity":"sha512-GzovnPHnYQ7eYRIRBkZc7xxrXSTsNs+rTrr6qS9HrTqCfvZU9g52R8TagwYN3RF96FTlcsXbo1PZ0e3oow36cQ==","signatures":[{"sig":"MEUCIQCnNOXzZ9RBlp1NLSRIeFDb2fMtKXMFgW1AnzanG9vqBQIgUm2cm6/HmI0qG3hQYXMbWjmPAuOPuWU0zI7Dw+nU7ws=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":615826},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button/styles\";\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.**\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n**Note: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.**\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button--icon-leading` | Optional. Styles a button with a leading icon.\n`mdc-button--icon-trailing` | Optional. Styles a button with a trailing icon.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n\n**Note: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommend always including it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color-or-map)` | If a color is passed, sets the default container fill color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`icon-color($color-or-map)` | If a color is passed, sets the default icon color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`ink-color($color-or-map)` | If a color is passed, sets the default ink color to the given color, and sets the icon color to the given color unless `icon-color` is also used. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color-or-map)` | If a color is passed, sets the default outline color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v14.18.1+x64 (linux)","description":"The Material Components for the web 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/density":"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/button_14.0.0-canary.cd7f8cace.0_1636660746201_0.1562156345848289","host":"s3://npm-registry-packages"}},"14.0.0-canary.207230eb8.0":{"name":"@material/button","version":"14.0.0-canary.207230eb8.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"0d0ce4acd8c2ff20ef91df979dd9bf06278be7bc","tarball":"https://registry.npmjs.org/@material/button/-/button-14.0.0-canary.207230eb8.0.tgz","fileCount":40,"integrity":"sha512-pKqwiPQdGOEDIlPj2h/gNC8FWEwLXiN9/DxCE/CPtaX+8SJPpWRFMgQe5FCnXDUmlNRnLSjSuO2+/TzZ8Cl0kg==","signatures":[{"sig":"MEQCIFLwcWF6Y6StQWAo0d6A6/Xv6pm4iCZGou621Ya6ZIklAiAGaHAEknHKfdfWiMxYlIBdzD27wTkzQkEmoVq9lNt9Xw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":615826},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button/styles\";\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.**\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n**Note: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.**\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button--icon-leading` | Optional. Styles a button with a leading icon.\n`mdc-button--icon-trailing` | Optional. Styles a button with a trailing icon.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n\n**Note: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommend always including it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color-or-map)` | If a color is passed, sets the default container fill color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`icon-color($color-or-map)` | If a color is passed, sets the default icon color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`ink-color($color-or-map)` | If a color is passed, sets the default ink color to the given color, and sets the icon color to the given color unless `icon-color` is also used. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color-or-map)` | If a color is passed, sets the default outline color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v14.18.1+x64 (linux)","description":"The Material Components for the web 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/density":"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/button_14.0.0-canary.207230eb8.0_1636669510697_0.43124121412816496","host":"s3://npm-registry-packages"}},"14.0.0-canary.991fb99f7.0":{"name":"@material/button","version":"14.0.0-canary.991fb99f7.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"0521c63a8dfa0db0f4713bbd9fc01c9c978d7e54","tarball":"https://registry.npmjs.org/@material/button/-/button-14.0.0-canary.991fb99f7.0.tgz","fileCount":40,"integrity":"sha512-IKIKsqQGQ/Z6fCqzOcSvfsSC8rDG8lAFCX2yqmxW/a/NAQHm3NH5O57pUFD3WlucGedigm6CztjuCIa7/vqOzA==","signatures":[{"sig":"MEQCIFbkHziqXLo8Ec6qOMGYu+cxX18uevFs2I6FZ4O/5Qz4AiBaop8gjOspNNxgc3kS7MkR9rgrad2cUd9uk0Lxbb3BtQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":615826},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button/styles\";\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.**\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n**Note: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.**\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button--icon-leading` | Optional. Styles a button with a leading icon.\n`mdc-button--icon-trailing` | Optional. Styles a button with a trailing icon.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n\n**Note: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommend always including it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color-or-map)` | If a color is passed, sets the default container fill color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`icon-color($color-or-map)` | If a color is passed, sets the default icon color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`ink-color($color-or-map)` | If a color is passed, sets the default ink color to the given color, and sets the icon color to the given color unless `icon-color` is also used. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color-or-map)` | If a color is passed, sets the default outline color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v14.18.1+x64 (linux)","description":"The Material Components for the web 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/density":"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/button_14.0.0-canary.991fb99f7.0_1636670223248_0.5599204256907007","host":"s3://npm-registry-packages"}},"14.0.0-canary.15db4f164.0":{"name":"@material/button","version":"14.0.0-canary.15db4f164.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"8ff590b55b523d56b6fd0728ea1049d733576866","tarball":"https://registry.npmjs.org/@material/button/-/button-14.0.0-canary.15db4f164.0.tgz","fileCount":40,"integrity":"sha512-czPEGD/KRh88Csxt3HImMo0PMZFoteFin8nX5xlfGqF2b1QSy3p+KOYHlxYByWzUGXWCjcWal6Vn/4UK9ifEYA==","signatures":[{"sig":"MEUCIDCVilclLn9clmL7IkY/0ueZwKCMQFht0MplOr22akbrAiEAxzKnNuY+CX3gzcdicHS0BO22lijNkVkApZCB1jtvdVY=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":615826},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button/styles\";\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.**\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n**Note: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.**\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button--icon-leading` | Optional. Styles a button with a leading icon.\n`mdc-button--icon-trailing` | Optional. Styles a button with a trailing icon.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n\n**Note: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommend always including it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color-or-map)` | If a color is passed, sets the default container fill color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`icon-color($color-or-map)` | If a color is passed, sets the default icon color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`ink-color($color-or-map)` | If a color is passed, sets the default ink color to the given color, and sets the icon color to the given color unless `icon-color` is also used. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color-or-map)` | If a color is passed, sets the default outline color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v14.18.1+x64 (linux)","description":"The Material Components for the web 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/density":"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/button_14.0.0-canary.15db4f164.0_1636738226057_0.949075955331089","host":"s3://npm-registry-packages"}},"14.0.0-canary.8fcad5a3c.0":{"name":"@material/button","version":"14.0.0-canary.8fcad5a3c.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"156cf5fb6973c129342f6667d946234969758f80","tarball":"https://registry.npmjs.org/@material/button/-/button-14.0.0-canary.8fcad5a3c.0.tgz","fileCount":40,"integrity":"sha512-bteppOc3k6e+YkDNEbfozYPtHXf5Q/wMtAKX0e4VUGmeYP11OCPSKmbhqr0fCVCDblAH2ghdUap6mnbmbYtlJQ==","signatures":[{"sig":"MEQCIBP+gFcbd0quN4NZJHvCoN4KPyqNX2zPJLQFaZOciwYSAiA5k6/pWi2sVVHxtWkzY+kXSu80FNZ6TGZUXhWWDxSkYQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":615826},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button/styles\";\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.**\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n**Note: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.**\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button--icon-leading` | Optional. Styles a button with a leading icon.\n`mdc-button--icon-trailing` | Optional. Styles a button with a trailing icon.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n\n**Note: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommend always including it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color-or-map)` | If a color is passed, sets the default container fill color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`icon-color($color-or-map)` | If a color is passed, sets the default icon color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`ink-color($color-or-map)` | If a color is passed, sets the default ink color to the given color, and sets the icon color to the given color unless `icon-color` is also used. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color-or-map)` | If a color is passed, sets the default outline color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v14.18.1+x64 (linux)","description":"The Material Components for the web 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/density":"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/button_14.0.0-canary.8fcad5a3c.0_1636744467032_0.2881862841328786","host":"s3://npm-registry-packages"}},"14.0.0-canary.f81fb1d23.0":{"name":"@material/button","version":"14.0.0-canary.f81fb1d23.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"a6dbe3ff6bf5303cd8cf725d6195e499d00ca47b","tarball":"https://registry.npmjs.org/@material/button/-/button-14.0.0-canary.f81fb1d23.0.tgz","fileCount":40,"integrity":"sha512-69RjtX1EQjuORlega1d+zXNfMissGzyu2+X3klfQ4vFinz9t9WNf/pvVSdc0vBblSqflljuH6kWDBZkjSM/T/w==","signatures":[{"sig":"MEUCIQDPc5n6QzXOGUMczEHTfhCeqXVjySPJtl3kJW0XONZz0AIgazoAs8c/7SnqNWIko8vhgqL1Dc1GBt0ryWh34l/WTzo=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":615826},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button/styles\";\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.**\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n**Note: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.**\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button--icon-leading` | Optional. Styles a button with a leading icon.\n`mdc-button--icon-trailing` | Optional. Styles a button with a trailing icon.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n\n**Note: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommend always including it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color-or-map)` | If a color is passed, sets the default container fill color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`icon-color($color-or-map)` | If a color is passed, sets the default icon color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`ink-color($color-or-map)` | If a color is passed, sets the default ink color to the given color, and sets the icon color to the given color unless `icon-color` is also used. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color-or-map)` | If a color is passed, sets the default outline color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v14.18.1+x64 (linux)","description":"The Material Components for the web 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/density":"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/button_14.0.0-canary.f81fb1d23.0_1636756855603_0.0727967749791314","host":"s3://npm-registry-packages"}},"14.0.0-canary.783f6fd5a.0":{"name":"@material/button","version":"14.0.0-canary.783f6fd5a.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"6d3b10f14df4ec7164c0eaac85bbd48ce96bc4c9","tarball":"https://registry.npmjs.org/@material/button/-/button-14.0.0-canary.783f6fd5a.0.tgz","fileCount":40,"integrity":"sha512-2nwlvDX7Q69bu6fn8HvWMJDyfspbfy2B6u7JZBaChxYoSqCtPf4/7Kcv87Mjz/myUQ7Xpj8Q3MbIGCqX+AIHbg==","signatures":[{"sig":"MEYCIQC8hChTfrAZ4/TmPlAL2g78aoawMvYr4ydUNxV2IpTcagIhAJ7y806BgAiiMDFH7GNY7tPTc/uOqBtRehNFhCkpF7fd","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":615826,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhk0a6CRA9TVsSAnZWagAAK4wP/RFkN+bVGv6ZWQcRYnp1\nPM7Tyefa0GAf353CMN+pFKY5A/H6+yyvJvEb59dZXS1k6WH3n4Xr+N5NwBUb\n47OEpyPRe+TIGbLIV9d1/cnOBQOXWbn7Cr9RgJf1M7oC5FCaEdwD3UGjHbKg\n0YED7IwHs6EfDSZA7/ZwImxrz1EETpWFBOiRe9quElqRFDEoYiVpTAy7A2u9\nrKzkOJa+iHza1JwIxOrvMZCmI9R0MoDQC6lYPjD1C3yFhPyeBE8ZYevC7wC7\nvIoOzghXYyMPwE8zWK24ayRN24G+y7wtPe16AsivZcWuADrlYygeIGHuevlm\n6ZXOy5z3yitDLmh5E7zO/yb8UCEN9E0ccAw5Qm0VqDFihfPYIsXN6U20CfeF\n11/luXICPSOFWgXaWuBE2rNVLWEaD0obBycdLtREq1b64jcJGXfxngeFNHcl\nyA14IEJo1yv+cFzMLtbZs+aT/9bkw2Zh6clqmZqQeuXaJUfEsGsqI6GoesLb\nNViNYdQ+cr71+J9nRLWDsG9Ft7fIynNaQnM3gI8pcmH3BHEgxe1SJ5OpGvec\nr4R8POT+UESaRBlMes6GLenVcbt/rA7bN82Az4k3euGe8xvYJD88fmLoauQa\nTYfeO1AuOO3+RiirCo0rgarYERSUSmZCkUWvzb9rhZrvnh+giSxLNwa6eC7p\nbgBv\r\n=tCZz\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button/styles\";\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.**\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n**Note: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.**\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button--icon-leading` | Optional. Styles a button with a leading icon.\n`mdc-button--icon-trailing` | Optional. Styles a button with a trailing icon.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n\n**Note: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommend always including it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color-or-map)` | If a color is passed, sets the default container fill color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`icon-color($color-or-map)` | If a color is passed, sets the default icon color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`ink-color($color-or-map)` | If a color is passed, sets the default ink color to the given color, and sets the icon color to the given color unless `icon-color` is also used. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color-or-map)` | If a color is passed, sets the default outline color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v14.18.1+x64 (linux)","description":"The Material Components for the web 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/density":"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/button_14.0.0-canary.783f6fd5a.0_1637041850578_0.0843040151477874","host":"s3://npm-registry-packages"}},"14.0.0-canary.d57ec74c7.0":{"name":"@material/button","version":"14.0.0-canary.d57ec74c7.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"e2113e14518b3363465cd28ebba9fac935b5e0bd","tarball":"https://registry.npmjs.org/@material/button/-/button-14.0.0-canary.d57ec74c7.0.tgz","fileCount":40,"integrity":"sha512-GmX0zaqCtRO1MKX2ycgp4RL4nhWFwMxioGK0kBligA/ceCo0KYlZ+wR6fF1Xk82TB6sxFJCnhVyT7DjqRhIZEA==","signatures":[{"sig":"MEQCICoIDXjwcQadVT4hYJLyhkgPpYeWW0sAS+hBHyN/0sAeAiA+5b5bUkqO/p8RsPQ3iu0k9d84jnz/WSGIkR3rBayBsA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":615826,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhk9mcCRA9TVsSAnZWagAAZzMP/3jRNWyjQzsAD4YjeRSg\nnXTVBVHCPNYIJirPs5hg740VJsz8Pkpo43rwx1oXh3U3fLHhueRzagoCVtiJ\nItrPQG7YLQ9xSUzrUwiOthkTB2Nzumg/RRwVH6AYaRKV/w3Hdd8lG3DDC3H9\nL/FUD0WklprgAucVhMAISlI1wJcfz8GC2U6+d+vROWOBRsPWLx2gsQPfltQe\noj1ezxDLs4w5UJ1IqQX4RRa8F/5lb10WW9eLEEvrKKwYg3Wsovi7+By8r5aV\np7RP7gHa5phPkzncQFC0TbpB3DbibuHMeREKgw6QbRwk/kuOyCl72PTuSnrc\nSqQJFbkt18LxGg2D8spO6CDzZ0Ac4Dm0TBcVNH3uSfIWK650COo5fgpUiMI7\nUypUSR8Bi4E8QUZqBMTI25XTohE/953QZJlwIgqE4ZoJ9C5rgJzZNRsz9HLu\n9jOFJrB7bNzR7HSQygeyWaOsBu5WCl8e8CnahNBCXmaYqgnZo9OURLgDVxvv\n0yc7iEU7AVaLJ0eFSuco+I6T4q7GvUj7RsOGo1lm3N+EPKSuTzmWCNlg9VFi\nDErlT/zhUZHEafPDez0CZoOGdTHUrKVWDfAGsO0X487Nrg+EQ8KWYBK5lB2H\n4YWpRQflZ/PTmo/cahQZTCNLaiZgKZl01OAzlYE+9WQrdYj6bI4feCFCO1jj\nFm2p\r\n=AIxC\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button/styles\";\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.**\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n**Note: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.**\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button--icon-leading` | Optional. Styles a button with a leading icon.\n`mdc-button--icon-trailing` | Optional. Styles a button with a trailing icon.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n\n**Note: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommend always including it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color-or-map)` | If a color is passed, sets the default container fill color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`icon-color($color-or-map)` | If a color is passed, sets the default icon color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`ink-color($color-or-map)` | If a color is passed, sets the default ink color to the given color, and sets the icon color to the given color unless `icon-color` is also used. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color-or-map)` | If a color is passed, sets the default outline color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v14.18.1+x64 (linux)","description":"The Material Components for the web 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/density":"14.0.0-canary.d57ec74c7.0","@material/elevation":"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/button_14.0.0-canary.d57ec74c7.0_1637079452281_0.7924225573840789","host":"s3://npm-registry-packages"}},"14.0.0-canary.554c71829.0":{"name":"@material/button","version":"14.0.0-canary.554c71829.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"070032e98740bcdd4997c6a5fceee73f3ce3f525","tarball":"https://registry.npmjs.org/@material/button/-/button-14.0.0-canary.554c71829.0.tgz","fileCount":40,"integrity":"sha512-paaOtpYo7DzpX4v7C4POqDIHQALhLbNytWWMGCu2uGIb4jsx61vFfOohtX6UHANpnah3XzW7WCUtg4KKIQSSTw==","signatures":[{"sig":"MEYCIQDgo8/TW4VF9GQh1tAH5RMUFIOJkYPLKuHjIMD2M6lU+AIhALwPCyTVEPuzFABvij/sAmrXanQVvGk5+2q0OkSxKaT3","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":628309,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhk9pGCRA9TVsSAnZWagAAcpgP/1VbIkGUii2kQCtK3o0p\nhL3RmYW/TXO/zYF6yiBntrh+zobw8CvOTqucDakYgrCnvQFTWYhnkJRKm6NQ\nQVSkVxzsMKOsKDXYaWJsfgDC+X/KO9CqsJNLpee5Wk4oiwitbGklFQmpJ+gp\nFoEfRc7hQDOeLrXnYNE+UbzGkUFDEaFI6C5gV+1V8UAGi5L1RqqRnr1eIF1T\nFaPnOO1tCsFevRJij8tmDXGhSZPYBzjcmaBRjvo8+dURRJFhE/P3AkOkOvXG\nse8VYBBne/zTeZjLA8U/l6WsztxP1jsD6I0s3TKQO981/sugpjeoBf9b2X0a\n2+M4gzfHkhQot+UYbgdbQC/MyZ7NcKaw59UKGDHlrEjN2KX3Bf4PBl9+a25g\ngQTatICOjFh+XiMeWJp+YqSU4z4xadZKMWpaPzywBAd8Xv4dztNCLvKMvuy+\nlL4fdvRnb6pwkVaksfVSq1zPOuDdyQyLXsGZnKTWBH8mu2eU26NTK6hRndTs\nDBbOHSNdWl9wx6B1zx6wVs6RSz3EbqDHGF5eQJSUPgSFUiARIL28ZlA8bdxr\naV9nr7fPHN4yLnRNBnrCay7fA7cDVdS02IFHh9lBKftIjKqVUXYmBM7PL7kJ\n6JkwGA98VV2ZMReRqA7rjRyfbx9JxYTqsiREswL5+RvAQjAMhn6ao0GZPQ7s\n9FMC\r\n=IHuU\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button/styles\";\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nThe `mdc-button__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused button.\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.**\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n**Note: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.**\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button--icon-leading` | Optional. Styles a button with a leading icon.\n`mdc-button--icon-trailing` | Optional. Styles a button with a trailing icon.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n`mdc-button__focus-ring` | Recommended. Indicates the element which shows the high contrast mode focus ring styling.\n\n**Note: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommend always including it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color-or-map)` | If a color is passed, sets the default container fill color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`icon-color($color-or-map)` | If a color is passed, sets the default icon color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`ink-color($color-or-map)` | If a color is passed, sets the default ink color to the given color, and sets the icon color to the given color unless `icon-color` is also used. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color-or-map)` | If a color is passed, sets the default outline color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v14.18.1+x64 (linux)","description":"The Material Components for the web 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/density":"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/button_14.0.0-canary.554c71829.0_1637079621986_0.31643007552601743","host":"s3://npm-registry-packages"}},"14.0.0-canary.3ef470efe.0":{"name":"@material/button","version":"14.0.0-canary.3ef470efe.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"6f367aa7a19f2e782d45a7522ecaaf74816c09aa","tarball":"https://registry.npmjs.org/@material/button/-/button-14.0.0-canary.3ef470efe.0.tgz","fileCount":40,"integrity":"sha512-aOK/Q4Td+Fz20b+bm8krnwGfQ/UmL5t152FSY3hh3DgMHuRuwfdBvM1T9I7FwSQ4MqvUVS1IIyyoGbwh/xKE+g==","signatures":[{"sig":"MEYCIQDOb+pn2yVo0LOZc5stFH9oldG8PvfWQzne/+q7zKCNxQIhAN89nqV/sC5HBpj/X5QVEOcAUBY7E6DKiwcm274+tvmm","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":628443,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhk9toCRA9TVsSAnZWagAAqSkP/3tzN0+AXhCOlcuQsPjk\nI9i58QtF1ioLMRspm+GxMNnj1sQfibCxi+3vYqKrPvwPFMipO6RuUl1tMNHX\nw4MGEhhkyxUevsVmqDJ46O/Wms2Ooz2UmR3IftMG1uqlnez8Rg4Ozk5d9gnS\nX0hrvfQ5qraSSFAdqwpEv7XHlsMAVaFV1dS1Y2kiI7BjXQbGzSY1FS1sJSNK\nXgujOqcQwaPesoOJNCSfvzLcdlZ0Tz5xsKY40RJ/mpVADDR+bGwwGNrnX4Co\nxPygIFN63Pv9EBk5FQm8K6/aD0E3zxyFXd7JtMGNDVxBrb5EhUTffbE5XpMW\nfD0d/veKvHXRUr+fl/LsurMlrSFgaSJDSd8itqxVadYNk6KMthQrxvZygqyw\nnCQnS7aHXgJ2ziZT2WCcZUb3FqCCMiESMOm3Kevi8cUpxordaXXNPuKP+O49\nePcxVXfC3KKeLoe3SSDx+OXI5F7XgYze/Yl/e1bckd81z/o+4GgKaLMjryyo\nKSHkXunXExIwgb4D09ADFOXSqGWs5SVuPtEUxfrfaVZeb75fWC6icR6NNiya\nYLsPJRBO4eN+5OAhZGRuwZGVjefqXg9EvHTWYUg88QyclMC4KQ26idXtvqWW\nYgcPKvsdY2M0oUd6AfX4jIl9VB7ijwAxNsFN7G/gblq1wrZsHwBgTPlNmvB7\nOP4/\r\n=2J2o\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button/styles\";\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nThe `mdc-button__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused button.\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.**\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n**Note: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.**\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button--icon-leading` | Optional. Styles a button with a leading icon.\n`mdc-button--icon-trailing` | Optional. Styles a button with a trailing icon.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n`mdc-button__focus-ring` | Recommended. Indicates the element which shows the high contrast mode focus ring styling.\n\n**Note: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommend always including it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color-or-map)` | If a color is passed, sets the default container fill color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`icon-color($color-or-map)` | If a color is passed, sets the default icon color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`ink-color($color-or-map)` | If a color is passed, sets the default ink color to the given color, and sets the icon color to the given color unless `icon-color` is also used. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color-or-map)` | If a color is passed, sets the default outline color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v14.18.1+x64 (linux)","description":"The Material Components for the web 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/density":"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/button_14.0.0-canary.3ef470efe.0_1637079912450_0.1930197774240563","host":"s3://npm-registry-packages"}},"14.0.0-canary.61a28b2b5.0":{"name":"@material/button","version":"14.0.0-canary.61a28b2b5.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"74bd3da898832df5fad1f6021c20721e96366944","tarball":"https://registry.npmjs.org/@material/button/-/button-14.0.0-canary.61a28b2b5.0.tgz","fileCount":40,"integrity":"sha512-uVkgJeeW4QHNNQjuuGwLyRjJMI5QgJS93Al8khO2YJFhcixd7rKMopIbJCXE6wH1nB8kAyx6B76cJ0oFtwLaIw==","signatures":[{"sig":"MEYCIQDOrXGUEBcr4bACginDk8Q2bLC47+Uf3AaBnfFgI20cxQIhAPwM59RR6D5VJBHk5GSiZL3hJX9TutXEUT2Tt09awemG","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":638235,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhlVFACRA9TVsSAnZWagAAX8cQAIMzzMAfbzlFApcOj9sG\nNRchhFk0Ke9gMFN/pXYKzXXqEO0LTp50GKuvenZyHEH38uEXFGuvgLR+PU1u\nlUeiPAOAI4fNnzYPe41Xg/gVaNOhPpQWf98wp3IOfgXO6mlxIR/ZptXErMgY\n2jjyZ3tx5LOG2nymRyADvtPlKB+oHjVr9YcaTVSdl/59r7U1WFBdA0Rqa/Zz\nJXk9C3nbkv6h8++SwCgt0sASRSU134U3Yk5SY3CZ3GLKgUFSRQm1xSUv9YLk\nMXwPp3P7W1j78YafS3w+bk+XtYMm/CYKqPVXpVrpm0tu/+1Ac3sL73V/NwXC\nq+qMgXxU3loKls1UT57IDeFAcgPCqPH9M/+W7PXCrgu9Vnix6JdWJpkXrhyF\n5wH4RJu+s7Z8rtcPjCsbWIDam2eze3g6V8c2sSElOJWFQZAytfZCENpoODIL\n589J3yNarCt6v4Nx6jgMnvML4x3DFPyFCPHqJLsqaWKamEE3oBOX4Dr2s4RQ\nz8UqUjrqgat40/puj6I/nGHW559pH1F8NOmAVgZr6ibGTp8XSnKsUF1wvQP8\n3TP9X87GYYPxRT0ImTM9E3FqMO4LS0SxZfF+QRHMDSzfkPLjnA07gZ6CezS+\nK3RdpvzYoe9x6nFc+Hw3PHuDZSmjsV2YvZ3do0W7/u58OwNRypcx6G6r6v4j\nQVgs\r\n=M5uY\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button/styles\";\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nThe `mdc-button__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused button.\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.**\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n**Note: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.**\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button--icon-leading` | Optional. Styles a button with a leading icon.\n`mdc-button--icon-trailing` | Optional. Styles a button with a trailing icon.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n`mdc-button__focus-ring` | Recommended. Indicates the element which shows the high contrast mode focus ring styling.\n\n**Note: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommend always including it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color-or-map)` | If a color is passed, sets the default container fill color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`icon-color($color-or-map)` | If a color is passed, sets the default icon color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`ink-color($color-or-map)` | If a color is passed, sets the default ink color to the given color, and sets the icon color to the given color unless `icon-color` is also used. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color-or-map)` | If a color is passed, sets the default outline color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v14.18.1+x64 (linux)","description":"The Material Components for the web 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/density":"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/button_14.0.0-canary.61a28b2b5.0_1637175616042_0.4291980861724214","host":"s3://npm-registry-packages"}},"14.0.0-canary.fae6c652d.0":{"name":"@material/button","version":"14.0.0-canary.fae6c652d.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"50e0e169227746863d98b2feb50048ec0864c2e2","tarball":"https://registry.npmjs.org/@material/button/-/button-14.0.0-canary.fae6c652d.0.tgz","fileCount":40,"integrity":"sha512-UK2W+wAAt/5eUMyMl49LbrPdT22waJ17bqGynIUFtal8IPcjVDHeNiEKEkm2Clv3rbvbFSc42SslqXV6Ut0cJA==","signatures":[{"sig":"MEUCIQCGOxktgyShUzfHED5mrTcHWf+EbJViVk8Ia4CUOrPu5wIgXCyyoYdBfNbBYDGpiA6WncIZzH2KhjjQGk24DTlIKiU=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":638235,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhln6OCRA9TVsSAnZWagAABzYQAI8Q38bBRK/r0zkSvzuK\nl6RC+x2mugrR/dHrjfB4KbfDnnOKhLMUQO/7zYm5YeMTcy6ZGWcCHlyOx9U9\nXwAghPYWNKxezFb7axBwpYutnQAbl+HyVRXDp/ff9aOqzRt36FWax/kl5Kbk\neUyIPSbc2fjWplc2Gy50381T6JCY5qvGEGBRo+xBNmRp16Yuj51GdfMOyRNv\nLkXzzXImQcijAmS78j/GAVtE4b9kTCRW0bYQQnf1XYnz9t8e3SOHwp4Q3boF\nUDerJ6lZUW2nOJgTRPfH/y2CxTw5tP7MHPzy2uKtnaX6j2a5+BJeQfO7RovU\n2oPmHAXrh+nUMDo+x9fhOawzfmlMjIJVjhauUj+RSHD3VL8/h34YKpYFMz4s\n5X8hAdx9nv3xd9iVDsj20LmN3XUigZh+APEtZHe0Qlzrnipls63bC8MHP0VV\nINBXBNIYgPAEQ61Q+Koo2GyKkHSOJL6MvcTyhx2dP1l/bpPgITxgkOpZSZT0\n9sCZFAhoxZ7Brv6rnCle8fe5cCJl+Ck3Sy30YNx+sWeHLU6/QVxHQgNnbczs\nuaF4l3Cb9wghjCCi5Qvkg6DV1RGQ1a72kqExuzyZhVKHjh0FNx8CBH0LEqqO\nxWJHGcFlhb/zigN8sWAsyzk6y8OGNTG0hi6fNQKtFJjGTCM2M1wR8VCgXOyO\nTg5E\r\n=GJru\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button/styles\";\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nThe `mdc-button__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused button.\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.**\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n**Note: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.**\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button--icon-leading` | Optional. Styles a button with a leading icon.\n`mdc-button--icon-trailing` | Optional. Styles a button with a trailing icon.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n`mdc-button__focus-ring` | Recommended. Indicates the element which shows the high contrast mode focus ring styling.\n\n**Note: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommend always including it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color-or-map)` | If a color is passed, sets the default container fill color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`icon-color($color-or-map)` | If a color is passed, sets the default icon color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`ink-color($color-or-map)` | If a color is passed, sets the default ink color to the given color, and sets the icon color to the given color unless `icon-color` is also used. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color-or-map)` | If a color is passed, sets the default outline color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v14.18.1+x64 (linux)","description":"The Material Components for the web 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/density":"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/button_14.0.0-canary.fae6c652d.0_1637252750488_0.039300178829113186","host":"s3://npm-registry-packages"}},"14.0.0-canary.978a3b5bb.0":{"name":"@material/button","version":"14.0.0-canary.978a3b5bb.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"8853aec68fd06123019860b5d28c521130cfe1b9","tarball":"https://registry.npmjs.org/@material/button/-/button-14.0.0-canary.978a3b5bb.0.tgz","fileCount":40,"integrity":"sha512-bPlOuqdUewe7uiBWtC08ux009BJPFHie4OjhJ/OEEnIdX0BjG3y4fUDPFxiDeM0yaICQr5uRT0ZnmPNP4qgYDg==","signatures":[{"sig":"MEUCIG0ypBLdmMTY+P2yp4zR+K+AfVSOPVS4qGYtHju+Tfu5AiEAqV/4egWeQawvB7cZYEbMmIhOqnTLk3mFoHD06t5QX/Q=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":638235,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhl/2iCRA9TVsSAnZWagAAICMQAJ6db7T+Kgy1Wiu47Woj\nrmIpe1x4EDRn/Skmyh1A+YAnKzV+B9DmlgFyFutniw4Cb+bWyFacL6PbaOe2\ngHoF9Ndp/FAwS+cMrl1gtCAE4fHTugYZtLp5Rt66pDHszyy5RIjexL5niZ9Y\ns/uTy+1ek3aEi26ZQbrzYtHdw99XG9pngrZShIr0652N2gGO0kz0okNMOkw1\nl1iSldcVhtUg5C+JdHLAK4l+y8g6fTCfX2wwmh6ukIH0RS4HcbKoLxhTod4L\n1jQO7UP2RGLAif3bGQnHvIdrJqrZfQBjVeXNa7Ee1e10X2WGPSb3+HE3MdYY\nvhbD7b/2TWvivIHv2AF4WNkOn3oc3sDf0BZ9123WxOOizl+8i8AFBS8t1Oaf\nPQk9QsnsF4xgDVhBOjXPZE2VcfHMLKqudmuhSM+BIwrcgwc45TmzL7pLIBgD\nvH9IzEgI2JXH6ew0V9A1XvxvGiscSh1mDQ5tf9HeO6DHMecpTuRi1VgxQ/Dg\nmtMXPGkmJmS6IFNEczgB8EqIsB8urDgpx7Nz8iZ6cRdq0e5zVvmYxjZsprCu\nN2PNf9LcGaf1HIKOhd1M3oRbKVEgJ4QOuEQCc7UZMAd5s6eYHe1r5A8ijWs6\n8YF/BfCfKWZ97cWFIjBnEyERR/TnuVao/csNeHPdhECRnORLIJRN9ojLbJ8q\nvmpp\r\n=Qx0B\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button/styles\";\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nThe `mdc-button__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused button.\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.**\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n**Note: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.**\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button--icon-leading` | Optional. Styles a button with a leading icon.\n`mdc-button--icon-trailing` | Optional. Styles a button with a trailing icon.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n`mdc-button__focus-ring` | Recommended. Indicates the element which shows the high contrast mode focus ring styling.\n\n**Note: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommend always including it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color-or-map)` | If a color is passed, sets the default container fill color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`icon-color($color-or-map)` | If a color is passed, sets the default icon color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`ink-color($color-or-map)` | If a color is passed, sets the default ink color to the given color, and sets the icon color to the given color unless `icon-color` is also used. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color-or-map)` | If a color is passed, sets the default outline color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v14.18.1+x64 (linux)","description":"The Material Components for the web 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/density":"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/button_14.0.0-canary.978a3b5bb.0_1637350818504_0.11539915152737845","host":"s3://npm-registry-packages"}},"14.0.0-canary.e6f43cf44.0":{"name":"@material/button","version":"14.0.0-canary.e6f43cf44.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"7ee4520a3d03b8e3eeb34420b0f35219ae0b6da5","tarball":"https://registry.npmjs.org/@material/button/-/button-14.0.0-canary.e6f43cf44.0.tgz","fileCount":40,"integrity":"sha512-vaoYwZuRAYikOz4FVRMvj+p0qYJ0YOT9tW68Q/paRH6S1g+KC54ci6uBS0aRVFlv1Y38jAYHMvYT0PArCBg/kQ==","signatures":[{"sig":"MEUCIHReb9ES1Q5Q/9cKhyQrgKW/XtzNcynLUyy2omy9yp7WAiEA3zonQsoBNT6TSkgp/fwlm7ooWwH7x1fd4P/peUw3ptY=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":638235,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhm9UFCRA9TVsSAnZWagAAh0IP/3rn+3Gsa0UFsV99M05H\nEPK4gKAuJlAQTciSGhmvO2Hbf5ElPnuI2h127gxx71b9znmXWmgw7EYphsjM\n/Q5UMK+PEaDCEEnzIjb6mydDZwfa4K6ejdtKMv6Er6UUV5f5vKIqQHWuctC+\nwbmxeT1HQdgpfG+whfvwoIU6YOWjHx1DwsHCbWHqnXwbtV1Uzxi/21sG80Ek\n3Xq5FIUBHJlAIakw0dHt8nwYc9Xnt1ROyXD5vUg+RBb2GW9UofHhlpWClYxe\n4rPSh5aLA6yGiNDsJ3kDKd75oD/2LrcvhwHdnfJVRqmCdU8taZMKIKm6tEyg\n5P0qMtoc1aumb4JMtSV2gv2f7BP0XFPbYSQZAUBkT4YpicuD6c1TL6BpkQpZ\navZbXbDxpVZ4GqPVBenktXYKkpxIRaSQSPZkS8lLDKikwsH1IYp4LeSI9xRL\nE5URWWKKxU4Dfa+ZoplkT26pTQzuG19t2LH+RksAQmiDCqwT7yHtSLWhuwPw\n0XI+919iKlehTwWt7hpNGFjT918TPW+sZo9xW+o0uec2mf+XjK+uE2Bz0wKA\nTmO7LmPwYBjfQkbKBQecklTwP+UjnbP7O4ZDGM+15fs/MZzNh+AUCtmyILo+\nq0JJ9mKr0KJRE6K2yJeYmMPjT+Of/G6MtndkPMHtl6ROvCMATX/yfVtcfbCI\nuURa\r\n=v9bN\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button/styles\";\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nThe `mdc-button__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused button.\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.**\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n**Note: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.**\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button--icon-leading` | Optional. Styles a button with a leading icon.\n`mdc-button--icon-trailing` | Optional. Styles a button with a trailing icon.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n`mdc-button__focus-ring` | Recommended. Indicates the element which shows the high contrast mode focus ring styling.\n\n**Note: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommend always including it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color-or-map)` | If a color is passed, sets the default container fill color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`icon-color($color-or-map)` | If a color is passed, sets the default icon color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`ink-color($color-or-map)` | If a color is passed, sets the default ink color to the given color, and sets the icon color to the given color unless `icon-color` is also used. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color-or-map)` | If a color is passed, sets the default outline color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v14.18.1+x64 (linux)","description":"The Material Components for the web 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/density":"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/button_14.0.0-canary.e6f43cf44.0_1637602565490_0.8507829294023075","host":"s3://npm-registry-packages"}},"14.0.0-canary.39cf14bc3.0":{"name":"@material/button","version":"14.0.0-canary.39cf14bc3.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"0f7732736a25435edc4de06078ea050b0ee53883","tarball":"https://registry.npmjs.org/@material/button/-/button-14.0.0-canary.39cf14bc3.0.tgz","fileCount":40,"integrity":"sha512-/78AQV7m7p7nuyoV9xL+2yqJN2qijWnfkmPs8Y8Lt3q0Qrww4aPFiG0nDI3objoX9ltulWuMJ1k2BkTUINRRJA==","signatures":[{"sig":"MEUCIFGxliyioOqvX89FpOMvCuSgWbcOiz42Xb+7Rm6ErAhTAiEA1CELs0AXi+QOIvZfftXSJiNdbnei8JIi3ydHzJ29GaI=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":638235,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhnCI+CRA9TVsSAnZWagAA9T0QAIwGsqMRfuk4JTceU/Bv\n5416Km4g7TvmTaf3OHBphRl9GrlUJ6dAnaRS/hu/3BhYhOJep/qeROyNyJgo\nmynf+5onTgGiwyllCdrpg3XAe0kPxy18qmZFFo/x606pAGWdWtvF5BemAsQo\nKrg0CLAlFGf1gxNAYwyVIV2F5sUp91L3rzQALK29UIHG2i/VmIzfx/BSc1jV\nDKsu0IlKAHY6DzniElTXTO0+ktChzHAJhbSeLBJRd3dp80/lhxd/qLsLy+Yu\ndfpjwfwYAUdDDIppZEwrO1gRfbrhALV0rkqTfPiVDVPwAmJXbm8onBxBu39H\ntywXxX9P2grAv4zHCTBmyqY8VpZjiKoz45nUY3aTsVy7qEV5SxQQsPKnOvG2\nQd5bwe8uYG3tyvZjRJpV5uU9gCp8YVaJWohUBW8oQGJYuWc2Rcmvh8/ZbTG+\nEt91X/ih982rWjH7Y3qesGYsSh3BQSd6FVa8p8luDuut4FsLeHNI552OEwsa\nrGoRNqM1myk/NJUGYh/+bC5kkFgr8+Dn5QKSJp0b0QngGAii+9cqfc3JfqSb\nMjS4qiOJlXUPdlm+PHmV1zKKikDVhIgvvisZ6ix35f+2kNGLANs+UxMBGls7\n+nFc5aGL9epT0EpQcL5HiphAv1ttCKiwMz8SdlZFJPJ/2h2Zl3t47/hg/UZO\nzUbd\r\n=qlhW\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button/styles\";\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nThe `mdc-button__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused button.\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.**\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n**Note: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.**\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button--icon-leading` | Optional. Styles a button with a leading icon.\n`mdc-button--icon-trailing` | Optional. Styles a button with a trailing icon.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n`mdc-button__focus-ring` | Recommended. Indicates the element which shows the high contrast mode focus ring styling.\n\n**Note: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommend always including it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color-or-map)` | If a color is passed, sets the default container fill color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`icon-color($color-or-map)` | If a color is passed, sets the default icon color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`ink-color($color-or-map)` | If a color is passed, sets the default ink color to the given color, and sets the icon color to the given color unless `icon-color` is also used. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color-or-map)` | If a color is passed, sets the default outline color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v14.18.1+x64 (linux)","description":"The Material Components for the web 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/density":"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/button_14.0.0-canary.39cf14bc3.0_1637622334091_0.9878732031034534","host":"s3://npm-registry-packages"}},"14.0.0-canary.93134d453.0":{"name":"@material/button","version":"14.0.0-canary.93134d453.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"5ab0b1ddb28aa2ee5c2bf23007196f4b66c2469a","tarball":"https://registry.npmjs.org/@material/button/-/button-14.0.0-canary.93134d453.0.tgz","fileCount":40,"integrity":"sha512-Rc+3XaeH7ahSVEJo16Dmmx8dIRuW8MMknNDROT4cbHj0ZaoRIXsGFWZx6EvqSFFqG5h3tVYRDDSwGRtr9Zzs1A==","signatures":[{"sig":"MEUCIQDffmfEF0F7o3LBm1yIGFoNjYKb7aJIE+yt9oK5peLXrAIgTFwgdtC/6xz6iRfB1tiiXCw1aXgw4HbA4hbelBqBzkQ=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":638235,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhnQtcCRA9TVsSAnZWagAAxpoP/0bN4c+FVnlL+aKlHHWW\nyj0gNiwqtFTdzhYz08qfll1/IFY/TO4O/VQfa1fszZ9hzCO8bZ5RXxat1uzx\nWag2q60cpumhPUWEapsjIh7kHLWvo6WSCD6rVuljZyXFwK8/hpgwyiBwVCGo\nSq3idyOqWd+HLkCSbbnBeQPRRdrNwsyxibnajBUP+iRj4ly9i5FCMlbpOpH9\n7swmlXTj9cqq9Ejziv4whFuVwLiwdfzSFebsRH/KIh3hitYi/680AwEZtGrk\nMXrq7YP1CPA42s2edizINfa+alzDSssTwHZ87vukk9zv5+PRtIRIAPKum2uQ\n6TpPz7B3p3X/PhBCpDIUape1tH6+koVFCtAxyaCEJQPbqej1g2tPwNnCLa0x\nBuHOwA/gkilzkFUoKlj7eIbbfbTQ37A9mijoMpbmxOpYH8n5FsaXbR3Oa9VY\njStseCelmo85D+d/vha1+D2AYAD/8283G6+4qifU84GCAt9+vkHfQvjtqcdI\nEKVb1NjM+RR3utGI3fHPg74T1c50ri/f9nZapMGQbGzxXI+PSejmpvBYzsI6\nzePCbl611Y0ZDWD83yAEEYZpSXFxZ19EMtGg19ndzL4PdBCUMtYRsBprL9Tf\nV+QtfSIx88nWEErwOvBjPf/e9xLSA9FbdYVrMuk0jxYw4Pm5bZ+Dxo9IyvtB\nE2aE\r\n=SyjP\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button/styles\";\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nThe `mdc-button__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused button.\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.**\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n**Note: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.**\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button--icon-leading` | Optional. Styles a button with a leading icon.\n`mdc-button--icon-trailing` | Optional. Styles a button with a trailing icon.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n`mdc-button__focus-ring` | Recommended. Indicates the element which shows the high contrast mode focus ring styling.\n\n**Note: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommend always including it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color-or-map)` | If a color is passed, sets the default container fill color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`icon-color($color-or-map)` | If a color is passed, sets the default icon color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`ink-color($color-or-map)` | If a color is passed, sets the default ink color to the given color, and sets the icon color to the given color unless `icon-color` is also used. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color-or-map)` | If a color is passed, sets the default outline color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v14.18.1+x64 (linux)","description":"The Material Components for the web 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/density":"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/button_14.0.0-canary.93134d453.0_1637682012383_0.2698134404526329","host":"s3://npm-registry-packages"}},"14.0.0-canary.bbd11268f.0":{"name":"@material/button","version":"14.0.0-canary.bbd11268f.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"8d92dc2bc069c206bcd9a13ab478f55e0daa9227","tarball":"https://registry.npmjs.org/@material/button/-/button-14.0.0-canary.bbd11268f.0.tgz","fileCount":40,"integrity":"sha512-K643m87hUV6uLdZ3lvGp1QRYmnyTXnhdcq7er5WC5ocnt2DUAb3OG1VyDHZ9lzenGqtJR0+CVlMQJ/KnC7l/Jg==","signatures":[{"sig":"MEUCIBHR0/SWl93Zu07mXoF4cfw6eKV//QQ2rPK2llim6IpKAiEAkuAqjHvAIFC5IdKO/AWLLHiTvRPb7VamB1t1KOTPX/s=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":638235,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhnWwnCRA9TVsSAnZWagAA308P/3x9EgMkFzylIKgdND5n\n3sJfq7FjSfhkIg8tMZqyPImC0rrSqQiAaUjYrOsKtsUztWp7iZQGMmokOE7S\nWOum0OKc/ZjVtjsSx7AQI4CG/KKD4WKsJIraI/lB/gfNq3PVs3LG1noTFYuH\nL48BXL7Nl8rXr6NmcmfhWMdEVO/51/5hUy4ZJBE8zwhlVxat+v2Tv3IQyyGw\nGpjPYVR+kxiYeCctXtfAHxnm9hD998j/WJQhez8hzwIFqXPetOi0xP9NdtD4\nLCN/gZAgzIBsE8tvyJCXXY8re1GcbE5AuT1vJDJazRLa1HqyoUqzGkmbhc4Y\n9ktPyGSNLM2uOK5pzijFrgOo8WMfW0zC1A/WZm+OpkDfWBPYh90adcFGKGVd\nZ/2F0efkojPJSgxdqdZ/GxUqXsP1XPE1sB6DG630+M+cp0iv96g9b0fhQOBh\nBzVA3JJAx/QhqtPOFDIrnqvPvB97R0ADl4qm+2QJ7XfEN4ch9PeQ5fZ5dlxf\n9fCOlmc5aypxDC9Lhtmw/fFasI8ucufd+g12DXXkutPpUXw9i+1GLqFT6tl5\nLHKwhz6DzNH28OcV/tCv1nvIZ+NF1V/2hlnQeLg97FflRQgqZvC0Jm0CK1iJ\nbkJEBdPMljwSSrlBPeJhoqPqgNa2KUfKUHIc0wGPds3djJEyB+OLDBnVZFb2\nIGcl\r\n=u5GI\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button/styles\";\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nThe `mdc-button__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused button.\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.**\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n**Note: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.**\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button--icon-leading` | Optional. Styles a button with a leading icon.\n`mdc-button--icon-trailing` | Optional. Styles a button with a trailing icon.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n`mdc-button__focus-ring` | Recommended. Indicates the element which shows the high contrast mode focus ring styling.\n\n**Note: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommend always including it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color-or-map)` | If a color is passed, sets the default container fill color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`icon-color($color-or-map)` | If a color is passed, sets the default icon color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`ink-color($color-or-map)` | If a color is passed, sets the default ink color to the given color, and sets the icon color to the given color unless `icon-color` is also used. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color-or-map)` | If a color is passed, sets the default outline color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v14.18.1+x64 (linux)","description":"The Material Components for the web 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/density":"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/button_14.0.0-canary.bbd11268f.0_1637706791765_0.3906764200688366","host":"s3://npm-registry-packages"}},"14.0.0-canary.3db9c4d3d.0":{"name":"@material/button","version":"14.0.0-canary.3db9c4d3d.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"6e939b3e482d23ca3b96ec5fd24d6c7553e01316","tarball":"https://registry.npmjs.org/@material/button/-/button-14.0.0-canary.3db9c4d3d.0.tgz","fileCount":40,"integrity":"sha512-OeP55arGoe0OhqT21lYa2uyVRG7/XGxDAqWflGbFp2buUgc9xBbXdHuUMfnm98mHbJjYYNGNlnC9O9Z5O3BHzQ==","signatures":[{"sig":"MEYCIQD1sH5iYma7hJmOACuCFjDZKONxVKvjs0bSBya3KV7SRwIhANFtji9eNAJgXMNR/IV1Kexfr90WQzJVev+t5ZnpMFSC","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":638235,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhnlxoCRA9TVsSAnZWagAAmnoP+QCd/cvaWMWTgY9IwspT\ncx3MyG+Xs6vYdbrR6BSdfVaoEMvbXtgyoaZcV0K+T+MplhfReGCAz61f5s5l\nLwaJbYSxSwhuKy5oxql5Hn1MSbwMvmFTMhQcMx6NezprWbCpg9jmN2kr1att\nUbvC8sUpHaeQT2tYlAC9JIObwA5m7SGHi9Sa4UFosCvk8wY4+AD/qf2yYMgA\nnlzLuW83on2BAyhhqu71rCYUc2epgyJdwNmLwRGTDS0/UQ8VxWyqiisxJjFM\nCsCjVNcPcC4R4yA4cHTkUvQ6KwlVsfgP0WMATH5K8RgP/8KOzxtSzqdTC+D2\n1lZYn67StitBq+iVGuMxLSVfvBOZ9XPX5A3r6ovB4I64Z4PshMJ70C5gTH4Y\nu/sHN4TG5igGnYFJXCE/rkZj8IUStG2HfPJjXagF134kgSAG+w+GZpmZsevW\npRLTD9zCjKBfgelVwjVJ3kg8/x9oQ5qpoCkqDef5qG3OIs6+svNru7Ew5Rtu\nqR96oegngTavYIjWccn+1PqKQ0Kn5RJPAqFf+k/J3pdAHUA/cGUuOSKl3v/y\nGWIrAN4/r9BKLCCAV1UBcmXrK0OQ1O0AuKDFRmru6Zy+qXSmgaghoziem9CD\n7QPJ9BWkV0cWRelIMMCIbjKfl8aGssWstzpKFBYgFs2CbDsXtAp9GA7boXxT\na/Vz\r\n=pgcI\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button/styles\";\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nThe `mdc-button__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused button.\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.**\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n**Note: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.**\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button--icon-leading` | Optional. Styles a button with a leading icon.\n`mdc-button--icon-trailing` | Optional. Styles a button with a trailing icon.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n`mdc-button__focus-ring` | Recommended. Indicates the element which shows the high contrast mode focus ring styling.\n\n**Note: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommend always including it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color-or-map)` | If a color is passed, sets the default container fill color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`icon-color($color-or-map)` | If a color is passed, sets the default icon color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`ink-color($color-or-map)` | If a color is passed, sets the default ink color to the given color, and sets the icon color to the given color unless `icon-color` is also used. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color-or-map)` | If a color is passed, sets the default outline color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v14.18.1+x64 (linux)","description":"The Material Components for the web 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/density":"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/button_14.0.0-canary.3db9c4d3d.0_1637768295980_0.23849672888810525","host":"s3://npm-registry-packages"}},"14.0.0-canary.78305b6d5.0":{"name":"@material/button","version":"14.0.0-canary.78305b6d5.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"2b86d4a76ceed91f2305a516bf81bd66963f80af","tarball":"https://registry.npmjs.org/@material/button/-/button-14.0.0-canary.78305b6d5.0.tgz","fileCount":40,"integrity":"sha512-Nf442oA2W7Attc5ZAPrwrPSjWZXl45zOhXSqAmaPfVzuEDJhbbnQwEjMsLjduZUtx0cYA6pMnXh5W6tQegHe6g==","signatures":[{"sig":"MEUCID7ahv5yy9iPJvDpKevIvMrewLCsJNLst0aKyADoaR5IAiEA8+wltx5WqddVjWR25qdpgf9d72HHRfyU/ej0HeoWoP4=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":638235,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhnpfHCRA9TVsSAnZWagAAY1oP/2RT86SdJUbZS4/9mNYK\nBvac3w2KZtDa4r6UkPglXYRr+Wv+/JKT4Ys9wN+Msn798v1Rc2rWg7PWpoRx\neCm9D8q8xRphlU9vARMoFriSMuixHoMiqGV1rjZ+qb1Q5wuhNoGuvKcIgjqJ\nE1gib83EnqvwR9VXFuTaoFFobR2/5oDAnitK0LgGvbWk1RHl/4XzIglXRraF\neFMTc52YClW31bST+Bpf23B06ozBG7szH86dwMoAsmrHLLnRvcbxbdXEhcUD\nxsC1BrPWVlMOwpXSX7A6xc/t3FYHGXZBrpRhcV4q5nUsL0fd8CbYphgk/hm8\nuLgiBdYRjUNMS3ggcVcO9ohEnPXpnmKVZsxacEtU5mYldeF3AR0tan35lszX\nY/muWX1lJjVVoUpwhqh5YYgIz6hK0pbaGILQHHJQo5cDy8j6wCYatFEW4nIb\nLkC/Fagh55pU6/3LhRa0GzvOXLxZG0RVMq6aizAPIgt+ZPXNFX1DXEebICi4\n+oqQvN3aTpcTpH63uzD+tV83ZpMlZauBTo+2NgsIuQlLf0sAdE0rL2a+50zs\nu79ytpammAaaTtV9MJMxq9sd1/CvAD25krswROfsvjcezcgUzrtfjlnLzFgu\nKKkMi+103ldcGDW+kzREsJtRiZiv4dWg6NWjWD8E1l+2fbt1pG4gyta3jvZl\nGchn\r\n=Qq20\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button/styles\";\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nThe `mdc-button__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused button.\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.**\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n**Note: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.**\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button--icon-leading` | Optional. Styles a button with a leading icon.\n`mdc-button--icon-trailing` | Optional. Styles a button with a trailing icon.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n`mdc-button__focus-ring` | Recommended. Indicates the element which shows the high contrast mode focus ring styling.\n\n**Note: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommend always including it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color-or-map)` | If a color is passed, sets the default container fill color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`icon-color($color-or-map)` | If a color is passed, sets the default icon color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`ink-color($color-or-map)` | If a color is passed, sets the default ink color to the given color, and sets the icon color to the given color unless `icon-color` is also used. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color-or-map)` | If a color is passed, sets the default outline color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v14.18.1+x64 (linux)","description":"The Material Components for the web 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/density":"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/button_14.0.0-canary.78305b6d5.0_1637783494867_0.8372974679127465","host":"s3://npm-registry-packages"}},"14.0.0-canary.43d08ba77.0":{"name":"@material/button","version":"14.0.0-canary.43d08ba77.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"6a4658df4f503f65dcbae841d7c2f8d07f0262d9","tarball":"https://registry.npmjs.org/@material/button/-/button-14.0.0-canary.43d08ba77.0.tgz","fileCount":40,"integrity":"sha512-hweyBhyG7835xQERnT989vpYQQB/dsBoboH2RBsiAZMydJ5x+WmlzoaSdqcVariutgvXcskclyESDCxbvhgFxQ==","signatures":[{"sig":"MEUCIQCWRMte/aGQDRYCrsVpU0KU59ZnMQIiNOmQAJ1x9JkySQIgSWapxxBQ8tAhpH+1UGgr2cXdo/sM7bjU1TVMzddIPGM=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":638235,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhpqw5CRA9TVsSAnZWagAAZIoP/2VrQr0dFpI01pjpnqip\n4N8qVwnIANhjOcrtpIIcCLFeg+prHWTCJqNfSzeoqu0U6AMFRCBl1oykYLmV\nGJzRyTUKhY9dW4MC5djlo5SHGee0Wd4iqtwrMK5PX5JGpw1ij9J0mo0sjlOl\nC++e80TD0oD4zEvJJ8ng/HNfSDDVeiJ/Bw1+EqKd0eKjFYmdSMS0fgqFgWvC\nbNMElxv1l5kfkKzNsBP2pff97FgQ2OjRvgwBfQAeBRsy8agTjMwX4Dc818eR\n015eYNyC0AdpnMCm4J7EsnfWoIxbYMD2mngKhnLmW356cfp/22HDvuXBwcSc\nv8mgtlqpXx9B+U+4Ha5kCLjUl1cl58hXUjYT4JDax9srTrbj3ov9/B4o0A60\ni8FNtIcGIMF1Br3FAUMm8+pRFdIRrRMjr5MxFHF2npku97FJviDTCIZxhyPz\naOYkRkrP3R0K/72UUGQ7RBxIKKtGKaZxBPrNzWW6MXgGOlWNCNzksh5An/Ge\nuBFBWKTL5Dt5jpdAOT16bkQc8oiDtnXYmwYfg4SlNkOcpAyyuRRi0eZQ0N6K\npdHpign+ap7khT1dGcAHz7ExUAvzXl7FLA/SwQfR/o5DaLNJ0P/miAGVfc8v\n5f4LXmUWo/l9DRiwdQqloz9PE8O2Z2gVBcOvOwVfcDKcBwRpfEbxzH2Ng5zv\nzZsl\r\n=uNb7\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button/styles\";\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nThe `mdc-button__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused button.\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.**\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n**Note: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.**\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button--icon-leading` | Optional. Styles a button with a leading icon.\n`mdc-button--icon-trailing` | Optional. Styles a button with a trailing icon.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n`mdc-button__focus-ring` | Recommended. Indicates the element which shows the high contrast mode focus ring styling.\n\n**Note: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommend always including it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color-or-map)` | If a color is passed, sets the default container fill color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`icon-color($color-or-map)` | If a color is passed, sets the default icon color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`ink-color($color-or-map)` | If a color is passed, sets the default ink color to the given color, and sets the icon color to the given color unless `icon-color` is also used. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color-or-map)` | If a color is passed, sets the default outline color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v14.18.1+x64 (linux)","description":"The Material Components for the web 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/density":"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/button_14.0.0-canary.43d08ba77.0_1638313016711_0.6393723861358587","host":"s3://npm-registry-packages"}},"14.0.0-canary.17a072535.0":{"name":"@material/button","version":"14.0.0-canary.17a072535.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"585c676b818701babc30388db5c2fb33ae3624f0","tarball":"https://registry.npmjs.org/@material/button/-/button-14.0.0-canary.17a072535.0.tgz","fileCount":40,"integrity":"sha512-e9L8WwJg9hDHTVxJ4Pbm2axfpdFJLmXdQrRnj78zGM1lySi7Bl8RQdlghbVW8NvMwg57MhR0MXMbtgbEXnO2DA==","signatures":[{"sig":"MEQCIBi3Ae+QzA8P8KwSUQzs83gRFcg0YsdokM/LeMeJCn0FAiARjkDtW28SyZmZ1jkVSQfPDTd9TJDSiLEHuWTLzii6Ag==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":638235,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhqQsaCRA9TVsSAnZWagAArlYQAIhMphrpOUnEw6nuWSB/\nnn0MEWbDMPrMxzn6caSqbFtiKPXDYoIpOT6JMM01DQOR+F92MN7bfJzGqcSB\n34yB7IkzYrUMBunZxu//Yt2J9sLlrORdvths3TedeLVKEQw+zKY4Hb3qgq7i\ns1t5zjNvAfQv2PN72Jmus7y33sY1IoWA/IWE1oyeIus1CuP1Ojpr3f/NxxGM\nEVsuI/46WjRUq8s7nC/Iuoj3kAssKbm5Bah8KuwhaenIGsBuHg6Yyz6fmFX4\nBuR+gNlmiS+SeLTm3+O4QFYbXB4dKyJPmEAD+Lg/M0ZSVXJFezcjFx5/HWIl\niR6B1Tr5fnpryTFXBFtO+jfiCNeFrPFVwXFhJGQLREN3vOAnKBH1iyKfK/jD\nXTrobCjo4SrpO7kVL8onEb5DoCfJKAMn6tVQcvdhmCXXdVMsRAee4TX+j1ij\nEXNUHe51HfnIHWgxe6YcOn1C6yDv3A+2ok77Z3P0MVGOmiXNl5bPw/snk7ME\nX/Xrka8Q3sQ21NhGw/8Pb7FwXazmTLgz0asoWiNzd+ipqnqAr7BE2eCzJcgG\nyEbp5jlo1ldjCt0wItegkak1n4mKMaW/HK9w8I45mFJHETFvZzRZ6+QqA4BN\nClHiOYmvdGgiDMb9uxAZa79C4dpYyeM/zFSOf/GVA+Gx3cEg8yDlygJRWWkm\nNw8d\r\n=Tfwy\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button/styles\";\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nThe `mdc-button__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused button.\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.**\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n**Note: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.**\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button--icon-leading` | Optional. Styles a button with a leading icon.\n`mdc-button--icon-trailing` | Optional. Styles a button with a trailing icon.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n`mdc-button__focus-ring` | Recommended. Indicates the element which shows the high contrast mode focus ring styling.\n\n**Note: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommend always including it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color-or-map)` | If a color is passed, sets the default container fill color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`icon-color($color-or-map)` | If a color is passed, sets the default icon color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`ink-color($color-or-map)` | If a color is passed, sets the default ink color to the given color, and sets the icon color to the given color unless `icon-color` is also used. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color-or-map)` | If a color is passed, sets the default outline color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v14.18.1+x64 (linux)","description":"The Material Components for the web 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/density":"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/button_14.0.0-canary.17a072535.0_1638468377958_0.051615343262585434","host":"s3://npm-registry-packages"}},"14.0.0-canary.5d809696c.0":{"name":"@material/button","version":"14.0.0-canary.5d809696c.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"ec4c3ef182690406b2e6127442572afdc22eed80","tarball":"https://registry.npmjs.org/@material/button/-/button-14.0.0-canary.5d809696c.0.tgz","fileCount":40,"integrity":"sha512-5HNsTSNC6eIxFWDkDxzHvpBkyixJg/PGyNc74AG9KFbRB/RXceZlsgnxG0uRvH2Z0Jm5BOVGRwNGj5fz70zTGA==","signatures":[{"sig":"MEQCIDUeYw/WHX9fYMdH/+bD6ltfkl/txdCQiuveV1Ui919JAiB+mlGBi02LRlpnPjZz+Fz/pkc5zmYfSCE26uErARusKw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":638235,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhsO81CRA9TVsSAnZWagAAZ2gQAJ7pPS1kPQeFDVLjXU+Z\nUKvmzhfVjoDo0H9aI4RxGDe5lxWpwLTy84/ZKCuQ5P5zlL1ps7X7vU8CxzWo\nEC6SuDSl+QPwpgA0PHtuW4PWJDkNMP4KacgTyKpK8GYuszqNwXA0r9ShTT+0\nYCBY2C8qNEC6ODjKjvdW9fcXLXL9+j2O4Pcc+OGkQKMjkZqNhRVieXC+t32X\no7LdJ83gl2k9rz+99Eo37bnQWoj2Db1Vi5YWJ+GT4m6XXfedWC8cCKhcUnVc\nNxGtTK8DfJ3KpdHtLAM4IiAGMv03mOqsOyoCCmmCChdHCTc3MANbH7MT6Mus\n9TIGSb7kEU8GL+NgJdssJLGfzrx1ksE29hx4sdqOTv3LX1JSPCFiW2wlUmhh\ni5St7iCahgR06cfk5AGm3lLAp16+50SbFMONVkINwKMbvTjpTLJTHXr7tNGP\nCtH2XVLhq7/gmWrRB8HdiM9pRuMWKcQWZRzy7FYt2HQXmvqfleoGP1K36lqN\nrwZg4fBxlGYBopdCS3Hzcu4zBZxHQ+mVC10bL8jmYLpDMTSRgHMaULZT9zE6\nMUGZGWTombFHMfPzkwbghtA+sWbtO0psqnWmI8HPlzxTaAymEXJVklML+kz3\ngUlsXV2kuR5O1SMPL2C+yHCDrPvCACUbcnBcE1TbJJo8T0Nxmj8zjT6D1JmF\nc+8e\r\n=99tv\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button/styles\";\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nThe `mdc-button__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused button.\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.**\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n**Note: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.**\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button--icon-leading` | Optional. Styles a button with a leading icon.\n`mdc-button--icon-trailing` | Optional. Styles a button with a trailing icon.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n`mdc-button__focus-ring` | Recommended. Indicates the element which shows the high contrast mode focus ring styling.\n\n**Note: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommend always including it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color-or-map)` | If a color is passed, sets the default container fill color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`icon-color($color-or-map)` | If a color is passed, sets the default icon color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`ink-color($color-or-map)` | If a color is passed, sets the default ink color to the given color, and sets the icon color to the given color unless `icon-color` is also used. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color-or-map)` | If a color is passed, sets the default outline color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v14.18.1+x64 (linux)","description":"The Material Components for the web 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/density":"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/button_14.0.0-canary.5d809696c.0_1638985525533_0.5031724618744444","host":"s3://npm-registry-packages"}},"14.0.0-canary.b6510c8c1.0":{"name":"@material/button","version":"14.0.0-canary.b6510c8c1.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"2ec66b9ac8e39708466b1854e97aa0bd965bdb1a","tarball":"https://registry.npmjs.org/@material/button/-/button-14.0.0-canary.b6510c8c1.0.tgz","fileCount":40,"integrity":"sha512-FY8A5P8lCeQb89XwWX26h5GrblH2H6XmXX19yjIC8D45X+iGjeUhLZLHhkMUP4+bhcdUIbpAtpzR2GwttytZ7Q==","signatures":[{"sig":"MEUCIQD0Y+UwVRNOe6s97BjuiLOFsr5/DHqBZK5QwEZGuwGk9gIgI8Bb8YEg6dTdliEJ8LIyPKNfLrNSMRicwHkt1VafVbs=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":638235,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhsPRjCRA9TVsSAnZWagAAbOoP/i+X9Kb5hus90EzPQjh3\nt29uCkgQrVs/uMBLPcEP/jK2lqsl8U6CPNNdABgoMaQu3NgtBmZ0CCBKxJXy\nAGe1I7vcMKWcne67ILBEcakS1BocYREShQ/jInJcXdBc+p1kpm+3SVPRjtWi\n+LStHxFLweuZzbNChvJL9W85Hzqxk27AVyBVlSai52hSfdxWb8F95Dexl0cR\nHYRHPp+eGJuj0tMcMPPxZwwnej2OLjRTu3oXNgfPpxyoCx2Hpy7BOg2ubfA6\nbagxFmsJD42+6utnNa3lRZMQaYVzAHrvzhJH9X7E7KLJsi+ns0GZghRHKepx\njREJuLkUqGRn6HgQSw9yR/0uouCcv6P8eZVt6miFmkFdI9M/8ElzsghdWhl9\nfFfZH8xovpuuBi9yVWQxKmSr0BiLXYckWxGJ/s9WT6P0RZV0xgrTv+mHV6Ne\n8/J7nepGIfJEYNpsIK4iYM/OcpVhm83kLUDNaPsHby3aQz0e1QLq2a2/rtyr\nYxhgyP0w4pNeFs09xPmDdVdzvf4T5m1LfzT73vuEujCcCUV3dhuA0xcwDta0\nFOHUPCK8z4K5HfGjQelx3BfGUThL1zf/Nlr4vkLheAm9CjCnKXhJNUexlejJ\nCjo/Bx68nHJD60BEll5kEQwCtY0oOeHJ27CCrAAzmDGUpQRiDbwvzG6hHYRb\n6FPK\r\n=L9kB\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button/styles\";\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nThe `mdc-button__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused button.\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.**\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n**Note: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.**\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button--icon-leading` | Optional. Styles a button with a leading icon.\n`mdc-button--icon-trailing` | Optional. Styles a button with a trailing icon.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n`mdc-button__focus-ring` | Recommended. Indicates the element which shows the high contrast mode focus ring styling.\n\n**Note: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommend always including it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color-or-map)` | If a color is passed, sets the default container fill color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`icon-color($color-or-map)` | If a color is passed, sets the default icon color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`ink-color($color-or-map)` | If a color is passed, sets the default ink color to the given color, and sets the icon color to the given color unless `icon-color` is also used. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color-or-map)` | If a color is passed, sets the default outline color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v14.18.1+x64 (linux)","description":"The Material Components for the web 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/density":"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/button_14.0.0-canary.b6510c8c1.0_1638986851426_0.8428935753724782","host":"s3://npm-registry-packages"}},"14.0.0-canary.f460e23da.0":{"name":"@material/button","version":"14.0.0-canary.f460e23da.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"32ed47522f92823f8df028a13b166e2ca67c2149","tarball":"https://registry.npmjs.org/@material/button/-/button-14.0.0-canary.f460e23da.0.tgz","fileCount":40,"integrity":"sha512-NuMv5/z6HI+SYevGa+aXGJ88tjIclFRNZRHTMfjfg2PoJKPPHC+D0OY1gAz0ynq5kSiBgLshBlfH1F/I+SlcVg==","signatures":[{"sig":"MEQCIGj7AqE8iumhs5U8xtEpxOsZVekHRviO7LpWknHovW/HAiAK0uTJBAv6aL+nW0gWZRfWcBwtj2tHu2dm6tViBvMOqg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":638235,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhs3GcCRA9TVsSAnZWagAAfNIP/RM5BjFlmkfI6zKb3Lqk\n74j1THdZZQJ7oMIFCW9tt16Pfen9eEtgHKzRb7p74KMXSfXFJnffuuyScVeK\n8nSQuCvs7joV5XXt3jQ10TmrBxKeFOYrZpZc17a0cn4MEJ4HLLNGr6BFo8n8\nyrlH+vDtb91n01KPtlwOWruwHsbeDoXauOSSKgXmC+0R9ji1PedBm1C6JLNI\nMTakz+0NjsrtjNSQ1SJR5l6pOizHn9ULwLb4kLM8WJcEd9jmfLm4I6cv7OAo\nYMR1UwpUIyZIrWYHK/2IB9IiME2uoubDXCGf3ITvW4N7TjnGVsejQy+DLMbr\n6H5kP5Eamno18sTot8YCcueGlIMJtY7MzxRUV1nXQpZFjWu57cRQFihHlXXP\n/dxqPmCMWdIXDycianVhsIWCroHDwK5mG/Y4aOY7bSd2yDJihbQ2wobvhSvk\nxkIcoV/yV03X0fgHLL7cxUPtLfBuW3Ksj/E5YECqOa2IqA46cmYCwP/h8A+S\n7gGXywq92sMhS7FMiaWjCBgthXmXohM3kcBq4KnykEIsQeTCBPCcdV9rEO9D\nVhwy2B6QoDtytWKWpRMH/DyIybkIfMvNCEJr5OOJxCRdsdmSZGooFOVpcwCL\nQ6CNphmCvWkHy34DPmgwz1JhYI4GmxE7UmNHAP71oP4hzZeSh9Otgxi8rNOQ\nI2ld\r\n=uQqg\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button/styles\";\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nThe `mdc-button__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused button.\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.**\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n**Note: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.**\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button--icon-leading` | Optional. Styles a button with a leading icon.\n`mdc-button--icon-trailing` | Optional. Styles a button with a trailing icon.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n`mdc-button__focus-ring` | Recommended. Indicates the element which shows the high contrast mode focus ring styling.\n\n**Note: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommend always including it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color-or-map)` | If a color is passed, sets the default container fill color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`icon-color($color-or-map)` | If a color is passed, sets the default icon color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`ink-color($color-or-map)` | If a color is passed, sets the default ink color to the given color, and sets the icon color to the given color unless `icon-color` is also used. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color-or-map)` | If a color is passed, sets the default outline color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v14.18.1+x64 (linux)","description":"The Material Components for the web 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/density":"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/button_14.0.0-canary.f460e23da.0_1639149980755_0.35570385298929463","host":"s3://npm-registry-packages"}},"14.0.0-canary.7d8ea4624.0":{"name":"@material/button","version":"14.0.0-canary.7d8ea4624.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"00f91b04f0bcc9bbf6ed37db9bf677d792760fbb","tarball":"https://registry.npmjs.org/@material/button/-/button-14.0.0-canary.7d8ea4624.0.tgz","fileCount":40,"integrity":"sha512-WjvHgCCb1dauf2LemN7SGVxKRuKw+HB3zeXFOXZ3uWPIfpw3hWV2duiPqXSaRQo6RJl3EUQB2Ek+99Ii5Yfh6w==","signatures":[{"sig":"MEYCIQCtbNGdApPxvS/eiCKQcMapXxrlAyiXUu79JtKQrOIQkwIhAPtxgYRD9CyNV1TbIIuYcR9oDTFBxkvOn9+9KoK4q19n","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":638235,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhs6rECRA9TVsSAnZWagAAZckP/iXqciAzq9fgPWDZB0Jw\nTrs2AK1zqoLM70YRm6wLjQe4W8YVpUevuBY4Wu7DwJE0ibd/DaVMx+dverkS\nBS4649yi61ruJVDThIVdSO5HsqQTM4sRsOMMjVsM6u8ksn8YsxTlAhYr/x6i\n3zmhd09Wi/ns45j0ESI1sU/+2hBbQIohyOFOfGfYMgZkuL5wnGN0JY5J+qnc\n4Nyh9PBbb4Txjs26miTc/EMbzTgi5kbc84cqBFf2pq5WQuxCGy5cqPLYzDxG\nYekAq1ptd9h3yiEWYJFz0yJHaGcjeuj+Ax3hHrVCLsyMhm3zdZ8mIoPKIB8o\nb234Bz19Ll2G+1xeoPXeWUCOvfEnHkU4w0bZ/6lBn6+l1Q5T59JbNcU27wFq\n4rkF05JuLpLc2UUNsnNhUGvGQE2auckjLRBdrKgIv8fB/sphC36qw8wu77hZ\nGj703CbPp5rHcxbrs/ENxF8dyTPQhENLuURm3jaIjUc2DJsfdiaBbQ85LcDz\n5Zr5/HUXU8OhA7Kf510jRZdJo+IKCVbzjnobwJVZ2YkiZPyMjcWduNANttMq\n1fdogeLHc/uZZ60R6jNh9UhPetZwliLGVWxs1uCdv7zrcCDf4jP5HH1ugyKo\nlgCKJowv0x2Tcjg1Wc0D7rhaDXqX494moDPQsKbAyC7bBuqS/qzt419E0lJs\nDGFK\r\n=ezs8\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button/styles\";\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nThe `mdc-button__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused button.\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.**\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n**Note: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.**\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button--icon-leading` | Optional. Styles a button with a leading icon.\n`mdc-button--icon-trailing` | Optional. Styles a button with a trailing icon.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n`mdc-button__focus-ring` | Recommended. Indicates the element which shows the high contrast mode focus ring styling.\n\n**Note: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommend always including it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color-or-map)` | If a color is passed, sets the default container fill color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`icon-color($color-or-map)` | If a color is passed, sets the default icon color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`ink-color($color-or-map)` | If a color is passed, sets the default ink color to the given color, and sets the icon color to the given color unless `icon-color` is also used. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color-or-map)` | If a color is passed, sets the default outline color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v14.18.1+x64 (linux)","description":"The Material Components for the web 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/density":"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/button_14.0.0-canary.7d8ea4624.0_1639164612381_0.8949676300524747","host":"s3://npm-registry-packages"}},"14.0.0-canary.8fffcb5dd.0":{"name":"@material/button","version":"14.0.0-canary.8fffcb5dd.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"233ae50b3708094bfc47bcd2a63ccd5e1f12cf0f","tarball":"https://registry.npmjs.org/@material/button/-/button-14.0.0-canary.8fffcb5dd.0.tgz","fileCount":40,"integrity":"sha512-RILmAfN+BNl/xUEaCPD1lut8UkKb6wU/1zlHuMk83OD6+L1xqZLwf48GWAo0ZxxclUMJ2zXKO6CotNfnM2cg9w==","signatures":[{"sig":"MEUCIQCWlr9wC0p4g3JNF55QRtVcCrk3hjLJR7RunwJA3LtAlQIgXAbzzhMRQTnXLowxLx1HoTwUND4XYFDiF30xyO+mLRk=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":638235,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhuFwqCRA9TVsSAnZWagAAjIAP/1HgThR6ZvVXY7lyODSP\nMzUGV/2TNSSWGLlUOek8naTOqdLwSZa2dODj9jtnYV50fVJIl7AWzLhlbYnk\nmyzgrsaaat8izEoz1e1JSaaVM27cME5ExsX9iBb/VqS0ZwfaW4i95j5T7tSH\ntYPVTR5LAaLt2cNSX3q3fo2j50nBTZkC877sdUMhCnwQfQgyY1g82jPPHvVy\nqLJttowO0cK5/UnW392JlgWyCF3uaSyuCnC0D9wG+sPZNG+Sh2JlA4qVRaqa\nbLCJXzuernG+5EqwrQC12r4Nih97WBzo18HBCRKJ0gtUfOrZGkU01KsxON5i\nf/PiGOMhrDZqSlaKktSMI8jQkq/jUy9iamukusrCbc+1mUc0cndbCHAOVcSJ\n3SFunGG0S8JOWcyhgJxUgY8G+PuYh/R464FpLwDFfnvDT66ZGwJROJ1No0bH\nW/L34grl8m8OWy4Uu5P9+orM5iBd13wOA4WNiapzv0jto1ztkcl3WKm8ib2P\n63T37tsY0adGzl+W0h/m+XBy1wgGBH/6hcXPk+xgLnxmnJ6fLSPJzKl8R//D\nWjdcem7k/jzD93vCk6HMt/ox4R7TtCDVbVR5V52s8Ka10U9hKZQ2E4EM0ehw\nFA00h37AWfwEhIVYXEklVoDe/K3cUmwqHzXh/plS1Ikro4rht7PZfWZno1HP\nGPOC\r\n=yYdp\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button/styles\";\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nThe `mdc-button__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused button.\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.**\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n**Note: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.**\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button--icon-leading` | Optional. Styles a button with a leading icon.\n`mdc-button--icon-trailing` | Optional. Styles a button with a trailing icon.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n`mdc-button__focus-ring` | Recommended. Indicates the element which shows the high contrast mode focus ring styling.\n\n**Note: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommend always including it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color-or-map)` | If a color is passed, sets the default container fill color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`icon-color($color-or-map)` | If a color is passed, sets the default icon color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`ink-color($color-or-map)` | If a color is passed, sets the default ink color to the given color, and sets the icon color to the given color unless `icon-color` is also used. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color-or-map)` | If a color is passed, sets the default outline color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v14.18.2+x64 (linux)","description":"The Material Components for the web 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/density":"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/button_14.0.0-canary.8fffcb5dd.0_1639472170335_0.9157647109055929","host":"s3://npm-registry-packages"}},"14.0.0-canary.21e1cb9be.0":{"name":"@material/button","version":"14.0.0-canary.21e1cb9be.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"b0776da051303a8a6ca245cce4fe942d4998d1ab","tarball":"https://registry.npmjs.org/@material/button/-/button-14.0.0-canary.21e1cb9be.0.tgz","fileCount":40,"integrity":"sha512-YqoGUy7CCpeN4dt/vO6ud+tLc5e+BMrizvKK3jJtldToJZm7aFK2HBf3JUrjSRPsLuCAlNVZYQzePUcHUW5BOA==","signatures":[{"sig":"MEQCICQmmTQNKnqW1qi/O1t2ZbKucFKU6+1CsFFsZJrNJTjKAiA6yVBsI2psnGmIMvpudZsDF/NpY55pg6ItQzUQNR5L7Q==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":640112,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhuPNCCRA9TVsSAnZWagAA4JcP/RJ4d0PIeVUcQplL382g\n0RMsiV29pONKK2vgPB020UPl02mtApJvynMtamdScceGrl/sXcS1Q8kvybnc\nO/SqqZukivfktkjfzrfnGwmrPu7zcAVyY8CEPZbKlcJRr87TlByq1fqdZ6qv\n/wtMHRXffGI0RyCMmfVd4a7+OZKcN7nc/0A2GrleeG6Wbd0pXD725hyN7S1L\neoPPrWmPyaLNEvslyn5o7xmR4VJFLjRNkA+gX//Ojt8Fw4ITIi5eTzrxkLBy\nZdba3e8eknQEfPg+FivDfIkCXDIod18PPCgB7iJS4rnbr3wLcmCH+uE5w1LV\n6Wlc1j4GPTPBsT+PxboEUIahoB0ueTydWOg0Ee42ox1UABX8Xs3UeozxHdwe\n5r3PLZbP9T2UNLMcHnFcEZop1xcucsyJqh+vH2JwfkS4QGLRQbiUWpE1NjmZ\nZFP6ibRoyc57lVI43rIo/zZ/uGj4CwY8YvsRdXzxysRblQDHvWf9WRC657dm\nqzIhocb48dh5Ow5ds0tYCi2ftnjSJM/8XRt3PydljH4smvNUDYaSt9tRZqfw\nQSuVDxa5tEcTWa/G4H162aHZCaPloR/5I/xiVo14KdGwGW7EB3rLXmnqJtMo\n71pbsh14NLXSQu34AleIvVQKYw+5fnoGjBDkuKm0B3bP3ctQp4U5NxrJ/tDt\ncd02\r\n=4Lme\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button/styles\";\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nThe `mdc-button__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused button.\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.**\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n**Note: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.**\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button--icon-leading` | Optional. Styles a button with a leading icon.\n`mdc-button--icon-trailing` | Optional. Styles a button with a trailing icon.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n`mdc-button__focus-ring` | Recommended. Indicates the element which shows the high contrast mode focus ring styling.\n\n**Note: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommend always including it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color-or-map)` | If a color is passed, sets the default container fill color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`icon-color($color-or-map)` | If a color is passed, sets the default icon color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`ink-color($color-or-map)` | If a color is passed, sets the default ink color to the given color, and sets the icon color to the given color unless `icon-color` is also used. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color-or-map)` | If a color is passed, sets the default outline color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v14.18.2+x64 (linux)","description":"The Material Components for the web 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/density":"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/button_14.0.0-canary.21e1cb9be.0_1639510850347_0.7090795561479535","host":"s3://npm-registry-packages"}},"14.0.0-canary.ba78e8724.0":{"name":"@material/button","version":"14.0.0-canary.ba78e8724.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"44847dfbcd01274be3db9593d35e4774a7b9aa36","tarball":"https://registry.npmjs.org/@material/button/-/button-14.0.0-canary.ba78e8724.0.tgz","fileCount":40,"integrity":"sha512-s8dLMpThsHUzwEwc6ErTCODdTr5lE+3Z7uK5TUGSbp9rZp5RHyaH0JgzMSWiOF/hDyv6AJ/2V0fPBp2Z06RfHQ==","signatures":[{"sig":"MEYCIQC8QEMZstDjp5qrGTGAdjAE5sgTtYOuwdbmPi2STZQASwIhALu0dUPJHsLe/HozNbePAmk7ubotk7yjMQ11GCAvyRFs","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":640112,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhumiiCRA9TVsSAnZWagAAfXMP/00jp2kRRSZBtywombGS\n8yMRycbLDGs//aAMPhgTF71ej1aIs9RkaCyuLEV9VTd6vnkWOf5l94zg3r6X\nLboxmDwPAtuvp1Lsd9mM8z/oZECqaBNICOo1IfnALuv6zQSAu2ePTvP3HrRn\nkM5LV50zDDDuvtQpr3ZGd9WQeyh2vND1TaCs9585xOCrcXW7Kv6HW2sQ6WyG\nhz26HquKLYgI66Zd3xnFV0w/JzjEMQ9vthZnOmi9VUQ2AcIBXaSmh5zLQRsS\nRpkTl7uGfYiu4XKuOW1WzNDoS1QldDufUgo7Qiq5x24PftyePt+cSgxjRrER\nfuy/Ssgfeo5oz4APu/Pcpei+5vIc/JasSxQH1iBeTzVTqRzv2z6mga4vzNwJ\nK5GoUpm912ofHKiAmzikgW6S/XMZHo7zeeAuSVoanbZXoLLicnzjqMcZxwAt\nExOnWzDGnR1VJA/P4+jFGlf4YMfHDRDTWDpn/0KCQeJ2e8h30DC02JIq9A1P\nXWSSP/ZM3r9/5d3s67nk/KQCafAS7utWiiP78RaGeU93F5iNCCBrGP6CgjkO\napzytOOqqZdhqEV1uvDhBAvVY5sNYXgOYrCzYxxcyPbDNmH4D+e+pe+kd2uA\ne/99VBhJ8JsgiRXM09WEhDL+bJrQn9tLWgFQKUt/GaPfi178EpkAwWuTlUM0\nrW41\r\n=0Uyg\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button/styles\";\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nThe `mdc-button__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused button.\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.**\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n**Note: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.**\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button--icon-leading` | Optional. Styles a button with a leading icon.\n`mdc-button--icon-trailing` | Optional. Styles a button with a trailing icon.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n`mdc-button__focus-ring` | Recommended. Indicates the element which shows the high contrast mode focus ring styling.\n\n**Note: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommend always including it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color-or-map)` | If a color is passed, sets the default container fill color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`icon-color($color-or-map)` | If a color is passed, sets the default icon color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`ink-color($color-or-map)` | If a color is passed, sets the default ink color to the given color, and sets the icon color to the given color unless `icon-color` is also used. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color-or-map)` | If a color is passed, sets the default outline color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v14.18.2+x64 (linux)","description":"The Material Components for the web 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/density":"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/button_14.0.0-canary.ba78e8724.0_1639606434644_0.8167976663790466","host":"s3://npm-registry-packages"}},"14.0.0-canary.e3e073c00.0":{"name":"@material/button","version":"14.0.0-canary.e3e073c00.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"0b46704eb0376870a5d4e089a14890e655184bef","tarball":"https://registry.npmjs.org/@material/button/-/button-14.0.0-canary.e3e073c00.0.tgz","fileCount":40,"integrity":"sha512-b9FAPGKg9H9EObl/Aw/OafigUz4gLrwdEUO6AD+pnc3+6Vnl2wfmt/9TopqezMVQWyoUF9+ifevHlx6R26lSOw==","signatures":[{"sig":"MEUCIQC7RBWX+v6nm857bOF3y3OKDTsVR1XM3rS2Qo4lWIjR7QIgIVimcgzLYktMSd5l92h70f0BJhm1se5WOiJ5TdILueg=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":640112,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhwPFTCRA9TVsSAnZWagAA/O8P/jZ5ifQodd+JoUg2QDFN\n5MDSZVrFfhRuP9ePmY5pcltu9IfgZ3aDej23Q0azHUaS56W+9w/BmB7JHvZp\ncnAEGIOvUBiSVIOUK8eez2m1/C2d7BhZScOu+5/TzrainIT9rHym8I4fuNRS\nQdp5S3dvasfQC8vMFtIKgD7JAW8UF0bVZB+/cz40WlKHgPPefws3wNyMw74P\n3bmocT9PDkj4o+f0v5QZmXv/EvNYgn8pANEC4vp9Oq5ps8csGQVHj3HM5Kzn\nQ7EeMf+FQ7Yqyo3Kg52FZWRwcHffA9yG0xMFTzDsx8ZZCzPnitIqqxsu6rbR\nW2kxj9VzxSrmTGXGzzEMLR+QGVabhDzs6BhXHWdkL5XlVW03ZnixV4i0hcDR\nMF9d0O7O3AIvpy/X2ksLs2ljui/OM31WtbVVsBcRnAk09YQKDewOloDrduxy\nqoi8fuk6PYBaMme6NZZLhion8iG3FdUU4nvoOCu3MFLt+u7G58GG5I+AouMH\nVfp8pl9MYICdAvUA2mPd1TPiAKPXKzSmPFVmef6fQAdduWQbLSQCln6cHbuo\nvKMGaohny5Qd9Tgiu28wIooX742Mri4BPE9CJRW72W2O8m4ukjOUVTDFN/Bp\nvlyfY/esYWx0GeSDzlZlcnL/oA5YzfLKLHxq7NMH7pUnmLDcQdG4ou+5dZUT\n/mGH\r\n=sKwZ\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button/styles\";\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nThe `mdc-button__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused button.\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.**\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n**Note: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.**\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button--icon-leading` | Optional. Styles a button with a leading icon.\n`mdc-button--icon-trailing` | Optional. Styles a button with a trailing icon.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n`mdc-button__focus-ring` | Recommended. Indicates the element which shows the high contrast mode focus ring styling.\n\n**Note: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommend always including it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color-or-map)` | If a color is passed, sets the default container fill color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`icon-color($color-or-map)` | If a color is passed, sets the default icon color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`ink-color($color-or-map)` | If a color is passed, sets the default ink color to the given color, and sets the icon color to the given color unless `icon-color` is also used. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color-or-map)` | If a color is passed, sets the default outline color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v14.18.2+x64 (linux)","description":"The Material Components for the web 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/density":"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/button_14.0.0-canary.e3e073c00.0_1640034642994_0.8002090839033942","host":"s3://npm-registry-packages"}},"14.0.0-canary.3366a71d7.0":{"name":"@material/button","version":"14.0.0-canary.3366a71d7.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"67f6fe50edca557bd319a5735cfdf7ba7ef047d0","tarball":"https://registry.npmjs.org/@material/button/-/button-14.0.0-canary.3366a71d7.0.tgz","fileCount":40,"integrity":"sha512-+XwAZmUdHaohlJonmS9slKURRYD7f1PmZlo9I7geb3JotExlYX5YFE75xhOm0tT+kdKA2Dn4i6dFWHlqJTEalQ==","signatures":[{"sig":"MEUCIFIBwxV9J96mf3ulVgTsG5qvVs1dSf5rhklhfBFtBfg/AiEAgCoK2mtWwvUHKHRHzh5MeT/aiH6DzBt6UKxw9VALl28=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":640112,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhwxsTCRA9TVsSAnZWagAAvIMP/17F5D/m8Yd8qrzk4otw\nmmrHvMCpZAw8Lk4xB/uZEaQnbw/VhMQGp+/1Eknh945LVOa9J1mtBRFsZqq4\nqlOoz8cNXEszYHdPGHFOuSCUU+NSjm+C+PDIDLSfqAuQvdvjQjDp6g66AZeS\ntV27JnziClkv6w2f1+uHVFq9zLtCxrOg51SQ6YUn3MbeAnpKkhZiOPGI5uFS\nG7RsliZavFgjtasoLXHI0dmSzxpEn/H/9UsG8ISt7HtWuSv+vD9AdH8+B1b9\nBWFl1X+p6hmPhkB54UHI9CdI0XwOsypq2BR3SftqJay9pctGdCJ7BjBbxd/d\njQFhHtFb5/YcdqUOq/q5ahyD+84oWxiPMnW/cgtBdm5FXzMxqbTUkOOXmRzW\nqT7hcgN8pU/x6+CUZpFlndWvrI+a1J4e4YpO4epZbQHhLjvSJ6ijB5Q1yUpM\npoNtOXKP4iuNS0qJYviJoEk7Q2m9h4CI5u3dnOmMvxXJCex5BvSESZ7TZjsU\nOjVRmu3s3RiPcPDL/DUYpgMoPaMHjTxHD0hH/jdNJlediuFErRpV+CPUYBbn\njQrLYgFaNsDQnMqP7+IQnXEeM4/1jHocDfX4wftBHJ6ewXzq3Kjb8U9KrDuL\nLPaa0iPxiNFnnjVCEbqrruMjFrCXccGdrur5JgXZfXFZO7PJlQlSAhLMxJQf\njqqC\r\n=81+C\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button/styles\";\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nThe `mdc-button__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused button.\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.**\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n**Note: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.**\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button--icon-leading` | Optional. Styles a button with a leading icon.\n`mdc-button--icon-trailing` | Optional. Styles a button with a trailing icon.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n`mdc-button__focus-ring` | Recommended. Indicates the element which shows the high contrast mode focus ring styling.\n\n**Note: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommend always including it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color-or-map)` | If a color is passed, sets the default container fill color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`icon-color($color-or-map)` | If a color is passed, sets the default icon color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`ink-color($color-or-map)` | If a color is passed, sets the default ink color to the given color, and sets the icon color to the given color unless `icon-color` is also used. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color-or-map)` | If a color is passed, sets the default outline color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v14.18.2+x64 (linux)","description":"The Material Components for the web 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/density":"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/button_14.0.0-canary.3366a71d7.0_1640176403693_0.10054562879904694","host":"s3://npm-registry-packages"}},"14.0.0-canary.c047f7c19.0":{"name":"@material/button","version":"14.0.0-canary.c047f7c19.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"ef3619074c3a37c5ebff75fd09defe427435a378","tarball":"https://registry.npmjs.org/@material/button/-/button-14.0.0-canary.c047f7c19.0.tgz","fileCount":40,"integrity":"sha512-SlOzp1kXxykeuZii8K6csUMufKMERXNjJ6nkCQWRtuU0o0nSzotWjo5vQv63OdzSO2PmqBBbF4H6gBp8Q2y3NA==","signatures":[{"sig":"MEQCIGIfDEjcecW2m6m0YtjbEMxH5eAkAB82hsRzaf4b6+a2AiBLJ6qOFA+WVuv3FjxXD8kzwscYYKJp42sCqnSkXA0OQg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":640112,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh1ct7CRA9TVsSAnZWagAAM9IP/21YXt6RnL84R0W1ImiA\nO29ACdbHQMCPxErppciB8hhvfCCRUmFE6NYlOGfdhWeljSjfsmt9KDxAd3jg\n4+3yuRGGXsiVgKPpl9T1yP78Rq2uPwD+bcCiI23vHUHfw5iXPeYv+TtVAbzj\nSMGaiGQRn3RbfM3Zve8g1iOmtAZtcdOKlpFtO6uysQL8O7a2v5qryc/1fCJl\nxufvDPBjNYSqVhzlYMb/ojA5AeqFuB237++1gMrS7debDTXAfbvOfEyaW3BI\nFZYBb4HznRzwz9LZMT/dZzOWFY9CFeLr9r8cg9SLW2xHd8DJSnqvn596+Aow\ntbpXZ1Xssumk2bKjLRi6fnIZxPtvyeCQ8lsEuGbU3Wm1bhA4TG/mCfImrhF8\njUb23a6OAZS2l4/6gku1l1B4I49BkFr7DriZIR0E5DKRQrTMDa2P4ntbY393\nAKGV3pudeYcOV70NS9VvC/jFeSnRgP4WtjwVyDHLiYr6c8bg35N/zGplMsAK\n3N87iG+/zLYoc/Zw/MJqDI0QRPwSvEF+XpitoERX+muIzjNcpJJH9CaTHM7Q\nguAkDSNLrhJH/6OOCCPsYYlbGRCMHp1pWC/oQfyFP7YdiGhjoFie3eLIwSQ0\n4hmknYKUJnW9feOX5SPFlN2iitlDOupss7VEAnF1897YjO8Dcm2jeizhkW0f\nU498\r\n=i+ez\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button/styles\";\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nThe `mdc-button__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused button.\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.**\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n**Note: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.**\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button--icon-leading` | Optional. Styles a button with a leading icon.\n`mdc-button--icon-trailing` | Optional. Styles a button with a trailing icon.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n`mdc-button__focus-ring` | Recommended. Indicates the element which shows the high contrast mode focus ring styling.\n\n**Note: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommend always including it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color-or-map)` | If a color is passed, sets the default container fill color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`icon-color($color-or-map)` | If a color is passed, sets the default icon color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`ink-color($color-or-map)` | If a color is passed, sets the default ink color to the given color, and sets the icon color to the given color unless `icon-color` is also used. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color-or-map)` | If a color is passed, sets the default outline color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v14.18.2+x64 (linux)","description":"The Material Components for the web 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/density":"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/button_14.0.0-canary.c047f7c19.0_1641401211298_0.05910537400019722","host":"s3://npm-registry-packages"}},"14.0.0-canary.05db65ec0.0":{"name":"@material/button","version":"14.0.0-canary.05db65ec0.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"e3c02ca807fe01d2904681955448ec91f7c1d864","tarball":"https://registry.npmjs.org/@material/button/-/button-14.0.0-canary.05db65ec0.0.tgz","fileCount":40,"integrity":"sha512-kjZ8hWr/LVAWpy21DWcwrY85/zRFRfQ5dE2gllCqAnarbxKwuKXdD009+/SZl7SVDtlP9VD7NKtLPl3K8iIvrw==","signatures":[{"sig":"MEQCIGY1w6sNy4ym2JsMa3dn0NfRmg2FlY0N9TlARl7kaTuFAiBVpYxiItd6ZjUkVWFsnk6yrNgVgWpXTslJ9L3VMrUtjw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":640112,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh1yOdCRA9TVsSAnZWagAAKUkP/3uDv0zJfiMVpbg8Tpah\nI7F+xvcgQcMO2L0LK4PG2YJG/XVz+3QefM+T57ecv20CiydE0KiRD+/0kuE4\n5IzFU3PqVOtM1CnKu10JsjcATza1ju39h2QJ9RvHvqxQw+nyhBtvyBGKG9mh\nshNngafn9k+vg+oqld/Zyy8aRYkJMjgoX3skoZD8qczq/9glF30MgKfEsbva\nSrGKdyUcerBMNqhel5Y8a3UIiWNkdP7GtOXQLrCpPFqzisjFUeiiLxq5WJ02\nEaUZQp8ZNcsfRh2+xYbNwyATnyKxR+IhPzH5cELzWn0LVM5HSdOz2wiAVxfJ\nHPH8lfTqjtMPgcMGUsxw3dkoSJYTJoLaedGllyI5gH3djpde030RtBAxaKJG\nmJN8c/a1g9YWbMU4sWxCveaPyGWBCCWT55GsILg3eDZv4K36C7BarXnX/ILT\nb5dGlrjEjC3A/z6gjKdG4OnC7599vC2tcQ31InR1nVGq/7DP8PnRo5u75xQH\ny2Xyh12UetvQ4nJe6vFHi7SPdeQwkR7IswJmh0rKPy4iLiy+Wwh8oqW2o92X\nDrJ5YWU/Lcls2tHd7cZzT+JedLd+otcsIscaku3/R7NnNRVYDyo0CVvB6Jw6\n1Z0j/CUmm1fP6rbFFrp+RozDCO265R8B5YD9TMUwsuJCuwfxub3+N3TZMyBC\nyWzw\r\n=YHgn\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button/styles\";\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nThe `mdc-button__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused button.\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.**\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n**Note: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.**\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button--icon-leading` | Optional. Styles a button with a leading icon.\n`mdc-button--icon-trailing` | Optional. Styles a button with a trailing icon.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n`mdc-button__focus-ring` | Recommended. Indicates the element which shows the high contrast mode focus ring styling.\n\n**Note: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommend always including it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color-or-map)` | If a color is passed, sets the default container fill color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`icon-color($color-or-map)` | If a color is passed, sets the default icon color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`ink-color($color-or-map)` | If a color is passed, sets the default ink color to the given color, and sets the icon color to the given color unless `icon-color` is also used. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color-or-map)` | If a color is passed, sets the default outline color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v14.18.2+x64 (linux)","description":"The Material Components for the web 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/density":"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/button_14.0.0-canary.05db65ec0.0_1641489308792_0.8897125402233774","host":"s3://npm-registry-packages"}},"14.0.0-canary.6ca8b8f85.0":{"name":"@material/button","version":"14.0.0-canary.6ca8b8f85.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"111ef54b853464dc52bae5569a77259d48500663","tarball":"https://registry.npmjs.org/@material/button/-/button-14.0.0-canary.6ca8b8f85.0.tgz","fileCount":40,"integrity":"sha512-XT8ysHVqNWOkOs+nJytYu+57JXQfL2Dk9tziKapTCT6h2ovNzuKua7HcUjMdP5k98UnDS9wGZsLK2tx7bWZGZg==","signatures":[{"sig":"MEQCIHN6a9AlNI3df44V12LouFvcaUhrEWHZOkqjilZ21jesAiBXp9ov8wWBaTW8oXbNc3kc6RZ9K1Ivhp/UY7FvGTpgwA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":640112,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh2GQICRA9TVsSAnZWagAAK1cQAJ10ge+1uQOL207luK2b\nXqpOVXleGqQ6/IkbOc+KxopiGh+RWTQo38Nx/bjskxm5xjeK5uukn3cIZPwT\nVFIeROCndoelNUjvj9vLZpN20/erLeOp3qhOc8i+sYrORlCd7SQBybHN/slW\n9+hCsi0toWNjb4+6P0IlsaVj0tTEJQWV9zaL/o+oqHSkBLkXUuGF/0VGchid\n5xCH9UuaiKVaQXt5yOASG3RZzJlYgEHVa9iE6EUWpXTwnodnqKV8e7Rg9//X\nM7LzXnxtOBza+tNd+hP5mDWvb5ZcGoT5sogujBv8oZKKOUDDI4GVW3/duVfX\nmnKq+pCZ659ba0nqN7gFBaW+1rikr87VyW5zT/9419HeW1H+D7Pz6EwQIdQU\n/HePTA0aPboryrhDrGmHYHBjRfhJUy/lnkZkH/XvWeGagQF5aktE7n6OPEnS\n7efITwCaOnAl+cJp2nD5UqRk3c5kUo7S2S+vX2p+RP18c/xjuuAKgFc3q835\nwq3ocOLbUqQe+3ANinDAquhYUyqSH4p/48FiNdJO/qKPd956ikO7Ruv8/i6k\n9t1c7IQUGzD0JMna+k3KRqU+agV9Krl1zMAT4xrl4kzZwNuad2f0iqdypj8Q\neeTx8b0aS7ELkn9pDwuAX+XqXOrHSZsj5qATJtLXRIM+1q7vJyfY+a5aYUV0\nugyT\r\n=chAZ\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button/styles\";\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nThe `mdc-button__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused button.\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.**\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n**Note: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.**\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button--icon-leading` | Optional. Styles a button with a leading icon.\n`mdc-button--icon-trailing` | Optional. Styles a button with a trailing icon.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n`mdc-button__focus-ring` | Recommended. Indicates the element which shows the high contrast mode focus ring styling.\n\n**Note: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommend always including it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color-or-map)` | If a color is passed, sets the default container fill color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`icon-color($color-or-map)` | If a color is passed, sets the default icon color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`ink-color($color-or-map)` | If a color is passed, sets the default ink color to the given color, and sets the icon color to the given color unless `icon-color` is also used. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color-or-map)` | If a color is passed, sets the default outline color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v14.18.2+x64 (linux)","description":"The Material Components for the web 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/density":"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/button_14.0.0-canary.6ca8b8f85.0_1641571336385_0.6227216384117578","host":"s3://npm-registry-packages"}},"14.0.0-canary.173ee7a7a.0":{"name":"@material/button","version":"14.0.0-canary.173ee7a7a.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"e766a3c254df11c1a4bb2a184f4af7fb06fb3c06","tarball":"https://registry.npmjs.org/@material/button/-/button-14.0.0-canary.173ee7a7a.0.tgz","fileCount":40,"integrity":"sha512-x64+SYhkMLMhkczWjy5Nux6wYb0b5rJ/akXO2RznBE5aNpct2wf/mRuJXtRKQf/wQfl1hH6rd8zRTB86gTb2Cw==","signatures":[{"sig":"MEUCIQCcUh3YvTraYOiSRyJIzAQGrJlosh1MEe5IhIYIMIy3JQIgXPEuIYd4nowSYwyPhuy6SEyKLhTlHdKBjM7VmVp+bWs=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":640112,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh3GT6CRA9TVsSAnZWagAAMOcQAI82b47QzRxD8Ie8VTqg\n8+F+R0VivVajNdUhHgFtrnWkBT1yw9PHHD+OMyafnbnYVdKQroSeEA+U5qMy\nNWpiroKsUDiK/Ju8ifteUFjZosDGitkynNJcRS4piURLc9fjacahfu7zogTd\nF4PdtglQoOWwCRbNZnJkHLyKrlvmz7CM60IQk/Wpr3zJ5hAJBjCQEG2oJcXa\nswtCTUeGpM8c/rbJCkPTlcCidn4/OrXRDwNqjG65CqbkEqo9X3zqFi7207af\nNeKZ5PkoQw5dseYg0uEA8s0XQimKi9C1vXTvFRrkumwJCx/J7aScE3rBZsnt\ni44kic7+k1oZmN736Yuw0qyhArS2K2AS9O33izcs9zyoEee04bHs1sSUnPE7\nu0l5DCatJQNLa4f07cwcUUFsUK4PP21BlizHwLVtYgL/X+ZBAsqYB4B57qKm\nmDg4Rrdm+BN3KpAoIg3PaQs8raoULPMYYCA/9YMGab5UBcp0kZqppL8xdlDv\nytdgm3GequN7i+Xw/KCRKG8AtV3RoTQD6rbShsYgvmVmDXQ0sHLGE8vBehQD\nTboftufeNqCSTQMRQjGqcsyAOh+8B5FnGLwgRynVC5cXzoXF4O1+qGpugU6b\n2n32z2S1XJXZxnbO+V2tyBTOIhHTUuEupL3TId/Yed2brlzBSbI0ETeYkL9y\nhkQF\r\n=iHTX\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button/styles\";\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nThe `mdc-button__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused button.\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.**\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n**Note: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.**\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button--icon-leading` | Optional. Styles a button with a leading icon.\n`mdc-button--icon-trailing` | Optional. Styles a button with a trailing icon.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n`mdc-button__focus-ring` | Recommended. Indicates the element which shows the high contrast mode focus ring styling.\n\n**Note: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommend always including it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color-or-map)` | If a color is passed, sets the default container fill color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`icon-color($color-or-map)` | If a color is passed, sets the default icon color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`ink-color($color-or-map)` | If a color is passed, sets the default ink color to the given color, and sets the icon color to the given color unless `icon-color` is also used. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color-or-map)` | If a color is passed, sets the default outline color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v14.18.2+x64 (linux)","description":"The Material Components for the web 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/density":"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/button_14.0.0-canary.173ee7a7a.0_1641833722712_0.10849769672323029","host":"s3://npm-registry-packages"}},"14.0.0-canary.b704e4dfc.0":{"name":"@material/button","version":"14.0.0-canary.b704e4dfc.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"db82fe55b27fe47ae9a9123f002c05bb13e28569","tarball":"https://registry.npmjs.org/@material/button/-/button-14.0.0-canary.b704e4dfc.0.tgz","fileCount":40,"integrity":"sha512-iB9bwR87I6xN5j4e238mKLbyuQoQOpObgBHNdFuvKGSwuJSaA2+Z8HAgMDzh8eAoEutYpuAkWv2erkuGkJNqhw==","signatures":[{"sig":"MEYCIQCZRGd/RJR23KwgjxwRSR5PAfICwaHbN1cpCfTv5BIDlgIhAJj//uUEGz4y39Q+BA3ce3advwqSfXWZyWKKTmcjWOMH","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":640112,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh3HwVCRA9TVsSAnZWagAA/HwP/jZa5JUGyzjHNa21W/V7\nyQPS81zDBXru8nxLOI3q15yH+Zy8/FkYZngZqxmbg8yjM6UQ7T8kg2v8mM8l\n834X+TJCx8dddBEMuYslDg8peF2DpakVko34acLAsX+EMmnD4vWKlixG3MbI\nc/kYWebMeqdzjcUQCcWVPPDl5O5x4+KCtOP7KT0AIxCO00sZRMZ8Es1kNyvN\nxRl1HRmGgviJsiPF9h/0rly7Oylu1ADGzexlINR8qonyfzXoc6OtCygTxRxG\nmVAQIL4r5b1sm/wVk3sFe9svKdOSBn/CNAjuBgBIEimHCJINGCBX/HWJ0xns\nY/unVn+SlNDE6iEWD2DX+L6/2ldiifox8+yzeG0vW8cQ5djf2Ru2NMcAmGbN\nFzj7rpzYTKN+pH5NeDkoM6XFdzNY9c6BplNa9LvIvMflfqS0ZRFnYDvM9RJ5\nWw80tLz/E8Yggc8rjW4tHusnjnSZ7d4tYTBvCe4s4ir/ltYg1ftKh7nEAzKu\n15wyVctf7DhefUB02gQboB1wZOLQIwxUQ9bmJc90DiQovkPmWw/5Gx5aX6eh\nw7tO+vr44hqUzr54274VuAeYZmIXmOzrwDTO2rfB86Qsrag3+BJBwdrvttxL\nEUwT+oMmm+ysVkupjMEgGc5TbyTOaP7KSJ9QLVyOmNa4z5kBsrPzYEIBUctd\n/RDW\r\n=7tkR\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button/styles\";\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nThe `mdc-button__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused button.\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.**\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n**Note: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.**\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button--icon-leading` | Optional. Styles a button with a leading icon.\n`mdc-button--icon-trailing` | Optional. Styles a button with a trailing icon.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n`mdc-button__focus-ring` | Recommended. Indicates the element which shows the high contrast mode focus ring styling.\n\n**Note: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommend always including it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color-or-map)` | If a color is passed, sets the default container fill color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`icon-color($color-or-map)` | If a color is passed, sets the default icon color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`ink-color($color-or-map)` | If a color is passed, sets the default ink color to the given color, and sets the icon color to the given color unless `icon-color` is also used. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color-or-map)` | If a color is passed, sets the default outline color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v14.18.2+x64 (linux)","description":"The Material Components for the web 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/density":"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/button_14.0.0-canary.b704e4dfc.0_1641839636823_0.4437260184013845","host":"s3://npm-registry-packages"}},"14.0.0-canary.c14e977ee.0":{"name":"@material/button","version":"14.0.0-canary.c14e977ee.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"2a1eba702876ad2bedc87921ad800e2721eb1240","tarball":"https://registry.npmjs.org/@material/button/-/button-14.0.0-canary.c14e977ee.0.tgz","fileCount":40,"integrity":"sha512-Yp46s1tClLQ5RhRECNIepAmNmg3iMQYKvpfKPBzwL3JPQrPIH2sy/YkDOUaJs8BDgjppIJa/lwWMDltK52FKPA==","signatures":[{"sig":"MEUCIDXcKUGioCitOUIDL1J/gQaMdB8ZLyN/YJ4ihldie3rCAiEAkOhFEn+qF9PAVSw/5Owr+OQxnOj7bF4D22OiDndv/MI=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":639542,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh3adSCRA9TVsSAnZWagAA8r0P/2aCNbWOQWMVV0q+0NIy\nDC/NfpKiYkmWOtrbv+0o7H0EG4Rm1azQXpN2NPCx0M65Yn6bAMIq8q0OiEge\nuHTmFOpCO0x2zRakWJVys/r3chDp7lCEV4CHIncVlXDx+Iv2gJh1SEkKLGaf\nH0/SUjLggnZ0DZRRP0drLzKPcdt8uK8iNmKz7Xp5GgyPyENEttKX53Y4s7CH\ntOs+i3e4EQwxXGvhe9eaAenjBfPEJRAe9dYxPdA/rs0/VtcXvXo5IULyd48r\nHB6YE6Y5NC8EHWfYFt3/NZk+o/TwV18NZs8oYVhGtjky2dtBN19jP5L6x8ms\ngQpMGMU3r405bZULF084RC5n2W8v6enxpprpaAWinHkppeKQSrq8aGf5HqWv\nIZ6+NIt2A2g58BR7/UpN9lMnBSfe3kzMlEAED1KKrf43wRECtJ5fF+A9DcFh\nsWx5s95QGXguBCd9YSnje+5tj8JG3ZUPKLOdCNrgu6nJf6rKgvXCG21wMml7\n2G0DV/f1bheiclmYRtzrnIA4tytopNska5mAK5o/3aSpCqVugok15V1AsfkX\n/x+Av3jWfxywvWJocpGI1HY9IsLwELQAEHLzyhqi3GPQghaZTp9Aoes+r/EF\n8fYS1Ljyr3R43/vfmrZUxNzG5bjMs95OKc6E5qVW7g4uhawzQy6bVqBuw5mj\nCrpw\r\n=8juT\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button/styles\";\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nThe `mdc-button__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused button.\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.**\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n**Note: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.**\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button--icon-leading` | Optional. Styles a button with a leading icon.\n`mdc-button--icon-trailing` | Optional. Styles a button with a trailing icon.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n`mdc-button__focus-ring` | Recommended. Indicates the element which shows the high contrast mode focus ring styling.\n\n**Note: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommend always including it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color-or-map)` | If a color is passed, sets the default container fill color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`icon-color($color-or-map)` | If a color is passed, sets the default icon color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`ink-color($color-or-map)` | If a color is passed, sets the default ink color to the given color, and sets the icon color to the given color unless `icon-color` is also used. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color-or-map)` | If a color is passed, sets the default outline color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v14.18.2+x64 (linux)","description":"The Material Components for the web 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/density":"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/button_14.0.0-canary.c14e977ee.0_1641916241742_0.8664993825350562","host":"s3://npm-registry-packages"}},"14.0.0-canary.b094eaa4e.0":{"name":"@material/button","version":"14.0.0-canary.b094eaa4e.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"9a64f7655f77e4ff534030bb0467a207a55f7214","tarball":"https://registry.npmjs.org/@material/button/-/button-14.0.0-canary.b094eaa4e.0.tgz","fileCount":40,"integrity":"sha512-SNKbAPxjvz9lkR+TuVXBQ9R8Rp2Fw+CLLszASq9SnVAg15VP/+1VPEtLF7fYurk8CxUifj1uvSf7YmS15QrOfw==","signatures":[{"sig":"MEYCIQDlZ1/b8/8X2WNBDf1DFz3YVpbxBFzzJbxtcro/An/jtQIhAOY0lnEmSU5RCSejT41pytt8GW/KlmGdGyR54ELllmKi","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":639542,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh4cROCRA9TVsSAnZWagAAOWcQAIzZ+GZ91UbYJiQ3PUvw\nF4YkRaCyylx0XqKEPxUgTaITWqNi/YoxzYQ8lsDb25BFdo+OFQ9P+MSVuG9T\ngzHhMsim/AA746EBeESMR6xzuPEEjpwso1c056sefu6kCVu2jQ78M3NouExv\nxHWCwK47xTRQQgWbzWU8pXOPmOlbc1HJeZg8ZpNkW2snIRJHJG+KnJJbztiB\nFWwqbgw2eAeaSI9K83dKEAobVxZ3q2fpA2Ck4MomSf7DW3AsZo8UEwmlgB+W\nQqIo1hpUoQWpmGslYA9KNjiH/lCmCdvRBUEI9MoaIncbnXijYcIlv6XXOiqO\nnIktrY89nYlsYNtmnOM0HMcdNN9z43nFEvW+DZyFb+8rAInRvG2iHz0cJLYK\n6fft4E3yo7JIU6YzmlywuvDQWYS22Yg1NVcoRxURiQbAjf2PV7Ho9frCL/LD\nyGxBnF3BvZZu0t3uIOpSaYeHr2GFgdOwXyyUHydLXOmAN+W6R7/yTQjzmnva\nIVRsfO1hn22d3lcYuwKDiZDCCKbKMRVH1kqBZAmB7T624YvWLTY+UbqsqdCU\nBDB/H88hC9pLm1zU+DHHKcvq2x7IRFI5IigJTcwSsFdGdHA5RXO+pX+B+DGa\nSj60qGdnG+Pc0mn7F1t5G9HWtkdCKU4xEtT7UyPK776bX8g72kHALtRIs4vJ\n8rPB\r\n=y6f+\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button/styles\";\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nThe `mdc-button__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused button.\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.**\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n**Note: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.**\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button--icon-leading` | Optional. Styles a button with a leading icon.\n`mdc-button--icon-trailing` | Optional. Styles a button with a trailing icon.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n`mdc-button__focus-ring` | Recommended. Indicates the element which shows the high contrast mode focus ring styling.\n\n**Note: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommend always including it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color-or-map)` | If a color is passed, sets the default container fill color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`icon-color($color-or-map)` | If a color is passed, sets the default icon color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`ink-color($color-or-map)` | If a color is passed, sets the default ink color to the given color, and sets the icon color to the given color unless `icon-color` is also used. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color-or-map)` | If a color is passed, sets the default outline color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v14.18.3+x64 (linux)","description":"The Material Components for the web 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/density":"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/button_14.0.0-canary.b094eaa4e.0_1642185806752_0.8442063721489139","host":"s3://npm-registry-packages"}},"14.0.0-canary.390220e42.0":{"name":"@material/button","version":"14.0.0-canary.390220e42.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"ea2684ffcacb7a3e9ea65d182bd9c691c6516c3f","tarball":"https://registry.npmjs.org/@material/button/-/button-14.0.0-canary.390220e42.0.tgz","fileCount":40,"integrity":"sha512-/T8EtLC3o9tooPcBj6YM/5Gus1KsDgt5hsfqc2MJ2Zjb05PS6q7gyXo8qVBjJT/KO5YWabt74q+sOCsC1sxStg==","signatures":[{"sig":"MEUCIGbovfPp0Xubm/05FCwtn9gk13q4jDgQ5QboSRm4zVY5AiEAt+5vHltQPtV0tGzvobshMrpHE7j5N3ygPeF4uDbauao=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":639542,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh5Z2QCRA9TVsSAnZWagAAk5QQAIWiwbWvqShtylGYnUwl\nedmcKrjc3WlF2TAAfgQM4zPTCxf7RPNErEtgC2XwbQ2ztrP8PZlg9AnPq35o\njP4DUH+aH3mFcaqS2TW53ftdJqSDON8xB9qKK4kyZithGon8i3/M+3knQC9w\n/xNbg/dgjITAuqfWWoy1ieQqboql2r8akIzLXRxkD8jelYzSZHmpbHE6+MKn\nH/reGbtVlJ+JDxJ83ZFoHft6Zx2o+UBFzhOfDsbemE82k3p/4LpceqZgrWys\nC47cbsG1ur5gt7HlgzJDIA1PPhutQaZ4XcsXbfoVsg9u2hVggNF66umz1E29\npwgMcUMSIMiSjvg+LFDMFUxXKo+fU5/xkpq6LL+dpFcK2KbZZ0CFkDyixAIH\n1qcKl15/m9yY+8OMtCxSNLlbHd93HzY0eP8UWfJTHDD9PhsX/eq4QDHVzZ7n\nb5jorYHqQcnHEfl6vC6RWO0ec0aFtekzv2ouQJeWpAzIts77tcWr6AnHm/IF\nIUURAM8l2REqjaKJtLzROj7NJGZNCoyeWm/2tQl5pT4I0JOwo8DygyD+tRvD\nb84IJQnyViKCEt6Vhd/ZEacPAo2dKLpP6QHxHPTTeoL+5N5MmeMinwMIUbfB\n783fuMEfsc26pYOZHCQc/gqVOaKJsbVYm8v2RqfUxDWptRnD+sRfqF7kHiSA\nA29R\r\n=iUup\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button/styles\";\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nThe `mdc-button__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused button.\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.**\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n**Note: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.**\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button--icon-leading` | Optional. Styles a button with a leading icon.\n`mdc-button--icon-trailing` | Optional. Styles a button with a trailing icon.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n`mdc-button__focus-ring` | Recommended. Indicates the element which shows the high contrast mode focus ring styling.\n\n**Note: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommend always including it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color-or-map)` | If a color is passed, sets the default container fill color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`icon-color($color-or-map)` | If a color is passed, sets the default icon color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`ink-color($color-or-map)` | If a color is passed, sets the default ink color to the given color, and sets the icon color to the given color unless `icon-color` is also used. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color-or-map)` | If a color is passed, sets the default outline color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v14.18.3+x64 (linux)","description":"The Material Components for the web 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/density":"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/button_14.0.0-canary.390220e42.0_1642438032646_0.8663228623686992","host":"s3://npm-registry-packages"}},"14.0.0-canary.4b5391f8b.0":{"name":"@material/button","version":"14.0.0-canary.4b5391f8b.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"6772dfb684312fb3b76da9e5f588942c6c2e6e5e","tarball":"https://registry.npmjs.org/@material/button/-/button-14.0.0-canary.4b5391f8b.0.tgz","fileCount":40,"integrity":"sha512-kFW/mrsnr/Mg/jQtSVALU7ZViZcIT2pO29RXeIXyokbfHpXmtZw1fVPainw2lBuImb/28NMOk30J705kMVayOA==","signatures":[{"sig":"MEQCIGnzB91wg3gJNZNMb0XOoOBBqTWpB3KI/Gi9NnApJJZpAiBcOY/7yBzhEeEX0JkHvcI4kY3CLSE70PUiGLF89biFCg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":639542,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh6KSFCRA9TVsSAnZWagAAMkgQAJONk7gJHTAVBRGjmP4J\nIJEBVqmiRkniFK9R3uxz0buSzP3vlQ+X/BeXH1p739IXTo4cCjeqczOpzCV0\nu7txBOMWRdJUDPPxbTzhrbjboI7BN/mvo0ll/75GdgPk2mkP1nbO4zEbhGCf\nFQ2/vQt4FgUdAdRAgWxj8bQuZBon8SMSoMFxQztKtK+AXnjCFO+bEBSW9TT8\nNrPGkBWed5dWda0vNpn2VgKpcEgI7Pck/UUE5Ty/9uYE76YCOVDlR8slzGxH\nddQ+RJHaXDGABVw01nUYPQ0xxTeGMHctmHrxnLaXOnBiC9QMZujPdEhAMJ/T\n3IXYDY4a3JQ67oYTasv3KexsHoNJrlYXonWo7thD6TVmKgaRyGyxZ0vzG3bK\nhh94UPvLR1NUHlLseMuG8qYPlSbgCiGp+w+L9siPsZ3R1uYBJK6EXXnCge+b\nHByHKIyNlAqj2Qja5MgkRfGtRBDoG5tujAbfiDBu0bpS+qS/qXyXZUVd+yvn\nb3RoKXL9r3yNlwdYkeeK7xbDXeOIICNwTDCXSmt4QDY+xFmchomx53KDM99A\niZBV7ob6nQOMDXVQsZHxKjHv3apL1Srhz0bJlylxsxw00JxmvKaq0u2dSBe+\n+SynrWcn/IBFziFvEWLgX1++nDo1J0zX4uHCIYtKq1xwZC1VwYSro3ZUV/GF\n+JZj\r\n=qf39\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button/styles\";\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nThe `mdc-button__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused button.\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.**\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n**Note: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.**\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button--icon-leading` | Optional. Styles a button with a leading icon.\n`mdc-button--icon-trailing` | Optional. Styles a button with a trailing icon.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n`mdc-button__focus-ring` | Recommended. Indicates the element which shows the high contrast mode focus ring styling.\n\n**Note: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommend always including it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color-or-map)` | If a color is passed, sets the default container fill color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`icon-color($color-or-map)` | If a color is passed, sets the default icon color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`ink-color($color-or-map)` | If a color is passed, sets the default ink color to the given color, and sets the icon color to the given color unless `icon-color` is also used. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color-or-map)` | If a color is passed, sets the default outline color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v14.18.3+x64 (linux)","description":"The Material Components for the web 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/density":"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/button_14.0.0-canary.4b5391f8b.0_1642636420811_0.15701799263554483","host":"s3://npm-registry-packages"}},"14.0.0-canary.cef6bc623.0":{"name":"@material/button","version":"14.0.0-canary.cef6bc623.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"823adecbde4b762d033dc8aab338f25ea3d34a46","tarball":"https://registry.npmjs.org/@material/button/-/button-14.0.0-canary.cef6bc623.0.tgz","fileCount":40,"integrity":"sha512-vZUaX1zT91l6J/ha+rWTxdV1eLxxzmnIcQHT/gzzpTLVD4oQkLIq+dHJbZPh9H7LeZ9Syge9gITb/Cpz8HT1NQ==","signatures":[{"sig":"MEUCIGqaW/i/4pGQWaLignqwjlvM3bDttgpWqh9wdMShFdg+AiEAg2UQNpKeeQfIR0raJygnEVPEhvyUE2b1pN1FTvHF6R8=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":639542,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh6KpXCRA9TVsSAnZWagAA6+gP/A2ZOKZdT8eZ5AG9XRWm\ncEfA2OlFSaCq8wZVAZuzPHx7CguOVj4IcchcIAInz+e5cUavaBI5HNYe+kDI\nFmJY/H1KAKBTNhm07g/rocGH9n7d9FdHlTFY61Bfp1Lw49izCGY1RzUjUB7F\nBR5F5u1QIy7wIGBGf0WcwBMqYEbYxvLUPDZ9vSGWeT13FkD+ihUgtLYvhhxD\nUz0h6L2kxElXvJVq3L7ld+pfNCqkPLxO3nmR7FvfBXAKrwUJB23n04d31SB/\ntncEGL/UDy1R6iB00voLBZrEI0xk+BzDzUhyY8FhFr3lsWYp/j/zTTzeA54p\nHFMSyScGqdRB0Hnupv4+PZWPYID4h8MEjyMDfKHQL97gpj9un/gnrWmVfXoi\nMtz2UjjZEQVlP+bpQzxZWryoyaewM58+cnSNGTRP4TqudHJAIAOEuDQJGgj5\nk5Z7A9k7Oaw+NjYW2hLW1JkCTCorzMAlaRGdhHUfFHlxb1G497aeTFsQpiCu\n/5ElZZtH3WYIuFeeDsc0/nm0c8DZ/AjzoiVhFRe5kkfbhV+G9J0ZcfOQzybt\ntRDxN7QDecuoFjEu5As/6vbc+wZxzSaN6nAeQQEDIPVZrebhapYLOj2/qvCH\n28VMuRWRhFioO1+RtW+oiGTwXm+mA9gnJuLVnOeM+eVm4MwNo/FSo32TYqYz\nFFv5\r\n=P3VA\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button/styles\";\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nThe `mdc-button__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused button.\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.**\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n**Note: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.**\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button--icon-leading` | Optional. Styles a button with a leading icon.\n`mdc-button--icon-trailing` | Optional. Styles a button with a trailing icon.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n`mdc-button__focus-ring` | Recommended. Indicates the element which shows the high contrast mode focus ring styling.\n\n**Note: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommend always including it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color-or-map)` | If a color is passed, sets the default container fill color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`icon-color($color-or-map)` | If a color is passed, sets the default icon color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`ink-color($color-or-map)` | If a color is passed, sets the default ink color to the given color, and sets the icon color to the given color unless `icon-color` is also used. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color-or-map)` | If a color is passed, sets the default outline color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v14.18.3+x64 (linux)","description":"The Material Components for the web 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/density":"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/button_14.0.0-canary.cef6bc623.0_1642637911237_0.19184822201218332","host":"s3://npm-registry-packages"}},"14.0.0-canary.0379179c4.0":{"name":"@material/button","version":"14.0.0-canary.0379179c4.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"2774391aa9f4253b18b1088ca9fa3b0200bc533a","tarball":"https://registry.npmjs.org/@material/button/-/button-14.0.0-canary.0379179c4.0.tgz","fileCount":40,"integrity":"sha512-9TXs1ZOlP1JP3wwbhfVNrhI5lgd595TEwFj8LTyXM9PYi2BoWme+oZh9dAKOdxYkH5E9JZu0UIZNDGxO3s0nCA==","signatures":[{"sig":"MEUCIQDdNXuN3UatASVnMNhk9tKX2xh3DVg6untECo4pDL6lQAIgNJFfKGuT9w15W3NIVAP41NQUKx3gN907o5IwRz2dTCE=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":639542,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh6bAdCRA9TVsSAnZWagAAg/wP/0Sdzi8g7pTVJ+yvlrDs\nPdi8S8no/Q0NOt2PZILE58fpQLH6icQcXfqSY1ZkS8g1BWkJ/6HxPzBl9epy\n198JSXy8mOIBk/fb3c/a7F2hckMR8BldcJqNQpSq1j0cyj3wsHAorCWeVAj5\nH0UqFv2n/fqoYvwo3fcADhL8el9VSVjyO85Fp2IZKtr4GlvqJuqB6bq1CVIn\nEOELEiHjlCjqI76sSQMQGtw9KWyPIuLhygw0/gdcmicq8ImDztwVv5acHzVJ\nybuj9meOogP70384/8xiajmEan7ScgS4rnO6ywYYFOkA8TiYZ4x9+RI88+cT\nWQeJLSQ8iyYu/kZH6PAFquz+GgdYnu1IAdl4LJyAZd8Nwb9hvgz6vAsh2Bvh\n+o6YJ7wGk/1wVUMK9kLZIwtWgs8oCxW5DayA5Az2dX4FSjGwP+Gn6inoFmEM\nP/FMlIQSH7PsDtBC+/KQf9SAuJ5s8m8jBzg4hbrEp1mtVbcL+QLohM5PXg5N\nV5nMwtAJYvWfmz7+Qo52WmDoEtzk0SoC7aUP5XFOi4f1AOkb/TNLoJ6iJNsK\nmxj+s+CV5UNnkwoQjnu5b+2vi0vJwATxHT/Tvp+gQGTMxDWpTgDQioB+RaT3\neUlQtiUmQE2PirHSojDfb8CMkAPVsXMLApjjDJUCiKazRhURWmmBdg8re8uj\nDS28\r\n=+PMD\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button/styles\";\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nThe `mdc-button__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused button.\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.**\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n**Note: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.**\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button--icon-leading` | Optional. Styles a button with a leading icon.\n`mdc-button--icon-trailing` | Optional. Styles a button with a trailing icon.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n`mdc-button__focus-ring` | Recommended. Indicates the element which shows the high contrast mode focus ring styling.\n\n**Note: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommend always including it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color-or-map)` | If a color is passed, sets the default container fill color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`icon-color($color-or-map)` | If a color is passed, sets the default icon color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`ink-color($color-or-map)` | If a color is passed, sets the default ink color to the given color, and sets the icon color to the given color unless `icon-color` is also used. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color-or-map)` | If a color is passed, sets the default outline color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v14.18.3+x64 (linux)","description":"The Material Components for the web 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/density":"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/button_14.0.0-canary.0379179c4.0_1642704925188_0.22158827953858928","host":"s3://npm-registry-packages"}},"14.0.0-canary.e62f3dabf.0":{"name":"@material/button","version":"14.0.0-canary.e62f3dabf.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"fee07ce233946fffe480230541d6149986fca8f4","tarball":"https://registry.npmjs.org/@material/button/-/button-14.0.0-canary.e62f3dabf.0.tgz","fileCount":40,"integrity":"sha512-MkNzIhBiARFzQfEq8i0G9heBkbX+XHf3XCULoGiDulSN/ZDMxTO3MjcRp/in3OTPFRzpuUY4qclaYwPJG45wyw==","signatures":[{"sig":"MEQCIH/oGwWHP9k5YqCYREzylL2VHpc+se0c3UQ3Dc1qQQLwAiBBtVWP/U0r3BFYi2k5wBdvuso7CMRk40/vSN7DIWXtCQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":639542,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh6zv1CRA9TVsSAnZWagAAwJwP/3d1dqDJiOVpCEtZj3eF\nqG5VzDX2bwNvY5w54giBmHdTPZZ5GwLcnktYSXQowQGS2nFauLNsLZkEi7x4\noh3yuWlpYLxjOtk/iIv+a3pPoSWgayEafkj71Kg/IZk6rECcmPguZ3enjLij\n+rve8IeZ5GXRcs1pktm+wPmj2Y7fGY9vE6qWertkx0U2FvBikbBrt7WX2aAm\nFKqb4ycPvt3o6t+M6G9buMtuDdFUKAY27Nbb3D897+2b5I2lFp9mang+QjOW\n+XpZ4vEygfQWFsccoPp5MHKuIWPJ5f4nTGqH+Kkeh6VJELhVFkpltftn7DcZ\nthWGhhFPWq/olflShZcOfLkMrZrg7N7+c2oXoENz2VA/eW8DtU309660+xed\nAGyEGtX8UwOEoCKSaQcD7U22yj2z8E+2mFYO7b8482sizI1OznaSWJ7+oWX2\nqWG4Z/CWS5NuG2eZcyHSY+XRpUQvRFC2wFc82wk6lhtbs3ePmlTlwfNjf/mK\n7xQGZKwc/6VBf93JU7RPGlGi6+dUv/ubeOcD+DJzYXC8HLbhLrxVGwrOu56R\nu6Yp5ysrqAP56p8gY43zOIWRbF3TQWl2aGwU/aT015gzN7/mj8MlkhInAJHZ\n68A2+QBkx/yK8oQEbglNWM6xy74FHTbiL59WZOu5lxG8ZW27QjoZCTRkb5ly\n+EK0\r\n=Zt8F\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button/styles\";\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nThe `mdc-button__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused button.\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.**\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n**Note: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.**\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button--icon-leading` | Optional. Styles a button with a leading icon.\n`mdc-button--icon-trailing` | Optional. Styles a button with a trailing icon.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n`mdc-button__focus-ring` | Recommended. Indicates the element which shows the high contrast mode focus ring styling.\n\n**Note: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommend always including it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color-or-map)` | If a color is passed, sets the default container fill color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`icon-color($color-or-map)` | If a color is passed, sets the default icon color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`ink-color($color-or-map)` | If a color is passed, sets the default ink color to the given color, and sets the icon color to the given color unless `icon-color` is also used. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color-or-map)` | If a color is passed, sets the default outline color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v14.18.3+x64 (linux)","description":"The Material Components for the web 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/density":"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/button_14.0.0-canary.e62f3dabf.0_1642806260712_0.6901720365248318","host":"s3://npm-registry-packages"}},"14.0.0-canary.3e20c1de8.0":{"name":"@material/button","version":"14.0.0-canary.3e20c1de8.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"7deedfcf7d7bb014ecb6d6c5d251c1ddf95803b2","tarball":"https://registry.npmjs.org/@material/button/-/button-14.0.0-canary.3e20c1de8.0.tgz","fileCount":40,"integrity":"sha512-D9bZR/mj3uluf9/dRQ2r73lDJDgyg+b2lqYcJpixqESioNwfBh8bVq/7YMSSx8zwp8V/10/LTAoqQWheBNTH9A==","signatures":[{"sig":"MEYCIQDsdm9obUvbu0LQw1KKJ1eOGhtqggNZmrm96QkkMC3cIgIhAILh+Ba74eMPLEahQLzqdrKOzTfBKrmbfluNUzeDenFd","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":639542,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh8BgrCRA9TVsSAnZWagAATUAP/jQoZTWWrHE3qGuEUzo6\n6bwewUnPQG2rgWFYgVTSADwVYZv/8pmezq2cj+lOqO2vQtMygDIv4F9dGQoF\nSjioITxizW3p4J9T0KwWzADFYiQw6H+3Rn89NRIZzu14pEAQXphLpz24x51/\n3hNP/o/Ahennr/0XZHRKCMnWbksZlTxjHqScpCJiXDyLaXbekNAOcvF+4eFV\nhbnvNBlJXGRckgLs6MfhwRzSoP2ySfgrtNv5bo5jQsowLyM+JmeX6IeGaaSN\nHyJ4RejJHDoql9opsERfvyiE7jhfRjAUSTJDwOz8LrwbEbwxLMXSVSmzAqP2\nqezG28oYizjuSERPzmGcMlzDSkKZ6o9uyBCb0PimrgFzmmVf2cqx7RN1OmBq\nOMCceZ/qjGNNzJH2bVyBV9hotNQevCGBW1Yd4F1wHg55lN3waXRXruLzswzX\ndK1BYFY/edrSEkvPhNEemCxWwcMRtNG1cGF4+Zl0uPzlAOEy710nbU27eji1\nHy/SqnMt7YbVZqaWAk/V8SOBKKBERpJ3tTLCaSKamMwr0mEFWKpefv/7VQhW\nnWPO5/CBWLHTYd7zoNEDCTM30NzjnO8WT/3z9oEa2QUKiN0ZBnRSRTk7DV7K\nj8dEHC9u1rXYSpakN9iev/OwuR2FTN51ltYYo1W5LHFYfBqV6Y//VpUkB7l9\nn8Nx\r\n=d7Od\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button/styles\";\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nThe `mdc-button__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused button.\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.**\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n**Note: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.**\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button--icon-leading` | Optional. Styles a button with a leading icon.\n`mdc-button--icon-trailing` | Optional. Styles a button with a trailing icon.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n`mdc-button__focus-ring` | Recommended. Indicates the element which shows the high contrast mode focus ring styling.\n\n**Note: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommend always including it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color-or-map)` | If a color is passed, sets the default container fill color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`icon-color($color-or-map)` | If a color is passed, sets the default icon color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`ink-color($color-or-map)` | If a color is passed, sets the default ink color to the given color, and sets the icon color to the given color unless `icon-color` is also used. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color-or-map)` | If a color is passed, sets the default outline color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v14.18.3+x64 (linux)","description":"The Material Components for the web 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/density":"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/button_14.0.0-canary.3e20c1de8.0_1643124779013_0.6154982694916649","host":"s3://npm-registry-packages"}},"14.0.0-canary.9f9d928b2.0":{"name":"@material/button","version":"14.0.0-canary.9f9d928b2.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"a6d730957f528b0e4277cc5324b2306be2b094db","tarball":"https://registry.npmjs.org/@material/button/-/button-14.0.0-canary.9f9d928b2.0.tgz","fileCount":40,"integrity":"sha512-op5lpb3x3mRKJPKWF+78KLMrPO/RFX6GyR6tO4jgZkVqWiobPraJmQu2dYD3gELJ/UvhCsM1ULws0O/spIZ0Pg==","signatures":[{"sig":"MEUCIQCI6RR404m6uV8jaGgKP9M0ReOIEGe4epvUXubaYZ3bFwIgVRfeXD9zTydx+cgx7kiz4wZT6CIYp3yBENtbvlNGI1Y=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":639542,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh8uDuCRA9TVsSAnZWagAAIXQQAJFiTZ5NEcLzPY6XWbJ/\nnYcXDQt45x3dBESti5LWDNvF/b2zTaMS+meS7gVN81ueuXQDC/Jbyt7fH937\nj6e69XlwtZ/mnZd7WEcndDKnDCb7DbZs0LKP++/Y0YNI0lyWSDbdIKrDIQ1u\nPwlfZx9jWnMLWvJYnBuYndraU8GleTVp1tDwigEs/Sz13S7Zi4hXKrmP9Qr1\n5roDKL4SE3phhJXeh/BZoc579EO264FXd2HUIgMzKFWOH42vOEpe203620tX\nkjb7Ar2hHqDfRLJpUXnXTWvqNT5iukWJOPnsFdDG64x23q3dvH5WeJOgka5D\ndAzslTW+nFeTODNo3f1AyWAJfO7BfFzu1v3o4zSkMa4CGm2CD21FxJOpkzDq\nxr7u9SDJi+duSgtBlTvHKMv6danU34QNbidY5qGxYdVwnYPqTCaG1aiEJeRS\n8q3azPNK/xN0OvHAp/OUpwExmz/5viF+SS9W43JpkKlj/rhuM0nSj8w3dHpH\nkIHmh72sr6KaUVwR1lne0n3hmPLrNHc/Bm7lpjfAhWcw0FQ59J+cODSNIVzO\nMBfb27ZjtgyV3QgN5Q9YTpDWSMxw/8G77HIMjkqf2WQcrhEGxXjq63eJmtTA\nLXAYeq75sypbTU4NdYfvyxn0mcuPh2rfLTB7vGQuc7AyoUdWqKGHB+WQGlf3\nk+qt\r\n=fO90\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button/styles\";\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nThe `mdc-button__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused button.\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.**\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n**Note: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.**\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button--icon-leading` | Optional. Styles a button with a leading icon.\n`mdc-button--icon-trailing` | Optional. Styles a button with a trailing icon.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n`mdc-button__focus-ring` | Recommended. Indicates the element which shows the high contrast mode focus ring styling.\n\n**Note: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommend always including it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color-or-map)` | If a color is passed, sets the default container fill color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`icon-color($color-or-map)` | If a color is passed, sets the default icon color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`ink-color($color-or-map)` | If a color is passed, sets the default ink color to the given color, and sets the icon color to the given color unless `icon-color` is also used. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color-or-map)` | If a color is passed, sets the default outline color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v14.18.3+x64 (linux)","description":"The Material Components for the web 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/density":"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/button_14.0.0-canary.9f9d928b2.0_1643307245781_0.06200968750472202","host":"s3://npm-registry-packages"}},"14.0.0-canary.a2bcb065c.0":{"name":"@material/button","version":"14.0.0-canary.a2bcb065c.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"65947d0df16cc0d63c838006fc00492ef0d88d2f","tarball":"https://registry.npmjs.org/@material/button/-/button-14.0.0-canary.a2bcb065c.0.tgz","fileCount":40,"integrity":"sha512-53+XHBCxGdXUHwJ0AnM+uY2hpBjazhX3mEV5omRa04uQpzPXJr8v27L8RbfUf9R/OkYLYKvnvG4W5fQs33fqLg==","signatures":[{"sig":"MEUCIQDQzvuOQ7Y0dS/NeQgVsnkaDTejnA7euE7I+2OvoylgawIgahpy9P7F45flUAad6WF2KG28IbDg0nryNcyOil4lNgs=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":639542,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh9EYfCRA9TVsSAnZWagAA8bIP/3wo8dpP1MWmJozswKtu\nAa4gaQ+62l0hw8k5xfDfchAfg07pDB/2LO6mReOJCHhlW24Qg8FBl1+PHVOn\nyOYWkCLoT8b7NiWc3UirnFc0antlRV/BbvBCsVxszRfV7LpLHymK31nfjf/6\nFhf23xAIb+Skvw8IbjtRBr1sD2caCTf9woL5F9MJE4jCpzSp4MGYm81OsWdR\nJEiYU3gBvU50fpvl12KNRJxo7cdbsIzWN1LwaTd5a0CFF5W0caF8AQ+xGKD4\nSQ4758bsjKaWc1D4lCWLaQcu+NM2QBNdXdu8svA8tHcjXrqw9RQ5z8oNlwi6\ned5+7ufu6p5io8atWQh5jcBgU0KuZQ/9bBYKMlvBMSpFPRKJTKlIhWbPTYfe\nH+0Elsq8KL/bCtaLxMZJi4vL1ziL8TrTahrg60FLoNf0pjETWS+dXW8HNk4H\nIyDCfYM5SlORL5rnUMlU//jL5VSBYixRzHYmo6PohVInmIiP5a8GcVjKPr83\nR4v7uThuJnic+Oz+ez65TMlPHx3B+sJEvSCDJcDFAbuBwaeIDWT/ibOVl9Sp\n7MtVyPNq6jqAV6jvU8putXQlci6Em9nvC7tSt8xL9irx+2BDlfGNsYOBvi/G\nrAPhUDVjyR4iBQ/fptgcVN0gPceB3Qav7k51ewr8UttQUbQ7w8wnD57CpCsc\nuyNr\r\n=tRJy\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button/styles\";\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nThe `mdc-button__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused button.\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.**\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n**Note: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.**\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button--icon-leading` | Optional. Styles a button with a leading icon.\n`mdc-button--icon-trailing` | Optional. Styles a button with a trailing icon.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n`mdc-button__focus-ring` | Recommended. Indicates the element which shows the high contrast mode focus ring styling.\n\n**Note: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommend always including it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color-or-map)` | If a color is passed, sets the default container fill color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`icon-color($color-or-map)` | If a color is passed, sets the default icon color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`ink-color($color-or-map)` | If a color is passed, sets the default ink color to the given color, and sets the icon color to the given color unless `icon-color` is also used. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color-or-map)` | If a color is passed, sets the default outline color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v14.18.3+x64 (linux)","description":"The Material Components for the web 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/density":"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/button_14.0.0-canary.a2bcb065c.0_1643398687672_0.7057439332714974","host":"s3://npm-registry-packages"}},"14.0.0-canary.4e66fb2e1.0":{"name":"@material/button","version":"14.0.0-canary.4e66fb2e1.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"8ba9cda246bdc5046e8af98ad7795b81b84959ed","tarball":"https://registry.npmjs.org/@material/button/-/button-14.0.0-canary.4e66fb2e1.0.tgz","fileCount":40,"integrity":"sha512-NizETlUXfZIdcINblzIpi5ytjj/vZsCouvmshV/vyx4+5ExpQwQiM/f5rrg1Ul8jYX4PRSlp2pCtFgYlxLt5Ug==","signatures":[{"sig":"MEUCIQDCOlNeKnmyUT85IreXH63FK/m6whb/bgSqZfEcf+ylrgIgcKlff9UwNAajnechITGU/Kbm9SJT43JNdYNnUK5a4nE=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":639542,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh9EccCRA9TVsSAnZWagAAIwMP/3cjOCCYYxSu7UaI7pxM\ncRHMd6EWnHnwjSJbNw6y77o6R5K1yjp2If3r1IQ/f+gsOTEXgtcb1+WpmF+Z\nY//HrJIbBMlHo3hwSJxteBOcStkLt/XMPi0qe/z0MdD5eDZPItme0oGPcoi9\neU0TxOGel17UxNa3tBXMlN5V0YYfaNHEJz+O+QobZ7zjVK2kX6K55oMlCV82\nLraI9KqrqZnz6kin5Nnju828WXV3vMlNb4rzaSlsNmtWbCv9fObiWi0X6y+S\nbbNnZO9QbWuomLQ0WDR1QmVAV7xFERpvK/NRgd/OC+N0P4fOB5oXvRoCjHPg\nCACn4A54K4/XSTqmLeFqDenrKxXEvsWV5EGHCCyIV9Jf/QeDNGJ2Df411d4k\nSM7YEkv2s/4RjcywGeNAm3NRZTR0wVo+KBt96OdHRwwy7me4eQj5Nw7qNgVf\nzgbdRXWHbHPg8HdPGRn/oZoAxDn9JxJtc28MoAUzmGeYXlGz13emaYjLmj5V\noEC6S6OIuzB8M8e3V467OzbqVw6RgU0L6wKdzABEFH6peZZEvV2wG9YLvH1v\n8brbxVk95m2x7PzovBwQY3VZxDjl77BqHUv2a1TwrLeF/lNPR7S/L5OQRKPs\n79+TOnSPbP4kHxhQ+QgEKA9IebKytHvHRCLCBuI4aaN0VRfGwRUMI2kh3KKH\niSfL\r\n=C/uH\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button/styles\";\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nThe `mdc-button__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused button.\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.**\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n**Note: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.**\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button--icon-leading` | Optional. Styles a button with a leading icon.\n`mdc-button--icon-trailing` | Optional. Styles a button with a trailing icon.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n`mdc-button__focus-ring` | Recommended. Indicates the element which shows the high contrast mode focus ring styling.\n\n**Note: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommend always including it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color-or-map)` | If a color is passed, sets the default container fill color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`icon-color($color-or-map)` | If a color is passed, sets the default icon color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`ink-color($color-or-map)` | If a color is passed, sets the default ink color to the given color, and sets the icon color to the given color unless `icon-color` is also used. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color-or-map)` | If a color is passed, sets the default outline color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v14.18.3+x64 (linux)","description":"The Material Components for the web 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/density":"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/button_14.0.0-canary.4e66fb2e1.0_1643398939953_0.7894111869205787","host":"s3://npm-registry-packages"}},"14.0.0-canary.9736ddce9.0":{"name":"@material/button","version":"14.0.0-canary.9736ddce9.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"1e683b31f9c7bc96f3cd4a0ea6fae9289a27b0f6","tarball":"https://registry.npmjs.org/@material/button/-/button-14.0.0-canary.9736ddce9.0.tgz","fileCount":40,"integrity":"sha512-dPY2eq/5pZxguycdGI3Nd9ZtQ3diMwQzll8UoZ//5GQYaSUcCMU1LEKAoXqfoTZdQWsYvFj4FiJZUq1wRISfIw==","signatures":[{"sig":"MEUCIQCAQL4oHN3BhfDf/A+7zqru0hduHtUfz1zw1bfhO09//AIgLoz0tMeWIguk+9bMqntebOVO5yjIhx5kDvEtTw0OHQU=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":639542,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh9Q36CRA9TVsSAnZWagAAbVUP/i9FIVOujJsF3EdpRoPx\nIUxatEWg+NVX8HLp0udCMJ85DMZbFEl+acauFLpt8rGvOmKaU0AkPgJQNpDR\nrEPeHcyHQRrLWloE1FdlORr1zbM20CmZfcb4Es0H8/cyhbRjr/0OxbldSOpJ\nneZKWoWFcbNdjJ/zO23qu9gamyxerwneoosHsLVUNuj4P0KZ126ntwkvpulB\nu6ccut7UNZR8cI1HAiwf6sBNfsVD+ZP5lIXxFLfDLIjZiyBWYy+r5rw4FeTv\nyy6qYGdt4leIk4XNFM+7nPSJWiR35xC1mskWi2adIcx2VHxiXvyLkiylgCMc\nr+ynpRzLcu/LThcR2+rt9HbRbRSNenlMWNj/8stwNNQnDgJtYhMNyUahcTTw\nvSUgW+3KJuFexKARwt2/po2dc1kTH8bpIETp5+9YHatRBU9ekHdZYiNkrHou\nIuj7iR6rdgjK3NPACzZod04uN1m9qzC9+fB/7cvaBdbJ/hpEWNlEI2tXezZ1\nj53ODoWa5bafGopFRFrjUhhHbUshh1JIJyWc4nYwhCiBqQnMXS1NGLNuKcfK\n17GnmY/ETpLUysZXUHJmajDBeFfW85USYRZfpd4RJ0mCo6BRp6PWHthqOi8+\n/OPIt+1ewOiYjorgxQKLB+dXG5zCeNdmjpWkFmIQAzQGXAbgdewUKAnLWA4u\nOR3b\r\n=97Fb\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button/styles\";\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nThe `mdc-button__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused button.\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.**\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n**Note: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.**\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button--icon-leading` | Optional. Styles a button with a leading icon.\n`mdc-button--icon-trailing` | Optional. Styles a button with a trailing icon.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n`mdc-button__focus-ring` | Recommended. Indicates the element which shows the high contrast mode focus ring styling.\n\n**Note: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommend always including it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color-or-map)` | If a color is passed, sets the default container fill color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`icon-color($color-or-map)` | If a color is passed, sets the default icon color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`ink-color($color-or-map)` | If a color is passed, sets the default ink color to the given color, and sets the icon color to the given color unless `icon-color` is also used. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color-or-map)` | If a color is passed, sets the default outline color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v14.18.3+x64 (linux)","description":"The Material Components for the web 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/density":"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/button_14.0.0-canary.9736ddce9.0_1643449850166_0.8430801468219207","host":"s3://npm-registry-packages"}},"14.0.0-canary.cc4ed13cc.0":{"name":"@material/button","version":"14.0.0-canary.cc4ed13cc.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"c864c85524eef5d4b75f981f2fb15078f270f79c","tarball":"https://registry.npmjs.org/@material/button/-/button-14.0.0-canary.cc4ed13cc.0.tgz","fileCount":40,"integrity":"sha512-8Fylmu5T5GKuyJlhxmYTh8iNXFFnGtEOwhMsh0uJbx8aJ/64MmcfubEeP+EoIigQgBhcf7t3Qx+bET6ZnmnmRA==","signatures":[{"sig":"MEUCIQDIpYg1qsZfBqPPMAoDTESyJKgzA3VE9yDoOdclqHLfwgIgc0QYLrWa0v+c/K4q8TLwUOQ1ByRVy6QRbHoMPxmoPHs=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":639542,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh/W84CRA9TVsSAnZWagAAzegP/07vIq1mxWvbJvi3F1ke\nYC4TmhssWVj6CIatVKak89tzYcjSN7RFaiUP+y0pscPtcpmhWrf4/rcNg2Av\nPI9uyoMfT7y4KK0M5mgNmFB/C9J+EeOvYA0iO6oD6qpCuDDNAHWV4DbQGZW8\nU97vUvQ63v/idP7p4Yfti0NknW+4KI1mSNlaUGGjOOh5ZucdscQwM6iMuKNp\naIab8mLRPrLaAbMFBoUUt0zGLx1Gin3Nd0VVSHmqgcrpGy18sDAPdXE2zGgb\nrWGKpeTKdUHP6Ofo0Oo/jRFCVCShBiymqG/6R9s7VDSno3zsO+mQTcH4Bhth\n/HFTbbBgi3NyKQ3LUABblEBu01sf8WBSgnsCzazaozqmoMdGad8NXojBwOTM\nnNarsGCPzzYuC39WC+HL7yUcfNCSE3LeYAPwTgrO9x3LI3xPA3N9lKloaeuB\nPf+1aTn71XDFbJzdrIUhiV7jKGPYJCRgcH8Eamh8fExPEEWsKdQ5ptR54hsR\nEJzzH6/eqxTBBA93UNQBkwhsGhJCLDqejA8qrp78BrKWnJggNSQs1tVpbCqs\nvjQBVk2yCrCc80kzog9058TH2jZRNhocPdGoI4g7f0VOO2IzkRxB9NxlyZ49\ntnjxOuSc798GIZ4ie0Ru1KXCQpqewhxZ0JryKrzVHjyccBWZZbJtFa074F57\n7PQs\r\n=lqB/\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button/styles\";\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nThe `mdc-button__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused button.\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.**\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n**Note: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.**\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button--icon-leading` | Optional. Styles a button with a leading icon.\n`mdc-button--icon-trailing` | Optional. Styles a button with a trailing icon.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n`mdc-button__focus-ring` | Recommended. Indicates the element which shows the high contrast mode focus ring styling.\n\n**Note: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommend always including it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color-or-map)` | If a color is passed, sets the default container fill color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`icon-color($color-or-map)` | If a color is passed, sets the default icon color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`ink-color($color-or-map)` | If a color is passed, sets the default ink color to the given color, and sets the icon color to the given color unless `icon-color` is also used. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color-or-map)` | If a color is passed, sets the default outline color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v14.18.3+x64 (linux)","description":"The Material Components for the web 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/density":"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/button_14.0.0-canary.cc4ed13cc.0_1643999031883_0.727865264069989","host":"s3://npm-registry-packages"}},"14.0.0-canary.dcba26fe1.0":{"name":"@material/button","version":"14.0.0-canary.dcba26fe1.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"301e6e350bab1088e20d9a3c473d051bf42bfe11","tarball":"https://registry.npmjs.org/@material/button/-/button-14.0.0-canary.dcba26fe1.0.tgz","fileCount":40,"integrity":"sha512-YVJmS29maPMZ8eHlSBNeYUTBliizqQILOrjqPPmBEtad/Meoa0MyPsMf3CMl6L6NY1kD0T+DSSlbdJVkzmQcWg==","signatures":[{"sig":"MEUCIEnoQw6csD5tBIGlBa3SomgNniuiD668A1DtJ/atTTPiAiEAtf9ZDbnABeDcd2QGrjvBdKIA3tA+GAg+DeL00R+gQfs=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":639542,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh/aFvCRA9TVsSAnZWagAAfK8P/jeXjXCFpDcKHYQ0WzXW\nv0Um3GYblw0iHRI9wvdRT4cPUmS6T0Vx4l+EW3fkE3u0YxdWdUwaUy4oZO3n\nGnjwofJkIaIZUuVdwXkmQxHyKlWFMbVJwk42RIkgQZXLD8084ouvhoO0OjkD\nWEFv+p1+DNQ0RYVBY1nPVW61+9TlEgdwtt6DHb5tMS7J/ZbUvI0URh3m2Go0\noFHpkhsZ7QMa8l1i6+OtZ0tb/txrfuJNjb9BuZNPjKSxgWjkxu4yoHTmzAmU\nWvnaMFXou0i8z5hMw7rgX/OdAkoS9MkQ38JL0RceOs7a6NJzd6n7KvvzQN1+\nNdBcZZv3ALnSWgjzjSC6Uuif/ebJRtSCUYEopIZki7EBzY6kxqXKArq/j00C\nudZ+MnXPcFHRmEQ+kki9lADhaAq+2e06k3zDwZ9o3ZhKgW4aDsA2yptEmdhG\nlDVCfzf1K/Xm79+2mt/91BqCCEVOwA2TYrF89QcD/K5HdVOIlkVzi9RPvuJ9\ns6qvVAtD6NYu9Ite38t1xg5ABOZ1oe+Uha6mRB/CfxBhULD82lYZ14xsMu2R\niQmFNESi3AJP7P2yLHeUErqk7k+h2TX70A/qS6ac3oZM6M5DrzmwcP3ZmgzU\nDK1zmOOMjnBhdnW0fSRtUE1TUrpTzd1G0y8XYAlqtxVYztenRwuqGwE8zUdH\nOM9E\r\n=v9L2\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button/styles\";\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nThe `mdc-button__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused button.\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.**\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n**Note: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.**\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button--icon-leading` | Optional. Styles a button with a leading icon.\n`mdc-button--icon-trailing` | Optional. Styles a button with a trailing icon.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n`mdc-button__focus-ring` | Recommended. Indicates the element which shows the high contrast mode focus ring styling.\n\n**Note: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommend always including it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color-or-map)` | If a color is passed, sets the default container fill color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`icon-color($color-or-map)` | If a color is passed, sets the default icon color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`ink-color($color-or-map)` | If a color is passed, sets the default ink color to the given color, and sets the icon color to the given color unless `icon-color` is also used. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color-or-map)` | If a color is passed, sets the default outline color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v14.18.3+x64 (linux)","description":"The Material Components for the web 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/density":"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/button_14.0.0-canary.dcba26fe1.0_1644011887573_0.04641791877820323","host":"s3://npm-registry-packages"}},"14.0.0-canary.ec54d9046.0":{"name":"@material/button","version":"14.0.0-canary.ec54d9046.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"f86769abfdff3dc37ad2f72ea100289db1d4081d","tarball":"https://registry.npmjs.org/@material/button/-/button-14.0.0-canary.ec54d9046.0.tgz","fileCount":40,"integrity":"sha512-ESV/8LYdD8JSjMtqosHeiShTp0NibPSIQ8T433pUvwHW8JtPVX/GCzbquQFCS7x7xLMPx/kgKyVw0glCPAp/Aw==","signatures":[{"sig":"MEUCIBUmhhrHIuNVUixhKjJKZqdx3NKqMUb3f/HbHp0Ut5RrAiEAuc9V5TyRe/H2Ku8dq6EyRrBuuhXMxINKHGXqi6hVpKU=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":639542,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJiAT8jCRA9TVsSAnZWagAANLUP/0KhZbd365MBlVFn/1ZG\n12ZvsVycpkhDJSWinFUBaB6IeuK8e17hUraBRe8rMUwfSHLavPVLOwTEjRV2\nzjIRx/ioYJ8IxmQTxL9BVhqGPZFISz3eWDh8R4s/PgQ9K+ncgta6dI/uA4yU\nbqL+N3ObALSdJP9g4H5Fw0o/H9M+tHMBzafi1stsKk5G1k6d/2JpCMww5VI7\n9YFnasqpEphaaYZTB7TifkUe8kCWFyQD9AKrp7xktk4AuKoUmCRZlaG3cr6A\nW7aRS+ox1e5lAYtuYrwCgoVzJuksSVcb27Kuc50x6WhcByWntqQpwhNUxFeE\nG15pLv+O2PwuL/873m+P682yS4q3H9/mUbUe+QQXFNFF3KhO1AF2BWMSdPWv\n3DPunHTisIJA9lXqDseC7elUOfqnB0tQV50EDoDck+uUwLVHXda5atsutZ8I\n/WwZa6bwgee4xF33yobbheT0hRJXEOPJYf/x9wtSRRAvx/7vZ3WbjXiGrXlc\nzk6AaqwelQM24MMFDPTwaS5iRV8oQHNlp8275P9j1SVMi6400aYXaybq10sx\n4mzCl/L8nHgKeOzu/BLlAGdrnKuoO0oQn4bDDOwdFsZuuj8B7eF2mJdM/S0x\n/xdu7/KuhuwWI9EBnNO4wjxVmujqeK4fmPYOrFdGh/oAPoJ5mzmiFz8BVMNQ\n401T\r\n=QKNY\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button/styles\";\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nThe `mdc-button__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused button.\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.**\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n**Note: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.**\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button--icon-leading` | Optional. Styles a button with a leading icon.\n`mdc-button--icon-trailing` | Optional. Styles a button with a trailing icon.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n`mdc-button__focus-ring` | Recommended. Indicates the element which shows the high contrast mode focus ring styling.\n\n**Note: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommend always including it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color-or-map)` | If a color is passed, sets the default container fill color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`icon-color($color-or-map)` | If a color is passed, sets the default icon color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`ink-color($color-or-map)` | If a color is passed, sets the default ink color to the given color, and sets the icon color to the given color unless `icon-color` is also used. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color-or-map)` | If a color is passed, sets the default outline color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v14.18.3+x64 (linux)","description":"The Material Components for the web 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/density":"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/button_14.0.0-canary.ec54d9046.0_1644248866861_0.4032206869838024","host":"s3://npm-registry-packages"}},"14.0.0-canary.ea9b5b463.0":{"name":"@material/button","version":"14.0.0-canary.ea9b5b463.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"dd9bddd1c20d385cad516f90c24ec3994fc2dd1c","tarball":"https://registry.npmjs.org/@material/button/-/button-14.0.0-canary.ea9b5b463.0.tgz","fileCount":40,"integrity":"sha512-j3X5Og74Klon/DyMvH66AtVsJoy8pshyyDasBZMFYT1Ax4irksLVavlnRj8b0fRHc3H8YrZ3/VgL3f+ofFk9Ug==","signatures":[{"sig":"MEUCIC+Vr+9Wvofl1BVfqBBVsFgdyRm5TgAzhhsB9QWMmS0CAiEAzxyzUi+p7Wfn7SsfFAmpp7zZhI9lYaKJUydto/7OO1E=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":639542,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJiA//kCRA9TVsSAnZWagAANwgP/2lOyq/TeZpuEAEo2+hl\na3EW2rc5S11RWZEOY2RsA4AaiXmzZTS6g4ZswDjOFRf9NphOX1ZLiJ64HEIf\nf6ANWNInYijPjfRhV1hDhGJJRNOMif45GyB+OsEVq5H2qrTU4p/C5QAplm3N\nf6NDe0suvZS9o1lmPS9N18cXEwlcr70gWYIhigCyPqgEpvj1REXYvRCnnuE2\nPNZx1bdJnuj4gxTKycQtCwqp3k68+k8Qruok8d1Gh4746KbHe8pxlvdeFCC1\nAjem3NZTsfDulg+QO31HRJE7n3phCmSfq7qc6wUzKL7mlpTMNQ1Q3Qht29HA\nX2dXMqmt9IctbqvZ+oCmmjGyqboZdSq84gDAbsg2fiyMCrYHUl0KVDaHbEAN\n3ZwM8CI7YxkqO6ivCB6J5mJt8Ba5pTdq8Egv3Fg5UuMioQ0laHbD5tPGF/P2\ni6r6wN2LQIEPI6aNjewoq6veH34Xd5D4it70wtEUDBbys7+7dFEKCsqIAfMY\nrgckcM9OsAY5+DFZlWdnXeNimQAyo/nFe35hBgHZFduhAsngLf6UdtKZL9ZR\nH9e8Ao/jyQZQ/W2sf+/Yq5T3/fdiE+skC7rqYaa410E3kW77OBryVRpfX4/2\nZdAZs9vooSClE5kBa0MD8xe8iBgfFgTjCt+V1zPJv2+D3LAXP84TrJBeO2pd\nDZ+w\r\n=NLox\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button/styles\";\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nThe `mdc-button__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused button.\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.**\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n**Note: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.**\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button--icon-leading` | Optional. Styles a button with a leading icon.\n`mdc-button--icon-trailing` | Optional. Styles a button with a trailing icon.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n`mdc-button__focus-ring` | Recommended. Indicates the element which shows the high contrast mode focus ring styling.\n\n**Note: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommend always including it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color-or-map)` | If a color is passed, sets the default container fill color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`icon-color($color-or-map)` | If a color is passed, sets the default icon color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`ink-color($color-or-map)` | If a color is passed, sets the default ink color to the given color, and sets the icon color to the given color unless `icon-color` is also used. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color-or-map)` | If a color is passed, sets the default outline color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v14.18.3+x64 (linux)","description":"The Material Components for the web 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/density":"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/button_14.0.0-canary.ea9b5b463.0_1644429284546_0.3976994441665842","host":"s3://npm-registry-packages"}},"14.0.0-canary.96ea061c1.0":{"name":"@material/button","version":"14.0.0-canary.96ea061c1.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"2fa5c24afe9d6ad5cf912c017202df4c287566e1","tarball":"https://registry.npmjs.org/@material/button/-/button-14.0.0-canary.96ea061c1.0.tgz","fileCount":40,"integrity":"sha512-bk+0UahX7Dhyn8TnvQnE/pZdMlL9cZU+8UwesrmbFqwL+6QrIaaPddziVQF7PVGka36W4D32umIHhNjpfdj3fg==","signatures":[{"sig":"MEUCIQCvsDHeXMFj9rpEoT5mPORMLp9LrRH7Bj/2ad/quv7NkwIgcDxjSlfHhTzjGl20pslzsskiENKZpwNK7OIpP1MNOdQ=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":639542,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJiBA9DCRA9TVsSAnZWagAAGgkQAJaF0MiylnBKWeNsU8mk\nzNGygJnOxwpd6KJAwT5njo+uc4xHMQWorm/Bya3vBQV0D7M2ZbbT/MUAi/oF\nky57LWvcmVMzl/WNU7TNxpi9rkQZui6+e5mJAcO/V/YmdTCBKOx6v0o1wM+4\nDda5Mukft8m6mptLb0p5lWOTeKUCz3JMU97TsAYFmS3t72LW+7i1Mky5/FgW\nte2YghfAVGPUCUZhPLiOG/WOwfi6Y/C4B1atUHxvoAdOge2YEnBSD5JfE7XX\nKpfiW/IsKaFHUkYle4EomiUnGTZ5duQLegy2hlLX42csURG0pGsvRuLa59qb\n8rSs8jIGTuX04Q2O+b6lXUfYevrbtfQkEnoetmrYgk0Z9owXHjPXYeqyYiGw\nve+jo3/XTQacRgadoFnHq/ogW88ovN9bH8cu8ItQU69DRId2Cgm192A9BRE6\nXshCUD999dEUsJfAlVdOI4E0Yeoj8azaYMe0zTZ91FLVEQf7vk5Nhkbnk07P\nDMQ7So4T5aiLPoJulihtXYb1T5Go1CT0AukXtenRw/Mav/nNmNWow/Ch7z6U\nWZgrYE6pcq7IpSeLHotmIe8TQLRQ44qngkMknz4/3Gvgtb8SatUXFCQ0G3Ge\nv70/0aPg+FUMW3XmubjoWrU6Iq0HxL16h2YHEDRv0gO65O6/rRMx92KokjXw\nxIjU\r\n=IGQS\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button/styles\";\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nThe `mdc-button__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused button.\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.**\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n**Note: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.**\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button--icon-leading` | Optional. Styles a button with a leading icon.\n`mdc-button--icon-trailing` | Optional. Styles a button with a trailing icon.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n`mdc-button__focus-ring` | Recommended. Indicates the element which shows the high contrast mode focus ring styling.\n\n**Note: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommend always including it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color-or-map)` | If a color is passed, sets the default container fill color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`icon-color($color-or-map)` | If a color is passed, sets the default icon color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`ink-color($color-or-map)` | If a color is passed, sets the default ink color to the given color, and sets the icon color to the given color unless `icon-color` is also used. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color-or-map)` | If a color is passed, sets the default outline color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v14.18.3+x64 (linux)","description":"The Material Components for the web 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/density":"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/button_14.0.0-canary.96ea061c1.0_1644433218795_0.20240491172164288","host":"s3://npm-registry-packages"}},"14.0.0-canary.e00181e59.0":{"name":"@material/button","version":"14.0.0-canary.e00181e59.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"973e60597c2e2d1d943df803090972c5afde0820","tarball":"https://registry.npmjs.org/@material/button/-/button-14.0.0-canary.e00181e59.0.tgz","fileCount":40,"integrity":"sha512-Rrd4IWBUseXhq2da8+FyWsgY8bD8S8tTr+i5gyjKMkjht6z3C3sqayy1du00W2T1JGZ1kpmuY118meUSDDqhSg==","signatures":[{"sig":"MEUCIEUJCvlKwqpetwRTlL9Olr6hNiuljXKts8YIQgLp6KwxAiEAsZr7VBHMNK5rc2M3xiqUusWBOpeICS2j/Q66b9xzl4E=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":639876,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJiBXCGCRA9TVsSAnZWagAAgeEP/0WcL9DKckdITkIYJL/K\nDmAbAquYX2Vf+djjrNV5uElCVcg9DoQbwo+SN2Yuyv3WNbjy3yDa5Lql21oF\nO/6/ANlOCSEep2jGiiInYhlw2JBFS4oVJBfqRNw+6BzVwr2qyDo3EZyzR5ub\nvunpCPj7IblJW94Y6P993QnbxrgKvKwpEvTGrpHlZ2CqsaBcMyCWpcYCK+mX\n8Ddio6N6+egcYb7FUvuVPmCJxxedWmIUyxRlM397Jdu/cxZwOAp578Zj/2xT\nCaiyM3+cDbx/7SEilFAm+4nP5WWZJgmf4bmWKXSA04G8sWsJ5Qmq/5oICbG2\nH1r/mvIyz5u3ewYu44VBO4CNN+f3DiyNlj7Z6XbpAAwOCuqkwFBiq4Sovd95\nWUR+Ki2th/GT94INb0adaNy/5mCWDr+a/K6aRrtXr0YOyk5RpuFxRmGcgL3J\ntrm/sclgh4QHo3Dv2f1TPEB3rE70fFQveVaBhPxHYWzWTipDPKnS56lldVpk\nzOToBVeZyqnN9mg6mxfcFBMXWMxH+AygKuD+OZsmQDXRr9tFGbC1sQwDnb9c\nckeXxpwNJYdTlQqS1SdUZLjG0lppPqUwOCdeLb6CXNV0UywNdfK3HFbaGhSx\nxAGVBv7v4MCVial27g4Qwe/PKPYAA7flmFqMGe22kUSnJjGn5S1eFWl6Ih7O\n5b1l\r\n=5QzK\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button/styles\";\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nThe `mdc-button__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused button.\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.**\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n**Note: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.**\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button--icon-leading` | Optional. Styles a button with a leading icon.\n`mdc-button--icon-trailing` | Optional. Styles a button with a trailing icon.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n`mdc-button__focus-ring` | Recommended. Indicates the element which shows the high contrast mode focus ring styling.\n\n**Note: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommend always including it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color-or-map)` | If a color is passed, sets the default container fill color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`icon-color($color-or-map)` | If a color is passed, sets the default icon color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`ink-color($color-or-map)` | If a color is passed, sets the default ink color to the given color, and sets the icon color to the given color unless `icon-color` is also used. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color-or-map)` | If a color is passed, sets the default outline color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v14.19.0+x64 (linux)","description":"The Material Components for the web 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/density":"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/button_14.0.0-canary.e00181e59.0_1644523654422_0.5116543555685211","host":"s3://npm-registry-packages"}},"14.0.0-canary.037285f9b.0":{"name":"@material/button","version":"14.0.0-canary.037285f9b.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"048b42f0f554b03e83476c15af9a10a17756d8e8","tarball":"https://registry.npmjs.org/@material/button/-/button-14.0.0-canary.037285f9b.0.tgz","fileCount":40,"integrity":"sha512-bhaUw2JMnArxRaD6OSGPFtwnX5RmQhJbqBUSamlCd4bZZ7YzL5oV8vQittNXRl5/8Jehm8fOG0AGVkZG5YCsPQ==","signatures":[{"sig":"MEUCIDmnh/9/kxHs8Ta6IlYtYbrtnIM9QMbwoxaXdVArxkTPAiEApsnmTe99CRSI20X2X9vsX06UxRg4Lw07di4iKOIjunc=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":639876,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJiBqtCCRA9TVsSAnZWagAAwy4P/0ZK+bNqjKdqkkb4uy3L\niGpSE/2WLJics1GXvr4oGGkKFjN1KAC5hzQchCoGQ8kMT/kyVtmYdvvu8nuF\niuoSZb4d+eFFzvN8jWeeJIwpgkbKHfjc+DmEBAiIrNpdhgNhBLXZ66lAkE11\nbjwNTJAYienhkaPwX8GP6GBXUA+wFW6OoxdRcDUm09NOJ6Um90GkLKhhzKwN\nfEn2rz/ja4qHZYhdd9aHJ0311xJ3YY1oKjVYsQ96KQ1pBrWsc8sVd9Od1MuX\nAUkPmIU36Ry1eMLKzCP1iJeXx6C6nKsoAZmbHICaOZL9vVZJnMrGgpx0uRen\nbqsGbgbR+ePIx1fkjqJX42U+ZyxZrndoTPfrhuaEtCVzdskKfUV991kA5iwD\n8jDIAuiJiC6ZmdUYjFo1WQq525tMTZPqwqYerfPd/HjlVPjrtpxCZJ7quQ1G\nwKVMpE9r36mNPQa5mymolx186DYM4Uaihk2tokhEynYHCZ1Xgr6NkpJtXLnl\nZqS3jbWbVbMMuB5PKZ6qGYLA/gz7EYpOm3y4892+JYMWr9hykmhWpOjtoYBr\ntmZO4cnbE1W5UWgwcJpIZduUURsbiASAKcoi1sfkASRR3k+wAV20ALdlT72r\nLDlIk190zi8f83hSxz9PJ9eeKIL6znB8mSIU5SoAqqvhErl6mB20JjqAeklI\nOyrL\r\n=KXOI\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button/styles\";\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nThe `mdc-button__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused button.\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.**\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n**Note: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.**\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button--icon-leading` | Optional. Styles a button with a leading icon.\n`mdc-button--icon-trailing` | Optional. Styles a button with a trailing icon.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n`mdc-button__focus-ring` | Recommended. Indicates the element which shows the high contrast mode focus ring styling.\n\n**Note: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommend always including it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color-or-map)` | If a color is passed, sets the default container fill color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`icon-color($color-or-map)` | If a color is passed, sets the default icon color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`ink-color($color-or-map)` | If a color is passed, sets the default ink color to the given color, and sets the icon color to the given color unless `icon-color` is also used. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color-or-map)` | If a color is passed, sets the default outline color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v14.19.0+x64 (linux)","description":"The Material Components for the web 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/density":"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/button_14.0.0-canary.037285f9b.0_1644604226341_0.6751389366663443","host":"s3://npm-registry-packages"}},"14.0.0-canary.1aaa68dda.0":{"name":"@material/button","version":"14.0.0-canary.1aaa68dda.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"104f2da57f0df56b048b9f8e5f8b2b5ba8af40a6","tarball":"https://registry.npmjs.org/@material/button/-/button-14.0.0-canary.1aaa68dda.0.tgz","fileCount":40,"integrity":"sha512-pNM3tMvT3OSAI9lEOPSs3pfo5d8qyF44OgcYadh4BViHSUake2Xd35wi4decjjGpeYPQKLUkyqPfY0xFUAB2zg==","signatures":[{"sig":"MEYCIQCg5G2z2KfuT+IaP4FU+LQk2Lp7DNpI22ATYrG2bgWsIQIhAKZHoiL7+cPpliCrWcFldzaUW3Z9reta4OSdSJHQgsDD","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":639876,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJiDVVjCRA9TVsSAnZWagAAyjMP/A68WiHFZYiVEwPmYFz7\nN36W1bXr3KY6qAM6WNBDKzIRYunzOTqYmxWb9zIGLArZrSNLDlgroS12qdQ7\nlcWrej99XGwqvjiT+r7rZlf7ICgwRh+mZ/VXEdksOxUqhL3bvzpXpb2ajyrs\nO8LpEJ5AvfGogNOLwId297AS2kaqaS+iPDpWAR7oQSa2XT7jWj4rLw63tRAj\n+Uqtb0XO6HZC+LC6vHv+sg4NUPIPI6+7XfMyjl5y0r5AO8A8o9XDXlT2QAsX\nFfkdNHRxCfFmeBAaQbqMwlAknf1abe/TZGvkICT3RZK6DOPToW1vZh78PQy3\n6onjYH8H4JZerHs8ztzzyvVIvYj4kMJOqG8JJmeAoAxjJvKoI8TMn6+dNsLk\nfCyKvQgMpAiuI1RvkpEp2MyU3h0TGu8D0NRDkNrBn0IsIEYZhARVS0DexLgz\n66+jAvFjbFSWxoVW0ocUwAZYJIfRrN3EUyRXTckcb7nTL4tqZUx5D/HcUf/o\nv43iJFnv096YbAmkyHNNoIRhFGxyWb4oshVCeQ9Yu0eUrLP258Pqlgg0Zudr\nL/+Xbi9Wp6c9cvY1G3dHtaGycN0v7TsU3ZY6VLUjj0IvUgXqsWv0nPmQr7lq\n+r2ehZmXNHQcOlini53yA8trk9YdVE/NI7qVQcchWD4KPdFDGevgK47pD2Ue\nrlOr\r\n=MnZ0\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button/styles\";\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nThe `mdc-button__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused button.\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.**\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n**Note: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.**\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button--icon-leading` | Optional. Styles a button with a leading icon.\n`mdc-button--icon-trailing` | Optional. Styles a button with a trailing icon.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n`mdc-button__focus-ring` | Recommended. Indicates the element which shows the high contrast mode focus ring styling.\n\n**Note: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommend always including it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color-or-map)` | If a color is passed, sets the default container fill color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`icon-color($color-or-map)` | If a color is passed, sets the default icon color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`ink-color($color-or-map)` | If a color is passed, sets the default ink color to the given color, and sets the icon color to the given color unless `icon-color` is also used. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color-or-map)` | If a color is passed, sets the default outline color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v14.19.0+x64 (linux)","description":"The Material Components for the web 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/density":"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/button_14.0.0-canary.1aaa68dda.0_1645040994799_0.5963796376587538","host":"s3://npm-registry-packages"}},"14.0.0-canary.ab4aba1af.0":{"name":"@material/button","version":"14.0.0-canary.ab4aba1af.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"be07619f51279a2b30820da9895c1fd17a10f19d","tarball":"https://registry.npmjs.org/@material/button/-/button-14.0.0-canary.ab4aba1af.0.tgz","fileCount":40,"integrity":"sha512-D4hTgA65zwiBANYARyAuJzju2mAIP6dgvJP+6ZHUUg37nHsXHGuPsqCl0JhZsFZMW/M2OA780PoHP5qpibVaUg==","signatures":[{"sig":"MEQCIHHfxH+3AYezpiJWx5pn4Emz94zOAT8NVXSt/aCcuD4eAiB2rT675hnNkQoiAlgq+PHeNffcmE4vwYisz0IDrJEBPA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":639876,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiDpEiACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmodgA/+O24YCrCm213BM7itTm6Xj46SR+uZsXEDGONvle/H15M/TcSi\r\nTCyTEAUHjGLR16DqoV88oayYC5k/8xc9+pBC3qq5iFvr7OL+0lhtLyxxlUI7\r\n3FI6Dii0PEdYSlc9mW15/CxqXpC7ycS42qSJ6LcZ6D1HlcPP/46Unr1fHUMX\r\nVGfF/EZqxhaHkak8JoEG19NrpPUY/prqfD9mFYXKYnjYE3n8lkO+FHQQhDUz\r\nqn0I6hZ8yRjvzTmip3o6YLm/17XqDKf4ZCtHlE1k/qc1WJbOXzMnd+XXYPa2\r\nhgjwISgQJKYQoJZ/nRKL3zq5bhqAHfGqJEtUCeIFfwhZlUT9ZEBmmJZGeUjj\r\nYasiHx/Nh9MdGzcu76vZtmZ4rUeljMPjcGZoz2lwt0yH6JHwPRbzp5rvDfcN\r\nAS86MSIJySnBragrAFr+AdjZ6Q1cs7c1+PaxEqzdt03ovyP0mR1c6HYwcdIs\r\nXgXJmGWs1i2CH+Lvyna2Y88pgSRcOmCr6PMnyFfAt6K4WSAqjwyVgkxx/hxi\r\nbwlANFDUdJTW19QXu8mzNykSE85QanZX9B3mitIL7d2Frw5yn4qBYWUVje0/\r\nsx+05A2GmFwiVq0GCw026CIJP4SCEbaxld5RJXAC1WCj88MM+Dq9bTEjcUX1\r\nTzjIMHACizRXDOFZ4Gf4h5ReCbSa5DiEoN0=\r\n=ZlIz\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button/styles\";\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nThe `mdc-button__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused button.\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.**\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n**Note: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.**\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button--icon-leading` | Optional. Styles a button with a leading icon.\n`mdc-button--icon-trailing` | Optional. Styles a button with a trailing icon.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n`mdc-button__focus-ring` | Recommended. Indicates the element which shows the high contrast mode focus ring styling.\n\n**Note: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommend always including it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color-or-map)` | If a color is passed, sets the default container fill color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`icon-color($color-or-map)` | If a color is passed, sets the default icon color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`ink-color($color-or-map)` | If a color is passed, sets the default ink color to the given color, and sets the icon color to the given color unless `icon-color` is also used. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color-or-map)` | If a color is passed, sets the default outline color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v14.19.0+x64 (linux)","description":"The Material Components for the web 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/density":"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/button_14.0.0-canary.ab4aba1af.0_1645121826216_0.2539254364688419","host":"s3://npm-registry-packages"}},"14.0.0-canary.e58552c6e.0":{"name":"@material/button","version":"14.0.0-canary.e58552c6e.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"4fc36bbde1c82834fe21c8d14ce75725da025547","tarball":"https://registry.npmjs.org/@material/button/-/button-14.0.0-canary.e58552c6e.0.tgz","fileCount":40,"integrity":"sha512-j3eGZg1GZlPlBKyFDYD/sECqDstXu5+i2qMIsBhM2BNdJuM69mc7PNQv+DGMHUYdLqixt7Q70Z1JUHF703VMcg==","signatures":[{"sig":"MEUCIFt50CPwcGfHmxbV/dK6PLTszW2WuO3azguQmMhDOBu8AiEA+pkdRvPYKTiTJEp7YLgz1NK5WLqJ4GDUkYrjZJHJYeY=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":640030,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiD9/EACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpSMg/+LdNBfCXkqlLHNNr/iCQTAvr6c74bIG0Q9q09wE4Tz+3KTHcQ\r\nu35lggHcqwXsS37X1YImAQcSkb6EvsMNT9CkJC6FjnKOjKf5SZvclJ7HqW4G\r\ncyKgbrM/ubZBlchSXc2hxuVKzSyKEU55lAsl4wVu7VVZqRImNvTlnoVQhN4M\r\nADzbXqpUfcCXGQf2vYmeCDY2IYgpqNFq2M5aIp6IJHlbxtiHnrJzZjphE+/2\r\nZN770fUeFYMP2lOta9xNnr+O3510hN2J0OYpGDmo9t6U7xVQHd+sWmb4U0GI\r\n1b0t6kcoJdNfRruYnTJXC2STEo5pebP9FsIveti4sDaWYjOlB4Sg366qt2g6\r\nVMClvQ2z/ZaaAdJjvcTyfQmXbu1ZwKcfJHsm1nXqT3A+mrpmNA7yO+hXJuds\r\nPvn0gA1kdk+WQmQ6Me9ddk0c7S23edl8pmR9//KsR4Z4i18227hJGv+gI1cn\r\nJRGn3ST3qKIdeJfBZqsHrAeP0UHs59SADzlcfTqomp/Q+Jz+3+5/xRN3jj02\r\nTdwnIGJlAvfYpDzpl9fgIBDSIEn6lBV9nTuUo9uywI3x2GKgMfshpBz03L/B\r\nqlk+9bS9dLJOADQAupOUSYKhMvjyKnkS6ouBV1DjVnY1U4w8EV36A622s6Xt\r\nIdGdZ2J4XFsBOg4hgQ5seppnPYlVqmAIlMc=\r\n=itI3\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button/styles\";\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nThe `mdc-button__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused button.\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.**\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n**Note: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.**\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button--icon-leading` | Optional. Styles a button with a leading icon.\n`mdc-button--icon-trailing` | Optional. Styles a button with a trailing icon.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n`mdc-button__focus-ring` | Recommended. Indicates the element which shows the high contrast mode focus ring styling.\n\n**Note: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommend always including it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color-or-map)` | If a color is passed, sets the default container fill color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`icon-color($color-or-map)` | If a color is passed, sets the default icon color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`ink-color($color-or-map)` | If a color is passed, sets the default ink color to the given color, and sets the icon color to the given color unless `icon-color` is also used. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color-or-map)` | If a color is passed, sets the default outline color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v14.19.0+x64 (linux)","description":"The Material Components for the web 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/density":"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/button_14.0.0-canary.e58552c6e.0_1645207492606_0.7223508209793259","host":"s3://npm-registry-packages"}},"14.0.0-canary.868793776.0":{"name":"@material/button","version":"14.0.0-canary.868793776.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"5cff725a02155a33ce2cf1ff08292fe78816556c","tarball":"https://registry.npmjs.org/@material/button/-/button-14.0.0-canary.868793776.0.tgz","fileCount":40,"integrity":"sha512-84tKRfYxMOUAhE5HlE7Ovbesz05i/J2kgwsWKVzd+L/c+DrJKAfH+UeCHjcHuYfzbgyKwJEf0KQDu9/pkVSrGA==","signatures":[{"sig":"MEUCIFOTb0xMzlV45vW5dnYkECCbYf4VaHmNqXCpjF/VDYO8AiEAuX3sj9AIk4wFlLD624QBT8vphhrlC05XNlqdGTyegs0=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":640030,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiFTtIACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrLUg//bifLqgNaLAE5T8sutIIw+HgBVZ/rARPYEIAYCaqrHtU3l7aM\r\ndcJ8X9WZ5rHqqSPIeD0o0IfMns/lHlYn3u4DQnDWhZjO3ZXQ20r/ezT6/8b/\r\np3MOflft6esFahXUxQoVzvnlobecb1SoQrTj/s05rcXvbq+2f3B3Ccq9Bxbb\r\n0bk0FoCiLX9Vv7eXICnkovCXwOFvHKnuJ8OcTvQIS6LIT2AG4oItZkBDIazA\r\nnwr9F+PakQdy7d/RPzH33wFAtzxa+Oq9DCYMyk0QT+pPA9CNT5OHI1os8EhK\r\nrtWwkqUkpRsW2ugk9oXzenZuv4amFgUSRdvNwdNgEHq9xM4MrcCGV0tf68vc\r\nDrZ0KqKMx5RM+3zzu28AZlmbAzzfjNRSGJxCk8fdfzryQw20+E3S19/acIbA\r\nNcJg/+cksGH+Nc1N52nzKXmzuXHs/suAltho77xfFwTc08h+IKT0hT24pEVY\r\nUPu9LLW1hbuQpI08cNnfRhRk94rDvubB2prrf4RqxwOC5hsAxqsMLeqzAUK6\r\nPIzLfucGM3pd91N8lF+2qtCVom+iQFg/0g8BpS9C2+Rmaac2F6HersbisSXQ\r\nhWvkKDDH055B/aJAJE3VQB/5wknDK1TlEE1mlrUtpVUvfWKENzzNgr8xb34v\r\nTBD3vtFy9TzObznv964nO5ReJ1pTZN2LgAc=\r\n=qiaH\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button/styles\";\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nThe `mdc-button__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused button.\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.**\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n**Note: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.**\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button--icon-leading` | Optional. Styles a button with a leading icon.\n`mdc-button--icon-trailing` | Optional. Styles a button with a trailing icon.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n`mdc-button__focus-ring` | Recommended. Indicates the element which shows the high contrast mode focus ring styling.\n\n**Note: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommend always including it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color-or-map)` | If a color is passed, sets the default container fill color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`icon-color($color-or-map)` | If a color is passed, sets the default icon color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`ink-color($color-or-map)` | If a color is passed, sets the default ink color to the given color, and sets the icon color to the given color unless `icon-color` is also used. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color-or-map)` | If a color is passed, sets the default outline color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v14.19.0+x64 (linux)","description":"The Material Components for the web 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/density":"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/button_14.0.0-canary.868793776.0_1645558600337_0.06440017049505742","host":"s3://npm-registry-packages"}},"14.0.0-canary.fdc37a445.0":{"name":"@material/button","version":"14.0.0-canary.fdc37a445.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"59119b8ff44677a45acb4ec2ac99aa2c8f749d6b","tarball":"https://registry.npmjs.org/@material/button/-/button-14.0.0-canary.fdc37a445.0.tgz","fileCount":40,"integrity":"sha512-0GLhQFbJ0WPT33h+DvYF317eEPZEra31PsTeb/GAKPZJsc/zQuhHRIUcEVXPlXDESnl1ILeLphJxKGi5qSuDZw==","signatures":[{"sig":"MEYCIQDolTBv1uCY7W7cNbrj0567OKMpDk8ayXaGXLO+1WgPiwIhAIiFZH3wnyXfS4V4l8cNMPzsiMs1HAFAY9+XJ+5CF7HP","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":640030,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiHRicACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqFDBAAkUBIRp/3v9mheW1lchMlVr2tUnYkXQT16+SVsDwtNUVMoFm5\r\nTwJR5ULfX7UIpZ5oD3wJTCNgi/bW6XkYqiKC0oQCcvdixqVNyYzdgEKasEF5\r\np9rEWnCJ8cg7tUn36/WqFz257c3iU9TPsVKWAu9EAFXy0HCptqcHv4ANZ7vq\r\nUWjJFYFcYfhIl8alDOVOOuDuz4PMnJCINWwzE/W8cklViaz8+Pq8W9aGfKos\r\nUOXj9T73SQ4+ukZVz2Yn2yw2BtszDtn16p58PAp2gvRXJtRxZFWOxgR3EudP\r\n3X38uMYN/9+ZPEw3A/Ji6DuHf8bzADUp5GoVoJYSlQ6Qa85lJrHbD+x2CRdo\r\nqjB8jqUb4RaGwNj85haPGGuiXMztaINRNLbC9w8gymEeeYni0LNJSmJcdAPc\r\nu/j9ZdgE0CasWVPoJrNQjKnIwVUGlAGhNN9RlRG7eWq+C6gGhUYzbpN8RuAj\r\nJVmkdkL3hwsaMtYnXumPsfR8MSLKWXegKcv57UjXVk00aZIdtVYqLps1bLg4\r\nZ8nchZK5PSrLlDK7aG3pzGysWQhKb31eXzqRpOAciKP6TPhBxsimUbhKL4SN\r\nUVxdCZqvanJX7T2pGHMpNgxgpfEAg48ZDoOMZIXHSYP8qiEtpVvI3X76bkd+\r\n6+EnOA1vn9Cj1y1YBUrRO7NkJuoYt+LDBL0=\r\n=fbqF\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button/styles\";\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nThe `mdc-button__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused button.\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.**\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n**Note: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.**\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button--icon-leading` | Optional. Styles a button with a leading icon.\n`mdc-button--icon-trailing` | Optional. Styles a button with a trailing icon.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n`mdc-button__focus-ring` | Recommended. Indicates the element which shows the high contrast mode focus ring styling.\n\n**Note: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommend always including it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color-or-map)` | If a color is passed, sets the default container fill color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`icon-color($color-or-map)` | If a color is passed, sets the default icon color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`ink-color($color-or-map)` | If a color is passed, sets the default ink color to the given color, and sets the icon color to the given color unless `icon-color` is also used. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color-or-map)` | If a color is passed, sets the default outline color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v14.19.0+x64 (linux)","description":"The Material Components for the web 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/density":"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/button_14.0.0-canary.fdc37a445.0_1646074012309_0.5802530848752048","host":"s3://npm-registry-packages"}},"14.0.0-canary.43c7d87dc.0":{"name":"@material/button","version":"14.0.0-canary.43c7d87dc.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"73acc9293d4673a27deb358c871163919ec60b25","tarball":"https://registry.npmjs.org/@material/button/-/button-14.0.0-canary.43c7d87dc.0.tgz","fileCount":40,"integrity":"sha512-hQkHXA7cazK5WdP9vMAc+biOKC8tKmTt7I4bSuEEOKfV757qfy0/7xTVcBYHv0yFpAspPsim+MxW16rTkwzWAQ==","signatures":[{"sig":"MEYCIQCNR6X1xtVAwqb2dsRm+TOztsPkMsLROM1g8hts20aiOAIhAOaKfv3VOrCW4foLpiS0nlzbz9Om+p+M8TFsq4TF3GWh","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":640030,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiHjzhACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmp5lQ//XpQazvlX+QSOqW7vS7aadTnpEuVf7L1GI550DM/S7oiXXupG\r\nd4XtyuhEDYD6pnpzT2sFA+whYSQvPtFpqNCnMMv0RAkxSq7qZtx7vde+ZFpi\r\nIdyUFnDXySCszmey/7d6A6z8hu5MqHYGkHLizCBp9+G+4425ZgzEbhCTjdLh\r\nSfk349+PUfGtj7tRTR+qyZOMt3A6a7Dnq98YP3iWuL/+cFHrEqFPPlkCurkt\r\nGyQ/uKCYHbI8nL+a5ejS67QqwnFTNxTpDXvDS8pbAJGQw5dkpSK11J4aOWjn\r\nSuX2H6w3jJvmjly9/Aoin13o9LNrWS+ymUqgD/YPA0qU1rsMeHdq80e8Pzt3\r\nvULeoyyrUIs7VIcQjr7sjPpmjeqk/4E5ICFhcWKaFp7bzEyUDg6mNW4aj3hv\r\nj/GSK9R/BTHOUxVRVTD2nS/T9o3HxkjmEGH5RwlE7hdl7al6F/6v/WS+F/M/\r\naG0O4O3rJksh6Tj4OiNfpLO5WFacteA7Cn5I/smkCBVZH1AnCiiTy7CQ7HPr\r\n1reerriZBVGJy8SVtbdyCmpYB+eW1SyGyg2ogCqqb2E+xIIPpQtorJjLseGB\r\nrvkM2xFb7qKMWGD5GpqgDIHphmM0asmZ/fx7VF7E7KR5iG6bbnNfAK+i/Zyr\r\nixdoqLh9BOhfPbDJTGvWJKhMnAV9DGTRihI=\r\n=1g84\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button/styles\";\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nThe `mdc-button__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused button.\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.**\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n**Note: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.**\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button--icon-leading` | Optional. Styles a button with a leading icon.\n`mdc-button--icon-trailing` | Optional. Styles a button with a trailing icon.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n`mdc-button__focus-ring` | Recommended. Indicates the element which shows the high contrast mode focus ring styling.\n\n**Note: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommend always including it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color-or-map)` | If a color is passed, sets the default container fill color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`icon-color($color-or-map)` | If a color is passed, sets the default icon color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`ink-color($color-or-map)` | If a color is passed, sets the default ink color to the given color, and sets the icon color to the given color unless `icon-color` is also used. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color-or-map)` | If a color is passed, sets the default outline color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v14.19.0+x64 (linux)","description":"The Material Components for the web 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/density":"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/button_14.0.0-canary.43c7d87dc.0_1646148833743_0.8434850888551542","host":"s3://npm-registry-packages"}},"14.0.0-canary.23043acd0.0":{"name":"@material/button","version":"14.0.0-canary.23043acd0.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"85debc3a7edc2e09125a225bebf837854dd2a7af","tarball":"https://registry.npmjs.org/@material/button/-/button-14.0.0-canary.23043acd0.0.tgz","fileCount":40,"integrity":"sha512-21SdCOjjQtEI52OSff1CwHRCfuJy/gyC7lYyFu7bzJn5wmlGACDmUFZvvW+WXz0+JN4nzGVHhQ9P7KVd2N7mtg==","signatures":[{"sig":"MEYCIQDLsj6T1baCu0RDzMOnCYxZLgzsrCDbiv14q6/6tFS78wIhAJFxIhCrrTmzSq2PuwfAVg03YGLjlnW4Bvf+sOUGqpuz","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":640030,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiH9NXACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmr+kRAAk6TNa0PiGl+17tkaBAnb1oheNJhBfp2KwLNybgvfwi8weWIB\r\nHUXw7FnxU01ZQczHn8ZhuQxw5YLaH1tBWn/GjpGiAqTdihvYRrmQIjcmTBvM\r\nfG3wB01I7L8/r82+WcnctXPVc2/jlcW3tx08MBRBuVck9dtCAlSQE2WRADaF\r\nOgOS0jttYc/ifiv81KTPLfhNT6dbiT/cxJk4iOI+4MpG1LpIBdBy4fMcb5co\r\nQxINtQzx16IsJjTDvk4rw+tay1HEmUYFXm2/hoOxg3XzROzyHsLktgdVeXE2\r\nvEVV8qNrOkTdEvDByYrkHWlgxoURsLIINb3idmoTwT16d8aGjrNs2zL8/wkG\r\nbNalYb/HSfW9wOruYGtjTh+4jIdMJR3bCdVBWS/0ozC6/FPJbOBbkbnUd197\r\n7LDYU/JawM2Ly2lz5yNvzNBgwsfItADxAxdEndguBRBsJnxZWqr+/ezVn1lB\r\nYB3EXjG9/SKj+ZU2TaUdISA0HG9XNxqEA6EL2uwW43IHn6gBFJL6Y0F1phFD\r\nq19yCWaglEDrwVloAlueGHDB0pitEtITjFAw3Vp/Yjh+qMi/pBl4G2dVcCn+\r\nFqmxn7Dp6Rmy7o1Lckf/UyRbkdqf2f6JdEwy1ITW3H67AsITSKht4UfeEJLD\r\nlnjVLAxdPQi5cFlj5Y9kd2yvPFYryHiE1LA=\r\n=MVsS\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button/styles\";\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nThe `mdc-button__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused button.\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.**\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n**Note: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.**\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button--icon-leading` | Optional. Styles a button with a leading icon.\n`mdc-button--icon-trailing` | Optional. Styles a button with a trailing icon.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n`mdc-button__focus-ring` | Recommended. Indicates the element which shows the high contrast mode focus ring styling.\n\n**Note: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommend always including it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color-or-map)` | If a color is passed, sets the default container fill color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`icon-color($color-or-map)` | If a color is passed, sets the default icon color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`ink-color($color-or-map)` | If a color is passed, sets the default ink color to the given color, and sets the icon color to the given color unless `icon-color` is also used. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color-or-map)` | If a color is passed, sets the default outline color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v14.19.0+x64 (linux)","description":"The Material Components for the web 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/density":"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/button_14.0.0-canary.23043acd0.0_1646252887396_0.43382513458544913","host":"s3://npm-registry-packages"}},"14.0.0-canary.6505e61c5.0":{"name":"@material/button","version":"14.0.0-canary.6505e61c5.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"52f8581999ddd4795f584d337c9b2c717f1487be","tarball":"https://registry.npmjs.org/@material/button/-/button-14.0.0-canary.6505e61c5.0.tgz","fileCount":40,"integrity":"sha512-0SDgB9qttrGQHtdqSliWsmkqnR6DYgYd2Cwehpchfx0tEyeT63hff8gTeMogPN6ZkvBzJu6jP0YcDIMroH/twg==","signatures":[{"sig":"MEQCIAU5zgVRV5+6fUMhBINGESQdHEcnx8m003u+Jm0a+SOEAiAKSURVdlti7rAfNu+DQqdZM1ihYBOcYfEY/xLjZflCXg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":640030,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiIR6YACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqTWw/9HkVeg09ho2p0dga1k6aUXHZJm/XWbwzjsQ4MP/hy9uUJRv4n\r\nBvZ0TQAdq1jztNgNoYIiY8lDIN4hQZdfh3LsYxlnO0xmb2k7AeR2xbr8NyW3\r\n2Wpmr2JsqQGi3HJeWjBmUT5aMFYP8BpRMSyjtcprCBnF5OvgTkN1tfo8bhsz\r\nT3WFHCgJSc/EeEF8gy6FaTTWwCKMpOKryOvWOT2cjBnZbg9CF1hRao1ghPbl\r\npr9gABTq4TR9t+TCWIyt5kHGcCuDhVJ6sWu06oDaiAOpxwbMebhzPxAgKu0P\r\n7AqOJDuJrCcbmbbUeNsUJwf61kpntVzP6/lj++hxvnKSTyB5fMUKLaqQuA9M\r\nrJMx6B618Mud8GcDcWk4lNuheTCIvgQ2h5rsfA5okEyLB5TlWnkf9QD7zv67\r\n6b0KazfJGWTfSuv8IfnUHTUUzBT/nO1mj1Q6rb5Bs7EZeWQrv48lviIIe5Ya\r\nv+8+IYmX36YI6RIq6Aze4toNpWqfZO3oBtww9UxFFyk4wUPCq8R+KRnE2wh2\r\n2fShbNPyYt82mkpuaTutZgxRPDjzu4ZAj7KRyUcGq+r6Xf/utI9pOBrHTrfP\r\nRyBEzEwA6FDgHZXAYZ7VpkmAAddV+pefvsCBZ+cF3LAbRYUuXzVOajQy9z93\r\ntNA1BSufYFGIG8SDA6+SBXqJ6dHcQskcig8=\r\n=dQxa\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button/styles\";\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nThe `mdc-button__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused button.\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.**\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n**Note: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.**\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button--icon-leading` | Optional. Styles a button with a leading icon.\n`mdc-button--icon-trailing` | Optional. Styles a button with a trailing icon.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n`mdc-button__focus-ring` | Recommended. Indicates the element which shows the high contrast mode focus ring styling.\n\n**Note: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommend always including it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color-or-map)` | If a color is passed, sets the default container fill color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`icon-color($color-or-map)` | If a color is passed, sets the default icon color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`ink-color($color-or-map)` | If a color is passed, sets the default ink color to the given color, and sets the icon color to the given color unless `icon-color` is also used. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color-or-map)` | If a color is passed, sets the default outline color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v14.19.0+x64 (linux)","description":"The Material Components for the web 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/density":"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/button_14.0.0-canary.6505e61c5.0_1646337688202_0.7646069295027527","host":"s3://npm-registry-packages"}},"14.0.0-canary.16c166154.0":{"name":"@material/button","version":"14.0.0-canary.16c166154.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"1fc1c19686cf55dff68fc5be595e1f4cbae4a567","tarball":"https://registry.npmjs.org/@material/button/-/button-14.0.0-canary.16c166154.0.tgz","fileCount":40,"integrity":"sha512-NYmgcPBb5vnyXX5Qj9P04PpTDTxDCTo7oVxDg+SjMXyM3/widZzaeCQ2ngrWmzc3M7gwGwky1yz+UX54dZxlPQ==","signatures":[{"sig":"MEUCIDHkxW/VNzZiijLvKTE/y6DLM/+nBFShi1JZSHHTQehbAiEA3ERjDee8ZlVOLW/o6sjLx+FQ1Wd0qJbqUfFvmVfVDSA=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":639637,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiJ+VYACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqUcg/7BhNucSPDY7TwbjciHY3nsymQa+xGMEHEwxvmswH24yCic7hM\r\nSse/yW0u7Qz/yaYjHufTSChayANlL15d1rQq2X9Cm/A7buiXn5eo3E+JzbYV\r\nNq9qtJEL70usP4zFyQPfugd9CUtTGEUCkfSrm8MsPMj0BkXWP9+49jF9dx0T\r\nQTOvR0zoSiOS/Ueia2qq+4T92EEqKKAvn7ry1wjcZW2CZQBfrXZELfsYoNyo\r\nMzUkY3pnfOl9auzLhNcYLzDYNyaPS0qTTaC2/ZPn8Tjl2xtH6D3avKngW6pk\r\nyfzxu8ydBNFC3r/rpnhgLaw2akMrwGoIzD3fXA1CE9CEmHxaiCdy4inWpHWU\r\nkYKovag9ZfEwPBuBvcuehr5rK4TtjxJclevOdfLMqixQkIToo718HzEEtq0o\r\nv/xO7+dcwWF7rehH+blt86wcXjBMQ1zavhL0lMVmjBIgNXMplun7mgm29Sjp\r\nrPMeheAdoT8Ydi0ZeJ0/40UqAwsg2NGkMv+7RnrB+Uz3sjSeLqR//Xl6BfF8\r\nRPWhqCANc9r3k/DtIDxzqevkTIMITMPkW8xXEJ963+NWnezCcrB/qdhFXZPx\r\nEOJecXj7/1UO6GONQXa09nilpuNjKxnq+RquC7GJO7DCbSnDbXcEdbPVloJG\r\nK6fgrjlhF1QVxfFAyW+DtWuEPt9iuFdxH1M=\r\n=dOUV\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button/styles\";\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nThe `mdc-button__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused button.\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.**\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n**Note: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.**\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button--icon-leading` | Optional. Styles a button with a leading icon.\n`mdc-button--icon-trailing` | Optional. Styles a button with a trailing icon.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n`mdc-button__focus-ring` | Recommended. Indicates the element which shows the high contrast mode focus ring styling.\n\n**Note: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommend always including it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color-or-map)` | If a color is passed, sets the default container fill color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`icon-color($color-or-map)` | If a color is passed, sets the default icon color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`ink-color($color-or-map)` | If a color is passed, sets the default ink color to the given color, and sets the icon color to the given color unless `icon-color` is also used. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color-or-map)` | If a color is passed, sets the default outline color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v14.19.0+x64 (linux)","description":"The Material Components for the web 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/density":"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/button_14.0.0-canary.16c166154.0_1646781784033_0.891222482622205","host":"s3://npm-registry-packages"}},"14.0.0-canary.bdf1d3771.0":{"name":"@material/button","version":"14.0.0-canary.bdf1d3771.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"9b2e8d854955060673be2a2740eeccf9300d3188","tarball":"https://registry.npmjs.org/@material/button/-/button-14.0.0-canary.bdf1d3771.0.tgz","fileCount":40,"integrity":"sha512-FUUuUcWKHMFki/OqqzyZm/Us2Tlv9KsCdo1ZqPAxqI5b1QbHdjDFifbRDEHFnmiIg3vibOnjboGS5zXFUOMC1A==","signatures":[{"sig":"MEUCIQDddnT17X0Ot0D14dDvXoWdBxzsx99qyRK6b9Qvf44zXgIgCjdzcK88/5tVS6cKEF6oVaWIKvwAfoEAlkVxMPLAvJg=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":639637,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiL1FEACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrPjw//RGubXZOzfLAcBH1lhMCPkiE6rnF4YP4jNLgknFNw9geaFHNI\r\ntCQRotMYoWcVk80kvwUcGAVsB0RtcoADdeOUo1xYmtAqWTzH0camdK1HTu6b\r\nR610mSimAdBmAVqepXYeCsANqM9sTqH3Bo989DD5FJtMHWCiMQQcQfECXkiD\r\nFyFDs9AGRPfLEeLQ26VHkipptGqZ93wUOFSEHS5Uokyw6Th7JmwlpsoRMLgJ\r\ngDLA+AzfzUNm7kY7FEmScly+iUHnekoroNOqEUuZ/js3YMj4OPZngiHE24CQ\r\nakmJA3MVu3ZhedBtDnCou0F4F/bjYpxvUANovy7nBkKDKD79v+TojpHOotrW\r\nRu0BcGtSKFgZFosSYA/dOF4FQdFkpjkBYHMqU+2vTtKY2zqDZImBAQS8q4kx\r\nuPV3BmDlSzE6Rw7FQkauX5wLeV8DI3vMnAc65oIZ0/nkBrOsVvfssaXDAm0x\r\nSrLOtMfVpEdiREaXv6RqKgKnFUYlzLQu0Yieqc1E54G2kQ6aSY7fykSHk8zn\r\nYeeFCM2dcM/6WjZ5TBL1ffVn98swdmWsZcvPYx19XlwtOwD+IIryq93iWWm5\r\n130t8R8HeDZXF1nZKKHxR0CSfjbsbvkrvf2PCkIUH9l5Q1A6epF4u19kdLtH\r\nCi6xE5HkQC87ydQ5XxXPmyYu+qqLRjZPku0=\r\n=xFC/\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button/styles\";\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nThe `mdc-button__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused button.\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.**\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n**Note: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.**\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button--icon-leading` | Optional. Styles a button with a leading icon.\n`mdc-button--icon-trailing` | Optional. Styles a button with a trailing icon.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n`mdc-button__focus-ring` | Recommended. Indicates the element which shows the high contrast mode focus ring styling.\n\n**Note: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommend always including it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color-or-map)` | If a color is passed, sets the default container fill color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`icon-color($color-or-map)` | If a color is passed, sets the default icon color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`ink-color($color-or-map)` | If a color is passed, sets the default ink color to the given color, and sets the icon color to the given color unless `icon-color` is also used. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color-or-map)` | If a color is passed, sets the default outline color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v14.19.0+x64 (linux)","description":"The Material Components for the web 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/density":"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/button_14.0.0-canary.bdf1d3771.0_1647268163826_0.6767249716630253","host":"s3://npm-registry-packages"}},"14.0.0-canary.cf4292778.0":{"name":"@material/button","version":"14.0.0-canary.cf4292778.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"fe4f5ddece6233db78a60148f553f51b20179d55","tarball":"https://registry.npmjs.org/@material/button/-/button-14.0.0-canary.cf4292778.0.tgz","fileCount":40,"integrity":"sha512-8++4E/OzV19iIy9+tllla2BtAJYLGGi3BROko4gZ7ouwWV36bHJAKg+XUPzxymOxjx7L/oi3eiyK/rBUJXojng==","signatures":[{"sig":"MEUCIH09OeFv2ol//Mu5pmpw5G/HgnyCD0yH+pZhxH1tEubZAiEAlhVbc6/a4Wp154S4sW9P4h/XGRif8HB4VFla12UkraA=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":639637,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiL94aACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqA8Q/8CiE6AS4uVhBNijyz0jZe1Y4s95/5AKMWvmCPvBcuuGDj0wOM\r\n6yHn1nKdpWTfMH6vBoakOBJlyY8uZaZyq0VbIK1NOXyoIq+HxAxPjCiyFxtG\r\nl6FSbgftKFAgw+guhuRdMDsc/en3pWWXWfakjn/yOK8JVbohneRAV58uhh8/\r\nt2shTRrXJ08ziOPZjuCcWLkPMEW0wNirkKE5PLLEzTVBsll5KDq3jKrYld67\r\nVij8o/x8Q2rBrDRSU0h6r6d5TkIrPCFJATzqpx5MwVGCYEfcdn+I/9+yMjMK\r\n5BmP2lP7gLf5KkEuWhdnrRtN/WEmiB+c8sDLMdc4KVw5TVs69yctDjIT58fy\r\n/ic9f8fsemfykyrEwe9Lu0gdymmtF4k58aq7xoLwW0kFKoW+yw6lEXPd2RIC\r\nIAnYek3srUwb2JpX0NpLFqmSFh3PMgP70sTO8onOIpn1Xma0kmJbYsgAWKDV\r\nyyeIdDvT4+kBYLmVw+jFTreA2886Xi/v/WCsDTIw3k7mCQGczwOs2JJBaS+6\r\nBKGrOf/ToqJtSDiJJqmSB1PWKpCPMdvHtdffpbrp7AIUdhS731KdqknXbeMS\r\neme0Q0OLultnkX3UwMBHY+ISwIR01Z02hYAXVL4QZmvOLzWkan+LgQANqO9T\r\nrFz5rK9plTBjUaVUZL5djsvR0hDQ6vXQcOs=\r\n=H6ZL\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button/styles\";\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nThe `mdc-button__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused button.\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.**\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n**Note: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.**\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button--icon-leading` | Optional. Styles a button with a leading icon.\n`mdc-button--icon-trailing` | Optional. Styles a button with a trailing icon.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n`mdc-button__focus-ring` | Recommended. Indicates the element which shows the high contrast mode focus ring styling.\n\n**Note: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommend always including it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color-or-map)` | If a color is passed, sets the default container fill color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`icon-color($color-or-map)` | If a color is passed, sets the default icon color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`ink-color($color-or-map)` | If a color is passed, sets the default ink color to the given color, and sets the icon color to the given color unless `icon-color` is also used. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color-or-map)` | If a color is passed, sets the default outline color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v14.19.0+x64 (linux)","description":"The Material Components for the web 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/density":"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/button_14.0.0-canary.cf4292778.0_1647304218637_0.2718344752763995","host":"s3://npm-registry-packages"}},"14.0.0-canary.bbd43e0e0.0":{"name":"@material/button","version":"14.0.0-canary.bbd43e0e0.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"3e729e50c332298510945437803f42a8018878e5","tarball":"https://registry.npmjs.org/@material/button/-/button-14.0.0-canary.bbd43e0e0.0.tgz","fileCount":40,"integrity":"sha512-FQLZuzPI5/t0UxUMiRhnjwgwbOTku1hWwRC3dL5idvDnZ5P/mGrfW9VzbOZnZhkCURn27YweeQ/VjWXojgHxuQ==","signatures":[{"sig":"MEYCIQDeFbNtP/E2xO2o9t1ZKlMYIzQzkmOebVIUoChSLGbHNwIhALtPwJVsbvHX5E1lpfctIbyUT80GOJg4jm06H+N3SPEx","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":639247,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiMk2lACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrK+RAApS3FO7ydkDlnlP5+In/UJHRFa46Q3snIZcBeoJRzusVBjncS\r\napS6nw/qWL8DTRIfmq8itedLCKyU8K+ezQSGcWec3kL4T1FrHHQ7haO0FVSy\r\nrfswHufIYEEho9GEkr9KTrU1d1IZMZvf4HpoS47JrRIif/IYoJiv47Mebvpd\r\ndMtNK6/uhkEbWqfBYIq9ZXqg4AlbYTwuF3zEldj8lwSamq6eNmfW0Agh8NA4\r\nx6oJoGSDbm8V9JQG573irkvQz5In4Mi9i+vBeqzxBSVvpxxJrSz6aQJDRAby\r\naJ18OcM4vy2BN/L976wXwtJCVfoQW6yGkxAdaOgEs8lyrxPSCw6WSUS+uoQv\r\nUcqKC/MjO8t11ULoEvW9PTl+26d89xIlletRQeNVyXAqpdb5JJUthw/WMto9\r\nOaYbFRUC5Ca/wTfKCgkmRmHqEydA7sQBqSK+Ca+6MMT4tfnojOevuUcZFefB\r\nDcsDTkaOVgowKQWP0KOVTnt+73EDcs7lE3uSadZ0e7A9yW9pPcy9i8nObkEK\r\n74xlKetO+N4aefEzdP7K1xqo9IPldWg3j3eZnVjHCMGb8pkXo4pKcS/tWYb+\r\nzz2msy0VcKRjjttr6pacrsDkT2T5dx58HKconGB2NEK20kAVYRX73LZDYuPx\r\n1TDjNVb+9LWTsLg+VdNsFCyGkfI7RGdHwgU=\r\n=8oKk\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button/styles\";\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nThe `mdc-button__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused button.\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.**\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n**Note: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.**\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button--icon-leading` | Optional. Styles a button with a leading icon.\n`mdc-button--icon-trailing` | Optional. Styles a button with a trailing icon.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n`mdc-button__focus-ring` | Recommended. Indicates the element which shows the high contrast mode focus ring styling.\n\n**Note: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommend always including it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color-or-map)` | If a color is passed, sets the default container fill color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`icon-color($color-or-map)` | If a color is passed, sets the default icon color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`ink-color($color-or-map)` | If a color is passed, sets the default ink color to the given color, and sets the icon color to the given color unless `icon-color` is also used. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color-or-map)` | If a color is passed, sets the default outline color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v14.19.0+x64 (linux)","description":"The Material Components for the web 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/density":"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/button_14.0.0-canary.bbd43e0e0.0_1647463845404_0.5177949576548704","host":"s3://npm-registry-packages"}},"14.0.0-canary.1b6afad86.0":{"name":"@material/button","version":"14.0.0-canary.1b6afad86.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"5a6eefc8f4b1e6bb519792d194cdc17ac2dc470f","tarball":"https://registry.npmjs.org/@material/button/-/button-14.0.0-canary.1b6afad86.0.tgz","fileCount":40,"integrity":"sha512-Dc2kI95alroTOS8WcjoIEilqfBkmhBmDjYIndq4pcBOpMgM6vFLCBOLlkRhtjstkwqmXR2tuuXkjQAstQZz0hA==","signatures":[{"sig":"MEUCIQDP9z2uga1zJ6RiS0T2n06+qHI/kzcyfreqZa7yhNaBoQIgO4wK82+aLVFjmcmRXGR6A7AlrnTwphe4dDRJMigw8+0=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":639247,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiMlDRACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmo16g//Q9AkTl1oxZJqA00qTENbE68nl/rh0sPxx5FBbauvq3qwaqci\r\nRRcg28OdKkEU4LTq5CrlIqKiiFzOfqZez0YBtltH/29SpCBYI+XYpFNflTup\r\ng2mhQ3o7v8Fr8hPEowVo+e0MeeR8k486C2j+eBAaKRaQqW70mZTFeygLewyZ\r\n33HPySH24P67e8svU7rxHIq4NerAUZ6pTElfB2PvgCfpF0Ntdjdp8kmE0Gw7\r\neSWpOoNze5/DuAblGkiw4t4vncQjDTNM6lpAJoKfn7umHwgukaSeVzKZhLYz\r\n3HsR+jxypzkVnaJpIAVJR5yc+t5C6lYXTV8hVnuAtUb8pFPRNDeFK5zfL3qy\r\n18ZAWpDtVB9IsDWnSv9iClYEAB82ZKE7zK7GfgsXpVrTnqqe+hRgtDfExak7\r\n7LO7/cD3Pn1vNrF8DPd43oIOpQZCq4dYt02zjBlunpS5xGPThRs5p+/FQYAa\r\n9URvWEiougzpiuKRsiBsQ6oVtYO7oQYsi6OLZSTZpZFRPgggY5RX9C0TIoOP\r\nR1Ni09hRz1D+tdcTMGIH05shMrIkNxs0lwq+APIX+NFKPKxm85ChqutTWKRa\r\ne8rhjyu9j28kCEYkde6vk6fgp+TaALiSlLFTi2iQI0DgQX5otMrefKW0UToy\r\nttuoB3N9M31qUTsztiF4YxtgwK9nsrVdheE=\r\n=yvc/\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button/styles\";\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nThe `mdc-button__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused button.\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.**\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n**Note: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.**\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button--icon-leading` | Optional. Styles a button with a leading icon.\n`mdc-button--icon-trailing` | Optional. Styles a button with a trailing icon.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n`mdc-button__focus-ring` | Recommended. Indicates the element which shows the high contrast mode focus ring styling.\n\n**Note: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommend always including it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color-or-map)` | If a color is passed, sets the default container fill color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`icon-color($color-or-map)` | If a color is passed, sets the default icon color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`ink-color($color-or-map)` | If a color is passed, sets the default ink color to the given color, and sets the icon color to the given color unless `icon-color` is also used. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color-or-map)` | If a color is passed, sets the default outline color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v14.19.0+x64 (linux)","description":"The Material Components for the web 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/density":"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/button_14.0.0-canary.1b6afad86.0_1647464657742_0.4815002718274457","host":"s3://npm-registry-packages"}},"14.0.0-canary.bdf9d4af9.0":{"name":"@material/button","version":"14.0.0-canary.bdf9d4af9.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"8e1b4878568d42b001a9389b5dd22a3bfab97f02","tarball":"https://registry.npmjs.org/@material/button/-/button-14.0.0-canary.bdf9d4af9.0.tgz","fileCount":40,"integrity":"sha512-w2kMrHDII3ZXUufFrxqXvnw4dUKnG7TUSc7s2IzSNHFe6sQ+21JK+YZnYmghKyyjC/o0sSli9MotVSljzUzZxw==","signatures":[{"sig":"MEUCIHdWrRxIorBIA63uwf1GTrdpuqNE19FvAEnjmJtyA6wyAiEAueZFq/gK8aJktmFZxjxSv7QgpBFJVP2EesA13esss+g=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":637574,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiMlQpACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpjXw/8CCRvVutdCgxVpPJEqCM6Swr3AcEV7Mj4qtl5snBiMU8l9gE3\r\nUNAjOPFBHzVi7JAbjLXD3vtiIPfjgwxjAjQk+qghkQxl/8PwVFQxWJJavRpl\r\nmW3n+lpu2Ml54ekMhuxZ/x7RpSdB6n1TGZZyGPPaG8FshO7gSU1rxXzux7po\r\nEEcp+CTNxsUvemmZrOMtPf34fEJSTG/zCgIKhp70jobp4IV3zjfX2VEWW6+y\r\nmMIsY8AbsDO1QJAZwPMK6cxdZS+ynb0xoD2PiYXZTPavAo+zLMyjgRBscMy3\r\nTUDyPsdRGFpijujdpI7kWn7LubH9tTrsCyujhR96XA/aR15kyCsGQ1BcRKse\r\nCqY81zqboB9ykltEFukJK5J/BQWJFEWoIfN7rXwFEPWjYFwJE+v1ztv6EGlQ\r\nFpjDt44yO7P8QTvZRAmwrip7bpWZkuyl5KMxFmRHpyo2T9SbZBz827JWrNtC\r\nKTwL8aAjzurLVfppCP4k2y6hRm2RYBEOn5suSbtA4XBkcpn1PfIU+ByMXOw9\r\n8T6fgIHFHO783CbKZPP7ODiU9Uqxq3s9gyhLo3TbDlApN6zoLwATCsxf4nYm\r\nQ52zhW6gS+yGtatqq0zfgJrtsyQqa3PZ2FgGTrhl93DjoIad4Llqzh2eO8k3\r\nNgHyiGcuw5SZnSYnn8XF6ZoYOI+lc0uoO5E=\r\n=yKVP\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button/styles\";\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nThe `mdc-button__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused button.\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.**\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n**Note: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.**\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button--icon-leading` | Optional. Styles a button with a leading icon.\n`mdc-button--icon-trailing` | Optional. Styles a button with a trailing icon.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n`mdc-button__focus-ring` | Recommended. Indicates the element which shows the high contrast mode focus ring styling.\n\n**Note: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommend always including it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color-or-map)` | If a color is passed, sets the default container fill color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`icon-color($color-or-map)` | If a color is passed, sets the default icon color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`ink-color($color-or-map)` | If a color is passed, sets the default ink color to the given color, and sets the icon color to the given color unless `icon-color` is also used. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color-or-map)` | If a color is passed, sets the default outline color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v14.19.0+x64 (linux)","description":"The Material Components for the web 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/density":"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/button_14.0.0-canary.bdf9d4af9.0_1647465513592_0.47789871197427924","host":"s3://npm-registry-packages"}},"14.0.0-canary.32b391398.0":{"name":"@material/button","version":"14.0.0-canary.32b391398.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"159c05973a8529f278bd08a48047a15bf1a298ac","tarball":"https://registry.npmjs.org/@material/button/-/button-14.0.0-canary.32b391398.0.tgz","fileCount":40,"integrity":"sha512-R3HB2TXm2lX0Hv16zCWNSkxm1YCdmCplcHnemcpS3goSCxsjpfWJqdZvH+kykMpEzUr9siqxaDLJcf+85PfKaA==","signatures":[{"sig":"MEQCIEEqgaAPOkHXL6GXYaY2roNnXjLY/lhotcLiXKG89kWvAiBmEw8B18p3Mziw7EL04XRVIXjxgkQCrCKDo64pnuKC6A==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":637574,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiM3ciACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqHeg/+PSVtAZEKCksNVBCJN7knNopMzeyDVrhbdzaKSdDQXPdeVNIh\r\nCnBatnbfSYuj77IocgdjvsvU2XtGfcXWeEqbq6Xdc3j3jcxQV5h7IlNdCafB\r\nNWstjmA0DCPkl3i4B9QUohNn4ArixTncq7WmlNoWlw+Oauh+szEV4Rw5X26D\r\nCjpSZ5AVnCB4KVLc8Zt0hRVe1KpGuKXvKX5gspJWrN3WLNI5IYpljmvnc8OH\r\nAD69qqJ2TWFPnvn+ZJhamcvuTk3msY2rIvY2+UMe/g7TfEwoti52+hhCivzi\r\nq3g6RB64RiXhoK0obJe0qwpEdp4vyI/c5pAJhP3U0LPf7SwbZtD8vi50Grn0\r\nkQW4nnJC9fuiD/vN8HUVo4cAIZsPwr99s+DWY8h9bc5PwfuPkLCGPceUcNES\r\nFt7B//oOLqssXuO6A9L87JQM0Surt3i/zNZ99Y+Y/WQTTh95Wxa3jhjVzfsX\r\ndo7RXDpIFfNy6atuv2U1Fucx1f6jGcyPOryMjWVKsU4VX0/ubWCjpGfd4wS3\r\nFj6D+77OLilyUd2r1b8D/6gVJTx+HGzGyVU7csMvHng0ju0VIgXf9wdVUq+l\r\n3XNaTauAEWUbEB6pB4A3NlSp2+Mmc3rPeYKnkFy3uALkLQIPAY6DK9yza04A\r\nsQEkwrWbh4mmwBkjAEJWBOAgQkjdPWhgljY=\r\n=1pov\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button/styles\";\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nThe `mdc-button__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused button.\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.**\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n**Note: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.**\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button--icon-leading` | Optional. Styles a button with a leading icon.\n`mdc-button--icon-trailing` | Optional. Styles a button with a trailing icon.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n`mdc-button__focus-ring` | Recommended. Indicates the element which shows the high contrast mode focus ring styling.\n\n**Note: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommend always including it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color-or-map)` | If a color is passed, sets the default container fill color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`icon-color($color-or-map)` | If a color is passed, sets the default icon color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`ink-color($color-or-map)` | If a color is passed, sets the default ink color to the given color, and sets the icon color to the given color unless `icon-color` is also used. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color-or-map)` | If a color is passed, sets the default outline color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v14.19.0+x64 (linux)","description":"The Material Components for the web 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/density":"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/button_14.0.0-canary.32b391398.0_1647540001384_0.5005762468607595","host":"s3://npm-registry-packages"}},"14.0.0-canary.ae8a6a3a3.0":{"name":"@material/button","version":"14.0.0-canary.ae8a6a3a3.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"5acc3d26411fb2199dacdbb2b1a1eb9f087db7c0","tarball":"https://registry.npmjs.org/@material/button/-/button-14.0.0-canary.ae8a6a3a3.0.tgz","fileCount":40,"integrity":"sha512-IuY4qh2SOpu2x/S/YOiHArH7uoGJzOoefQPhK7AYWk67Bfsk3iJuA2NoZJcbVcze/VNMBB0AW4AGIq+aZUKhyQ==","signatures":[{"sig":"MEUCIDPl1ZAzX6wr86CqutvrhbMwtiiIftdq3q2SrtlxGs0eAiEA60EC8VREIKBOOIUyy23rQhWTm/CculNKc4J7H3JcuF8=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":637574,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiNLXeACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqiKw//ZQCXdtN9zqsH6Fh5l7lBys47ZfEZ1QtylneTNz0yEfMAgW3b\r\n3xX6V6pAzSN5SlnZnJ9yzWTLilsmpa7xxgb2CcEfKx6wWhurlFIXAsqGijyn\r\n8ALlwwH75wfugwS9OK/1J5wvgQfXbqeW8AoQ5lKyZ59i1e+jJtiN1i6/ROkW\r\ndknyVvC6EsQaVr9t33CrHSi3EDIre3vEGwq7igB7IwQ5YtxUjSMGCS5TmmX/\r\njXBHRoLJovE1jURbOh+Ri3EcPt8ot6f2LT7T9Z/hNgcg6vzaVl1/+m3GfiYS\r\n5jbrntUTWO6e2ZZDhMwKC6Zjo1PFmtLe7dRWB/Am6wlBeVwO4r8ORVjill8j\r\nkmtYnWFXGmloxNwNd9yy+jE4/vgExpKrLnieiPvs2Ypd7uLqbOZ/AUAtVWdn\r\ns9htaDSs5HghFvJmvMC/agegjShuRp4kD2E/Ey6XIiybZX7U996qCLGPLiq7\r\nrifJvh+IqE+B04LUEk3c19f/cdRSuI2DJigNa57lBmUSIvhIz9hCG2Cmh9Pj\r\nH+0yF8h6hnY7L/owZrJ4ORkCPGR4CagyMTsHhlQatpjmv0SrwS9NOIw6kGr4\r\nG8wozVbRkFDhLDymnRB2SZgLqPRl9q0c2//9hXqlKMtrEwIx2ETb0wji6JhO\r\nr/fLB/cblLdikZzBdd7HVAgoKfbtafWAo/0=\r\n=Ai7C\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button/styles\";\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nThe `mdc-button__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused button.\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.**\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n**Note: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.**\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button--icon-leading` | Optional. Styles a button with a leading icon.\n`mdc-button--icon-trailing` | Optional. Styles a button with a trailing icon.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n`mdc-button__focus-ring` | Recommended. Indicates the element which shows the high contrast mode focus ring styling.\n\n**Note: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommend always including it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color-or-map)` | If a color is passed, sets the default container fill color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`icon-color($color-or-map)` | If a color is passed, sets the default icon color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`ink-color($color-or-map)` | If a color is passed, sets the default ink color to the given color, and sets the icon color to the given color unless `icon-color` is also used. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color-or-map)` | If a color is passed, sets the default outline color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v14.19.0+x64 (linux)","description":"The Material Components for the web 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/density":"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/button_14.0.0-canary.ae8a6a3a3.0_1647621598268_0.5568551609097638","host":"s3://npm-registry-packages"}},"14.0.0-canary.cbd9358a6.0":{"name":"@material/button","version":"14.0.0-canary.cbd9358a6.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"f3b5b00abcf7b9162858e0f26526f8c81afbfe56","tarball":"https://registry.npmjs.org/@material/button/-/button-14.0.0-canary.cbd9358a6.0.tgz","fileCount":40,"integrity":"sha512-8bnzdakDBYIRa0bWfzT8/aBTlg2rHRjFQqGFsmIHShR0/roVk9GG0/n0xA0Dq0VVyO1ft6zjW7mv9ER94ciQng==","signatures":[{"sig":"MEUCIQDEnI5YHt4zIxPqkgHn74r+NKQdUpke3IKOTixGSdGPmQIgey0Bs06K+oLmO6fVQHXNToY6BsypDVpow5ukUv9o4LQ=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":637574,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiNQ09ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqE5hAAhFLqlqcsQqqmGKB2yxjnNESYnCwzOuhN4r6whGTlB04J/iVG\r\njSG6SBHEZ3XxCyzpQcsN7eU2N3rT53w3uOuH9rYjdkYbQfSE+ZoHMHGNsc9C\r\n/kbEb838Kw/+uDUBJe75afntCD65tw3ks1tPcks3ju1HVaiRqC+HUE9qtRkR\r\ndzH8TU0t+OHZINZUjyYj1JJyefNRrLpkvmCAyUGimvSeluYYG1TL2BuaURpi\r\n1eGcr4c9V3A01It70gH90ag7I5o3ZojC7e+dmW+OtvIp8u2f6yRP8aj+z5eg\r\nXWRq0UiG8S1kWabhtz9bqVdbGpkcJz+Cbz/TSenJdzJHWxW/NwK3ITeFEo4J\r\nLiuX3K7ooGDUKhad5G8c5lA67568LBXQbdVELJGuLK7rU+jf3gt3ocAhU1jn\r\nw8g8qb0iQrP7CyiOv5cANZMpcx/7xpaQmdd9xU+j1UMN531pAhiUfjPqKjfE\r\nZvIRdd/lj7Udj22rpx8zIYGJi/x45drDAHNT/y2+Q4Z4mnRS1NDZwBEKUqpo\r\nCj7d00rnRz/mF3W6RxSgArpZxE819aXf6afOVhcALlHAle3Rc9MWay/RnD8G\r\nw5SoXomuM8uiDlhuZDoZYi345jYtjyZihb1qXeKRgqYDd9uzJKsOmP9xhywe\r\n0Bo09taar62MNO2mqduajySmi7AaDR+pges=\r\n=O4Gv\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button/styles\";\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nThe `mdc-button__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused button.\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.**\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n**Note: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.**\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button--icon-leading` | Optional. Styles a button with a leading icon.\n`mdc-button--icon-trailing` | Optional. Styles a button with a trailing icon.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n`mdc-button__focus-ring` | Recommended. Indicates the element which shows the high contrast mode focus ring styling.\n\n**Note: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommend always including it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color-or-map)` | If a color is passed, sets the default container fill color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`icon-color($color-or-map)` | If a color is passed, sets the default icon color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`ink-color($color-or-map)` | If a color is passed, sets the default ink color to the given color, and sets the icon color to the given color unless `icon-color` is also used. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color-or-map)` | If a color is passed, sets the default outline color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v14.19.0+x64 (linux)","description":"The Material Components for the web 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/density":"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/button_14.0.0-canary.cbd9358a6.0_1647643965759_0.5666597086719118","host":"s3://npm-registry-packages"}},"14.0.0-canary.dcfe49c98.0":{"name":"@material/button","version":"14.0.0-canary.dcfe49c98.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"5100a6fa95ed6649f5a69e59622f7d7bae83df2c","tarball":"https://registry.npmjs.org/@material/button/-/button-14.0.0-canary.dcfe49c98.0.tgz","fileCount":40,"integrity":"sha512-T6BwRhi9fCr4BLt+qbMa93+da42pMjGIe4rI/+bdx421Rltrn670VTfDvpcEvJ9Sgi9RbJyjOYHL+W0OCPBTWQ==","signatures":[{"sig":"MEQCIAri+SMNeEX8D04OGo9uImuPzQxFevvIRnoUJZBMNofsAiAOM9aMSIqN8Z9rW9GJYKGvBQh8pCzEMCYn25N+USHo2A==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":637574,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiOMegACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqnKxAAltPJG1oCJ692aqohSkM+gclTVMnyOI4VsVicmkfPCb6ThuYg\r\n1RVLxFi4LG55VGdwoEiBAo7pqScyptGY5pgfI11fZQPEN6qfF0+EQBIXz/+T\r\n9LvXHipiXWHwCpP+jluXvAnUYbiVDu0lTQA3h6GSvAilNaHxhs0lt5GK2dxU\r\n7QJm8HHhNaFLsaIJNVV12YdFf9X8W+s2D7XtPfYfn54ZX4+UO+99xzwZrqlF\r\nPfdVgOwJWtjkvMagavOkdJzoOLUKuMdTtKUBAdxqkhQM2cmQVvfEcN2sHXGy\r\nzVd3uCDiIQPPsccghacqElunHcnoaIVB1TXHvufn94FL0nUKPDRkwHQQMnSJ\r\n1L/FZbe2PJczwfwBDQlf3V+u2d/MbsEblzu+nv4ipemtvgqJcMTedSOylI4d\r\nv9uxIluAU+fCY5LZ+6ZfDsXwYjGq9PecZXQ9HMMEmJ1zKhBEckaWu4eHyvqt\r\nky1XZLTIl/qEUfcnH5wQ2Q90A0hdkHl5SahDAccLdT7vUYnP5JtjumudUpeP\r\n+jJzys6JQhSPO+xJ9+b2c5OWVkGBH5Kt5LQKNCX2HiEvp7XWD09mNICNy1wl\r\nvCeXL+RFoKuxizo1Hv+wsAtu5GUDCF7q87YyO5x4P4XunbdcdNqI8eG2i6Vq\r\nTRvMOw+IazsnX3EmLmmUrjYP/VMovCI3/y0=\r\n=Txhs\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button/styles\";\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nThe `mdc-button__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused button.\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.**\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n**Note: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.**\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button--icon-leading` | Optional. Styles a button with a leading icon.\n`mdc-button--icon-trailing` | Optional. Styles a button with a trailing icon.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n`mdc-button__focus-ring` | Recommended. Indicates the element which shows the high contrast mode focus ring styling.\n\n**Note: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommend always including it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color-or-map)` | If a color is passed, sets the default container fill color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`icon-color($color-or-map)` | If a color is passed, sets the default icon color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`ink-color($color-or-map)` | If a color is passed, sets the default ink color to the given color, and sets the icon color to the given color unless `icon-color` is also used. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color-or-map)` | If a color is passed, sets the default outline color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v14.19.0+x64 (linux)","description":"The Material Components for the web 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/density":"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/button_14.0.0-canary.dcfe49c98.0_1647888288593_0.03115684496447768","host":"s3://npm-registry-packages"}},"14.0.0-canary.f31a833fa.0":{"name":"@material/button","version":"14.0.0-canary.f31a833fa.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"10537725daa758eeacfac69b7b69bfe0c3fa978a","tarball":"https://registry.npmjs.org/@material/button/-/button-14.0.0-canary.f31a833fa.0.tgz","fileCount":40,"integrity":"sha512-aIZsnPR4RbjyE/0Zcti26OHO0HXiu+jyErnhB3tkRqaazRTP3MMym8XV/Crs1YQF57TDcfSz4zAbX3dOoZaRdg==","signatures":[{"sig":"MEYCIQDno190wbF943r6GNkEv/HVa3Jig2Iy6ywMZLzLFIBidwIhANwj3M7cZhroA2WW4oKSKaMRJGQm3ZVFiAEvXIC24/Ci","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":637574,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiOm8RACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpIFA//Z97pcd65bRc4kUJnRreeF1dJ+O2vxRCybvQLmL+tegpIaFco\r\nQEjcFCKrWjoiAfm+mChPKTEU9R4G9TmN1Aj4Z2Sy1EcP6uZzaQstKC9D0W8B\r\n3A7omaFqXUgyeMsjQZFbIBheunhPGT5+jJukJ7CMwdokghkryvN/85YAch4o\r\n4BzGphf0bwqV6Y8wIa7y9Um8DRn4InarizXB+NY+Al/g+8Ge8SQk0E2b5Wep\r\nmAroSG2ogu5pxHRqpvVM1CwNhr+w8RwKqt9MCq9tjOuUZjpjNGmQFfJvn83D\r\n07GcUUVqgiHcSSkwa+2SI+ccJaj0L4DGRCSxMb4THE3+T36pM73YKdUWD3JJ\r\nOLIPxHcUSiewVcybcELTs9qb9J9e8XgewGhCpeHMUfv0dq3xPh/bj73bTmP2\r\nw56Bq897HfqeLQplBSgZ5HEjNw9wHTQD6/yIERKE1z8r20VOdmJsevwsgIAR\r\nTP/zS7KYzce6fpGkZT25s7M1EcpF2PcOw8jWny6DJ3TJ6tjylFsx/+LPCU9k\r\n39OePpJdUxd2O7OLgFVLvyfO2U+asg7OvOgcS8EplznpHFgBa6sIbJzjeckO\r\n3xhaAnboTdV436SpUn9c3havqrOwjBsv4nBK1bhUjmEKAOqvYHBKYHjRReKZ\r\nz8m7cBJvk+WjGtoqM2frhzWUikenyddoPRw=\r\n=8IWB\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button/styles\";\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nThe `mdc-button__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused button.\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.**\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n**Note: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.**\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button--icon-leading` | Optional. Styles a button with a leading icon.\n`mdc-button--icon-trailing` | Optional. Styles a button with a trailing icon.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n`mdc-button__focus-ring` | Recommended. Indicates the element which shows the high contrast mode focus ring styling.\n\n**Note: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommend always including it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color-or-map)` | If a color is passed, sets the default container fill color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`icon-color($color-or-map)` | If a color is passed, sets the default icon color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`ink-color($color-or-map)` | If a color is passed, sets the default ink color to the given color, and sets the icon color to the given color unless `icon-color` is also used. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color-or-map)` | If a color is passed, sets the default outline color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v14.19.0+x64 (linux)","description":"The Material Components for the web 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/density":"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/button_14.0.0-canary.f31a833fa.0_1647996689071_0.3547288822277983","host":"s3://npm-registry-packages"}},"14.0.0-canary.4b92e210a.0":{"name":"@material/button","version":"14.0.0-canary.4b92e210a.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"f81dd39cc0189f931ecabcacd5259876e37e32ab","tarball":"https://registry.npmjs.org/@material/button/-/button-14.0.0-canary.4b92e210a.0.tgz","fileCount":40,"integrity":"sha512-btiD0GB1QhX4CPv0ERaTrGZqlwQS/KUo/YW8HJV2beV7oQGbY4fdITlPnVg/a2inoMoTxhH8TivrDNM9DdNNBg==","signatures":[{"sig":"MEUCIAf+LNg98dbwp3AcKUxlZU/83q+azb54olSa9vkO786+AiEAim/l5nLKxu+w5XjtFL+BdpIevvKhJ/ctefp0lsquKM4=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":637574,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiPNJDACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoIpQ/9HaDWQ4QgoLxayfoRUAHA7haWkJThXZAg23pnpR/bB4RyyEIY\r\np93ZwsIvtL/k4CaxsWWXv+h5u1qLwF4npgrP3EOgMsZyTYNpJ6fKraEXuLsr\r\nxJFmAZqnf7rHnW6FZ/DnNNcNp4JiJpYryau15Bnw0CQppcH0HIPYIfgz8bWN\r\nv4ACbW2kVKYvlzbzjV7FgrhgFNDdvuXZgerkt2kiR1SOjMojpTL+itkAU1ga\r\nSmbXI68l6Wf+6Lm2OEqSN+uHq1ufBH4EWDxGM4ZSnarXpaUPX/JS1cfqUOIG\r\nQa0tE6fdnJbgmhLeQnW3dFpzEIpGV0S954kbn97H/9ZZZmYz0jP5taBPPFaO\r\ns/6qEwQLBPYeL06cbtthzdHRh+0tHWgUrJpCcNR1VsBEJaLkV4Kc6pU9yYRz\r\neZmBnp4t1p1aQenAyuKeWmxwYEd2zrqlb/z/JoZ/nOsctAI112Dtjzl58sW/\r\nABOZAsZBghGvndh5uHJhVxxUGviUhaBaQCRb9BhHJuDIgGD/vZNGFHsTbWNW\r\nXPQnXaQlgGJbz0AOse9CQ2BrzWZppvzQJptH7bZT6kQjadllc2hNv4C57o+9\r\nOCFI0bABaozzuZyshK/9czLU4FYQAvEX3+VxkYVvVGt70qftBoxj3TpL+Xa7\r\n8dQ0Cl+iHITUqnkwD1c2wLnemdGhTIcmI5Q=\r\n=runG\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button/styles\";\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nThe `mdc-button__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused button.\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.**\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n**Note: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.**\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button--icon-leading` | Optional. Styles a button with a leading icon.\n`mdc-button--icon-trailing` | Optional. Styles a button with a trailing icon.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n`mdc-button__focus-ring` | Recommended. Indicates the element which shows the high contrast mode focus ring styling.\n\n**Note: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommend always including it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color-or-map)` | If a color is passed, sets the default container fill color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`icon-color($color-or-map)` | If a color is passed, sets the default icon color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`ink-color($color-or-map)` | If a color is passed, sets the default ink color to the given color, and sets the icon color to the given color unless `icon-color` is also used. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color-or-map)` | If a color is passed, sets the default outline color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v14.19.0+x64 (linux)","description":"The Material Components for the web 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/density":"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/button_14.0.0-canary.4b92e210a.0_1648153154721_0.6909817237838896","host":"s3://npm-registry-packages"}},"14.0.0-canary.a657abb61.0":{"name":"@material/button","version":"14.0.0-canary.a657abb61.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"2f70ca1f4747d6e6bfca6fe0bfb58e6a01bec766","tarball":"https://registry.npmjs.org/@material/button/-/button-14.0.0-canary.a657abb61.0.tgz","fileCount":40,"integrity":"sha512-WAR6RLHAZqZaU5pwOz3b4PnQSwIXpEhamtnX+NhVPpL5OZoxa/ZUd94W2ZsinYGvTzsIhFdFuuL8+Jmntpk50Q==","signatures":[{"sig":"MEQCIFMNqwxYVQFxStQzMcxox0OyQqqvUYZrCgn2xnlg+KrbAiAaJJJwje9rl9RsTiJo97fWSdz6KHLWPWdSTK/+CnzohQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":638483,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiPNdGACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrBWQ//SO4r27cxfH4PWnjrHHpQceq5Yn17RlYsVocYAKb88iX2hPH6\r\nD2Y8o8/AoDCAH5AZsCy+v98Xlm05ctnNH04Cvqmd0/G/A3cTIejxo3C0xyIt\r\nC2r3F/0w6Llf1TA6ImYKXMqk2DPPLGguVgKtWsmAwyhxrL4to7vXsWKE8dSn\r\nwu91KkUEwxiqcOoaH6U8Uy72679KYteV1VJRUl8HObG9HVxGNdpiGY3cbCss\r\nRxX6yu/nG2lWgcuaCARMCFpE750yxlo8cEO0yzN1/uZhxTSl30xvlux00Ibl\r\n7RkxL4sIBG12YaV93xWz3V785a+MjcYNcu1QjMIJeBxksk2gi+cxiuh6+FrL\r\nM/C48ziCiyL5GeaXnP2mtBMqT/oxufWXQySmghenVwYblrzUhvs/Rl43g33N\r\nFxcoAid0Ky2FOkyuxm3H6OIDm/sLaFjyx2t4n11v3GS/CWLb5J3zU6GQtjLP\r\nSzlnnwMUDSQ2WkGpQUgtki0tt02QWPugw78GPsEQPfxm/cZy9PUhrtXnXVPM\r\naHPoxnVJDeCH0v6QW9ziG14oFd6XPry+FzRMPHiCzquMw6Z9ZoVCikz6MXIM\r\ne5bCTclhjmiUFy0zl8fV0xTCXB8PhXaJCLxKOv9u9X6tI1xiYS27d5hj9ALT\r\nbqj8oa4a+1AuQdXBpWr60VwIe7Ok4jl8gJ8=\r\n=h+fv\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button/styles\";\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nThe `mdc-button__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused button.\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.**\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n**Note: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.**\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button--icon-leading` | Optional. Styles a button with a leading icon.\n`mdc-button--icon-trailing` | Optional. Styles a button with a trailing icon.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n`mdc-button__focus-ring` | Recommended. Indicates the element which shows the high contrast mode focus ring styling.\n\n**Note: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommend always including it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color-or-map)` | If a color is passed, sets the default container fill color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`icon-color($color-or-map)` | If a color is passed, sets the default icon color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`ink-color($color-or-map)` | If a color is passed, sets the default ink color to the given color, and sets the icon color to the given color unless `icon-color` is also used. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color-or-map)` | If a color is passed, sets the default outline color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v14.19.0+x64 (linux)","description":"The Material Components for the web 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/density":"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/button_14.0.0-canary.a657abb61.0_1648154437941_0.8455563320901118","host":"s3://npm-registry-packages"}},"14.0.0-canary.443f63f50.0":{"name":"@material/button","version":"14.0.0-canary.443f63f50.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"b944eb423636bf74b342ea31fe3f8194b03a1f31","tarball":"https://registry.npmjs.org/@material/button/-/button-14.0.0-canary.443f63f50.0.tgz","fileCount":40,"integrity":"sha512-bGKKQw5z8/TFhT71azzfrB4hmBxEBeuX4SZwtKNxuFO9UOVxDIJeB0TKntNQ6zrEJKKdiCe27zN/P3eo8i6HKg==","signatures":[{"sig":"MEUCIDYEMGNqwlObSYn3oaNiBECT8yO/SmHSAUpf+9/lGWCDAiEA729QDiwJBn/LVU93I6ODLDY2feQu8nGAV4pjR2hb7+k=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":638503,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiPkquACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmpm/w//emyKh0HzCQ0HCzDZKFMlMGxlUwWm7JpR+qZnMsXyGgyGsvv9\r\n3EqaFuEUPRowa+aU0wDic0AnAEZns43QRFAwgbCFPZaSwB2Zn8fMCkrGNwp2\r\nTm19aKAV73nV73P4UjLxhyIRwEX+tADxuFHWRuJ9x7u34xC2t26bOGBV52E7\r\nNF4+SJx4It1KWDoTPE+RZ579NPJKU7YCD03/a2SJknn0VPdBCzpWpX6W2iol\r\n2pvWscwURJS8BHqJgours7FZc4S8RgFmyPJ19eTBiBBDhSmdPieXucQFt38I\r\n6/8welP6N0xEx839M7sVc9byEKHHTpAyi64BMOi89BUyS28KVWVPm/SkhE8Y\r\nfd0bUCm94ry/qvgc/ifSyy7F5FfEduRj/k6VjtZcUE+QbqkMQjlbqq+SWd7t\r\nA3Oh0xG9T9DNzdk9qlCgIjRHNoSurDl7b9PDgsQn6UGc2IAnitKGCGWAQocR\r\nFA78uXGJVdKnpVDRiHM8j8YQwrtPRkvbDlJZVu1ZfXI+rWQbeR1bv/A9SiLU\r\n+VpDlVW1xUAYaldnzFNX3ZFE2cwXAmeGOqHZfs6DtTPSnKPMm8prkJ0g2YpR\r\nBX0Uai9PY8CQarIHGZ2Omxp2fUj6tmC5Jt9FxTF+Lga/RbHPPypDPTUOOcBW\r\n1ZF7PHEcNcsiOyhTPWiOhGP9z5cd9JYJ/JQ=\r\n=pf6o\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button/styles\";\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nThe `mdc-button__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused button.\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.**\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n**Note: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.**\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button--icon-leading` | Optional. Styles a button with a leading icon.\n`mdc-button--icon-trailing` | Optional. Styles a button with a trailing icon.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n`mdc-button__focus-ring` | Recommended. Indicates the element which shows the high contrast mode focus ring styling.\n\n**Note: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommend always including it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color-or-map)` | If a color is passed, sets the default container fill color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`icon-color($color-or-map)` | If a color is passed, sets the default icon color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`ink-color($color-or-map)` | If a color is passed, sets the default ink color to the given color, and sets the icon color to the given color unless `icon-color` is also used. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color-or-map)` | If a color is passed, sets the default outline color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v14.19.0+x64 (linux)","description":"The Material Components for the web 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/density":"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/button_14.0.0-canary.443f63f50.0_1648249518020_0.7120671224539881","host":"s3://npm-registry-packages"}},"14.0.0-canary.eb382f318.0":{"name":"@material/button","version":"14.0.0-canary.eb382f318.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"19fab9fef37762f651341a92cd98ed78ff2016ec","tarball":"https://registry.npmjs.org/@material/button/-/button-14.0.0-canary.eb382f318.0.tgz","fileCount":40,"integrity":"sha512-2ZSh9Njp6nKoYD2gBzYz1sorkK+XvOpDNLc9XMs3HHzcq5EUbh/yr2NBKJeY/K1Kptnt0anMGNPzPrXkhjC17A==","signatures":[{"sig":"MEUCIQDM53tllQntTZT80IA1yfVs37MzWESZZ+Ymbe64SYHSdwIgAwxzEzGiNLgvKKXL4FYPUmUHP6aN9urEVDV+0gm2Xug=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":638503,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiQ0NqACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpwqxAAkdBJ6aM+0mtCFmyPG8/LAXyhfaxS8Mm5lTMf/09yIm6iDL7v\r\nNgbUzscX9bRoAYXd5o0dlWNP7jYnUaJOe7TiaYRXnjOkgOffZuBJrt5dg4OO\r\nxmXgRCfvbTr5v0FvebdxpFjKCS7cDYCQKb+dcy2SxzCvOISgPaoHj46M1ZXw\r\nXwy5PvyFkfSyVqbsK+3NB3/AfQqlbG0OvpRAKT0aqHWmEEcFYSF3Xxsdn9zu\r\nf9EMISJPJ2o/sRmgzySwJQjhMKqwWw/8nUU8dBSF/fWOir6/cFjgd9P1jKUY\r\nBtefgxmM6y/rkKvzPBxdlqMKDrocNdjmmDTPnVdihYWZNyMbvZ6WCmSVTKck\r\nnMTnnTPE+q1ztlL5gs+FYea9I4Lc3h1L52sRlpeeGgJG2Q68/2Q9HSAgeM5I\r\nCg8jFWb6mkQuQKSz1+HeBzFLsCKQHVf+l2l9ay1nxIa21bRwdYZWjKcNAm4l\r\n99TAyBTbFSwLDr3Bo6ycQwBZmUaDOZWG6PJUOl9koER6UHj+Fya14wzrxxUc\r\nAEyky4obtByoChXmVsYyAgVSII+gEtw2gesUlY7+Zk4DGMMS5OSNQMk6D/ml\r\n2LiP2iUDRFoKASg21yGtp7Yk/yqmYZIMoutK6jrG1mf7s6eU3H5VvoGMMmLJ\r\nLzArYQrN928BthOu250joe3h/upQ0EBuDb4=\r\n=90+l\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button/styles\";\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nThe `mdc-button__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused button.\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.**\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n**Note: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.**\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button--icon-leading` | Optional. Styles a button with a leading icon.\n`mdc-button--icon-trailing` | Optional. Styles a button with a trailing icon.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n`mdc-button__focus-ring` | Recommended. Indicates the element which shows the high contrast mode focus ring styling.\n\n**Note: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommend always including it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color-or-map)` | If a color is passed, sets the default container fill color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`icon-color($color-or-map)` | If a color is passed, sets the default icon color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`ink-color($color-or-map)` | If a color is passed, sets the default ink color to the given color, and sets the icon color to the given color unless `icon-color` is also used. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color-or-map)` | If a color is passed, sets the default outline color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v14.19.0+x64 (linux)","description":"The Material Components for the web 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/density":"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/button_14.0.0-canary.eb382f318.0_1648575338609_0.7120899558063669","host":"s3://npm-registry-packages"}},"14.0.0-canary.344d52823.0":{"name":"@material/button","version":"14.0.0-canary.344d52823.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"516c7c22a64107a07f0b335be28975d9caf40487","tarball":"https://registry.npmjs.org/@material/button/-/button-14.0.0-canary.344d52823.0.tgz","fileCount":40,"integrity":"sha512-qSLq8kKLkgki2IH4padwHo7bo7dmUGvLcebo7aSdlPfhK5QibMBHKiCPNcsgDVpVc3U3KzzakYzGegWJVO61Hg==","signatures":[{"sig":"MEUCICgt1ZtO6JChIVJjfnPz9wAze63l20mCNP7N36aU85ohAiEA6LcpAlQD4nLG3x7xcIVb9H6DdVZzFaivIEuYQSBPL+4=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":638503,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiQ1NwACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrU8hAAgH7KRCF3/u+VIfCbkHfbAdprr7WsLFnKkXt1rukHbIMYQ46t\r\nwKW4IajGzgCCkobVEidLdA1lnVjMRdCuzPX0hUftnxzLgxGe5z7DwFbenPEi\r\njx/O6GwbadTWQnvmbW8QPfmmKhpLhXNx9LvDnPoPbyUkGKrTaBVLIHd++cVb\r\nS86fbJn8BMzFMKN0bmXiPv7JxQu5EtkzIGb/rNDnSuQfQfFbWsZQlow4r2jF\r\ncZYyw94iVXWFcPj5uBrJ80uFCgBmR+iSnjtleQgxyPA2sIjgC8yr8C2ktt5D\r\nKguabBWmVftAVBCvqQZt6kzyX782c/5xCK0mHIPOcaSXHjZ7fxDBT8H27kvk\r\nH4wzJKxCZ/iNQJ+a9VzgA42ksUAm7XmQ3iH0mzAFs9VgT8DC0u/jhvD9ySvl\r\ntcFhpm5XjnFYWp3bzfaIWp1w84GVpHiNQ7K0lDTlUTancQyEspeUa6cQygVk\r\nx4rXw5RXrXDOFmtbl2pv1qAKn9F+bBuUedGSMjizuOkM5tHmyLykTdTrYCNC\r\nFuwM7T9IP1SeFRjbJlApDEHOFPEf0p8EY+T0QYxG2rIIPW0keIhIW2vXyrSq\r\nswV1zIZ530rueq/7ndWcs0dcBAvkzpaVpijlM+kFGTFhDfhDMd/KW8kZ+Tx/\r\noOIg8sfJLtAi+O7h9ivU1u4Ievca7Sj8Ndg=\r\n=MhFY\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button/styles\";\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nThe `mdc-button__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused button.\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.**\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n**Note: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.**\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button--icon-leading` | Optional. Styles a button with a leading icon.\n`mdc-button--icon-trailing` | Optional. Styles a button with a trailing icon.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n`mdc-button__focus-ring` | Recommended. Indicates the element which shows the high contrast mode focus ring styling.\n\n**Note: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommend always including it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color-or-map)` | If a color is passed, sets the default container fill color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`icon-color($color-or-map)` | If a color is passed, sets the default icon color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`ink-color($color-or-map)` | If a color is passed, sets the default ink color to the given color, and sets the icon color to the given color unless `icon-color` is also used. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color-or-map)` | If a color is passed, sets the default outline color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v14.19.0+x64 (linux)","description":"The Material Components for the web 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/density":"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/button_14.0.0-canary.344d52823.0_1648579439866_0.5852834331509036","host":"s3://npm-registry-packages"}},"14.0.0-canary.4e372fb49.0":{"name":"@material/button","version":"14.0.0-canary.4e372fb49.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"c93fd1cfc6066c3f883a35922e7e8d253bbd6a6d","tarball":"https://registry.npmjs.org/@material/button/-/button-14.0.0-canary.4e372fb49.0.tgz","fileCount":40,"integrity":"sha512-tACM31wUo2K8P7M8KHmbAus1Z3hMhFU2ihwrat827D4jVD96sVgh9vLJPUzPmbRP7c/SCj7c8tpZNFw0VPUxpg==","signatures":[{"sig":"MEYCIQCDtXnsMQALt9neFD2/M1RsfpCKHOFhILTjJxM6tAcOtwIhAOLkZi0yT/vI/Z0e7EUp0cbaHH/qpv5lJ3OAeQjDAGu/","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":638503,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiT0qjACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqyPw/+OBc12RPQ16QzstGbW6BTrIofSltdRI4G7+9gKAoXrz3/zdhb\r\ndFAaMUJeHDPO2DyJ6FDjVTbvJV8m+tzf/WRz5383xQ4XuEiKECMQ27VsYkSv\r\n9A7sAa1sK70rK/Abm0M+UOhkWBu7UZbwvsgHL3HvPJ+P0grgvHt3pUc9H0l+\r\nIj02AWMQLZdk7aYEKIE8klplElLm/jepSQjRfH3CXii2/KxtqfPF9nnMSQxu\r\n5y7KFiCQ5NabJf3r+Sinw46ZzT6IYRU8p1j62TAq2Y04+qTS96W9gxuvGOCV\r\ngIZDoSvP6TQr0/lz6VoFPLt0ZIzH1Vq1DM6eGJaVXUsQX1okCI3AJn8/Liqp\r\nzUMiji339nBBhzqdM7X7l6SYY0+rm58hvbkLPTsFLIEjqiCXTxAQkETUmFbW\r\n5o5HOJMRW/dzx4GI02SxCXqRZQVyBgSSIR+Z1vYAeh3ZR3Uk64uOv3VVh7iB\r\nRyMqpgY6IEM+Wv3sr1Bp+v29of8WM/ma91Q3UwPNnRGiMJY8YCV+ueSzeJzA\r\nN/leGobSmGc+EzF/gkSHkOijT4p98VhrIEC9jXZ5mUe5kQ9tP136F454CnPi\r\nJ0sSkrsS4V22wsqIdPAZhfCDyCLOSuFvxeOHEojebFtm+qx8D1XRSTmaigL6\r\n3f9qvnFInwHv2fLXjsnFiiOsusszu00OC2M=\r\n=KiY0\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button/styles\";\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nThe `mdc-button__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused button.\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.**\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n**Note: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.**\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button--icon-leading` | Optional. Styles a button with a leading icon.\n`mdc-button--icon-trailing` | Optional. Styles a button with a trailing icon.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n`mdc-button__focus-ring` | Recommended. Indicates the element which shows the high contrast mode focus ring styling.\n\n**Note: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommend always including it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color-or-map)` | If a color is passed, sets the default container fill color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`icon-color($color-or-map)` | If a color is passed, sets the default icon color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`ink-color($color-or-map)` | If a color is passed, sets the default ink color to the given color, and sets the icon color to the given color unless `icon-color` is also used. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color-or-map)` | If a color is passed, sets the default outline color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v14.19.1+x64 (linux)","description":"The Material Components for the web 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/density":"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/button_14.0.0-canary.4e372fb49.0_1649363619642_0.09161254677125852","host":"s3://npm-registry-packages"}},"14.0.0-canary.3e30054fb.0":{"name":"@material/button","version":"14.0.0-canary.3e30054fb.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"04ed13dd0602b1c31c6838ad8f5504698d8feace","tarball":"https://registry.npmjs.org/@material/button/-/button-14.0.0-canary.3e30054fb.0.tgz","fileCount":40,"integrity":"sha512-AVnp7+qz/S/NXFLKAdGZ9Pl3iUJh2xU7hrq4oEQ9eH8lMh3xxMGj6erWxZL+z8EQYSiEz9uK2wR5gkkIRYGbCA==","signatures":[{"sig":"MEQCICnYo1cMozLuq7nYc/qmuiyP2MLgVaG/DE2b0pWEI91FAiBZkzwipRDToDEyS0gezJ2sLLsMkSNAL+t/Zd5KZX+2nA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":638503,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiV0thACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqgHQ//bJ7bx/Ykrt3co4LV2YPpJuzq5TmGz3XAlSDSH9x2KlHLUcBy\r\n0DCN7f4+2ZfC8Mu7rTt/snHCjWh1AqmYUw+6+LeBuxH4jIhTmCovjvUPc7wE\r\nW2RzV6A/Yk0oRIHh1TAPEKzAgLEyEPHoth712OxiX4Z/SRmUgCUCOT0DL6sy\r\nCfN+mlwxsgby73QN3gnDqJmJ5SxcUn0no6opPM4KbpPvO8R45lZ0ALS0X6Rq\r\nwJn5XkQGDZ6/vAvRXrGPoHf9+Sw/5twX9CN2LceXocw0oVb+wUCUeZ8lR+Ld\r\nXhr4fvGvdbRA+Hc0BrJjzNwlV1qdg3efuv1meOuTbt1O9B0qioGUwXKGyd4g\r\nwjoJUesK/5QpIGpAlUkeaEyne5YUR4P+rtDjelv5krWYap/MedSJ5O+ujLv8\r\nChSDP/56APxA+jxOYlizBGFyea3cuGrJXwJs3jQBgm6o4BAaJr4/SzezApj2\r\nrO1j1SoKRmH7DPB3Wu0pjynevOdYr7HPUmD+hO9FR3y447c5vkjj2fqCpUhq\r\nxmyuqINPYY6X/sfrhM1pEnGRzZnKwT482fIEOfVkjVnqrL+E6dMDOsW3EsMH\r\n4q90imVuYmXtaWAIyIPl+OLk9gGZ1xFTSaaLq1uKMQfkJkhrZ4//YTSqyy4m\r\nnZ8+2blXQ/twoJaFozCI7SFfUPmfelyXXoQ=\r\n=Z9tw\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button/styles\";\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nThe `mdc-button__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused button.\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.**\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n**Note: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.**\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button--icon-leading` | Optional. Styles a button with a leading icon.\n`mdc-button--icon-trailing` | Optional. Styles a button with a trailing icon.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n`mdc-button__focus-ring` | Recommended. Indicates the element which shows the high contrast mode focus ring styling.\n\n**Note: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommend always including it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color-or-map)` | If a color is passed, sets the default container fill color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`icon-color($color-or-map)` | If a color is passed, sets the default icon color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`ink-color($color-or-map)` | If a color is passed, sets the default ink color to the given color, and sets the icon color to the given color unless `icon-color` is also used. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color-or-map)` | If a color is passed, sets the default outline color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v14.19.1+x64 (linux)","description":"The Material Components for the web 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/density":"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/button_14.0.0-canary.3e30054fb.0_1649888097435_0.3226862366470904","host":"s3://npm-registry-packages"}},"14.0.0-canary.8c4da223a.0":{"name":"@material/button","version":"14.0.0-canary.8c4da223a.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"4c907ff9f2ceac8cc6b532737da7af7609433b0c","tarball":"https://registry.npmjs.org/@material/button/-/button-14.0.0-canary.8c4da223a.0.tgz","fileCount":40,"integrity":"sha512-yNO3vIJtVfve7gyVi6f3/vhESSuTWjyKN3CF1XXwhcEXZ8JXXdj5JBUThk0k6e5WZH02Q2GAA8ALHmjxAE0M+w==","signatures":[{"sig":"MEQCICUXwZrXIhL9Sf2bjd2qWHEnus7j01aQiOg7mlPFc6UhAiBKdgsLApsahUNUFIv+Q/ecSXcI9rQ+BlHgooNWmVQbQg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":638503,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiXtRHACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmr4Iw//X4+7t4X5xE16y7IUDOi+8iuJD00lAv1uVPHx3wIpC+rbSSp/\r\n3ASeeIHmHMVlIxgPTRM5ZjENnPKanMe2eSXTgIsaKpKNg0DRzO3VSgHWmb1z\r\n1h+h3uGMSuG60W6Wbc19VcGkhlDmN13Pt+Hb7p2sMEvcpagX4yvn7C6jdeNq\r\n4Tt04xSRNg9wM/l8vSKNoVG+cIG6Spe78Ykap4hFvne3q3gO+pMt/30erOjG\r\nO6bAkg8o0AoZ7kMIWcDrQEbN947QOfv1nn9h6H8nfQesULBKrRLlC41exB6C\r\n6I5yeXXurC/72PxGz8hXr1AmcJPHCqwluvkws/CHgzfrvd/2ePy1qPQpQETh\r\ndmshqPHtfrF7j6DVnbq7pk5nXCjJRoWznGGCjoFsaLXWbDI+VHK5QXVDnT80\r\nh/R38dQaUefepPIe0MD6TCD40Os8vxpRve6OhM3e708R3U9hwovHtyzRJjpM\r\npGhfuihk7xrv9sm9eCg5HPoR5b+FI1RDj243jLhFIooWl5RwhflY0PsGtImf\r\nUBHjPf0leiv0OPSJVKdutFq0tiSs9gOc5zkz0f8WoaSguEKzAW1Zf+I2J2EK\r\nGqCvHshX8lOJlTcgPcmvOo7zEj/ussOlnXd94TzbvoJKkd03jGr+gfv+Ohe4\r\n+r4Nva4s+rvFvu2q1STVg0C4v7TQhxPFOxM=\r\n=NWcc\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button/styles\";\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nThe `mdc-button__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused button.\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.**\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n**Note: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.**\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button--icon-leading` | Optional. Styles a button with a leading icon.\n`mdc-button--icon-trailing` | Optional. Styles a button with a trailing icon.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n`mdc-button__focus-ring` | Recommended. Indicates the element which shows the high contrast mode focus ring styling.\n\n**Note: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommend always including it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color-or-map)` | If a color is passed, sets the default container fill color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`icon-color($color-or-map)` | If a color is passed, sets the default icon color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`ink-color($color-or-map)` | If a color is passed, sets the default ink color to the given color, and sets the icon color to the given color unless `icon-color` is also used. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color-or-map)` | If a color is passed, sets the default outline color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v14.19.1+x64 (linux)","description":"The Material Components for the web 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/density":"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/button_14.0.0-canary.8c4da223a.0_1650381895636_0.23054719494318343","host":"s3://npm-registry-packages"}},"14.0.0-canary.7de8965cc.0":{"name":"@material/button","version":"14.0.0-canary.7de8965cc.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"a73656006fcf88b3143374690c34153c0b0f1958","tarball":"https://registry.npmjs.org/@material/button/-/button-14.0.0-canary.7de8965cc.0.tgz","fileCount":40,"integrity":"sha512-8y3RFR00+5yfVuemYPPAWj5KC5N0ISHC2jVAlk/NF4jTuUwKRl8yYSpkv9wVcWFRtMM/J/9+tz1dllUfeCs7MA==","signatures":[{"sig":"MEUCIFBXELZY2JS/A0ENe8t1/PEpghvH2yaf7PorINeTSh8QAiEAlimaLLTTaV77UBWS1nPU7ARwuRgX9Yz8pqlTRZ0x9Dw=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":638503,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiXxpqACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpBcw/9HmwEDuVpAiXQDpCP9w8u+6J39As8ele/uy9+goaDelWT6l0C\r\nCUrUbgBHm3/lUfNZuUXpcUGdh6/vvJTYF0FxZ7Ybo9Xv2M8UF+BqLjxoDS39\r\nEks1PSzYMotFkoZOPOQjL20gWs59CyhiGNMoo0lmES061OowaoxTdmbDU9i4\r\nnTOFznxACJLBYDuPTHnDqzROyHXJNIvI17Jn0DvTn7yJ+p/ZfoWFFkeRBs1B\r\nT8z+St33m4fnr2V8+OhPLygtYCd8rIbk0Yk8ymTp6ynStud8bU9IeOPQdE8c\r\nFzk/LpRz0pAmiPS+4h7XA2c990gnc/Ut1dIFQIWdRLMcrO/Os7BBQaqE1CN/\r\njhg8o4nDrLmYfsNe2xiCSfXDlbx05aN21BoathUtDeR9IQ3ONz/gBDAUgxFA\r\n2UJirN44mKXrLe2wz/TAAvr+pfZjnyEjJnh4jki8gfIwYF7IEcW7TrVh1Csq\r\nACav2i5lVGNB0sA0D3RtybFhPNkmcZaFHHLgw1qfFQiKGxbnXyI4pIOVA5jY\r\nGsQDuColskxYaK2BtNYiqgzP0AmS6d0smdabylnPUzIgc8hOm2+cst1Mrf3H\r\nOMnGOSBTg3eQZllI/TXwtcnkkcbSC7SW24BVRA97ARNSzNLXWaGyonWkUvTq\r\nDN8glwgA9zIvOx/TE5O4x1T5Y+ArBchQua8=\r\n=5W/l\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button/styles\";\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nThe `mdc-button__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused button.\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.**\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n**Note: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.**\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button--icon-leading` | Optional. Styles a button with a leading icon.\n`mdc-button--icon-trailing` | Optional. Styles a button with a trailing icon.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n`mdc-button__focus-ring` | Recommended. Indicates the element which shows the high contrast mode focus ring styling.\n\n**Note: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommend always including it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color-or-map)` | If a color is passed, sets the default container fill color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`icon-color($color-or-map)` | If a color is passed, sets the default icon color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`ink-color($color-or-map)` | If a color is passed, sets the default ink color to the given color, and sets the icon color to the given color unless `icon-color` is also used. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color-or-map)` | If a color is passed, sets the default outline color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v14.19.1+x64 (linux)","description":"The Material Components for the web 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/density":"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/button_14.0.0-canary.7de8965cc.0_1650399849543_0.32777445088044543","host":"s3://npm-registry-packages"}},"14.0.0-canary.641ed0851.0":{"name":"@material/button","version":"14.0.0-canary.641ed0851.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"1836076aa467bad0af8cd62a1b4df54fc7d5a8d6","tarball":"https://registry.npmjs.org/@material/button/-/button-14.0.0-canary.641ed0851.0.tgz","fileCount":40,"integrity":"sha512-8yfkS548lX6udTWo9P2UNH8wdDSZiJ6v1VM1K+pqjI7POBvDd1Xey9RWf007GpUn5LwLvkLtT8VFdBNdI7OCFQ==","signatures":[{"sig":"MEQCIERQ9yc91axBUSW+h0XO1w0W0xPNeX2wNL+dvi/k9u6HAiBCLhMJHPTghLuP6Os/ycK9ajlVM5vSgVPQpihR6+Yf3A==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":639345,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiYC+CACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqzmQ//eu54txhH6FGsbDUjn8AY63fTQHM1y5GJlKAwWkt0ajv+52Fl\r\nlbmWqLSBvni47/H6+MHnthJwUic5k715lkgTwNod+PY1EjrXMfooGI9E9DXP\r\npNi0362pEEFH4SJHVpTcWZv/iw5/HzDks+ZU0uN5gHsEqmqGLDRahDK7y3Z4\r\nHbyzcPg29TG7qSa0nbr3oR3dTC1lJVjBsBzb6ntLzg8h5V2k7EsTr8D37XdL\r\ngHL5ZKPU6rxgM38CTtIBExzlezcSus0RuuKWj8hu7288gAH/No+1NjA9J5c+\r\nvM4lRNaQ9mmiSHuE1WMZqCntVLUgzWjpiUaBeNseZvStLf/x4Bm6+kYCfpFj\r\n5BRYYosxnkARSEjevhFE4wjGinZZTZ24YdCUxjfzcSqQvTozZx2oD6c9Q+pY\r\nIbNbMwZqeecWc8LqqbH5mrN66FHE6k0CEWmdmHTiNsTg1B2z/hZ528ni0VYb\r\nrD1Btj83e2WUc/yQaNGODei5gIUtad65humGsNNvhYJVK0ABsslaJuRI3lSq\r\nqlSuT7Vz2mlR0zGR84aV9/WouKPxZx6hDAYQ14aZAR9dR9KzHCviwBGMR7TB\r\nKUTxZVjv3hW2gfmi81Uhf4SFJ+7iKOGfcsq65b7RPiSPnbBpblqc7Q2qjfaU\r\nlZdmuhirQSc+K/BhzZnvx7BcBRe3d3lVJlk=\r\n=muRi\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button/styles\";\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nThe `mdc-button__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused button.\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.**\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n**Note: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.**\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button--icon-leading` | Optional. Styles a button with a leading icon.\n`mdc-button--icon-trailing` | Optional. Styles a button with a trailing icon.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n`mdc-button__focus-ring` | Recommended. Indicates the element which shows the high contrast mode focus ring styling.\n\n**Note: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommend always including it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color-or-map)` | If a color is passed, sets the default container fill color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`icon-color($color-or-map)` | If a color is passed, sets the default icon color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`ink-color($color-or-map)` | If a color is passed, sets the default ink color to the given color, and sets the icon color to the given color unless `icon-color` is also used. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color-or-map)` | If a color is passed, sets the default outline color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v14.19.1+x64 (linux)","description":"The Material Components for the web 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/density":"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/button_14.0.0-canary.641ed0851.0_1650470786498_0.7678453411713506","host":"s3://npm-registry-packages"}},"14.0.0-canary.e88f83024.0":{"name":"@material/button","version":"14.0.0-canary.e88f83024.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"27f9c505b9fdec653b542425aa03174606716f66","tarball":"https://registry.npmjs.org/@material/button/-/button-14.0.0-canary.e88f83024.0.tgz","fileCount":40,"integrity":"sha512-tE8FA2ODVxd728Zd9u7Twb+HGk01ZcqciEISyCLRD/PMgTJSWYSXeyqhlCwdH2iS+cETO9EO+Ae1INiciLOUjQ==","signatures":[{"sig":"MEUCIHOeMPzFGqyM0qcMQ9foIcN3Aq8w/LeHsP4rjttECd5JAiEAzu4+oJ1/2Vk2AnRcNq4MjzlgUcbuJT42U4+Yx9OBTKo=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":639717,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiYEdrACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpQ5w/5AP/oJAslF1I2QzaSW7iVg8YbtlOlFFiTfwBA9VtRdB8ctNnl\r\n6geCwvBgeKx8eEF4zcP4fEFvCsG28uck2KOEOmFASl8DKYodTy4zbD7pDt/4\r\n/YV3xbdTyBppWlGLW9R+ct/w8b2KMkO3UNewjpL1ooMgrF6FHixAZ0ftmCE0\r\nZ0AridorIKd/R6qdxKHh3+dNn5VJx6BUM4cqnJ004AwZ8aeFZwhM5eEjye3V\r\nBmtD3g1K16/wf2hs9V9T3J1uJ2x/Uw1xgqxwxxRvsEBwvHfl1oV9byTBWueJ\r\nrOyaE1pzOsyUi05g7DVQyklDZ3QmUULOuMzKeCQccVJq7n0h5dhPjJHg3Dlq\r\nmsFdfbDgbHLg+qcGyU8l2WjFLi2bYwIPQQzB8WPRGQQxsdd1Ir2Wuox9jM/Q\r\ndcx35b9sjH9djA91DOSmkNfOwor/kCcMzzLBE8nkwRW0Q/i7KfVyT/X+HQ9x\r\nnQOuQBZt2nBSSkCzhvyEIr0Tn2uJK/81JfeerUge/wEVDmQVsJeXTOdxgh0j\r\nNMUhykwdaY7+4Gt6xO4lsaaFnRO0nd+ur52djv7e/z80YPIc6XeIx4KE/LMy\r\nFHXer1XL3jv7i+aG0ALp2LcY1MigKmPMwKYQ8pnkechtRnkIiEYD73LZ1R0I\r\nZAmh2RSm3xy90vxcVn8W5ughn1xdBK4aDqI=\r\n=UO3x\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button/styles\";\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nThe `mdc-button__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused button.\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.**\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n**Note: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.**\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button--icon-leading` | Optional. Styles a button with a leading icon.\n`mdc-button--icon-trailing` | Optional. Styles a button with a trailing icon.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n`mdc-button__focus-ring` | Recommended. Indicates the element which shows the high contrast mode focus ring styling.\n\n**Note: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommend always including it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color-or-map)` | If a color is passed, sets the default container fill color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`icon-color($color-or-map)` | If a color is passed, sets the default icon color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`ink-color($color-or-map)` | If a color is passed, sets the default ink color to the given color, and sets the icon color to the given color unless `icon-color` is also used. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color-or-map)` | If a color is passed, sets the default outline color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v14.19.1+x64 (linux)","description":"The Material Components for the web 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/density":"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/button_14.0.0-canary.e88f83024.0_1650476907059_0.17320274302748384","host":"s3://npm-registry-packages"}},"14.0.0-canary.7321d6254.0":{"name":"@material/button","version":"14.0.0-canary.7321d6254.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"dd247d35376bcace8ac2b6b9b0bd93d5569f59f7","tarball":"https://registry.npmjs.org/@material/button/-/button-14.0.0-canary.7321d6254.0.tgz","fileCount":40,"integrity":"sha512-uEpCO5GZsIsVQxrPXEnEIsabEBG4F5fgq3qea11PvddbsSzG9469D9Bi39r/gpFuRaxkRa8XemnU7vrRDmwEig==","signatures":[{"sig":"MEYCIQCioobVaGmiaQsWmzKrKMGRX/cp8FhuB7bg7P4mFX+a4QIhALiunQWqfPRFJLz71kw++kWqIWPZHTF7vbDPPSql9QR7","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":641059,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiYGkTACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmoxpw/9E3h9gC11GZa7Bvqb1+gewOd+tNoaP7iUMAKinSbLB+LcsUml\r\nDFrcDC+bC3mPL3jwFaNiCM2nMWDRf7HaeiTl80H2+tLXIDWPJO1hSjY71XCY\r\nT+VYXN5CemCJk8k2CKzaiIQlqwqXtNUjb92WvQCMdOgToIaE3upBrxgzRQu/\r\nvgBuLDXivAxJXRv+cOUw79Bmw7Hq45uYgsoihFaPWeVtjsy/Aq+jUN62dHeF\r\ng2VmmpyHG7fx2bvgLguywbfjt5LWJKRwvmrbxHpjGgwMfBJ6ZxgSXddsIcxW\r\nBOboP8VBhNoVPSbMz0MJFDB6seBMHVcwRedGA5gj4NbbB2hVNSaeQ5fiUJzw\r\n5PH7WjJiJXNWefuAb9vX9HFxPHN4gjcOQywgax+mqwMufnDFyfYHdRb2szTz\r\nD5XyXaYUo/9/q65rzqEtGA2/+1YiaE+xZTgd/7zYMqk+oF2cnJQ1TgJEsWgr\r\nCWI9kpiujShrNUMAzgpTAjl+L6WL0yiumIY49LC2dRPygobYSUq3rJ54N3Mg\r\nbn2Qat9P2o0+j/ObgW8NFrFxb+VgZnJdcRUvDnxtER5w8EuR+fqYAtVXRc0S\r\nlRa7naATMi9LgqKXWwK6Sxkz0TsZFiCXmD9W9wGfkJIIFRXkz8vuOgfRbvsj\r\nMCX1kC8fgrFeq4j6AyRVAHdGsq2zWU3G3oA=\r\n=qBzV\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button/styles\";\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nThe `mdc-button__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused button.\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.**\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n**Note: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.**\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button--icon-leading` | Optional. Styles a button with a leading icon.\n`mdc-button--icon-trailing` | Optional. Styles a button with a trailing icon.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n`mdc-button__focus-ring` | Recommended. Indicates the element which shows the high contrast mode focus ring styling.\n\n**Note: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommend always including it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color-or-map)` | If a color is passed, sets the default container fill color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`icon-color($color-or-map)` | If a color is passed, sets the default icon color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`ink-color($color-or-map)` | If a color is passed, sets the default ink color to the given color, and sets the icon color to the given color unless `icon-color` is also used. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color-or-map)` | If a color is passed, sets the default outline color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v14.19.1+x64 (linux)","description":"The Material Components for the web 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/density":"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/button_14.0.0-canary.7321d6254.0_1650485522784_0.30204585737197487","host":"s3://npm-registry-packages"}},"14.0.0-canary.3ab956515.0":{"name":"@material/button","version":"14.0.0-canary.3ab956515.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"02df7176f438bf454131013e820197b9c35f06ec","tarball":"https://registry.npmjs.org/@material/button/-/button-14.0.0-canary.3ab956515.0.tgz","fileCount":40,"integrity":"sha512-+YYDMoFQ320VunAEhUteSRjl9L7N6bJDUNmuyfNWc/KjuOO6jY9PODaCV3VppR8g9fmwWd9eUSCMzPeGDR4E3A==","signatures":[{"sig":"MEUCIBzOciH/9lkaMa+ZJNVi/jCUfqObfClLaMPpCsZyzB3lAiEAvor0Vx1eD8QSbXRPymPWs+IK9tpK5o1v95DVzZ0BjY4=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":641059,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiZrgNACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoOAQ/7BdghWkLnyxCG9tub9qj7DJumdNOFjADcFEgR6a55+cscztIU\r\nN3kgiWIwCf7porAZ1wxrTFn6pgS/2Ozqhmsmq+Yive5MxJUUPRQrfXe7i6aX\r\n3W86g9ltUxhycCQH/U3yow4mBO+/YTfwbXrX15tbZAKgHyu0qkmxgcnIcgrG\r\nwz/0Cz5A6Pk5wH7l0+l5JYhQe0m2+jYaxp4H+/OqlRzXG68rT+KHAYkLN551\r\nEYyUx60U4n76fJ08iOhpzb5B4iZKpCQhx4QDisnzelZEEYqMXeldCTBxpyar\r\n9wjO6DvAoH52C3+XdK+LUOZfWV3QoXLjONzcFT5LZSsExQsHtA/bUf0qvrbh\r\n214iDLxMbXl2TXN3/OTtctP8M5StVQjIyrANzFE1F9YGLlXn+mXKzQx2NaDR\r\nT3lr66HDsmmlBO31kd8K4PQ1k7qK/1oVo5PLNn2HAZWfn+gIhzI0fmQFhwZH\r\nbrT3xvvP1YF+v2QMFFnajuY2iqxAZU33mhtpgOmCqqIwtEg015AMM0BXrS6J\r\nXM1/QeLV/DNQirL5Ei1KK8C6H7eW7+1k70o4ln9YCoXRpPimLf3MV2j/Jm12\r\nkxGOV6J4WqS9ZRlnz4Lxg9Kyr3ghXZP/fDjB4wI8fT5na5ap6O14jzfEeE7e\r\nEBelCd9AMJtT2v0qVUMUUUfC1YCFlHZW1sE=\r\n=luef\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button/styles\";\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nThe `mdc-button__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused button.\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.**\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n**Note: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.**\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button--icon-leading` | Optional. Styles a button with a leading icon.\n`mdc-button--icon-trailing` | Optional. Styles a button with a trailing icon.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n`mdc-button__focus-ring` | Recommended. Indicates the element which shows the high contrast mode focus ring styling.\n\n**Note: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommend always including it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color-or-map)` | If a color is passed, sets the default container fill color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`icon-color($color-or-map)` | If a color is passed, sets the default icon color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`ink-color($color-or-map)` | If a color is passed, sets the default ink color to the given color, and sets the icon color to the given color unless `icon-color` is also used. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color-or-map)` | If a color is passed, sets the default outline color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v14.19.1+x64 (linux)","description":"The Material Components for the web 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/density":"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/button_14.0.0-canary.3ab956515.0_1650898956956_0.9516034881679707","host":"s3://npm-registry-packages"}},"14.0.0-canary.53b3cad2f.0":{"name":"@material/button","version":"14.0.0-canary.53b3cad2f.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"9832220d8088bd8553e81f70b4606bf5182a11df","tarball":"https://registry.npmjs.org/@material/button/-/button-14.0.0-canary.53b3cad2f.0.tgz","fileCount":40,"integrity":"sha512-IPBAByKpQjrWNVmAWx5VCTCLnOw4ymbLsbHmBkLiDgcLPs1EtwYnKKIwQ+/t3bV02OShUdMiyboL8V/C0gMS1A==","signatures":[{"sig":"MEUCIByPJKxb8E9b/qvvLYHAQmAmWmP7pJOkBs56Dfv3xi5QAiEAhTjtIYkpsaT5LxnTNivi7DopnFrNkzpqKyvKEM48SXQ=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":641059,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiaTsSACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmojXg/+PevBF+QfHMoLtaz2ne9CcBDScuFBIn/9qgynDNEeNVbLs2zT\r\neZ1imy/wdSkoUVgdDmt2F2k1ZWpbEvTV31ruOImFPnkcd54+Y7rbYuND1w6H\r\n3GWciLuS3PtGqxCeH7q9+ZtcC3Mi6ztybAkunaJaQLeflnpLzARVt/OVRa5a\r\nssjF39g+ikCpD/NwsZPTsLHr377LRa5E29JkRYuXr2go3EivBHxJZZmScP05\r\nOTtut3jC62WSvstbB47lGxpHjaEND5xD/RKTK/UXp9r5aQg9lK20klQ7MHD+\r\n9woHO60ibS2di/mjnUo5PVbV/u08Y+8+bSfez5ZbL0tOCVMdxZZQXrXQtOHV\r\nnpksE6yT188+N+dDIgrTr7/rpRjUAu7BchXo01NaduGWWeyBYHAvYcZ7Y8jr\r\njlABPw0VS6PUCcG0s5Tv+e6LJgimNB6LPQblptq/7JoF17eN5DdabAHammxo\r\n44btXkF6nyQYM4ex/ysyNzV5EXkKDkxML3N9R+QxiwkFhowhlsq1FVHpKm2N\r\naBhfWrjPwDK1UFsuEJYxfQIvFOXv5s+6OTyxTCDs3rHL5lu8hJfGy0fDnqgh\r\nE0L0f+ji1tCAb3Q/tnPzGGB4brXDMKzgiCpEKBFnzuPFpj0fVn3ZFtB46ys5\r\n4NIRj1m3bR2R+afrRPhFExqItfu6t+1cXb0=\r\n=/IXy\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button/styles\";\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nThe `mdc-button__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused button.\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.**\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n**Note: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.**\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button--icon-leading` | Optional. Styles a button with a leading icon.\n`mdc-button--icon-trailing` | Optional. Styles a button with a trailing icon.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n`mdc-button__focus-ring` | Recommended. Indicates the element which shows the high contrast mode focus ring styling.\n\n**Note: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommend always including it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color-or-map)` | If a color is passed, sets the default container fill color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`icon-color($color-or-map)` | If a color is passed, sets the default icon color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`ink-color($color-or-map)` | If a color is passed, sets the default ink color to the given color, and sets the icon color to the given color unless `icon-color` is also used. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color-or-map)` | If a color is passed, sets the default outline color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v14.19.1+x64 (linux)","description":"The Material Components for the web 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/density":"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/button_14.0.0-canary.53b3cad2f.0_1651063569923_0.20150001945737728","host":"s3://npm-registry-packages"}},"14.0.0":{"name":"@material/button","version":"14.0.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"444402b5c1e31c3b63110fa640985a01102c0675","tarball":"https://registry.npmjs.org/@material/button/-/button-14.0.0.tgz","fileCount":39,"integrity":"sha512-dqqHaJq0peyXBZupFzCjmvScrfljyVU66ZCS3oldsaaj5iz8sn33I/45Z4zPzdR5F5z8ExToHkRcXhakj1UEAA==","signatures":[{"sig":"MEUCIEccB/9n1GTCYy2177ZC/PLZ+sKbQEXpxFujQjaXXiPdAiEA+xOxN/rjPbRzDR1E38tgYbcCxfZwDcFciT/MQ0APfws=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":640303,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiasdKACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmq1hg/8CEswoqbp9MFB3N/EyP9nHaa9LHdZcO1RxS6rhDwCkxQYy4JL\r\nmtli/rFTQAGNI6ojFLm89TvbCVK+NgiEX5G+Cu+07cFQSY3U1D6nwuJFND/2\r\nCoA2RdGVH8YbYSGkJ6a2afC7sp3aEZkiR0BD896dkUH0UlVp9kMaHlbg+7L0\r\n8mYq4oT13o0CBHj1zfR70po+VYPJxq23nv8V0grDnYbPHpoAQwdarCHGtlgU\r\ni1oBelfhSSQYvrt1RRuDuBBAU54kZMJEAhCkAtxuO2ovTviPeFm/UW0H3nEI\r\ns6ejVEXGBBB859SIj+NxeM5P7gunIE09vVmgeZkujGXjdu/wW0/KJ1Teog0x\r\nxS555PyQn0TM1nVmUk41+wviPgflSel86Cfq5jOrEXL32WYe5WJRBfq1fEp1\r\nLxnxLOiXa9DWOTY2i+sK088p/9/bn5sWh+/m7G8mUY1GZoni3CwcItKGdXQG\r\nKEpct05YNDoPuBl/0SOEEfDhcDc2J3pQR8aOIaRqFVXccq8xWijZJar511Xb\r\nCKIwCpraJSX9w2mQvPPNckw/ynweubG9lHoguQ/lNV2iMs5uf1b5ZoGTyyHz\r\nKi/PbMRr5jpKG/HqjimP4P00eHi4/bN6Y+WYkhjG/KlaWwsq6SakiqgKNUKs\r\nIxAvVShAQXEoQIy9NW/RJwha2IQP1GHfgp4=\r\n=jQmH\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-button"},"_npmVersion":"lerna/3.20.2/node@v14.19.1+x64 (linux)","description":"The Material Components for the web 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/density":"^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/button_14.0.0_1651165002465_0.6476636836997998","host":"s3://npm-registry-packages"}},"15.0.0-canary.432c815e5.0":{"name":"@material/button","version":"15.0.0-canary.432c815e5.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"7eba04ac59268e24055627153b0bfd7c7190ef67","tarball":"https://registry.npmjs.org/@material/button/-/button-15.0.0-canary.432c815e5.0.tgz","fileCount":40,"integrity":"sha512-VYup5jfx/H/8p/Pzlxq+LmoSo20Tjb0+9Xn0NYAwErp+rdWbhlUu0HAZKvsolZeqbHDsqyYUf1aCDRmRXrCmWg==","signatures":[{"sig":"MEQCIFKjTHdAft8CJjHws/HfXDLgK5C4aVpK9OmSy2eDcTI5AiAqzMH0FX9JH4TeXO+DTzdiIt3XRXyiPfy/Xd6++zN59g==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":641059,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiaseKACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqCNxAAlZlFlxLojvpB9WUIurl2yOq7xGxCUnwIGufwtJGeQ737gf1t\r\nq9T5GwVBjddtN7nd0+COqmMXZFrFj1RXUgA9klDFvOheHVlHescKqdtJcd7/\r\nHo3J1/OEf6Zg9LrgZM5bilo3U297r3V5iAEfoxmAtBFPt6WztJ6KMA+PVW7p\r\nfrtq105q4yRiIyHTjk+d7hVhahRo46bjWZX2j/96NIF5bKhQ07z/okpwqWoG\r\noGwls2PjArmLNu2m8krV+OdEDFWZ7TAnPWFzDTJ8RgvNE62owSj1TNJ0NlDs\r\n7LBcSzTbtw6Xw3lxv2r7cdX8RbMSHdzeHK+cT/ajjWMhcJhWFK9XLpvPF7ay\r\nGsCQLfVNBQI5GW3XH0houSKTJTMe1tEq9SSKKWftdNefEKd1dx1TniA2Pcn/\r\nICqYToR1lTNeqE66TImvOTwqKEd3UePBflvWMekrk+bXVxtZvMcYYAlLxSqq\r\nNdA246IBtHDZl9SwVC/LuZUJ5UsXRME3KLGX6bqgX/nR+5DAnu+ec5sCXiKY\r\nivH4TpmButT9c0k+X9EVswMvhdSZyj47gzRyUtDcV1u6OjSH5sF33JlDTJIE\r\n4y5nVhfhgzzia79lMa4SXPWdCIXaKGjQyTTEsd28pYftDn+Jv8Ir1k/gqVPw\r\n3D3QyjqRkmT0nzgZmFpNmcMuNGbsyt/2Ppc=\r\n=iqe0\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button/styles\";\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nThe `mdc-button__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused button.\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.**\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n**Note: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.**\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button--icon-leading` | Optional. Styles a button with a leading icon.\n`mdc-button--icon-trailing` | Optional. Styles a button with a trailing icon.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n`mdc-button__focus-ring` | Recommended. Indicates the element which shows the high contrast mode focus ring styling.\n\n**Note: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommend always including it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color-or-map)` | If a color is passed, sets the default container fill color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`icon-color($color-or-map)` | If a color is passed, sets the default icon color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`ink-color($color-or-map)` | If a color is passed, sets the default ink color to the given color, and sets the icon color to the given color unless `icon-color` is also used. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color-or-map)` | If a color is passed, sets the default outline color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v14.19.1+x64 (linux)","description":"The Material Components for the web 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/density":"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/button_15.0.0-canary.432c815e5.0_1651165065992_0.20057568479380716","host":"s3://npm-registry-packages"}},"15.0.0-canary.a0f01f669.0":{"name":"@material/button","version":"15.0.0-canary.a0f01f669.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"342a0e4b5e5a0e9202f2efdd41905bf7a6ba4d20","tarball":"https://registry.npmjs.org/@material/button/-/button-15.0.0-canary.a0f01f669.0.tgz","fileCount":40,"integrity":"sha512-XKONetCzu1Sc6RDuxLS6j4wIrMrH4Tkg4BLAH+fB2nJSrnHbE9NYpAmTDgxU0keuFM7mu0Lqkz3lyhL9ZWPqLQ==","signatures":[{"sig":"MEQCIFYcPV2zclVUvXj0OU5HM09DhAzrUtLRJNuJmi4Gf76tAiAjkMVa5s2cKZ06OF6QprAFtKH3DPcYIHQJz2uwYZFn0Q==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":640915,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJidYHbACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqzGw//W6Jr2KMOMSeB1qgsuwKUJOeo2kfXXwViyFtDY60C8/zdiK68\r\ngucb3d2CjdN/jMALiNmQbzX0p8peYwQL4oKlijv2AzgrooEGLqPYuTKsCgwK\r\nIleUqDuALY4aWbsAxv5NdjnyLukW5ndx6TTO1MPvQUIXQqhUGGh1F9xZj0RZ\r\nvftlLeGztnmC+6OYTsT2n/XKOZiUU5Iv5U/c7cUasXR1mPBo4bx7JrZoU+gE\r\nSgcwTwk7EG9UQemkJaJEjc39yWNVkNkXwiTGD6Em+xRdLyQW3U0hjOUNEprv\r\n4CC8W3hf2jjP2AMlPHtfY0FzfMnTrVsp4EXUFes8PHIg5fmCQ4LVnjYfFcTL\r\nKvJv6iqEmvuVGyOhet/ZQSozp7T1z3VFNKQgzvZG5A9DFRcHuF2jh5LeBUut\r\ntt/vxLVZu7xYiFuJGhellp+shR6uI2bd9n76nu4RKz2t+d9EFPrSMZYAI5Op\r\nkj66jv7fFHXML8enviTUk8/Sn/OlVBRpZHctfHeo8UM4Vyn3iTXWaPKn7qC1\r\n+hsFhHOXYzCYQkaEQZTOhtnOE0xGfNZhWMP9a6PFJIhS7sltKpz9PagfAHyB\r\nt+oZ+hScjayd5IlvNfGoG90yJrnJrGvi9Gw9+nNVXJ59dW6Bgv7bjPM8J4qj\r\n+xnO2ttqtDeKIH8GvqEk+/UcpcwhYFEb87M=\r\n=urIu\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button/styles\";\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nThe `mdc-button__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused button.\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.**\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n**Note: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.**\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button--icon-leading` | Optional. Styles a button with a leading icon.\n`mdc-button--icon-trailing` | Optional. Styles a button with a trailing icon.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n`mdc-button__focus-ring` | Recommended. Indicates the element which shows the high contrast mode focus ring styling.\n\n**Note: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommend always including it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color-or-map)` | If a color is passed, sets the default container fill color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`icon-color($color-or-map)` | If a color is passed, sets the default icon color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`ink-color($color-or-map)` | If a color is passed, sets the default ink color to the given color, and sets the icon color to the given color unless `icon-color` is also used. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color-or-map)` | If a color is passed, sets the default outline color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v14.19.1+x64 (linux)","description":"The Material Components for the web 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/density":"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/button_15.0.0-canary.a0f01f669.0_1651868123289_0.3791055281377309","host":"s3://npm-registry-packages"}},"15.0.0-canary.276cb39a4.0":{"name":"@material/button","version":"15.0.0-canary.276cb39a4.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"b5879ebcc9df8dfafdbb1afaa0479f0954a5be18","tarball":"https://registry.npmjs.org/@material/button/-/button-15.0.0-canary.276cb39a4.0.tgz","fileCount":40,"integrity":"sha512-n4hKjaU7OTrxLjOJyC+p5vOUemRG5jPdqsky68FL7G6R5JqhK6HJTANoTOAnejvp4/eYLAD+AU0icno18/0+xg==","signatures":[{"sig":"MEUCIFw3ZfFMJBxkn5Lsr7+J2G3SVgKVLe8WHfc+KaMAqDshAiEAspauXR3oCG22+8IEy+njLbcE6R1bNhB4ShB55+68fjg=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":640915,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJidZPeACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqcbQ//a+lGQSZDUR3aapC1NLLf78ZMZsb1m2A//mAcIriLlrFkyc0K\r\nI7vl2J4VuCuKiW/CK2AbqNg32kgKxuYZZ+ZFP/kPpMBK6LPGtH0FrduPeJVr\r\n0Z9c9NhFdLt5gfNTBOG5D/tx+gqxiLlPTiOVvkClN3jcatlfVDJZuSDC2OxT\r\nvukWME/smickEjrpJyCYTdEIp4rwOOj45AQebUX68YPUo0t5EJ1IdeEffxAi\r\nwuNBl5sCvR1wk9fCqQvYZrwhwFDGEmgwGW478PmY+x8CBpOPBsXCTWtNJP65\r\nkoQgQWg17da14JF278y94C6zEyvarUyrux9RPYEfQIaGeUyN3+K2s/717f8N\r\nToQ69L1lijU3oppmX4ukHRzKddb1m3uLCnw9oQJ9fBOajzkMWZvi0XQ9rMlT\r\ndZfgX84Jv/daPqDil1N8hINJ0u5aKUEJSrqGyAQgDIZkCE/JG9KXNeVMPBfe\r\n3wmizGIql1t7SBt+UiPFENoVgfDv+z0ClflhIwaqDj5csuChqap2TqrJpiPO\r\nxlSRnu7DoiEt5Ar6ddiL4kjAOZsO5ejCu17Nc4Dt2SiQqCewGxM4pMRhEiIf\r\n5/oiaPRhByk8BhsC62yHNQwymyfzLgDA6jFCjJkNkAinRJcF7J4zMxumFMHR\r\n9HO2tdjySuaRR0Telz0/qfX1QE6m23O5tGM=\r\n=XlLv\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button/styles\";\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nThe `mdc-button__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused button.\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.**\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n**Note: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.**\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button--icon-leading` | Optional. Styles a button with a leading icon.\n`mdc-button--icon-trailing` | Optional. Styles a button with a trailing icon.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n`mdc-button__focus-ring` | Recommended. Indicates the element which shows the high contrast mode focus ring styling.\n\n**Note: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommend always including it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color-or-map)` | If a color is passed, sets the default container fill color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`icon-color($color-or-map)` | If a color is passed, sets the default icon color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`ink-color($color-or-map)` | If a color is passed, sets the default ink color to the given color, and sets the icon color to the given color unless `icon-color` is also used. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color-or-map)` | If a color is passed, sets the default outline color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v14.19.1+x64 (linux)","description":"The Material Components for the web 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/density":"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/button_15.0.0-canary.276cb39a4.0_1651872734775_0.07005808419565507","host":"s3://npm-registry-packages"}},"15.0.0-canary.4fe98ed70.0":{"name":"@material/button","version":"15.0.0-canary.4fe98ed70.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"008ae1ca08234729f365e137e17db220beadb9ae","tarball":"https://registry.npmjs.org/@material/button/-/button-15.0.0-canary.4fe98ed70.0.tgz","fileCount":40,"integrity":"sha512-F5Fu0fYBSoD6oViD18ZTA94aRhiLo1ya8rpLD0E+wUSxOuyej84zx7bHieWAl0iajPhoTSd7h0274eeYcTC1HQ==","signatures":[{"sig":"MEYCIQCvQHucYJxGlIOoKrIm2WXKX2pv8/JuijwSCTMQBWEgXwIhAMCv/7Vba8WbnwiV56qAZOrgHEMPDOzg0/NW8CYb2epU","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":640915,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJidZmeACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmr3oA/+M6SIohmofjo3TryIJ6DMJXhVJfBlOZdH9UZtiBHqqr3v6ZO5\r\n8RF9U9mUHINa9CcNrAPRj6mp+bTLFEe3EbtwYRZVBrHzw4UIUhZRzY4Vmkie\r\nia5F9vtpxARNtRQPa7WhJz+Rd7KWiVSeghDZfhLgV9/br4xW9NDy5pO7+y2h\r\nqUOpQfAr8hY8/4Nz4DBW3fSbvznjxPwJuGgA5MOG9msBs77mBOiSnG19gxp2\r\nhX1Y38a1ZKnbtbkwkRylpStexD94qeYR/iwHGtfSvf3WEoXTQxixAdlKRkJy\r\n360wowEZxuGaIY3t2hHU92lqL2x/CZWrp2ZRg/jrV11Hl4wyT2fdOh3y8P5f\r\nkwyoRLIa3Zddn/eTBpzKKsTYrlsBu4JDmdgHC3EwNIvVhzwR0JeTjc0DrHT9\r\nWvm8Kyi9ekA7t6mJhiG4iLuSXz+R9tSOrP+VGjcQbJJndrb32fAPoQ/cgweK\r\n+oKDoUy0Zd7+thIbeX3HhOhaQjiFfxztoj01fj+l2vGFOJb+t7H/ZFeS7w+4\r\npWabqFgulQafQXs6szFmLO0WTpq9V4EDIr1AmUHyIu9Ug/tJNr0xyqOznA1k\r\neYKKYqKJsS+/GyTmWqehSl1gbqLSsY+9CH4GaFCbsKRsG1N7tFNs9WOsOWSK\r\ngQTGHqe0XqZ8axX19EKzwcu+cszxwyXbNrQ=\r\n=PEpO\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button/styles\";\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nThe `mdc-button__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused button.\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.**\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n**Note: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.**\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button--icon-leading` | Optional. Styles a button with a leading icon.\n`mdc-button--icon-trailing` | Optional. Styles a button with a trailing icon.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n`mdc-button__focus-ring` | Recommended. Indicates the element which shows the high contrast mode focus ring styling.\n\n**Note: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommend always including it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color-or-map)` | If a color is passed, sets the default container fill color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`icon-color($color-or-map)` | If a color is passed, sets the default icon color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`ink-color($color-or-map)` | If a color is passed, sets the default ink color to the given color, and sets the icon color to the given color unless `icon-color` is also used. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color-or-map)` | If a color is passed, sets the default outline color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v14.19.1+x64 (linux)","description":"The Material Components for the web 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/density":"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/button_15.0.0-canary.4fe98ed70.0_1651874205938_0.9898494753472813","host":"s3://npm-registry-packages"}},"15.0.0-canary.58b130a3d.0":{"name":"@material/button","version":"15.0.0-canary.58b130a3d.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"ea52240a5d26f9943ba6815e11fc86873f19b424","tarball":"https://registry.npmjs.org/@material/button/-/button-15.0.0-canary.58b130a3d.0.tgz","fileCount":40,"integrity":"sha512-ZzDJ2AFjLtp+d9pBGmymDg7gNmWjt/4oC5XY+aaXkCA2x/BkmnnIpUrVuJ8+vzn3+CuEggY0pW6kzfzXGUGP3A==","signatures":[{"sig":"MEUCIQDcVLdnJ6FbPKkD40+iFvhOJaxa7BtZsyrOvwNLqVFzAwIgXOPUGPG0lNL5DomLstEuQ8/hCBfF1Dvu3+F3He5pMD8=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":640915,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJidZooACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqsRw//c8Hea2NXTrhiDO6aH8eIzSbECmH/abHZUjarYYrcVuxJFBVl\r\ndPGEdgK7RrD5fUr6pNR/zBpI1hmrVKz4EAdD3wZdxAF+C2C+DQ9VvKtNT0wT\r\n3PuPg6B33XsQXhcDcGEFFdGNbly6s9qHYbvbaRASDIHJOgF9Irt5q4y94J5t\r\nEVcaJelFeggigCS4UTZ10uAhS84v/37t9J8k+DkattF6ZtNxGbQmi9mIJ4p+\r\npI3diuT9bAjw4iLy1esS7R/KquNQMGCT7ciTSO+0alPiXHOTBgrDEoDfguiK\r\n+rrOqCpU4ctooTg3oSINjbSuYMcBtBJkYpcnyOvPl5IxhSNGkaNz8SBaeJc0\r\nOvXQkgM5kdKTEURTSnt6wqahrVRVoud4oBbBoeK9lCRNixjgU5e2oLlb7tg/\r\nQ0O/BQH0KxS43DX1UF1grTa6iAlEHjg/sj9eqWKiQMC5QNQJu2aOLj03BHwW\r\nrMwNE6v0MweNwmcrQe/SFzCHfyFY3WU9XyOcP6fikeKD0Yjg18f57CpejfpA\r\nXWaMBPPwWapI7dlgC/n0b587QT5yiQWOKgHAhCaBUVaW0zxcW1G8JIgDWktZ\r\n8n3uMuq/q0WCX1MaMvHkf6L+crwkzc6sdltvt679Tb5BhjH5FbHLV8lQMVNm\r\ndFhX4nh+1myYjHrPvG+wR4b7JfkH3sWlE/4=\r\n=Yko2\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button/styles\";\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nThe `mdc-button__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused button.\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.**\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n**Note: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.**\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button--icon-leading` | Optional. Styles a button with a leading icon.\n`mdc-button--icon-trailing` | Optional. Styles a button with a trailing icon.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n`mdc-button__focus-ring` | Recommended. Indicates the element which shows the high contrast mode focus ring styling.\n\n**Note: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommend always including it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color-or-map)` | If a color is passed, sets the default container fill color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`icon-color($color-or-map)` | If a color is passed, sets the default icon color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`ink-color($color-or-map)` | If a color is passed, sets the default ink color to the given color, and sets the icon color to the given color unless `icon-color` is also used. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color-or-map)` | If a color is passed, sets the default outline color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v14.19.1+x64 (linux)","description":"The Material Components for the web 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/density":"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/button_15.0.0-canary.58b130a3d.0_1651874344643_0.4664378953998527","host":"s3://npm-registry-packages"}},"15.0.0-canary.ae278a2fe.0":{"name":"@material/button","version":"15.0.0-canary.ae278a2fe.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"e0598025e70abf578e61f5fa63bb15cc01598c9e","tarball":"https://registry.npmjs.org/@material/button/-/button-15.0.0-canary.ae278a2fe.0.tgz","fileCount":40,"integrity":"sha512-+j3aX56g5iffNT2OjCpgI2ipIKg74A4LTGx/auvWXK0+ZojyU9DsQ+dlM7B01cmnpEfOA1gvG56rtJzkD4sdDQ==","signatures":[{"sig":"MEYCIQCCdNdMtfIR+UKO1f+mcvlxmKDpDDs7G0t89N56zK5/cAIhANI6Tsd0TqI80IKvk8O50DLa+CIuPFL0md10PSlMbbx1","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":640915,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJieTJyACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqAQw//VTnnOP3LVjyLfpsGnjLW8eFQcJUIUosTHlCP/LzTsput3tae\r\nCpZJ2UsFy2gK8VzXyn5ONXHfm3RthnuWRKkAfYV1ahB1tspScNXkrgATTCPE\r\nXO8/wap0yR/ikFGr5pfbS2lSc5dyUNrx49oHqXF1vGYoEqI7rhz3igj4UoHh\r\nr5wIqez8zJ8iUqLjeGWpd8uxWWCajJMEZV5HRNhGXW+XiPuWmNnI6dwZ1uQ8\r\nA/UBqrigpSd1vUsOLN1cULYxz7OVtpbgLbE+6ENou7UZcbJSZFSOg0dS8OKL\r\npc+HwBKeXn8rIN6+Aci8cHhO5yvmOif6YGGReavz972EIle7JyabZxxGForz\r\nGxg6vaErPC97XgbYRmb7xWxYzi09fnXWnL6t1wHPc52+M7pTGBfIvPyEKIv/\r\ncFBUrkJ3GSwBtmpZG8E2O+mcA1TC5ahfTxaMR0u4Babzbjqmf8fEofmA4hqG\r\nMO9/rzObGid1qwvbUMpG6tFMcB9FHEFpkd+2+76y1Guanu5fS740zfqFB50y\r\n5tZvP2Mlc3Q4wWBVJTUOUEKddLMaEaYmEKUXE968jDarYGHTS4Ue7ma+V/fG\r\nopeSc7Z08f6ghmtnxTrMNg/Ak52kSJHO90x9WWfpBB5iFgqkIHp4HiX/QnNJ\r\nzpfRHoHcco2GtFhWWWJ/TrXxP05oQnC/ftI=\r\n=uHDb\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button/styles\";\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nThe `mdc-button__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused button.\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.**\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n**Note: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.**\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button--icon-leading` | Optional. Styles a button with a leading icon.\n`mdc-button--icon-trailing` | Optional. Styles a button with a trailing icon.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n`mdc-button__focus-ring` | Recommended. Indicates the element which shows the high contrast mode focus ring styling.\n\n**Note: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommend always including it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color-or-map)` | If a color is passed, sets the default container fill color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`icon-color($color-or-map)` | If a color is passed, sets the default icon color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`ink-color($color-or-map)` | If a color is passed, sets the default ink color to the given color, and sets the icon color to the given color unless `icon-color` is also used. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color-or-map)` | If a color is passed, sets the default outline color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v14.19.1+x64 (linux)","description":"The Material Components for the web 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/density":"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/button_15.0.0-canary.ae278a2fe.0_1652109937761_0.4868439184136042","host":"s3://npm-registry-packages"}},"15.0.0-canary.bebf5bfdf.0":{"name":"@material/button","version":"15.0.0-canary.bebf5bfdf.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"15e38d60a55c06108d70e1c14277bfd0cb4479cf","tarball":"https://registry.npmjs.org/@material/button/-/button-15.0.0-canary.bebf5bfdf.0.tgz","fileCount":40,"integrity":"sha512-aChhEV5HAs7IRTvVamLG1bAbikdrqmYwLT1sytcbJ9NjmZr4tF9H+pEdBwUjU5chbaN3BEavR7ACA9AwEPcxgg==","signatures":[{"sig":"MEQCIDiWemZ3ibE5RALQ3a3oBrlDazSe6VS/9hfHUWWSFYFFAiB65JVzpK82hpnCPNjmpvF0FKoHUUkEoby9ak8Jqgx6ig==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":640915,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJieyJAACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoZcA//bWPgoxRRVuCdxWrGOf+UoZcdLjSGoZHXZBdr/RHv+h8oymEd\r\nwYA4Z+pCH8Kd5Ftlxeym6LM+iBb81WxElTDrZ77sTwbRBCK0FGGgi3oZdkAC\r\nfOQ/Xt4ialdKg/9AFb2jlsb6cgDNaTVOVozbYMD2yFo8gRwZiHJ/u4YP/KKe\r\nj2rnpMsHOMgOuQ54xGgJ+Fl2bfiO59nW9djKPu1BTas1F+DjZCGNGrKTeNBh\r\nOPGAi+eg/9ZopwOO6SN785qVD48FWh0iSvJjP31JsSw069svPDIXgtM8GeOg\r\nmRJjBnGjzDZNXmpdqXLhxOCKchOLB+i5sYhp2FZmvqxDObhNm8so+ZPal1L3\r\nlohBrDXY/Y8yFcb8BsZdEobtdchv+w0ntcvLnIoC6SZfKrJ54ToGjRB0M6SG\r\nwOf6jsRSPRXhzAq5e/9ADYGB8E/i1h8QiHvtGojWFYqKn9SiC+y9IYWXhD9b\r\na5RiQSAixZtHLAyrtpKXo+R+z91VMVEjiaR7TPgjpVyazqZvlURPys/huUeU\r\nbqHs62P1yP7PftA9RQGKoAomt/X4s78W2lVj4F6WZR88NU55HN5q8rFGrEUM\r\nvBOC8zwFlTPaoC9WRiZDW0ssBKev1wflu7YvzJKZB74EhrSdXX3SHlT0sXPU\r\nC1he0QMfxRp/apwyBSN19sOhlkEP0jR3O+0=\r\n=1KAi\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button/styles\";\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nThe `mdc-button__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused button.\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.**\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n**Note: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.**\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button--icon-leading` | Optional. Styles a button with a leading icon.\n`mdc-button--icon-trailing` | Optional. Styles a button with a trailing icon.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n`mdc-button__focus-ring` | Recommended. Indicates the element which shows the high contrast mode focus ring styling.\n\n**Note: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommend always including it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color-or-map)` | If a color is passed, sets the default container fill color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`icon-color($color-or-map)` | If a color is passed, sets the default icon color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`ink-color($color-or-map)` | If a color is passed, sets the default ink color to the given color, and sets the icon color to the given color unless `icon-color` is also used. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color-or-map)` | If a color is passed, sets the default outline color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v14.19.1+x64 (linux)","description":"The Material Components for the web 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/density":"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/button_15.0.0-canary.bebf5bfdf.0_1652236864525_0.43132899583884066","host":"s3://npm-registry-packages"}},"15.0.0-canary.e6072cd6a.0":{"name":"@material/button","version":"15.0.0-canary.e6072cd6a.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"e52811ab9c645a968f9f12ae2a7441a97b2a9686","tarball":"https://registry.npmjs.org/@material/button/-/button-15.0.0-canary.e6072cd6a.0.tgz","fileCount":40,"integrity":"sha512-qiYV8WBxdyFuc72zopFKaAdpjjiWPSPwvG+6VjxYRUPYF2md8m/EHfPx/q5RJLFvi4G6Wr75JwDKEw5G6TEMpw==","signatures":[{"sig":"MEQCIB7kD/o0cga7b4xyYZ5zIvtoXYhhcOB8PIZ0wnZ+i9qQAiApgF7rB3sjJD/wvrvXJ/eZMJdjU+Z+xmR1LGaVk7FKgg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":640915,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJifBpFACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrBhg//VQtObkNSuID7IOVyyb3Nl+6/EzyuPJ19fwS5kGVWovrjYkdm\r\nG9YgHA59pTCvGCIYJ1u8KB1AUzL7UBmvBcSFa6dWupk3N1tR9i7qlE4ISvWx\r\nks8vnTbdhwMr1bcgdntseugXAgFhhRPiO2SNKYbC8Y02Bxj3vrHzxOWhNeJE\r\nsHoYzd1d5HbjjJCFA7ypLte71GDWyxktt665vJTxFhvb4UnzJNLkmFMzcBQo\r\n1Lt0/VlnPTiGUJS8YTfg+UYN0oJqH9NjVKGN9Tpw7VVmsoA4ZklG2vzu5o2q\r\nhEoT4Gmq7W0UMHAou1WUY3BtnhWfhmdZ73sHZm1immjSbAraqaITLFzgksoR\r\nPJT+NYmLPQNZWQmicsA708O5dsMpf2JiV2WPTjgIj9YLlVxeVYMCFhFl34Vs\r\nP4hlpXf6JH5Cd6+D5Tbc6qn7CviqXtKXKQ6A3ZJwyufDVgdInMUe3O1/yK36\r\nOM8V4hMyD4Yiov0pPrAXLwZjedLXjDfIZV5wTpyf4O+cQ9rWO0d+jXgd4yCK\r\nXaghx7+Hlr5sHOgN11Eu4P8+IJBlrcv3AGo5An+VaTcVLTpqUKeedZXdPale\r\njgpAzoyydnF/R61P3hyBEH8gOeUSJ5/7hipGUilqMaa7cjxzHc9x6IOP2Tn6\r\nEpoOqHY66g07VSA7dHJd5zGreVX630Y0gDM=\r\n=DgD8\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button/styles\";\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nThe `mdc-button__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused button.\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.**\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n**Note: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.**\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button--icon-leading` | Optional. Styles a button with a leading icon.\n`mdc-button--icon-trailing` | Optional. Styles a button with a trailing icon.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n`mdc-button__focus-ring` | Recommended. Indicates the element which shows the high contrast mode focus ring styling.\n\n**Note: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommend always including it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color-or-map)` | If a color is passed, sets the default container fill color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`icon-color($color-or-map)` | If a color is passed, sets the default icon color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`ink-color($color-or-map)` | If a color is passed, sets the default ink color to the given color, and sets the icon color to the given color unless `icon-color` is also used. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color-or-map)` | If a color is passed, sets the default outline color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v14.19.1+x64 (linux)","description":"The Material Components for the web 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/density":"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/button_15.0.0-canary.e6072cd6a.0_1652300357146_0.8374599942851935","host":"s3://npm-registry-packages"}},"15.0.0-canary.5b40eb988.0":{"name":"@material/button","version":"15.0.0-canary.5b40eb988.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"b2d2a79225e1ff779b295841ea81dd83e43bd6d0","tarball":"https://registry.npmjs.org/@material/button/-/button-15.0.0-canary.5b40eb988.0.tgz","fileCount":40,"integrity":"sha512-RaIGh3cQL+2sV8EYTIHqDEUWHzVGXJcRxK/M/rIpM+i4lToJ/nUBc5kSbRxdzVDj1ga3TXriPb4tbhozaVtRfg==","signatures":[{"sig":"MEQCIH3/6eZJCO7tau40knlYqk3Tli1E0Y+ex6kjCe8pwv1lAiAEo2EfGRFtwfJrLm17sKI29iYB0QrxO0qy9KpN7+EZ8A==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":640915,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJifHSsACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmq/kw/8DlIgV31lyaWXaeY7f7110o+H8J0zA9PPSN+to+gdm4qJXEf5\r\n+lb3PF+aTWjKUcDWrIQKE9n3Ne6mHmRMqtymtMeC6AOXInMg3r5Wqdpje6yY\r\n6Zal/1UhplabJ5Lv1k4EEu5auhYeFVC8YvYB9R5V9osAOUoD3Q5s0145j+kW\r\nDisWqMjCNhx6a56CvmeWxS+7jFzLok8x8cgvCXWwWkPT4mepZ+Y7QdIGPVD+\r\n8vVv59a1ab6ncRj3lmR4GnU1yfqZYq3ErnFfzE1bohbz+hvufFj1rPIK+zDW\r\nfSI+pxIn4yenz2PPBD75EPANNhLs465InkkwTtQz5ph6jE+jNBixfazwVE2Q\r\nIGfyjEaM0S4J3m+GW69s7KIIkPztXMvuv+8kDcBPaVzWHSRynNnTSE5WSaST\r\n7qKDQD6OxniThj+8iwphGcXTsoVdw1wcKO2W3T1keCdkreqxbJzWgWvsGK3F\r\nEPKfj5R3/gr4DauCnQdTvuFo2/FaVk8xl1bDf99wUx3gO0suA/77GSI3AcIF\r\ngn0lFKmD/yLi8YtFEJ5+JLA0b+FhGMwDqXld7FrsXf6R11QdpaBNEnGwWj7g\r\nrGk1Dwdm6uA6fPHTer3PRO2kjcYIb6t2tiExZYJ3qqN7iLdcSoEAyb8K9nlF\r\nMGHJIUrKyBBQzkKCYikOhKlsKGpxz1UC4Bk=\r\n=vStR\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button/styles\";\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nThe `mdc-button__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused button.\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.**\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n**Note: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.**\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button--icon-leading` | Optional. Styles a button with a leading icon.\n`mdc-button--icon-trailing` | Optional. Styles a button with a trailing icon.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n`mdc-button__focus-ring` | Recommended. Indicates the element which shows the high contrast mode focus ring styling.\n\n**Note: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommend always including it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color-or-map)` | If a color is passed, sets the default container fill color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`icon-color($color-or-map)` | If a color is passed, sets the default icon color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`ink-color($color-or-map)` | If a color is passed, sets the default ink color to the given color, and sets the icon color to the given color unless `icon-color` is also used. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color-or-map)` | If a color is passed, sets the default outline color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v14.19.1+x64 (linux)","description":"The Material Components for the web 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/density":"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/button_15.0.0-canary.5b40eb988.0_1652323499899_0.9045151920759411","host":"s3://npm-registry-packages"}},"15.0.0-canary.6a61d62f6.0":{"name":"@material/button","version":"15.0.0-canary.6a61d62f6.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"30361903e392709bdc7e102d2e40127137c5b480","tarball":"https://registry.npmjs.org/@material/button/-/button-15.0.0-canary.6a61d62f6.0.tgz","fileCount":40,"integrity":"sha512-JkupyaUuGJQOYghaiKttBrYkVakR+xWE75bfd0gNLVDBv9MjDoVnQdm7iRdabSCGBhniD4RKn3bE9lh2CothiA==","signatures":[{"sig":"MEUCIB+m0TypoNRYPoRVBImxES5qOHspPyIpF8ozQMBeqlK2AiEAguv4gHf5nyzf9Oca5PbwFCA6dbOJXdPmZTdPdVmVR5E=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":639729,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJifW26ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpuUg//UPF4ifVJfko1UHs+CK0Gh9J/+q56Xlh2Cq5ggflXcxrlgwzS\r\nfrsEslcI67TeYfXY3CkvROxqoGq9Kes7eTetBx0lVbUPFhxik5vMdZ12nnPQ\r\nUMMO7nZGWtoJGBbHnogPGJ3qna4WasqI5XX/l9588TJMRUEWNeWaDJjt/0m/\r\nvKVs6PwuLHXuZpQpWY69PBC2hF0gTz62qG2rzKSfJb8z+PbaeCI+R0thnLdK\r\niF6EcB5gTFXE+7XedtUR3xFrgIA9d5yCbNrD+C/OP0vBZPIFhMpJ7DKQlrkv\r\ncfthVjcALg+UF5Y9RCF1izW/SiTNPURvKCH99OuXrtgspv4/4YNHMDQKpOc7\r\n2YPuH0OozGt/4X3fTsy6pB8ADmjVjAEATvWAV4UFuKBqwJo0Rq6eSknUZHvk\r\nQAvjAkD2bPTBMdPf9CoAxXJzrfUJrkmaI27OiYgx+EmLeDMtv+HcslykPUeZ\r\n54pmKWvpydypTXNcppg690bsOjkBy1i4rrVZLwsaJ58TBQnO3++lAp7U5rDJ\r\nJtXsOeEkEM0o73RJY5MS1zSCYUFWnWXkypeI6bsSAep67lbXKzCw0Vz84aDS\r\nsTt2DpriJ2lnVYzkt1t9s+vkInH3v0Ajp3G8Sh+prshO0s/2gB8LgRZLnjiy\r\nP7KrcxtO2V3T+9oRd3yV+A+fneTPD5JI2is=\r\n=a205\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button/styles\";\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nThe `mdc-button__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused button.\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.**\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n**Note: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.**\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button--icon-leading` | Optional. Styles a button with a leading icon.\n`mdc-button--icon-trailing` | Optional. Styles a button with a trailing icon.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n`mdc-button__focus-ring` | Recommended. Indicates the element which shows the high contrast mode focus ring styling.\n\n**Note: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommend always including it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color-or-map)` | If a color is passed, sets the default container fill color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`icon-color($color-or-map)` | If a color is passed, sets the default icon color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`ink-color($color-or-map)` | If a color is passed, sets the default ink color to the given color, and sets the icon color to the given color unless `icon-color` is also used. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color-or-map)` | If a color is passed, sets the default outline color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v14.19.2+x64 (linux)","description":"The Material Components for the web 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/density":"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/button_15.0.0-canary.6a61d62f6.0_1652387258129_0.9108687723105693","host":"s3://npm-registry-packages"}},"15.0.0-canary.05930a453.0":{"name":"@material/button","version":"15.0.0-canary.05930a453.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"df08cac457c67cbc810d0beb7fa275d8d28e10c0","tarball":"https://registry.npmjs.org/@material/button/-/button-15.0.0-canary.05930a453.0.tgz","fileCount":40,"integrity":"sha512-Kfjes1nJYlQR2OrNEsWkrc4qzOKPO7xa5g76yOjDXq1M8ZpeXttTwq1veDZjGldATCv/cVThg7kGJiEI6FimqQ==","signatures":[{"sig":"MEUCIASdIG+OfK8mV/j2OXW+41dRgAVd8UeHKHETyFpdf9OIAiEAgyDGUD+JJnsyJTN3riOMoo0DJFAayNAKyYyhYiZmjEA=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":639729,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJifqfvACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoYARAAn5c45zbz8KO5vIwEvxsww228PMV3hosu4IBcseptqk4TIfCA\r\nqL2YMO1RAOGHU2p9sQD6PBYHQ7pb6l7r4RnDFCOBPzKf7ju0O6xqY6PGXME3\r\nA48l3uUfLkemnmm9VPbESzkUOw6GFO7zT8VuEADUGlslEqOqy/lsrc4LG4yw\r\n7i5s+CxBxOgChaPxYaJ3SnYGYJFi1Y+EdaPr85NBJpCb5QUEOcgrdLRIwTi8\r\ns5AA1hSwZUutWjjUO3Ko0GcO/mlncsMKEVrHslUlBtLWRKxHJsZBaRiyjr93\r\n5RIPAJLqKCWp4CUXYbinOZsrJ3SBT4bkMHD9ELYj6djUVZsJcJ1/zhhdTv6R\r\nNpXwuuhwL+Z9LX1huvPWJ9bdoKEKS4oyiRYr/VOSDhSobfzaqXLvRvMvGxnF\r\n1J2SGRZEg4kngIheUPpGvTQZvAakjBXtUDLrb4oAe2hT3NxpdGeKiFfXRcmg\r\n89BelXxUAroMCud7LPUznZPSWAAd2Fyg42JSATkddAKz7FuU3m9P7dcF94RG\r\n4xi46pLlgzoNH2ukJkePAaM9LbEN0k74iCQRAQFJ67O3rsx1gJm1NUhVgTPl\r\nLbTTIn4Tkj67KrhzMlXABrUV+Gg1GamtLoHMv4FTNZ5d+2ZqsGFncVZq2/zl\r\nBSTEMI/fdWjVZIcP9gN9lz1K3kFLeep3iuQ=\r\n=/t0g\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button/styles\";\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nThe `mdc-button__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused button.\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.**\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n**Note: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.**\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button--icon-leading` | Optional. Styles a button with a leading icon.\n`mdc-button--icon-trailing` | Optional. Styles a button with a trailing icon.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n`mdc-button__focus-ring` | Recommended. Indicates the element which shows the high contrast mode focus ring styling.\n\n**Note: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommend always including it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color-or-map)` | If a color is passed, sets the default container fill color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`icon-color($color-or-map)` | If a color is passed, sets the default icon color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`ink-color($color-or-map)` | If a color is passed, sets the default ink color to the given color, and sets the icon color to the given color unless `icon-color` is also used. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color-or-map)` | If a color is passed, sets the default outline color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v14.19.2+x64 (linux)","description":"The Material Components for the web 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/density":"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/button_15.0.0-canary.05930a453.0_1652467695344_0.36927423545350524","host":"s3://npm-registry-packages"}},"15.0.0-canary.c0a11ef0d.0":{"name":"@material/button","version":"15.0.0-canary.c0a11ef0d.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"1691e502a1f69bf55dff0f9555d9670badad3cfa","tarball":"https://registry.npmjs.org/@material/button/-/button-15.0.0-canary.c0a11ef0d.0.tgz","fileCount":40,"integrity":"sha512-aj9/GkVHfG5QfnQF0YQU8J774qJ3njbcv4erWFZ7mvhVf4Qy0wfJEHIzHhGpOK/Rm8OvWHwMiz1fzDIevNcsxg==","signatures":[{"sig":"MEYCIQCzkJtpBkbus5zfiRuxEHS7wDw8V0S3tsiH05aCcg6ArwIhAMncxm0bvqmoaK6DSmhQ5yz1/a0q0udcD2CdrvC9Z2+P","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":639729,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJihWzJACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrAZw//Yl+GEduZx4oDkoQuqETJ4Yt4UunL/Lz6kSLJCxIyXn07naC7\r\nzeFSlyodh04VFNjEr/S/vx4ZjlQAv0/ABaDUgqaT02wPyAYrxSJBVn2fDJDX\r\ntaxglQR3DgBnpFnXfdpaGqKVqVN9n20NbglzLktzPrKTVDKfHZEvYWA8B/Od\r\n8ZGiqasggO5MlahG72jkMUjsUmesXurXyCX6Gjxz9kdsbn8tysZIPaluleaj\r\n8czyR3bHH0cpGAGIiSaewk6U1r8PSdhiOXa8TWirkPaUzF1uy+G3gbWfdoK+\r\n9L857EaHhvtqbDkjcpfvIT59fCRAqrCbnPavHhzm0tfE2FAkvzdWvVTGnbNA\r\n8NGrhx+H5IwtR0gaaSS92nvQzOcjXc/jJTnTlD4ZpOGYX4+oJdN26u0f9cZK\r\n3Rnnm0gMlGSKVl2RxXCWNZZkIqyVmWUkbHwMrGyIras7Ts5mw8/8WtBVZHv1\r\n6amxmlrEk4m3fJ+CfK/I1hIuEzk0YzqMxjqzmS55fKEezGsVeKl68/feJzWc\r\nDtyFf6zT/rOA1xg1hVUYdJe72BlYvEkef9QuZOY87H3jTvlBffN3smB70ji2\r\ntu2Ht2NMQLSUAivI33vVG+I7BIwEQ2rXKyxZa0uK7VpFH/JtlYEzOcqEToAo\r\nDcghRW2W2ravzmWksE7k96upss7l4uBsJmg=\r\n=WKG6\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button/styles\";\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nThe `mdc-button__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused button.\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.**\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n**Note: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.**\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button--icon-leading` | Optional. Styles a button with a leading icon.\n`mdc-button--icon-trailing` | Optional. Styles a button with a trailing icon.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n`mdc-button__focus-ring` | Recommended. Indicates the element which shows the high contrast mode focus ring styling.\n\n**Note: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommend always including it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color-or-map)` | If a color is passed, sets the default container fill color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`icon-color($color-or-map)` | If a color is passed, sets the default icon color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`ink-color($color-or-map)` | If a color is passed, sets the default ink color to the given color, and sets the icon color to the given color unless `icon-color` is also used. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color-or-map)` | If a color is passed, sets the default outline color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v14.19.2+x64 (linux)","description":"The Material Components for the web 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/density":"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/button_15.0.0-canary.c0a11ef0d.0_1652911305074_0.652109142874987","host":"s3://npm-registry-packages"}},"15.0.0-canary.2f9b268c0.0":{"name":"@material/button","version":"15.0.0-canary.2f9b268c0.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"d5bb1d12797f5c6b887967545b7356ac6d98b6c7","tarball":"https://registry.npmjs.org/@material/button/-/button-15.0.0-canary.2f9b268c0.0.tgz","fileCount":40,"integrity":"sha512-6sWPlKAqD5PyV88yblzJdhKzhSt3pOmRisIFLDnrAA9+KQzwIT2W4xqgRlVDtv+3ACBtnpYNBSkqremzHsPagQ==","signatures":[{"sig":"MEUCIFgPcicm65FIrbmHyH0XQjtyOzN5iIzv8rLayTUwIIBaAiEAi/k3PgJc5USP/q6l61IZHixLOn5TBnTZGA37IYTB7DE=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":639729,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJih+0HACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoD/g//dVlgMO0GVROAKdo6eWOWSze+mp7jyxm+yGYv8LViVdsy0mov\r\ntpG9ezCfo97mTQKbRd1zq7MwQzJWzZSvS9VUX0pGLwp++/TBWG7OUxZmH917\r\nNw4kdtlG5yo7YmvUQaViwkcRBL060R4kbHabf4pdrb+/aNX1xkNK/gnOP5mH\r\n65y0mXdxBJC6/z1RDHfWh9Ldr9PGertJz2myuM+nLuPw/YSISiK1PHbFNcLD\r\nQ4GhQmPrOzPpDiAt9PPPZxo+tie+t0fYGg5Ww3GR8GJLzV7q8QRzvrH7Hn/2\r\nNA8bEmCjlyeU7BQ88o0JoxShr+WKN8EihLZxEPN4MgxbCOHzrIEpoSBb93Ji\r\n37aEuuWtE33tdvi+3DvpIgrklJja4WZ9FUZrQIQ+6KpkPQqg68Dohj4r+ekx\r\np/N1sT//NTmO6PRG5KulTVRXQYjbUS5wUpoElaZ4Xqpgbv2V8z8BwOOhKfxu\r\nrmBkVA8Rao9nJ05BxZAcUF41sYtjiIBXUI0fVnkaPcxW/3aWih8tJevjYkXN\r\nirPkO498QvMVKbRwolQSxseohGSMm4RqR6Mp2MTq4O2bLG4o3Qx29tgWnW44\r\nOkOKW/2Vjv+ZiMe2i0xrniTDU0K1L/TwZWALGTbd+HDWu2ljhEWAxipxfCr4\r\nKSLiFWmCYczfM2w5dFx7dCJ2etFHA7ULdoU=\r\n=Gsq4\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button/styles\";\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nThe `mdc-button__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused button.\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.**\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n**Note: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.**\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button--icon-leading` | Optional. Styles a button with a leading icon.\n`mdc-button--icon-trailing` | Optional. Styles a button with a trailing icon.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n`mdc-button__focus-ring` | Recommended. Indicates the element which shows the high contrast mode focus ring styling.\n\n**Note: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommend always including it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color-or-map)` | If a color is passed, sets the default container fill color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`icon-color($color-or-map)` | If a color is passed, sets the default icon color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`ink-color($color-or-map)` | If a color is passed, sets the default ink color to the given color, and sets the icon color to the given color unless `icon-color` is also used. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color-or-map)` | If a color is passed, sets the default outline color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v14.19.2+x64 (linux)","description":"The Material Components for the web 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/density":"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/button_15.0.0-canary.2f9b268c0.0_1653075207116_0.2984273491552998","host":"s3://npm-registry-packages"}},"15.0.0-canary.7741345b8.0":{"name":"@material/button","version":"15.0.0-canary.7741345b8.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"0412324e498a6eda52ec21396b4d1f4281ca8e7c","tarball":"https://registry.npmjs.org/@material/button/-/button-15.0.0-canary.7741345b8.0.tgz","fileCount":40,"integrity":"sha512-Tqez6vElIPkmNEhRBsm6SUA2AIiWnGSTrmGBy1SlplyhYkAFw/yCScau71HzmZ9k4Vm51i8wi4LsPcbKX4h9Gw==","signatures":[{"sig":"MEQCIFltN9Q0J2MZxitD86SnhnXO7f5K8Et483oz3eBJGfPrAiB9UXjpfJaOtXfNELGwLFokxxBhd2NwDKxPibvIg42gjQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":639729,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJih/QTACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpJqw/9FEKLPKbeWHevjwwKxAw0SDTt5jqoaIh9Kd3EKwcF+J6lEFoG\r\nvTXbC1lITMLfE8ImYy7kCIQTyGKgxROxzLjQV9BgVpSHXnkvR4iKrRicmEuO\r\nFv8CUcohZJnIroKgxcumrFThsjxCgdUfR9m5jerssLmFDgDZa04Nt8JXIbzc\r\n07oxAZJrBryxRu8sx6xCZh4zd5RLGnnI2wCvbIvERPjo95gsOS+NYMcREur0\r\nlat9VieUse0QEixZCSUm8WbbnSTOnt+xMbWmvo2MVGyHSNdWrqdhOyOUqegt\r\nY5oVdjVaHp234w4n0vukaMVqVv+z1T1yqiuFyzBzULnU+Zod7f6CtV/Oi9xk\r\nfxTgPSWLuNcHyST9G2frpHiwDM0+lzXKHBPLKTEJTFLqYQmQqCUYa9l5h764\r\nCMIychj3uo9JwB3iV9w+Gs8/94qI2zo0Vr4r7/D1aohIIB4v7T53qYaiVkxi\r\nueny+NjkyQPWXH6ch3RtJ+ZcqNRNqxMBLDM5RgdOTw1tNeFRAjWMdQkff7P1\r\nGSXyeHCnZkKQdiQ99cwgZb8K68P4K+FZR+FgiG6+TbaP4VtcM05lIWmrTux6\r\nvS1MELyrPRPdslSXx0PvEeZZgHhnb9gbGuSAwMfJs/Z30r40e6Pkp+JjGOsN\r\nNRXdRZSXiUSx1tOM3Cje84FfpIT3YpZfPQI=\r\n=UNIl\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button/styles\";\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nThe `mdc-button__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused button.\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.**\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n**Note: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.**\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button--icon-leading` | Optional. Styles a button with a leading icon.\n`mdc-button--icon-trailing` | Optional. Styles a button with a trailing icon.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n`mdc-button__focus-ring` | Recommended. Indicates the element which shows the high contrast mode focus ring styling.\n\n**Note: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommend always including it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color-or-map)` | If a color is passed, sets the default container fill color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`icon-color($color-or-map)` | If a color is passed, sets the default icon color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`ink-color($color-or-map)` | If a color is passed, sets the default ink color to the given color, and sets the icon color to the given color unless `icon-color` is also used. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color-or-map)` | If a color is passed, sets the default outline color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v14.19.2+x64 (linux)","description":"The Material Components for the web 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/density":"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/button_15.0.0-canary.7741345b8.0_1653077011065_0.1117398345184204","host":"s3://npm-registry-packages"}},"15.0.0-canary.f807e793f.0":{"name":"@material/button","version":"15.0.0-canary.f807e793f.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"54840fd577e29385d7338453af75c21986db1652","tarball":"https://registry.npmjs.org/@material/button/-/button-15.0.0-canary.f807e793f.0.tgz","fileCount":40,"integrity":"sha512-nDT4grYEVLIeIccQNZmrUPkHWx5BdM5Ft3Mc4HUeKFWUm2fNzstyckUsOvr5BERYldg6sm7vpBNGOjl7Cpoicg==","signatures":[{"sig":"MEYCIQCX9it1z276UA2yQbreWpBK0VaOOK+hph3dcCo2LD581AIhAK34Y9sdvJB3zM1jDogsol9osgnLnIptSHs2GFPSBBV6","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":639729,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiiBSqACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqUVw/9Ghzf3fuMVppyUO24TCErCnP9R90EyXjq7df8/VorYLPIzPH0\r\ntieoJQCeo00kbftokLuf2xzdNotl2VfaReHLlWGz2qevqDpfq5GguCr/9z5h\r\n6Gi85vZ0FYzYPDTq8rhSKw4LH/2dSUnX8MzkCx67UrZ5AoeVqSF2lWqxKNnh\r\nXM0naNCnytEXESRCYcCu416d61bqRmh+xduCyrehaI35Bz74lY+r6lgvMoDj\r\nKByCqbMQsBILgE7RTgewSkWVDeGoi5TFqLpDOPKhMYdQmsdGIgbMJ7pe7ypd\r\nTlzdnri/+Fy4BVSayqUzVx3k7gROVEKiLnch8e5ybaFE/0zhWepN2ys6nitW\r\npq8F/8qE4CfcObWk680wOgklO7rgFjhkzHtwYyzQI3mkrNVlLivwx9rOhi9C\r\ncI2e9AbP9PjIFuzq6/UkXkakFIqMRHD0SmtA3ZVzTJ/jVuDGeiLU7bQcKTmh\r\nez5AH3N3jfRKn8E1bSNbFmjk6nA7vsssAbY3C5fy9UbPHrjkYdcFHxDC3+Vf\r\nmn2Ky2KbqveBdUGCz6W1USPEK1KAJ+qqjwDowz0lvi/hBDciS8GSDGRXQxd3\r\nvF2CMiGcKj9wof3b0iyZ2XfU4Bq6Lm7Qar2Q2dHSfOc5vGl9GXjgNe8aLqR+\r\n3M5fnlUTbye3fozttkEdOy10uO6FUB03TM8=\r\n=ngp6\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button/styles\";\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nThe `mdc-button__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused button.\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.**\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n**Note: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.**\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button--icon-leading` | Optional. Styles a button with a leading icon.\n`mdc-button--icon-trailing` | Optional. Styles a button with a trailing icon.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n`mdc-button__focus-ring` | Recommended. Indicates the element which shows the high contrast mode focus ring styling.\n\n**Note: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommend always including it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color-or-map)` | If a color is passed, sets the default container fill color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`icon-color($color-or-map)` | If a color is passed, sets the default icon color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`ink-color($color-or-map)` | If a color is passed, sets the default ink color to the given color, and sets the icon color to the given color unless `icon-color` is also used. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color-or-map)` | If a color is passed, sets the default outline color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v14.19.2+x64 (linux)","description":"The Material Components for the web 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/density":"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/button_15.0.0-canary.f807e793f.0_1653085354521_0.5650049788041227","host":"s3://npm-registry-packages"}},"15.0.0-canary.9f53d4a8a.0":{"name":"@material/button","version":"15.0.0-canary.9f53d4a8a.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"9e63a8263bec072fdc1bd4e01d5bd3de1ba10080","tarball":"https://registry.npmjs.org/@material/button/-/button-15.0.0-canary.9f53d4a8a.0.tgz","fileCount":40,"integrity":"sha512-nYzGPHHRAQJ9ZTCJiyw4tEWCodnVAvOr+Wmxdy1Wd6Nuni8EGyL8n/jkfhhlh2L3nabMjgXpQDGFbxY2LFfJRg==","signatures":[{"sig":"MEUCIHmghH+2KxJcRzXD6pReMm54z0+IyqCjQXGWWjEHltbmAiEAjcsr7g2e+ly5rH7zpP+FRxpnGZNEnnAI9v2GH/C2ojo=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":639729,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJii6EaACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpRWRAAg63jWKIJQovfEvmwWcEU7C2lvNBQbLS8UjGpq44sFT3yNM52\r\n2n9lSy4HEipz8pLF+KvQSs6exQkO4SiAXdQ5MFnKx/A5YM9wdqY6j6CDJUZT\r\nml9PAo7jomBpGz261GnlaZ0Arp3jzAY+6eVQmSQ/IbSsMwW3LEC17tmYoT69\r\nZI5jPq5Q8ZPqfkwY0TykDDHYriGYGidQ2+Ol6pwzSCy8oQN5cOQsLghImxCS\r\n14bHJAFCfl+X2Q22xNdrNt6gYeip9pZPvFhSG8WVUBa4LanY6Kv0cO+rPYWc\r\njwdZbUBQvkxMMi7EUT2qluUZgrYja1jOTyJyxWU2T8Kyittq60K3x8iH0HFW\r\nrDSKpS6OgdFSAmv9jnYnsyg6TwKhHKZUQ8voZSodTY8Wv5U5uv8MgPz0hqKi\r\ngZkFHKph7JB6JUL/W3QUQHAqzcz2/KeS4MM2M5AOSfzsp2YHpF+EEIwGQQmg\r\nRDjIDlKvyjPne9h/PrwfSFBovk6zjQUkgDYr/XPn5J/PRk71xAYMMzpbQHt/\r\n9NIBm3Z7LieZFUIhH43/StyiyerOMDCO8h2fkCZ1xCBBQCu9c2DPdxfMS1bI\r\n+AACPz98yqsLge6hM4lh6dr0dHKR41zry3pQkaZ6+a5y0KW1uOTxk2KxoD/D\r\ncwU8W1XMAtmWtE1Up/p3OA1Ho2lqfTWUSQM=\r\n=SlZR\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button/styles\";\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nThe `mdc-button__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused button.\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.**\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n**Note: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.**\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button--icon-leading` | Optional. Styles a button with a leading icon.\n`mdc-button--icon-trailing` | Optional. Styles a button with a trailing icon.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n`mdc-button__focus-ring` | Recommended. Indicates the element which shows the high contrast mode focus ring styling.\n\n**Note: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommend always including it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color-or-map)` | If a color is passed, sets the default container fill color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`icon-color($color-or-map)` | If a color is passed, sets the default icon color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`ink-color($color-or-map)` | If a color is passed, sets the default ink color to the given color, and sets the icon color to the given color unless `icon-color` is also used. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color-or-map)` | If a color is passed, sets the default outline color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v14.19.2+x64 (linux)","description":"The Material Components for the web 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/density":"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/button_15.0.0-canary.9f53d4a8a.0_1653317913943_0.6392724816443864","host":"s3://npm-registry-packages"}},"15.0.0-canary.77cf00e37.0":{"name":"@material/button","version":"15.0.0-canary.77cf00e37.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"6bbc2075391fa37321ba07babc6f82df5c2601ba","tarball":"https://registry.npmjs.org/@material/button/-/button-15.0.0-canary.77cf00e37.0.tgz","fileCount":40,"integrity":"sha512-odp7rtHvNhM0d2ty6dGYcOwAdv8vaW5YewTxo5JTTTMHueTadg8udHwL/14bkef8ah78NorcHAhYv+vhzIej5A==","signatures":[{"sig":"MEQCIBX1xF0827cqeSv2gbXKMoYjhR8zHyLsBkUeFPrbIZs3AiAKeIkzCfebSEmhjJ0XzY6dXF/oNKAtM8G/d3U3G74wMw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":639729,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJillMmACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpzbQ/7BHkGqOObC1lI2ydhD5aVrW7HJclLbpdAsnKbD3BI/QaUVexJ\r\nKCtUBoObRCZjlfCJ7sR5c1kY39LRBL1pkZj96JRMVK3QAVZCW5wIz+/QsvJs\r\n6lttJxwvzEdqGj1GXBbwT7yZQjjEa5VlHzrrfp8rBqNIih0cx1KK6ZvEx5p8\r\n/d4K3sdnDZqpUeyZ8KfBeX8BhL6Aq7dfdPZVh7ryeFdO2Pdv/FiXDrRUWyD2\r\nAW9eCXe25cgvt8JJtbJFr7rFKlnaSEyfFOwST0zoi4Zq401MSSRbKxdSRZ48\r\nkjJfJjsweK0BpjszL4NMzooW873G9GKzEq6yoi98HY16vQSWvCs+SkSZ28MC\r\nSmY0CHsNJo8L3Ivo5Xrc8RvMrVossrxF9UidOkZq4X1ADJtAV2HsnWbQR5an\r\npgR7d9//WxKX2hvxAtbgYbm+L5x5dobCzcFz568D5+Wf9eU7sfLcKz4IqAqN\r\nI8wb/rJuYqoeeY0soXKeLBe/d0x78jp/G694E1FdacCfCJb450QKHjIV1GmU\r\ndzBn3CYF5TzANQZ8vQEfghE0s9fvUtCcOmX9jCUTgCPD5Ptt3bwG246Q+fc+\r\nc/oRaO1H3+708Zea4U3AuEQ6ovuBca6IUk7v9F6rpe4i784GwmThDZpKmqXS\r\nOOwctk0V7xvka4ONw2Ha7Nc0RfFZzDMpw/Q=\r\n=+Kgg\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button/styles\";\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nThe `mdc-button__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused button.\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.**\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n**Note: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.**\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button--icon-leading` | Optional. Styles a button with a leading icon.\n`mdc-button--icon-trailing` | Optional. Styles a button with a trailing icon.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n`mdc-button__focus-ring` | Recommended. Indicates the element which shows the high contrast mode focus ring styling.\n\n**Note: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommend always including it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color-or-map)` | If a color is passed, sets the default container fill color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`icon-color($color-or-map)` | If a color is passed, sets the default icon color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`ink-color($color-or-map)` | If a color is passed, sets the default ink color to the given color, and sets the icon color to the given color unless `icon-color` is also used. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color-or-map)` | If a color is passed, sets the default outline color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v14.19.2+x64 (linux)","description":"The Material Components for the web 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/density":"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/button_15.0.0-canary.77cf00e37.0_1654018854211_0.28594737853111596","host":"s3://npm-registry-packages"}},"15.0.0-canary.3c7b844c2.0":{"name":"@material/button","version":"15.0.0-canary.3c7b844c2.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"f7bb7e565a1e97f10fb829e392733150b1b43f3a","tarball":"https://registry.npmjs.org/@material/button/-/button-15.0.0-canary.3c7b844c2.0.tgz","fileCount":40,"integrity":"sha512-UgFIjExG/7QvrA1liBJumy4juh17QivYNxuL3eADdaGzLN2RqrR4OHJoXDfy7uaMeT6oHu3kETdKPr1Lalp2Mw==","signatures":[{"sig":"MEUCIEve6ziui/CmUGG/RDUdYBTO5QwTK0ADVIsUFCOoocx8AiEA1FzW0nz4EGrjhqL7lh7Vs2GRsJ2bd4PPJG+0MFNQp14=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":639729,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJin8+FACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpMlQ/+JR1UzS84t0LXaZwyEI1UuwDhEujzoT12eTpJPDxy/fwLQubW\r\nM81UxAQm8BpngeHHUZEgKu3/sF7C+VsV7pU7s499JdUD5sNSU5qS7Oyxlkf7\r\nca8Qr8opjstUUcbiC3G+iB+Ej1KyyuntqX4o7EVnLbp6tvyZMjlIe4jXwHY8\r\nET7uPh/S9fqJTg3AjGRs4rSJhPCyk4n8uidQsCQ+f+ZQS+DF43hL+cdYojHv\r\n5jDxKvKm0ISHbxzsmWAHo/1V1tT2WQru8jpWGty9eKbvHVs8gcqeFzLwbTg1\r\nC8I9bYUI886xZmdegpvEM/nBaDamOEnBG/96ZonOGoFOJ6a6SpXCL8fBonbd\r\nsFrl6PQ3cwbwkczr6+MMO8yWdPhTu8XMmKA7yMKD4OE0dqIT/r3P1dfCiLZy\r\nZdeWoxp/WrEtg1gZxWUCNd7DS8jgCBNrZsVH7xCsrVu65imZQWVqPBAyYwfs\r\nxgsvsadP0ACRkev/iX2uNl4HZ+oVspSm/N3+7K4wsXiM3zZ5MrVNg2n1Itax\r\nyZjkbJkpqQSro8Ims6t/seHFSEUhI2dPWPSHwE7CaWB3Q8SqAKpqxl5q8sU9\r\neCrOXhBmwMimI/2OXzQqofDPtg9fpukjvVoGdC4t5zW/YMhlwXStcqiEOBb0\r\nhW62EY1f43txEHNEb80yJa+u/W+gk8b7sLA=\r\n=N2Oh\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button/styles\";\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nThe `mdc-button__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused button.\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.**\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n**Note: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.**\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button--icon-leading` | Optional. Styles a button with a leading icon.\n`mdc-button--icon-trailing` | Optional. Styles a button with a trailing icon.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n`mdc-button__focus-ring` | Recommended. Indicates the element which shows the high contrast mode focus ring styling.\n\n**Note: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommend always including it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color-or-map)` | If a color is passed, sets the default container fill color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`icon-color($color-or-map)` | If a color is passed, sets the default icon color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`ink-color($color-or-map)` | If a color is passed, sets the default ink color to the given color, and sets the icon color to the given color unless `icon-color` is also used. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color-or-map)` | If a color is passed, sets the default outline color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v14.19.3+x64 (linux)","description":"The Material Components for the web 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/density":"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/button_15.0.0-canary.3c7b844c2.0_1654640517689_0.060937471875426974","host":"s3://npm-registry-packages"}},"15.0.0-canary.df47894db.0":{"name":"@material/button","version":"15.0.0-canary.df47894db.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"9b7eca6b966e036b5e780a7b4b02c9e0234643b3","tarball":"https://registry.npmjs.org/@material/button/-/button-15.0.0-canary.df47894db.0.tgz","fileCount":40,"integrity":"sha512-L/lCqsxIG675uU6qecS3uToD9bLZW4b5xGX4w9tnlzZgs3lPurXD82ACIin+mM3Mo2NoLD48J73fHLz7pBaGFA==","signatures":[{"sig":"MEYCIQDdz91KtzX/IXKo+HfdxDxpRnG+dCV6braevz63ZLDkNAIhAM2fkzjAaYODxp4FYC4jmvBWk2FwqpbmpGmMgGgwnGw5","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":639729,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJip29FACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmolwBAAi+Ll6GadzbHEGTegaiCXeveDU2a+Xg8KgSNbrd5Euln/tnCy\r\nWB97J7oI5mCM9BH6vfYX7THUyJfhcvRk3GXn+k31OR86C5vOjsBVeLe08GcY\r\nk9bPG0iNHp94SL/50/xCpFirvuUsOFDLjV+U7qGt0GDbLBfkCTWN/K+Xi+gg\r\nXL4XN5XEd0M9wvYD710343Ws2+5IiZfipLUWqoWP4LWqjDxI+DARtGpNCOr7\r\n0LV6aXzC4TyZrYkGkkg1fvSRce+GPDKgxcix1EnKFtlZlD98dEMAXwUW4RtR\r\nboz5zrWmITBS+ydmy6zN3WaBAH1tayHEMsBx4IHIACIBD1THXyktmafFd/sC\r\nTzCBqjVs+j9/khV5yjZK8FWAEnME7J77YcstVMJr552n5pm1ty+s6cZ68IBY\r\nzuFVlHXo7HRuP7YBT18qLq9A1YgCwdt43QEwUI+zax/e5cFX9m3i7PnigscI\r\nlkjpKcJUwL4TDc180EjygIlSODYcZjBpbSEQiHRWR5rb3D4HsX2i9bZPa8Je\r\nZMbSspNVv6GAM042U9wFUVRkX/ABO4T2Od+S5ILlIVB6dL+6I0uFRmru/NGL\r\nSXhtFNiK25yPiGgv4N3kDN91WmiAvFyM57h3m9Kt3Bd6gtB7LbNsxC1VAIlT\r\nm9yx96wdFhQ03pB636+9MbaLNYnBk6L+0W8=\r\n=5+1I\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button/styles\";\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nThe `mdc-button__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused button.\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.**\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n**Note: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.**\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button--icon-leading` | Optional. Styles a button with a leading icon.\n`mdc-button--icon-trailing` | Optional. Styles a button with a trailing icon.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n`mdc-button__focus-ring` | Recommended. Indicates the element which shows the high contrast mode focus ring styling.\n\n**Note: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommend always including it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color-or-map)` | If a color is passed, sets the default container fill color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`icon-color($color-or-map)` | If a color is passed, sets the default icon color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`ink-color($color-or-map)` | If a color is passed, sets the default ink color to the given color, and sets the icon color to the given color unless `icon-color` is also used. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color-or-map)` | If a color is passed, sets the default outline color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v14.19.3+x64 (linux)","description":"The Material Components for the web 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/density":"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/button_15.0.0-canary.df47894db.0_1655140165507_0.8033138502692121","host":"s3://npm-registry-packages"}},"15.0.0-canary.b18a873dc.0":{"name":"@material/button","version":"15.0.0-canary.b18a873dc.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"04b2a30dff42876cf95bbe7a25beb2505497fe99","tarball":"https://registry.npmjs.org/@material/button/-/button-15.0.0-canary.b18a873dc.0.tgz","fileCount":40,"integrity":"sha512-czVbTv1bQMlsx1yLsvp8ozv2UujCM3LgOZB4HYH29XyloUlGimXjSN2BqAXwhqLe70LEKmlVDDk1swTFT12gyg==","signatures":[{"sig":"MEYCIQDlyV0cAZjZXFr7o4o8wpOakmZqRlCEDFlJtafkjJQk2wIhAKgk2AJZXVeKHR4wD45EZ/CrJWJnZIfBi10DQsUbaRJB","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":639729,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiqCsGACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmrw3BAAmT4x+NLUup1xFkX76gmPeuWVnRYtpnC27IaLN6VBJ+8+W2mK\r\nsMRefnyqpyz1lAq+l8Ksc3IyvjYtM5/zPwhkf/Zew3EMqPQHDJDJJ60caVFW\r\n/FvrGQ5lXL0sej31lsx7POtY0aFJ1SIue9RmIqdeQdeZxlJDdw13WI8IAA44\r\nYhYCa77jytI4xnFBxQDbjYyMuwH2SwO3LPrCdoocYj5XZSH9i27qipmsO22P\r\n6xshNjLY0FgYxcBsrXax797ieTr7Xw6kz7VPMp/KJAVJqucSkKzODc+7MsTa\r\njenD/ZECfm/hIwMFDRks6QIsqZ2UfNb/sf5e6GNfO9vG2pF62G6KA1EnybkG\r\nbdWwIIsLzGyVeahTUclfwOusmKrG7eRpTiwAA/gKhg1iZyj/m1opHBhX/V41\r\nE15m44XRCAhFFB6foHip8WFuoatCcyRP8aQZW/503JkC8MGOphNiJcoCFm9g\r\n4r8vooU4GNubNjTxzh0rtxILUy1c2jc9B8IhNJeLydCViGeAPPgUbV3r0hXZ\r\ntPypqrdrw1ArCM3kGc7RY8figtul2AK3uhfZ7Fqds+leYjyIPkm/W1/qjZj0\r\n2Z4xYmcnG+7TAleU88dcOzAeUzqBslG5uqsYQ88Dl18XNT3UfdNxXAlkz76o\r\nVmCwIAEfFCn2swr1GW2Gd7mWedPJb1iDkt4=\r\n=bolp\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button/styles\";\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nThe `mdc-button__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused button.\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.**\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n**Note: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.**\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button--icon-leading` | Optional. Styles a button with a leading icon.\n`mdc-button--icon-trailing` | Optional. Styles a button with a trailing icon.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n`mdc-button__focus-ring` | Recommended. Indicates the element which shows the high contrast mode focus ring styling.\n\n**Note: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommend always including it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color-or-map)` | If a color is passed, sets the default container fill color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`icon-color($color-or-map)` | If a color is passed, sets the default icon color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`ink-color($color-or-map)` | If a color is passed, sets the default ink color to the given color, and sets the icon color to the given color unless `icon-color` is also used. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color-or-map)` | If a color is passed, sets the default outline color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v14.19.3+x64 (linux)","description":"The Material Components for the web 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/density":"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/button_15.0.0-canary.b18a873dc.0_1655188229961_0.3307757967537832","host":"s3://npm-registry-packages"}},"15.0.0-canary.ba9c29637.0":{"name":"@material/button","version":"15.0.0-canary.ba9c29637.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"aeb89da94d27afd48b98d656ae2249fcb8925657","tarball":"https://registry.npmjs.org/@material/button/-/button-15.0.0-canary.ba9c29637.0.tgz","fileCount":40,"integrity":"sha512-1OCLqmb6jpg6aoNHeSnwlQ2VY2mlDJSbSFeDlsRqkVPJ35u6dqGnNzy1vxY+kQVLxlT7c71iJ9uZ75dmr2ZEcg==","signatures":[{"sig":"MEUCID6z2JGG4GitUuT/5UDPhJPGKeIoFRpe0PCydmkSuevLAiEAxWCcUpLCcVjFMbz2rMhVDiHeCE6qlqrYKQl0P7Dh1Yc=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":639729,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiqNo/ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmotFg/+J7vne9nhSFJ8c3kGZF/tvb788rnFXTlyQhrMvZy2ZY7A4nrR\r\nVNrQjlJNv9pUZUyqc6NAwAg6LysVXdqR9Zpq14Yrso10CnEgdlD3jKqTvz6u\r\n478Etez5DNKil8BbHXHv0kUKu+0prma/Ui0OBrbNHqNUoLDBM6TWKf8J7bd+\r\nTon84vkrHwOhjAOhOdiSjFVL3BKpujJ7v1i6UUYkB/+scY63QcDYQ4Fc1IBT\r\nEcBavKzO+DejjZ7MBIFSoFMOwC00uOCuenk6wwjspfH/LpbR++kV2aqTFzQE\r\n9VJWcj4Blo67x2xeokJI5++BD4zBySKmsxyYrXIJ2t7Hyif5rIVKrmq1wR/k\r\nm3cBdDKRmbO4ctHBqr7b0v0LkDkSZTUhBukSoGSxzHXVfl3ov11ksqcK7n+o\r\nI/Kb/EII1sMWkNHSybd0WOIIO627DbeCHpFMDq969ATQ1ou8OzrLplYlVh+g\r\nscFZECeDMTjKQX9GHfhZHKFFVA/XuPaI3qIK8l9q8m/iwF2wO1/q47cWyEjh\r\n5Nlaz60KoP9x8XKuiILNqHxWImPVWn18x+DnQGrXwV82OakhbMlYEbJO5lb6\r\nPFR37tDMepQUxqsEB3vRrrQl70aoK3jidEMYQ7PefkyiA819AV1M+wQwxIKW\r\nL5vMI/7aJ//Eq5w/kzHREekOlPvQwWbYeF4=\r\n=+DoF\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button/styles\";\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nThe `mdc-button__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused button.\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.**\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n**Note: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.**\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button--icon-leading` | Optional. Styles a button with a leading icon.\n`mdc-button--icon-trailing` | Optional. Styles a button with a trailing icon.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n`mdc-button__focus-ring` | Recommended. Indicates the element which shows the high contrast mode focus ring styling.\n\n**Note: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommend always including it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color-or-map)` | If a color is passed, sets the default container fill color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`icon-color($color-or-map)` | If a color is passed, sets the default icon color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`ink-color($color-or-map)` | If a color is passed, sets the default ink color to the given color, and sets the icon color to the given color unless `icon-color` is also used. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color-or-map)` | If a color is passed, sets the default outline color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v14.19.3+x64 (linux)","description":"The Material Components for the web 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/density":"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/button_15.0.0-canary.ba9c29637.0_1655233086835_0.7379088342300404","host":"s3://npm-registry-packages"}},"15.0.0-canary.9bfd12f01.0":{"name":"@material/button","version":"15.0.0-canary.9bfd12f01.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"0f51147bee43b0b72219875441c722b7b5a3a190","tarball":"https://registry.npmjs.org/@material/button/-/button-15.0.0-canary.9bfd12f01.0.tgz","fileCount":40,"integrity":"sha512-Wd6LdmlnGaPSWYSr+m/FuffEOwlplrw/pL7CvnvUs5ogJD/c1nBJS04Ts1U0X3wbzgoA1x6xK4A0Q6khm8oMGw==","signatures":[{"sig":"MEUCICILfpc4AQtAr4Ftp2U1uv5GyLGMn86TFT5AdEB4adIjAiEAtyhA7DCp2Ek4dfdGk7g0ywWu0jhBpzRNl34dyDLE8Qc=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":639729,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJis2wkACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrVig/8Cgz43sEdi7D5m1WMw9lt06Z5rTnfpYmME9u+AIsp0KYgyxFg\r\nsBP1P7GyuFLgkJskMYtag8qRct1FeJe0o9Ve0tOU8SOikUPwVk8sPijp6uo+\r\n0z4PX0IHoY9eDTAiJ6StZ6P0vMHSbg+3tbcBgOVYlIHBdvuQ7p8GUvLgV/Ga\r\nCA2bzjHFG6MlhdescNuqZngeA/W+wAoxsYzqb6zr8Qhqfew6pRi+o+k8IUZu\r\ncN7j9+8S0ukirtF9aiyJUrtjtLkWC/MqmGR1fV3umbU8UY98dCMl0uL3F2d9\r\nMCj7r7CQcCk00eCYYgwqDLzZG6aRLThuY5j224WEmbCz0u9rvpE3TOOKs/SO\r\nr5cUlUnPAUprfWi6Ov4nX32rYit+ShtpPE7G1DE03QWLjLREjG9kcOdn497z\r\n1jC5Q4Mu9s66eaDCF86olVXTfS+n80GJwVYVhEd4bbjCEalMh4ewpN0Esv3U\r\nkUMml2UDEQN4kQUMK6fl+IQNaBAhzZVOG7TRNuzDdSa/q86Fec80kU4f0/2I\r\nfZ6TcgHcBIkfI/u30PlN83uX/pNNw/kkk0Az6sbNFmsWQXTpDREIJEk2S2O+\r\n0PLi+aFa6OssGklw0R9YJE84142v/T8bmb2PRP+39I1lhUq3Nw7pMaoGKZfo\r\n2UJlQC7x5KV+b1kaFtUZDJS3isp8CTyzklQ=\r\n=psVX\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button/styles\";\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nThe `mdc-button__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused button.\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.**\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n**Note: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.**\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button--icon-leading` | Optional. Styles a button with a leading icon.\n`mdc-button--icon-trailing` | Optional. Styles a button with a trailing icon.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n`mdc-button__focus-ring` | Recommended. Indicates the element which shows the high contrast mode focus ring styling.\n\n**Note: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommend always including it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color-or-map)` | If a color is passed, sets the default container fill color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`icon-color($color-or-map)` | If a color is passed, sets the default icon color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`ink-color($color-or-map)` | If a color is passed, sets the default ink color to the given color, and sets the icon color to the given color unless `icon-color` is also used. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color-or-map)` | If a color is passed, sets the default outline color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v14.19.3+x64 (linux)","description":"The Material Components for the web 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/density":"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/button_15.0.0-canary.9bfd12f01.0_1655925796517_0.13569160910063527","host":"s3://npm-registry-packages"}},"15.0.0-canary.764de225d.0":{"name":"@material/button","version":"15.0.0-canary.764de225d.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"fe98474e063ba9eb5a2dd70d57a7e396b05c781f","tarball":"https://registry.npmjs.org/@material/button/-/button-15.0.0-canary.764de225d.0.tgz","fileCount":40,"integrity":"sha512-A0swXlmkEGmlYwA8J6EtMiIDwB/lnZTrnEXJj/8ZW6CwoyOanE2xPGJqSfZ6p+OaOUBfgkdGsMxKNWuE88n2pg==","signatures":[{"sig":"MEQCIFfD5RaUC9dfNm/ehO7xGgxntQl6Thf3QyxteLJaUYoSAiBuwbfkx4IO7T2xDfSyRjAGuUky4yXGY2KPAViqq4o+wg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":639729,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJivH2CACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpGxw/5AKhE/PY4k/PVb3jGlqfOBIPtch6FqLyWbzsifhpuscYOVyTN\r\n7VgP2xLZN1i7sg88rrhpuD1NpS4qoBnvoCuDK7NoWvBQwsFVdFiLTuEIj0pU\r\ndw1uDTtmXphX/ZDYwaIctZfV8iBEw9WtuEtokxsFydYAoo5Sd9i3yeTlrbf4\r\nwsbhc8YGhfobER5MHRBRltY2IHCDxtpxfMdl7ySty9q96TGb43tLtkhEHddV\r\nwrTubFpNFEDx+3xI8n4SVTHEuoHU7HN3IvpP7RjRUCKhG0faj5zlbDbXSUSs\r\nW6zPoQZbD8IspytHkcpTIyr26Yf9b+PR5ZrWkcpul9bFEC+Kt2HT2/u3rDF+\r\nINZBItUgUUVKOViEYlmMW4I8NRGTxdDBWs1qs8vXqV2TT0gUCf26Zup1CYWs\r\nyN8/utUCQ4TAzDpXvJAySYdEav/vXPXbmjpx93zR6z3/K7eV8DMUzkebQ4Bx\r\nSs4+8WrD1KKaVTdyhpwlt8FvtAmpOSocHTLg35cGdKJF1xt/YSDWQegWgc17\r\nefsioX42g/DKJXNSJtbvmKsaHQFnuuvfYy91xBE1CGP8vUu62czC259skddy\r\nirU5GWYAKtpqSLIuhKjr+AGcGM5bPF5msTbgRwVH/AzgtG6tqwiNAouDQiKQ\r\nCRzmo6tRmapcpTIB12boHShjdbsaEY1N/DA=\r\n=gqi4\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button/styles\";\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nThe `mdc-button__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused button.\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.**\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n**Note: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.**\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button--icon-leading` | Optional. Styles a button with a leading icon.\n`mdc-button--icon-trailing` | Optional. Styles a button with a trailing icon.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n`mdc-button__focus-ring` | Recommended. Indicates the element which shows the high contrast mode focus ring styling.\n\n**Note: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommend always including it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color-or-map)` | If a color is passed, sets the default container fill color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`icon-color($color-or-map)` | If a color is passed, sets the default icon color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`ink-color($color-or-map)` | If a color is passed, sets the default ink color to the given color, and sets the icon color to the given color unless `icon-color` is also used. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color-or-map)` | If a color is passed, sets the default outline color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v14.19.3+x64 (linux)","description":"The Material Components for the web 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/density":"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/button_15.0.0-canary.764de225d.0_1656520066265_0.2817298553462797","host":"s3://npm-registry-packages"}},"15.0.0-canary.31e517cea.0":{"name":"@material/button","version":"15.0.0-canary.31e517cea.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"a9b582ed9fda4b27f205768f111fdc48cd8cd25f","tarball":"https://registry.npmjs.org/@material/button/-/button-15.0.0-canary.31e517cea.0.tgz","fileCount":40,"integrity":"sha512-fa2zbBVs4CAuLA6PsGemQbVGJaqTO0EfToOlZgM9Bx7dSaR1GYfyNtUJrE0wYqxP9yJWhhCsLIKWjtx5Xt/WvA==","signatures":[{"sig":"MEYCIQC7JAIkS3nxYkOxl0hVPduoBuA9V5fJHVQLO8sxxtIg+gIhANP4ko3tdsgPfi8Uej25af6iAXd0OHxJ4DLd6f30BfKZ","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":639729,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJivzzyACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmq4CA/+KTzdg2nHeV6itgiEMYJWhz6QUg3f6h2eM9E0yEvBnKAXAGoJ\r\nUuaZBDfHz7oddKcrPoSU0h2SHCLMN0PmrJljswyWg8UG4vUE/ucKEruExJVP\r\n1354Tj6BMhJ52F90ZfeNcWU384+hjMiHkbFOYydxKz/zomzhA8qGmLT2ol78\r\nKy0aVQF5JKrqVh/jLCgsgi3ZHVW+Y1WPIHth+iqftrqbrOc6ffPuTSEhi+jD\r\nXLp0/nNirYxh5mOaTqnIEjElCn2mLMN3++sZFNj4dZpNA9UATZvk6W4loCJ9\r\nJ+HjmTfGNC6RNcZrT6egYThwZUEOKcpQ8dktzhBLLHHHd8Qs59FkwCY4qgUY\r\nGOBKNH4wxKge90bs5LbTNlyGXSUWFq9sPm8NUY1HGzv8Z5wQepNHh756ugfY\r\nuhTn89fgAcimr5GZPC5LAuEHZN1m/DwrRoNRBgHDN3BzmZjP1pJfKvRYKj6T\r\nxaO96KhlozvbClJ5K+EG4sSyOfuUuMkaRl3P3Xnu6JHMvNxI+kaHp8zxGE0N\r\nbDpoQy6Kk/B0M6P5H9SJhynTYlEanyQ4dp22K7hvTOahUHsiU3NTSk4QMRMx\r\nynZXd36mHrUojnHzZ4cNkiLvek3hLgguXobnA4VBrIOvi/qKBXH4yiL2E81d\r\ndEZ6Mq1DPXUWBE7TZt3FSxbz6ZnP8V4+jH8=\r\n=sNu3\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button/styles\";\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nThe `mdc-button__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused button.\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.**\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n**Note: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.**\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button--icon-leading` | Optional. Styles a button with a leading icon.\n`mdc-button--icon-trailing` | Optional. Styles a button with a trailing icon.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n`mdc-button__focus-ring` | Recommended. Indicates the element which shows the high contrast mode focus ring styling.\n\n**Note: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommend always including it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color-or-map)` | If a color is passed, sets the default container fill color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`icon-color($color-or-map)` | If a color is passed, sets the default icon color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`ink-color($color-or-map)` | If a color is passed, sets the default ink color to the given color, and sets the icon color to the given color unless `icon-color` is also used. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color-or-map)` | If a color is passed, sets the default outline color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v14.19.3+x64 (linux)","description":"The Material Components for the web 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/density":"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/button_15.0.0-canary.31e517cea.0_1656700146703_0.7563456046178092","host":"s3://npm-registry-packages"}},"15.0.0-canary.9ea4e8e9c.0":{"name":"@material/button","version":"15.0.0-canary.9ea4e8e9c.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"3d9e5f0f358251367c524a0b8abe09e3f3b05af7","tarball":"https://registry.npmjs.org/@material/button/-/button-15.0.0-canary.9ea4e8e9c.0.tgz","fileCount":40,"integrity":"sha512-92MA72mC3SOhYLVEl9Mrmt2MFYhhOkVO/kNCJfgYbGIUMIfOwHh8ZQe7wcP1h+rgHNKAnMgXUu2H+zq/nWRPRQ==","signatures":[{"sig":"MEYCIQC2LtHaRgSNuV+5WGMhvZ/BHOZAKKEzQ2q1Y1w2JAYs1gIhAPfcG4EfRpeDLdCgeZai0j1W36DHxYzGNJnhIv5RsYjR","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":639729,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiv3txACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmql/A//UHJGveb7ocNq31DGcLAVprr9FiC+DtQ7ipplXKQNSvJS8LqR\r\nKNcJMHiAUS0/dVMES/ZgAtyOJ4Xn497NdIh94Z5Jh3DHwOLWgagVcQtzco5P\r\n0I+XR5rvvzHIwi4hP1GmeMylbuKLZNZsP60hUNaa8sx9bY3+uwpSYeqklvz6\r\n272YeSTVTFCYE9CoSzS+Q7GWX1asuSo6lPun2/EybnmUC7Ev8uOIoZqRnR3B\r\nptmkFrTUx5fwK1ZyQZHCEnfsajVbP/SDJEAmupCCtw6o6jayDonjsKR+o08z\r\n/UK0EdCikcEga7N6ETrmHET9nUKvxT9q2DhBMfFkuh/AXDTX1ofGpHyrwIJq\r\nmmSym3jB68Wwx/l4Pknns4SvBC00MYbsktT0Tfdmk9qv2UpPYd3gNZsfi4TF\r\n/cGKuwkg4yw9GF/WGcZKutUSZ6hK9x/cx5x37CPKCEIFTe2a/XjuphV2YeXw\r\neKvWQQlVEgr2XV5FAor+0vAa/taeOYFvCquUolGlGY8YaeIS9mpyXuxAMJvw\r\nv5Ls89DUyxxYGTqWmhzOMmpDRzRHxVJg9R3uIgT6GxlGOAJEqrN7fvxAzH8u\r\nB9vH+ErTDnpghqWriyo44WRUlHDzrWjuca63z5wTnaX4Rm116hH7QFidqT3Y\r\n+Z5NUzbYljaWyWpMmIdC9Mbtj0h2inhhh6E=\r\n=YFt6\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button/styles\";\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nThe `mdc-button__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused button.\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.**\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n**Note: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.**\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button--icon-leading` | Optional. Styles a button with a leading icon.\n`mdc-button--icon-trailing` | Optional. Styles a button with a trailing icon.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n`mdc-button__focus-ring` | Recommended. Indicates the element which shows the high contrast mode focus ring styling.\n\n**Note: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommend always including it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color-or-map)` | If a color is passed, sets the default container fill color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`icon-color($color-or-map)` | If a color is passed, sets the default icon color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`ink-color($color-or-map)` | If a color is passed, sets the default ink color to the given color, and sets the icon color to the given color unless `icon-color` is also used. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color-or-map)` | If a color is passed, sets the default outline color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v14.19.3+x64 (linux)","description":"The Material Components for the web 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/density":"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/button_15.0.0-canary.9ea4e8e9c.0_1656716145477_0.9434689428803089","host":"s3://npm-registry-packages"}},"15.0.0-canary.cd5bafabb.0":{"name":"@material/button","version":"15.0.0-canary.cd5bafabb.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"dea6b9a3f12e701583eaf5530ec6c7c8b69f5fd6","tarball":"https://registry.npmjs.org/@material/button/-/button-15.0.0-canary.cd5bafabb.0.tgz","fileCount":40,"integrity":"sha512-Tp6SD1M7p/sNgivezVKyFYrkHCUYZNIjeSNK7FzxOHuW0VFwKS4fTsqkjIGBA2D/U9jINzjLWQgfP+2fs0FGGw==","signatures":[{"sig":"MEUCIFxAZg4837zufWsQvMasF1ESL4mJye6gZN//6EA2qLtQAiEAhH03gaGHZVV5AE9S4PEu2VZ1mYa6QVdVk/hEbjDogp8=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":639729,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJixcyFACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrnVQ/+NEuWPkVkkdHUgmeh3mqmWYHYH2TYDKntRzHdYB7NAkclcEtA\r\ngdqTZIGKh3NwhvkSh44QFjVa9yYvtBTdbxtS/kc7oOwYEJHIgwyP6dDjPune\r\nOYLl7IAPRd4716HJCPGfbvEXFKIdWhn2iStHAEx6y54dj6C+5YXedpbCG3tx\r\nvBZv6UgJjp09FeAw7sJ7E78WGGNc3vAZvM0jmyahlkleD44Daw/CcIeLEzBe\r\nkayN47XMVK1P9Du9cM0+rFpMwyQ7X5Pdi5FV4kOxLJ++d9s9PMjVCZXLp7bP\r\n5N0vlvQuFa9bjQfzE4LuYFveDN+ABDI+csUaCD01le+v7TF7AP+ywGxuQBFF\r\n56MhFT6ilHO/drjWvcEPgFBrKeAdA/AbN7I3z5scYArFymGdKrGOtXVmIwL2\r\nyoHPwK+NKKwvl3xtRlcDs8oVf46gee5mggkUVQEUGkDe+KGNEQFK3atEC2b3\r\nvqP4QSTTCq5LHjSjrhNBViRj6HXu5kD5bCXRLwDYwf8CnPAz5Edfff8PfeM6\r\nTCbajUTcxGDvUMmmMGFiWSNC0sebrWa6ztm7YRZjtimNX4q4p0+8A5GhtxJT\r\n7qIWiXWyZfFXj2cJAuPGsoq5FNxLHXyfEZq8/xoFYAATf/3hEfWvvEXb9zvg\r\ncRaVWVtCYAXoCEvYo+bLS1fvtPvSwHGTz4o=\r\n=dsjI\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button/styles\";\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nThe `mdc-button__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused button.\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.**\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n**Note: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.**\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button--icon-leading` | Optional. Styles a button with a leading icon.\n`mdc-button--icon-trailing` | Optional. Styles a button with a trailing icon.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n`mdc-button__focus-ring` | Recommended. Indicates the element which shows the high contrast mode focus ring styling.\n\n**Note: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommend always including it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color-or-map)` | If a color is passed, sets the default container fill color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`icon-color($color-or-map)` | If a color is passed, sets the default icon color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`ink-color($color-or-map)` | If a color is passed, sets the default ink color to the given color, and sets the icon color to the given color unless `icon-color` is also used. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color-or-map)` | If a color is passed, sets the default outline color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v14.19.3+x64 (linux)","description":"The Material Components for the web 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/density":"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/button_15.0.0-canary.cd5bafabb.0_1657130116765_0.2956070746518502","host":"s3://npm-registry-packages"}},"15.0.0-canary.a02fe49d3.0":{"name":"@material/button","version":"15.0.0-canary.a02fe49d3.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"4feca8f7f24d56f63faa4a50d866d55f63522ca3","tarball":"https://registry.npmjs.org/@material/button/-/button-15.0.0-canary.a02fe49d3.0.tgz","fileCount":40,"integrity":"sha512-MGhk838aA4E52Dhgkvi/vwdZsPPcY6OFZTUpZUjfGrkDcisnA9wxWfJivnZIzyC+W1tQ91K5NeEhVQBaR73SJQ==","signatures":[{"sig":"MEUCIFjpqdHsPMDb/yUuPw6eIMdsH3igez74YrtNANGrPCiFAiEAtYBL7KQb+RuRtkySJxO9BUBOI/dnmVBVa+4N/Xi0kxM=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":639729,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJixdnEACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoUBw/+IM2GD0FdCT8Ej3hzCcb2lyQbP3knsvrQ6/NCwgp0Vs099aya\r\nzQd4E/Ky2V7Ia0R8N4V+uYAPmEwzMlc8PpxMyN3HkaHSwCR63rE6xcjEA9Tc\r\n3fhxkeNFZTCjAYQy5J4KXAhCa9DwcBqEECOIqI3pvbLdbRl8pA6jRCg0AeBq\r\n3Bediizvjy9b/4nHzIWzrLlEFrrWMIdAVGlJRIP0H5pbclms+HVJLFirT2KA\r\naUQpezek+pqj2wtHi7KAcoYTOL5BgvpY1yUjo8rd+XmpTCigPhfGAjykjdCj\r\nOK5XYCJ9DmekavC7z/ZLaO3FUmP9tBCRY+VDKo/JXDkeB8uNvjHZVeMVWD+q\r\nu8GBoF5NrVreNJJdEfkm8FAG3/V5jrofwXmLq7txIkMNEOR8y6GOZHJ6zp2y\r\n1ShuoYpEAECCJFPLXavkS/o8dwzEJ+aiXPAFnCvz57l0i2lY6MQV0dezeVCJ\r\nyqXM5kgjzj2JsdUQLWD2UqMu/35tEYrv9YJX8V//V7h7kmMShIIYLI60LZUH\r\n3WgFGqJtoNRItjDKD41x/fd+Lz8/KYYlZvva5TFiBTOo8vwstcNxLE1HUk+o\r\ngO+y/QTsZPpp8ju9cpWr+iWGp28OM1qEWufLY6alKWugEV7UajlHfeYIYLA3\r\noMt8aRTh4Pyokkbp/kMp46ogAhWtT7XsP3k=\r\n=T7ku\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button/styles\";\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nThe `mdc-button__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused button.\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.**\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n**Note: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.**\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button--icon-leading` | Optional. Styles a button with a leading icon.\n`mdc-button--icon-trailing` | Optional. Styles a button with a trailing icon.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n`mdc-button__focus-ring` | Recommended. Indicates the element which shows the high contrast mode focus ring styling.\n\n**Note: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommend always including it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color-or-map)` | If a color is passed, sets the default container fill color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`icon-color($color-or-map)` | If a color is passed, sets the default icon color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`ink-color($color-or-map)` | If a color is passed, sets the default ink color to the given color, and sets the icon color to the given color unless `icon-color` is also used. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color-or-map)` | If a color is passed, sets the default outline color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v14.19.3+x64 (linux)","description":"The Material Components for the web 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/density":"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/button_15.0.0-canary.a02fe49d3.0_1657133508179_0.004794786325458711","host":"s3://npm-registry-packages"}},"15.0.0-canary.826a3d8be.0":{"name":"@material/button","version":"15.0.0-canary.826a3d8be.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"d69650cd23357b00c2299019b73fbe525d84d150","tarball":"https://registry.npmjs.org/@material/button/-/button-15.0.0-canary.826a3d8be.0.tgz","fileCount":40,"integrity":"sha512-GJTyqPZqYjvNHx7OD68xKGqlZz2wl/W61/HNwMRU7RD5QCpCY7jtW4ukaj1UquGX51KHJ7PeML5ZpGzxV/wSlQ==","signatures":[{"sig":"MEYCIQCWmQJfb2phsA9Xy5CU6/6yRJDzb4OfXWxNZT0D/eUG4wIhANr6sy/PQ3YETmuEF9ZzxGyXCPzOAZwFIiZqpyAnDkjX","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":639729,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJixeMgACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpfbA//XUwcZhB48eqSaKWFoBlm4OQejeIufCRdLwpp1XzDDDeaQ7xV\r\ne3IlAUAn3P8kuHYT1RovmYIWMeyYjsnPhVP6bXfqKI9lY2XWDaqJ1bmLDyMn\r\njbnSv5TlxGIe8EIONPGp8rzIJIDjvX4Yd+F7YpkYhPjNFbppd3YUUPl4MBoe\r\n5M5xD2006l4L3Be/v/Wf3ywh/OWYz4ievtTCHZzXgB8tAvra+7K0dqDudyI0\r\n3fwwXaYjoCbaot7oHP7Y7PDXpwk5Pi+wNnJ6/nM8egF6UKMhFoOliUdTLlNh\r\nPcsH+D1OYZ8ns3+2T4kx5szx6VamkLWH5qNDY6RsgJVU7yQZz1yTTDro1niC\r\nlI3R72xWOmy7R+EVZ0GtbJDaVKbFv3c814p3ZUYckK1TIyJZURH464LpokCs\r\n69UHj3w9ydMRk8QXHN8k8Zqfa71rHJuz5/4pknmfetwGPFCUafzzp0a+ZLp8\r\nTaOuL57vwOU1ienGDRFjNe6E3qgW13T6PWeIhnvl2rDt76s5R0IMRhP/lqAG\r\njjwUaLB6MUhqqvEM8LXPeKP7rZwVIF5bsk6Jhi+kDKZcXOryFWHYL1W4F/uY\r\n7x1J7VBB00Zxt/MngCwmTeTTY4uJdCBfn9dOS/WdOX8ui3b0VyouXTnTBvfu\r\nhsWTl95pHOC2vPlxk0mAEXzI/k7GLj/2JO8=\r\n=UOvE\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button/styles\";\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nThe `mdc-button__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused button.\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.**\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n**Note: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.**\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button--icon-leading` | Optional. Styles a button with a leading icon.\n`mdc-button--icon-trailing` | Optional. Styles a button with a trailing icon.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n`mdc-button__focus-ring` | Recommended. Indicates the element which shows the high contrast mode focus ring styling.\n\n**Note: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommend always including it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color-or-map)` | If a color is passed, sets the default container fill color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`icon-color($color-or-map)` | If a color is passed, sets the default icon color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`ink-color($color-or-map)` | If a color is passed, sets the default ink color to the given color, and sets the icon color to the given color unless `icon-color` is also used. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color-or-map)` | If a color is passed, sets the default outline color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v14.19.3+x64 (linux)","description":"The Material Components for the web 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/density":"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/button_15.0.0-canary.826a3d8be.0_1657135904646_0.884531446892644","host":"s3://npm-registry-packages"}},"15.0.0-canary.ef276aa93.0":{"name":"@material/button","version":"15.0.0-canary.ef276aa93.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"224b88027618924883e89ed995462714a6b04e01","tarball":"https://registry.npmjs.org/@material/button/-/button-15.0.0-canary.ef276aa93.0.tgz","fileCount":40,"integrity":"sha512-NBUfNcOEXXG+ehM9EOhDrs6xBod/84g7d5eRgAbwlG3fFtwkhzLt5/fiGH7mvrDF34dziUgGKpW+zZZGaP9XYw==","signatures":[{"sig":"MEQCIC4NzE8bxRROb99uGe60J/c1Vt5KPkAyBOz7YSG86ro5AiAQqLDSsnWkFNhw+plm86vbVN5sXJTk+qslc4xBjFA9IA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":639729,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJixxHbACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmr5XQ/9Fmu5iwzvGvxaIXJAy1bIaNSsjNFE59jXtZcyUuPkHLdDr7oO\r\nBc6JrHGGzM5xvH7Y1/iLzkzfY8bWpkjprcAGanDllK6zuXpjx2STHwEF8EbL\r\n2TCP48ICC7wuSfjoKRuR3dEANdwF0HdwHISSMoC0oBi7LIYa1jNDQkCrwfDN\r\n/1CrnD7kDIv8inGRUB/pu60Y38bVPzNJyGnWU64SVDjcbz8LNKMrDsCHbd+v\r\neJl04sr8KbE+XLrB6l911FlUNR/DvFYMLPWFZajQCdcEFa5LWhzi2+2ZoNv7\r\nD+09oxpFIrKIFicJHINhFEYj0CgmUiBaMYGgKQk9Cgq6O0Ayd075k+rlKIF4\r\ngZ/zj1dT9GHM9eVp70wmACujx9K0eb7DyGUWDpWy6qTbeV9AjbpG10awEMR+\r\nCOE7qhHrJ4EKIOjN+tK/fqL1CJ6vi6lJVOmnVGN0sbhv9Se2nj0nAP12zwY3\r\nuaaI8qz1RMxNX+QtPQFRU5iJnI4dbIhmcJIJXxLDhzu8Lh2sVN8RufmysT/8\r\nMQtOu/OzE1Tpb9wY6Q7o9edGeRKs/GjVimPoOafyRBA64XA7BeQtZH9arHEL\r\nXgR9V7frrX/ARgIIAYSWDt5KD8q0zzSDl/Kr5chQbHZ6D+6SoUHInL3m3RQM\r\nyDAegs+xVXVyGZ2Usqt/1UCqpYATMkVyThc=\r\n=/7eN\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button/styles\";\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nThe `mdc-button__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused button.\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.**\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n**Note: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.**\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button--icon-leading` | Optional. Styles a button with a leading icon.\n`mdc-button--icon-trailing` | Optional. Styles a button with a trailing icon.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n`mdc-button__focus-ring` | Recommended. Indicates the element which shows the high contrast mode focus ring styling.\n\n**Note: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommend always including it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color-or-map)` | If a color is passed, sets the default container fill color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`icon-color($color-or-map)` | If a color is passed, sets the default icon color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`ink-color($color-or-map)` | If a color is passed, sets the default ink color to the given color, and sets the icon color to the given color unless `icon-color` is also used. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color-or-map)` | If a color is passed, sets the default outline color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v14.19.3+x64 (linux)","description":"The Material Components for the web 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/density":"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/button_15.0.0-canary.ef276aa93.0_1657213403166_0.9013636656062369","host":"s3://npm-registry-packages"}},"15.0.0-canary.59cf61d6b.0":{"name":"@material/button","version":"15.0.0-canary.59cf61d6b.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"73ae1473bd1b23e2733b259ceb2902d23b7d0a97","tarball":"https://registry.npmjs.org/@material/button/-/button-15.0.0-canary.59cf61d6b.0.tgz","fileCount":40,"integrity":"sha512-r1XJd1hOVwLAFSMTFQA74HzTxV6RyAwnS6RE9oNswQpcQO2Q5XHsvY3sZkOsqVp2/xvWKJT/vXNy2tqCgQEVqw==","signatures":[{"sig":"MEUCICbVll4V1KsglIRu1iGUNglLZgipYHe4NkTc/Vsbsv+yAiEA+7/r6vw3DOxdtdZ+REDyf7ETOjy7GsX5VOxkXD+P+AU=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":639729,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJixxiZACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmo+8g//UhtEkakqj/wG/7DJ5L5HFxlpsRzcaF1iVoSDn2Vzl2cPEftk\r\nFTuh8sT7Ea7WQrDsTa4j8vHWlqRhhQdDAQh/FtlbvfZhDkhB//OfRNbLn0ks\r\nB8RbuuAdoMgKNkZCo2vg5EtLposeOJModSbso0g6gD46IkPsMGOHAiZp4klq\r\nU6MX/9z1QTfeo28sYE3KNTJffDe2krF6aPt5mThN+YqMoY1Y6IVuE2NPrt0X\r\nM6NlrlIjJb2iysYwg/ID3NkiXXzr6lOl35mNTGSKXCYZwFOra8L8eHz7g89F\r\ns6pEOu6VPTc1E7KV7IHhvAuVGewSCiXT73CLVeZl5rzd8MdskNw3zCjG2wPV\r\n5dbAJYSXsFAB1GNBXlWqzlitsXDVGfMsqAuuuzzHrbpTgst6f1iE4Jul9w9i\r\nN+y24Dd1+72xq2idwtUDIIL1LjolySSWqPmHJ7AIef8PvTyGJlYk0BkN5M7+\r\nEsXhqM5XNjRUoUzNdS+oR0tUyyNk21Ox+qeT33YIQoLC7Jrvf0+yR1Ynx8r0\r\nOSMcOcdQFfG4x4QTQZ5BMjIN/4lrqhjJrbi49YQrCgQBJhW5APYxQdRV2+qp\r\ncwX7NXD23xbNjzy+OifCntJ8BjZf1u5w8KWrf+ExBEYFIyS24FtJ3uLBHa19\r\nqPJ7gObmC1rGlAO9/siviJRSLO734hia24w=\r\n=XII0\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button/styles\";\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nThe `mdc-button__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused button.\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.**\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n**Note: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.**\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button--icon-leading` | Optional. Styles a button with a leading icon.\n`mdc-button--icon-trailing` | Optional. Styles a button with a trailing icon.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n`mdc-button__focus-ring` | Recommended. Indicates the element which shows the high contrast mode focus ring styling.\n\n**Note: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommend always including it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color-or-map)` | If a color is passed, sets the default container fill color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`icon-color($color-or-map)` | If a color is passed, sets the default icon color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`ink-color($color-or-map)` | If a color is passed, sets the default ink color to the given color, and sets the icon color to the given color unless `icon-color` is also used. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color-or-map)` | If a color is passed, sets the default outline color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v14.19.3+x64 (linux)","description":"The Material Components for the web 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/density":"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/button_15.0.0-canary.59cf61d6b.0_1657215129606_0.038632432429092756","host":"s3://npm-registry-packages"}},"15.0.0-canary.8647092f7.0":{"name":"@material/button","version":"15.0.0-canary.8647092f7.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"9bb60030786cbe21ebb0cbc7823b32667cc2118c","tarball":"https://registry.npmjs.org/@material/button/-/button-15.0.0-canary.8647092f7.0.tgz","fileCount":40,"integrity":"sha512-Yy/nMkYVgxE6VsfYxhtZB3EiAh6wuAWfjM8Ib+0IKsIWOITyT2gINZCVtgBasUrqH7EjyfFLK/AfrOCxmv8r4A==","signatures":[{"sig":"MEUCIE/xGJ1yKur8nGS7hPk9xyKaFnPTkbU+SHf2DuGena5sAiEAzaTjYjA1DF7yYulYIncEZIkvognLDt8MkG5mMSwPnhA=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":639729,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJix0R9ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrIWg/+MwP4FRQK91fj/TGV4/MVnLB06x3v84jYl44kicJRCL6FaDz2\r\nwXICoikbY7HWchEU/X7wTDkqg1a93og52jN3KkWCeNTX/jHAhsjpXRvFkDz8\r\nsJ0Q0XQzoZbQcQpagAgpJ8TiJ/iy8UpaNr8kTe+NGSKLOgaABM0iniqGpoIf\r\n2qTz3fFwIX4/Gr2pdF0QpELgbjEjm1uTxOPSXeFNzJCN21XwvWosoCJqxjYi\r\n3OHJKPvvzWFphWx9/p4dDtEjbLai8f0uHzS/0ymOQmBn40vTITSlQKCj73gQ\r\nu/YIJ3bLbjHwyA6PSGOyTnYRc9ouozq2a3rLK5Z8UK0wuAmKgMfNoAzXL0eb\r\nPxBTcyz/Oxl2F0QiFNapjLbRR74CxT6AbEbld8wQECCeE1UUyyBet4+pe+sf\r\nczpZ5Zc/iO6ATxJijO5mdHeK0Roum1S7GvJQDMDZpEqtY3EO7yfGntOY/BI6\r\nLzho3ghv17GhFiOwLPaWadhCC/RUm77JBnQ0B98iKh+paut5kOZW2w/ujfzg\r\nYrlorv/NT0cSzmqnZzP//lPHhqqxjwuCMGwAh6NGDBFlK8HG0VAajHf0Y4yx\r\nK8q7I6j7qgyCgSsBnOXAN89Bb5oX+EySHf6y8OQkeeQ0iOP+OTt6EADQmI2s\r\ntPO0wiTOwT9U4Gmcr0bgG2ouXTnLLv+XaYw=\r\n=wrYV\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button/styles\";\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nThe `mdc-button__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused button.\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.**\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n**Note: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.**\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button--icon-leading` | Optional. Styles a button with a leading icon.\n`mdc-button--icon-trailing` | Optional. Styles a button with a trailing icon.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n`mdc-button__focus-ring` | Recommended. Indicates the element which shows the high contrast mode focus ring styling.\n\n**Note: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommend always including it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color-or-map)` | If a color is passed, sets the default container fill color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`icon-color($color-or-map)` | If a color is passed, sets the default icon color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`ink-color($color-or-map)` | If a color is passed, sets the default ink color to the given color, and sets the icon color to the given color unless `icon-color` is also used. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color-or-map)` | If a color is passed, sets the default outline color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v14.19.3+x64 (linux)","description":"The Material Components for the web 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/density":"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/button_15.0.0-canary.8647092f7.0_1657226365219_0.30792672315358915","host":"s3://npm-registry-packages"}},"15.0.0-canary.02ecd4d85.0":{"name":"@material/button","version":"15.0.0-canary.02ecd4d85.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"ea79c783d6e862f659114e53c246a9ea97f7b56b","tarball":"https://registry.npmjs.org/@material/button/-/button-15.0.0-canary.02ecd4d85.0.tgz","fileCount":40,"integrity":"sha512-rr7ySk9qJ0XHHAxiW2Vm/BAwFyqOpnzc7v/yUqsEG4ELelJ5XkjWnHx87r+yGd2lWICU7D4PQ9+TRaUQ5hKhMg==","signatures":[{"sig":"MEUCIQDw/wn8qzFgJhHAlf/VML3EoOTachJXA/e1vdxCy9J4HAIgI7Wsd7uLiCvU8ih9n0vg58RgFiZ3lQCnmWn74xkTZuY=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":639729,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJizFJjACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmofQBAAnASucNCGewmoijzgpmqxhfTBgr27Rv5VjylRcoR5lWiX57Pr\r\nWjngFFvYkTxf3F6l530RdfT8MEfEvU1z1OVO/kldOzf78ZcGi2IZwZjGApuo\r\n6Abpmupr9AG/A1qEOSebH/D8fD5g9QXiwCg+ZIuDntmv+YzxVaZ50NwewaCT\r\nvH2jAPSP9JofrOgCj8nGtkzhXGgRldJAh2zRY4/Yy3Hxd0sCmpQHPzjd7q/Z\r\nk3Y1cMGz+zw18TUfeOy24d+j9FqspoGX6SakDVs7/DD+PkbdsS2gTt2Eqkul\r\nnTTTPrA5qZeM0cWfjIgqMU3ChEKlt0gNPQZ2SSEoCyvzmi1JkLTHIs36il6c\r\nI7a5DJGiCmXH0qs212o5mm9rgkSAlHpCpXuxuyzDU2jLWtJRgZnxrGQY5FLU\r\njXdV19nSN0AefioXQqE86qry3SeikrzC9n0kUg2WwkWh0za1Zm+0g8jPYwsM\r\nEJNF+WiaDnMJ/EgZRIqAohOVm5cKqj7mf6+kAHpF8qjFv/WZ3NLza266hnMV\r\nI+dR3XDMO+xAyRNd+yUjTwfzPkIbNgqIxMEAKXhbbeeOlfjN8MlsqgjgxD6Q\r\n8rBK/qivEels83N89rVV9LDuNgf2tO/DBxafjzmPWpVs9Adijvv8D/0Fq7bm\r\n3ruVy9HmVfdrhBY2qqqcqm7jrUjarCrjE+A=\r\n=Op5L\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button/styles\";\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nThe `mdc-button__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused button.\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.**\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n**Note: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.**\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button--icon-leading` | Optional. Styles a button with a leading icon.\n`mdc-button--icon-trailing` | Optional. Styles a button with a trailing icon.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n`mdc-button__focus-ring` | Recommended. Indicates the element which shows the high contrast mode focus ring styling.\n\n**Note: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommend always including it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color-or-map)` | If a color is passed, sets the default container fill color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`icon-color($color-or-map)` | If a color is passed, sets the default icon color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`ink-color($color-or-map)` | If a color is passed, sets the default ink color to the given color, and sets the icon color to the given color unless `icon-color` is also used. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color-or-map)` | If a color is passed, sets the default outline color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v14.19.3+x64 (linux)","description":"The Material Components for the web 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/density":"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/button_15.0.0-canary.02ecd4d85.0_1657557603608_0.9270402322709097","host":"s3://npm-registry-packages"}},"15.0.0-canary.63d3a146e.0":{"name":"@material/button","version":"15.0.0-canary.63d3a146e.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"0658bed857910c64355d25bad28c67e778d74908","tarball":"https://registry.npmjs.org/@material/button/-/button-15.0.0-canary.63d3a146e.0.tgz","fileCount":40,"integrity":"sha512-2ErToH20Ovq7DB5AVTQbbsRPMJHFEKABHqvqWeVe5Fm3Ip1vI5uc9iBkmtNjHSoebhxNtRIn5fwUbLxuv0t3pg==","signatures":[{"sig":"MEQCIDTX3AawnB2rZqT+QzBJTThLe/JwpSlf08zQ50Fx53v/AiBxW6DCjNUOTM+eghZ7CIPi/sCHMEgfqhnNK5/TcKfNXw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":639729,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJizV0RACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmo4cw//WaqcZMfoxSErT3D58Wv23djYsAybtwNwgfRqK8h5nRn8MHTj\r\nfA6WgER1ZwjfrAEKBeq0U9EpPJewkRzfoSqY9hykxv8eG9B4f1mGWcBoxMCq\r\nltPiNDkaitmI2VuGWoSW6F6U6+Wfb0/4uNFla2KYpa7Gbgw33EUysaE/igFC\r\nT98eQjUscJXgLOOgersTavp2xg9rUiF5Lwu6px2m+pJFE3mKrwxxazRK4SQd\r\nJSrUKZmbtA4JVrEG2vg6rSd7u9qsatGc9Gg+8+UvdUAoL7ITL1tCqZT7rF+B\r\nHqUuRzU5yVv/ay4NhtgPju1/1R8TVNo5y5vGD9BNseSWsJhZpA75yuaCsjGy\r\nzidp+2QDq8znaLJDIbOs+//1bKwJd/NrD2+/4jxhQ+ppKege+K9sYtaeFN2S\r\nbi8JBax4PB58QWo0tDTY6/MRSD/eU1VwJNarIN8wY5UdiN86i1bLb+Q0dfOt\r\npq7xyKH0dvTdajfm1LNoP5J1C/SMwN28hhe6YJAMkCSUP21wmLZYinC8TOfc\r\nR/RMWyQ1t9lI2IbCzcyK0SHVabn5Opv/1lb2yWn9GH9REjql8P8M4wPiBjDl\r\n1BxmbyutvSk5h8bLQcMOAJ+7yqxVjCEcq8qo+WDf2OiGvWHiSeRyIIw9Iv8e\r\ng7RKDD4q4+PxA6xAa1e45j2bYK3vZvia2C8=\r\n=kNi6\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button/styles\";\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nThe `mdc-button__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused button.\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.**\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n**Note: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.**\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button--icon-leading` | Optional. Styles a button with a leading icon.\n`mdc-button--icon-trailing` | Optional. Styles a button with a trailing icon.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n`mdc-button__focus-ring` | Recommended. Indicates the element which shows the high contrast mode focus ring styling.\n\n**Note: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommend always including it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color-or-map)` | If a color is passed, sets the default container fill color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`icon-color($color-or-map)` | If a color is passed, sets the default icon color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`ink-color($color-or-map)` | If a color is passed, sets the default ink color to the given color, and sets the icon color to the given color unless `icon-color` is also used. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color-or-map)` | If a color is passed, sets the default outline color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"The Material Components for the web 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/density":"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/button_15.0.0-canary.63d3a146e.0_1657625872901_0.04591443557008934","host":"s3://npm-registry-packages"}},"15.0.0-canary.88db01990.0":{"name":"@material/button","version":"15.0.0-canary.88db01990.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"6f76a5abe1224077d9a90b1e71f75740d4987324","tarball":"https://registry.npmjs.org/@material/button/-/button-15.0.0-canary.88db01990.0.tgz","fileCount":40,"integrity":"sha512-rUxHkQK9U8zQFcwh5BgptJ+fy6xStPqvdRMyjxvLFXiC9/gwwnmQF8JCwWXKnfaik9iII7J8TBY2tav0CCOOTg==","signatures":[{"sig":"MEQCICNP/tOclKnYqTJfxjA9mp0Fuz7x9PX0yLbGw57NiFPSAiAmhFXPRNGl2yVi27EPzLa+wEDPMPysNur1JfRtWkP3aw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":640390,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJizV3HACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoGQRAAnHF/1ygmiC1PTV4zwfIEFJOdYRXJ40xDPJ5D0iyObX6GQlQB\r\nTe/FaytrHtRIuInKk1GHaDYPe4n6YkCYye+c0NjtaaZbVOgvzZ6wrMx0S1UZ\r\nlpny59XwQgG5O9iJce4PrSQJhSx3S1iXDomor3xgEk6yfWkQ8eXzlXj5pB6W\r\nRDpgYG/Ri1CZbm/c4N7JLupdmURNNs2xkAGvHie/38aENeEUdcbaq4l6/OYw\r\nRMMwG16K00N8EtU5lYQYsOCb8TrAh2n7WEE1vuF5/y3ZLs5uVsJ9vAihCvim\r\nyGX0k+w48kL6xWj3rJW7x3sjOED+H9p88YetC56tpF2v2tY5Cv43N/K07kSP\r\nfacG5wVvzctneHezjaQebJ4FXRzr4ARUwiJ8dyPIBgirCx5PJ9fzB7JCA+2z\r\n8gs23mbS8+uRs/eMwZTP0GVFZ5qOR2nc/p4ds/pt8oTKdODdJITcYnfxwTrX\r\n8iysVLJMiRqiOHMswhbD7LioyDk9NdrCbNPggFXL4s4H54OU/d9XWS3QW7gV\r\nljVSyfIlT0XFv0W4GfbdMNcT6ZxvaL//xIHfrMH+6rI0B0w0JqVogywygiSX\r\n9Rlg0Q5simbtbQjfnAsjyt9t+4mrCnx/Iyf5qQFNHQr/u+f6pkKlpM2sqwBv\r\nQkcDL2z5r9/TXEwPQ+M4qu3C4K0wxvnwQOI=\r\n=GhJ4\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button/styles\";\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nThe `mdc-button__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused button.\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.**\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n**Note: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.**\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button--icon-leading` | Optional. Styles a button with a leading icon.\n`mdc-button--icon-trailing` | Optional. Styles a button with a trailing icon.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n`mdc-button__focus-ring` | Recommended. Indicates the element which shows the high contrast mode focus ring styling.\n\n**Note: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommend always including it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color-or-map)` | If a color is passed, sets the default container fill color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`icon-color($color-or-map)` | If a color is passed, sets the default icon color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`ink-color($color-or-map)` | If a color is passed, sets the default ink color to the given color, and sets the icon color to the given color unless `icon-color` is also used. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color-or-map)` | If a color is passed, sets the default outline color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"The Material Components for the web 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/density":"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/button_15.0.0-canary.88db01990.0_1657626054955_0.4863371736084672","host":"s3://npm-registry-packages"}},"15.0.0-canary.6432d8fd7.0":{"name":"@material/button","version":"15.0.0-canary.6432d8fd7.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"e593897ffc0f747022c5147679b9b96b75a0a565","tarball":"https://registry.npmjs.org/@material/button/-/button-15.0.0-canary.6432d8fd7.0.tgz","fileCount":40,"integrity":"sha512-yxQz+qndx/5Mn7eeei/YM5B/nVXVOQTNXPjbbbOGP5tKWuhkVLchGO47wj7SOD+vPRof/FmJRvIqSZeHshu9JA==","signatures":[{"sig":"MEUCICR/JTdPqiJgY2pCfpSblWzSBnlql+ujzMeC3iPlMzv9AiEAtWO2sjLAeXbToNokcn8fEbt4uXnI1NrfPBNC2A8LwTc=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":640390,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiz8XkACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrgOg//aV02dXO8AUFpw85BPgmmbOMG4VwhkFaA5OK6usXiZ9imFsE7\r\nPGXE1Xtlc/BoGw8qmo9Yu1ZnClUt2t6PvZSvWEamtC6nuS+AOjinIQfqOEg6\r\nIHs/3dGTuKWVbqPNQrF6BZrDkot6IQNPionvEpnsS4AeD0nlLNRMqUq6Sb72\r\nLIS5WVLVCLkuBb+055MsN0i3OPIdwlYG74pxn3JeUAUKLS7PbZ0JPuySFl1X\r\nBMPtPLMzcPE0tN2d6dIl22j/iqxnQyVw0DihhpQmDmV8j6VdmweeodlS1IN4\r\nYHtEBypPGuqme69XNYvBN/3iYKfKnghewOwR6ckmLi4yGT+03seKc+ppxSoy\r\n+c82WdbQU3gRhOLYopgxqa/FSl++vFeE/6fj9nh5OzpzL9TXzJ5y+ZjyWhjF\r\nDIvThOZGAHNTjbL0/uqkuM8KY/wsePlpVhOZXsO9tRyGp6GEbP/HP0PrfzFa\r\nv7nNCR8W6Tc3rVwQNcckxb+azLH9Irl98o+PTa0iSyriBT9e8vfRsEVoy4dh\r\nYCbmrCzSDILs/qXQD/0lqnx8LZo+OopJGT/wKgpk4DsEE4s6BJJIa3tG5gwz\r\n/JXs5tAa6RzgAmui4UE2ZvJHtrb24DAQ4pX7XemGL9wsd1khUj7Ein/QpH0D\r\nW6jKrRiVJgkzYH1/x3boOn2o+cBjNyFi0kA=\r\n=rMB+\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button/styles\";\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nThe `mdc-button__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused button.\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.**\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n**Note: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.**\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button--icon-leading` | Optional. Styles a button with a leading icon.\n`mdc-button--icon-trailing` | Optional. Styles a button with a trailing icon.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n`mdc-button__focus-ring` | Recommended. Indicates the element which shows the high contrast mode focus ring styling.\n\n**Note: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommend always including it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color-or-map)` | If a color is passed, sets the default container fill color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`icon-color($color-or-map)` | If a color is passed, sets the default icon color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`ink-color($color-or-map)` | If a color is passed, sets the default ink color to the given color, and sets the icon color to the given color unless `icon-color` is also used. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color-or-map)` | If a color is passed, sets the default outline color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"The Material Components for the web 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/density":"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/button_15.0.0-canary.6432d8fd7.0_1657783780254_0.8563756866957024","host":"s3://npm-registry-packages"}},"15.0.0-canary.085f9b25c.0":{"name":"@material/button","version":"15.0.0-canary.085f9b25c.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"9b27780fb1df827358eff4f88063bfe77c3851c8","tarball":"https://registry.npmjs.org/@material/button/-/button-15.0.0-canary.085f9b25c.0.tgz","fileCount":40,"integrity":"sha512-B61nua3sOnbykv6oBQKjNO6z7w3tBp6Clbc98FQbT8OqGkrkbgI/HYlOs29zMTk0L/dicXXxgkQ/eN16+H+VTw==","signatures":[{"sig":"MEUCIALujrIJbeiZtJ/t7NTH16zMxbymWKYKOhPr0yZdssFuAiEA51TOeQ7DUbUWp7xKlc64Denk3wQ9ppZJOkRC05Td1FU=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":640390,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJi0EXeACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrSTw/+IQvQXdWC/tvONqhbrx6+h8fRdEauTbZWYiA/xiWZBKAkQmQo\r\nt7RGCkaudXKXk9QTrVP549nDXjVa6+q8hPHz0mEiW4A8i5h+e096yBWSZp3g\r\nJ2QduOtPX42Y8Nlo4NeNEGVQi/s6f29cEQzXdkuKb4JAXy4PNjZ910ThaR+M\r\nXxyjcwiJsENTZJLEwrU9AS8UrElSZyzZXN0/qzD2epb8ac2TlctkHbewqF0e\r\ndtcho+dtYUBRbj54cdlpm7vfXZxO1bex4yzd+t4gW+ye4iqerYylW++v0YZd\r\nOVlh+q01diasCHUPz4YwtNkeePe1vCSkXGJte4sVY18Mm6IZ8dTeAqwYq1yH\r\nF4f96TMqIvI5sUKhUr3CMLMtIZXUFaPHX6z3zQlK8DdmsTKuRpknuAvv7myO\r\nNNZ5Ib4PjzJ0JARjIp8/0OO4JewEOsEPjp4YJe1ntXfX0DE2L3iAlWv1ajy0\r\n3CpFmNMl93VhTihnDsUdiAyh2TeAX444yWnCGrRmNkr36TtWSsJEGeD62jag\r\n9iC9d+lKv+M9p3SkCsSBBM+Kr+uZQh1W6xbzMoEFJI0IGuJZVd1cND+KfmkH\r\nCmwS59W4/DBHjz4dv9ocdUgw9HGdXil4RCjHGJ6uGvZ4MM7SltYY+GtWD2Me\r\nOfgjK8Z815flPudXxjSr2fJLQBxV+hULdpI=\r\n=aGdm\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button/styles\";\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nThe `mdc-button__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused button.\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.**\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n**Note: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.**\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button--icon-leading` | Optional. Styles a button with a leading icon.\n`mdc-button--icon-trailing` | Optional. Styles a button with a trailing icon.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n`mdc-button__focus-ring` | Recommended. Indicates the element which shows the high contrast mode focus ring styling.\n\n**Note: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommend always including it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color-or-map)` | If a color is passed, sets the default container fill color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`icon-color($color-or-map)` | If a color is passed, sets the default icon color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`ink-color($color-or-map)` | If a color is passed, sets the default ink color to the given color, and sets the icon color to the given color unless `icon-color` is also used. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color-or-map)` | If a color is passed, sets the default outline color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"The Material Components for the web 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/density":"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/button_15.0.0-canary.085f9b25c.0_1657816542574_0.4472159447695194","host":"s3://npm-registry-packages"}},"15.0.0-canary.39f9424b3.0":{"name":"@material/button","version":"15.0.0-canary.39f9424b3.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"c4e0ce5f58a0f586963f3c101f4adec3fb245078","tarball":"https://registry.npmjs.org/@material/button/-/button-15.0.0-canary.39f9424b3.0.tgz","fileCount":40,"integrity":"sha512-7FPUDYUbMC2FQaM3gqD59engbAwbhyJJZzF505/iAF4u6Nb2Zv4mQ4oEJI6z/niDtNh+0IearmS2evRF3/sz6g==","signatures":[{"sig":"MEUCIQD9tfEWWiXvysA3kN1Ah2OwR/TeulfHBwAmGNnfTg7sTwIgeZSJQJNi5r3vMV1LVDd51ivrCpFr5UVudVMtAUL6Qo0=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":640390,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJi0Ez4ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpOzxAAkzHT1GolhGK4ARvFDrEvyW+v06FBvn6P7R8Qq/fLXViBh7vl\r\nIURyy+QX3ptP5QA6j/OtQ8dqdJWR+X+AH5gB0Im5eG360mRqk+PVJIAnc/+D\r\niw0Oj9q7tHYhIwDcxeNazRu4u7mr2hxiwkcgm+y4fhWdKG7jKZbZ+5Mj1wYK\r\nfuwj1a90kGy3UZKodfQeVoCG3lN6FNRtXXQaoaafzthAap6xOP9/9ewPLLAU\r\npvVpljqQPaH3xHCcAoNShRQ/fDqbmKPYw86tgPDPvv5PRiOiO0h9E1sl3uwK\r\nFb+4pmaFBkXh6u9KA9pQDEgwV7lbmB+qJEyH/fYiGMNNyB9RGSuDeUG5AKLx\r\nNpQztaMF4UtzDWNsAtq61MaVod7xc/mZF0WlyqqZk05SFGIBoonywyJFe760\r\nVCR9uhRu7bhhYzZMUUCbyy00EkzFJJM9P9TfKyJonT9u3wA9RoW3LslTjMNY\r\nrgq+5QVS3EDFnGMGxCRmUjWNp6pIZDzctAzUAomsvRggmjFdW7RtNT2eWayH\r\nJjRbkJ62hWib8QDCII7PFMHbvVBYnizTMRtZcRc4B/pyHQ2kYbP8D52WxR57\r\nfYPFiIaMs3M4ck+Flo109SLQ+GiNw6EKm04r5MalxiiO0ylcV6US6LC51EXL\r\nUkJKeBLzjeUry901dcNPyzU0Dz3pSrTa7Fs=\r\n=osB9\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button/styles\";\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nThe `mdc-button__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused button.\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.**\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n**Note: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.**\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button--icon-leading` | Optional. Styles a button with a leading icon.\n`mdc-button--icon-trailing` | Optional. Styles a button with a trailing icon.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n`mdc-button__focus-ring` | Recommended. Indicates the element which shows the high contrast mode focus ring styling.\n\n**Note: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommend always including it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color-or-map)` | If a color is passed, sets the default container fill color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`icon-color($color-or-map)` | If a color is passed, sets the default icon color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`ink-color($color-or-map)` | If a color is passed, sets the default ink color to the given color, and sets the icon color to the given color unless `icon-color` is also used. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color-or-map)` | If a color is passed, sets the default outline color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"The Material Components for the web 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/density":"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/button_15.0.0-canary.39f9424b3.0_1657818360167_0.5330811259435564","host":"s3://npm-registry-packages"}},"15.0.0-canary.ae9fce587.0":{"name":"@material/button","version":"15.0.0-canary.ae9fce587.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"e17f5ea5d85007603d3328b72f222938c7b4e162","tarball":"https://registry.npmjs.org/@material/button/-/button-15.0.0-canary.ae9fce587.0.tgz","fileCount":40,"integrity":"sha512-eEym2KGjWqEIvRHRV0k32mrsSPeBX2cIeUzhILa8IjTRKA2tsXfpCF4lWtmXnJnmaq264A8DXmxXo1XtfJEdaQ==","signatures":[{"sig":"MEYCIQCJCP8A9jtqdJkM1biu6urz5Es+NILBoxh50Iht7tsa2wIhAPmmkI3l1Ko7d/pnF8z1+P2vZs1VnTa4q32rMtTjipb3","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":640390,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJi0FuzACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmr0kQ//W3hBk2w/y9DwU+9fAcPn5Kk3pCmXPqdP1eQQiFvmaixA/d7a\r\ng82tGTU3jSG7mYK79gjNCWtdtb5ZqHOdhUzPPWIYC6uRJcBfOmqSOFoChflP\r\n0NRvMhTJ11S+smlC3cXIxD70Hva2CW/rTeJ+FBGyfuN2VA83saq4jSCQSxUo\r\nAp5x8p6Kp2IpC8fgcd8FqS82gDtIu7RCiaiYwHr6Mz7HTN67baAv4H1h/yR3\r\nMDo3BsLrwfZ+IEun7LsE49u8sqG43TDihlTvEIM+2gYmKhk1xG1uU6YenuhT\r\nzvBPXIeWX4BpmU3Vdl5LS9ifovNQhZk+ck0Dq6QW3bdz65UtNcKvZzM4WXrd\r\n4ekrSGkMIqaUSGchi7N3hJPxIwLwuLhMzP+yrks9LZhaT4Csi7AaQy3Xx/zu\r\nZAHZvPyy6AkxUHmbmwnue3Rw5yyMP6w8IG5i+KBdga6O3KZ1U5kRKLiwCLXH\r\nF1M+P2ZNMmBxhe9nPDDuDlOTVkBk9gB0NbWDx2HaJj9LOLhEBrS0HhVUh/Tc\r\nzOlzQIz+LUQ5qomzuAFnzJM6tUujqGa61CuPPtIO9tbo0rfI2RH6IVYf2xe1\r\nDB17DJDMt7scrN6Ktk8gXDZjzgqYH/lUE9nXnScyDXuZgDs5nzLzmA5gZa0p\r\nhlTwP61bOtAGpaDEwqTUkG7JAaGra80Kkt8=\r\n=K0si\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button/styles\";\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nThe `mdc-button__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused button.\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.**\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n**Note: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.**\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button--icon-leading` | Optional. Styles a button with a leading icon.\n`mdc-button--icon-trailing` | Optional. Styles a button with a trailing icon.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n`mdc-button__focus-ring` | Recommended. Indicates the element which shows the high contrast mode focus ring styling.\n\n**Note: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommend always including it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color-or-map)` | If a color is passed, sets the default container fill color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`icon-color($color-or-map)` | If a color is passed, sets the default icon color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`ink-color($color-or-map)` | If a color is passed, sets the default ink color to the given color, and sets the icon color to the given color unless `icon-color` is also used. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color-or-map)` | If a color is passed, sets the default outline color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"The Material Components for the web 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/density":"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/button_15.0.0-canary.ae9fce587.0_1657822131236_0.4999413392203558","host":"s3://npm-registry-packages"}},"15.0.0-canary.1ebddc343.0":{"name":"@material/button","version":"15.0.0-canary.1ebddc343.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"b76bcbd510fff97318cdb1d6223459673e6aabe2","tarball":"https://registry.npmjs.org/@material/button/-/button-15.0.0-canary.1ebddc343.0.tgz","fileCount":40,"integrity":"sha512-EP68yJ9fTbCb+3KWQ9THCl2LpGZzJDmDS9GDaowNzfFKSidLdKB1R21aYnVqR4L7ojK3ySBUNbuRzXGdblnLqA==","signatures":[{"sig":"MEUCIG/hKGAX+/HyZxj6aItbJrXHJ25kLNqaikuzXHPHH8qKAiEArvJYPNSlWtV7KaNyjMiAATLtP37FKIqXGYEg8XDrhsY=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":640390,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJi0So8ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpIAg//Q9RkMjpc/mwvLwPMne6NgVvoTaJkd8xZfdhkM9rk6d/73jo/\r\nVo0b4cgCNc5uUOl91bcMpPD6KLV/QxLjDw7AK7kMhuWun6+RPkO2DuDO2m9z\r\nBYKa973eddhGtvShDtSkT+8J9P7RTGNeNK+U17S4mY4zrykMxRmgcbDw5/D3\r\nZpjW/soOfAHKl4hLS8eNn2ato7nrvn+56FGA4fF5kldZroVk2a5AigxuZ6bC\r\n0Wh+Bq1d/u0Y3CWMvCAwHQt/l3zh7iNlWkwIM727+Zw8oxUaEIpfcHTayGhp\r\n6QIPbomUrxVslf2/7FmHH0m93XJz46JwLybUVFsmIq42n5XRjtYH6ofWq2uj\r\n9XgrvB2XggMTPyCW6rLRO1WEON1rvyzIHcUT/gGVhGzK7Ys5wcdZyisWzBqm\r\nqr1nE263uy1e+ufOrKGlG77w4+z12QG9JeGsy3JF0wXRkixfWJSexAKrYINP\r\nRrvW2zzREvBsBpEg8jIOjeCFDuhBVOzGqAP68LWGYX+jDamSc/4+zq0BwoFz\r\nGYcOchzwgDD/bEfkxWoZxE3kPwm9kqkycxsOpgnc0yz3R54b21WMzXL1rv6I\r\nlz9TnbByFXl4KiZpkBbPnq40Z3+mK0/Yu+OLFEJy+KJmUzw+iXEqkElPZ9Wy\r\nfhboHK79PpfezMZcCMoUj2CPvr/1EZWF3JU=\r\n=VO2+\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button/styles\";\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nThe `mdc-button__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused button.\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.**\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n**Note: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.**\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button--icon-leading` | Optional. Styles a button with a leading icon.\n`mdc-button--icon-trailing` | Optional. Styles a button with a trailing icon.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n`mdc-button__focus-ring` | Recommended. Indicates the element which shows the high contrast mode focus ring styling.\n\n**Note: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommend always including it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color-or-map)` | If a color is passed, sets the default container fill color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`icon-color($color-or-map)` | If a color is passed, sets the default icon color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`ink-color($color-or-map)` | If a color is passed, sets the default ink color to the given color, and sets the icon color to the given color unless `icon-color` is also used. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color-or-map)` | If a color is passed, sets the default outline color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"The Material Components for the web 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/density":"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/button_15.0.0-canary.1ebddc343.0_1657875004094_0.5280436010887868","host":"s3://npm-registry-packages"}},"15.0.0-canary.c5018840c.0":{"name":"@material/button","version":"15.0.0-canary.c5018840c.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"bfa4e52d82a4dbebe5b1ef8798f9349bd7dea4f0","tarball":"https://registry.npmjs.org/@material/button/-/button-15.0.0-canary.c5018840c.0.tgz","fileCount":40,"integrity":"sha512-oDFWXljmFIPlLrR2xVJW+cBmARaJ3UGAtHd5loMUmtZU5pNY/38WQ+Hougf8B6WXO+m6TfdZ3v9+7NejRtFUVw==","signatures":[{"sig":"MEUCIQCRFE6C1nCcz+P7rZnpLqCy0McZpnCsMmnbimzXHbjbTAIgYT0qbVcrNUuz+6ViMSKdJyqKP/JfrTb8wDAvjBBsB9I=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":640390,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJi1StbACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmo13w//Rz5jZoUNNqQtiYzW8oHGobfMpWGVC2YJQUl3MJuc3VGC6T7/\r\nwTIaew5M6EpCSYNEFVmRJmgkU4csoY19dApkrqGC7rzabzYMBamv8bBDhPPg\r\nt1P0gjjQLSBbbWAji3dU2zJfRwx0/ISLbttzlkVkMG2kmdERklNJ+cldE9Ki\r\nv8FOfdaJJHRbSayWgz8Qj8Jm2UcmpeZr0Y8xIzwCS38HhWisHDxgVZ1a2ItH\r\nzSSBrI6V09jfzD2iJXxHKYrBMTJnUATt/V0qd++6Rkl9pBWHY750E/k5ftpL\r\nw5r6wDKCnyCiRsybtL2JH2m3fMtsf94ZHGw//zOH0ebC45DAXQUdthoOrpKs\r\nmUbN6YC6RAW4X+hr4Py0FX2GrWAejb+4BriKHsOmSqKXKUx+8DcgNWTZrDw6\r\nyrtEVyT3A3VaCZG2dPGiVW2XCNtw/5+3FGLAdPnXilyiEB5OyfOeszPhOfiu\r\nTr132niJSrQPBlQaC/wmOJP3J3SWNUl+2hvpPdNy5e48A8x9++bywgVpa76j\r\ncK5zlCnQN4a7P7L6a2bBCKkm3W1CjnxfmrdhIHV/5ionhjMFlx8PWpk8Fu1r\r\nhWsq1j9/c/puq/cUUeG/7+WZ+r58uLY2ScewFds9j6h/Rwfdd7IDnzBjh8ox\r\nKw0LcOv6hARnbS/rAGAYQenbLb17jIDdHN0=\r\n=DmIZ\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button/styles\";\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nThe `mdc-button__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused button.\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.**\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n**Note: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.**\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button--icon-leading` | Optional. Styles a button with a leading icon.\n`mdc-button--icon-trailing` | Optional. Styles a button with a trailing icon.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n`mdc-button__focus-ring` | Recommended. Indicates the element which shows the high contrast mode focus ring styling.\n\n**Note: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommend always including it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color-or-map)` | If a color is passed, sets the default container fill color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`icon-color($color-or-map)` | If a color is passed, sets the default icon color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`ink-color($color-or-map)` | If a color is passed, sets the default ink color to the given color, and sets the icon color to the given color unless `icon-color` is also used. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color-or-map)` | If a color is passed, sets the default outline color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"The Material Components for the web 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/density":"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/button_15.0.0-canary.c5018840c.0_1658137434998_0.5124479312912262","host":"s3://npm-registry-packages"}},"15.0.0-canary.551b40d18.0":{"name":"@material/button","version":"15.0.0-canary.551b40d18.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"7d740e3477ee3f907820f74fa1c963c955fa2af0","tarball":"https://registry.npmjs.org/@material/button/-/button-15.0.0-canary.551b40d18.0.tgz","fileCount":40,"integrity":"sha512-hhWig33CcP4L+opizoDziH0YAk6XQQKuhZH1ECYu1hr51S/Ye89XlsJ416p6DTguj2bQGxs7Y8u5etjWizRBPw==","signatures":[{"sig":"MEUCIH3905bFXVdkKDISNeDUjj/26aX1Pgc3mS4W8Xhn5lnbAiEAraiwyYYZnD0qVzoxrrPC1V97j2tcFUrzxvC8nAU8iHU=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":640390,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJi1S+OACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpTlw//TlpNKNV1MLSyh712UnDMrSjZHMTLOWwgUyy/3A0sNNsVgZ2E\r\nYxUaMjDD4hMGeBRZBOsAMJgYP1DJW+Az5omnGxeJ6EUpseEEe5pq0QQPGxqm\r\nXB7rheuMFJB+21qoiVwaTGFKoCsHE4mcb7iGf19I0ZeVEtUEW5TzaN2Cr8aH\r\n9c4HL9mv7KGeahJp42HrkJcEyh8w8oVboq6KKm5HG7CQyHwI7PGdLgMllAuI\r\nySXb/B3OEJHzfK6VksdWGnO3q4Y4ZTPnny8DINTkBzHEhnLpX7f42ct3AfrF\r\n/uwHNQgit/Vb+hvryNpVcVfOOc/RnCm1xc23fCOGDXJEYy6tOMAVbAvnzIgA\r\n5mHHZSPVA48177X76fXVwZHgSPYYNlYjNXVRK8EZR8NmOsYSa0QW8KMJmGh8\r\n+Ey1SteUcKTwspdL0tqCrcj+K3vSQfSwe4jbgfVqiKHC/ZJqUQV8hoIpf9mt\r\nh0TJNi8HI2HEc3IM3JnuUIblfLzm+p6xui3XkJYh30Lx1vOFXwy+kt+PekGr\r\nhrk0AcJcXpz7tzZDiBybBPnFaZFH20bpSoOf/Z7K/7G5wYIqyphmEMtF528e\r\nZI92OyEhPxS9q9WB25RTl4SDVRkbAZr/d4ZeSpB3UWWpqwbd5flSrL9E38qX\r\nPJ+035fdqNXFLtVNzIGH6p9GvsJepOs7fb4=\r\n=Rm79\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button/styles\";\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nThe `mdc-button__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused button.\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.**\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n**Note: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.**\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button--icon-leading` | Optional. Styles a button with a leading icon.\n`mdc-button--icon-trailing` | Optional. Styles a button with a trailing icon.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n`mdc-button__focus-ring` | Recommended. Indicates the element which shows the high contrast mode focus ring styling.\n\n**Note: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommend always including it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color-or-map)` | If a color is passed, sets the default container fill color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`icon-color($color-or-map)` | If a color is passed, sets the default icon color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`ink-color($color-or-map)` | If a color is passed, sets the default ink color to the given color, and sets the icon color to the given color unless `icon-color` is also used. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color-or-map)` | If a color is passed, sets the default outline color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"The Material Components for the web 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/density":"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/button_15.0.0-canary.551b40d18.0_1658138510090_0.5979384073124447","host":"s3://npm-registry-packages"}},"15.0.0-canary.cf9f12371.0":{"name":"@material/button","version":"15.0.0-canary.cf9f12371.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"2dc1028982648981bc33e7e51891ce57c4638d7c","tarball":"https://registry.npmjs.org/@material/button/-/button-15.0.0-canary.cf9f12371.0.tgz","fileCount":40,"integrity":"sha512-CYOrDJW4EeoOKrm2sAD+nLaC4xCdVL0x265/b9DXucu+g/HNCgxT/uhm4tP3Ta6LNsQaSwo0Hp9gTytZxAo99w==","signatures":[{"sig":"MEUCIFT6w7NiX6zgxvi9bkjyJnT7Mrgo38rtwMKBfSc/E2s8AiEAnctXaps9t5ZW1IRrhDRzHb6IEU5FsYX25TH9ev/5V44=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":640390,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJi1TB/ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqG6BAAmsJz2ig1wOy1FlZefnaSJ6iwiUzc/W//YhbOPY2Lm3uCDmA7\r\nsWfubl2wpivMV8VL6ewS68KsvLtozyMT7NJaJwVEMrCGusqIAACH/sRwTunA\r\n3E8i6GW7cau6AwofdAnvCNBzhyidvYX+nqDtqYYYxm+2czWMtr7VmfgxCKTF\r\njrqyC4uh3A6TrcTEVAxoO/WhdFJlYfPvHOdpw5Unp4nxVE1z2B5n81FIKJPH\r\n6NLAOaZLXbfBVJAK3Qs5YZEVRHa6yH8cOZRR2jPKPS8XRKKS+hWHHGoZ6Nmq\r\nu2Zvh2SIh0uI9+pDT3k3632HIDfczEWNMFji4gaXuXYqvq/WalU6/fb49oAJ\r\nR+ogywdDoDrCPFs32pwi9NHQ3GEe2cm3l4L5pn8Pc+wvM00k1Gq4TNmUVx0T\r\nsXAo3DDdnIe4wG4IXvBx/a5lI8/QT5ZZ991Q2CBz9+ajKTXsTNX/7dhqLTMP\r\nk7QG5Kqc4mvnCvIIh3NILcENpRXa2fCXsFpsuQPYT8s8PokvsBof75GYX1Nm\r\nFHZXQGN1Vk2Vl2lNSe2uxd9bV4g63rpuW7MfE6MDQxrMavAGO/8Dlab11XKv\r\ndnhv95H4js3IKaJdD6HSb+1cTQwAU8kQezep98AhtoExHmF2wY+9xle59jp8\r\n2nGUCggi84kZeINih1r30u0BAzYO3/hU6ho=\r\n=NzY0\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button/styles\";\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nThe `mdc-button__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused button.\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.**\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n**Note: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.**\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button--icon-leading` | Optional. Styles a button with a leading icon.\n`mdc-button--icon-trailing` | Optional. Styles a button with a trailing icon.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n`mdc-button__focus-ring` | Recommended. Indicates the element which shows the high contrast mode focus ring styling.\n\n**Note: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommend always including it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color-or-map)` | If a color is passed, sets the default container fill color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`icon-color($color-or-map)` | If a color is passed, sets the default icon color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`ink-color($color-or-map)` | If a color is passed, sets the default ink color to the given color, and sets the icon color to the given color unless `icon-color` is also used. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color-or-map)` | If a color is passed, sets the default outline color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"The Material Components for the web 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/density":"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/button_15.0.0-canary.cf9f12371.0_1658138750847_0.7776456917290893","host":"s3://npm-registry-packages"}},"15.0.0-canary.2797ff8b6.0":{"name":"@material/button","version":"15.0.0-canary.2797ff8b6.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"3e2c44edd8d25b00a51f288aebfb89f74fa71ade","tarball":"https://registry.npmjs.org/@material/button/-/button-15.0.0-canary.2797ff8b6.0.tgz","fileCount":40,"integrity":"sha512-jqiED3//MqsbLmzWFiP+CX7ElYrzraOqQlAum0ZT0FHfRNwHxGC8lDoTUAFm2FrHEudVDU6Wcq9YqBgqSNJtvA==","signatures":[{"sig":"MEUCIGrtebBPzX2TbH3yHSFZh2rcLQ34NO5i7INdotxEOYrCAiEAtJgPzHeG7QL6JcwXS5fVIp4tMlZtMEE5Mx3GkGv5KDw=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":640390,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJi1fnWACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmq6NxAAob41RhJZ43fawnR0Ccof1XRdyOZ4gQZWT3tneHGPcHGXTVAr\r\nGPf8xh4xSladc4/XYIaVUr5lrrBLlNums5vE6Kuft/Mr55tab9dluokjZ15S\r\nF7ty9rLNrivyR9ZKJTTfdJjELsIoJvVz5rW3TVyPL7mWlT2BdWiM3onB69Eu\r\ngv2oEi5tgAyafbqSggufQkoBZ0SfDNnFqW/AC1A9+jvEpjZb6tpm9R5uNC5C\r\nK75C0e/vlwGgiK6olSligOoHAigzWHWW4LXOxsZRh2afM95m5dDrWcoHzi7P\r\nk/XVfe0vc1vzOG3yYrldox69jFLs91HTEqFyvAD+kJAnfQ/kNn4JuCaz763b\r\nWVl+mkfFUB3GKaUbmk8BWLXWClJyUnFum5LlGC4aLqXlJ8TrR6tgjsVR/FPc\r\nyJLXyfkRsYN6tfJhxanaYW70w7Ag+d75FSC5rIZ5J8jKmR1znaCndPQQ0gwu\r\n357ZYktB7tAu5WfqVwvgBLZXd3sEAgDOug3WxeNg/WxP8zDi8V0ThKnKglGT\r\nbrYtqS+QbE0rxKXeTc7q710XzevH3D70KWjRyL+XgpmEgPiA511Z4LBZylPZ\r\nLmVbBDg0cfCZuQ0dZDpDFDlWhi/9wRVEuTokjawH/UhqR0H3ESpIKqkTeA5l\r\n2jPGFBJJeJ/+4iJpuup7U81AdxjZEN2Ztc0=\r\n=YRza\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button/styles\";\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nThe `mdc-button__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused button.\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.**\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n**Note: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.**\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button--icon-leading` | Optional. Styles a button with a leading icon.\n`mdc-button--icon-trailing` | Optional. Styles a button with a trailing icon.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n`mdc-button__focus-ring` | Recommended. Indicates the element which shows the high contrast mode focus ring styling.\n\n**Note: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommend always including it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color-or-map)` | If a color is passed, sets the default container fill color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`icon-color($color-or-map)` | If a color is passed, sets the default icon color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`ink-color($color-or-map)` | If a color is passed, sets the default ink color to the given color, and sets the icon color to the given color unless `icon-color` is also used. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color-or-map)` | If a color is passed, sets the default outline color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"The Material Components for the web 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/density":"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/button_15.0.0-canary.2797ff8b6.0_1658190294044_0.9025840717357727","host":"s3://npm-registry-packages"}},"15.0.0-canary.110fafa17.0":{"name":"@material/button","version":"15.0.0-canary.110fafa17.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"115b420c901414c21321fe3e573c0c93c2618f0b","tarball":"https://registry.npmjs.org/@material/button/-/button-15.0.0-canary.110fafa17.0.tgz","fileCount":40,"integrity":"sha512-D92yZg8pe5FmCY3e8gW+8KvlaWBe5CBxHLjuAF3wvkaVwaF1nrudnjmtr2E49jqqbEx6e/0J9x7Hghiqa/3I/w==","signatures":[{"sig":"MEQCIEPzfCtQOhxi2uQ9TEMjM3Lq5YHWldnsUdyJXyuDdMfOAiAs2V1BfhaE02BgWVVwr4hd1vEsaxHw2RG7UuSO8oMOQg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":640390,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJi17MSACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqC2g//ePPYxtkMGKnDNJmOr9Jj/w6bxawA2CN3G5MlR1nMfTUy2RtV\r\nDkwqWvVLOYcqXtD8b9sMDuUQN+du90suhVLiofnAafvhCIfYC+zE9RPQpArZ\r\nXOyyY/ac1zYKmAsuI/w2QJhgBvNCBre8NwvFSusq3t+XkdRxZFoEJgZ/R25L\r\nlv1rmmMPAgg1k0b6rxg/d4P0TPmZOVzOZnKQa2RgZ3/6HyjLzvOnU9baG2dF\r\nHB3hrQkoUuNkY1M3PHOR8NHJQUmHvksu7T5YYznVhxU2pKt5OgMKzdhp1rPB\r\nWW4VBahq9ntjZjq5px8JTZnFwh5LAGRNKCV270j2pRQSwmGfcQ3n7RnMHA4A\r\nGVm57L6ptMzRZhGhDgNXu0qFvBQfPbAWdz6Nj6UBPXazw11aMSNFXiX1LZyu\r\no2Oh0sCFLW2QQO6dv9IWyGjbY/CeWYVX7GOdgbFiJD5RCzicJvAJqX6RlWrz\r\n3AElcXLzMXvv8y+IbEHGoj95qqbLigVc1YrU+ZheLcuz61B0xR49CVmYxiAI\r\nkbdNOtjmAtYm6MDr1WSOQzydTGEshJaz/u0h6GHP7bk5Ce8TBsYRMLTQfBWQ\r\n6UAZ18DPOBxRrDVP/udIcH7HrmvYE5FPPhHbLs5yg/QVAaPbxdN7KfXRuAIR\r\njVzmtucZLXnGy5Pxk929nArIimBNXi2SHG4=\r\n=edlK\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button/styles\";\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nThe `mdc-button__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused button.\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.**\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n**Note: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.**\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button--icon-leading` | Optional. Styles a button with a leading icon.\n`mdc-button--icon-trailing` | Optional. Styles a button with a trailing icon.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n`mdc-button__focus-ring` | Recommended. Indicates the element which shows the high contrast mode focus ring styling.\n\n**Note: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommend always including it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color-or-map)` | If a color is passed, sets the default container fill color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`icon-color($color-or-map)` | If a color is passed, sets the default icon color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`ink-color($color-or-map)` | If a color is passed, sets the default ink color to the given color, and sets the icon color to the given color unless `icon-color` is also used. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color-or-map)` | If a color is passed, sets the default outline color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"The Material Components for the web 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/density":"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/button_15.0.0-canary.110fafa17.0_1658303250608_0.789116292319294","host":"s3://npm-registry-packages"}},"15.0.0-canary.386ef1d2f.0":{"name":"@material/button","version":"15.0.0-canary.386ef1d2f.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"cf6b01355a1a730cd5f8723f9e941c739efb1012","tarball":"https://registry.npmjs.org/@material/button/-/button-15.0.0-canary.386ef1d2f.0.tgz","fileCount":40,"integrity":"sha512-Oy0p5cbsl1gmWAbJEB+XWxLRRbz6LVIqInVz7tLv8vlgWe9rlGPgh/TdtiyXY2+e2KMt4MwsATp9B4wm/y/ehA==","signatures":[{"sig":"MEYCIQDOiDSYXCev9+SftNG/zBKTHrrzcRUn3d1A0n3Bj/kJpgIhAOlTyHKBAwGUeojJMz9SHEJbPtLy1P7u91RM1/Aapum6","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":640390,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJi2Ed5ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoI8w/+JtriHoK1Na+oOqM7U5JC+MxDUcSks0FGQr2BXaPL3eFGPJk+\r\ngGL/4koJqo5ON8VDdYOuQu1wUlJjfORhMenKO+bdn66BOSmiL+xISTQuS4XD\r\nDVlBwvGaSYXP3hzb85BKeNi9kHQfuYpLhIilPQGsSt0wBw3UxpgOU/3T4E7e\r\nPa9eUy0cp6PIHZOF5H5Rc7zUCbgjsD7K+jAcNFdRn7JPxm7HMr21Nkp8PFri\r\nd7ph1ocwchFqEXI/FsI15088HoKzR2GHV43e7IxIwGJWlP62XBzvWet9mgCr\r\n8DRxBsneS8DbkCetCMXJgbPmq6EDBcNqGJvvzIOU1YOLHhqzdSECEoLek8b9\r\nbCAsYCJGuNS3rP4WYTYQPdo0dlneuVwMADNWTJ2AED3dQZx/rlGassc3toKD\r\nRblOh+pCffZWA+yJqFYg41qFpEapvkEYmXOQwMahu0c+HIXJybdBxVrIitk2\r\nHOdUYnj8AV20QODyrnKBkbvjLCo9+y3yw7YoehQauijXBIPWlcetgAwTY11f\r\nlfR72Zz9BNLXWap9iJCV97cjdB3YXB5jX2YdGPOzgGwnNuYkIk4A5po3OIzX\r\nrbb8DHfYrJSeiPSgj1ygKogcPvqP54J9LxtyZGrpOdWTGxprIK9rORg9kC0I\r\n5o7FVoLmuw1z/W8Ki9Ks7P5k9xeKyEji/mQ=\r\n=yosI\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button/styles\";\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nThe `mdc-button__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused button.\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.**\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n**Note: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.**\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button--icon-leading` | Optional. Styles a button with a leading icon.\n`mdc-button--icon-trailing` | Optional. Styles a button with a trailing icon.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n`mdc-button__focus-ring` | Recommended. Indicates the element which shows the high contrast mode focus ring styling.\n\n**Note: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommend always including it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color-or-map)` | If a color is passed, sets the default container fill color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`icon-color($color-or-map)` | If a color is passed, sets the default icon color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`ink-color($color-or-map)` | If a color is passed, sets the default ink color to the given color, and sets the icon color to the given color unless `icon-color` is also used. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color-or-map)` | If a color is passed, sets the default outline color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"The Material Components for the web 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/density":"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/button_15.0.0-canary.386ef1d2f.0_1658341241529_0.5213609367403982","host":"s3://npm-registry-packages"}},"15.0.0-canary.c3924efef.0":{"name":"@material/button","version":"15.0.0-canary.c3924efef.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"1d7ed47c969a158c78f43ec827a31942e67d78bc","tarball":"https://registry.npmjs.org/@material/button/-/button-15.0.0-canary.c3924efef.0.tgz","fileCount":40,"integrity":"sha512-RspD6np7jWBlpUKe3trQPX+D17ejSWNvrlhjTUPx77tLnsclbL/cQpxEtKgdaEv9F89idSzWS5n5iLGjh+zJFw==","signatures":[{"sig":"MEYCIQCJ+75eW9+p6leLLaWb5gi8VuKYTmcMeZq7bZbNirhaQwIhAPNNfE157o4a0C0DXnTc0BTK50koC06DTBy2Q6ybfoNC","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":640390,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJi2EnEACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmowNxAAooE4VYDUY9TPfd+yelQU2SIsba/uiBoxxyVptc6qtU8glYNQ\r\nJ0ccVCsvyiL5KaYJdB/L23db+Vku/B+a+4wMb+0/GvEsn1qO7upabq1sBJNa\r\nUWoNla5XnfJmITHOCRcJkpONPbzT0HeXr1yeioB0IFr+A1CH/RKEOtDrY+Ma\r\nZdCgMQg3raU7Vu5mgfEpQ+eFLTBp4UUvJ+B3A02jSMhhfJz3x7AjINn9UPoa\r\nRHDx1zqDQRwe4GAZ4Iu44JmA6GQbOTawEV+oBeS+lojYVIV9peeiPKrYirWj\r\n+0VwrcZprvjED3pg5x+8Z9nO3F5VSsr9BDwvZLrjRIMzuWWSVvfBNrjx/YSX\r\nonxrK6lSaIMiW1XTAs7asZrBZZub3wJMX3IpAOhz6A91dlrMxmwsKvepJLDK\r\niAaKbsZwS1sHQN+ti5mLI4uPmGWsdRDEMpgh9lAFnYDRIhSyoKJ6d01dROnP\r\n191ymRn06BCQMASagW7ubnfAKK0h7QHe/Aw63EISqfuyfyPYq2I8cW0b0sIQ\r\nur0MnWHIqVIuaZ8CuTbIEDEia0bAMvG4g4kn4fyklm2VT5P5rTMqp2BbsNcl\r\nCSA7QFRlSsH+urbFv16JQmLbkaxj30CYe5RO/xys0OgRF+NJ/VJqHRDv3TuX\r\nDLSTrEOFB4Z9klkdczyrHRH2F3YLxddDer8=\r\n=RtBw\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button/styles\";\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nThe `mdc-button__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused button.\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.**\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n**Note: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.**\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button--icon-leading` | Optional. Styles a button with a leading icon.\n`mdc-button--icon-trailing` | Optional. Styles a button with a trailing icon.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n`mdc-button__focus-ring` | Recommended. Indicates the element which shows the high contrast mode focus ring styling.\n\n**Note: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommend always including it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color-or-map)` | If a color is passed, sets the default container fill color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`icon-color($color-or-map)` | If a color is passed, sets the default icon color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`ink-color($color-or-map)` | If a color is passed, sets the default ink color to the given color, and sets the icon color to the given color unless `icon-color` is also used. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color-or-map)` | If a color is passed, sets the default outline color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"The Material Components for the web 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/density":"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/button_15.0.0-canary.c3924efef.0_1658341828247_0.732893261446766","host":"s3://npm-registry-packages"}},"15.0.0-canary.cf5c5907c.0":{"name":"@material/button","version":"15.0.0-canary.cf5c5907c.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"5e682fa66ea05e374b9838c1cf73e4931f8237d0","tarball":"https://registry.npmjs.org/@material/button/-/button-15.0.0-canary.cf5c5907c.0.tgz","fileCount":40,"integrity":"sha512-K4kgjq++cpVW1dSJI6lV816DZr3PcUmIfOtiUtxlkYQdyNoGo93mwzE9NW9M6QeAB6oK8RXSDD7hEcu5mymX+g==","signatures":[{"sig":"MEQCIBGzkwhs/qCyD4mskiYeuMQKnaYtHTNYcRBAmXDIh9tnAiA3fdQxx+/GcecCiUSe43H5pg/W4Fofshs49TttttA/kg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":640390,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJi2HIYACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmou1g//ez2xayJI5KoZAnwr9kZARMQFq8cT9H6i8aIfun/DQ0mSV73U\r\nt2dw2/Zs0yPb3zQKIiLctRpjc16yPzo5noZRGEQPXp/11T6dDYOwqSWU7cqS\r\nT8gbnMuW+VN/qeslF+gKYENCkNYrxMzi7P1+/IAtkh1pULzUoDmkME56dhWX\r\nQYt2fArcwuaDf2Yo+XkOSECzszqi8AjrRMubwSoZvHVkKujWaKL4gmX5ZAEf\r\n/HDiOpAZAD2dFbL8Q/OTRTOfa2dMFhaVKPsh5rklmzoLZ0H3CtbDIP4w1U3c\r\nDUmReBhsjH1QBvatE7sXs3xQ7Ni4VUMCVTf02hVTjFN06bF03cIjqHrXwH2n\r\nziF0Hjt8OHGo8XAfHFZcnrI24OBRk9UrtsibfrgcZdxroRhvMxx4qTQU+ovx\r\nwRNkUQT/SSQfSEtFO7GBMrSAoBHwGsTJVTUe3OPZFa40aSseAdqnof1i8RTq\r\nusbezl4sBh3JIA+dZBSxi0liJEqiXGn0kgjt++UYjxwe6HbFwEfTp4PnrY39\r\nYT63b4j67hKZdcj87Sp/nMBJX90MCnYt32caR5zdAa8KDRbKUeNU39apTkg4\r\nDPJIAp+I+34uoW4h9gTwA46NDKf1/2i/BEAxHxm15noYJ2T4eFV/ojVgVQXB\r\nb5RJrvtYN89YBXOVoaI7sWMUv0GqKNWelV4=\r\n=csas\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button/styles\";\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nThe `mdc-button__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused button.\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.**\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n**Note: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.**\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button--icon-leading` | Optional. Styles a button with a leading icon.\n`mdc-button--icon-trailing` | Optional. Styles a button with a trailing icon.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n`mdc-button__focus-ring` | Recommended. Indicates the element which shows the high contrast mode focus ring styling.\n\n**Note: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommend always including it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color-or-map)` | If a color is passed, sets the default container fill color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`icon-color($color-or-map)` | If a color is passed, sets the default icon color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`ink-color($color-or-map)` | If a color is passed, sets the default ink color to the given color, and sets the icon color to the given color unless `icon-color` is also used. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color-or-map)` | If a color is passed, sets the default outline color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"The Material Components for the web 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/density":"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/button_15.0.0-canary.cf5c5907c.0_1658352152408_0.3176511040891006","host":"s3://npm-registry-packages"}},"15.0.0-canary.0617e2319.0":{"name":"@material/button","version":"15.0.0-canary.0617e2319.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"d5694a4b4e2f199cac29175f8581f5db9230b75c","tarball":"https://registry.npmjs.org/@material/button/-/button-15.0.0-canary.0617e2319.0.tgz","fileCount":40,"integrity":"sha512-0ZQo64kvYQf/2zw1XdbOiqGRZ74V+iYqwAKeXYO+2yslrelJpouh4irckQfsu0eTM8/kaihJzkfEZrZ6q2mVFw==","signatures":[{"sig":"MEUCIC3vieesUJ5AJx9ilyTr6amRRQCwd/vJgEmxsR8u20ZZAiEAzN4oWnQYZ5tPNj4lGuA74ntCCWSb61iIMuoaHGmnFzo=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":640390,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJi2HZlACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmo2YA//TeSE/kXS/fpi4lCEkMtW4b527Dt0Nr5HDKUEQeWaAC93kr23\r\nBE7jF3ffPQAFvHDP/NDmsVrtVygS8hRwiBQ7v/StpMLGGtpQLDLj0HIx69gq\r\noueOeDYpqGHRqCdHYY+ByM1HEOWZFZsyLrHrifaSLdVPiQxuf6qU/brzrtt5\r\nKJ8vOxAcmBvalbv0XmxjeXotxQWUq3JTlBPaeW5X/YEJY93SST0bsmQ7ZZqq\r\npM0+QPFU5XB6KM1PB+PfvTCl4JrZwARuliRxqBuj8Pgn6wJTPoPbyFsteqkO\r\naYJ1kPnFJ7AHcrWJszlqk5ItSF7YRaxCFdxNpSAipskUWHoFXKemTULOefu/\r\nWfoEoNNw7J2AfeTPpVZO4l1sAi5SmtM5mkvbqq9KYW4sqPK/gTB8SnWa9fzg\r\nIgi8P7HrqhublbgXEOh4UnJdgAv5iL56GPS9frmBx8E4+w1K1yFv3Xxpkskh\r\nXmpZbzPpAMKesGfaR3EnTU2H2q9i5Uo939tzBqKQ3mnJWKr2DkRGV+7DY5Zd\r\n8a4IUNTsagSHMUC+W4U2J7ytIDHEibI3H9kemAVb9ONLis7lOBs121F3XTKR\r\n1WJ1AOq5eQRVxVDjBvkVAa5n4ub4fYlG6b5Gz3d7JXUKsclP3yF+rhkbxg8m\r\nwmFH76jpaO/M/OT3XBLjLp1FLw1EJR/MaA4=\r\n=Xicw\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button/styles\";\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nThe `mdc-button__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused button.\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.**\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n**Note: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.**\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button--icon-leading` | Optional. Styles a button with a leading icon.\n`mdc-button--icon-trailing` | Optional. Styles a button with a trailing icon.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n`mdc-button__focus-ring` | Recommended. Indicates the element which shows the high contrast mode focus ring styling.\n\n**Note: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommend always including it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color-or-map)` | If a color is passed, sets the default container fill color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`icon-color($color-or-map)` | If a color is passed, sets the default icon color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`ink-color($color-or-map)` | If a color is passed, sets the default ink color to the given color, and sets the icon color to the given color unless `icon-color` is also used. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color-or-map)` | If a color is passed, sets the default outline color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"The Material Components for the web 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/density":"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/button_15.0.0-canary.0617e2319.0_1658353252791_0.7735621124646255","host":"s3://npm-registry-packages"}},"15.0.0-canary.a743b7967.0":{"name":"@material/button","version":"15.0.0-canary.a743b7967.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"612672332f8bde395acfff2addc253911fedbbe2","tarball":"https://registry.npmjs.org/@material/button/-/button-15.0.0-canary.a743b7967.0.tgz","fileCount":40,"integrity":"sha512-pWYFfW+5/lQmiBL5PH8BAej9UsF0wXkqRQQG8q9QrwgQyVNKRagjcO9M8oLZvL7id7hFx9DzoWCPTuQ+5YNtIg==","signatures":[{"sig":"MEUCIQDJKTET6Hd033Th4iMsqjkPoE1vCUTQKTwBREMN7c/2/QIgXVRJIgHgfY/dujDXX4fFamtrvpu0Itxm8GN9ABW3F5I=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":640390,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJi2HpeACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoGoQ/9FRrorGD+8fM1RmGKB2IzZ+CwLPFeyvjlURtFWggt92QCglhR\r\ndLuZAVYn5sk192Gb5gx7ifDw8ns89KioRUqWpQHOymkB8otk6cHFHAHtcerw\r\nhjZYCqLUiy9COMyyRWHF4shT/NCnJDVdLF/gbTRyecKRFXQ4Z64ZpMNZ1VYM\r\n0ca0m0b8yet1LvX8gMhibSzyTt9QFMBIcQLdurPcago/HvtMucjYx2UICybM\r\n303lnDXzHyR+1l3m5dUci4Cl9naBEWyXt+oWodVQgucOlcIgaJaVwgHQujDe\r\npQ3y1MgGECNxOQ665kK405Tp40I9bfvSV81J2G1NKsY7Vi9JJd+y4fyFmuea\r\nnmXjbz8OyHU2r0ZmkSVQmJ+GCVg9Kx24OIhno3uMfCmlN1ejX5eWk4U70XHK\r\nzhYU3fDunn4v+KLwcwdUDTfNsBzQ1HlwHk3ZkuROo+XMGB6WeIS03lt+xFrs\r\nIRQCG3ibBqV1CZkZl8lAjp0rLN4RQYSQClwyNGYd1TJIKF8yGuUncdmkwlkG\r\nFXn+iwE468xdgmClU3VtA/2YHRHQX7KmPrB5XpbmDa1XCeJ7igmhCeVWvLXG\r\ntvymU7R5x25xUm1vxOpiK1S5W23XjZXMK/PvuM1oV5G9NUmykHMuZuADPKCI\r\nEong2CgqrndIEp5fQgXUPnTPWnfbQ5u2Rrs=\r\n=+KZs\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button/styles\";\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nThe `mdc-button__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused button.\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.**\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n**Note: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.**\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button--icon-leading` | Optional. Styles a button with a leading icon.\n`mdc-button--icon-trailing` | Optional. Styles a button with a trailing icon.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n`mdc-button__focus-ring` | Recommended. Indicates the element which shows the high contrast mode focus ring styling.\n\n**Note: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommend always including it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color-or-map)` | If a color is passed, sets the default container fill color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`icon-color($color-or-map)` | If a color is passed, sets the default icon color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`ink-color($color-or-map)` | If a color is passed, sets the default ink color to the given color, and sets the icon color to the given color unless `icon-color` is also used. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color-or-map)` | If a color is passed, sets the default outline color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"The Material Components for the web 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/density":"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/button_15.0.0-canary.a743b7967.0_1658354270083_0.8244263301812693","host":"s3://npm-registry-packages"}},"15.0.0-canary.69fd619d0.0":{"name":"@material/button","version":"15.0.0-canary.69fd619d0.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"9c452a4719346cc736c5908d5c233de8f52a25c0","tarball":"https://registry.npmjs.org/@material/button/-/button-15.0.0-canary.69fd619d0.0.tgz","fileCount":40,"integrity":"sha512-oHTYFHNuiT/zE9oiE5mWw5Dk23H5ff3UaVYQhUSL61/+SpGqkqRPrerSFGenbPPn9NbrxTY/KSCb/ynQ/1IEFg==","signatures":[{"sig":"MEYCIQDZWI+5pkglLDzHXU7awkSdX9bsQ51PbN4Gaf54UWEhyAIhAJbfVesqYIj+k2V2PM5I7z5jRuSX5B78Tr4OyPJTw+Zx","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":640390,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJi2H01ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpOGhAAlALOQqNEPPGqWVrfzTuZof37rsFSBtvHkF/C3socy++Jij65\r\nA9eMMx5DvLxNk0U1jsT/2m7VICnZpYvR9Wc3CySKRb+VC8MY8hYGBuFijMpc\r\naNXEO6CETSDjxSGFp7f/9IQzpY/lR+vd7NUjRWSGCxPK5mM0WGcId3s4ulsz\r\nkx+SMcRXRrTWyb8FTWbKcJ2NDK2ip8f8F16So8XN7IOLZOidy6l/E3tJr3za\r\n74VtaPtbBTMlquK6W8IQMPnTKz91ZDnvwA5MPuypWocMkWURFmFUQfoWwKIS\r\nlOv2zAW44BHEuQ1GcJHQpUApVT81n0CLB05Cfn83+m19X1qmMRzSfhjTRrOC\r\n9bAjT9mLNDDgYAvJPoizHM8Z0AEZwSGttofHzEzI1SdCwLK434bU/l4qM2sL\r\nqQ+zCbOgHbD+gKLK5ExDXCYRq6m07KTDvNl/7Je5US6UJuKz4w4DVQRWquIS\r\nWpCHHMOxs0nw9w5s2EBeieiHt+MLat952DxVGsM/7uMhbHA34xkQ7Qq8TxGb\r\n6LoorXUpA35MSHrgt5K0/t/UGXccuL6l6pj2WDXZ1cWwbedLrIOS71qqOKUH\r\nFhE1lBzKJOToV1vdmRoiAYRmrYnyK2zJFECeG46hLKIfeS3alx3xDpTs3X6z\r\nFCWT1X7dnQ538dskoAHNlxazArU1SBBq5Lg=\r\n=EQO8\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button/styles\";\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nThe `mdc-button__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused button.\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.**\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n**Note: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.**\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button--icon-leading` | Optional. Styles a button with a leading icon.\n`mdc-button--icon-trailing` | Optional. Styles a button with a trailing icon.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n`mdc-button__focus-ring` | Recommended. Indicates the element which shows the high contrast mode focus ring styling.\n\n**Note: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommend always including it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color-or-map)` | If a color is passed, sets the default container fill color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`icon-color($color-or-map)` | If a color is passed, sets the default icon color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`ink-color($color-or-map)` | If a color is passed, sets the default ink color to the given color, and sets the icon color to the given color unless `icon-color` is also used. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color-or-map)` | If a color is passed, sets the default outline color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"The Material Components for the web 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/density":"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/button_15.0.0-canary.69fd619d0.0_1658354996824_0.044835110296088","host":"s3://npm-registry-packages"}},"15.0.0-canary.2a6ddc1cf.0":{"name":"@material/button","version":"15.0.0-canary.2a6ddc1cf.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"05b86a90bf078b6bace192104fa454d323f427eb","tarball":"https://registry.npmjs.org/@material/button/-/button-15.0.0-canary.2a6ddc1cf.0.tgz","fileCount":40,"integrity":"sha512-eUxoCjXtKTa1x1xuq1Ptktjw2WDP1CYKzlWdTJqdV5FUjCzsnagBRkKLZzYq5UkFmd4c2zRJp6i+O0L54UT10A==","signatures":[{"sig":"MEYCIQCOLUG9eUB4E1HLXdHSWNpiUOmU6Zhvc1Gt12oMx3jLeQIhAJL7fKeDZK8tZxSf/qYktfPOTqHhAxVkX7RoBw/jnmNM","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":640390,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJi5AU/ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmq3bA//SHHEyy+KUIckmznuHTkmwJCCAEAECBEXdbWxrcTfC5s0lB0v\r\nfdJQ6KRR26uU0SJwqjh2pC/TPOeceTgkxgRWmK2tpFHVPej7FQhZvsJyORFk\r\nPhZOgRKAPReN7sNK0MQ1L8BFSWTVzWk8+u0VzGxsYtjlT/1Yh8MnW3PA99CJ\r\nwZc+OLsGRCmN0QNV/hnknH4U0hiH+TqxpYblHsEZvkanQHSzY1wFiOYXrpCw\r\nfhcm0Higmp6QLGGRFmxfxTgF1iXZcrmZjXYutKqZT05GIEQla1mRYx/gUcCp\r\nx+lpusjk3swScTT/J79UDNz++eycu2YfA8IpHGZZO+9tIcTDRM94cC5Oqvg0\r\nwoBXvSCAqPVuOK9IKHmAwlV02l5Gl4BWi9gmcNHx1tJ2S1pgOlo66u0kEVBV\r\nSn8RPn6vnvwXpQJwIw6QgnNzY1rLA5Wq3etCF7t1jgrp1Dy+TqOB4XSLTJ2m\r\niYEDD8k8L7jagKuu+Tfjw1R1bDK5y0znCbv5YfsDEfds0TVh9AEJmi/ZPu6v\r\nW0JGtos7+IJwdwZ6jAln53ag2ZqvH0C5PXsD5zNhKUn5o1cvF+NT0HaG5Qik\r\nkMWRTf1ho/sz4G+AlDhJmsV5x6UWmLAzlnzvtWFGb+zcD+h3zam2G0FWy/q8\r\nYXWenAuO5SmwcVI0x28OCkEAph/DdvW6Xo0=\r\n=j/Xa\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button/styles\";\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nThe `mdc-button__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused button.\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.**\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n**Note: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.**\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button--icon-leading` | Optional. Styles a button with a leading icon.\n`mdc-button--icon-trailing` | Optional. Styles a button with a trailing icon.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n`mdc-button__focus-ring` | Recommended. Indicates the element which shows the high contrast mode focus ring styling.\n\n**Note: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommend always including it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color-or-map)` | If a color is passed, sets the default container fill color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`icon-color($color-or-map)` | If a color is passed, sets the default icon color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`ink-color($color-or-map)` | If a color is passed, sets the default ink color to the given color, and sets the icon color to the given color unless `icon-color` is also used. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color-or-map)` | If a color is passed, sets the default outline color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"The Material Components for the web 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/density":"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/button_15.0.0-canary.2a6ddc1cf.0_1659110719116_0.1607532996567962","host":"s3://npm-registry-packages"}},"15.0.0-canary.86efd56f6.0":{"name":"@material/button","version":"15.0.0-canary.86efd56f6.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"8f9d9138ef39cad8e33986eecf6e3c4e39654512","tarball":"https://registry.npmjs.org/@material/button/-/button-15.0.0-canary.86efd56f6.0.tgz","fileCount":40,"integrity":"sha512-yP+qyuyB9bKA8BbYvSkFSpeJTyc2smkoeEnISuUjN/rdnNf4DgKuVVMEPhDpS1EFPkDGGiFccn00B4BiRmfE4A==","signatures":[{"sig":"MEUCIQCyJj5SfyNy3faqGGLI7QGsNlSygZTwVGWzhESx/1ZynwIgI+oeWeSfcR2HTHB5CQoqYHVSWP4ivV2gySIXPy0hH/s=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":640390,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJi6Ti+ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrGfBAAltsH/W+z6VXq31wdkfvrkYOTMgDZkQU0Xju6mDDmfUGhgIjI\r\nLR1PAHr9c47uNvaMB70EHC1+JSpax+fb/gyHZ93szMnaKHWYPp2TU7qOcmo4\r\n8Qw4b0TNzQss8B1ujcXW/qrkXT9TCgvX2cx+e/lv8CTAo1FvmTG5yUOPKQ5I\r\nrkbAx56pneUdtTT6vFg+CAC3fzctyBFFr46HswekZpYGTFdALxVZZza/bACc\r\nBUhtFkK5viSlO4er0h4/RdWqu8/UOsi/Oab+1aS8EPKtU+DD+0Lpjw320gK1\r\nURrRiwwZXRalQrxh8PQAutUCDLrU9+rlhgdBN9jbO5kvmeGnY4ZFMXDqrVfc\r\n6i05pveLV5AhxpZ0nyi+5TWx1GK3Ca8FtyQy9vQ17J2P10uAZ0Q3GVudxMBs\r\nvgmO99NxP+GxYVfZtHiuxtwLbxZiROuWbGr16NcYVpUXccQEeOyMFSDUqsew\r\nOFuwHajeW+bKIhuqgn+R8vxtCXn0tF0FSmSnA2o7DrqOy+wV+d1hvW4K9SkO\r\nCVAlYPVRdGQtWXGxc4Gjbp7SP3ks8sKEIRgrGqdlwxz+VhvIbWBVU3TaA4Cd\r\nLJIRdygWEqeXj9CLcXoWnhvsgUtMDOZS8+mTKUTe5jkGApAa2foNirg85cF8\r\nqmuqxDmdyvo9O714kszbjRVBtAFzBHuHlcA=\r\n=Lplb\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button/styles\";\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nThe `mdc-button__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused button.\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.**\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n**Note: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.**\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button--icon-leading` | Optional. Styles a button with a leading icon.\n`mdc-button--icon-trailing` | Optional. Styles a button with a trailing icon.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n`mdc-button__focus-ring` | Recommended. Indicates the element which shows the high contrast mode focus ring styling.\n\n**Note: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommend always including it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color-or-map)` | If a color is passed, sets the default container fill color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`icon-color($color-or-map)` | If a color is passed, sets the default icon color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`ink-color($color-or-map)` | If a color is passed, sets the default ink color to the given color, and sets the icon color to the given color unless `icon-color` is also used. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color-or-map)` | If a color is passed, sets the default outline color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"The Material Components for the web 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/density":"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/button_15.0.0-canary.86efd56f6.0_1659451581860_0.39399161803123195","host":"s3://npm-registry-packages"}},"15.0.0-canary.ccfc24d19.0":{"name":"@material/button","version":"15.0.0-canary.ccfc24d19.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"ec2dcbfba3dd8de022dfaad66c86b1c0526c0735","tarball":"https://registry.npmjs.org/@material/button/-/button-15.0.0-canary.ccfc24d19.0.tgz","fileCount":40,"integrity":"sha512-qRKpPKoEYU56LFAuuxtz4wcBgHJvHOB04KquAIpZZpAqyW+VL4oK9hjwQ1v/gd0AlbWI0wIwEKAUy++5aU8YZw==","signatures":[{"sig":"MEQCIHRtUO3F1nEo3QT4mtaCHUce2KK6OxEu5f+BHSJzyw1BAiAen7UyQjXw9WiW0fGYhpnAbkcgTTTFFwLxO/pMKKAfzQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":640390,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJi6rr3ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmo3EhAAl4cMbEnOkYvqbVZT0ZsgEoo14FAaEVixSs8q3CVxrSGo9Iew\r\nTHipfdyK9A1cTK1em/qNAJpwQkoFalU0MUMUn5rPvAVRk8d81qLai+N+KMRt\r\nXEwxx0oYOvg6S+rNdLyX9FJ+JMeuPTSsVIoBYTfDxH9wQNqfBDQY84aEzFvT\r\nRAW1TfBQcdu3PzvsbC3+PTC1KwFelI59CN0vfe0NFv7gTVOsM4xdRkzW6mZm\r\nDpmCLcTii4bYOX+IkRuVc+GItM6kb/QV6CJ8amC9o4qLC1wwz66DSybzqhys\r\no2aGBJe7bnV81TSeHBZv1m9o1nDpuetyx/0/iHgpxm0nbFTEpy2RrNUqF2PR\r\nJCcEi66kPzU7hOWM5LJX4FB23RoOsQgFzmdgX5g3Mq4k+dgz+KfKb0zwUnEw\r\nyq5wjdK2v6U3Vagm0NCVVTkNNvJqZ5W6Znuhex1NflbHrvYEfwMSMHKouhSf\r\nsg4FQcXgVs5QeCK27dyPonsS9zxiBXRaqiZwd8otNUnUrT4kwnTP20ZLA2dX\r\nGjmYOhKDFun8VWny1M6fgrLjHcR8gYeXLkmiKLh3sOnG55pU5Eoy0T3pLkI/\r\nKmpqRPWQqqCgd/3AjCV336Md/akMx7MqD1a/qBVEElExgY8qb6JkbmeimzJr\r\nBAyXei6WfpCQxeTKexv0ZDbhrXBeXgkOOyc=\r\n=SeaU\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button/styles\";\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nThe `mdc-button__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused button.\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.**\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n**Note: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.**\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button--icon-leading` | Optional. Styles a button with a leading icon.\n`mdc-button--icon-trailing` | Optional. Styles a button with a trailing icon.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n`mdc-button__focus-ring` | Recommended. Indicates the element which shows the high contrast mode focus ring styling.\n\n**Note: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommend always including it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color-or-map)` | If a color is passed, sets the default container fill color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`icon-color($color-or-map)` | If a color is passed, sets the default icon color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`ink-color($color-or-map)` | If a color is passed, sets the default ink color to the given color, and sets the icon color to the given color unless `icon-color` is also used. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color-or-map)` | If a color is passed, sets the default outline color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"The Material Components for the web 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/density":"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/button_15.0.0-canary.ccfc24d19.0_1659550455541_0.2608005034982077","host":"s3://npm-registry-packages"}},"15.0.0-canary.e4570146f.0":{"name":"@material/button","version":"15.0.0-canary.e4570146f.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"46cbace179e9e19481cc0282c4df69463589a11c","tarball":"https://registry.npmjs.org/@material/button/-/button-15.0.0-canary.e4570146f.0.tgz","fileCount":40,"integrity":"sha512-UiM6EzeC1TSaOnws0DRyO9TBQNqsOZSytVMVe5nW6v3vdDI5vbg0hfvcQojKIFhZZaXReh7Kz7O+q1inx97Yjw==","signatures":[{"sig":"MEYCIQDvHpsiUTfqvu4O1+YlzZ5jzwOD0A+mrbqgMQbBpFIpwQIhANexMVry5O+GZpt+mIQP6aTxnLGe3Xf5Vy5TXr+IzHCo","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":640390,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJi6sFbACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqYwA//ZUevgfDPn/uoLjgG7+ElAzqPJLe51VruKFqXbtlhsVjcIewt\r\n3VsdlTN0e602+yGDHQgPOP3AXh0n9Drmrxw7natFdlFikclgTeRTI6vsHkVF\r\nwWf1ItR1/+3OD9Ml7HuBUPB0XYOWq21Dkok0dH277RRBbKy6vi1e6il4Fiki\r\nSMdAcFDk9y6BRUrtCrRAI+HseSBGh9mdHkZlIPVRLA9zCavZyFI4ye3LUvss\r\nHStvMZ9BDobfVxV/pGgM0l4f9jdzz7xuAtUgEm0SS4jtgmNU31vUKGOdjZB4\r\nQjxYgjTtNsPakf1/mufZHIv7nhF4M/mn+bP7ZUnTi2oBMLsyhNXQt9w839TX\r\ncUZFufykfBFvYkXcsxN0MjRB8kaXKQZ1jvO6/OW788W5C3lYIRV12irq+VPY\r\nGHuwOZ8URWTIIQDssCqEuPxAlEeRcImKgEryUfIQbcDjKMT0KfMQyYO26P8f\r\nxlo8BywwEs7TfoIj9Wq/pcH3BphH9ztK7dGnEbPVA7S7DAgCIO36PBxQEn81\r\npbOuKkRv0Xh7zESXrrX9Lb+VztV2fq9u7tK4SNChqtAnn8h6YgOUWm/blY5q\r\n0jtPFua4GTaX5QLp+UKnvrkwT2nRIwRcco1y8z+UOyYMoMJgOh5XRkmtwNqe\r\nuqn8IESkcShg9bWpCJwDbPHJcFOkJ4Q6qZ0=\r\n=in18\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button/styles\";\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nThe `mdc-button__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused button.\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.**\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n**Note: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.**\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button--icon-leading` | Optional. Styles a button with a leading icon.\n`mdc-button--icon-trailing` | Optional. Styles a button with a trailing icon.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n`mdc-button__focus-ring` | Recommended. Indicates the element which shows the high contrast mode focus ring styling.\n\n**Note: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommend always including it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color-or-map)` | If a color is passed, sets the default container fill color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`icon-color($color-or-map)` | If a color is passed, sets the default icon color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`ink-color($color-or-map)` | If a color is passed, sets the default ink color to the given color, and sets the icon color to the given color unless `icon-color` is also used. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color-or-map)` | If a color is passed, sets the default outline color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"The Material Components for the web 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/density":"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/button_15.0.0-canary.e4570146f.0_1659552091489_0.917731057283792","host":"s3://npm-registry-packages"}},"15.0.0-canary.6683a36cb.0":{"name":"@material/button","version":"15.0.0-canary.6683a36cb.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"2d7b1b68061daf5574a69dd9a292e8826cf9fcaa","tarball":"https://registry.npmjs.org/@material/button/-/button-15.0.0-canary.6683a36cb.0.tgz","fileCount":40,"integrity":"sha512-eEvhVoumd8Z64tiG0gk2E+AvFHlRyNg8T8NvzMlmlGfN8Q5i3JyDA7hXCCmq9wXETQ5s4nniaP0a0+cOBIXwQQ==","signatures":[{"sig":"MEQCIEcTTJ7OzaRMW25Ia71bWB38yVZH+T4WM4PIhGNCDGteAiAfoi1HsAklsfEeEduqbWUQtyBHP/b3btCXEaLJKCkW4w==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":640390,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJi6sq+ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpoqRAAgT+c5Bks8rJPWQRGpWpMV0riEwh3bvlqW1UT423kkpbvREhu\r\n17jgqTMN+UZE6kHLk0lLW+bs8KvmvIvr3RDSfwPQ/mZMlK6dt0kLyAcY37nj\r\n23i7GiyvSojkU5KaQyiLneBE28YZh5rp6RoXqqk+u2crwACzdfz9J4O8E3vr\r\ng/L2bcFtkFWKgJ3Hv+9py1B7BJqajv1hFDq+4JwtwZsWTUa+MvnvizYhzjDT\r\nwaSrjQVG9l1ALVJpnADRRqzyi0+6I8Jzit0spj9U9oVapo+cxmXsAUVRawEw\r\nlzwy7lJ96I43aHIQaWHxfzsIGw2F866IfUWvEXQVgpYEt/jh1pZRBDg4HdAH\r\niSSQeuxLaCWPwz9X6N21C4kvavzJFxrZC7xG5Gz05bVCICbAtBH0Hpgri1lM\r\nYt+ahUdJ7MBQT/wlTvKZPMkmzKbvWUA8B23EuI1Q79oRJxIKwO1NuU0g+5dP\r\nVm0G3sSZaQ5G7dXyhDX8kMDwnUW0VVXg2JOi/CBDD8H/Mfx4M+YXyGPFQLnp\r\ncsK/R06ZTXQyqN589GTWptNSk5jJptHSe9eYdSsZZp8TORo6GNxLTfu/4aq9\r\nB4hq4heSBULfyn+gtDkxcATQ1x34/bzltUQ3XSuDnc55Vrgml312NBi1EFXC\r\nyaWmJFxheNx0Gpz5h+fQe9rxd+TBZljThtE=\r\n=4W7n\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button/styles\";\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nThe `mdc-button__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused button.\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.**\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n**Note: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.**\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button--icon-leading` | Optional. Styles a button with a leading icon.\n`mdc-button--icon-trailing` | Optional. Styles a button with a trailing icon.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n`mdc-button__focus-ring` | Recommended. Indicates the element which shows the high contrast mode focus ring styling.\n\n**Note: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommend always including it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color-or-map)` | If a color is passed, sets the default container fill color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`icon-color($color-or-map)` | If a color is passed, sets the default icon color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`ink-color($color-or-map)` | If a color is passed, sets the default ink color to the given color, and sets the icon color to the given color unless `icon-color` is also used. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color-or-map)` | If a color is passed, sets the default outline color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"The Material Components for the web 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/density":"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/button_15.0.0-canary.6683a36cb.0_1659554493754_0.7784605283732065","host":"s3://npm-registry-packages"}},"15.0.0-canary.10196647d.0":{"name":"@material/button","version":"15.0.0-canary.10196647d.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"8353efc15bc5cbbcacfc1c590c2bf3a3b0f3f093","tarball":"https://registry.npmjs.org/@material/button/-/button-15.0.0-canary.10196647d.0.tgz","fileCount":40,"integrity":"sha512-JtzJvnaLv4eo5434Yrv181MQgHMnbgQkbsMqjrcwgSVM2U/gD83QUu7To2tbO7/lalMe9otOkpGPwdOgmraUJQ==","signatures":[{"sig":"MEYCIQDjU69TFJBLjPqjdmBZfxiEUobhoUidoGJ8ohzEcruveQIhAKENd8FnKEoVtLkgHLPSbgSak9upSkuAPiQkiZaXWDxN","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":640390,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJi6u6VACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoaSBAAnvMlizrfgXuqHiitLdGIYgmd0kcOMS3qcxfJvLZLo+yHp84W\r\nc2f0hHoz5HmfFxmw3Zo0FelC64krGygYs1sGV53OqFeyxbNR9DMzrrYa0ucH\r\nxgOXme1VpvIPopHRPKpAF8Xn3Zcufoc5WCv1xkUgIVW3mrQuY0sqxYDbK89p\r\nDt/D3wIyrIgi82pk65wnfs1VaHk+QySY/0mb48dtLEb9G3vxsPO4ThzItqO2\r\nCox68T9ziy36SnBw1Wl+oULCS7lJC4KKj7dJ81LqqkkO4dwR4f94Vm+EyX//\r\nr4d8NHd/oYdXYIVqNTOltA4pM/nx5T5GISQowhI3OypRwzHpUQX90N74eGMb\r\nhzyIL3+B6OG+CA1lzI0yW8WQsxCzeQKqgXOY0eAa4iRKUTqh4oYEvQLCimgk\r\nftB0+1aXLgr24a9bvSFWCgD1F4431UtEEO4IxHINueEnnLOWMFT3zo+D2DZu\r\nMjUOoVcss8sKI3Pz16T65s59WmrkN4+S9osavb7Z4dEvS3fzYcmDNx6rxt7b\r\nQgaKaNjwYuLJ83+gNbmn+xlCXLYBgvzPDxhtlEGGMf77aOHQqj4AQaZDqmHP\r\nyIJrIAuAhjmOSWUZC7j3u4czTiSPMePdTzV3WHn5Xv2IAr15DzGwQ1t8PPko\r\n+vvfYZJKPoaBu8c0fJ8m7uXMiLQie8rUjxw=\r\n=/xYT\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button/styles\";\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nThe `mdc-button__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused button.\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.**\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n**Note: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.**\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button--icon-leading` | Optional. Styles a button with a leading icon.\n`mdc-button--icon-trailing` | Optional. Styles a button with a trailing icon.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n`mdc-button__focus-ring` | Recommended. Indicates the element which shows the high contrast mode focus ring styling.\n\n**Note: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommend always including it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color-or-map)` | If a color is passed, sets the default container fill color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`icon-color($color-or-map)` | If a color is passed, sets the default icon color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`ink-color($color-or-map)` | If a color is passed, sets the default ink color to the given color, and sets the icon color to the given color unless `icon-color` is also used. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color-or-map)` | If a color is passed, sets the default outline color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"The Material Components for the web 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/density":"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/button_15.0.0-canary.10196647d.0_1659563669517_0.4471244136959349","host":"s3://npm-registry-packages"}},"15.0.0-canary.b20d3d73c.0":{"name":"@material/button","version":"15.0.0-canary.b20d3d73c.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"8fc09aabf68428d8d800bd26a5fcd2b72db4287c","tarball":"https://registry.npmjs.org/@material/button/-/button-15.0.0-canary.b20d3d73c.0.tgz","fileCount":40,"integrity":"sha512-U979Pempnn2Dz7HB7DPoT/m1p6uTML5YK1PWCrUztZmnpBfMKPz7h4r5kHhm+E/4dBdOtA1Y1U+nfqbee2qomw==","signatures":[{"sig":"MEUCIQDeyys+95X2szYIAEPXtjfvwF7To7cGp6Feud8jqpAXigIgAfoE0zTuWZlTDlEtaPlnjXCF0fGXMPAg9y6XUHFEUCM=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":640390,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJi7EuaACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmr6NQ//d9eVVPhKVK5YQn7/Ue4T7k81Aege+zxEboQePrXmj+G0TvX+\r\nR4t+tXbtqjBmVJnEp/6HO+as2KTW+FP2hexi0STwgqPZMznWj2PXVhnfG5Vg\r\nOhpXAPpxVW+1TzohV/hbh5Hi8NNm0qD7h2PJ3h1sFRzw7+I0Ec3TK2LdXD1C\r\nQTuQ5so23YC14N5glKn9kdswE6ja7nSd/+aMwEasDKwqPP4XU4GbVyVhGXm5\r\nqxIma2awrDVv5kN0jXMf83aEOmf3E3ENKJSNXadLUjK//rYJPlyzNzyZ16OI\r\n6ul5LCgSRbUswH0VpggwKtf99QESMaItDpSQ4dAZNskCo3FBcHrmMHnE9Vgm\r\nrRqk4FqkSuDSDBiwBxinfjIsfjBfDuTbHcHvCUipVT4lGQcuy8pb9fnHNU3X\r\n0Pk3uN2lXVIphbn8AZ8gH+KLwEexQcL7j106+wlG/hpZyJjVi+JEp1hEgOpE\r\nOReBUWBkppMGqTqp2OMXGuORhJkR53ZBkDMovGju0ivg1EqypZ7ccOGba0y/\r\n40VykFuFSB+nm3Pnw2mbz0bIiqPuGFky+NqGqf9r4G21HTOB4l7KIpuIIu/F\r\ng4oIIintQvwUVfFfnWIbWm+EWLKQRktMPRlublSdtHCZSsobktWlxhUUTbTR\r\nFSkCTciUjZHxize0Y3fUoJwvR3y0vQzFOEo=\r\n=bFf+\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button/styles\";\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nThe `mdc-button__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused button.\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.**\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n**Note: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.**\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button--icon-leading` | Optional. Styles a button with a leading icon.\n`mdc-button--icon-trailing` | Optional. Styles a button with a trailing icon.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n`mdc-button__focus-ring` | Recommended. Indicates the element which shows the high contrast mode focus ring styling.\n\n**Note: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommend always including it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color-or-map)` | If a color is passed, sets the default container fill color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`icon-color($color-or-map)` | If a color is passed, sets the default icon color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`ink-color($color-or-map)` | If a color is passed, sets the default ink color to the given color, and sets the icon color to the given color unless `icon-color` is also used. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color-or-map)` | If a color is passed, sets the default outline color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"The Material Components for the web 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/density":"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/button_15.0.0-canary.b20d3d73c.0_1659653017771_0.2835103261523184","host":"s3://npm-registry-packages"}},"15.0.0-canary.47c0c6b1e.0":{"name":"@material/button","version":"15.0.0-canary.47c0c6b1e.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"468a21650c28cfec83e850d508ded419e134f1bc","tarball":"https://registry.npmjs.org/@material/button/-/button-15.0.0-canary.47c0c6b1e.0.tgz","fileCount":40,"integrity":"sha512-YYafhD+oiwHf+MXz/SdxyOjPk+Hbczt2AxEcGCb/lgNfq2tQzB/OAxEjtaDzBah/tSXJGnuNalUwbENYs/qsRg==","signatures":[{"sig":"MEUCIQCx+wnTVc6C/JLWVv4rbtA9xbaSkt/Cz3bbthWtmv+BzgIgcnMHd6nZ015HGFbFHUjmDeKMRbUspY5vKxtYqRwys94=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":640390,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJi8ntxACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrCfQ//YWTtC5ewPid9/fI0HsC9yJIseBd7AVdb6RBFMFD1eg99aZHE\r\n5R4ugvjaZ/7e9jEqQBPZqyeAdNSffzcOG9HJMMKdbkLummIs7qZBmSCL4S3V\r\nDOsEWSjOm0EH3OhkfGtEz8+PPTLvwyPj/C69nigwzuObf5JnnROWryIfFn5R\r\nS0BOu3L0KpIQepa2mHNxQ3ehPJsBm1LgjU00t/RN9DelIcZp3+6Ri88QBGBt\r\nWE5KfVzQuqZ/DLcBY7qhGyIGshNRVcCnLyfi2Q8gcXqz2Bwq3mj2gnXP+uuW\r\nZy2kNzzK6UdhAFEdgXNF/JNcZdLsqXvMc4Gpzxx0s/P0ZIl5/LoJvvkfZOJv\r\n0bjp+YypYswBVx4K0xFRZj7z8yPAcrqgX4P2BI2X0i+8MdDdn0nngVYKx4gu\r\nZcqwtbpCU68Hi0w9dlkGEAwvWwJ7VZuN7bSFlhnoCA3x+wn/qBSpgYEhLi67\r\n+uYmEWSpNjlMc+oy18pVTnNhAhlSErpralorVv9XyGLX2s4gvjbMns4IqOq4\r\n46QK2l5JI8vTi6zDjTjvR9LY/9HZfZ703wpPSYYr4PssDA7jLZQoKhMw9vvg\r\nfCV+YJgsMKbMaLegJAnYDB+9PVpcfBSy1RTmmimEAATNBLuTpROWE0fgbszv\r\n2Fc86eYuZqHxHupWRQdwfFWcS5sNch4hypk=\r\n=WPXa\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button/styles\";\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nThe `mdc-button__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused button.\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.**\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n**Note: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.**\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button--icon-leading` | Optional. Styles a button with a leading icon.\n`mdc-button--icon-trailing` | Optional. Styles a button with a trailing icon.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n`mdc-button__focus-ring` | Recommended. Indicates the element which shows the high contrast mode focus ring styling.\n\n**Note: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommend always including it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color-or-map)` | If a color is passed, sets the default container fill color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`icon-color($color-or-map)` | If a color is passed, sets the default icon color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`ink-color($color-or-map)` | If a color is passed, sets the default ink color to the given color, and sets the icon color to the given color unless `icon-color` is also used. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color-or-map)` | If a color is passed, sets the default outline color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"The Material Components for the web 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/density":"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/button_15.0.0-canary.47c0c6b1e.0_1660058481170_0.41024342171332706","host":"s3://npm-registry-packages"}},"15.0.0-canary.0e3dc8e38.0":{"name":"@material/button","version":"15.0.0-canary.0e3dc8e38.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"a8f257a05ece699cfbfebd35aec02ac00a6a6517","tarball":"https://registry.npmjs.org/@material/button/-/button-15.0.0-canary.0e3dc8e38.0.tgz","fileCount":40,"integrity":"sha512-ik5zRxeXvegCE9YrLx+Y7S92c+YoDzO30EItI31cOcAoqxYUKFzJ78MP5t547MJIe80JbGxfTdnEKxgylRlLEg==","signatures":[{"sig":"MEUCIQDaCG0A4Y46fthwEm/VApeiveOvFM+S0NhSnpCDUW2TcgIgQ2mMJ8Gm9AZdEh4bGC4wKwTATR27FwReiKjCv86wESE=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":640390,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJi9U6NACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmr8eA/+Lm1o1XITxJMOBasC6Pslhm+Pik7r2oVc4nLNTFIhLuqxfjuQ\r\n3WaKHLuGAnRVwG4WD/FEEA3FMos5ClgCatfhxySy/0Zj/X/O1FYF1CGtKPCP\r\nRueX/LesfaScWv2sLpfQsK0HOKz6Hp26aatipF+DSgJ4jq3my8nBSHtxsvSY\r\nVgSd948JeHx9/1CKmWkGJ4K9BW/c+aJ24zfb+lVbJjgEcLuMUYeMZPIOK/nm\r\nMQRQTuyeT2Xptfi09urFGAARgbgbv0B146AWkcFYw7C2sxdhUCOT6H3b70i3\r\nO2VNsd+IAdVSxZgW8whR02c28TTaBLcX0Se1YbYkudxDLo7CjdFfCvIErkvl\r\niieZQQbpD/kLq6sAxyjw36UVdpWUOkOZrEEKT+u//qtgGMd1Mvyja7NUKPdS\r\nj7aq+luud4py/9g7FPfy8kcqf7sUDIcQhNV3LVh1Az0YdpRSU0gLnbSv/+Z9\r\ninhs4JR8g0qCHriXDkW74NjZaxu3ukHMu1IKgl4T0NfP0UBCmRo6TGzoHWKX\r\nFtFTyabiqdDBc0wwTT0EpNoyBDJY8R9UtkMKfcWsCmJgbX+C3GUlL+Ew1gu1\r\nwAL1ZfFngcCG6x3pb3L9DCLpt1gd6T6jug4S8gLn6Q2AO+N8YjKT2BJYxWCR\r\ntydB1MioeN5E/dejqUWL3cwlMc2xiuT1CDQ=\r\n=xwoq\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button/styles\";\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nThe `mdc-button__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused button.\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.**\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n**Note: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.**\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button--icon-leading` | Optional. Styles a button with a leading icon.\n`mdc-button--icon-trailing` | Optional. Styles a button with a trailing icon.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n`mdc-button__focus-ring` | Recommended. Indicates the element which shows the high contrast mode focus ring styling.\n\n**Note: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommend always including it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color-or-map)` | If a color is passed, sets the default container fill color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`icon-color($color-or-map)` | If a color is passed, sets the default icon color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`ink-color($color-or-map)` | If a color is passed, sets the default ink color to the given color, and sets the icon color to the given color unless `icon-color` is also used. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color-or-map)` | If a color is passed, sets the default outline color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"The Material Components for the web 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/density":"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/button_15.0.0-canary.0e3dc8e38.0_1660243597464_0.6064700791835824","host":"s3://npm-registry-packages"}},"15.0.0-canary.d5a11f1c8.0":{"name":"@material/button","version":"15.0.0-canary.d5a11f1c8.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"e7005543f6ac182e17d4895808958abfb66d5046","tarball":"https://registry.npmjs.org/@material/button/-/button-15.0.0-canary.d5a11f1c8.0.tgz","fileCount":40,"integrity":"sha512-2eiOgcvXXUz2+wtZ5sSgqPvbdM2xchUAGO5MP5EPTPnPpiXuAnjK6CVqn8c88PMaR3ezPdKh5j1Pb9mMuhSwdg==","signatures":[{"sig":"MEUCIQDrS+168N5vrPytLPRbHMcyDHE+FMg5aQNc6Olc3ixb7AIgJ9jbxKtuJ9D9Om8kyC2OKmCxLui38W0lydBCsfDtUOE=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":640390,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjDpboACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmq+Dg/7BJ8vu4G5OBvzueXwiEXqutpUk6mDlLzdFyuRsDOOJdm2g93h\r\n/jNxpOktlvYqc6P6qCE7u+/Ni/K/2ZYNhwbaBS96rUtgaxAswegxgqvNyZLu\r\nR91xv3PIJAxlzEU8UOrwU2BJpy4A4UQG8+473qjU2BgR5sB2EtHcxJFIjnMv\r\nZ2S2+JjttduVQw+LipSEAY7eAWkFiub9ChnlDF+3aFDVT0LoWPonbCF8zXOy\r\nzKZyDxVqezKz4EIrGLFo9A4/vSmk1ez5+zYPUqb+ecOzpTvyAsi1NIOZAOsO\r\n/t2Nj8HN/cnO4K6DLGi9Xk7mchBr61bCHzUWnzBEGFcF9Pa4HYZNN2sWEaVn\r\n5S7l6iCjPU/tiZwTaMuDVQqZ7bm0o/uVZwPmFtB0U1dlsvrayiW5PEfNYE65\r\nkDlsXbD82o3R5DtcKl0mcy3mN9ulE6BgX3cokOK1xOC/2u07JJ2p52foDW0o\r\nUwtv8ucqbFdC4ScwaRm1ujM+WoRAzRg/5d2wDyGAgAbtK6OjVXxY9GyiVfFU\r\nLtB0QGwbCvVp988jGkq6Vw7dHKbZX9fSYBuZ84onfdMv1otc4VlXoo+XTMQg\r\nVEYBJaeXzds39H0bmcG/b1q0It7nU0EOTMOhTdvudGuD24yJrfszkAf1cDs9\r\nCLmuci27oaapaUWdnv/1f6fq//Z7sce2s0g=\r\n=eZVt\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button/styles\";\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nThe `mdc-button__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused button.\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.**\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n**Note: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.**\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button--icon-leading` | Optional. Styles a button with a leading icon.\n`mdc-button--icon-trailing` | Optional. Styles a button with a trailing icon.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n`mdc-button__focus-ring` | Recommended. Indicates the element which shows the high contrast mode focus ring styling.\n\n**Note: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommend always including it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color-or-map)` | If a color is passed, sets the default container fill color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`icon-color($color-or-map)` | If a color is passed, sets the default icon color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`ink-color($color-or-map)` | If a color is passed, sets the default ink color to the given color, and sets the icon color to the given color unless `icon-color` is also used. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color-or-map)` | If a color is passed, sets the default outline color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"The Material Components for the web 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/density":"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/button_15.0.0-canary.d5a11f1c8.0_1661900520212_0.3782537909617145","host":"s3://npm-registry-packages"}},"15.0.0-canary.bac992a95.0":{"name":"@material/button","version":"15.0.0-canary.bac992a95.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"47c3d280dd717dc7b3bae51dc21e86fbc3c294d3","tarball":"https://registry.npmjs.org/@material/button/-/button-15.0.0-canary.bac992a95.0.tgz","fileCount":40,"integrity":"sha512-8xoRWwnCZjuyBQMLfWbiWHJz9Ed7UXhLOBMij3avJS1kujwRbaudLTwu0P+2O33tzmMfXGoJgb1LRzF1ltdmwQ==","signatures":[{"sig":"MEUCIA8gVxCDjPmcI4WR5fcrn0FPhsGCxq+SpsqgrWU+OTEfAiEAg5xgcTCfpOECGWBb1+Lp9iiVApyvYNvpA0kgVPj+htk=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":640390,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjEFn0ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmp7OA//e3PrXssrWVesiSz9EdbouWrJEZ3PBgu9ghpi6iBJ2bBOH7Eb\r\njX/MpdCdbUA6cwOAaNC1kff8iOxJK7BuISbwHTyAzw8DyygBs/jbvRNPjxw+\r\nv/xB+GIroFSZAul/XbncgPzaQXMTLSzWWtjMa1jGF+q26rCibrBvCBvf3nNq\r\npCYWFRZaTAYvuUGEcJvF7hVJvUADblb28UcL2l0XT5A4D/XJOBE5sKgiBFwK\r\n7IQb2/I9rHe9u/ZI2ygI7vshCyfs4FSgnziRVYg98X8utOkuPuiOhWsM0W7E\r\nUDCzmCW3GxV5Bjkcq4v/ICkM0IKBvF9RsRri1/tCytrYcAyNdh+kgxhv1MdV\r\nQl3hjHsqB/XQD7OCkaevTWIad/8XorrlDWR/gXMtT2ZsrwxpsIT+GMgtUZGA\r\nneNjObjJM47/oNZIR1mc7XMg9zXsyvkPLL3QSetUHmgOt8iEhnzx+4VxQuK6\r\n5VvEFYnjlEdkmdDd32ZDzZ5AM86cv31jwpCY3t2dFDGCc9az5kvGNhSpzF+p\r\nwTAySoLNqEdJWGCQ4X2COYGVDD3Vv0sfGA1LjAM/zp5Hz9NHkrCuKXioqwD0\r\nT2VHdfo0wnf2kLNMgfqWxEe+fAyWV2XDuwy0uv9MRqaXygm4oYl5pAP51XJD\r\nNeloZCvI3WVOE67XOCYsskrYONbsJ7p5d2w=\r\n=j55H\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button/styles\";\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nThe `mdc-button__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused button.\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.**\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n**Note: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.**\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button--icon-leading` | Optional. Styles a button with a leading icon.\n`mdc-button--icon-trailing` | Optional. Styles a button with a trailing icon.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n`mdc-button__focus-ring` | Recommended. Indicates the element which shows the high contrast mode focus ring styling.\n\n**Note: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommend always including it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color-or-map)` | If a color is passed, sets the default container fill color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`icon-color($color-or-map)` | If a color is passed, sets the default icon color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`ink-color($color-or-map)` | If a color is passed, sets the default ink color to the given color, and sets the icon color to the given color unless `icon-color` is also used. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color-or-map)` | If a color is passed, sets the default outline color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"The Material Components for the web 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/density":"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/button_15.0.0-canary.bac992a95.0_1662015987867_0.2366407757521527","host":"s3://npm-registry-packages"}},"15.0.0-canary.d25f3404c.0":{"name":"@material/button","version":"15.0.0-canary.d25f3404c.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"e7d328a82b81f6e2ae75cba696e310b0260954f2","tarball":"https://registry.npmjs.org/@material/button/-/button-15.0.0-canary.d25f3404c.0.tgz","fileCount":40,"integrity":"sha512-WlJY7XoxVp5HXEBMLQCl3xAAf9MP0T9z1XqQ+PkVWmGt7lkt2MXBg9J1nAaKLmBFRFJ1/8At/v3jTZRK4VoViw==","signatures":[{"sig":"MEUCIDxi3CmOjGFs9kbCOlKjYEsg6D+2nZHxFZHp0cJdRXtoAiEArJB7UXG98q8F8CGCZ/yNwuETVOX0pVaJpGGeiFyrzkg=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":640390,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjEH86ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqYSQ//bEuiRPdoA0i/WFVCgl+OrKHM59/WUIoxHJMNqRAwYiq6QA/j\r\nZ24CrmWgZ/lD1/YFekptoQTEnK8/eGwrkzZirwugkm+aiCd2IAN/4RwYyNXf\r\nTSYheA1nIk6fep6UQfbKFxbbSpvWRYdv/o+oCtEv7co0mR+S26fpRd5pk0PH\r\nRa3PA+RbwYFz9ICb20/4V4IX0NnRLpu9JHBUFtzkdCTL2ZqreT2K8f3eTZlp\r\nSRAyG/Am0AV7ZZ1jl/eYPVXYg52xe50d4UvqbMu5mfAJzDXshfmjNSh7P6WU\r\nihByMNGOz4sVmeqsu/ZyCOehlcOhUSWhlgMhOa5tEcJs4MHXfbUQrb2hmQyu\r\nk3JXPh4MN947iu7M9f9uKQHDCXzoTC18zLOrG33SuxQfFKZyn/MxHW2oBNgM\r\nrsQmwbTGKNSn4qHgY1hA7PFYx7ilpeSDcBboSz+mfpj2JFbCxEG5M+ff5CgW\r\nAdKvpiKta7q+NjXgMIQxPWb8ArOt88C2BRds4XFtuEwm+7Y00D5jSYqhVk4w\r\nSnIh31UEjLeY8a/PnRgx+oi/dmSQMevB/XlSd4EpvVVLqjo2wwkcKEvp8szn\r\nB8n9xIjjpugupgEimAstXOwVfzWhQj0GfUfOdN9oQT68L+ba3No8v2OfXj5c\r\nKAW/v3Qo0pUtFKWx5OJtWBQdeoDvgw8Ba3o=\r\n=s6oA\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button/styles\";\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nThe `mdc-button__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused button.\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.**\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n**Note: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.**\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button--icon-leading` | Optional. Styles a button with a leading icon.\n`mdc-button--icon-trailing` | Optional. Styles a button with a trailing icon.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n`mdc-button__focus-ring` | Recommended. Indicates the element which shows the high contrast mode focus ring styling.\n\n**Note: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommend always including it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color-or-map)` | If a color is passed, sets the default container fill color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`icon-color($color-or-map)` | If a color is passed, sets the default icon color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`ink-color($color-or-map)` | If a color is passed, sets the default ink color to the given color, and sets the icon color to the given color unless `icon-color` is also used. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color-or-map)` | If a color is passed, sets the default outline color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"The Material Components for the web 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/density":"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/button_15.0.0-canary.d25f3404c.0_1662025530090_0.8741215316119024","host":"s3://npm-registry-packages"}},"15.0.0-canary.920d8a79e.0":{"name":"@material/button","version":"15.0.0-canary.920d8a79e.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"232e83f000f314c199512934de5c8f865568a383","tarball":"https://registry.npmjs.org/@material/button/-/button-15.0.0-canary.920d8a79e.0.tgz","fileCount":40,"integrity":"sha512-gBOrWkwCeGNjryKt/OsYxlrfHuCBBwvJbqTYYlMM/OL+8ZPG/F6/Fac/CCBjPqh2jkKUuCx+KfB4IptOY50jmQ==","signatures":[{"sig":"MEUCIH49SKm0aT6Lh9pxjudjxxMmD6oMbAM1eoi0ZJcyDcg4AiEAuOqgysMZ2ILlcpC3WIfh4nRrFf3G0L8R/qlgeQvKn4E=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":640390,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjERRXACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmodhRAAnA/sJTHg7wkIhTJc/nsL3JDEJJrqjEXIe/YWdTvHY/1wn8jx\r\nsoZrRVX36kWlyY40uCBB4ZCHnlbs/wmZglAqucz94K/Ls1/xOUXGqTA3L2SD\r\nMf6BHJiOeY353tfw4Xq4BhXLCCKyCBMDpAwvnp7H6wdm7E7oXp9jN+UMYi34\r\np0NCmrXz8yxQa6du+nuxmTxkJ428VT5BE+WsEUNaMde4IP3YReN+BJhP4+w5\r\nDzBE7+3Lp1aWkDOaDPI74oQFXrPUVy3d97NIq2tOoZw+oQ889Cd2wDO0u5N3\r\nyhrsAUmzoaJZqEK5T5jALCo6QziAPz/5mDu+12lxcY45T2oufT8reE5PlX53\r\naOhMrly0dhgqZ5n6bCZlISBBWbc0/kvGfEPWzzcdB/YusrDmKur/pHaPN031\r\nE+ERtQYdZZwOjUxo3fbipSHvP8Lv1YufmeImh1ZGDDkZvVFNZDWQsQMiVO4w\r\nOubV1o+jrXkMXfEyMda/tm2tEH4UlUmfFj6xseZjcDskuYCduETGjWgTKLCT\r\nuKTL8FCZW8rZY+lvK1sklxwd2uZl3F5VBfI3OtWCXZ+HS8dcskS0dbyilLOO\r\nbURRFLcezgaFzQsjLALC3UnfRcZ7vsjAuMN5a/242/kl/ne7o7N8PLcTq5T9\r\n8T035dX5rJM5NqsKoe7eMmcf3/JRqixErMI=\r\n=76pp\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button/styles\";\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nThe `mdc-button__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused button.\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.**\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n**Note: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.**\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button--icon-leading` | Optional. Styles a button with a leading icon.\n`mdc-button--icon-trailing` | Optional. Styles a button with a trailing icon.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n`mdc-button__focus-ring` | Recommended. Indicates the element which shows the high contrast mode focus ring styling.\n\n**Note: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommend always including it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color-or-map)` | If a color is passed, sets the default container fill color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`icon-color($color-or-map)` | If a color is passed, sets the default icon color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`ink-color($color-or-map)` | If a color is passed, sets the default ink color to the given color, and sets the icon color to the given color unless `icon-color` is also used. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color-or-map)` | If a color is passed, sets the default outline color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"The Material Components for the web 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/density":"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/button_15.0.0-canary.920d8a79e.0_1662063703217_0.815800769138392","host":"s3://npm-registry-packages"}},"15.0.0-canary.c363f267b.0":{"name":"@material/button","version":"15.0.0-canary.c363f267b.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"defb8ce3c698347909fa7d7f5647980ff500c486","tarball":"https://registry.npmjs.org/@material/button/-/button-15.0.0-canary.c363f267b.0.tgz","fileCount":40,"integrity":"sha512-IoYsa0DJ9lhbYcTWd7wrEHtpkXBT8snzHGGkUM9sapA5RHckBlHDOFVFyEEeGBDU0YnGP+jGt+dDF+8zOd+lzw==","signatures":[{"sig":"MEQCIHfA4ioyKdZNF+ZLDS5s12qatTq7jCVmVtZfroPVIq6uAiApoIj8DT21EUMkaV8phfx7F+LmiO/TxXYh8/WXm/325g==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":640390,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjESHBACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmongQ/+NqWNOXSndNz2HfsnONmTDQL4plzg005tzfK1YuWSLXRj72tk\r\n7HzEfxIkEI5IEwNagpbTPauK4UWg3iAna6eeq5MYaw9WVdbKugxpbGWJRELT\r\nbEWraN10KjK6IN/3TIWOs81IMoPlCdmhUwMHNZZbrVFP+aDMTuKNpaDNsLrX\r\nuKhehJ+Gs6um8G/c6/o7vS3L6khXg/yfyozOXSWOaNsoGHA72smRbSLz4gHK\r\nZjMb0rHBUmWASLGLjs1q9IL4AbUL/XPSgeBnWv/X+wtP9aqEN+XokbjvF1LY\r\ntFEphCtAW6ySn/aTUI/OGwL1uuALsFLGeChbd3NCIpvdKirN+Bn3YWnPodPd\r\nMjvJ/Kv9l184s3WpVyiECVvfvuYnsbFb37/T4vqp2oaWsj3z4zif9d+xpKp8\r\nYKjVgIJa87sGL/cSEUdx9TclrRAcLleTeojO6mqTRA3LMo1NEGue2/nXMtVq\r\n9IiThanRXG0njULslhVNnAvKenWck3rSqmgTc3IuDbFKjBM7JXWaZwYEg5sR\r\nX/cK2wfOEUTUBL8hjVgQZIWaEYauP91UaWRZ4hSi0zF7bbNtfp19gEoCsKiW\r\nloe9kk6dPgyaPvFmIbE/mThYtO5kSmkE6xKNyfhjU1DhGLJlOalbmQWkvitU\r\nNqF27H7cAfiODqJ6Vsv10xW2VQdgunQO4z0=\r\n=cLHg\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button/styles\";\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nThe `mdc-button__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused button.\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.**\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n**Note: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.**\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button--icon-leading` | Optional. Styles a button with a leading icon.\n`mdc-button--icon-trailing` | Optional. Styles a button with a trailing icon.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n`mdc-button__focus-ring` | Recommended. Indicates the element which shows the high contrast mode focus ring styling.\n\n**Note: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommend always including it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color-or-map)` | If a color is passed, sets the default container fill color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`icon-color($color-or-map)` | If a color is passed, sets the default icon color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`ink-color($color-or-map)` | If a color is passed, sets the default ink color to the given color, and sets the icon color to the given color unless `icon-color` is also used. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color-or-map)` | If a color is passed, sets the default outline color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"The Material Components for the web 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/density":"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/button_15.0.0-canary.c363f267b.0_1662067137556_0.5647595093982949","host":"s3://npm-registry-packages"}},"15.0.0-canary.a4eb4937a.0":{"name":"@material/button","version":"15.0.0-canary.a4eb4937a.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"137033361e97cf82b1947cb0ef8aefef3d55161f","tarball":"https://registry.npmjs.org/@material/button/-/button-15.0.0-canary.a4eb4937a.0.tgz","fileCount":40,"integrity":"sha512-UlaEHKkmoZhcBEzw54pF4UHJzr6G5uDY+ONuzdR8EOeUNR55CgP6ll325wA+k3BF8kRXTQCUYU+TUrg8qwNKxQ==","signatures":[{"sig":"MEUCIQCV/nrJQvnZ657tL5IdSijxJNc/GEfuLmQAgXMjIS0bZgIgVaouP8f+d6wU1GK/O/uH7yEr7s+akibCcdJjhLg/jHQ=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":640390,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjF49vACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqoCA/+LDcavlEdRWybjik+Odd6HN+cPgPHmVUCHWiKU72uZ9bCcyun\r\nteY6+yzkNQkegRG/ZhKtDEkPIP4JRYf1JNPlzOO4P45EfMO5D+Wx83z9PTPy\r\nS+pena806O8UPffWVdVnbw8DIy8g4rXBreZ4bedp3wqN4e7/eRAQD/TuRr2S\r\n0bEUcHcDgihjSbXWChiaUzt5Z3lO5FI0D5mh23H8h6jsSTh3B0x/29fpmN7C\r\n3+sLgHErGQ3QaTFwxNMkY4c0GuYdItKKy1OXA1lnBUFWPvOHWDxoXPk+2J3p\r\nF305iidnAwuDOuJLSMidtHRjFcNaCAmixcorSYtJ5O9Sj6SC3BMuPx9DnMqL\r\nsGAXhlyBPYHM3OZ/pG8KJv3oanY+CKi0yVm3DkAz/zQjHpRu8IXU2HdK5w/7\r\nUijGokchTwcaoD3u85cxxLu3MSq1TKiBZ9aD0MujG6QQgmoYkJfZ6MiWBC6+\r\ng0pmDEpKlSfgigBY6NaRMoJ2JOQo1lrol6WEiVmToMiOypT+6RMnKfV65SZ5\r\nKL/Lc4ft55lI9eA21ZZ2nfjkunhFp5HSYkib7v2dOkEPUjNgx1wmsNs4A0A7\r\n9Ky68//soD+MhfLqX+m7S91uwpdkCn+/aNcA3jcDLDeFT23Lqb/4H9yjwPAG\r\nuoCgb29fBol888Qpte2gfpjbon7nfpiBiDU=\r\n=Bd7s\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button/styles\";\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nThe `mdc-button__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused button.\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.**\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n**Note: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.**\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button--icon-leading` | Optional. Styles a button with a leading icon.\n`mdc-button--icon-trailing` | Optional. Styles a button with a trailing icon.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n`mdc-button__focus-ring` | Recommended. Indicates the element which shows the high contrast mode focus ring styling.\n\n**Note: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommend always including it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color-or-map)` | If a color is passed, sets the default container fill color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`icon-color($color-or-map)` | If a color is passed, sets the default icon color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`ink-color($color-or-map)` | If a color is passed, sets the default ink color to the given color, and sets the icon color to the given color unless `icon-color` is also used. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color-or-map)` | If a color is passed, sets the default outline color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"The Material Components for the web 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/density":"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/button_15.0.0-canary.a4eb4937a.0_1662488430770_0.23613713650663626","host":"s3://npm-registry-packages"}},"15.0.0-canary.4299717da.0":{"name":"@material/button","version":"15.0.0-canary.4299717da.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"a82e13d66c53be7f9003ba39dd1923d770f3706c","tarball":"https://registry.npmjs.org/@material/button/-/button-15.0.0-canary.4299717da.0.tgz","fileCount":40,"integrity":"sha512-+3lOWIryj9VuVW1GhJhbx7uP4LCqfXqLzNPuBMYnWE0bi8mDs5XcEL6mbLnBTL0V6F4YMvCSdVQryVom2Yl4Yg==","signatures":[{"sig":"MEQCIG0gWGPGQIPyEY8q8VujlSHPgCCSMzkptPEcZjrZ5f0iAiA27pzI+va5/ClQK/7DeII0ISorMrB8E+hwGT/qwfUfnQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":640494,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjGMPcACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrwNQ/9HkNg7iRNcayCae/5z4VfBmB6sTLp1OC/o0HldfJ3lI/sdJf9\r\nuzyEMEgiLQLCw60SoWSEKeWrIVwHr6k0H6e0T2juVwQ8LQwPWa8UTEzSs297\r\nXwt2x8AxaKJnJgo5wA8znMak1PultJmp4PrYB/f0cwXsbrOeNoBwfhRW5ii6\r\nYKB4e5QMCpmqbqHGzqCO5zbXgPrKhydQc57d++WrHNJ+4XXjgNYdmXtUgfBe\r\nsBpgEMSUBLY/Wu72qvdjzHZLjeLH+uFLSTxexvRg9jiO/7ta8eQcmVyKFdD/\r\nCGNWgnCIRlcvj4m2OFEXiRb/e2Ef+NoMnKo6HTZgIIStfFIwYz8NfWZiSWQR\r\naCv19ScHwQ3vALrwhk0unmsH/XjPxedby5ehi7ua4vpNw3Z2j3k/w4mYnmV2\r\n3iBE95VAEOGmgHF3kbyme9ToJ7dgLK1OswBqxYU33TVMcjvgAfPc4fYH6T1/\r\n+u4o62gau36+EFLFSmoUIlM3QANdln/b4+ZKxsabvqm621h061wRiuDPxB7S\r\nmD3V0WjLC3euuK87TuBcBrb/1w9p385frtn2f6zFFqdRia4vAoAnCPagRRge\r\nstet3NyyU1k5itZfayDixamVTFjhc6CtHOBwewJDuOOqYlZo6PAkRS0GLSjm\r\nS4HiM0K5SEJ0PgFz+W5X/1g3i7PDtSd/N4A=\r\n=qAJQ\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button/styles\";\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nThe `mdc-button__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused button.\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.**\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n**Note: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.**\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button--icon-leading` | Optional. Styles a button with a leading icon.\n`mdc-button--icon-trailing` | Optional. Styles a button with a trailing icon.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n`mdc-button__focus-ring` | Recommended. Indicates the element which shows the high contrast mode focus ring styling.\n\n**Note: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommend always including it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color-or-map)` | If a color is passed, sets the default container fill color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`icon-color($color-or-map)` | If a color is passed, sets the default icon color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`ink-color($color-or-map)` | If a color is passed, sets the default ink color to the given color, and sets the icon color to the given color unless `icon-color` is also used. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color-or-map)` | If a color is passed, sets the default outline color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"The Material Components for the web 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/density":"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/button_15.0.0-canary.4299717da.0_1662567387977_0.024583281501654675","host":"s3://npm-registry-packages"}},"15.0.0-canary.fa7d8d44b.0":{"name":"@material/button","version":"15.0.0-canary.fa7d8d44b.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"341644e1161555c16242b9874c77725dd5fdd577","tarball":"https://registry.npmjs.org/@material/button/-/button-15.0.0-canary.fa7d8d44b.0.tgz","fileCount":40,"integrity":"sha512-DiKJyCt8dvPWRyoxskL5o7t3CCbM2C2DcEZeoVFcEj7PtWHHVByQ0b65Y71qKftmUxkclibgkYA3YT7yZITKKA==","signatures":[{"sig":"MEUCIQDIC/Mm1Gc2zlSsS/6qT+49ZpaLCHs3eciW0DuKY2fxFAIgd+EvAGPbNmp2wUsB5B9pobZLq+zamNphdG2ON4P7LwY=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":640494,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjGO7LACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqB2RAAh7hpLxLnZwSSQ+EI2K1UZAdGXfbDvc693bMsyIHojRFlXXeX\r\nrfYPdN9ROzxdyW19jE2zNVtvXdzk1XiZxxLun3alPkP7muyj5qIv2XMvtSed\r\nCAcqEEIvAy1xhldV5y/jG6iyhykCijgiIAuanuJ6L6FyHOAzjYac7Ya+wJKb\r\n3vM/PpMV+CZpFrJj0kgJ7XmF3j/S5JeC4b3HliMnM9ehvv50nKRfBIz4H3im\r\ng81STqZaUPcrRckusB+YAou9xR6QRRxaUsJoeJ9g2N0j5F/5Ju0yEGv4mWqc\r\nUx6TH2fkPllh6gZfZg70nPKcVdQwQ+Yy+oc6yk8HqctnOGobJpSucNwm/gS4\r\n6ZmW1nynEo4rJbwXi55prSrGYOlQyx5ntoaiJGcCrlltOypscWySQPx5TJB5\r\nT1jsnjwU8J1oUQszPVQdWsxWXMv9DimBTfA0/n6NH9KZcfDgBoTD8JsO35zu\r\n4Q23r0p1eyyV5HoQRRIjlxhF7A/SOskyAR4mAKi1fLFtj0Iilcpd4QZL7nTF\r\nTfJcIaG+k+3NRjwD2kbMhhfRhyJxDqFpYaOsMY5EVsDrkIoKjlxZ/ALeo53n\r\nL886VzJJbaQ7zs75Xp1g6LTThLd3H0t3OQFaxmYxdTcie0t2Bhp+qV8oU0oM\r\nSW8Aj22RNzo38cZkzWn/RBN/iY0oimbn93I=\r\n=I1DE\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button/styles\";\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nThe `mdc-button__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused button.\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.**\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n**Note: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.**\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button--icon-leading` | Optional. Styles a button with a leading icon.\n`mdc-button--icon-trailing` | Optional. Styles a button with a trailing icon.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n`mdc-button__focus-ring` | Recommended. Indicates the element which shows the high contrast mode focus ring styling.\n\n**Note: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommend always including it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color-or-map)` | If a color is passed, sets the default container fill color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`icon-color($color-or-map)` | If a color is passed, sets the default icon color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`ink-color($color-or-map)` | If a color is passed, sets the default ink color to the given color, and sets the icon color to the given color unless `icon-color` is also used. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color-or-map)` | If a color is passed, sets the default outline color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"The Material Components for the web 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/density":"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/button_15.0.0-canary.fa7d8d44b.0_1662578379127_0.7070099911364454","host":"s3://npm-registry-packages"}},"15.0.0-canary.a40e3c768.0":{"name":"@material/button","version":"15.0.0-canary.a40e3c768.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"c6d7027121604bf48a833ad98f78973c867bd5ef","tarball":"https://registry.npmjs.org/@material/button/-/button-15.0.0-canary.a40e3c768.0.tgz","fileCount":40,"integrity":"sha512-ghRtJAsz1iFaO/NMrr1pPHbr8N5PkNzIFl9nMISpoxARL3FpwAmTjYQud81vWqS3m+QrBQKh5ULumADQmt4mAQ==","signatures":[{"sig":"MEUCIFKWQEN9z313Klejxef/7i9aN93SFkqi9LTHBG0/XyxMAiEAkJ0szTcpTJvOhx0vRHOTESkbeUDkGMSkRtZ0YkOnLgA=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":640494,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjG5xUACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoEjg/+NsbPwU4VXGug0fexCf+yYwWAs7asobMGmvMVPlX3jbaEGlIX\r\nFdeRhs4EfphinxPVR9siGMtQPf6GChlZH1Ndl6d4OxpitVA2/ZXyDfQD9Ykk\r\nJk0WyDhL0T3PE6j61jUMf442QVW3ob2UowJ1w+iBsjMd2AkvPmwkF2kjypRo\r\nlSUchKYN/F+4YLz2zNvZJnr0xzuHs/4NLXnxemYRMnf7SN1ywea801cQMRDH\r\nEDXhZrk340BihPYtVFtGnvGTTis0bUm+tILq7wyh3Xt2BjX+Rt6hb/BsnxY3\r\nCj6mml0FjsBSB8h93sbcK10paf2QHyoeVM9w2nlHPbCGh5siGOvbQMBUSH4S\r\nu25YJnbwDZERJXCu3nCDIe3yJS6erYu6EpTp+CiAIxBEd3EjQ35SqR/E4st+\r\ngEmnf/R7q6XlcEZvkclrGMljFF4lzyqF5RiN1426rz7hane+54xtT+tZ+glz\r\nmsGdtYCFpan6zVtIcaWh6GqOvOh7JRiTAsOobwlQC5GzXRQMJ0F1YS0Tp5dZ\r\nAnPbeXf/v/inCmoxnVmPag2iK8wnN0+dnOpSfHSJjYD+e8j4CZ/ErED2H+g3\r\naLHaPaGf7i8myiH4AoIqnYCuduUx5pP40MvOPfavo/8+qfqXB3q7Vy3NHoHt\r\nEKAK9Mf65Y33QXpS7Dfnb54KkC7l7LglyMo=\r\n=8mbo\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button/styles\";\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nThe `mdc-button__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused button.\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.**\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n**Note: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.**\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button--icon-leading` | Optional. Styles a button with a leading icon.\n`mdc-button--icon-trailing` | Optional. Styles a button with a trailing icon.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n`mdc-button__focus-ring` | Recommended. Indicates the element which shows the high contrast mode focus ring styling.\n\n**Note: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommend always including it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color-or-map)` | If a color is passed, sets the default container fill color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`icon-color($color-or-map)` | If a color is passed, sets the default icon color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`ink-color($color-or-map)` | If a color is passed, sets the default ink color to the given color, and sets the icon color to the given color unless `icon-color` is also used. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color-or-map)` | If a color is passed, sets the default outline color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"The Material Components for the web 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/density":"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/button_15.0.0-canary.a40e3c768.0_1662753875814_0.8882124145320931","host":"s3://npm-registry-packages"}},"15.0.0-canary.18cdc9a00.0":{"name":"@material/button","version":"15.0.0-canary.18cdc9a00.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"0c0d3c6eaa0088032c3eebb6f9c7b7c84f7fd86b","tarball":"https://registry.npmjs.org/@material/button/-/button-15.0.0-canary.18cdc9a00.0.tgz","fileCount":40,"integrity":"sha512-9G6bWZnOvzfgaQNx/o3s65L9+g4JnLjFo5ojSIZwR+AZktYy4DHzJHbLrevOg0kZkaJWwmphdwLOtddlHHx8xg==","signatures":[{"sig":"MEUCIQDehFQoVIcTHQwUhCx9JSsfgAquF7TwBHl8RHv9pr6KWwIgGpyl50GCdUGLvmb0xT+alhlj4GoeDuS/V1rYML584i8=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":640494,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjH56tACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmpvww/7BF3NspZHfU78Ll/5tzBhYtMzCUEdNm3A6V/TPMvjq/o3wP7F\r\nWnO3LL/81xpZNlfXpdVPGjXiBp2W89HJANzxvvdMt9YvF/y872kyhYf60MGR\r\nJG6e2cA8vA22wl7kWxvucoIRMCARc0QsEFQ2jFvt7lfEZzyfE41ajfWFHXMK\r\nNn7DaSqcfLc2ReG28bWmPXj4g4I41+hs18Oyd/7Rgy57Bc8h56kTYSWlYXoe\r\nBwvm99zHXU7vggVjKfhnHms+DIj3lbvPMqwtSSVUsMOO6acVAmp57L7fqW28\r\nAKV5NTBpAAOShYJx0dP2vL7Ru7CQvyJMjCRNBp+1GRJcMtBcYJWrfa+dnQwI\r\nVsF3XzTN4RWGaqModJgwcymonXyK1E/Z/QJfqnnqnSeP73uQCtjSkQ64ZVv+\r\n4sSxPu5j4ohHejEwBOaqsQ4OJAm9ee8Q/LZB2eHaL1hxd9JUt6cKl0wPCamJ\r\n9F+mrSbPXeed0LrB/Ji2PW8f1rHB1AxJYyM0bcelBckjrP0rDmy0MK3BD/au\r\neoXU/gJoNQLq08OcPcGlbqweUOJFZY8ymySl0h7UL4YlQsB4paAx3OM1iTZ1\r\nQhwxxSIWEXcngCGANtkmuQUj8rtbLL1mvzvTn7qAFPBC8HckV6+jWzxzFOvL\r\ne7LV1PEQ4tpOFty+zy4OD/ZD2Wc6RzIfT5g=\r\n=vUmh\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button/styles\";\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nThe `mdc-button__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused button.\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.**\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n**Note: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.**\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button--icon-leading` | Optional. Styles a button with a leading icon.\n`mdc-button--icon-trailing` | Optional. Styles a button with a trailing icon.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n`mdc-button__focus-ring` | Recommended. Indicates the element which shows the high contrast mode focus ring styling.\n\n**Note: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommend always including it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color-or-map)` | If a color is passed, sets the default container fill color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`icon-color($color-or-map)` | If a color is passed, sets the default icon color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`ink-color($color-or-map)` | If a color is passed, sets the default ink color to the given color, and sets the icon color to the given color unless `icon-color` is also used. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color-or-map)` | If a color is passed, sets the default outline color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"The Material Components for the web 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/density":"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/button_15.0.0-canary.18cdc9a00.0_1663016621666_0.6250362381255632","host":"s3://npm-registry-packages"}},"15.0.0-canary.7ab3cd3c8.0":{"name":"@material/button","version":"15.0.0-canary.7ab3cd3c8.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"48dd8d2bc3ae5c7d98549de34af92a2f64d53c5a","tarball":"https://registry.npmjs.org/@material/button/-/button-15.0.0-canary.7ab3cd3c8.0.tgz","fileCount":40,"integrity":"sha512-Zn+9RVd74M3LTdROQLUk2lC5KVE1TKiId6mWtiXseMtngVtCE+5UKUuDLOXHlknMI+lRl2dgwF86KAdyqs3bwA==","signatures":[{"sig":"MEUCIAiHUFyaEFX3QeXoHjd8WiW1rjWHD7mSAK1UZ776VCdLAiEAwdAUn2OiZ2S8Jiwo7vzrq0/aC2aRBtTTk7T+OoRSJ+Q=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":640494,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjIQa5ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrB1A/9EzSJTWUP/1Wp90i8/gzhPeXKtMMqd527iI1cZ7uYil4ut0NL\r\nHDvV6xBp0KviDHuCwFjxUudkqBe4DmrSCDTVUK6fXtCbpBWiWDv0irXWy/r1\r\nz1prqGC6fw3yNZc5bURfLQLjIrf0xVLgpMwlmlt0qjZn9tPbm4sH4T5W1psE\r\nc679EmJNe+B/5ANVbFRA1tkysiZLAvz/3BO07D6PVyV+4wOPn/xcAju2CWON\r\nGSnHTOrJJE6hsI1ZDI/1dn9mVwXpvRFptazTS+dd+j2gwalhXVfzEr+GSAnm\r\nZWfqFqSm4ZvPhYcjyW8RZolSJPF4FADeFs/DmSr8tHKMZvsIBP5cuX9ioqxV\r\nXDTxdPnLeM2mAMQ8lmmAfkJkb7iNvRnFjmVzwBtIntvBYYROzoOYrTpdZn+U\r\nDqO6u8e0gwnZbpqlViT6D0BwddkREAWhuKDVi3X6h1lJO7yQiCW9v5f73z7f\r\nLRw3Bq0Yqq/moZzCFSxhPmMt8arBFcmfmjQDEmuF777Ky+pq8dy5XuQeelAX\r\nlpWIo8wG7R3Wv2hlWyw8BvAzQp8gSAFEOXelLELjzJuP0ZXTnfkY3t6H1IFf\r\nEFDSibqxBe1rcmvfudZGHjeAoNd/7nwzR4BkJGX+ntmwHCltZV02Y9q67XqJ\r\n9mrrr2bJctyZbG63Swj9aPebbpnPI1hMmdE=\r\n=AyDw\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button/styles\";\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nThe `mdc-button__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused button.\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.**\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n**Note: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.**\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button--icon-leading` | Optional. Styles a button with a leading icon.\n`mdc-button--icon-trailing` | Optional. Styles a button with a trailing icon.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n`mdc-button__focus-ring` | Recommended. Indicates the element which shows the high contrast mode focus ring styling.\n\n**Note: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommend always including it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color-or-map)` | If a color is passed, sets the default container fill color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`icon-color($color-or-map)` | If a color is passed, sets the default icon color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`ink-color($color-or-map)` | If a color is passed, sets the default ink color to the given color, and sets the icon color to the given color unless `icon-color` is also used. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color-or-map)` | If a color is passed, sets the default outline color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"The Material Components for the web 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/density":"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/button_15.0.0-canary.7ab3cd3c8.0_1663108793142_0.663901224605908","host":"s3://npm-registry-packages"}},"15.0.0-canary.2860d244d.0":{"name":"@material/button","version":"15.0.0-canary.2860d244d.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"55b0448153de51faf43e99ca226c97fb1e210a7d","tarball":"https://registry.npmjs.org/@material/button/-/button-15.0.0-canary.2860d244d.0.tgz","fileCount":40,"integrity":"sha512-TjieBP6LNXS3RnWrvwKUfTMSsJvCLfkYeh2Sjc+TauNIoIhYaBfCMuq8FzMQy11Vnuga2SAcmISVgCeeD4vNJQ==","signatures":[{"sig":"MEQCIG7Z2F4uhUgPIU6rL18AQqYJIEpbSw/u4Y9/WjP/1qJwAiBx7Z3RHWoj5iUg0PJwitqnODru/IBK9TCuF4KYhVq2iQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":642027,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjJP7kACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrFsQ//VALwwkYsrK3VqSnRyjSyzhXSYmC0iEwTn3TogUYxtyHP40H2\r\nm270Vg6fPFhf/eNxK6AFxsJinrSa2K3VnkvVPlukNyRKCwpiggBQAd1ufoGX\r\nTm+xOibv0pciV0V4Ak9gUGIIG/TVl1zHA3IrxDLgcNGvy0GpIur+Q3Q9uVHY\r\nHOVoRzWmuiQYtOe3tQ6TXZ00SCSxjqJIN0LHgBwbpU62glb4Obb31XB4hI6h\r\nwGEFcSGFBNJpnD1hlAJilbZ5CzjsM+MhpTULCPubpG1dj8BwZTXfEc55+AXA\r\nhmlrcn3DM6/Lu7PHGFF3sp7pxffJveiMXPt5/6+VAqW6xXDb1It941W96lrU\r\nC8rwMVjgzrUYy8KUDQ4ornZmpw+7QPVFBqWgc4wDD0gbO/y+m7KJv2hd3fWM\r\nHTtv8w6q3NqZrslZuO85+qqFzmeJTamL/G3goZG/eZMNHZz7Hn0mOs+Z9vZw\r\nSXoz8EI5S1pfq1+jTsj2SOOJXSlz300KWhcqQnDEncufsPqLzVfGugna3c/j\r\nyIbdFOtvDoRvhd91ntwMugYMRGmIdrPAFi93r5B189b4DQGjxRyktx0Fug6b\r\n48VzVKVvkmAuhUsopoxQm3dRt+0RsstaT9cLLHBryj9WSQYxVq2WdbDHPmZE\r\nh2Ij1NjhJNff6Lm2+B3nDJXDb+LPBHncYPo=\r\n=OJ47\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button/styles\";\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nThe `mdc-button__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused button.\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.**\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n**Note: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.**\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button--icon-leading` | Optional. Styles a button with a leading icon.\n`mdc-button--icon-trailing` | Optional. Styles a button with a trailing icon.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n`mdc-button__focus-ring` | Recommended. Indicates the element which shows the high contrast mode focus ring styling.\n\n**Note: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommend always including it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color-or-map)` | If a color is passed, sets the default container fill color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`icon-color($color-or-map)` | If a color is passed, sets the default icon color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`ink-color($color-or-map)` | If a color is passed, sets the default ink color to the given color, and sets the icon color to the given color unless `icon-color` is also used. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color-or-map)` | If a color is passed, sets the default outline color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"The Material Components for the web 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/density":"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/button_15.0.0-canary.2860d244d.0_1663368932613_0.07434174713666075","host":"s3://npm-registry-packages"}},"15.0.0-canary.e8726533c.0":{"name":"@material/button","version":"15.0.0-canary.e8726533c.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"0c3096db692dbd1208958da9bc51fc659e2740ae","tarball":"https://registry.npmjs.org/@material/button/-/button-15.0.0-canary.e8726533c.0.tgz","fileCount":40,"integrity":"sha512-oSCw02pmAvH425IM8X9ffHfXX3eVrc19eAIku3tZKBeoNP235b12Y2lC0UiDAHtSkiuy4YoqQDBP/PtiWNHPjQ==","signatures":[{"sig":"MEQCIG5R/KPhtUJ2CKAOKBqgR/8BEqkL0HDSsylNUoGNA/PkAiA6PMXLNygnx4NHnIf/I2K92fUOhoVtgdLXS1B0qlYdOg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":642027,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjKiAQACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmo08A//cNWXJ5dHxr4lNGhFbl3TfjIn34l+KWeXp8IOj+P/VseTznNy\r\nL54d1px2MgICamQHBzhj5bHRYQzIVtHDSlmqKrt8eSJ17RDbValdFR+56Y08\r\ncJ+aL9UPQ8DFs5PqtrUQuqFZah035qjwN4C3YHSGeDrPdJni+z/iy4XIhbQL\r\nPw7xfSQ9KjQWyBu+m327pDt3O69WZIqcmDXXhw3JJSxilKWhLBmH38sQQi/B\r\npCA/1+da+7l0NCsg94zOlUAxgIs4VfjpGRXT7nNE2NxDa987g8l6gMOC4OHL\r\nl4DI+rEqFQb/X7txMJ3MPZyCXmgcZ4+gPGAHGsWb+krGrfcWvlNjkeXfxeOb\r\neAMV80RJB6LmYXl5J++8yUE84ZyCuNS6nKXFNcTiG/QNPweJKtCYvkH79cgo\r\nMyEBu1GByT/4Km5qz1vPe363mTT3W3DLPlIGyeHojAEqBUZ0105mGE5JMPRe\r\nuV8Z35/NkIAjHeWWdrDwmDpWoyYFlyWE08s5x5seO4fWL8kRGB2luAmWhDmK\r\n8DPInV1kV75Gd9rIDxamECmpsarlvYUdwIMSxbpY+PL2eXBPw39zF3F6RofY\r\nEL+fdIywLT1tOvc6LB1ktR+KlSMLL/YxhIlkLz9z1LAyoPtFSaIHA2WyS13n\r\nqCIq6D9ZL9T6z/t3v0ndi7cnOc6UilOHoGc=\r\n=5cpI\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button/styles\";\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nThe `mdc-button__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused button.\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.**\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n**Note: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.**\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button--icon-leading` | Optional. Styles a button with a leading icon.\n`mdc-button--icon-trailing` | Optional. Styles a button with a trailing icon.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n`mdc-button__focus-ring` | Recommended. Indicates the element which shows the high contrast mode focus ring styling.\n\n**Note: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommend always including it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color-or-map)` | If a color is passed, sets the default container fill color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`icon-color($color-or-map)` | If a color is passed, sets the default icon color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`ink-color($color-or-map)` | If a color is passed, sets the default ink color to the given color, and sets the icon color to the given color unless `icon-color` is also used. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color-or-map)` | If a color is passed, sets the default outline color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"The Material Components for the web 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/density":"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/button_15.0.0-canary.e8726533c.0_1663705104147_0.40189007370751706","host":"s3://npm-registry-packages"}},"15.0.0-canary.00d8de0aa.0":{"name":"@material/button","version":"15.0.0-canary.00d8de0aa.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"a5c313112cf8ecd3e739922f216dd1d39041bf8a","tarball":"https://registry.npmjs.org/@material/button/-/button-15.0.0-canary.00d8de0aa.0.tgz","fileCount":40,"integrity":"sha512-lodvT3GK8RX70AM+jlHR4/vuIGPSHsfTwqpjoOU3fTBhxizzzVyrd3TqQGNgjOn8ZEQCs2N3VWngCfe7N8hJpw==","signatures":[{"sig":"MEQCIEOMhmSwaZX7GrWOhuUM4/i3EebfsMIc2+VN5/5mWPuDAiBE6Fd1enhVVlvecL6ul8N7cBXk7D3JYReULfrlU9QdbA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":642027,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjKyvmACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrNsg//Us0PHpFyiNb8pCgQ+/mmsxVbD90dO7vzbOJGEzLD54a04q9g\r\nsmzJ346t1ZIBy3clSByabEAIKOJuLYem3EY7/YJtLnNWP+bg4407a+fUsIbb\r\n24kPG2JkXLKjIfnt/e8jMjsTdh+tWuhxk4X3J1/MqOoPZsNmK5QQcsotxlkT\r\n6Jx0gOhtAEB3MHDQcdtWv/678aDkbdW5L4F7ELgAikE6DvhVf7xMJyeZWN4h\r\nmTW1FyUxg0oSCJoOEk34vVDTEMAlO5ANTDsT2Ydq3rJgFgA53vHwzbsffSYS\r\ny2YvLluqIZxSTNJC1iZPOjsO8QXhmqYBeH+ZMEdeU1p433CzNISWW729CYhA\r\n3/lJmdS5wKnYPpZD4dCkSx1e74n1ClccHiWebgWlWUXw2KUev0ihya71GD58\r\n+GcQaYarEN0NVmn1jvpdPstp8GnPq3Q0mr8ZiH0N36bKZ0zjaMD7aOs6xVU7\r\nQ4aTawDuP05UZbF2osgILz31ua729VTyLzVw615At8feKjrVpUa0pCnwJnBX\r\nLpY8FgVbAqIE7l1jX+xNM4RdkvC3khoVl3IBhStd7cEM7D307atgB4vAD89B\r\nIPbf/lev06W4uUz93pt3czrqIHCCv6242XSyRbOVanJ//Y41dtSi3uvCpW73\r\nZyTpLYm5p6ui3aksk/LkZFE3wEKbalfySdc=\r\n=J8sK\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button/styles\";\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nThe `mdc-button__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused button.\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.**\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n**Note: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.**\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button--icon-leading` | Optional. Styles a button with a leading icon.\n`mdc-button--icon-trailing` | Optional. Styles a button with a trailing icon.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n`mdc-button__focus-ring` | Recommended. Indicates the element which shows the high contrast mode focus ring styling.\n\n**Note: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommend always including it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color-or-map)` | If a color is passed, sets the default container fill color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`icon-color($color-or-map)` | If a color is passed, sets the default icon color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`ink-color($color-or-map)` | If a color is passed, sets the default ink color to the given color, and sets the icon color to the given color unless `icon-color` is also used. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color-or-map)` | If a color is passed, sets the default outline color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"The Material Components for the web 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/density":"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/button_15.0.0-canary.00d8de0aa.0_1663773669908_0.9273729701616651","host":"s3://npm-registry-packages"}},"15.0.0-canary.271aedc30.0":{"name":"@material/button","version":"15.0.0-canary.271aedc30.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"a059561115ee8ba535d5a1b1277ad7c74a5a6be5","tarball":"https://registry.npmjs.org/@material/button/-/button-15.0.0-canary.271aedc30.0.tgz","fileCount":40,"integrity":"sha512-xQJDU385lqVy+Dypk/UZ/jKkYDdu2t8s3k7eWtdftXbWwAfbipKJpvckOTqTqOg1eGePg3ne1NHChndMFSTSow==","signatures":[{"sig":"MEYCIQD/QcMYqL+8bDGrqJO+wghpbBvGjw3BD52Z+/aYDJuCjwIhANYMN2Cvi5B3s3zaS/eS/C1ev69IFhXTk0G7IvohGzHm","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":642027,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjKy+LACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmoj/A//Vryqkt6QTEQxVQuBPCnrffxYYYjymWYHCaXmM/nEgMr5W2aO\r\nAeDDXS1VBIJskzKY1nuCedT5kv9Yc+xvVtG1QQ5yrIcXRoiQeMcPLL+dC1rz\r\nxrPaEkyf1cYiqiPupNwcfRmqPpH/Nu0KUoTO9AummPqeS3KeuTXoR8NnK2K8\r\nHyyMLmmE1lOYqhf+gT3F/4y2h0E1ufcRLfBTznFrPMeq+QuOre1wWXkoJ+M7\r\nRB1z5B1CMDEVfo2Ws1104cfoXkC8qzAivlkXPp2vKtaPeAK8PK0w3XAs4iUO\r\nvuh3mM06aTNy1hM5EcBucJ/18o3ijq5TljFt3sf93f0bVNd9GPshJ4Lx3D1N\r\nhHB3oigYXZgl/4XzpvnwE4QHD5iV95ds+suTv5M4AdZZ00zqZ1K5KREeqVKy\r\nZrkEhEe13swg+aoyuzJxqnTMH1QpaP0E0PzwX6DtfsHDrY8vgPGctIgaTDDw\r\nrpd2dnx/6FM6R4QOeTLgk1imd6b8LQCvnnKQo8FQxHDkFwJLHo9MQLvPALHm\r\njr3VsKLJQ7LiQT65CebQrl2uMXwgfREbpvgLh4OWh3PNoVew9jHfZxYujyn1\r\nA5GrWajZE59qBrsXoPDxuWFGYeGKi7bKaAXSB2wEEc1znzJH1L/9aUOAbO+z\r\ncdNwkjdP5ave3yT65lsn5PT5LdjXOEdpBAI=\r\n=tyli\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button/styles\";\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nThe `mdc-button__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused button.\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.**\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n**Note: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.**\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button--icon-leading` | Optional. Styles a button with a leading icon.\n`mdc-button--icon-trailing` | Optional. Styles a button with a trailing icon.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n`mdc-button__focus-ring` | Recommended. Indicates the element which shows the high contrast mode focus ring styling.\n\n**Note: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommend always including it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color-or-map)` | If a color is passed, sets the default container fill color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`icon-color($color-or-map)` | If a color is passed, sets the default icon color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`ink-color($color-or-map)` | If a color is passed, sets the default ink color to the given color, and sets the icon color to the given color unless `icon-color` is also used. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color-or-map)` | If a color is passed, sets the default outline color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"The Material Components for the web 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/density":"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/button_15.0.0-canary.271aedc30.0_1663774603701_0.9975886441811579","host":"s3://npm-registry-packages"}},"15.0.0-canary.d3344c16f.0":{"name":"@material/button","version":"15.0.0-canary.d3344c16f.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"e0070916dbea5fdb6afc52de07a528c6af108aec","tarball":"https://registry.npmjs.org/@material/button/-/button-15.0.0-canary.d3344c16f.0.tgz","fileCount":40,"integrity":"sha512-l5h030ffUGTIDINbDwYsliHIAj0BqI3wRP+hOsm8Hn/D3CK2HJjNFPJRNvuB0Bl0JsyvTrwCz42eTqZpDBR+mQ==","signatures":[{"sig":"MEYCIQCMmBo2+XgjK09kyhgoE9Vl83qmpYhKUEKoOJUkKDtvNQIhAPJuR9YaYWFkbbcj82CedpfYjwgz32t1q0t6Ws21r/3v","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":642027,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjLCn2ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmp4iQ/+Myc7Va05CnNlE+56i67Vzr3jY3+cnwWguTle8RSFNwqDcdbk\r\ny/eoPmnhdDadLjQSOULEPlvIi8YmIvFOx+eYSEmBOzDVcdJS9/rulyveB1AT\r\nGpALGjb7PdTvVb7t/54aQs60Vu+iR2DBbQAVpz16PokAOPPkBnhwp0GVlc5f\r\ncBZ4l/H4qkG2OeTX1zqodcHpW84metZ/pCyBcrO+EZNi26NDxb8JIZJNQZ3r\r\noI9ZITJPYtNxFT5CHEOHy4JUft/WKdcZJ4u9CpHsleswfgffAprNEyad9ZrC\r\ngrhzNJxEdroOLii69Esv4uZVYWe0e7k2UpZVraSgREVr5Wa+tcET7fcual1L\r\nQfHYuUL1dMGQ+bKd2Z/7zzY+VabqlG1KM+tc8ihkC5znSjHga85QuSsB9yVQ\r\nWnikH87NIgUXoAnsX1ZjqBdVApF63sFT01eMlQyz8tmuqnNedDDWiotb6XM7\r\nlZgcDL4K4dle/K1TGyxqw1UCHWhGVTXryOO2huqoVtZ9k65DD5vCqITif4ib\r\nwtrUGDud8cQherB/gFT0traeu/TiKnl4dp0EknHFdGycpVqnzo4ExNMFNyuV\r\nzp8jw4SJn/8fGjVbs32TSesf7gEG1p4R4lEo7ijLF+pqY26EvVdfHzhEpSRs\r\neiX/DrJ1ICxavnOF8mDdsMij7IJPir30yg8=\r\n=vHvE\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button/styles\";\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nThe `mdc-button__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused button.\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.**\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n**Note: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.**\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button--icon-leading` | Optional. Styles a button with a leading icon.\n`mdc-button--icon-trailing` | Optional. Styles a button with a trailing icon.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n`mdc-button__focus-ring` | Recommended. Indicates the element which shows the high contrast mode focus ring styling.\n\n**Note: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommend always including it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color-or-map)` | If a color is passed, sets the default container fill color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`icon-color($color-or-map)` | If a color is passed, sets the default icon color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`ink-color($color-or-map)` | If a color is passed, sets the default ink color to the given color, and sets the icon color to the given color unless `icon-color` is also used. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color-or-map)` | If a color is passed, sets the default outline color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"The Material Components for the web 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/density":"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/button_15.0.0-canary.d3344c16f.0_1663838710564_0.8894458880487961","host":"s3://npm-registry-packages"}},"15.0.0-canary.94f20ccb8.0":{"name":"@material/button","version":"15.0.0-canary.94f20ccb8.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"d6a6ab251f0d3b817c4799ffe6f11b3896f789f9","tarball":"https://registry.npmjs.org/@material/button/-/button-15.0.0-canary.94f20ccb8.0.tgz","fileCount":40,"integrity":"sha512-M3o2L5SVura0GbxSnkZMDv01cJFNRcLayCvVTWiHZM+3suY/W4X/bLA67FAPBaWICcECgrmwj934WJWUChgi8Q==","signatures":[{"sig":"MEYCIQD1UNqv+bAlX1XdNGsUN5Kl0yLiNIG7ecZ/kUQu2r8lZQIhALPI/9y4+/b6myCkZsmXn2r8qAf109V3deKr918wpY0x","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":642027,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjLMoXACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqXmQ/9EYs+YbgwNOuFTfg/3spi4gMPOPE0nDtORdT2HJKZhwgcAHV3\r\ngZcw63JIPMN+WKoGz1PACFnDnnGwCzhXsO+mZvG9Z1lKNc7PGaGW7K7/DdfJ\r\nfHL+8sKoMv6YCf0f1lYiJrCRamKHwSqujLZHReB0ytOVAnWNE04o2MlXssbx\r\nIA9gv3/hw2+1H4Jar1KBUF1J7J5XqaCNk7aqhYbOES2nNIHE4Lfx8ZvH3W7O\r\nl4s8rUwabxb1LufQc3TR+OgcFRCxIm3lHyjhUJ4gSZdJKF8J0r7FCLta4mmc\r\nbLrYNdE6v1DQmA40hW+TW5CD6UKIBNfjXJeE7vPP+fEDfRwLowvnd/0el0wi\r\nRaSWHE7iHVSLpECA6RFFEPsnQlAm9JSaWwLVKHvMWtMBPvMJMBNxKmnLLgpq\r\nkjXb+xc6QMFhcPkl77viM52oB7p4UnC1N9+bVZo3jrbUaTjs1WcoHLTY8yLO\r\nq4T4BiuzJMhkMZtUahTpocK/VpbsBRnHLz9BIeNGFX9stpwwvUgtD4RVlbov\r\nnS7f7dI5BSfxQD/NpNciIoNQnCmb22zbpmI7b/YqaQ8vcSoVZ2wwEmuXuCZf\r\nKj8C0k3S2WApp9OJBxNOuRlRq81Qjp/4Lk9XaPQ8roR3WKGOyvQdHD0CH5G2\r\nqZeJWBCkeL4/B0j/5w5udpm4pdsJICEatX4=\r\n=y248\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button/styles\";\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nThe `mdc-button__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused button.\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.**\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n**Note: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.**\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button--icon-leading` | Optional. Styles a button with a leading icon.\n`mdc-button--icon-trailing` | Optional. Styles a button with a trailing icon.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n`mdc-button__focus-ring` | Recommended. Indicates the element which shows the high contrast mode focus ring styling.\n\n**Note: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommend always including it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color-or-map)` | If a color is passed, sets the default container fill color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`icon-color($color-or-map)` | If a color is passed, sets the default icon color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`ink-color($color-or-map)` | If a color is passed, sets the default ink color to the given color, and sets the icon color to the given color unless `icon-color` is also used. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color-or-map)` | If a color is passed, sets the default outline color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"The Material Components for the web 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/density":"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/button_15.0.0-canary.94f20ccb8.0_1663879703134_0.48647261107105244","host":"s3://npm-registry-packages"}},"15.0.0-canary.81e4cb7b2.0":{"name":"@material/button","version":"15.0.0-canary.81e4cb7b2.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"0c123530ebb119562ae821734ded8fc14d7d1bfb","tarball":"https://registry.npmjs.org/@material/button/-/button-15.0.0-canary.81e4cb7b2.0.tgz","fileCount":40,"integrity":"sha512-dTUtwQ6hRPMlY9y//6ZhMkWgin5OdM3MSjglBQTH6eFAF1xQq33fG/4dHEjxwFnkbKHM4wOmRK3mLX05i0DlYQ==","signatures":[{"sig":"MEQCIBMDy7hY2YJogo29mXR3Op6erUU9Pg2gbyVlMxTebCBxAiAMSQVj2B4Y9fzkhABcv5ZztQ8Yo53K0h8Xg+nRbkbPAg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":642027,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjLcwBACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmraYA/7BtoAO8w8i0EzdBsVrcEhLn0t0vMWwM3i2SoNwJbl9wS+YSEU\r\nJlJrP1tgTHdUj81SEfCLvotxrItg4EDTk7JyxjAIlDG+pc9y+pgr+Vp0XGzC\r\nBeLscuejaxvDhGe5U3pXwmUsTM+I31Mg9jEZw+PjwTFs0aFAGHnKoJvq5dOK\r\niq7NWwP/lrgk+39SLhsX/cwBxZuQvF/UO9ZLmjXNEGYCByD4HKlx1TuoE2oJ\r\ntDQ9UFnjMiKHik3C6ApQFwcXaV7jwPYQ1KAMB1UWCf3riQgM9PzGpvWQ+Yi1\r\nL6Y7j79RxD3imy/nw7a3c0hMTROOjUq06P2JWPQCgdVNUPgxEXpSlHji7HAv\r\nmQ0v3ww3/W6ku5/Z7yeENWuH8DXSUFdLM0Sm5Eeg2D2mYcosR9mY/61QSwFs\r\nK5uj92CkO+67aW651N+TqyGOPI2wiiBPIImQT8N9sQ+qT0m78hV7UkEY4Arz\r\nsp++oUpL8cyUGt6uae0KVVqgYqCVNYhZdI5dvq9nyehUA7SkKGZPjGkJk8hw\r\nmVrWOF3WjusDHhxoGLHmrUFE1Hgr/Xb0f0N+5XgRmD0pMdPwAK6Dp882Phip\r\n2WDFy9qR4lpqwYFu2sL/dVANKHblwiA+6rGa4o6jNQkAjmqumhUtgYTs3fg9\r\nqcikafJYQN7029lm3xNOgIbaykNaqQZzBX8=\r\n=Rrwn\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button/styles\";\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nThe `mdc-button__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused button.\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.**\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n**Note: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.**\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button--icon-leading` | Optional. Styles a button with a leading icon.\n`mdc-button--icon-trailing` | Optional. Styles a button with a trailing icon.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n`mdc-button__focus-ring` | Recommended. Indicates the element which shows the high contrast mode focus ring styling.\n\n**Note: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommend always including it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color-or-map)` | If a color is passed, sets the default container fill color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`icon-color($color-or-map)` | If a color is passed, sets the default icon color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`ink-color($color-or-map)` | If a color is passed, sets the default ink color to the given color, and sets the icon color to the given color unless `icon-color` is also used. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color-or-map)` | If a color is passed, sets the default outline color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"The Material Components for the web 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/density":"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/button_15.0.0-canary.81e4cb7b2.0_1663945729285_0.67677120473933","host":"s3://npm-registry-packages"}},"15.0.0-canary.aa85f9413.0":{"name":"@material/button","version":"15.0.0-canary.aa85f9413.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"b839f701aa3eaf691a6aa2911d5b56285b11f15f","tarball":"https://registry.npmjs.org/@material/button/-/button-15.0.0-canary.aa85f9413.0.tgz","fileCount":40,"integrity":"sha512-jrfAbytVp+adXjlbi5PNkxXcEapKagrs0hCop7XjMZnZUbAGyGmTN9fGwHwdo0bs+k5pvp7+esJRZr/yKJdetg==","signatures":[{"sig":"MEUCIE5kKczGwVFOm70VMOywg64TVPdZ8lhPrfy8Yw+s4AMuAiEA5Q6D7nUhisLYBIdkRWHdHXwU2kS8ZguM97zrUsM1TNA=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":642027,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjMefuACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpAzw//Xun/8EpmVl5bVQdC3bE4Es0wlPd/9+i+43sqlzKJroP8t2E/\r\n0sVpyWCo6BJ2bE0Kg4HNyvZNnLNP0F4f6Vbm42fp5aYC/GV83R1X6lexMsWR\r\nrjzFskR1ZCoE5EG/EmiEASunO9V/gcB0zUBbq+OkYg6TM3onnn0wJIZxao8k\r\n0U0nLOWjNcoRDQG4OaVJ4oiocvaffZiqIaghZb7Nz5VUtO6r2o8dTR2tdfth\r\nm9EMW3gxwekCKiwQfgJdwQYXQLR83Ha4/oIoRAOa7UzpfyWRKu7mgkh+zuTs\r\nhlsGdG+Qe3V5K4Y5NNEnbcIr9wnYWRbpsQc9TsfKkmYM6249bxYcI91keVGL\r\n5PafuMVUO8pLvw1hK8RfS0uMkBV1ABeWFSwee7Fw2Dwl7aA6P+yjTPLj/nR5\r\nN+Wljv8rnKovdy54QybjVIivK6tp+ULXeMQE8bVa5CzfdmSeAzpe8FnhJo3H\r\nYfTFeGQOWt624jzOqMJSs91Q2uvI/V1W3hGiY57IWOpZxGyDRqtt1IyqTPqM\r\ndvE+MfzqqAaLrTrnWzQl+0MDqaFRgnfAb9uHHEUkWl+83T0CEjNyNXsSj6Gd\r\nSHDdA4L1ghM73nHD0b4kYHCsP/3C98E5haAvouDQ5keDbdp1IWh1XiqGF2Oz\r\nX/swP5nW9CXgcdNz3OSrA4N6FIqfSbPk1tE=\r\n=/+Am\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button/styles\";\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nThe `mdc-button__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused button.\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.**\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n**Note: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.**\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button--icon-leading` | Optional. Styles a button with a leading icon.\n`mdc-button--icon-trailing` | Optional. Styles a button with a trailing icon.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n`mdc-button__focus-ring` | Recommended. Indicates the element which shows the high contrast mode focus ring styling.\n\n**Note: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommend always including it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color-or-map)` | If a color is passed, sets the default container fill color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`icon-color($color-or-map)` | If a color is passed, sets the default icon color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`ink-color($color-or-map)` | If a color is passed, sets the default ink color to the given color, and sets the icon color to the given color unless `icon-color` is also used. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color-or-map)` | If a color is passed, sets the default outline color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"The Material Components for the web 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/density":"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/button_15.0.0-canary.aa85f9413.0_1664215022405_0.9422082030203098","host":"s3://npm-registry-packages"}},"15.0.0-canary.7134a7752.0":{"name":"@material/button","version":"15.0.0-canary.7134a7752.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"699fb8e1769710aab203440669d9c27b27cb43cd","tarball":"https://registry.npmjs.org/@material/button/-/button-15.0.0-canary.7134a7752.0.tgz","fileCount":40,"integrity":"sha512-Mz0s3l2hr4u1hH1Co7DTCVHbG7rEgLPbInI8UDq2YZ9aXx4ltjQvnJhEPb7AfCpHc4NHMZahMWQdNI5E6Cs1/Q==","signatures":[{"sig":"MEUCIQCq46wBqP93EuRHkQj3HiDSANnHU6rSQtftoBqS3cCm0wIgfHqJVhPngDIwMGWBalFEraw4okaGuaimFB238neQkXg=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":642027,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjMiB1ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqURg//UXHzoxoG8gIurJVaUxUXvw+O2nFP7X1uMCHXa6AauHsTqyI/\r\nO0tmtRt2aMOpymfPL4mDT4NEyl+vWgYsyWvz/2gGLbo3jR8gASWR6NNzZhwL\r\nxEtqcarBB3HT/w6IPhNg6358YKOOLc7XhJJbCsTpAwRtnMcSalfw0xRdSgw7\r\nbEjYWNuKup71vTysN3lvLuXFJEpX2jsNv6T2n+G4ZEzEKJEABvUyvL54Re3/\r\n3EWbl35JwUT2uurW3SUBOyhYi5WbmSEz4FpaSxpqS+gsxFxtR09UAySyfywt\r\nvbrLht8TwOqHSSler+uu5f0PQRrSzUqPmVDtYxrq2sVNuZF6Ab8/+qKrqItw\r\nW9W9iNsyKKXLALU3bpSf2KWn8f0OnyzHvH5ebYIYbxdfx77EuA1NpJK3T7qL\r\n/AIe3zOhLG7nML22M6z8HjQRIidt2Pwza85hFEr9Htzp0piX/b9rPBCe+QpV\r\n1RtIvKP7D08r4+Gd0t5BgsUEbED5hWByD/EqE90VNJVt3mnhz6A7Mh0ugO67\r\nrf0r/8ADT/sf7tcP05wP8U6ac0StAxz3IMYG9Al+lWwLWnRH+Dq9qqhbVKT7\r\nqwoZfVFUYbcJjtyFxsCmgJHVEkUSibT4/ijcJzAxse9kNrlbbNkswcewpuus\r\nSyewR3qq5zC24nOn2qFUsZaoCpswQfne/fw=\r\n=fjvs\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button/styles\";\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nThe `mdc-button__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused button.\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.**\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n**Note: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.**\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button--icon-leading` | Optional. Styles a button with a leading icon.\n`mdc-button--icon-trailing` | Optional. Styles a button with a trailing icon.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n`mdc-button__focus-ring` | Recommended. Indicates the element which shows the high contrast mode focus ring styling.\n\n**Note: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommend always including it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color-or-map)` | If a color is passed, sets the default container fill color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`icon-color($color-or-map)` | If a color is passed, sets the default icon color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`ink-color($color-or-map)` | If a color is passed, sets the default ink color to the given color, and sets the icon color to the given color unless `icon-color` is also used. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color-or-map)` | If a color is passed, sets the default outline color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"The Material Components for the web 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/density":"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/button_15.0.0-canary.7134a7752.0_1664229493268_0.5594993451768839","host":"s3://npm-registry-packages"}},"15.0.0-canary.70b8ac16e.0":{"name":"@material/button","version":"15.0.0-canary.70b8ac16e.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"1c6016e5738b546a0cc12dc7134e3068b4a6bc27","tarball":"https://registry.npmjs.org/@material/button/-/button-15.0.0-canary.70b8ac16e.0.tgz","fileCount":40,"integrity":"sha512-GK+QmSmWzbcyaML/yzI6KbxiAcsTJsdVQQ/dKQ0Soq7YL3hO0iGnOnDQsgxP5iQxATMz+2Z6Erl1gzDCbe2hgg==","signatures":[{"sig":"MEYCIQCqeMfgUlwDlG2elBduYR9hVHWiRebVpto0EYBw9ekqZwIhAI+TSMngrjuptoIfOflei1Su65Q06Ks2isgjdCuYZOsN","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":642027,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjM30GACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpDxRAAmKA/eU0cQHMqKZD0ktFxzYxZ7WVvO70KO40MCE6B42RkuDj+\r\nCFpwGlh/23sF44pFq2VJ4YRWTHfObwx231QXIwVXRvhGaQB0e69VH/Rfn1rl\r\n88I0RKQVRFjaV0AYc3mm2bSy3X7IFvhTwsJNOHo0pQKS3xB5jkHhtkP3I7rv\r\n7sgp5oi14kSRPDkbf6bS4eYqMVgSJhM/Wr1+41IrQENnKGrS8bAciMq3RWUq\r\nVrDesegqLMOd50ivJCBAZ5NsCy8TmLgyb5kveB4uLsVxWfsKp+Zn/qhU0WDG\r\nosJPstZ+yll9puSN04SscxoHqO4At+NXLtjAlGcKxF4eF5bTfBnwPNFRcsce\r\neEZORCFzoWwolpNy2KgiRIqGyuPVp9MNSQ2lvGDsUTu/5TPA0MdmjP9e14Gc\r\nVWSlApdVGijQHgmMqc9r73RRtcjqZ1uZoMFwHPQOWQTVky/j2W8Z9tsyjGzs\r\n2vSAke/d9LrK9gYhrg0BCVUELeoJjJBYHHy3X9XxpxuGmCTykGVvWcxMiwuz\r\n+opveYD7nqT/oByQRoTv6x+zTkO2L7aP77efA5Gf4LI+qTgrXmIarKLoMA0c\r\n6F6HLNFEnk46UtLkXoCFjOcz0GOpDFZOaVEkfFnNPw6KClfciJT7DUOH0+8+\r\nYeJ3zLPNveXglSPDtIQ+K6J+lY2p5vWYYlE=\r\n=RUPN\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button/styles\";\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nThe `mdc-button__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused button.\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.**\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n**Note: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.**\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button--icon-leading` | Optional. Styles a button with a leading icon.\n`mdc-button--icon-trailing` | Optional. Styles a button with a trailing icon.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n`mdc-button__focus-ring` | Recommended. Indicates the element which shows the high contrast mode focus ring styling.\n\n**Note: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommend always including it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color-or-map)` | If a color is passed, sets the default container fill color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`icon-color($color-or-map)` | If a color is passed, sets the default icon color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`ink-color($color-or-map)` | If a color is passed, sets the default ink color to the given color, and sets the icon color to the given color unless `icon-color` is also used. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color-or-map)` | If a color is passed, sets the default outline color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"The Material Components for the web 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/density":"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/button_15.0.0-canary.70b8ac16e.0_1664318726314_0.8094762960970219","host":"s3://npm-registry-packages"}},"15.0.0-canary.c20d74405.0":{"name":"@material/button","version":"15.0.0-canary.c20d74405.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"887687ee16ed7ef93f276fd63cf7177d33ab3018","tarball":"https://registry.npmjs.org/@material/button/-/button-15.0.0-canary.c20d74405.0.tgz","fileCount":40,"integrity":"sha512-yGdByucadSwlhiV18VcoAwH7Oi92njgAQfB1MTO9Kl5fIP5QyKUlhiRcHHPpWs2uC4WdFOVsj50R0FCQbYUktw==","signatures":[{"sig":"MEUCIQDhHsoEDfLEz1DhfW1JwKWEwYDZz1J504vabgK+AhERnAIgLUtnJBOq+p70kgMwpFQlJKeW3HXru/YnGd3WvkvZwDc=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":642027,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjM4flACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrCmQ/9Gn5dDUFkYSWHdMkbSKhnRv8FM+proCfgtNUqK/gCT9QGKwcR\r\nCsn1FNg9G0y25nrxzilnJi0x0E5Exo1qzD70OtuJ+KMl9Bf/lQIj+KOZrCxZ\r\nJk+jgDnkCncaUqiOrJmv2zzGfDVJEtrMxjjybBu+2vHfdZwXqKCVg1C9mTXD\r\nR+Vl20UBWKabGipTVzaMerLma5HVowsz3RbBb943Eq4Hm/VD/O4pFFlbMbJY\r\nTZD2hu0drcthcP91Bv1B/5KMcEnHxChj4i1PClUY0B3StR8GJ/nQzoTwM6p6\r\nSmpiG0MxanAD0Nx0LZcCpPaSlNhEQpxaemO9GicwEcGO1pYGuy8YKqtXnMfP\r\nlh4U5D6OB4vKAhjmSaVUd9517+Uf85IAWwsmQHLZcnke10cws4ooWrsbC+N9\r\n7wfEZsTER91ENtJrIY95lRxsN8bCBG2i05BnKBb/atMAHjPk/ncaw3kFGjav\r\nrvKp8iTu806TLIu6BP0MQU2sLFvZyYcEvYNZwnGrF6vauqEZ2w+t639OkiO0\r\nONFbFeGnTQ/SqGyYh+ioaAA876Hg6jAWzZfqTyDWsT+Pn2F+NeKNPy/OQHuJ\r\n1Y7gzowsj19eqovFRQwAg/fBMuzX2fzd3DOaP9AnFaftsUgOoiqGk7HLxy0L\r\nXLhftWDGpTTY3cFlSPCBNqUZrTwfhVqJBf8=\r\n=QP1s\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button/styles\";\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nThe `mdc-button__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused button.\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.**\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n**Note: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.**\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button--icon-leading` | Optional. Styles a button with a leading icon.\n`mdc-button--icon-trailing` | Optional. Styles a button with a trailing icon.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n`mdc-button__focus-ring` | Recommended. Indicates the element which shows the high contrast mode focus ring styling.\n\n**Note: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommend always including it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color-or-map)` | If a color is passed, sets the default container fill color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`icon-color($color-or-map)` | If a color is passed, sets the default icon color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`ink-color($color-or-map)` | If a color is passed, sets the default ink color to the given color, and sets the icon color to the given color unless `icon-color` is also used. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color-or-map)` | If a color is passed, sets the default outline color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"The Material Components for the web 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/density":"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/button_15.0.0-canary.c20d74405.0_1664321509638_0.37348363339403723","host":"s3://npm-registry-packages"}},"15.0.0-canary.f033fc8d1.0":{"name":"@material/button","version":"15.0.0-canary.f033fc8d1.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"6f5098e56b7bcd7bd47135b83e90885c34be0cbb","tarball":"https://registry.npmjs.org/@material/button/-/button-15.0.0-canary.f033fc8d1.0.tgz","fileCount":40,"integrity":"sha512-D7TnLNBeyBBjSQmJ7TVRmJ+I1TfLL25gsmhlSHsOCYqgE+1GARB/Qqj4wMsbzAYHLAVWWnpCb/g6Ybz4kcB/+Q==","signatures":[{"sig":"MEQCICH3QUz3N/O66z1dJRS2pLPI31Y80z3CltY1f/eMFuImAiBSb+ZNQhxwhiWWLZuC1OFoKD0aFlSmvC9vAoY0wganxg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":642027,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjM44FACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrtpA/+M81bsOOjjQT9H58ENWXd9kWb2Fuj9KMWdfSayQFSJkWcBC0Z\r\nNU7mt9PEDq3LevvbNbGbDqGQQgA5pOx88mr2BtLXvE0JFgf+augyS1L1mBSW\r\n7BrShn7i/Im2KSHSF18BrWGaz3LSv+W0sWeAQbk3A0wuoA3BRG6nmQYt7G9l\r\nz6b+2lgWChWNKPietlpmJsIqn8gSHXxfGuRp6kgiapCE6hhv9piDC6WLnNX8\r\nFAwaM1hC5B6PihMbzzGEkxVH5IGkQ0MCzjyM4rqfKJ5rm4GZvjeNoHV/GEJX\r\nfgFHwwxkwv213IEUJIUV+R36aDjinANxohxSf/EwYmmVZsa2BQOaLmErLzov\r\nzo6tj6UImmyH6tCR+5Plj9wPQ52rgvUDImWHA1/tDnZAlbDmcNbkD0NEiQTV\r\noMRL/bCXIvXwoXy+wOlrJRBC7qdl4vem73U9xuDC6hHMKqAk/rvJxQRm8FJZ\r\nGHfOoxbCcOKA1RRervoV2DJhBc5wn7FcAl+OZXOL68r6HevDacNXfOabjVon\r\n7zBPXHQ281CBaVUuOxxOLniFUiC7IsaUwdIb2kMBxgo/zMKSK538QzeDKB/W\r\nTI+DKJa2TuOambYCtxhNI3hjslas0vejs7Gin/riFLKmf6pbVkMNNaJBueQ0\r\nhT0IIGIxCqaLsR2fAc65yQvN2j3zVgBMYYQ=\r\n=Qusj\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button/styles\";\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nThe `mdc-button__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused button.\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.**\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n**Note: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.**\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button--icon-leading` | Optional. Styles a button with a leading icon.\n`mdc-button--icon-trailing` | Optional. Styles a button with a trailing icon.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n`mdc-button__focus-ring` | Recommended. Indicates the element which shows the high contrast mode focus ring styling.\n\n**Note: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommend always including it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color-or-map)` | If a color is passed, sets the default container fill color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`icon-color($color-or-map)` | If a color is passed, sets the default icon color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`ink-color($color-or-map)` | If a color is passed, sets the default ink color to the given color, and sets the icon color to the given color unless `icon-color` is also used. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color-or-map)` | If a color is passed, sets the default outline color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"The Material Components for the web 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/density":"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/button_15.0.0-canary.f033fc8d1.0_1664323077107_0.40147755334602353","host":"s3://npm-registry-packages"}},"15.0.0-canary.8d7ae912a.0":{"name":"@material/button","version":"15.0.0-canary.8d7ae912a.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"4570dfecaaf3ada5c4329efb910bf4d0801bb151","tarball":"https://registry.npmjs.org/@material/button/-/button-15.0.0-canary.8d7ae912a.0.tgz","fileCount":40,"integrity":"sha512-LPOPKw50GhLYwBj3rP6DKnMrq/C01oR8tqVigVqn+00swak2wM+AhkRdVRjz178+ZOtau/nHuzjcKayz0Hm+6Q==","signatures":[{"sig":"MEYCIQD3NMye3jNm6NgS7cv1PnekekHKGChtv1fUW6rVDk5SKAIhAPd/OXD68mA2XHjXcl+4PmDDVnB2sKQ0deiLnq4//Wsy","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":642027,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjM/43ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmofOg/9EVd0TqXhkNNJOzM8xqpeCngSojpVEAkna0BoJHkMIQuc7LCW\r\nTyY6GpSi8MXeGg7G1gxihy17VyktEHUy+T87Cimnewm4XPxKSwcZGTG4At9Y\r\ne4hL84xymdTLgT2GenbFKXJUFyUV7WOThrhlDtnVtlAMxelw8ULldyMctzo+\r\nJ+zdwwhVmA2AGeiwvfclGdxyfCBujJRFUs4qsAf/P4ulaSm7TDDFeD7tb8Ff\r\ntl16ztDSDHE/5FUdtTDzIJfLYwad50DIODybuyTBabq+eGs32ePW0IFD4OuI\r\nLdentSdqNrA1BP/cYP/DaNlHrekac9IEmFz4bxlIBtESC+tOyDv5118yGDno\r\nUcJcVe5seahXADxUAenzVcaqBphSxpvMbV05paqFgkXWhuWpw1XDMbMCFe6V\r\n8yxM6sUaw9bwVzqSHDYvi8UV73LlxNxpWN152UVREj+BuSysQzKaXPv+y+2Z\r\nH2j0zQ4nsVOezJtmXBRQiQHKpCEAUvupyCPIURisFhABwfHZm1XSFou8fH32\r\nAhIj4RTn1EvmoKAvnFF2qN2wjRBniV/8wimi4dwPg1C9kyuVWQ1wIGlzy0ji\r\nY+xfY0vWNkQY4T5Kkw176HL9FRPe3F2Zlm6xG+YpIHqYYR+/KW0++yXCqK8F\r\nA/lM3xezb5mHx750AZRDj0lCRHEPC3bagQc=\r\n=oz+M\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button/styles\";\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nThe `mdc-button__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused button.\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.**\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n**Note: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.**\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button--icon-leading` | Optional. Styles a button with a leading icon.\n`mdc-button--icon-trailing` | Optional. Styles a button with a trailing icon.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n`mdc-button__focus-ring` | Recommended. Indicates the element which shows the high contrast mode focus ring styling.\n\n**Note: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommend always including it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color-or-map)` | If a color is passed, sets the default container fill color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`icon-color($color-or-map)` | If a color is passed, sets the default icon color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`ink-color($color-or-map)` | If a color is passed, sets the default ink color to the given color, and sets the icon color to the given color unless `icon-color` is also used. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color-or-map)` | If a color is passed, sets the default outline color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"The Material Components for the web 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/density":"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/button_15.0.0-canary.8d7ae912a.0_1664351798879_0.31820529374099005","host":"s3://npm-registry-packages"}},"15.0.0-canary.db414b864.0":{"name":"@material/button","version":"15.0.0-canary.db414b864.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"260b4c909fba7e20acf28b21156abfbeed835d0e","tarball":"https://registry.npmjs.org/@material/button/-/button-15.0.0-canary.db414b864.0.tgz","fileCount":40,"integrity":"sha512-6xsuiRTy55sV1SaV+FGn3IYj990UOBpspeouPtQu0/AdP7lEt5fvP/99kYE6VT1xN3D1pbfrBJu/tDNUa/YfGg==","signatures":[{"sig":"MEUCICage7FnDOcC6yrbxg9MdGDHdlL1i7p9Bbz9Rv26gWILAiEAl7L8ofWMe/rGlFIyAXBzSJCF/ErLld543U/+kDSHntI=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":642027,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjNF/fACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoAJA//V/jN3aH0hWsd6iC7/siEg8HstOowNUFumYTJd2bKluVSnlSP\r\n3De6q9Iv3fIAhqCx7t2DRgxhs+lFvBxlO+k4QvkEcocf3VIM3AKiP3+ShApI\r\nJooDFZRj56nRH5KXhcyXsulN/AIhx3r2T6BV7VG2Gvvm9Gmx6Qjtvu/8biOJ\r\nRObbXu6jRwR9Blcr3b7wMIc79x7p0Tt/rPYumpAeLDh5LfAnkzT2qfjBUksi\r\n4qfl6NywT7Xb83/gjGtMgfN9dVBrIJe2JQfvE/oc3X3Qlta3Y159KpnDVBn8\r\nYt1sjZjBum7oWeZxVBrUdgE20x0OnNj32xCJeZg0PwlQXOmiBVaeBfAAH5pq\r\ndAcKkdB+1iBW05p9DsNkPS0lgQb3L+lfx8809tDySNEhtcgz9NnY18ZRwq3i\r\nnq+6Bl/EgZNUHFJgklwn4ECWU6tv/u11WVwQLyKZHmsQBAG21zIrIy6ZGHh4\r\nQNJie4HFWDyK72rbejBNqWC+gKx/TvE3/7E2OmRklHTe361a+cF7LqB8f+/1\r\nvXFajdOGr6Um4UXkiLA9nl2Zu2VHPsm/AW/9OpDBg4G6jIUx/i7GDhX07ksV\r\nTj2Ztb9x2qlVssN3MJHeSZmKfTfHfJ3rUWWQY7pcusbJCVNLtMKVBKa9/sb2\r\nHNq991+9lzvilSmzeBmkYzuSM3Y1DNEfSII=\r\n=gq7x\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button/styles\";\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nThe `mdc-button__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused button.\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.**\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n**Note: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.**\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button--icon-leading` | Optional. Styles a button with a leading icon.\n`mdc-button--icon-trailing` | Optional. Styles a button with a trailing icon.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n`mdc-button__focus-ring` | Recommended. Indicates the element which shows the high contrast mode focus ring styling.\n\n**Note: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommend always including it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color-or-map)` | If a color is passed, sets the default container fill color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`icon-color($color-or-map)` | If a color is passed, sets the default icon color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`ink-color($color-or-map)` | If a color is passed, sets the default ink color to the given color, and sets the icon color to the given color unless `icon-color` is also used. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color-or-map)` | If a color is passed, sets the default outline color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"The Material Components for the web 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/density":"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/button_15.0.0-canary.db414b864.0_1664376798713_0.7197468614564646","host":"s3://npm-registry-packages"}},"15.0.0-canary.28cc6791f.0":{"name":"@material/button","version":"15.0.0-canary.28cc6791f.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"12ccaa721c4376de853ef9232091783842cc3362","tarball":"https://registry.npmjs.org/@material/button/-/button-15.0.0-canary.28cc6791f.0.tgz","fileCount":40,"integrity":"sha512-NUDroC1x9sqtreBSYopfNe7/6iO/htKRFgF/HHKuV5YC3xjPReKMIbNuGbz/pRpkoDzuc/bTHs2e70P9AEKFmQ==","signatures":[{"sig":"MEUCIAGlYdvFpOJTHP65MovqM+SgbWJxoPqxmKpdKq+INWEfAiEAiO4BU907RQt1/wAjIXVvQT9qcJoWl36smL3TxWZG8dg=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":642027,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjNI1pACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpatQ/+Oao0aCKGEgMeZjhVtWda9r+vCMcLwKPbYOxZV8n/GFFhP3BI\r\nq3mtFlJ+UxFLR141L+GOJFZ/I+livaW3d9fH0Oxj1aPzinBTlB3qIVfyVxoe\r\nZTvuKt6dbxkUbO3Kr7N71SZxcW0A4nPqth8O4umy4AzqvcXPWdjAXMS6WJu+\r\nxnPqYbUXoegIym1Tn3Uz8+oRtrM+L3Rm6gLLlYvOzuKu0hOEB1xgl/ukKW7p\r\nIjfZoCKWq5Ammpk8kQxlO0DdOMYSoS9WOyDVuJMMZgDky8+D/TUZJn2NyDuk\r\nRpPyqQRqdPBVfGvZEvV8b7sCn2M4rteTZVdG2gm3cDp0nYg8QU3q++6/XPSV\r\ndQxg4YeI4UHJsx/Zg+PPh+vN85HnjyD7DaOt1jsbykdNIsGpQowvE9nTFYkB\r\n8JXOgKsMT9w94Jx2klCns+lVMVMjMMR6tiFQh1VPyo4LdPCg5imH1D17rbez\r\nFCiWSKoPSaEYtgM1EqmslJoFi2aoRPm+esRQl2z16WUN0dcuC5aIMWNy6zzH\r\nrlh02kkASEvZPaO48JN40CHq8lqEysca6Onzryny1r/WaNq+aqZvt7Y4l+OQ\r\n78xbPRBxxdOpZFysob0q5v/ghj2FBMykID7uI40pi8PixfIVL25Eug+1b7Zk\r\nJGiFZkDVsWv/k3Stzu2WuyuEE+wQbF/XfOU=\r\n=olrO\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button/styles\";\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nThe `mdc-button__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused button.\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.**\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n**Note: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.**\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button--icon-leading` | Optional. Styles a button with a leading icon.\n`mdc-button--icon-trailing` | Optional. Styles a button with a trailing icon.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n`mdc-button__focus-ring` | Recommended. Indicates the element which shows the high contrast mode focus ring styling.\n\n**Note: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommend always including it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color-or-map)` | If a color is passed, sets the default container fill color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`icon-color($color-or-map)` | If a color is passed, sets the default icon color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`ink-color($color-or-map)` | If a color is passed, sets the default ink color to the given color, and sets the icon color to the given color unless `icon-color` is also used. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color-or-map)` | If a color is passed, sets the default outline color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"The Material Components for the web 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/density":"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/button_15.0.0-canary.28cc6791f.0_1664388456899_0.389209859357603","host":"s3://npm-registry-packages"}},"15.0.0-canary.a515a2d18.0":{"name":"@material/button","version":"15.0.0-canary.a515a2d18.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"c1959c5e909c3757f97be9e295c94c3569cbc924","tarball":"https://registry.npmjs.org/@material/button/-/button-15.0.0-canary.a515a2d18.0.tgz","fileCount":40,"integrity":"sha512-iZZsZWBB+AsFz0IVjfrFdqnWSxAtzoMhHByE4e91L9mxQQ8J8IzuyocjC1SzarYQUBHNFvz18G6DymYIfSTPFA==","signatures":[{"sig":"MEYCIQDQwTQY+A1uXm5O0ThO5CSouBFjdqZ39dLtBQlhk7b6MQIhAIHzs4Sg1nleEgC4vIWAb9IuxetXmvwnUGABb1BtlFu5","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":642027,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjNJjWACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrFwA//XykYzBXgYMYrbVW2FMXczXmUYzJ4u3uMNCto1Duxo+LYQRUu\r\nL/XTFN8BkXdaiYnEj9Fskxq2QSEcKWjFxmgVZdrf+LHD1WKwNKa75dFtGW+S\r\nGh6xHjYPRVsYA68DaG0EEWCnkPQ1uvezoo7xlJWzsguILtzySiKjsvJQSk9Q\r\n1pTY+AheJsaj79czo/es2NljBR9TkV1PZAFx1LIkyuDsfKsHjPNqHBm7QpQ4\r\n/5AJh9HY3CCZWqb4RsyT0YzO7Mb1AxZVjcsV6g9RYEIoe9LzMVLzRa3mtEZc\r\nHXACmrei0Q7lK4LOGe2EPsGFh315WG36lN7IvGsBG1hpIQnf6dirpqnv/s6F\r\nZsFw0duyguH8RDyIOo+iOfNbQq5dHo2FjGiHcJK/sfhazROrp3Q3YA3v6BYO\r\nMB2/oG1gFymbmBxSQqOvSfDuBhRTeo6rLhbfBmjLiD9lPJxh5oInm1TgmH2w\r\nCVRz0Yy9BBsYw0qYWvhEAkCO0VDoeQbgTlU9GHX43VLJ3SZXwyXNinaTZD4t\r\nAOHQhPsOTBavVZkw6tvYCBEMfDBbmRSFpK3wb/AQnPHAoXKkikyc5kvAMNyO\r\nATd7GQrQyW0xPKp+g6728RZgJDUBJkm+CxnWlaGV+30xPJyHE6vg0A56zHXd\r\ndVJqt3ciPjOyOMwkuqx3jPCSnCknVU2zQgU=\r\n=VJD2\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button/styles\";\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nThe `mdc-button__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused button.\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.**\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n**Note: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.**\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button--icon-leading` | Optional. Styles a button with a leading icon.\n`mdc-button--icon-trailing` | Optional. Styles a button with a trailing icon.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n`mdc-button__focus-ring` | Recommended. Indicates the element which shows the high contrast mode focus ring styling.\n\n**Note: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommend always including it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color-or-map)` | If a color is passed, sets the default container fill color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`icon-color($color-or-map)` | If a color is passed, sets the default icon color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`ink-color($color-or-map)` | If a color is passed, sets the default ink color to the given color, and sets the icon color to the given color unless `icon-color` is also used. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color-or-map)` | If a color is passed, sets the default outline color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"The Material Components for the web 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/density":"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/button_15.0.0-canary.a515a2d18.0_1664391382307_0.211463572706728","host":"s3://npm-registry-packages"}},"15.0.0-canary.ce9523167.0":{"name":"@material/button","version":"15.0.0-canary.ce9523167.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"5ca63d4861911f442fbba5056451be3c90c6a2b4","tarball":"https://registry.npmjs.org/@material/button/-/button-15.0.0-canary.ce9523167.0.tgz","fileCount":40,"integrity":"sha512-gcJDcAG6OHlo/Y4iel1eUTdvVyKHlQROIizIMSyUrlZL73hfT9uuEQ3g32wTZUG6Onq7MsJYeQLy1TcdwEnvxQ==","signatures":[{"sig":"MEUCIQCIXA5Q750OBsxurGEMEq0Osdg+5txkSJ2bLAKLaZBCPAIgOB309+dytqBgg/5n2wztU5B6rM56uvnZUH7XzZAZfIk=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":642027,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjNgC0ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpmSw/+IflQoaLmvuA5/RT7Nf9qaZ1xcc/QqJf5igNfetpfqG93XpPo\r\n99E2aea/AXSoPCHEhmbLIDxjxiR1H8hJsnpPFwdqx76JvVuqURkMLqHBRUoU\r\nIskWd3+KsAzndtOmKwDWZHlIkeWL8pIzrisWIGdfeF0jt7A3M2tSoR5d4O6P\r\nmZb1B71di2g7M4hFJzKwHgnNsElOZ1Rc4WK3fuV9jRGdV5+VvEu/PU/yaBIe\r\nUsmPTQ3A6zPjPDOoO8PPMm1tI/gXFGNa6C/SkvyQjH7AwC8RWuPrwmI6nAYU\r\nj3sOyg8WQygg75Kp5ODUGMiag/T3YP8WiivJBHHbGNNVYmJU5RkexfVyCmUt\r\nyp6/QSlsSrhxliD094Bk7RVL0VcqFGZiI5A2WIQoRy7pDYKeWzePvbga6vdd\r\nqlf3B1LCWM8eJPIOsa5XHO/T6sYsMLmAPDsHdzgm/jlhSpy2JYBAcDPjw2Ee\r\nL1fjYIftbKt/Xezs3x1UCw3E9rvGSYnJ5aq545VlHUoYwJBasu5iau307vxL\r\nGJ1EEaJ+9FcODJrwTGPagqTV6lBjJ3fZ7opoqZPJOHvVH5vstcKn9JMcnT5/\r\nyWrPC2FUty8vvoVSFyL08C+VcNRp3RMP70oLwgFDeIcrswumI112dTrZ36+w\r\nE0OENPcIxUyPXQ7EGhA5aq9eL6rH8NVNWf8=\r\n=C/Qc\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button/styles\";\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nThe `mdc-button__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused button.\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.**\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n**Note: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.**\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button--icon-leading` | Optional. Styles a button with a leading icon.\n`mdc-button--icon-trailing` | Optional. Styles a button with a trailing icon.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n`mdc-button__focus-ring` | Recommended. Indicates the element which shows the high contrast mode focus ring styling.\n\n**Note: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommend always including it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color-or-map)` | If a color is passed, sets the default container fill color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`icon-color($color-or-map)` | If a color is passed, sets the default icon color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`ink-color($color-or-map)` | If a color is passed, sets the default ink color to the given color, and sets the icon color to the given color unless `icon-color` is also used. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color-or-map)` | If a color is passed, sets the default outline color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"The Material Components for the web 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/density":"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/button_15.0.0-canary.ce9523167.0_1664483507812_0.6950723508857106","host":"s3://npm-registry-packages"}},"15.0.0-canary.b2310f7dc.0":{"name":"@material/button","version":"15.0.0-canary.b2310f7dc.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"f29ee2e6eb778b5789a844a81502eecc96cc9fde","tarball":"https://registry.npmjs.org/@material/button/-/button-15.0.0-canary.b2310f7dc.0.tgz","fileCount":40,"integrity":"sha512-UdF6Nlv4/rYM7S/nj1fTEHXrjxb2Dwu/V/D1wnJIB5FW0KednHykhWSYPtJtmNTgLxpSU1xGZaQwfraMnOfRUg==","signatures":[{"sig":"MEUCIQDFbQw/kiNTvr6e49lgd8l0XL3fLugahedBN8+O2ZpiFgIgXTzA+pHYo/Ob9IoEYmkGJYXkCWkGYii7SqYYITMBvGc=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":642027,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjNjTfACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqwTQ//RjhYBqQQ66sVwz3H2WSj/HSBY1p1u2vhJZYjd9HNEOu0yddG\r\nfZOzw9Yd2Zzw2Yd+7w0DHeMPlAhw2PRolvnXJFcfW22PdVtaSu50NFdnUw+/\r\nId+gLGBYzq3+RSj3eCo+tdrzgwrHZHITTHA2RnqLAmsk/U3ix96Xh9s3rcau\r\nvdLymSukZ+gMWdLTqjYBu+DYKzY9aB2eFCMK58YNLEZtBY0SDD6XmqB5s+g2\r\ne2jPeiHIsjteXp64u1HVMYPr9aBfBhoN38jnCkltXPMtSNRiWVBLF5Q89bSK\r\nlkNPXi+cPPKHTsTRFtTNxjOiOWwdPLB5JrnT2TycRB4crfUh0OTwUgi2jI8S\r\nH2ka1NGfHIS/QzAUvCcKQTk5WiIz2DUNlpTdubHQpy/I/CGnF4SeTi+lypRt\r\nnhQyY9rVsxE3KLdOHxswQvtA1QIeAQAtTe2GnCkzfx3HVfKJmMWUxlceIMdf\r\nBZRjDUfo0NjnSmMwjnYrX2LeZ5C1wCYFf1b4BPTS8jfbO5aFKZzUZnxYIp5N\r\nYziD3VFXz3dz2BEH57qu33dhxCr1Op/2u21845XhPJBA0IjpEVBBBF29gKjK\r\nFUzgn3Wp3OV9RhnhIr62l5vA/15S1Xvz1N7kdEbsamjZ1p0trdu80WXk0EBi\r\nAtUdASV6bQM0Dt1ecB9Qi36drvOk/s+PRDQ=\r\n=mNT2\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button/styles\";\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nThe `mdc-button__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused button.\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.**\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n**Note: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.**\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button--icon-leading` | Optional. Styles a button with a leading icon.\n`mdc-button--icon-trailing` | Optional. Styles a button with a trailing icon.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n`mdc-button__focus-ring` | Recommended. Indicates the element which shows the high contrast mode focus ring styling.\n\n**Note: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommend always including it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color-or-map)` | If a color is passed, sets the default container fill color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`icon-color($color-or-map)` | If a color is passed, sets the default icon color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`ink-color($color-or-map)` | If a color is passed, sets the default ink color to the given color, and sets the icon color to the given color unless `icon-color` is also used. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color-or-map)` | If a color is passed, sets the default outline color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"The Material Components for the web 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/density":"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/button_15.0.0-canary.b2310f7dc.0_1664496863492_0.04150359437605666","host":"s3://npm-registry-packages"}},"15.0.0-canary.a44241e54.0":{"name":"@material/button","version":"15.0.0-canary.a44241e54.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"d983a57e4b4cd0c020c5ec17491c2f115f382405","tarball":"https://registry.npmjs.org/@material/button/-/button-15.0.0-canary.a44241e54.0.tgz","fileCount":40,"integrity":"sha512-4M/ud2kED27FwZXwc2mq9Lz4gp8R98UMieMhqnn34qaAlKmo2j/8YPYhYQe9L8Nj8l4EvydAC7RIxa4PTZ7Vmg==","signatures":[{"sig":"MEUCIQDP9ftsFMeNJBoQTXoEkEAPVJs01W4+0ue1AQKayBT57QIgR39qbOst1uU7xOL8UhTwR2CajpbJpvv3efDUnjm40Rs=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":642027,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjNqcUACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmorIg//fS70omkhBhNH2idJxy6JB76sja5douXUDXyCBZ6UWm+n3im3\r\nQq9W21pCDUQHQ4EcCgDm9yps0agQJOhk7h4uzcFEjhRkNJ2IBqE4Zc5CKKTF\r\nLrcW+GXUodIMR7ECyx8nLpl8mrEGQqwaFvJZzxs+s3v8TDeZLJT3QZwyRmbx\r\n/JIpXzbr7NNKcu8zRzpgVwsZtkpwrAex869JYqlS/bNU1XmkhXkCfGQS9Q7C\r\nJWj9ymxSy46AbQjJCwk+2PCbKvGEBzu9Z2JLavpyngDQ+9N/nfaKziZOUW/r\r\nE4Cvk0jQbIGYW2N3N78WYbQx+Wk1QOsZZ/653LTXlp+toKdzb593YQhLPT+o\r\nzR4MpY9ZDNebvrh5nGScKTbRAGhcMALISg7sbCSK2ZnBTdFZ0xOw6780FZz+\r\ngDTCFFVDIq1WClJjYoKegJCRtxPPqXyxnEaVmyhD5jYDJ4CjFnx5F4uWF+1N\r\nfu3d25ItMRbqyK0xF200wUvqy9SqesHwThe7AInXTlgjAvw4lq2mo4GUA+j5\r\nKzMtjHqGLQz26D7zBBYw2qQuZByhcjXEBez/abR6u+jj6L4sShQCgf+FOxU2\r\n1jQLLCTjfLn30hp7fHKK9GwjJxt8I2d+vHWldEHww641+lwHLzERgo3dWadP\r\noXXt1LAEftjAJT2Y+I+tsVsDWNp/zLR89+w=\r\n=K//v\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button/styles\";\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nThe `mdc-button__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused button.\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.**\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n**Note: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.**\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button--icon-leading` | Optional. Styles a button with a leading icon.\n`mdc-button--icon-trailing` | Optional. Styles a button with a trailing icon.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n`mdc-button__focus-ring` | Recommended. Indicates the element which shows the high contrast mode focus ring styling.\n\n**Note: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommend always including it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color-or-map)` | If a color is passed, sets the default container fill color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`icon-color($color-or-map)` | If a color is passed, sets the default icon color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`ink-color($color-or-map)` | If a color is passed, sets the default ink color to the given color, and sets the icon color to the given color unless `icon-color` is also used. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color-or-map)` | If a color is passed, sets the default outline color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"The Material Components for the web 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/density":"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/button_15.0.0-canary.a44241e54.0_1664526099827_0.7601198800305298","host":"s3://npm-registry-packages"}},"15.0.0-canary.0ce81e115.0":{"name":"@material/button","version":"15.0.0-canary.0ce81e115.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"6cac4de7db29f1d4250f5193346e65540c608004","tarball":"https://registry.npmjs.org/@material/button/-/button-15.0.0-canary.0ce81e115.0.tgz","fileCount":40,"integrity":"sha512-jLJnw/iAjRsIqkoGJ33bAnbwJ0UYkJ53CuqJNLghQ2yRLRcuNpe3+Pko/kvB9mQgxdNqFa9rUBaz21RGMv3j2g==","signatures":[{"sig":"MEUCIC2MkhA7Orw79Y1FFKZkbMbHtdaokbNCJeLzItRqtplfAiEAr15OvLIx1OMc/ThttPkBQ0bVe7XnTncO/MeD0aqmM4k=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":642027,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjNzMHACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpP2w/+KSJd6K+ZsxdHBUhwTo1YJlNegpjIKRiSOj9vXDAy5P00vJw6\r\ntk7VL5h2qEzR6uJLoY1C9caEcz633Qq1yQzpyhf98naQqFtptH67M5IQ7HQE\r\na3Nlp5k0VFKuo28WzqbyR2c8sk8ZZnGC/kfiDl6sAO/mEPI+dZPfOL6psU0L\r\nQp8YyQvmmojX2QECAwhNlLaZYeYiyKqwh+T+koi1FZbxf1gxZ8cPTJ9POKqH\r\nhu9m5BfH3vlu/AkYRdxoU/ha3IQVUh1GxiQVyRwhZX19cKNMFOUK4kgxUnkC\r\nMWPjQKzlAwxVLWO384gRx5pGmMEVNvBcQiaB1WvmoxWQNXzR9Y9WpBaWAopN\r\nbtc70ovFby1GcLReGMTqQELJuVPhYUsCBPrSyTEt6z+xa4x/aCIB1ZzUGY4K\r\n1pia+akRFG0cCakgJsPi8yCtn9WyZTX+RdWbArEiAwaiNJs92hS9dThNgIe+\r\n//nmSlfm7DCHdnf3VpfoNm+fZb+1YuOGh2xv0asVlqBOX8W4DsBSiCl574Rl\r\nIjpzPjCvBZxWoYBJeeSp2BJCY0oRpJv4OaoIghPbbgCL/W2hdGlsi+Syt1KB\r\noMCg4IpAyTGng6WCrh3eFOOVmqqQBTNKMIwkOau+GAK/hW56d1Oc4WmRy3YM\r\ntGiuDbtuioBXDB14eul2wsx18rQruYxJXhc=\r\n=YRL7\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button/styles\";\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nThe `mdc-button__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused button.\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.**\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n**Note: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.**\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button--icon-leading` | Optional. Styles a button with a leading icon.\n`mdc-button--icon-trailing` | Optional. Styles a button with a trailing icon.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n`mdc-button__focus-ring` | Recommended. Indicates the element which shows the high contrast mode focus ring styling.\n\n**Note: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommend always including it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color-or-map)` | If a color is passed, sets the default container fill color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`icon-color($color-or-map)` | If a color is passed, sets the default icon color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`ink-color($color-or-map)` | If a color is passed, sets the default ink color to the given color, and sets the icon color to the given color unless `icon-color` is also used. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color-or-map)` | If a color is passed, sets the default outline color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"The Material Components for the web 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/density":"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/button_15.0.0-canary.0ce81e115.0_1664561927669_0.2594456831537837","host":"s3://npm-registry-packages"}},"15.0.0-canary.3cc30f6ad.0":{"name":"@material/button","version":"15.0.0-canary.3cc30f6ad.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"bff1a52ef089d3ecb29de7138dd6d62cb2b5f68e","tarball":"https://registry.npmjs.org/@material/button/-/button-15.0.0-canary.3cc30f6ad.0.tgz","fileCount":40,"integrity":"sha512-dIL9fczBWn4Rg7Qwc2feZZSGW3zjulMONhg63yFdXE88biXzaMI904+3XlbUDUaCTk5GCumCoC5N7hpbKz34Ww==","signatures":[{"sig":"MEUCIQDCoNagII1/UMWsTOSE9wMrfUpJLNuK2WgxZAjKq2mepQIgZUf0JliJY2uW8Co99OrdjZ9A7TfI6HWTDpvv4oKafd0=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":642027,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjPGtBACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqwHg//Z7xxI1o4LIMpDNHG2u0w8Qxn7K9URMP2a/0k8qQel8PbO7Pd\r\nAHpdIq4PwaE5DjzrinS0mKRiqR7Dfc94wmWqZX6Tk7VbcoArA0MIrYdFfa5c\r\nylhlHKZQtc+1itOkezfvRZPcxiOFG9eSB7UU7EdLaFvxpwHdqgkngviO4IRv\r\nlfJKMYPlQ3CTI9hNg34RApIb7jt7Y5zesLtUuBrY6tou9FrOyJW0L/2ddqXT\r\n27BjCGJ1Ra4gEJUrQIwA+ZYufz8/ORErh1WmOWOjujNM9REZp1nA/iYuK1Cc\r\n+9SF5U9k6xhLdTTJwSoDyXvMNDTsidIu56pzlp/A7UjFOZTA+Trx/rCb2ls7\r\nH4xac1+7Txb80K5ZpDaDyM2Ch5pkXG/Y5IdiDpehissaK1VnnVlRgvaDYWw/\r\n0NXq9FQ7fJrPyZZREPNMdFtQcQ20/W+pF1TlkDvVisHWhcpuW9n/jkinH1kk\r\nxoVdLpWF47kL5aWqElKxhZ2KhDsSyUTkqzUc8Z5clHi7xt57pPTTLwWRfVal\r\nnBkBU+rWTCwymhml9HaEQsRR4Ow4Cf0ROJiaFjRnhF3cdeZZIDph+B36v7F/\r\nlpKPry+jiuPl+HQia6+1eCCHtDoktiGMiDzsz6Rr59utYQ6bej2g3Y4nIOd5\r\nn2FxewQtAuagFhfr0Ktfwd/M7DP/QGE2k0o=\r\n=uMul\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button/styles\";\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nThe `mdc-button__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused button.\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.**\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n**Note: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.**\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button--icon-leading` | Optional. Styles a button with a leading icon.\n`mdc-button--icon-trailing` | Optional. Styles a button with a trailing icon.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n`mdc-button__focus-ring` | Recommended. Indicates the element which shows the high contrast mode focus ring styling.\n\n**Note: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommend always including it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color-or-map)` | If a color is passed, sets the default container fill color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`icon-color($color-or-map)` | If a color is passed, sets the default icon color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`ink-color($color-or-map)` | If a color is passed, sets the default ink color to the given color, and sets the icon color to the given color unless `icon-color` is also used. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color-or-map)` | If a color is passed, sets the default outline color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"The Material Components for the web 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/density":"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/button_15.0.0-canary.3cc30f6ad.0_1664904001484_0.7753530332667922","host":"s3://npm-registry-packages"}},"15.0.0-canary.d9cf98e60.0":{"name":"@material/button","version":"15.0.0-canary.d9cf98e60.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"7f0485a29ecd874b03910eb0220dc1bd2a4f7b0e","tarball":"https://registry.npmjs.org/@material/button/-/button-15.0.0-canary.d9cf98e60.0.tgz","fileCount":40,"integrity":"sha512-o1BppHv8p+VoSYqLn4DsmCGtfQa1hbPifpeBV0bD1VeQUaGROtWR7e9oMrWZscKRptbBPrzf3137CE2yfXuqRw==","signatures":[{"sig":"MEYCIQDdOUVleLFz5fumHkydrbzLkNQ5g/eVo96kG6zFYzwQgwIhAInFQWUXwwP+Dp3sxlwKb5YTZgzBWhs6yz6Gj/Lom998","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":642027,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjPIO2ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqjLg/+LKR+8iFZmmHv2H5ENUgPH/n5ILwLAsdCdj2wj8FGs6TJC8Ol\r\npQOiJCBQDUtnoTmD4C6DG80h/dw7Mrs6lWMgKcJQZSe0Jv+pgOe1WgqstueU\r\nU2s2gWqT0oV+iEuMvQVpeqd/ba8fbb74OlSvPXP72uajSNSsEQh/LYjX6QiV\r\nt4aiIasikm11snNws30iJVq32M1xfDoOaXqZJFJN0BAk50Gj9ZE8Y/guqIMM\r\neYeXh4xW5ds8lwMdIj69u4OTUCq+KIThAU5mkT+tuuz+frhMiebij0sVOT3h\r\n9rla8bK/VMPXBO9/VKXA5WDg8HfUhLdfnND7ZJGRscVtzDMVoTvO4rIUZr6z\r\n1e5MIG5MdvRaFObxufOG6i31ekhybOYgQ6RjC3vzwDQmvFJ0J6ib6U8jYs3b\r\nw+cxHWza7La5qIJbXTwyja33eAxPD81xh6dgQbrqJ5Th36fW0I/EqelLFFYk\r\nJd1pTYVAlFMr1ja/MolIyOBLvkE6KqKqGTh7CtHyX03+hSASzHfEZLZHvArO\r\nUYW7injUf1mcih1TXnHv18GqGU0PKKHdUh//m21sJaD20STA3A2bb3ZGZozA\r\nQFyp6BXaJuYz0KmmgoC0zAwdtDcgFnkK/U7Pupgy00x6w2CBfS1pCr8+AaOg\r\nikwl0t1QRRt/b14D1fSVA9AtDzs8psibWgg=\r\n=gJtZ\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button/styles\";\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nThe `mdc-button__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused button.\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.**\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n**Note: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.**\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button--icon-leading` | Optional. Styles a button with a leading icon.\n`mdc-button--icon-trailing` | Optional. Styles a button with a trailing icon.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n`mdc-button__focus-ring` | Recommended. Indicates the element which shows the high contrast mode focus ring styling.\n\n**Note: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommend always including it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color-or-map)` | If a color is passed, sets the default container fill color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`icon-color($color-or-map)` | If a color is passed, sets the default icon color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`ink-color($color-or-map)` | If a color is passed, sets the default ink color to the given color, and sets the icon color to the given color unless `icon-color` is also used. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color-or-map)` | If a color is passed, sets the default outline color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web 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/density":"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/button_15.0.0-canary.d9cf98e60.0_1664910256977_0.40401442883285776","host":"s3://npm-registry-packages"}},"15.0.0-canary.d71935c8b.0":{"name":"@material/button","version":"15.0.0-canary.d71935c8b.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"d87830768521db24d1b4bd2140c1d75d99ac7f22","tarball":"https://registry.npmjs.org/@material/button/-/button-15.0.0-canary.d71935c8b.0.tgz","fileCount":40,"integrity":"sha512-0fdwaFh2mY4gd0MxXMYH1QinsEtcdndVwmCXHaurjrGgOCK7rdT64/hSVt06x/Afnn6n/MxT9czIip+MZqh6DA==","signatures":[{"sig":"MEYCIQDWy32xor9H53KBlIVpyDgb2MAi5+Goe8CT/yTFBNmcqwIhAOiYczZAGzTkWuaxi9jX4NE+DXjkB8v2bL8JqId+q3UB","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":642027,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjPo6eACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpXMQ/9H1femCgBvyIme64bLaUdFg+q71yXVVx1rcZeQvJZBr7w4Acq\r\nB6IUlh+HBILZta5mSZpozVWWGoAsgYKgtwVuW3jVNO7Nj9cF98xH/dSD4w8i\r\ndhIpyOAnV4SSmeRX+3tVUhYxVXG3NNS7Jgs4v6x8EQYSODbFDcxnorTwUu36\r\n3+a/vwjHAJzCdG47YTGl3Pt8nAa9R5yLvCMAX0tfwTAA42w+xQWVDXpQmLyD\r\nZn5DtBP4QKP8MhNqj91IzLAM1BTZ8Dp/XXgZ4MzeekXHUfbl6xJNEhdHBYPX\r\nrdYqqoo5thxEZvANnzpo4TWMIKk18TgKTlFtaQk+uGs7ekpfAYjepnfwK+Gl\r\nClg2oX3rfoYOYXtqlGaTeav1Kf3A6LUYSYbOUV+OTVnLhhVuQU/IGN53c8My\r\nGzRWiNKzBQeD3+8xRyMW6y1kOdLs9xj8z9XoEHs/PCsVnqmCy2T778Cwodry\r\ngyZvlwtl1jSRaMCrXjM+z0HlD4vhRpiM2ayYqzqslpKpDYd2LTIxQ9icW6je\r\nr9aUNkzU5xaMol8IK8nNeQ+yNKxZV2xEOKpaUMn2mHkvHbl8H3zV3L34sYAN\r\nPG/Zr5lLQdTG3q5gWZRmnY/Hwvmscev30t6OwUP8wOrD53d4PjtgaFkMrleD\r\nwrevVKeEfPMdJ3Ni9RMor0IurpR0kiEPh+M=\r\n=JpSQ\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button/styles\";\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nThe `mdc-button__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused button.\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.**\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n**Note: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.**\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button--icon-leading` | Optional. Styles a button with a leading icon.\n`mdc-button--icon-trailing` | Optional. Styles a button with a trailing icon.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n`mdc-button__focus-ring` | Recommended. Indicates the element which shows the high contrast mode focus ring styling.\n\n**Note: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommend always including it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color-or-map)` | If a color is passed, sets the default container fill color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`icon-color($color-or-map)` | If a color is passed, sets the default icon color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`ink-color($color-or-map)` | If a color is passed, sets the default ink color to the given color, and sets the icon color to the given color unless `icon-color` is also used. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color-or-map)` | If a color is passed, sets the default outline color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web 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/density":"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/button_15.0.0-canary.d71935c8b.0_1665044125778_0.8120014962205542","host":"s3://npm-registry-packages"}},"15.0.0-canary.49c56a25d.0":{"name":"@material/button","version":"15.0.0-canary.49c56a25d.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"96c77ac0525b9f508f30597a462b6ce5f36e5a89","tarball":"https://registry.npmjs.org/@material/button/-/button-15.0.0-canary.49c56a25d.0.tgz","fileCount":40,"integrity":"sha512-Gq5rVAO2Vpdo50mfBovy8HAv2wCFnjigxR86LO7+2H9+Khzl3P6T/e1YQQY+QFnnnBH2hvIuJPbHY5Vl4Z3+GA==","signatures":[{"sig":"MEQCIGZ7Tp2QHAyLUKrMz0pWJSgqauTwvjxiVxKvDsYDglhnAiAhi/Tl/zy9qaazswfI16Kr+Z5uOJY+ZyfH312NOWybeQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":638751,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjPyOwACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoSuRAAoWgcrLEgF234M4koSpvp5S/BnOmEuhMhK6NVl5Nu1DrQ/K/0\r\ngFy9XiKMboP9xQDB8TBVaU25KeQY/l9m7BMJ4Kl3otl/SzzzNYb2QtRpXwp3\r\nIvJMMXL/EtrDByozwz+hCMTRwAXqDEcVqlfWKUETrz/nP4IkOwrke+libc6u\r\nOuFKSeML3OZwuqjNzk40pPJ0u2CAOJYob42hg+ZFM33wzxhj0WOV7cigRhY0\r\nTbHH9UM1aGQRawrn1/DKJ6Aw5WuWWJFSPVFRLdmHA3NnLYu1ZnuKxvrxUSFb\r\nmSVzpY/Y35Yy0LNUiWyKE0txNcYiKUmIMICkYu2rbo78b3qw1eYca9fCrBxP\r\nDYYbGFvP4KvC3o4mN5j3Y689EFJ11izhRvcXE/OifGIMaVcRMBP0lME4SR0H\r\ns5IsOBWP4knQw5Bw4GArMpgKkV54JLOHh8eTpexyKDCTA8+zwjprrGD+PGYI\r\noShsoKXDbaotctYrLd1M51sYAArQ/kvQJohHLSKb0MHebkWmkAnPxTo4SMU4\r\n/E0ESDgHf81xwrb+Q2oIwcO/G7QYNsfgAjwmmkdrZqju7RYwDZEnUYiZfkHW\r\nv58YE1WOcvoeR9CAZl+p3ScMOeSqnzXfkOZmYdPkrzhiZHNr65pGmOgy21n4\r\n7DVk4LDhZsIsUusvKEd1agxjRwZ3v4wEEQc=\r\n=Id/R\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button/styles\";\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nThe `mdc-button__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused button.\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.**\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n**Note: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.**\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button--icon-leading` | Optional. Styles a button with a leading icon.\n`mdc-button--icon-trailing` | Optional. Styles a button with a trailing icon.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n`mdc-button__focus-ring` | Recommended. Indicates the element which shows the high contrast mode focus ring styling.\n\n**Note: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommend always including it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color-or-map)` | If a color is passed, sets the default container fill color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`icon-color($color-or-map)` | If a color is passed, sets the default icon color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`ink-color($color-or-map)` | If a color is passed, sets the default ink color to the given color, and sets the icon color to the given color unless `icon-color` is also used. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color-or-map)` | If a color is passed, sets the default outline color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web 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/density":"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/button_15.0.0-canary.49c56a25d.0_1665082288546_0.37376116670537174","host":"s3://npm-registry-packages"}},"15.0.0-canary.07acddef3.0":{"name":"@material/button","version":"15.0.0-canary.07acddef3.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"79339d318a0867e0a1e7dec3c05b68e9c8dcc1f6","tarball":"https://registry.npmjs.org/@material/button/-/button-15.0.0-canary.07acddef3.0.tgz","fileCount":40,"integrity":"sha512-9Z2tH2gPDIWJm1CM3zq9bIt5w5B3EMNqVWKtiBUvrBEYcdQ69owuuA7x+32iWSjkA5bEwSrVsnhPY0ykQLYH2w==","signatures":[{"sig":"MEUCIQDULEW8RMUeXPpfr9X4tjIFDxpDTNkTukb99rJPuFhU5wIgJyuMNoe69rl26Ev99izxTeFUPHB8NEhkPVPflSpJmb8=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":638886,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjQJwsACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpDbw//UvAP2X4AxMLBLYkEEqPVOmjTCpLxtR52p4GWD6pKp3n9914h\r\nc2u8EqIC1avtz/MC4JmGBh6BOTAzRPZWCwAnEjHYG8syvXncyOnMTpy17rx1\r\n+i2/rJPCL/+QlwnXIcu82O6qj+/lmQJNKI167Q0hmPs7Gbj3wHPS9JbuheYr\r\nqouNvTroNjriwUD2wRa35a5gkEZA3zg+4jOSm7PWOOZaf3D7N+eSdtYVNHao\r\n2Op/WXL2uQnTEhHUa2VRH7LYYST8qLQLLTNT9cC2pl8Ji9gPeNmjw47rv20r\r\nWa4gsU3cgPMV2qtX7WcUzkKZNnohbdNDI4R4BiKaNZB5904GLvUaaIeETqm9\r\nw6xEks/OPjwk2lU+xTASQaQv7EjGKbcCEE6cxDQW4j5L/8Ihen2A9XM51+xX\r\nUG8cua7kZPcKB+JhFxzD9KKVMAz8PRCnaU/aWIuORfIdnVGirS2+LdS3e4qc\r\n4aAJfY1rnjoe+yvBNaauHavLYejg3EN48XfOKBtQR9126K5axpYOFJaZ22aD\r\nN0p+mqqHIVu1gwpqF9SMQ7FOGrt00+SX8m0hryVeSzuZAkvVSLSk/S1U5WE8\r\ncXr3KSdXd1VxcL64s8HN1y/VknYV7y77AcNi70qnUFXA5hSz/mRs6q/Nhrpb\r\n6LMF2/fa4dVN7JDZq95oTt0YY3xaN22BaP0=\r\n=MMJ9\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button/styles\";\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nThe `mdc-button__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused button.\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.**\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n**Note: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.**\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button--icon-leading` | Optional. Styles a button with a leading icon.\n`mdc-button--icon-trailing` | Optional. Styles a button with a trailing icon.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n`mdc-button__focus-ring` | Recommended. Indicates the element which shows the high contrast mode focus ring styling.\n\n**Note: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommend always including it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color-or-map)` | If a color is passed, sets the default container fill color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`icon-color($color-or-map)` | If a color is passed, sets the default icon color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`ink-color($color-or-map)` | If a color is passed, sets the default ink color to the given color, and sets the icon color to the given color unless `icon-color` is also used. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color-or-map)` | If a color is passed, sets the default outline color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web 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/density":"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/button_15.0.0-canary.07acddef3.0_1665178668176_0.32277635201987387","host":"s3://npm-registry-packages"}},"15.0.0-canary.1c74eb2c0.0":{"name":"@material/button","version":"15.0.0-canary.1c74eb2c0.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"928764ed8a490d649d0c4ba5e427479c11761c57","tarball":"https://registry.npmjs.org/@material/button/-/button-15.0.0-canary.1c74eb2c0.0.tgz","fileCount":40,"integrity":"sha512-/vCStS5+F9LC3TaSfl6LAciTIe3RtmJnsgO0SJh+7lIfqFOFq3Yihs/JCBDVp9juEBGUYB+TiukybFz96qRVcg==","signatures":[{"sig":"MEUCIQCrNbWDDRhLsM3jepLqTP8o3+t5MVg44w4EpMbhMPSZawIgGe4atBGf4NsFovG31E4ndPLpWnkivZ7YVeTwxLT62uM=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":638751,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjQKBvACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmojhQ/5ASeRgJIrXNbzQAW4gQMHsu/uaPooOziJ8w3FPooNB/GN8A4r\r\n53w3fAFdH7JGftg2e4iXasuNRelrD9ckCa0uxl6CnXgu1yFWeoA8y9DnwBgI\r\n07j2W3yK1Q2NFxM9wjukYwycYCB4fRV/nD9vInzy0bqfmyAqrooYSOOopEij\r\nRMO4VZdRV++XPEMt2l/Ju1u0ecDATwlwaL2dRNXrDYhWmCIKww2sWn6UUvtF\r\nAFe7xFMjX0/hN5UE3WZslxQTnJ6u8dRNHUnMqAQFFbqcYIU63QuLsWYXH92u\r\nk9fHFlekdK6Guv/K+HUhm92lUXBeaFYV6Na0YwOgu7pISAfJpjhNzItHzpNZ\r\nmpXRLRfSD/I9k+pQVQKtfIsSEDF6NqUw2s4PL3bgw4hO+WVP/ONmWSk7D0cv\r\nuynhHN1Sd2TCzMYJSIiagc/x7u7cELHp66PHyNUxUsGWPIypWWQhHJk39hSx\r\nr+3HBAZe0t4CG5gdlA+zOZcg4M1EO125t6V/Bd/N/MnVvttSqedN3Ku1Zu/X\r\n4btxWC+BSz4x3fNRwqksjgsdc8c3weyATtEfduBgCgUTI000bxE3G2CsIQQz\r\nMCOC/+vacim9BYpp9hmaXrMxTNgrYU5wKq5aLZPOsI5ESr7YrBAZY3JOl7bm\r\naXdip+vu4AxaaRPJhygDAAYbHqe4x7X9Mks=\r\n=TNx9\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button/styles\";\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nThe `mdc-button__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused button.\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.**\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n**Note: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.**\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button--icon-leading` | Optional. Styles a button with a leading icon.\n`mdc-button--icon-trailing` | Optional. Styles a button with a trailing icon.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n`mdc-button__focus-ring` | Recommended. Indicates the element which shows the high contrast mode focus ring styling.\n\n**Note: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommend always including it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color-or-map)` | If a color is passed, sets the default container fill color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`icon-color($color-or-map)` | If a color is passed, sets the default icon color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`ink-color($color-or-map)` | If a color is passed, sets the default ink color to the given color, and sets the icon color to the given color unless `icon-color` is also used. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color-or-map)` | If a color is passed, sets the default outline color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web 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/density":"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/button_15.0.0-canary.1c74eb2c0.0_1665179758240_0.9601947189389692","host":"s3://npm-registry-packages"}},"15.0.0-canary.dadfb713e.0":{"name":"@material/button","version":"15.0.0-canary.dadfb713e.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"99b02c81d1cdff69bdcfd62e42eaab8397d7cd0a","tarball":"https://registry.npmjs.org/@material/button/-/button-15.0.0-canary.dadfb713e.0.tgz","fileCount":40,"integrity":"sha512-qNB4KVmlHy4lz20qKFt24csPprTNfSNp6zNAlAiVIF8jv+DDe1DcgEThTdfIwcucC+MxTyiT+DX46wTiya8AtA==","signatures":[{"sig":"MEQCIC4sehL5VKsBrvBrAc13r1f60kFckwDfdMTrgpPFy4ocAiA+3B7ktllDeT32N2ffzmVi55yHJqjML2FbEBuc/JjdHg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":638904,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjQQU5ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmotNw//ZhnZgw7THh3R87ecpU+2V8RHR4kCPI7n+ilUwx9yY2fm0OXv\r\nwyl01hhFFn/Us0mTy+9VAs04BNmKJH8mfdc2JJuQMT+y3RAmJp1e6uiu/EtS\r\nKiwmVWChcBzZ4bJND+lZXZ0aGsuKN0/qvlCpjw7CiWjl+lNq5cnhSbq5vjB+\r\nWD/9fKBnAjQkIOjdJodGghlgU7tQGBI26BiWi041ulr6vVKa+azkuXxa9esU\r\ngOEtonYAI9n6Kcf/lH1LcP5vCpzRTYwYZ7aGD6YfhikKoFFLFe9WB//3D1nJ\r\nBwOVaQscrdT38YIwis1s/5sbDlT+4eGp5JlQ3Yd89aBiUQbszvyVggzVrFLG\r\nueb8AIODX/YZvzEduIhCV0KTfMz6lpJB5R2OzAwjN1diNdRl75xrJGtzN0wb\r\nT9nloQrrJ06f7srID2MAaC/Z6RW/p518+CkBFyayvvlJMB00MD4s/8ALQYMZ\r\nvAre0KMBA/PaX5jIvM5BJv/XezRNyUU91C5YLmPHQutJqr5dPws4D5GkagQQ\r\nGBF9+dvwUVxQsjrLeBfPCy9JQMTHJMiIfRUm2NVFSCRYPCkno+2XfiEkX6rE\r\nbfLQWo/izBqgplcavJGuKaTYx/EQnA7tMI9/Np8uwdyEoUZZrBLleqeJb5qz\r\nt4nFxXfQAAOKLmN/d94lTSXXvrFgkX14ij8=\r\n=UWU3\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button/styles\";\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nThe `mdc-button__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused button.\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.**\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n**Note: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.**\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button--icon-leading` | Optional. Styles a button with a leading icon.\n`mdc-button--icon-trailing` | Optional. Styles a button with a trailing icon.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n`mdc-button__focus-ring` | Recommended. Indicates the element which shows the high contrast mode focus ring styling.\n\n**Note: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommend always including it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color-or-map)` | If a color is passed, sets the default container fill color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`icon-color($color-or-map)` | If a color is passed, sets the default icon color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`ink-color($color-or-map)` | If a color is passed, sets the default ink color to the given color, and sets the icon color to the given color unless `icon-color` is also used. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color-or-map)` | If a color is passed, sets the default outline color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web 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/density":"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/button_15.0.0-canary.dadfb713e.0_1665205560926_0.2546526290781379","host":"s3://npm-registry-packages"}},"15.0.0-canary.395f1ce61.0":{"name":"@material/button","version":"15.0.0-canary.395f1ce61.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"9a6aa6a51251e66ae04e749882a066a8197b0639","tarball":"https://registry.npmjs.org/@material/button/-/button-15.0.0-canary.395f1ce61.0.tgz","fileCount":40,"integrity":"sha512-NtSH+KPcIYvip4ZbQfaByPvsbywJrcGla9L++2n3dDhcdvr7hcDNK7EWl1JRdH5qhlCHHZnoyYM/7OucQPJ8Sg==","signatures":[{"sig":"MEYCIQDhWbPzMY6Xsgp0RfJi/KHnp1OCMEy9xt0a3G8PhXFYQwIhAN5hWlr+nAeEzVJRZVAM+buJ/5kgD/9xv+h2kvYE+jXq","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":638886,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjQQWzACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoweQ/+NXS1yMeL9S5hG8R3Wejgl/Jto8fxJYW9sphu5DKz77PgP6ZG\r\n7vtm3402b749TLIu4xRQiLVYtiXBQygHivpIEyq767fu7jqNTJaurJ2+N7FC\r\nlJGlg/GFthnlizSQUvvELg8hbxEnY68O6cwCH5WMr29vaisz8y4ObpS6ekR0\r\nB8ozAhkmvoe54OmlItLumVzqB8WMsZfS00eND2Tbiuh8yzVljb5SMDq1X1dI\r\nQaTE/MggM2pPWmS5CnFKuI/k5Hn3QHxnk+lyke9MHmiUDDNfp/pO2nzVpYbn\r\n4EnimtCXhuWNC9KQEDhXYjwrTC8CWIM7ZPJQF4AHmmdKnJj7WihYGBYPOmsd\r\nxtgQD0T/gfNFi8631EawbgaIj4cfFtuJfgD5YSUjmNuvYogD8CxqwB1Nrh4F\r\nYwIGGI5a1ZCEpTNDFf6LqOcGw67QB5W2bOYxHD9H3MwDQ6MqVm5ojyaNB6go\r\nca2O0uDP0l01uiJRsNgc1F/B4sshceKKuDVQBY+wrCs/u0wAXwNp0JnGjmAj\r\nXvcwK0P1rZ2L0o+jQ0RUVuVXn0SE2KIBbKEzLeoix/CLvlY4AIw3sGXRWneD\r\nOzp02L3brbRMps6CyI0aqk8tLaU2nmxxjmp9F2kj44yusLhrjMxWvbTMbaRB\r\nUYqwP0jJ9fBfTUmRLxlmf6kPPQ2K4KVgkUg=\r\n=tE6y\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button/styles\";\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nThe `mdc-button__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused button.\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.**\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n**Note: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.**\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button--icon-leading` | Optional. Styles a button with a leading icon.\n`mdc-button--icon-trailing` | Optional. Styles a button with a trailing icon.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n`mdc-button__focus-ring` | Recommended. Indicates the element which shows the high contrast mode focus ring styling.\n\n**Note: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommend always including it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color-or-map)` | If a color is passed, sets the default container fill color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`icon-color($color-or-map)` | If a color is passed, sets the default icon color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`ink-color($color-or-map)` | If a color is passed, sets the default ink color to the given color, and sets the icon color to the given color unless `icon-color` is also used. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color-or-map)` | If a color is passed, sets the default outline color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web 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/density":"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/button_15.0.0-canary.395f1ce61.0_1665205682701_0.20122378092911508","host":"s3://npm-registry-packages"}},"15.0.0-canary.e741b5c82.0":{"name":"@material/button","version":"15.0.0-canary.e741b5c82.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"afbdc1c8cd70d94575ad707d35262531f65855ec","tarball":"https://registry.npmjs.org/@material/button/-/button-15.0.0-canary.e741b5c82.0.tgz","fileCount":40,"integrity":"sha512-v36hvAT+KTfOGUau1qD2V6d7PT3JPsepKOy7gI2DRoLIWK3V5mmDGWFXdjIrnDXAzdZybhEuFFZVBbzXP6n67Q==","signatures":[{"sig":"MEQCIBoFBMLl3rLsmN+4yX0pkqafbOdUGOm0H5f+fTIOJ9RSAiAHCfc8+IsRQhFx2kIplzYYD0UYCu0xZz0RQxarZic7+w==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":638904,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjRFiIACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrP9g/9HPnfOL8+xOZ9+rnB0vpx/fVr/EtTQdfouDK2E1mi7JmJRns1\r\nDdnxlRUdvCKaJavFbSf+PNv6Ipj4K2g6Eh+rNxmNPUKlgHo0VIJQLEiUdbhJ\r\n9wxpwO7Mo8MBNktBH9M3GKhf2f+lhqLeKJCN1Z4Z4IO+pgvvtMnd76BN/CVT\r\nrrcP86RjgFDma/0KBFn3bhUVbqsF3rKr5Pt5WRVl8T5lYb4FpyAdzM9Sy/lf\r\nGjeH9wxVj1sayqiFnLvIuYYnmnR0V9sNdQCYSmuA3wyG5fzdq1fBK+evqyfE\r\nh+9eypxJRxOV93qqqWK+K7cLW4q9KeTRBAEneexLFArEL7hnsRp56knVSsKs\r\ngb3EaXWV5i/VLWbwH0yBr5EOui2FR5+NRr3u686rugX5K4sgQ8+LaMKa/7uF\r\n8RAbMig9jXuUsKI6fBPqQdLIEr8FTP1jNPk4ucL8f0ukeWnnQIlg9B1J31g2\r\nyDszFwB3+ap5v+RqUQjfwvK9SzknC00qzBtEME0PqhJtAVpEdrOT+r03Qu2t\r\ntdduBHPseEH04G4A2/W9+DHbKMlHbVAfbxfD1UNfyiSoixfLOO5ZiigeCLbu\r\nAyKxbrRtMM8vI13EsIc/XW4L2zjSNnwwUH2vW3LMFIjmhka4RZPT5+NUdouz\r\nzuER2MlXmV+cerj7MCQ/YozGCA5kY3F7I/A=\r\n=9AcE\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button/styles\";\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nThe `mdc-button__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused button.\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.**\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n**Note: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.**\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button--icon-leading` | Optional. Styles a button with a leading icon.\n`mdc-button--icon-trailing` | Optional. Styles a button with a trailing icon.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n`mdc-button__focus-ring` | Recommended. Indicates the element which shows the high contrast mode focus ring styling.\n\n**Note: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommend always including it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color-or-map)` | If a color is passed, sets the default container fill color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`icon-color($color-or-map)` | If a color is passed, sets the default icon color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`ink-color($color-or-map)` | If a color is passed, sets the default ink color to the given color, and sets the icon color to the given color unless `icon-color` is also used. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color-or-map)` | If a color is passed, sets the default outline color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web 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/density":"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/button_15.0.0-canary.e741b5c82.0_1665423495767_0.851530907910963","host":"s3://npm-registry-packages"}},"15.0.0-canary.582f3cc1c.0":{"name":"@material/button","version":"15.0.0-canary.582f3cc1c.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"a1b17cf289610ad03c3f09eff261760e43e67acf","tarball":"https://registry.npmjs.org/@material/button/-/button-15.0.0-canary.582f3cc1c.0.tgz","fileCount":40,"integrity":"sha512-wZXbL0Bpkn3PA6f2X2KbI0axfn64fJD46E2v5Qkj2eQF9/RTkBo7rHi8DaUU7SS4EqPp4WrJiZjGlxAZZ2Bo/w==","signatures":[{"sig":"MEUCIBW0DGhPdz7x/nV3H2yC7RXkvAKiF06zttpm3yo4RqsfAiEA5Zd/0VetmhFEtMwO1NPOZeDSFhgaF4kqWF4HnQnlFu4=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":638904,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjRPXJACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmojkRAAj5DBX+135a66MFNZgGEcDh3JAJtvgLMw7eFTr4/hLB7s3H5b\r\nAB0gjWJYsbnIu8E4CIV+z/3rwWPMC/Rw/hVgcsQUxJkloE4HO3t5id8UGnqL\r\nWQexi5chu1WNlo4C3Mf9/9oeRd3g0g2iqeP9ABbud3Vgy04b/YZm64oHCSWr\r\nk/zU2jQa1Ju9/PFJOrUg2F2WPvZaj5ekTQFNwIQTUCj5rcoG1tfeuV0RLVBp\r\nl6LFJh+SO4CYBhnjMgeHjuc7NEokx9cn061w5mhRPy9jjRy3c0FJF17xVWbN\r\ndMiZNxXTvJBkorQ+fwnRAgb3fYp24mIIqBLm1utFbjJZsIiY+cWfkPAAJYvD\r\nkXubnNsvyX0bksU6N6a4VjYscWNkkiujjCVM9zikqff/oZPYi4s7hLfu0Jdr\r\nOhMOpaHmmDlDCTI7ZVP6abPTycMBLuC16U4Y1w75OvFdNWzzRC1LWTzAHAy7\r\nFLnjIvGtPC32icY99VmUQq5m20cjFKkvgu07RP9EdAtplobr85CN1ssqTnYv\r\ns8GTY78R/U/wtEFYEt02eyeaqCjV+RQ9JYtwlOnlD6A5Oos5pIycJyRNF4sb\r\nEO32FL89JfsksR/L6YhNYd1kKiFAeYSoTf6Bddranrng5lm6ZQqDDYr/TONi\r\n6GyazgS2ZIN2ZxQH1qd66NFYpwU06TIoJVU=\r\n=MU7t\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button/styles\";\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nThe `mdc-button__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused button.\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.**\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n**Note: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.**\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button--icon-leading` | Optional. Styles a button with a leading icon.\n`mdc-button--icon-trailing` | Optional. Styles a button with a trailing icon.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n`mdc-button__focus-ring` | Recommended. Indicates the element which shows the high contrast mode focus ring styling.\n\n**Note: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommend always including it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color-or-map)` | If a color is passed, sets the default container fill color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`icon-color($color-or-map)` | If a color is passed, sets the default icon color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`ink-color($color-or-map)` | If a color is passed, sets the default ink color to the given color, and sets the icon color to the given color unless `icon-color` is also used. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color-or-map)` | If a color is passed, sets the default outline color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web 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/density":"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/button_15.0.0-canary.582f3cc1c.0_1665463752986_0.7892370422235004","host":"s3://npm-registry-packages"}},"15.0.0-canary.b1a6e3e88.0":{"name":"@material/button","version":"15.0.0-canary.b1a6e3e88.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"2237ffebb9a20dcd311e16efaa354b613bf86fc8","tarball":"https://registry.npmjs.org/@material/button/-/button-15.0.0-canary.b1a6e3e88.0.tgz","fileCount":40,"integrity":"sha512-fonYjHgF+B9WAFlNoMa5wvbjzk/gGeJxlP7ujHwtlfkaRnaWfLjEtzSPPD5shUE6YqCQYuLNxN2ELbOVgtX/iA==","signatures":[{"sig":"MEUCIFI6uul7UxDr5+F/6g6a5M7vR6YH+tdac2iy+c1g7W9GAiEAtPeP2ws8edjY4Z+LbOsHRsz2SBPCKZr6o3hD3xWF4z8=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":638904,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjRqzYACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpGWw/+N9qeFYk5QlfqmXAbgDO5skTkOo6DAUpLde1R3X9icGBsHDwv\r\nEc7hcy5YECsW85M+OG3BAg1rQAC/AIUKCVGxvl25wJHVwi/Zr6V/+mby8ctG\r\nX+m/QWICSwY1KwocEJ+T+HhBS9u7tQkFBwikQ7ztHS3woQv2sk7sya9le5qb\r\n9xUFFwbpIn52eus/lXkKKqwayVjx0Jwn4dvTXYnQT+C7Uvrco5EH5WDzziUo\r\nJ1wcjxlBFgE3cVqu7owmQubvuYFRvI3AhMjvIwHzCJIu5SPgcUrF0HM16Aes\r\n6lvNcjV8o6yvzXW36ZFQtGyzV39uO8Hg6nJ8EAr8gmDjKxX0scK/w9Ddw44I\r\nzn26+tukvcJ562cl46EFCe6GR+NRwpdwa+0Awc7RUmLtJyt+XPr7TOfVFZ6u\r\n4k7XaRo2tzYDMVEfRYqFwauth/0lLniR/7PTPbuSJ5/0U79PT5hT01MWtnxT\r\nXX4n36u7yoCEnpHtAjnPKfccy/3tr3NFlqKtfgAqFjifYSoLOvubN8cUhKs5\r\nicQ1SmHF3HFbQKdYZ97YpvaZkJbKP8xrk0BL40fvEHwiU4i0B61Jd1grC5nN\r\nxd+a55d8yvc7skfktW/vthwC+iN0tXXHC5n2FRTwAaAr2FkzcVsLXIGvYItI\r\n69ZqeCXoaC/C6TnDBlkqcer35+pVxYlq5Js=\r\n=m88c\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button/styles\";\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nThe `mdc-button__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused button.\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.**\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n**Note: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.**\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button--icon-leading` | Optional. Styles a button with a leading icon.\n`mdc-button--icon-trailing` | Optional. Styles a button with a trailing icon.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n`mdc-button__focus-ring` | Recommended. Indicates the element which shows the high contrast mode focus ring styling.\n\n**Note: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommend always including it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color-or-map)` | If a color is passed, sets the default container fill color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`icon-color($color-or-map)` | If a color is passed, sets the default icon color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`ink-color($color-or-map)` | If a color is passed, sets the default ink color to the given color, and sets the icon color to the given color unless `icon-color` is also used. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color-or-map)` | If a color is passed, sets the default outline color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web 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/density":"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/button_15.0.0-canary.b1a6e3e88.0_1665576152208_0.43374219710603756","host":"s3://npm-registry-packages"}},"15.0.0-canary.c9b1a31e4.0":{"name":"@material/button","version":"15.0.0-canary.c9b1a31e4.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"69cc17e470c3aaa0308bedf17d6927f0f6abee59","tarball":"https://registry.npmjs.org/@material/button/-/button-15.0.0-canary.c9b1a31e4.0.tgz","fileCount":40,"integrity":"sha512-oq7ZJe4OaHI90gzcgLqsVhl46M3kwJ3CImRcYh1fkz/htCZNaxH4f2/8xyfHPYOXGk6xLV15niZYK9y/NiEbnA==","signatures":[{"sig":"MEUCID0K+zayDyyPwix5bI91y3RxnZFyTdUUEc1vUF4nxubsAiEA8mQ5DnK1eUFjJaXmjNQbRWdmKZwh7ekOmarWlEoc5z0=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":638904,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjRvJDACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoV4xAAnOdyG/7xDJn4uahJ8uIa+nxkbZIglw+OuD0unNNTQnxKckR8\r\nBVGayo8sKfIfNbUYHOUgF3M4Y4r07loh2R+2UJDh8IPUJsGDwTSQhY6blPSK\r\nzaPI54fgk5nQi11qVRSu8frlEadGRPpdua6ZprBfQWjPot6HrGPe8slZYmky\r\nkvHw/6q64jzobz2/sWXU2MGiypHCLydCIqVUQNmQvGvZlf2Dl91iakCyS3as\r\nmbEjKthHO77L4SiM7gggrLbHPQ+wKgKgI8r1YAQrZA+1ozj/w7VarVbwnp7p\r\nzWjBK+rSZsn9t9SvtSd9M7vbcHPu/lsEQT4rFaYoLotlt2Q5kpe3ozpitEz/\r\n1leIistrs5XbA6hPCB+ynKn4A62xtBV0CZF3eYSuuNbm3jm7E+UrGZYu3aCh\r\nUJDOIwyQS11RiIQ/AcP5QH3k2rM+2aUfohaaxE7HSPOYA9P8Yhh2TJZNazQm\r\n/I88Crqz271YQUhkTsuqg7WPIbTDp3SgF09coTk178u/TSdNqurI2FNkhUMu\r\nwl2C/EV0koOg5ZpkjkETqbQTjQMMecmsRNAO5kCWuIXMMgoeXjNjs3QS2Giu\r\nOhZSC+xeTwv9BGunwEXmGT/vJNYRsD0Or+3M0MQ5hAX8FTgpVjOkyNI9DHWC\r\nhCcHBwFbIp9V+WvcLEpoyNAiuPNIef2fw+A=\r\n=M6jn\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button/styles\";\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nThe `mdc-button__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused button.\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.**\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n**Note: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.**\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button--icon-leading` | Optional. Styles a button with a leading icon.\n`mdc-button--icon-trailing` | Optional. Styles a button with a trailing icon.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n`mdc-button__focus-ring` | Recommended. Indicates the element which shows the high contrast mode focus ring styling.\n\n**Note: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommend always including it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color-or-map)` | If a color is passed, sets the default container fill color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`icon-color($color-or-map)` | If a color is passed, sets the default icon color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`ink-color($color-or-map)` | If a color is passed, sets the default ink color to the given color, and sets the icon color to the given color unless `icon-color` is also used. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color-or-map)` | If a color is passed, sets the default outline color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web 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/density":"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/button_15.0.0-canary.c9b1a31e4.0_1665593923597_0.5860192290839017","host":"s3://npm-registry-packages"}},"15.0.0-canary.13e9b0d1f.0":{"name":"@material/button","version":"15.0.0-canary.13e9b0d1f.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"b04dd51f21549031176b7cf17a363415a4042221","tarball":"https://registry.npmjs.org/@material/button/-/button-15.0.0-canary.13e9b0d1f.0.tgz","fileCount":40,"integrity":"sha512-g2r+Xi7UcwewKyH9/GiKUcYsdvZ8JFhHzcNRWtkL9VmslHTDjpIsDh4g/pjA+FCoL06wzmFUfZVfzU9p95Y0UQ==","signatures":[{"sig":"MEQCIGaWnrpPIh064guqxnkxVBbFRhBnTULJoHt0cuF1E//4AiB8nGwZHH6ZCRYXX+JrV/linCTETuOh74LPJUKagBkw1Q==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":638904,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjRxOwACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoFkg/+KTOT63SQb9XKnqPYjokLaN8mUUt6p1XArLP2SRMIbaYgbMJo\r\n7g6akTT53M/iYwZYb+447cHVMxlKXdhwVhSxbvG2Gj0d6xaxcvrqIV2jSisn\r\n3renSY9Wddu87BW8d3DdFuvF9cqcuoCb29En6cyx4ahCa7MYHyG5CrBR68Ep\r\nark7nJsG/5dChddjE42w64UJ0WlszcmgE3FBE4KHonNIRYpadn5U1h9UHayB\r\nZZQojvDD2RGbXa2SNt4o/WvyRb5xGYxd59Iz1PbwWcAj/+wIFdIVJhuSBIZs\r\ndZPjinOSZ1qqDWQAHHonlTuAcHasMN7wBKIb1LvguHzgnGHXmNlCS0yqBJva\r\nLrEeNhQtJn97mwPA36bONANoKRRpzrQDHQHgSTPr7eSajtuLzBK6Brsz3KCz\r\ngIyVo74SMkM+njm1fZx0q4Hw3k5pMfqW4JrA37HeBuZ5jxY4lJY9UgThuitV\r\ndMuSmvG8+87WOZwDkepwmSUceZrbN2NP/b5bXMMHYafuVKy7Fu7kAZ2BX/F6\r\neWPFyJ6x8RZ9RMUptZ6gDwYMyjkdwDb51vvre65h7/hJyQIx+ADQ4BWcRrJd\r\nsadDaXZCKGSDoKbM0hoEvJsA9hks9nFSPGsiI2vUbWGnkIMEPE0QBpBoiIW9\r\nvAivLBx5yYYRuTufbTxEVrFOGRQuBlvlYJg=\r\n=7VSB\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button/styles\";\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nThe `mdc-button__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused button.\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.**\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n**Note: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.**\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button--icon-leading` | Optional. Styles a button with a leading icon.\n`mdc-button--icon-trailing` | Optional. Styles a button with a trailing icon.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n`mdc-button__focus-ring` | Recommended. Indicates the element which shows the high contrast mode focus ring styling.\n\n**Note: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommend always including it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color-or-map)` | If a color is passed, sets the default container fill color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`icon-color($color-or-map)` | If a color is passed, sets the default icon color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`ink-color($color-or-map)` | If a color is passed, sets the default ink color to the given color, and sets the icon color to the given color unless `icon-color` is also used. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color-or-map)` | If a color is passed, sets the default outline color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web 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/density":"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/button_15.0.0-canary.13e9b0d1f.0_1665602480126_0.8542998854936168","host":"s3://npm-registry-packages"}},"15.0.0-canary.1dc797e7f.0":{"name":"@material/button","version":"15.0.0-canary.1dc797e7f.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"c60a0e056fc3221705f1c736ca2d418a95240ac8","tarball":"https://registry.npmjs.org/@material/button/-/button-15.0.0-canary.1dc797e7f.0.tgz","fileCount":40,"integrity":"sha512-k4EmDYYWOmHGxCwNHwL4cdeEaRv1/KRBf8JPJ9OxXLxmjX+qeoGDPvX+cAqYYhvwDEc5KCQIys0oN+QGx8DRVA==","signatures":[{"sig":"MEUCIQCiJftOH/pwtMb+cC/LSh1VUIYTLyx2euFZEPYvEmmn7wIgVzZBDx5N7dwFky19DrA8beoEKNi2Y5TWmGiDkB7U+zs=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":638904,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjSS7XACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmok/A//XU+whnrWeC+Ycy2yCjxqjnUcixOfX4ewell2hNFmWH/YkIWt\r\nspxIa7XicHlghNNtJDRjgkuRq5DSf3sUY2unLApxnCj385E6FVtVgmurOH95\r\nnKQdTNwkQGHQ69oVLTP+It/CVHrPxPcWk713e616baUyo/0kpvr8XzjdU2SK\r\nBD6FSUsWhJshHD0mBOJ+GU7AL5CipwF/mLtIaqsZOpi6pR2OR+mdKMCvcxZT\r\nGY4gxT6hOuZhCxyULimjXNft+o3cCLx/VVKf217nMntytM5fR9pYh2iCSX1S\r\nw9BpS6kPeIb3TJNzz8SyghIc9FEwk3AXIddxO4tqPP2F5L+zXks1R+LztxeM\r\n45Hbrn9VB9GO/5szqP/BjwKdatoGv5SNQSX9yT8yDlP2UDHEyqx9SnokiNlc\r\nOTdCTEPzfRMA3evGbLJ/BkX4FkV/hMO590C/YSsXt8k4DsdqCC+ZHFVm1/O8\r\nnWVowmIOLK4yyC44UrvjGjVmYbYHPwA14wy1rRtIJCXUoDyFJX+P+3dLbYlr\r\ntxETKFuAkfy3ypamVPyy5wjsN+E9ApAZfL5jBOHjs4QnPFqk8wsxd3ZvhyrK\r\nO9WtY/OLRmArsHd/7Ixd5PbNIiUzAvuv9bDtUnIPXgYIlyfqVXUKITqaECvR\r\n3t9wgjDMPOTlXvd4p4GLkrTNMY9b092wMBM=\r\n=Gkde\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button/styles\";\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nThe `mdc-button__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused button.\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.**\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n**Note: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.**\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button--icon-leading` | Optional. Styles a button with a leading icon.\n`mdc-button--icon-trailing` | Optional. Styles a button with a trailing icon.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n`mdc-button__focus-ring` | Recommended. Indicates the element which shows the high contrast mode focus ring styling.\n\n**Note: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommend always including it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color-or-map)` | If a color is passed, sets the default container fill color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`icon-color($color-or-map)` | If a color is passed, sets the default icon color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`ink-color($color-or-map)` | If a color is passed, sets the default ink color to the given color, and sets the icon color to the given color unless `icon-color` is also used. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color-or-map)` | If a color is passed, sets the default outline color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web 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/density":"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/button_15.0.0-canary.1dc797e7f.0_1665740503525_0.6579180397231201","host":"s3://npm-registry-packages"}},"15.0.0-canary.ed4009397.0":{"name":"@material/button","version":"15.0.0-canary.ed4009397.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"6841b3d72e09d1a4b42c7e05904f5bc605f6878c","tarball":"https://registry.npmjs.org/@material/button/-/button-15.0.0-canary.ed4009397.0.tgz","fileCount":40,"integrity":"sha512-OGWOGFjDdGp36SUfPSqGJF8JVwGRZ9QAbIyOoT3Y20VesyQyAd0WKpmp579DYGWBtBYsc9b6IPa0qNpQ1rKpAw==","signatures":[{"sig":"MEUCIQC7+dCYHVL3VsgC1xUVmhoGp3RrNvESpBNUUYwlOiBt4gIgMKVLoOjmJIKH/K6Xq1LpTOhyd3EvTRrLCuMh2XADLoY=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":638904,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjSZOOACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrejA/9Hy54NWWJ995mpoWVkk8WdKrfTIwrjfBIy9Pqkpy2yknjQpmf\r\nKR2jrX+JvQmq6Th1SuGmFmLtm9Dn1JRUuGWqRUjDZAd3ID2pNhq0IbcugRMt\r\nDa2LWlouGb+rIbzr1BGYVT1cet2T3PnjDE5/Wmnno8y9F2vMyNEEHWjCB6RY\r\nDZWcV/RzG2Yk3EIXXV2KsfiwA+i7IrOA/VN8R0tpbhL3q3a0B34+xWf1T8/u\r\nwmz6uYKDws8FOFp2X1fDpCdWuE8cYvarIS1iO2Ht+NujhYElhbhhegRq8UHZ\r\n0c5D7G8kunyyUNg2JbXSDNmRJlzEUpfs/jhd+Pzfd46Z03erA65zR5qrJU0f\r\n3Vb9yiq76Z8pxyr0FHqzl+GwfLXQi/Omx2c5KkIxytHYP4U7lOzkz7x+Qinu\r\nWQUPtt30Ywe4VbdeStqhbk7kra5Fn4OJDU1/eGu1zX4SYzUyJ5+Z5Z3WRTZj\r\nE82cSjEP42+EUMYIJj3ullumgTwrR5E91xGJz+G1Udar5wSD+NpUnKKhv1R+\r\norH3kQ4LybdhX6EuK6/WzrPUWTXb4aDpMHXGtJOhwU4OGpltEQHyts7SKwvA\r\nSAqITPeZm9VhKFNY/zEDJznpS9tsHQ4DY+HblLQETlP9yzSVfcSgG+6zIgkB\r\njL3zNqz/xLZcoHjAVKCJyhquYdfudWfm3To=\r\n=nCz7\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button/styles\";\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nThe `mdc-button__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused button.\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.**\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n**Note: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.**\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button--icon-leading` | Optional. Styles a button with a leading icon.\n`mdc-button--icon-trailing` | Optional. Styles a button with a trailing icon.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n`mdc-button__focus-ring` | Recommended. Indicates the element which shows the high contrast mode focus ring styling.\n\n**Note: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommend always including it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color-or-map)` | If a color is passed, sets the default container fill color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`icon-color($color-or-map)` | If a color is passed, sets the default icon color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`ink-color($color-or-map)` | If a color is passed, sets the default ink color to the given color, and sets the icon color to the given color unless `icon-color` is also used. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color-or-map)` | If a color is passed, sets the default outline color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web 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/density":"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/button_15.0.0-canary.ed4009397.0_1665766285951_0.6763312504942156","host":"s3://npm-registry-packages"}},"15.0.0-canary.95ef196bc.0":{"name":"@material/button","version":"15.0.0-canary.95ef196bc.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"a2407dea1fa8a0bb13d01bb05c35a01c689f9040","tarball":"https://registry.npmjs.org/@material/button/-/button-15.0.0-canary.95ef196bc.0.tgz","fileCount":40,"integrity":"sha512-oJgMg/mnb7AYa1Kim7j48MFg4d8yrgd1uCFy126zeXTDJc6ArVP9+U/kj+sLyzT9lUsB72G+7NGtYLLlwVSwLw==","signatures":[{"sig":"MEYCIQDAf9QqcQMIBiE1Pr7x0XiGCIDhoBg0AuT7bilvOUpN/gIhAN4tSsAHb0w+psuGhTc0V1WQYYlyAUlwkAoueIDXTj8w","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":638904,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjSe08ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoERw//RJY/8q6gysgaKbtu+5mG0RJNbnwjpcPshg8EAHuNMyF17Pal\r\nDG2CbKcNYuvAo+ttFgi8YMRDoM18zAeSWTLjs+qSzjnFgPczeC61B8FS+3fp\r\nB+ao+EqAQ/PEsPcjXhR0cXWKJAwTUVrmhlgwJdd/hh0SQauAUtSJvD8ciwEY\r\nhTpY2B+My3HroZDBe6x9ZQyMhlL/bl52voGJEqWpHtgIDWBBmZJxlblxxw2E\r\niv9XCMQPutTdWjJyXsGCfyiB+j3eS+VXNqvN472ionOxDzv2uGvoLpayqMyd\r\nWwFbjA5aXwm5q3afbNPVfbF1MiAK7wsKGXxxZpq1Rfk+l6fTYxgS1gs2zhyl\r\ntwVDBePaCTv9QVAMh4Qd+gzcGyImUqdakwKni6w83WT4zSvzI9jPl9Y2VE0a\r\ndM1U05hyLm1MNdg5PAgkYZUhDj0OJkGP+645QUZMcOeMiMj6XC1Su2j7XW5P\r\nAuTsc54kHPWKCniDxq+N2LHQN7Kg8gWu6dzJedk/y2twZ9TuS+uQ8Q5UjqqC\r\nToFTwUtktDZzuBsdUckm947aXaxIevCY/mMl3l7hRZKLr+Km5IXnY0dB2Zr2\r\nAapM4yYkXn9okU+EZb+ML7UAlKuNPQQjJPshtZuLfHEL7r8c+sVrCmN/CPBd\r\nJEljy6o7rP69d7kv4qdCeTBo8Haeql1E8a4=\r\n=D6Oj\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button/styles\";\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nThe `mdc-button__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused button.\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.**\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n**Note: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.**\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button--icon-leading` | Optional. Styles a button with a leading icon.\n`mdc-button--icon-trailing` | Optional. Styles a button with a trailing icon.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n`mdc-button__focus-ring` | Recommended. Indicates the element which shows the high contrast mode focus ring styling.\n\n**Note: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommend always including it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color-or-map)` | If a color is passed, sets the default container fill color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`icon-color($color-or-map)` | If a color is passed, sets the default icon color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`ink-color($color-or-map)` | If a color is passed, sets the default ink color to the given color, and sets the icon color to the given color unless `icon-color` is also used. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color-or-map)` | If a color is passed, sets the default outline color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web 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/density":"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/button_15.0.0-canary.95ef196bc.0_1665789243981_0.2660208074449302","host":"s3://npm-registry-packages"}},"15.0.0-canary.13eea1b2d.0":{"name":"@material/button","version":"15.0.0-canary.13eea1b2d.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"d485a0efed5ae8fd122338dc51509de828afc4d9","tarball":"https://registry.npmjs.org/@material/button/-/button-15.0.0-canary.13eea1b2d.0.tgz","fileCount":40,"integrity":"sha512-Wr4j+MuuizSuRiGhnn54NatarFLy+oc1d2FP742HeOZ39bR/lGrbkBumf4rFxmAQC7JhuNsM2XDYUBxhsHFvgQ==","signatures":[{"sig":"MEUCIAPeRu/bxIsGfce2zdG4byTpBoXDg//ksvnxr9LTfPy4AiEAz0zOgMutanD/W3Wp2JonNZIpLzMZPWgNqYmJD/gz8hQ=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":638904,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjTNFOACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmpdsg/9EyGylkSRXiBwEotHpDzhHl7RAMqgbjM5fUj0EfmsLYDk/iNr\r\nD1V6ZRYzmMwhg77ABSD2HBVrLk1iBva1ZYW/PFGHcWSj9BxFUgqc6FxJgrlq\r\nGofQz4hcjcKSD9zHopRyCtdeMzolDFiPzqyQ1KvBThTRT7uAG52uYJ96fidw\r\n1G47gQ6eSBJlqGBRxkC5u2sBzng64vxoBCoPazGYGIEtQGtRBPjR4JCN6BBI\r\nIWfx+9HbwmokIe3rkV6SoQlUhevy5ridbYrCAl0VxBpxC/9lCSjgqEQz+uyv\r\nT5aDzOC+pncbtfdZ1Vt98rZZg65sFVifCHy6yW4UJ6ZrOPGWEPECMsRKjCGt\r\niW4BfMaG3zE2QhBrubSW6JkricnyrRCQsAja+dXE1jib2toC5jYTWCVRAXxD\r\na2CGm66ixX2N2Et7I4DqUQFxDRrGClf+4rcl+GJWl8l/6txp4gbb5ractZmP\r\naInL7AgHK2gDrvFAuMbrXwn6ooX6wptUnQnGqiNZhuSgdXJlLQdAzLcRPFR9\r\ni2nR+vTF0wNQ01YjOT7vRTQ2jr4ptLy4rbMyhBNIJuRqbx5nvD8rHbqCzqxB\r\n2bZzcpKRX81/p995/Ztz97zvgKrpiFSQHFnwu+eCK7lLVgCgDlo7pl7JoX54\r\nudNu4WFGWxH7w1BW8/rNbJKSSAhGMMgEUcs=\r\n=xyij\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button/styles\";\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nThe `mdc-button__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused button.\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.**\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n**Note: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.**\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button--icon-leading` | Optional. Styles a button with a leading icon.\n`mdc-button--icon-trailing` | Optional. Styles a button with a trailing icon.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n`mdc-button__focus-ring` | Recommended. Indicates the element which shows the high contrast mode focus ring styling.\n\n**Note: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommend always including it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color-or-map)` | If a color is passed, sets the default container fill color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`icon-color($color-or-map)` | If a color is passed, sets the default icon color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`ink-color($color-or-map)` | If a color is passed, sets the default ink color to the given color, and sets the icon color to the given color unless `icon-color` is also used. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color-or-map)` | If a color is passed, sets the default outline color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web 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/density":"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/button_15.0.0-canary.13eea1b2d.0_1665978702617_0.021658027220971876","host":"s3://npm-registry-packages"}},"15.0.0-canary.ef9b2babb.0":{"name":"@material/button","version":"15.0.0-canary.ef9b2babb.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"2a97f3410502339f6e8347991d506ee6105c518f","tarball":"https://registry.npmjs.org/@material/button/-/button-15.0.0-canary.ef9b2babb.0.tgz","fileCount":40,"integrity":"sha512-F483s2iikVivfoHcRYsLE3YOoUEZMRt5bOzE+gAFK5iJEg1GbZMwTi89EPiwChHrGDCe8UBLbZus1jz80ZXeLg==","signatures":[{"sig":"MEQCIHfqNZlIBR6nhveFyOpT/chIZGvjbq9Cy6lkxwCmgTMxAiAuTYUx6wvjO4++DZIZXlrwLP12umcweDKM4eCNyRJILw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":638904,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjTR3QACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmrsjw//T8dRFcczsAmMg9yPpGviktjV4kmsprlmVEKTSD0FlPymzWDP\r\n3prAhOOPlJxzwkWmnD48lx/NpJbEYPPpdko1p/43wsqaZ/jZChHSNhDv32vi\r\naHUVKRx5v2Dk7TACZx64zwhwfA1sSTDzNNpW9pfb2shmCAIIYsGtppvmIuN0\r\noruw6ExjiS9B/xt+vsUtb6eNu+317lBgHVZmM2MultUmjDRPB0luK2fvhybE\r\na5RYvXEiCrqFv7MtpJ2V0O1Y3avgWP1ACL9IXVAM6+gqYWe8u56YY2fg6Pt8\r\nmwKWcjC9LgGdmBOxiygx8CbDuU29FdP6Sq5Qe3KhZG/h66ew3INzduQdoTwV\r\n/zYbGUgAg05iMdtsyQX3T8anL44l/7I9jVVKSjt/EJvLS2qfFKsZJMQVmu7F\r\nT/eJ34rQ+i3YvWvITyUOpX/AHQi2S6AcRZWUE3yQf4LPrHWMIMxtfI8ziN4l\r\nIi8Y8z22x8Z2P41jjBXvegwg168oeTZBMTqi8ylwPWc0ExZpcDSYM/7XCbKY\r\nRv0K0smpv+r2M0kvgK6Iu6hx5QPstlCHwVyp66AHRb+PR8IqPfK8MUg3txZ/\r\ntYDXVDBYTimbGe3W3WbnsYbQRm15kl9Mfps7tKRFqGecGqBPCSLEeW20YPKe\r\nZWpBbKxq9Z9kOdKf1XNG+SlxpG3UgWPcYzw=\r\n=JzEu\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button/styles\";\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nThe `mdc-button__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused button.\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.**\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n**Note: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.**\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button--icon-leading` | Optional. Styles a button with a leading icon.\n`mdc-button--icon-trailing` | Optional. Styles a button with a trailing icon.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n`mdc-button__focus-ring` | Recommended. Indicates the element which shows the high contrast mode focus ring styling.\n\n**Note: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommend always including it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color-or-map)` | If a color is passed, sets the default container fill color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`icon-color($color-or-map)` | If a color is passed, sets the default icon color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`ink-color($color-or-map)` | If a color is passed, sets the default ink color to the given color, and sets the icon color to the given color unless `icon-color` is also used. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color-or-map)` | If a color is passed, sets the default outline color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web 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/density":"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/button_15.0.0-canary.ef9b2babb.0_1665998288219_0.6357139299744266","host":"s3://npm-registry-packages"}},"15.0.0-canary.cec7fb987.0":{"name":"@material/button","version":"15.0.0-canary.cec7fb987.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"0b8c3620486ad3334170ea6da7d18d7db2181a16","tarball":"https://registry.npmjs.org/@material/button/-/button-15.0.0-canary.cec7fb987.0.tgz","fileCount":40,"integrity":"sha512-Uqzy3h/FGIptYuA1BxugecYLZQSiR9qriwCnjRJeWAflIlgqCTG6S+bvcvCtdQ39PBWvvJ/egYLjvTbAIkvAUQ==","signatures":[{"sig":"MEUCIAhiA0rO1YqTcZEv0HXIhQ8DghC1NEVFL/zRTQAqzgIOAiEAw2zhRUKW09DtMU33u5Ey3en+xwkTWEwpNGuuAiDZiBM=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":638904,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjTTTdACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmp+VQ/5AEihIKko3H5VZJ4iNRVh9NJW6XURE13T+j62yhPwnUv3e0E5\r\npkmM8HlZP6fRHUXVp/Xx0cwn67f9IRs4dB69gfMKAH5a0Djk4L00Fszrj5gY\r\nf0aN+augPAfSXEwN4Ynbvwitvtp/fSSjSw1Er56NA0mclAf7X57uXIAbG8AP\r\n66uWWMRbe8/OatOlDbEhLrwvg3nZRF6ZsAqZf80vCTq+9LldymRs73G87fti\r\nkLUiKP88g97R/IOi+gSauwanPxpE1dgiiuKm5OHL6h86S4XJ/Pnl7Fbaa6Cp\r\n8DljdMPjX4CVaK4RFNDVxwvq2BeWAXzJQJamG5atk6D3Dz9Pd/beo4QnqrCV\r\nLMZ96meaJsvJY5DHcR5HAkRonMs5FnhW/A+p587RW4llTPp8UMZkMh78Ye4R\r\n2yGs8yoc5//WWnIloiirnypld85UNB+uhm0n1DgsGWl2eB8t/uq5Y/kfl2ik\r\nrDhriLAPsyvglyCS0Gc2NTBJBnFp3QmojZ7eT7pNnp8IH/QwQvUJk169T/YV\r\njZSshbvLpg4g3W6z+prcPUqg6GGvgKrtSzbZw+WkYm7BgBqr/9NNFpzFB1OP\r\n0ctFJ10Ex6YfDvQqzG3yIrul7MHWREr3zqQMhyvP72+92Qs+yNFeTXfq38K+\r\nijLgAsQmpyE7WXA6SFCClPp0dl+O80eUdsQ=\r\n=Fh/V\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button/styles\";\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nThe `mdc-button__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused button.\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.**\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n**Note: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.**\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button--icon-leading` | Optional. Styles a button with a leading icon.\n`mdc-button--icon-trailing` | Optional. Styles a button with a trailing icon.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n`mdc-button__focus-ring` | Recommended. Indicates the element which shows the high contrast mode focus ring styling.\n\n**Note: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommend always including it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color-or-map)` | If a color is passed, sets the default container fill color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`icon-color($color-or-map)` | If a color is passed, sets the default icon color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`ink-color($color-or-map)` | If a color is passed, sets the default ink color to the given color, and sets the icon color to the given color unless `icon-color` is also used. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color-or-map)` | If a color is passed, sets the default outline color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web 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/density":"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/button_15.0.0-canary.cec7fb987.0_1666004189578_0.3638777605612653","host":"s3://npm-registry-packages"}},"15.0.0-canary.4fff58b08.0":{"name":"@material/button","version":"15.0.0-canary.4fff58b08.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"407711b5833b2cd47ba6da6725aa7337b63033fc","tarball":"https://registry.npmjs.org/@material/button/-/button-15.0.0-canary.4fff58b08.0.tgz","fileCount":40,"integrity":"sha512-CT99hb4mP1H9XB5kqARjUrOdWK3La4cd5+OctaI/ymV1acvlSxt9CM6IfXx1m9Nq+Hzx+ZbykHt+Mm7U1ikO9A==","signatures":[{"sig":"MEYCIQDuJh1gEOMCz03YNQv2pOa2L/p8CLitrycKmKbxJ48IUAIhALg1ye3fcKelo5q9PyPUXpOVLkIt6F6tH/xknY0hOMgD","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":638904,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjTXM+ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpcIg//QP1hnParhF0WxvdtIfZKfmzCx5EBY6vMUSaQnVVeIiP5ML/l\r\n+p6C55b0VaoobNv0vx2pfMz4j/E53X49yoQVWYop/oTYvm5EB8n/LrMjJ1Qz\r\nV2wTyK9aZC2jf4JHocfFBrpjSwDvHYOzLXq90R6/JlPTuJidUbr+ctWNM4cM\r\nRUVX8HFUl/Hv+Mr06zn1IBuC1t4uQqSzhbqBfuTC93B2bjHwRp+DOeb7kuOd\r\nNzVs9xHe8wkWKnBcm0SjvlowzDEPr8FILBR7jkFFzm/iarpKiH7LlcZ57/q6\r\nuuqG7qPhC214ZNeWpnSyX2RxKZvGZWVciVu8Qr6c7xi6Di7PvHQvXnbo6eFr\r\nGuBGoQ+dt/qM1sXGl1uIADAJt/suFXlXupHz1WtOxFSK2AOZWdoYUflqucAK\r\n1W1kjejjED7hHVxGhy66kmgoRbkT3rU8XWMqACkbLEkwpCTTilry2sVLv+hv\r\nuFIkyMjfr4LDpvX3ZJjBToLiTd+uMV4volQAKxUx7en5+hMNQwDp7jfZIn8c\r\npp8XEa6kDKV1EhQCzy91HqUpQTImX5xda8HN7vn0+MQkE/TZu0ScCgHFef+i\r\nAMIHQsUC5ubPnOlf/HTzaHmCc4YVLQWXEnS3TNhqW/8srdJliiEjmYsb/4Uh\r\n9/INZCu/5sa760GOjYKDTG9hVQKNHqVsnNw=\r\n=iGO6\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button/styles\";\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nThe `mdc-button__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused button.\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.**\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n**Note: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.**\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button--icon-leading` | Optional. Styles a button with a leading icon.\n`mdc-button--icon-trailing` | Optional. Styles a button with a trailing icon.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n`mdc-button__focus-ring` | Recommended. Indicates the element which shows the high contrast mode focus ring styling.\n\n**Note: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommend always including it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color-or-map)` | If a color is passed, sets the default container fill color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`icon-color($color-or-map)` | If a color is passed, sets the default icon color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`ink-color($color-or-map)` | If a color is passed, sets the default ink color to the given color, and sets the icon color to the given color unless `icon-color` is also used. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color-or-map)` | If a color is passed, sets the default outline color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web 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/density":"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/button_15.0.0-canary.4fff58b08.0_1666020158560_0.21727127484378528","host":"s3://npm-registry-packages"}},"15.0.0-canary.587d8f871.0":{"name":"@material/button","version":"15.0.0-canary.587d8f871.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"1488eefa36ffd62b8694f8df74018cccc029901e","tarball":"https://registry.npmjs.org/@material/button/-/button-15.0.0-canary.587d8f871.0.tgz","fileCount":40,"integrity":"sha512-KxcZY7AjKhLaDc5CCs2anlRllCkVmW6RJPTJu7xFEKWkEQ0PHYEev7Tx1E8nxx1OfbplO8lLmStZ4XYFkiTF2A==","signatures":[{"sig":"MEYCIQDgNmdPSwWzdA5JdbqtZ2Tiqt2XRfGRRLW4kUwF7FfjkgIhALPpZANpwOyK2Z2LdcknA23Jl4bd/oBX71PQcQ5WIky/","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":638904,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjTXtdACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpmQBAAnjtbugHIAHh67mnJ4j7EaEy2Fppn8P4icOxsaeub8T4YkYYH\r\nlu6voK7M5/FQA+OPfXsFvxC39W6oTTTgJW54QCoFK7zTCfWtQZJ4DOUE9IpZ\r\nPFcq2gQGpJXccqZMxTPEy17olusUOlBJxZZnUyzpoqrkjx4bcv7PhPkVRFmF\r\n3jJS26zBBS7LtC9Cm28gWs2stoMAqZl9F7KDxlvBrjnnCDOuPTVCnri/fi50\r\ntrcjpWvekxUtoXU0RzdLvro8lmTVdiyqI+U1TLBKvaTBNyYZyxN14DbOYNWC\r\noKLeXW0aRKTfKl6Q5N/pdl/CEWUBE1iie3G/21J/1flBdqJGEkXUy0+mluuB\r\nRRMOe/FWLKtJ8m4mys3wG+fEZ49i3ank4LM8i1ccgx1Cw34phYEvEMbKyrh5\r\nbogdpOYZQ6xnqEvX8jr5IyALJiyhHKtNFTlLz+ULvqa7yc7ZnzpujLcZohVp\r\nxK8iaeaEELv986jzziDTnYbTsuTSqLHgir//ovorIvq8ABRD3mxwj1/BCTzc\r\nsNggCWAsngrN47IC9tk5INjSMzqjd/xpurgMZJmFt1b1BgCjWFxtMlDzhcMb\r\nJKOXxZVqq+K4jFZcAfMB11W9ihhupJ3wupiGtyB0jlrEds8rgkMuWKyXD10+\r\nW61kJ7NERmJ04XUtm2S9NKGPa0QS+GRTnXQ=\r\n=cDY8\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button/styles\";\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nThe `mdc-button__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused button.\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.**\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n**Note: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.**\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button--icon-leading` | Optional. Styles a button with a leading icon.\n`mdc-button--icon-trailing` | Optional. Styles a button with a trailing icon.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n`mdc-button__focus-ring` | Recommended. Indicates the element which shows the high contrast mode focus ring styling.\n\n**Note: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommend always including it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color-or-map)` | If a color is passed, sets the default container fill color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`icon-color($color-or-map)` | If a color is passed, sets the default icon color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`ink-color($color-or-map)` | If a color is passed, sets the default ink color to the given color, and sets the icon color to the given color unless `icon-color` is also used. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color-or-map)` | If a color is passed, sets the default outline color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web 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/density":"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/button_15.0.0-canary.587d8f871.0_1666022236789_0.24305705364716523","host":"s3://npm-registry-packages"}},"15.0.0-canary.edf4b98d0.0":{"name":"@material/button","version":"15.0.0-canary.edf4b98d0.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"ba0e358b08398b3d5ce9744d85c62a55e849c841","tarball":"https://registry.npmjs.org/@material/button/-/button-15.0.0-canary.edf4b98d0.0.tgz","fileCount":40,"integrity":"sha512-TVUI0Iqdh0K+/jNMf4Ihg9lt9SBKwFWj/0jMnPhm2p41OoEQVkmvpArY3/VxNU5NL0Mni+ps7z3xhbKZCpa1Zw==","signatures":[{"sig":"MEQCIA6Ob5e1AEW5//B9yDeseW/IL7aBuHcZPmgzkC12YN7cAiBAdPtdm1sRviSQv2vfycSPD8Yl6KyAiWeidfYYwc9YAg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":638904,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjTYWEACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrnQw/7BWIZUCDyszuVfVQ84GM9q/24m4nBg9Hfa4rhw8lk41pe33Cx\r\nm6qW8IZeJwExGi/Tm4sDuZqBijMJzBm/bmNdGBL3Pu+Wlx5Pph83JRJCAZlj\r\n8N8H3jls5XFTnJe5W0vu2w4ggMnzrw4L4bcj/s90VLF/2hdaeywYI2cQ/L/r\r\nRohpwks5YzTcdyIjI9fCtyEwOG724oHWMZg+2P4zwG51hrnNoEHG9k5he2Vt\r\nbKSNnhoJXgoQnzGwUTxq5XS893OqXa5vT09a0GbI/LPzywkdFmZALm16OIVe\r\nwqv4nh4nmwUj7XiNtHkEXzHAAOUAAsIk6qhNp+K9CeGooaemnnYJIXtmSH58\r\nQwVShv6LxYa8u4+1zGfPZNRJTtj+6Q/G0n2XFtL+BevVBvGg+cekkK9/qR8b\r\n6nbvyhgkZIGyg6wVZMeXqXAYDUtmjs1RvtYORN19Vw93UrWP1lNJq+2XLZRz\r\nzP/uW9AjmdL8rHT6LK6qdBOx4dpuZ/qTdZkAK9qiJNp13uNJ9iubcRl5ylAg\r\nlr9igBVKlZePFMUVdITIGtaXvw3ElhJvrChRWyqxWXC1aeYWGvnDTGQDJjO3\r\nwbEESyziHjrjWzYdg/Es2gAn5axsDq6vK/9w6UsKVGpb5rgEllLqEtddgqQ1\r\nDVNLl0LB8/IytTIiFMWldxFqWZqCoOWajvE=\r\n=ZccM\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button/styles\";\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nThe `mdc-button__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused button.\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.**\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n**Note: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.**\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button--icon-leading` | Optional. Styles a button with a leading icon.\n`mdc-button--icon-trailing` | Optional. Styles a button with a trailing icon.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n`mdc-button__focus-ring` | Recommended. Indicates the element which shows the high contrast mode focus ring styling.\n\n**Note: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommend always including it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color-or-map)` | If a color is passed, sets the default container fill color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`icon-color($color-or-map)` | If a color is passed, sets the default icon color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`ink-color($color-or-map)` | If a color is passed, sets the default ink color to the given color, and sets the icon color to the given color unless `icon-color` is also used. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color-or-map)` | If a color is passed, sets the default outline color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web 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/density":"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/button_15.0.0-canary.edf4b98d0.0_1666024836007_0.7936146944549429","host":"s3://npm-registry-packages"}},"15.0.0-canary.024ac5f16.0":{"name":"@material/button","version":"15.0.0-canary.024ac5f16.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"6850751812da645a935a558a0ddd6ab7c7d37b89","tarball":"https://registry.npmjs.org/@material/button/-/button-15.0.0-canary.024ac5f16.0.tgz","fileCount":40,"integrity":"sha512-ozVIzGFqk3ms2RN+YvtDnbd8uaFCRDrcHqFifVk+fqn9nySMbK0PD87xu3ZcuZ4TJYLRCPuGMpVIHD9QE3GP4w==","signatures":[{"sig":"MEUCIQDfcBAAbLWdbG57t4HfEkTEROQQonOswZXS0bV6PvE7uQIgAuhe/2pDCAgAsVFUEHk0b9L9ywcPRqrDz6GpNwozwaY=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":638837,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjTdpVACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmr7zhAAo97oqd05WbJ73C8Nng0xnF9DfnZPMa1ae22d+s0pAlVzWPlR\r\nxe24YZ5OpEDopgeTW4Ds/gav6fCABJIJ/X7SM7TkvjIZy/hQtZi+GQahpVlU\r\n3xpzC0b6i9Ei0Qmg63yHIrNjQWFJy/RQZdRt6YS5tGudaJusPMIvn8Q7rUaT\r\n1kHg0Z1YDDZDFgKEts2wMn7/WvrcPdgmMbajOlaw4gQtElYlGjBVwj8/uWoj\r\nFKXkTcKxo+kTuQ9iz3shK8ISWUan0AgmRVZ1OxH3dAhCiFBaDwZ6+tGl/bDJ\r\nLKA0WtiEIvahhO8YLSPe5du62LiuZD6xrPTApTZ3auE0l+QaMB/yFVKdYc4v\r\noghhJCCV5bGlYgc1AxMtm4BOswy6YcphO6fQX3OPKGHhm0qYXaCHR/NqdwxO\r\n1aWfYUgleiLXAA9B6e5dXaz5ja8eJemyYeUxhPBrH/A2fJwufXDDxihxBD+Y\r\nShGNFuImKhfHpJkoSiSpeWdvHu1OohQBVvwcJhWBffauEJA5WFUvwNBdsbyM\r\nVxsC1ER1aqkRIh6GXOSLloekKm2fyJqgSEn2ncQZhbiU2RVXSTSRvPMCXtZv\r\naFiZjAJG/HnXQjpPNgxaD7yhI1mIS+waw1nUpSpbmM1+eUeD/a6n1mDyj0Y1\r\nwwWKNXQwqS3Xv4aDUvNwviCu3HEjftJympg=\r\n=FFEn\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button/styles\";\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nThe `mdc-button__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused button.\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.**\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n**Note: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.**\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button--icon-leading` | Optional. Styles a button with a leading icon.\n`mdc-button--icon-trailing` | Optional. Styles a button with a trailing icon.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n`mdc-button__focus-ring` | Recommended. Indicates the element which shows the high contrast mode focus ring styling.\n\n**Note: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommend always including it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color-or-map)` | If a color is passed, sets the default container fill color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`icon-color($color-or-map)` | If a color is passed, sets the default icon color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`ink-color($color-or-map)` | If a color is passed, sets the default ink color to the given color, and sets the icon color to the given color unless `icon-color` is also used. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color-or-map)` | If a color is passed, sets the default outline color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web 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/density":"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/button_15.0.0-canary.024ac5f16.0_1666046549670_0.5218385616792209","host":"s3://npm-registry-packages"}},"15.0.0-canary.c8bdf6144.0":{"name":"@material/button","version":"15.0.0-canary.c8bdf6144.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"79e899d1200ffa5f12b676a81f7ef4ef59cf0dc8","tarball":"https://registry.npmjs.org/@material/button/-/button-15.0.0-canary.c8bdf6144.0.tgz","fileCount":40,"integrity":"sha512-pix3XZxDO96KO5VinGrwtO6xhG9bP5IYzS1IaP7pJWBUZYg0bIKllJAS3RGtr+VuPLVD5iqMHneHGbjvftnFfg==","signatures":[{"sig":"MEUCIFAFWf0jI/yjMCWQhL5ykB3qR3MDh8qRcvrDFeDdrBgEAiEA+Tk+EKvMFZEPW+er/H27/s0GPLTknzWxwzE9887SwlY=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":638837,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjTu8kACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmr2lA/9Guu2gCINHm2Fg2zI4g1NZW4+oI2uPBBVcVSqFZZuCvud3c5D\r\n8zPiwdjeCXOujLpDUVWsa339FW7p5LgnRKmltCrbXZWZ3QcCgCAZE94LvO1n\r\n8GbGaWb02StQXmzQtbBEsVck0PAgxJdgRPX062FQuIuJnr+2WMHsHRqWDxK8\r\n1VoQoU7Bye7CkAvTnaKIAGkuE0enkBNqeHFgOBbFvLfIiB2f+juY6Z97Prz5\r\nBAepYftarxWXsaHa2kOx+4v0YiFzxa3jDz+nQ/hrUIBbFIcML8cytaL+gfEA\r\ne4s0li527vCf3xzQadkI43tDh/1TYTwf0C8tGg2OVoJAGn7B0cTTumODRxWa\r\nWoGJghIBiHjcqagj32g82b74ButiRORgcl5Tz4/jUIBgSKJQ02+JabUDDcXN\r\nJYnOfL4ib3OUP09d8LDy9Ls51256mFR8lC1tfYqDNJjUi+j8t9Re6S6MtXnc\r\nes/DZAd0Mx/JFOTg7qEh2Lkaw7o/eFvyoG3JNXh0FddRj3g/Pcqfm5BqDsET\r\ne3meyiJWQ9VkI2ofHTdTJnMGkaeMjuoOS1vBTCq8+hI9mWu1xbLTuwJLL7fv\r\nltsoWanGJM5A69hf9DYfTYXGxa1/smdh4jtZNlRdy/3ZVFS1PEmKkMLzzNHA\r\ncZiQs9Xb/Ot6AEVtFAs1/L9sIbWKTtg1WU8=\r\n=iLnH\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button/styles\";\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nThe `mdc-button__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused button.\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.**\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n**Note: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.**\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button--icon-leading` | Optional. Styles a button with a leading icon.\n`mdc-button--icon-trailing` | Optional. Styles a button with a trailing icon.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n`mdc-button__focus-ring` | Recommended. Indicates the element which shows the high contrast mode focus ring styling.\n\n**Note: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommend always including it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color-or-map)` | If a color is passed, sets the default container fill color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`icon-color($color-or-map)` | If a color is passed, sets the default icon color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`ink-color($color-or-map)` | If a color is passed, sets the default ink color to the given color, and sets the icon color to the given color unless `icon-color` is also used. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color-or-map)` | If a color is passed, sets the default outline color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web 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/density":"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/button_15.0.0-canary.c8bdf6144.0_1666117412682_0.34185829906156684","host":"s3://npm-registry-packages"}},"15.0.0-canary.bacda4885.0":{"name":"@material/button","version":"15.0.0-canary.bacda4885.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"9e3c3ec29997f97159d38cbf559433223a4b7b17","tarball":"https://registry.npmjs.org/@material/button/-/button-15.0.0-canary.bacda4885.0.tgz","fileCount":40,"integrity":"sha512-iYO7oIev+8zIXQ10ozQ5+Q9tfaliySShFnGP6f3sokXqLTscUHv8zErHK6XWJpfdR340Hoxd2w1oWF4RBw3b4Q==","signatures":[{"sig":"MEUCIQDR4Z15B2Gv9uBM/BMgB+GY9NebNwSOYDR7F5Fpwk/XNQIgNzeVVhmBAMfS/HoFEx5ogmZuc79yXLk7xXrZU18iUh8=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":638837,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjTvOrACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpCgRAAmX3M/OJL/MR4vf5GryGT6YTnarS4QPk723ZVA/0IsKOZ7zuZ\r\nqZtoO6v3jRS3nqi9PE7w48pVVWIEcou/5XMZBLGsZW0BAwFyecU62QfoAxBx\r\nIDec0TP5nUSVrw+dHSu3D6g7n88LFuAua5tk07f7UzGLOqVJcj9Z1sPEqYQ/\r\ncT7XIwTGABtDrrVD/jkHFv68Nm8XMcQAQdVG0AMNkXED4/n9hynGt+KPcVbo\r\ntwfzcBZ3krWkenj/HjN12dxHZjqdNDmYkOMm0CXMZr7OLVUNM27VfJJBF00Z\r\nO643cK4p1I/Qjk6iqwV633C9TuSp4wrZ4Zvvn0V5XPksWx2FthIxPigoz6HV\r\neVn7D4p31rlj0Uxou954P09ksHAX6pcfu0t/lofEZq/P/YjCrOEZlQGo44UL\r\nqNxJBD4/vz8Mk+TZ4nBOxjhhCsTmtqgaCMW1TFL+8dpxX9OnQBZTPcyMbGsC\r\nSS8/6Gw9YIk3ouclBaFZC9/0mLg8hmUPVGlGvWeh+9j3jiLum7AJAXr/XYgI\r\nA2tN56WCPmytLcbr9cMWsFXjko2W+JgNWnM//Ml3no1xATkqPez94hMH2bgv\r\nMY3c77TTlyqFohQ8Y0M2PC34cA9Eakqcb7OEF8BSMv3KZuyhRMXxgco+yg7D\r\nM96DR7l7AWcY/nMPTr6+hDbTIp83kw/I9DM=\r\n=inwk\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button/styles\";\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nThe `mdc-button__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused button.\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.**\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n**Note: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.**\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button--icon-leading` | Optional. Styles a button with a leading icon.\n`mdc-button--icon-trailing` | Optional. Styles a button with a trailing icon.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n`mdc-button__focus-ring` | Recommended. Indicates the element which shows the high contrast mode focus ring styling.\n\n**Note: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommend always including it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color-or-map)` | If a color is passed, sets the default container fill color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`icon-color($color-or-map)` | If a color is passed, sets the default icon color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`ink-color($color-or-map)` | If a color is passed, sets the default ink color to the given color, and sets the icon color to the given color unless `icon-color` is also used. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color-or-map)` | If a color is passed, sets the default outline color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web 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/density":"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/button_15.0.0-canary.bacda4885.0_1666118571166_0.021376389458679368","host":"s3://npm-registry-packages"}},"15.0.0-canary.92b2556cf.0":{"name":"@material/button","version":"15.0.0-canary.92b2556cf.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"70555ca33661e6776d3dc3838484b7b2d11e7432","tarball":"https://registry.npmjs.org/@material/button/-/button-15.0.0-canary.92b2556cf.0.tgz","fileCount":40,"integrity":"sha512-UlVayqkL0j1nu7ewrBnqGwpEffXQPQdcNSHdX4DZeGQhBveAz7X6vgMDt9PEcnr9rLjcMrco8wRe7BHF35iPIg==","signatures":[{"sig":"MEUCIQDAThxU9XXn8ZV0/X4rgLrZPvpKTw3/fYcoy2/3WUQARwIgVBnYTIvt5THsVVuLuVVg1CpvzWr28/zDPD6+lu2dXH0=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":638837,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjT088ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrIAg/+LOUEDe+S/EFzZgC/iErb7xQciE/LupxUcQBZ3EU83YYPvOeT\r\nfwrvIhwkVrkk+or1v3ZeM8wBVoMCQrsCVLPH5mcxaqOHOnBp/7uujwcz8zd1\r\nNb/WRmBGsnFxSf5UvEmSoJMmRGhYsAYLRPxJ2s9EEw3Ds8N3DD/PcfTLky5R\r\nr+FnoWoDSTj4ZaWNvhkEffc5kUw0MLZZf03aqbInFQWu0pmbDShiB3MO7BwZ\r\nege+dtZxpxYwMQx9KwDXgH+gsTZ5Xegyk9b7ociT/bpOMZpNwes2L/65DSwf\r\nqJgtQ4vUPgKOBI1SDmJsRtheLw4vj5pl+BCmfscd3PYA2ZmZ/LgS2yTi71Mh\r\nudCRFI7+X9j/1NRT+nVSm3RkulBXuv0RKwQFC7XQg1u72/DF399atrDWWS5s\r\naX/u9+q6s2bl5Bc7IdGsqECdeqfcsUGLZjxbJfP+VtnnSC9FQB37X6ppJ3ZW\r\nOcqCF5OZyNcsyL+Qs2WHPWf2ecvUhVOWvRInS0HYqyn73SnDRHzfhLamHeF7\r\nb/cT7RRyCvsWT26if6XMLEG0HQ88pCYQcmophWzEbmxmZ55IuRqwSuF6uSlT\r\nfdpfDmm0IcMJa+JaIx9NEWqYLpT58QvTRCO4t7SgnWnFdb/n2Ygc+WGEPAL1\r\nx7kqLmiXwI7KaVDiQJdNr9XzX1ty4Jk/5Yo=\r\n=Z8Ig\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button/styles\";\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nThe `mdc-button__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused button.\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.**\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n**Note: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.**\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button--icon-leading` | Optional. Styles a button with a leading icon.\n`mdc-button--icon-trailing` | Optional. Styles a button with a trailing icon.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n`mdc-button__focus-ring` | Recommended. Indicates the element which shows the high contrast mode focus ring styling.\n\n**Note: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommend always including it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color-or-map)` | If a color is passed, sets the default container fill color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`icon-color($color-or-map)` | If a color is passed, sets the default icon color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`ink-color($color-or-map)` | If a color is passed, sets the default ink color to the given color, and sets the icon color to the given color unless `icon-color` is also used. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color-or-map)` | If a color is passed, sets the default outline color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web 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/density":"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/button_15.0.0-canary.92b2556cf.0_1666142012738_0.47650530994372575","host":"s3://npm-registry-packages"}},"15.0.0-canary.cc804509a.0":{"name":"@material/button","version":"15.0.0-canary.cc804509a.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"2a099908925e4e40295d64e773d38dd2b4f056b7","tarball":"https://registry.npmjs.org/@material/button/-/button-15.0.0-canary.cc804509a.0.tgz","fileCount":40,"integrity":"sha512-PUqcpLQpHy8W+AMMkYOWCMkwIG8YE87hYnx8xCe6IqE0u2W7f7aXylIWgDwMy3d/ozetRYeXzkki2FscGqW2uw==","signatures":[{"sig":"MEUCIBcrOo7JrDa6BpTScmQK1MkSrlxYyiiAV+OMp3yC/qogAiEA+Wo+VULjNy1/jX7AnNP/NZwuRZirXA7ajRSHWNuDfXw=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":638773,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjT1AgACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqDOBAAgG/rp9LGoIa3axxVhC7RAmswNNqHcOVd4xoBzjZKGE1M/0aI\r\nk8yQGRKMQTw+tqe0aH6jgVYP8ueU/0d9PHZLTL0dK281lZarkP7N7zowA3Fd\r\nDSQmBoTaeHJn4anmvowgm3ev2xzOFVqYi5oyoBcVaJCkRFzTCVMsHtF6S+jm\r\nNSVUi0J1ozMQuziiyfyhPtw9aG4ifXa5nGzX1AsDEjDDVIiGyYKGFlo2RVDQ\r\nTByP2NM9JwPPc2+aJB+Vi18GIIN4qTZkTIduA3I1ujNMR3i5nvcZuH3FcHS8\r\nAs8rwOZBAW56wGCnR0IwUbDKb0lP3EYLCc5I1BfzLcsBGCzVMdNEmw1eVC9q\r\nzcJ2x49mF8V7zkXFVTJ3j8a0co/ukgcyIJKsboMDvr6aLbwxddKd9Lt2q7Ek\r\nftPCjaEJPo0kLISO0SIfMoq06H1hHjX028T4nWRL4XLaFPfNiFdvdrD/A6nA\r\n+dAtIH3SLiZyaeOS/MTTq362z2k+sVivARG2ITs3d3G2X4lqpwU/vtRtfGN2\r\n73qyEKdYFf/ut3bG3K40BYXTd5/m6BJlmF4SPrmUXUouKtw0utuTMF/viBUj\r\nUBouPlW3LQv18w5uzhAh+oai2FMPk8oI5V2y3K8bT07BS2GEjr/MPsckP2Vb\r\nQD5TaRHkB+nZlZt3DQ+MPqeCnLiw3k5dVoY=\r\n=Ut2L\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button/styles\";\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nThe `mdc-button__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused button.\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.**\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n**Note: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.**\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button--icon-leading` | Optional. Styles a button with a leading icon.\n`mdc-button--icon-trailing` | Optional. Styles a button with a trailing icon.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n`mdc-button__focus-ring` | Recommended. Indicates the element which shows the high contrast mode focus ring styling.\n\n**Note: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommend always including it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color-or-map)` | If a color is passed, sets the default container fill color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`icon-color($color-or-map)` | If a color is passed, sets the default icon color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`ink-color($color-or-map)` | If a color is passed, sets the default ink color to the given color, and sets the icon color to the given color unless `icon-color` is also used. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color-or-map)` | If a color is passed, sets the default outline color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web 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/density":"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/button_15.0.0-canary.cc804509a.0_1666142240178_0.3217463158079312","host":"s3://npm-registry-packages"}},"15.0.0-canary.982bedae9.0":{"name":"@material/button","version":"15.0.0-canary.982bedae9.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"d4916f5838ab556eb63f51bee7847d4981c864c1","tarball":"https://registry.npmjs.org/@material/button/-/button-15.0.0-canary.982bedae9.0.tgz","fileCount":40,"integrity":"sha512-1ybs5MdJqYSYi3qNtgIjIkNF/99KTpwhO4bcdZAT7aIxUA0jD0V7xjNGtNED9gn0h8o2YNU1VOFVY+4IkjTjtw==","signatures":[{"sig":"MEUCIQDaFJjzbxYTuon8g/q0SNZMsEdn6Z6kckRVF2htyX7DMwIgRjYd47KBX0WLcdtw8ZKBSZvQBqZ4RLkelkLjh2IRO6Y=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":638773,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjT1TOACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmqkwg/9F6wZR9Y7WzR3S0cLcUosw4f8b2KUi1/UsDDzS+tJX/B33z5H\r\n1qCEJaxjS/9/1KT4vSM1+q2qKPggHoWEgDwoxbDIAdzeCX+Kgn+KhqOR1Q8V\r\n26em1Hj/haPYHK+IWVPXO94mdppoolkEjLN9NknQN5mtMTUPblXjnrpui4gG\r\nPTmYKBp78ULgkvdRNDBeWbPHKiM7Ae8AxK+3JO2lnGMBp9YOAKcS1YosZo1f\r\nbA/Eou0U/xFeO1UZxePlUMw/tRTmkt56M6rc/wsLMy+UB+/rJQD6C7iNDEyP\r\n/JLY3UGLzUhigce5OYmo6XoQ0kvzhy+3VBkNR1tcwB6ceSsarjIJgVy7KXr6\r\nUszKm8thWH1xpzI0Ab8vqXGurEoJqQSIeV9qf+I+hKCNFk3dmZ30ErvdpjJM\r\n3o6NkTLXZ1HqJ/HKOeNrVe/Ek6KzfErCifoyyHsnisIycBy04eMtB7f+4b8o\r\ne0X9zKmVNf4OLmH2AG2sJ9mF2FfdFbX3XDbyDt77RSaOA9NBDZvrKkLpTIhk\r\nDY5kS31PxIZGXNW0O91akidGV0kJPNKT5qyFTxZuw6rUDaE8K/kCsOS6a7SN\r\nvMCeA5iRza8mk8UtXQQdStlM1DqTkydpG//XumErud174nPhIzMSnw96uCOF\r\nZ9N81/cuhR0ddodu/Fsb5+FYRPxGK0AIGEU=\r\n=wlB5\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button/styles\";\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nThe `mdc-button__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused button.\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.**\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n**Note: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.**\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button--icon-leading` | Optional. Styles a button with a leading icon.\n`mdc-button--icon-trailing` | Optional. Styles a button with a trailing icon.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n`mdc-button__focus-ring` | Recommended. Indicates the element which shows the high contrast mode focus ring styling.\n\n**Note: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommend always including it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color-or-map)` | If a color is passed, sets the default container fill color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`icon-color($color-or-map)` | If a color is passed, sets the default icon color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`ink-color($color-or-map)` | If a color is passed, sets the default ink color to the given color, and sets the icon color to the given color unless `icon-color` is also used. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color-or-map)` | If a color is passed, sets the default outline color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web 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/density":"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/button_15.0.0-canary.982bedae9.0_1666143438324_0.4278857686892916","host":"s3://npm-registry-packages"}},"15.0.0-canary.ee40081f4.0":{"name":"@material/button","version":"15.0.0-canary.ee40081f4.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"b264a097e6ec2a4e19a2ffe30638a1818b8e0c05","tarball":"https://registry.npmjs.org/@material/button/-/button-15.0.0-canary.ee40081f4.0.tgz","fileCount":40,"integrity":"sha512-ex891cVcl7SJI2HIlNiIg2igTpeU+LhrI3kTxOLCU6ngbHdkAGtsnCfs36t8soeE2FFZtOqOnb7oWCYrCrL5oQ==","signatures":[{"sig":"MEUCIQC6Vg8QSTQGA7MXNu2mxegme2qfR70Q18pNn+QOKpxnagIgXiN0JHpArozl9NvoTEi/BfI7DuhlpzObZ4Az+W7XtPk=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":638857,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjUFoOACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmqf9Q//d8M6YOw847hy2A2mwpXy/zk324+SQerPLOKgt7B6SgP0Els5\r\nzCs+WmT5+528OCksi1RWIwM71jD5sJyPDYZIW/9UtcGhf+OBECqguU3PshxC\r\naJh4z5BYj/GT6a9rqEybJHwUM9VGLgJULpyCS0e5YAIO8uGYTUFkn6CCBuda\r\n5fZGtaXdE7jVegKB52pP/ijgJ4Uvs39/HAJZaCAdYHbZNaq0rBsSUMHOrI3Z\r\nkqC8XyzK6d682/ixvM0GUVmJzk8pD2M2YoZc43i+jQ2f6TYjab/D6RBsFwHg\r\nnksdMFz8Jnh/XN24iCU5a4xEVI9kIfyImmgXSZZHdz+h4X4IsH7enMfLiaiU\r\n29LZ1orNAWin9Cd3ltMLimkPpCXYAJq1EUBnNT3ZEeZbKJPALq8/dn0bJCm9\r\n+OabJ39uPMePQ98sgrCz/4H3tUuY0F5l5BOD8ShddiEsrHFOVRifp12j5Ujl\r\nYiq7yZC/MjpkuoitNmLZX1lpr1tEJf7Sh0h+CIhGyCeuJr//Mo5AMiNHBHAX\r\n3iwRNzYdsXswhWgpjXqkLonV2vjyOk3kAv9vbXChthKxAuNfJHrWXQ0a6qBV\r\ngu07ITKc9nr9/gXPYVcmN/lEpP5kzAgnmCzqHwe7nBlM065Xq9T2f/B84IPP\r\ndPKnX2YtG1GVtNo+AThZinRDk3JP7FutIR4=\r\n=7Lr3\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button/styles\";\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nThe `mdc-button__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused button.\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.**\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n**Note: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.**\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button--icon-leading` | Optional. Styles a button with a leading icon.\n`mdc-button--icon-trailing` | Optional. Styles a button with a trailing icon.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n`mdc-button__focus-ring` | Recommended. Indicates the element which shows the high contrast mode focus ring styling.\n\n**Note: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommend always including it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color-or-map)` | If a color is passed, sets the default container fill color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`icon-color($color-or-map)` | If a color is passed, sets the default icon color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`ink-color($color-or-map)` | If a color is passed, sets the default ink color to the given color, and sets the icon color to the given color unless `icon-color` is also used. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color-or-map)` | If a color is passed, sets the default outline color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web 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/density":"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/button_15.0.0-canary.ee40081f4.0_1666210318466_0.4452130741417053","host":"s3://npm-registry-packages"}},"15.0.0-canary.98f1b54e2.0":{"name":"@material/button","version":"15.0.0-canary.98f1b54e2.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"7c965bcbe83b0e478428ab6bd18df840eb560df0","tarball":"https://registry.npmjs.org/@material/button/-/button-15.0.0-canary.98f1b54e2.0.tgz","fileCount":40,"integrity":"sha512-bv+AZnGqCSeglq570aIEUjwMJOYVGjbVDofQ0EnZ18zWr3hx1E5EPHFANJk2VwEZZ99rwy9nX3dYtgWe68PnRQ==","signatures":[{"sig":"MEUCIG7Y6QLuETEAUU8XE1JVaK8q7QxqDVDIG8nTY1QOxSy7AiEArOBHg4AyFRZpRtk5XwybMYbRD5ypucoqRnB5805eHsI=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":638857,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjUdI0ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrKrBAAnNlYhllQmufo9hZB5j/CZb85BPD36HTTNvcAfGHsRobELZPS\r\nX8gDlN2HKoLE0RAdNEsAunz6hn15eNcQV+cGbP06R3H9ide3SRE1S1ixpIkK\r\nRs72zZLkz89TcRH+kz/DKehq4qrqEkubGfL0f7uP+ZlAy5toTwikcN7R/B+c\r\nMPqb1r6eveGtLxhB2LTmbcGhDg4DfA9J7FRsmn10DuqMfMPF0XsYvs163yDx\r\nbFj7PzbTDn+/TOyp+Ey6DKldYj2onD0DjSZX48OpQ8jx1YtP6InAy7x5bTIg\r\nm/VXOoPO+loPgX3W6VWwR/+zR/YI1yC7+4UhSd8tQD3Hqk0ThjZksLSIniLJ\r\nTpLx/kXy3I2kPNI1jrihP3G8C5OX37le8bTvRozxbOa4QMh3sl62Mh+2eGtv\r\n0Z3VTEPi3z3cFqL+UiuulOs7QjcuEss9s6g5F4JxGjxSeKa6mfJLC9fG/B8V\r\nOEvXMWx3Pqsy9YkkUzJxYfvpjpFs7cp20ANmUmBC7G8YPFka7HDt41JE90LO\r\nSdZcveupOLgIhfbiip/578pkoOa74FSiDUMIOD4Znmqxsm9X4NwF9CM0RcsT\r\nU7ouz+0ibhl04y+5rAR+kUcKmTnmdRAJ8k9VIu3RB24RccFofrHuDdukwfum\r\nBhTm2e1su7hejVt9WZbOdGXsK8of15aQHBs=\r\n=Obw9\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button/styles\";\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nThe `mdc-button__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused button.\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.**\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n**Note: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.**\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button--icon-leading` | Optional. Styles a button with a leading icon.\n`mdc-button--icon-trailing` | Optional. Styles a button with a trailing icon.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n`mdc-button__focus-ring` | Recommended. Indicates the element which shows the high contrast mode focus ring styling.\n\n**Note: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommend always including it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color-or-map)` | If a color is passed, sets the default container fill color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`icon-color($color-or-map)` | If a color is passed, sets the default icon color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`ink-color($color-or-map)` | If a color is passed, sets the default ink color to the given color, and sets the icon color to the given color unless `icon-color` is also used. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color-or-map)` | If a color is passed, sets the default outline color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web 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/density":"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/button_15.0.0-canary.98f1b54e2.0_1666306612581_0.5747304593432976","host":"s3://npm-registry-packages"}},"15.0.0-canary.e74b7ba7e.0":{"name":"@material/button","version":"15.0.0-canary.e74b7ba7e.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"0db82747dc5a8ecae4d64ff312ad72729235a899","tarball":"https://registry.npmjs.org/@material/button/-/button-15.0.0-canary.e74b7ba7e.0.tgz","fileCount":40,"integrity":"sha512-y/ksm3DtyUDFUTwi1IG6H2Ne8n2A/Gru1GKJX7rdcirwxksRGAohzujsOFGKugQO9++Dc/wmXCsSHWu/0N4jZg==","signatures":[{"sig":"MEUCIDM8ppEDGuN0hBDsZ3IyqFg2dspQc9i9Gzayb1FZ7khtAiEApr2rhuyPOYhkQTBoEPwYIRWDX/mIYegGTLWbiDhbv6g=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":638857,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjUtF1ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrdkA/7Bqnras80ye8vqo7Akgf1MAD5J8B7NK1hXdN7fNhaah3OqPZ1\r\nUxjJMxF8x1cq89Mwk0jhZkTfnBbexQ2yYL+qhPukwpKCu2XUjl5mw0px5GqB\r\nHRoJ7ZctjUDqrx9u//9JRNZmK++Nj/kLLccdd65FL7Yo8zoZlwg9slSiMMBM\r\nNUjHnQATTdvf98Ig5FMZ7YsA983yJalB/9p/R1VJAOokSmUIfA4SHFtIycMF\r\nCkGTR86MfODuBYqtBwafEk2jykrdWgi5z2m4GN0W9waAQBvb00QcxgCoAzZX\r\nARFESfgFligGJXp8BKlSwp/S/HkpYNOXccpu/RYmwMbaMIYXhtcbP/d+BQnk\r\njRcNo8PmgS2XAHhA8sBq/kxxT3f6W7AfMJUxyk0bAQibQeW8FkZ/9/Nh36Wg\r\nzmazzf+Aiv9eg2yIEPN3tZEn7r/cKQ0n/jdIlsGhJa+bvtozNu4p4DLstJnv\r\nR4r1gEpUxeXy60WM1iTHE7g1HSqRZr9bk4hiQr5Ppz30EJxRAAZ25F/G/6ib\r\nEX9WZdUsArIFb3xJGeRamNeEvwlZzRC1mKL+SHvd9jN4nWOjtWkNfw5kV3fD\r\nB8IVmc2ZIqAL6QHW28fcrUkoTXMLpye5mWcV006KRrbuublNy1H/txcD1ktG\r\n2fonbvOwL4a1mDzSafwNO4McyHk0ugH5y7I=\r\n=wNYv\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button/styles\";\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nThe `mdc-button__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused button.\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.**\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n**Note: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.**\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button--icon-leading` | Optional. Styles a button with a leading icon.\n`mdc-button--icon-trailing` | Optional. Styles a button with a trailing icon.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n`mdc-button__focus-ring` | Recommended. Indicates the element which shows the high contrast mode focus ring styling.\n\n**Note: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommend always including it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color-or-map)` | If a color is passed, sets the default container fill color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`icon-color($color-or-map)` | If a color is passed, sets the default icon color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`ink-color($color-or-map)` | If a color is passed, sets the default ink color to the given color, and sets the icon color to the given color unless `icon-color` is also used. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color-or-map)` | If a color is passed, sets the default outline color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web 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/density":"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/button_15.0.0-canary.e74b7ba7e.0_1666371957367_0.49664762220694714","host":"s3://npm-registry-packages"}},"15.0.0-canary.ab55c07d2.0":{"name":"@material/button","version":"15.0.0-canary.ab55c07d2.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"579d430284bd06d67ddc736b5d8a20ae22faa2c2","tarball":"https://registry.npmjs.org/@material/button/-/button-15.0.0-canary.ab55c07d2.0.tgz","fileCount":40,"integrity":"sha512-7+J5s41SgdZFcbd4YnP7ZXA6WVHEIhC/zoLlqFF6gqc2qox+WAuooBKgrfaYS2sMT3bxwzfOevhceDfBFUBi7w==","signatures":[{"sig":"MEYCIQCkc0nXTB9yXaP9SsobaQy6zv9IrHcS1/ekOqJG3dRaNwIhAMLwN5gPwyq9nTd36jJlgVh5RYUTizlyOVBUiKw6xjBg","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":639289,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjVDQoACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrGsA//WT1WlXZooWjrfRjZ6NBszJFZamw3AzvZpyFoX0UMZ5XYoY44\r\nKRgo7wJ+lYWUytswtMbjaIFCxYX/rjMl4BkrB3+lx/AFTVshERrY0UeZ/hM4\r\nzSyO17VVcSyJsdDKBbi+uHN5Gg8hCfEft/HQb2CsTClmCv0cIP1grhsl6rky\r\nXS+8o4GIEz33CTADuAdiPwp83wF6T9GA6GCixAge7wcqBa9NvKIOYNyeIYQc\r\n8S6oEVnICGT8g0XSA/0QOrHRibXbOrNVDuDW7378/hrTugLKavlgOshdt2NR\r\n7C2F0UI2m5CzuYD30C1I/seZ5l6Fyxs3Q8UNX6C1v505HdZbJY7tfjOLwN5A\r\ni550RW63O7y6mpuVipgEzy5APjToJfprvlUtx3A1zFOFLstN/e59OdGwJyDu\r\njIfSzgZ+vH54c0yZaywlFdRbvw7tzh3KPMut2vn56qSzqTOSZkKUEj10aqQi\r\nB+d64AoPSAuRkQVSnjKeRuoT4fU/dCJeP0k5Fs4koD4rzD1ZiswNGGq7InhP\r\nhf7DSxmYMX6fnWb8Ngu8inVnf2TnRrkOaR/UTSbM6OuD1zl1TYBeCg5aTwgH\r\nqs3RiH1qarbMPuzQs4FuCy5IZYuBcWCtx3I1Pe/dO7VeqllD1pM/HOrMiCNl\r\nRktkbNyAWrTYZpVaHZCI0Fw273AiD05YtTI=\r\n=QHuh\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button/styles\";\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nThe `mdc-button__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused button.\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.**\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n**Note: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.**\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button--icon-leading` | Optional. Styles a button with a leading icon.\n`mdc-button--icon-trailing` | Optional. Styles a button with a trailing icon.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n`mdc-button__focus-ring` | Recommended. Indicates the element which shows the high contrast mode focus ring styling.\n\n**Note: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommend always including it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color-or-map)` | If a color is passed, sets the default container fill color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`icon-color($color-or-map)` | If a color is passed, sets the default icon color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`ink-color($color-or-map)` | If a color is passed, sets the default ink color to the given color, and sets the icon color to the given color unless `icon-color` is also used. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color-or-map)` | If a color is passed, sets the default outline color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web 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/density":"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/button_15.0.0-canary.ab55c07d2.0_1666462760560_0.1295138459385412","host":"s3://npm-registry-packages"}},"15.0.0-canary.fc539db34.0":{"name":"@material/button","version":"15.0.0-canary.fc539db34.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"7daa31127e10d55a3006b86e952d3d8fbe23c62a","tarball":"https://registry.npmjs.org/@material/button/-/button-15.0.0-canary.fc539db34.0.tgz","fileCount":40,"integrity":"sha512-PWVMd4lkk8gN4pfR6HNnqesgoLU058pJne67YLeivGfnE0ld/yDwV2qlCKbSre527vpSri842TZ4nb8Ocyny1Q==","signatures":[{"sig":"MEYCIQDETUIEd20HPWoPc4M48ovU8wpv6eh5m0opgRj5KFIjMAIhAIVWOJgXuFd26joqdHAtYy0BuzYBAwLw+dwcfKLC3pER","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":639289,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjVuCGACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqOmg/+K2ACZER6/+L3me8QF2Smf8iZAT/+xoLKEwyXzpVsqdjST2Ct\r\nPOwiXHv/OaahAj8y1VbQyz5aEOcZ9FJ0N/0O93qFH9o7H74EABEzKUbeEaDd\r\nEJBOlWA0/EHhuuh6cv9lQtXxdgORRKna/oU7klNcgQLTVpS7fRgYk3QuZnkM\r\n/lpO7SH2RqlQVwXpZuiZ+ziQXrXygvjGZ8sum4dbUeYgNrCrTEkUvn+JDDAX\r\nKjji8D49UdEhI5PtOQLGi6HGKuR1Ttvt1i9w31WwEOJhqTWvqOszOg2pNEV1\r\n7DhNA+ysbspc2IxIz+Yc/+ODyrAV61mVHA8axLB7DP+qv0hXEwem8X40lUBT\r\noljqTG/IetB5tL6BlXdOH80kfr7qDVU14nsM7blp2ndOJx3EMtkunyMcdQsF\r\nW4dU7BzkIQ8OosHVC9jcO6v5lXgRaL3j+7HM3xMxPGeQuKOWZgc+00DaJbF4\r\nUl2Vov/WjhW9zZJ2RwGyXBZfTOvxw+xzmUnQG10B1qP87YTzJ4dUNwn0zjG+\r\n1Qzi0D2Oh/RMAobz0XZnIeviydoi/8+0b9YkoPrQCbO/bg3nAtdNjy8CRI+N\r\nFBlhc5+ihAMuMs8KjNW33yS+sTgh5QNg6d96rhCof4nM6Xhu8zeor9rVun/A\r\nJUrPMS7va6+I49SIO7xlkZvdGEn4/n2b++I=\r\n=/U+D\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button/styles\";\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nThe `mdc-button__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused button.\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.**\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n**Note: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.**\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button--icon-leading` | Optional. Styles a button with a leading icon.\n`mdc-button--icon-trailing` | Optional. Styles a button with a trailing icon.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n`mdc-button__focus-ring` | Recommended. Indicates the element which shows the high contrast mode focus ring styling.\n\n**Note: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommend always including it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color-or-map)` | If a color is passed, sets the default container fill color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`icon-color($color-or-map)` | If a color is passed, sets the default icon color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`ink-color($color-or-map)` | If a color is passed, sets the default ink color to the given color, and sets the icon color to the given color unless `icon-color` is also used. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color-or-map)` | If a color is passed, sets the default outline color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web 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/density":"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/button_15.0.0-canary.fc539db34.0_1666637957800_0.3259608318430989","host":"s3://npm-registry-packages"}},"15.0.0-canary.e340b04c5.0":{"name":"@material/button","version":"15.0.0-canary.e340b04c5.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"7b1b6699da43df354d2c2f5cc002b6b852cf4b01","tarball":"https://registry.npmjs.org/@material/button/-/button-15.0.0-canary.e340b04c5.0.tgz","fileCount":40,"integrity":"sha512-9eNFzqWUjJiUEqwFCJr9P9a0YZCDVvyEeK25iM6J2cBLqyiWklwQyyJgLooAkJNtd5oVIxXFAhT1lHMi3Kv18Q==","signatures":[{"sig":"MEQCIG9VKEMO1GWUxYjJpw+zhL+AtIIB7Y6JJfJEEGOQeG02AiB0rqGZTB0kFdrxLZXNpT5VLjeTIxHuwpEYmeM9278fkg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":639289,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjWHUIACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmreqw//QMXh5kHP5Zhcqq6DFYnHHl6ivH3D+KKTt3eiyhGCcPOCGa8S\r\nHphC5nGVS+TKDSPMfBzsxFngNwIWuJgIAKmbrtdkczn23GN4daJGJ1hQCoY3\r\nzWEYMUcum1L5kTEzog5yt20uAyi8RHBBptPAaVqRs+XBYjGwgRxcAZCRpzHM\r\ng0lh6QtS48J6bA9jjGOcRmU95h/Rxa+31PPlPUvXhvycoZ+6l097hFPtJA4T\r\nloZ6TNNtMoYJRZruUwA3rKFJWVfbNhTvyMG2l8vosHQ+1Kkoe9QeeTYiOmTM\r\ngYkn5XQk32gNyMgO+Mog6tEdK5IVupFsO6PYuGxrxq1aAt1NekkvP3USiYzt\r\n3fZdiGVEn1Nak6dXCHsUHtXu2ofzESyXqTdsrX8DC+UIL3S/kBdkQRTbkjb7\r\nqMrhH9CAtH/vCV3mVvcNque1Hd7GKfeKmCJRJhVCOV40McP5EEXzJNo24ExZ\r\nRJWZq/6pOewoC92hZDMrO1sRMq5XIRwBoXrSV60M7DF1EklUF9Uyr/mIpSg9\r\n1h6C3v3awas7k8/p1Ca3iCpgos1iHKd2srECgdpmyaYQ4Kah9RTxaJykWM6R\r\nBp2V1cgRAYjHkhE5qvdmlKiKdad+Rse6K4VvfbVWMrzxVQLSJ/+oumJ/XEzq\r\nb9KHj3nnY/hmhLOBtISnUgmnzIRNu0EwQCs=\r\n=eWXu\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button/styles\";\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nThe `mdc-button__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused button.\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.**\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n**Note: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.**\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button--icon-leading` | Optional. Styles a button with a leading icon.\n`mdc-button--icon-trailing` | Optional. Styles a button with a trailing icon.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n`mdc-button__focus-ring` | Recommended. Indicates the element which shows the high contrast mode focus ring styling.\n\n**Note: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommend always including it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color-or-map)` | If a color is passed, sets the default container fill color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`icon-color($color-or-map)` | If a color is passed, sets the default icon color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`ink-color($color-or-map)` | If a color is passed, sets the default ink color to the given color, and sets the icon color to the given color unless `icon-color` is also used. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color-or-map)` | If a color is passed, sets the default outline color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web 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/density":"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/button_15.0.0-canary.e340b04c5.0_1666741511998_0.7599858670066701","host":"s3://npm-registry-packages"}},"15.0.0-canary.2c1a8f8fd.0":{"name":"@material/button","version":"15.0.0-canary.2c1a8f8fd.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"1f62937057622c58a7b628df5132ae7fcdcd28ed","tarball":"https://registry.npmjs.org/@material/button/-/button-15.0.0-canary.2c1a8f8fd.0.tgz","fileCount":40,"integrity":"sha512-LsdcfzOUvIpCZIKKv9Iqw7ked6FRzQKkt1HVKqdkc21iEobUO7JqclH3BWfYzkzPZ3qJwZMqLgofpEQmm+//Vw==","signatures":[{"sig":"MEUCIQDWeXUu0kunBlxR6yOOnfNhNuoIxAf2NpbHpNmRwgjtSgIgWbsIHtp2kJdwcq+qC92Vr/Cjo2SCjOon9e+SMhYR/fo=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":639289,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjWW7CACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrKeg//YxtRiH/uSEaiB1Kk9c9QlY6Q+Ui9wuL0xdL+Sxbl/nmqN11M\r\nnjXtfGUW07lbUjclVWCGE5+nwIRHExMWr2iDuKwkYTD4NHnQQ3YiKK/Muo2z\r\nbXnMCaqWQsndIlnilcrOBPKk1Zm/95YkKsfxppLfJ8FmPWCPHoyMHojfY1vu\r\nSD+wwOHd7s2NbKMw/BKqodSLH7NXflbBR7w40gdXa27tbe4fPcjbCeGTG3TB\r\nc/RpQApAFZ/Rn+Hj+EQORITTXzJMyrENN1WUr6jfmWmHZIF7ortoTcmGksqU\r\npiib+fnda1L0VRPjXCTkeJb8kDzf0b1lhgn/iLU8JV2OE87SobxZW+i26+Gc\r\nh85EBfCDXXC++42vya4AFLQ+9GLVCucwnI/SeDWH0q59NTOYzxdKp3SRc65Z\r\nrgMfCi6D8fFFBNxGSf8yhohYuqeKEZthCoccJYrB+E1V+3H1qish58Qqwudu\r\n2FNLWCuf27ekRv4FOi0EDKqZkCa8mEQWP0XckOS0yDTOJAEb0zdNxUFiorxA\r\nniH5uV9jZYKAUbzssPNdYitwVo1LnUeQdojMCIJt0wb0/IN4uhcd/YBTgk+i\r\nhhwMzw0r0T3qqWOu92bgZGwS9zfBqSQlvRmY33lJpUwfrbTVk9gj+YfzwiNE\r\nHL6E+8IVYJHwksHJlLh5IMv8873Pe7pEQPE=\r\n=lbSr\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button/styles\";\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nThe `mdc-button__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused button.\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.**\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n**Note: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.**\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button--icon-leading` | Optional. Styles a button with a leading icon.\n`mdc-button--icon-trailing` | Optional. Styles a button with a trailing icon.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n`mdc-button__focus-ring` | Recommended. Indicates the element which shows the high contrast mode focus ring styling.\n\n**Note: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommend always including it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color-or-map)` | If a color is passed, sets the default container fill color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`icon-color($color-or-map)` | If a color is passed, sets the default icon color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`ink-color($color-or-map)` | If a color is passed, sets the default ink color to the given color, and sets the icon color to the given color unless `icon-color` is also used. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color-or-map)` | If a color is passed, sets the default outline color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web 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/density":"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/button_15.0.0-canary.2c1a8f8fd.0_1666805442177_0.14012083250141005","host":"s3://npm-registry-packages"}},"15.0.0-canary.ecfee946f.0":{"name":"@material/button","version":"15.0.0-canary.ecfee946f.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"26d0c439e772cafde039f9998dab821a4c176e25","tarball":"https://registry.npmjs.org/@material/button/-/button-15.0.0-canary.ecfee946f.0.tgz","fileCount":40,"integrity":"sha512-Yvy5sneKGWNXF1iuwaQT+TYKdOqCEDwmT7OLB5SPtJRqBYKiqFpMg7e1X47rf/LfogQ1mc1JU9zibwDahFBbGw==","signatures":[{"sig":"MEUCIDhHj0jOSNnG1KmC2zY5s/euUmOH8IBIzPOb+MzQDCmWAiEAptzOYqe03Z/Oyxc6CWgqyXHVhXRCr6q9+zvhYLHu3e4=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":639289,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjWZVcACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpeEw/9Es/OsM8g7Kgo9z1rlbVkkhSeMwh1Tw6sgGl9EHob5hS6lBpf\r\npZ5Us2+3mh2R2lsoO+0E654TmZp4wqdWaBD+BNE/ytmcGn4XlgFcivdHSVlj\r\n8eQHX2cXBK+CA6Fm2StrmI+ZNAnttmD08CO6vc/iRSyl4bDAIroa+wj5tMde\r\nicW2EPpUm23SamBGvOQ7tXcnvcZNFhLkzBuBx8oi8HqARsXWk/9Fex/+aMgn\r\nepD9/aX46ZR32EMAlvIHgMa5KnRGOUmfSzupYBY2T7i/uyUvYAj/3ZMkhL25\r\nIhcX9KzvFt/Gw3ZifnWM6Id/dv9fdzjCgY83Fai3egeruN5LGPajvXsu8ihM\r\nXF6DOo8+50Pu+E9fQ9zasHgA2OOd0l+OxgdaQUsRUMpVyuUKph7dfZqiJH5P\r\nPJELT1k0jBAFhz4l6ugkA7ZPpd6C6WEcqnbf9COwMGY7MAfI4Qk8ow5PdaIX\r\nD9GYDsmGeycI5kKF5s5d+2LSIoMsDXPjRsRmE257d1aay0nepHCOOp3be5Q/\r\n5rLHhKar1Yw4v7DUFQZBrBCP4mg0c+65KE4SJqNeHYHO183Vtvo6xAI1ZQvJ\r\nMQy/BrU6aepOWItMNIxffJmc395CEFeIVLVFA2NOcGfv4hSiSkbMcnGg3WCx\r\ngrkQg8HBjYnVGnRV6Q2HrGMkojiCE9AOn80=\r\n=MTbp\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button/styles\";\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nThe `mdc-button__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused button.\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.**\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n**Note: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.**\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button--icon-leading` | Optional. Styles a button with a leading icon.\n`mdc-button--icon-trailing` | Optional. Styles a button with a trailing icon.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n`mdc-button__focus-ring` | Recommended. Indicates the element which shows the high contrast mode focus ring styling.\n\n**Note: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommend always including it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color-or-map)` | If a color is passed, sets the default container fill color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`icon-color($color-or-map)` | If a color is passed, sets the default icon color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`ink-color($color-or-map)` | If a color is passed, sets the default ink color to the given color, and sets the icon color to the given color unless `icon-color` is also used. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color-or-map)` | If a color is passed, sets the default outline color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web 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/density":"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/button_15.0.0-canary.ecfee946f.0_1666815324528_0.2445793192838932","host":"s3://npm-registry-packages"}},"15.0.0-canary.73ca9dbb0.0":{"name":"@material/button","version":"15.0.0-canary.73ca9dbb0.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"27880597e45388db1400da7543634c3e49679432","tarball":"https://registry.npmjs.org/@material/button/-/button-15.0.0-canary.73ca9dbb0.0.tgz","fileCount":40,"integrity":"sha512-pFoCjs+Mql3lhF9l4cpWVNPKHIbz39l3Z+yMlLoNEoLSn834UucQKe1918FsJz+Pv7f6OOmTE82H+EPcSjCNUg==","signatures":[{"sig":"MEYCIQDSCH9Q2xMOtWfvt9en2A3g0eWOWQObnWngAll4s502bwIhAIqtgg1vHAQ87wtu3fb0xyyDQA5bPhZRBt9EawSk+3xf","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":639289,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjYAa1ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrLCQ/+PLkU7juHBbkZe0u+zdCD8HNd/AAuk87ZiTo46p+hYfNqComy\r\nNJ3BV2SNzUpH8p8yQ7AjOlAgipNMFP/MlmbJz9lMY+yMse5nf/JHiXDP659B\r\n9Tph5vfBlWQp+8n0Ej2dN2usg1Rj6Tzq8hPC0CsDF/Y2mHQcPDo6Y1zrOXa/\r\nCA/+ZWftk0xKK+yE3lcSqdHrOtNDqDDeYFSeaI6zjPMP+1+eA2yAfgUe00jb\r\n/Yc9ga4E9Hz/ySn6n4Yk4JBG2hqe7kOB7PG3wSzLHEsX8rdrubQCAhciJ3ld\r\n539Z8T9fMXLCbghif1CVRmX7/ItDYHkNXpqWKj4FYcx3Op23ndjJ6tuBuDoi\r\nyz9/Yc1MCqopby3t/blFgSndlHizBYJ9gXg7XYBzRICY+yY8Bh4jgC4Wa75O\r\nDLkPyOFXP9aWYVR+ChKRZflVMHGrHVvrU9y6MVvTz5fiMneQZCKwYsqP216F\r\n3Bwwg0tB10y9ZV2TSjFy0tp8AxuGf8uCqMN/KZnLM2ObL9AF/TSEMKNkHqRp\r\nfdPpg0sfvlnXZX+k7csTmQHQJ1o+IqhpkaH3pxXO7+ttgW6PMraw9gXv0+K9\r\nnvPp2CXdFV4gRtnU27twx7Ld+1QV06GdFbA/3/IzYonH/nSPDLdKplD/yTHg\r\nwN7oBYF8pux9HhCjgjzo1ePcRtSLgIyqcio=\r\n=J+p3\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button/styles\";\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nThe `mdc-button__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused button.\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.**\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n**Note: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.**\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button--icon-leading` | Optional. Styles a button with a leading icon.\n`mdc-button--icon-trailing` | Optional. Styles a button with a trailing icon.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n`mdc-button__focus-ring` | Recommended. Indicates the element which shows the high contrast mode focus ring styling.\n\n**Note: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommend always including it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color-or-map)` | If a color is passed, sets the default container fill color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`icon-color($color-or-map)` | If a color is passed, sets the default icon color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`ink-color($color-or-map)` | If a color is passed, sets the default ink color to the given color, and sets the icon color to the given color unless `icon-color` is also used. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color-or-map)` | If a color is passed, sets the default outline color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web 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/density":"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/button_15.0.0-canary.73ca9dbb0.0_1667237557187_0.7759635608253319","host":"s3://npm-registry-packages"}},"15.0.0-canary.357f2e5f1.0":{"name":"@material/button","version":"15.0.0-canary.357f2e5f1.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"40bd3b6c5e0e5bcee7f6d5c2894391798231646f","tarball":"https://registry.npmjs.org/@material/button/-/button-15.0.0-canary.357f2e5f1.0.tgz","fileCount":40,"integrity":"sha512-dV7WeBvThJV/VCmz+9WSKWmQpF2rBoSuZE038ueIZH9TXCYDW9L48QrUeQokss/9q91kvt0su0Nxw//RVXWTZQ==","signatures":[{"sig":"MEYCIQDqciacYhHt/t/9VhKQKaesfCfzleuYXEp27E3Hp4FInQIhAPkLptDnoLRuHEQZKADrten/kqeQWJuLdmWypJMwkCJe","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":639289,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjYBi8ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmoeag//Zlmiy2BMMQeCA7EfGSNeeKYcCAtOk34uNKAPwdSUlEoths2X\r\nNwDyqDNtClSfEuhi1uVC+gOt2ShoEt2Tpi+TqYyx78UdBxPfpQIPzZxL87Ht\r\n7lGqMKPXqHNtWQDAA1zr6gFwKykGSC0JxBoYdB03gK/xuxPx1hhdFTX3o8YM\r\nIJGGOoLhb0LseY1W6gc3QubSBJ7HCeMtUFGrYIRL+8dDk8bzmX9pE30OICuL\r\nIn27jrA+ynWfHbnfBCHhO5XW8n4565bPc/Undv81cbg2efJ7oVsPpeNbR0pa\r\n8d4kssdUnpy90anFbBxtpbjSSEvPvd6UHJ4F77n5NPPOM2fPcrFdqu51i8qC\r\nUR6ZlqGi0h1S0jDDDPFqiy+12IEz5jMAVm5palAizS35bqQLKkkhkPGJyXFD\r\nREud77K/Vah1qGsSa8mQh2TautWT5qfhhThQllmY9k3W4VdYNsWArSyTT6zY\r\niLqrRzg9Rp8yfhE0rRwGfDNrvKyR/bl2Wf+0r+5q7yUEvj9DX9KIHNRULsCF\r\nh5f9jr62wVd0LVGGc52hWBREA49wQ+j+ZwloZFkidi3M8Yl98QNRVjhSSSG9\r\nMdEWb/pPEjaKjfVUChjN88ruiyrFTrShODdThQMWymTu+kTotyBwNw16tuJt\r\nRsEmvmUYWu071zrWGWJC3Qw+PujxpYHGFZY=\r\n=G7Mg\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button/styles\";\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nThe `mdc-button__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused button.\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.**\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n**Note: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.**\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button--icon-leading` | Optional. Styles a button with a leading icon.\n`mdc-button--icon-trailing` | Optional. Styles a button with a trailing icon.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n`mdc-button__focus-ring` | Recommended. Indicates the element which shows the high contrast mode focus ring styling.\n\n**Note: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommend always including it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color-or-map)` | If a color is passed, sets the default container fill color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`icon-color($color-or-map)` | If a color is passed, sets the default icon color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`ink-color($color-or-map)` | If a color is passed, sets the default ink color to the given color, and sets the icon color to the given color unless `icon-color` is also used. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color-or-map)` | If a color is passed, sets the default outline color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web 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/density":"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/button_15.0.0-canary.357f2e5f1.0_1667242172029_0.10008082643345295","host":"s3://npm-registry-packages"}},"15.0.0-canary.eb103d4b5.0":{"name":"@material/button","version":"15.0.0-canary.eb103d4b5.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"7526babac92dcc1b132fd4098bc4da28a76e6893","tarball":"https://registry.npmjs.org/@material/button/-/button-15.0.0-canary.eb103d4b5.0.tgz","fileCount":40,"integrity":"sha512-xYns73I2ZPP35hMCFF7gloIv3vg+ysFWk7VYOjgO+tKQIlUFkMAdEe5zi/3u9EeyjRVZ9EJB1b4S5mY3zFEoGw==","signatures":[{"sig":"MEYCIQDI3GGDnHp3tFhXR7h3hW5Vy9lcOSf7RqUGJ981pSrKEQIhAPjloCy79dOF5IJi6nmX6Kw1NFj+d8FFIoFtjVv6pBhf","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":639289,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjYChyACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmon4RAAjVhieSRljLEq1zJofLK0ceoeCHBH5SF3lWjSsAXt4P6HGDZa\r\nRckquFYmYXhsfdG7AJs9UzZlIF0Lx17ZdtTK3BxJVq/0lL9JGIuwOyrEh1Yd\r\nNWDNop3u71WIveyevZyAxS4F4h2AFp79d9o72rLK8gaPCfPxJM1Nc7+Jm7N4\r\nrNPPeLbb3t8aKeFIbY0QTJhzsK80YN6Yhbm8isWPZvMfMKun5muKaK0u61CH\r\naWeyCApyyX/iHNvQoWh0DLWbYt9XoP01L0X6g55f5Ldo/ZQu4Sr7J+FusZ4y\r\ny0T5ZJo+oSy2T3ocfqHpCrSMqBIFP+cDZb/CEKXsz8EMd1E5S6g6clbKfU8m\r\nplFs6+0hU3lnuw3YwtJ04Pn+gEw1qv7QV7rp8NvEXNbdFl4UQSVuLPM8VCLz\r\nFfH0pbYPwzBlk4ZtwMQJphecfwNwbsQMZmf/3TJUZw8tNx5ShiEc0iSB31jy\r\nNgorUlCSy/ApKZoKRq/EyPhUtOO+N3RsMxzDVLgoAi+bhQoyt6d0bvWUncc+\r\n6FiGbRxyqXSvDo8MzQlW2Wy0qSB4LX+y4lkTuDSSBo3IyT7xF7icm7X0XRRH\r\n+wLL9VUfbfO/2Bxyz6tWfPcy33Sd1jsnRv6NH4HQcgb3tKxjG/MJQC0Dzgpz\r\nMvc+2iww+29UDAPT6Rv2+veHgttzspubcBU=\r\n=o6vb\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button/styles\";\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nThe `mdc-button__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused button.\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.**\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n**Note: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.**\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button--icon-leading` | Optional. Styles a button with a leading icon.\n`mdc-button--icon-trailing` | Optional. Styles a button with a trailing icon.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n`mdc-button__focus-ring` | Recommended. Indicates the element which shows the high contrast mode focus ring styling.\n\n**Note: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommend always including it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color-or-map)` | If a color is passed, sets the default container fill color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`icon-color($color-or-map)` | If a color is passed, sets the default icon color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`ink-color($color-or-map)` | If a color is passed, sets the default ink color to the given color, and sets the icon color to the given color unless `icon-color` is also used. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color-or-map)` | If a color is passed, sets the default outline color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web 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/density":"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/button_15.0.0-canary.eb103d4b5.0_1667246193971_0.08716739263248763","host":"s3://npm-registry-packages"}},"15.0.0-canary.af5f01223.0":{"name":"@material/button","version":"15.0.0-canary.af5f01223.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"9a6d1c002b5abb9aabb9f54a4a1f602b4a41d371","tarball":"https://registry.npmjs.org/@material/button/-/button-15.0.0-canary.af5f01223.0.tgz","fileCount":40,"integrity":"sha512-zhNANbZiqjyuic+sb7jYUD5RZhxox1HxxWVQed9SwxweKEkadrBXdR6QMpduEMRYFhWP31+yPCP+PgFdSlmlow==","signatures":[{"sig":"MEUCIQCBEbFUlmGcmOg6RFPBu9LfhryXoS0ON06I6nikaGBoEgIgLKJLomJOmF1nI/Jxy75vDiBm0f7Y0PnrfjSwKR8VvNY=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":639289,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjYWdOACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmq6Kg/9EPR2Iu4JmsXy3VbY3Ue5gNcm2De2RrdS949L8J0fvxodppRJ\r\nnk2Kav/jQ9rFpKAMJXbpVqOkhnPIlfxkHXvfTElAcXphVyOXGKmvouK+3ZbL\r\nQgChz7O/WJHFjWxDEpBiCGJnEWwobOoc7eN73FWzL3Tndq6/wouj0aeL2dFK\r\nrM3ECvOU86+C2xa3gpN7RfttIgM7Np3cABp0v/qfBWnsPcdVZ+vT2VmZh+KX\r\nXrixgDFWUk85JiLXisInPQ6n5JXIR4+PpEgg2LFprR8Gi0x6qg6uAstGXSYh\r\nHF6GEPhq4/fdvzQnkCTmO5yiJ5T+qMNxRBZcAt2+xBKeyE6sMZBb6/d/cbHg\r\n/vrIbakV5ShhBWKVFuyY0cNo3D3Nq02Jqg6VOfreim83uY9o7Uei4rx3FoNZ\r\nCkk9bnYgaFkqQVxxuUphDSNoolq+nwEcFUpuLtxs3/mXmITq1BV3q/lFLL6g\r\nE4D0kYJM7bkwIRbVhHsiRfj0a23wLLn/hnYeqxnwAICgqfKmnyVmBWB9FobK\r\nZulqd/ft+eJ17raOZwX5TjASwsJHSfVOq88I6CgI25pot5pooy7F5E1Tuq8v\r\namrCczDfkw9grPhbU3i+UsZ/Ep+fKiOj4NIII0Zz/gOpvMY5+ZtpU7VS57LG\r\n227+EhF//AK1BrQ86AFFsEVPSSti9sLY9Ko=\r\n=2tze\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button/styles\";\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nThe `mdc-button__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused button.\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.**\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n**Note: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.**\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button--icon-leading` | Optional. Styles a button with a leading icon.\n`mdc-button--icon-trailing` | Optional. Styles a button with a trailing icon.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n`mdc-button__focus-ring` | Recommended. Indicates the element which shows the high contrast mode focus ring styling.\n\n**Note: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommend always including it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color-or-map)` | If a color is passed, sets the default container fill color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`icon-color($color-or-map)` | If a color is passed, sets the default icon color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`ink-color($color-or-map)` | If a color is passed, sets the default ink color to the given color, and sets the icon color to the given color unless `icon-color` is also used. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color-or-map)` | If a color is passed, sets the default outline color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web 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/density":"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/button_15.0.0-canary.af5f01223.0_1667327822218_0.9218192230515478","host":"s3://npm-registry-packages"}},"15.0.0-canary.58733ef41.0":{"name":"@material/button","version":"15.0.0-canary.58733ef41.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"04994c2caad7564d07de1415cf845f71a637b913","tarball":"https://registry.npmjs.org/@material/button/-/button-15.0.0-canary.58733ef41.0.tgz","fileCount":40,"integrity":"sha512-OyDObvP6WlR9A822HISmMz8MFpmhXO7Xx2cTfdjsUuw3qlakjzXAaXRrHV521qAKu4j9LSfsKkzsA0siCv5Y+w==","signatures":[{"sig":"MEQCIE9OI42Kd/EcDWOELOk54P8l+fDrw2SEXfyYGFtdb1xsAiAfJ27hlbyIjpbFoxe0h19S3leeNKdD1cwlpJguZCpCjA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":639289,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjYrKtACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmo8RA/8COleE7GRBntimhp9Lu4QXtjosivQytu5sSI9UOqGfofr3BoZ\r\nSnyo1s/9vsp4V4NeX6UlqVza83BhGpwDF+ooA2GWXJq/vj64v0vbrWtkXvbE\r\nGAA0SBxuScKEr+DTMWWTrD9mn7GnWLZTMtLw8C/2SfZutuaxIlbJEuI3gS6j\r\nkFz03vXV3O/IxwDl2v5nP+tlIjxnHS2Jv7RHxPOBdsYle6aaRccqC12RAzuE\r\nq2f7uIfvlImtZhXS6+Q2fNyKCF+DH/TrjJ7RWv2Iql3sUAEzqWbmVdl4uzob\r\nmN/wswVEBxW9XBF26Egema+NO6WeBJglmkmc/WRuouJBoh7XBwbzhKb4eSur\r\n0H9E6FV6YDHC/sLZ3vMixQzIUxOp9VrbzDQzGCdySIeaPDxUuowal6ppQa1d\r\n+SuSoi8u8ysE+S23bg1hddQJyTLNGvwjCVxG9KjZKFf2EUu6e8IgTsQiwFeh\r\nYwZhVQm24WkCRPwhzDQYq/u2YiIrIqIVi3Za9AVA1ExnN9zVBJGBd0pwSPzw\r\nZR8szX2NZclfzryAWrtfXAfpz4tbNVP0oc7yLKxe/4tDldWQLCS2CfxYZ6vr\r\nlWc1/6Nj//yJLNJeDOAQ7NVBuUer7XU1Oez9pGcTFxJXLoCtL4MdRr0yIA3h\r\nTfmp5jmgOfBEfTzN+sD0z9JrU/Jt8UikPs0=\r\n=a7gq\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button/styles\";\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nThe `mdc-button__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused button.\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.**\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n**Note: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.**\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button--icon-leading` | Optional. Styles a button with a leading icon.\n`mdc-button--icon-trailing` | Optional. Styles a button with a trailing icon.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n`mdc-button__focus-ring` | Recommended. Indicates the element which shows the high contrast mode focus ring styling.\n\n**Note: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommend always including it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color-or-map)` | If a color is passed, sets the default container fill color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`icon-color($color-or-map)` | If a color is passed, sets the default icon color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`ink-color($color-or-map)` | If a color is passed, sets the default ink color to the given color, and sets the icon color to the given color unless `icon-color` is also used. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color-or-map)` | If a color is passed, sets the default outline color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web 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/density":"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/button_15.0.0-canary.58733ef41.0_1667412653036_0.5637872583371242","host":"s3://npm-registry-packages"}},"15.0.0-canary.909b48215.0":{"name":"@material/button","version":"15.0.0-canary.909b48215.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"e49836ccb7e7bb5d13008a7ff98221cb3d0943a3","tarball":"https://registry.npmjs.org/@material/button/-/button-15.0.0-canary.909b48215.0.tgz","fileCount":40,"integrity":"sha512-YpUYSxP+WssA/4ANydWN7MSDvkEjwbg9xiKa5Y0mDeS8iqRyt7vdKiCCEfEK456vqTvmQPu0RiZ2/27VAwTnQQ==","signatures":[{"sig":"MEQCID4XfXy6cjhmQCk1Zk1OKkG0XBnkx6Kp8huNptXuva6KAiAq0r3VXp+z4tSlXyLvgfZztCFKxaHVwM+XIuIxtiHzcg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":639289,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjYz6gACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqZGRAAivyDbxez6kr3kCNfhgqGM2NMDGiSXTGrtXFRBsRcNXZKMwyN\r\nqJJMupuivOOd/ZA2aD8PSXg26vSZu1qM5MdkCgLKapzIn/Gd7RvZcccVEf7k\r\nQpMs6pHgfC77GKshfFakIQxZunsqXSByV6ETNnY9VVqiEbj0Dz4Gf7DciTTw\r\n8hQGaQgBiRU4M46pnlvkGzqO1e8Fsv+QArdrntn4DsxqKraBtPTBLe9lS7us\r\nWBnOP93Dh8k2dh1wIYLOpxCEBelYNKhGcdwXiyF2ikKejxURuoVVbQ0ao1bg\r\nhavgLB/1Yqg7lrcTb5AJ+/mqY5w+11MnaeuW4eE07lJuxc7DWRPWq5GkkyYG\r\np/kvjUDe+QXbaOH5fXTj9CyEiyzKVGw/1bywGKX91POynOpiKkG7yDcsYgF/\r\nNRWQXhEJ+vOG0H/bcj3fMxQ+8uaTREW+EwaLawcA6JnUBWdjLwQO9yeJ53Kd\r\nixdVr0IntTwHebHml9Jsb2LXGJ8vELXgcb2sAYOqjqGODcv68RiHGwZofCMb\r\n+ZZyfU9O8sqDnRn3crI+nngRbrLKFWYMicfRd3FPl80RQa8MsDGeqitv1ag1\r\nLqgSJwU0ldtdKmf3k/Xq4udSIWDHAIuQeanX0z19t0/+Tfutg411q+WPqW08\r\nM236UVdeW7tulgjH8ipTmpo9RPrMHfV95bY=\r\n=a66D\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button/styles\";\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nThe `mdc-button__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused button.\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.**\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n**Note: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.**\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button--icon-leading` | Optional. Styles a button with a leading icon.\n`mdc-button--icon-trailing` | Optional. Styles a button with a trailing icon.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n`mdc-button__focus-ring` | Recommended. Indicates the element which shows the high contrast mode focus ring styling.\n\n**Note: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommend always including it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color-or-map)` | If a color is passed, sets the default container fill color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`icon-color($color-or-map)` | If a color is passed, sets the default icon color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`ink-color($color-or-map)` | If a color is passed, sets the default ink color to the given color, and sets the icon color to the given color unless `icon-color` is also used. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color-or-map)` | If a color is passed, sets the default outline color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web 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/density":"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/button_15.0.0-canary.909b48215.0_1667448480390_0.6943069885911555","host":"s3://npm-registry-packages"}},"15.0.0-canary.7f17127d5.0":{"name":"@material/button","version":"15.0.0-canary.7f17127d5.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"595963c31214cba1811fd726cb5132e85b9967d4","tarball":"https://registry.npmjs.org/@material/button/-/button-15.0.0-canary.7f17127d5.0.tgz","fileCount":40,"integrity":"sha512-zuf4xvuLUp4nwvfJVtt+wGatRYSqaxg9XvcLaJeZYSKcUbNdDW/RHkPRx/3D20Vv3aw6Fy4VzRUIk65XgJmL4g==","signatures":[{"sig":"MEYCIQD45AvHU6EEpqTrdPinSFVmTKEiJL+0Y4c0aFI5iYE08wIhAJimJvliAv8STtcbMFXm3QSTBAEIUsakZkDCq6OJmT42","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":639289,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjZAYpACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrffA//VFPKpSuuVlE8+ScoNpEqY2+RqWHDAnDRNxt05Fp8bMPkerv+\r\nafHBKJmj9v/FGEMfeQ6wEDvJsKMZp+LZEWL9XVLM0fFLn9UUNVcMk+p3KjjQ\r\n41jkciF9GRgaV2coBMuKTitFZsuTpXlgPggpWJZivbJCHFhNnW4lWZLsr4Fb\r\n3t92Xe3QzxQdN3GWzApg6J7wli/1B0PWoeC7b1QA4rtgrb0jKu5LyNqMSLij\r\n28yZt6uGkqwZZ+mLuLxRWWEzgy4unGCxGxMEAqkK/mCDcuvAtvyCozikpiAb\r\nxFSyM/ZME2ZZcqmXDglkzHJZTBAWcEc3F4rtFivr4XMUZDk9RKjp9OyEmPgY\r\n2RrVLXhEQ4oySUVpL9tUHoHLrLnLut4OZ/ge9Qh0PYVIccyOEIV9rAI7K0Hd\r\nkyy31+WOnBcD4h+HGu35l1ZP1b7MSL5Q9Te5PchB2Sn7iBToQS4ewWJHFCKU\r\nSx2A3M9ItY5ANQDKwGBnHsU83/ntAj8BEeTy/7mitqNTl49v6W75ziX60Ne7\r\n+oLz/WWPcRNdWoEK7ts13PDP5m/CrI/1N7Ldj2+K8+ZWSpXQXhs3lpDJUZRj\r\nZTPTdljbN0ldQhGYtdJoBCFUym1x2oPbND+UXXmTGMigcPJ/1kDYkrXQKr8t\r\npPhPsLjFX3DECN4aOaJqCjdw6XafniaxckY=\r\n=IKbF\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button/styles\";\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nThe `mdc-button__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused button.\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.**\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n**Note: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.**\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button--icon-leading` | Optional. Styles a button with a leading icon.\n`mdc-button--icon-trailing` | Optional. Styles a button with a trailing icon.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n`mdc-button__focus-ring` | Recommended. Indicates the element which shows the high contrast mode focus ring styling.\n\n**Note: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommend always including it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color-or-map)` | If a color is passed, sets the default container fill color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`icon-color($color-or-map)` | If a color is passed, sets the default icon color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`ink-color($color-or-map)` | If a color is passed, sets the default ink color to the given color, and sets the icon color to the given color unless `icon-color` is also used. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color-or-map)` | If a color is passed, sets the default outline color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web 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/density":"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/button_15.0.0-canary.7f17127d5.0_1667499561002_0.976019700274829","host":"s3://npm-registry-packages"}},"15.0.0-canary.da95e2a05.0":{"name":"@material/button","version":"15.0.0-canary.da95e2a05.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"5bdcffe827eb7a2e83e8ac259412f9b045ca5f21","tarball":"https://registry.npmjs.org/@material/button/-/button-15.0.0-canary.da95e2a05.0.tgz","fileCount":40,"integrity":"sha512-fVQvI+2N9Cl4DQdke0SLmPTHTBgrMzAxfqUCu3h3NS3SblOfw9Yg9l/6Uqfbvh0ZSS8xZs5cdZbRgIi92PdeYw==","signatures":[{"sig":"MEUCIQDCqFpKT/KcxnLkLxIc/k3rp1BW+CqFRa6jYWPG+qUx0wIgJ2+0t6MkpjeGl6yc3sN6ccjEGJIDTEpgoR63UOgBjSU=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":639289,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjZUTiACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpVNA//SHV6rYlZxUB5vkSt906DHPzdQ+3WIjEzASLCIvDQf+6RF2BK\r\nwjOfNbI+JlyClWo5xyN5TnUfeg3eFv9QahStnM2Yp/Gd7ebBYvUDp+leUOY7\r\nd6fF2CpnPLBbep38s0I+za9gnmn0k5eDzXANqnStPn3VPXOB8ouwQn3IeZOU\r\nvQUfbmATdp83af+XSf/THdpqmx1cK09ym9u+vw4+/0uFMhVdl3937a1F/w2N\r\nqi6zXVMFwUjCMCxmX7annul+PLNr55KjBOSynwcBwSTGPchojcyiUNUX7ZSi\r\n2cnRdc+IxsTMmPcNGAVyFIFGLJGOlClNicOBt/ZhQnzGpndvJJC57SuoY2aS\r\nxcJAdRs73vhD0JSeof5d7EY/P1WbNmi1Q0dh4Yq23+o3wVjGi5NOFVVBGaXy\r\nZ33uGbV2seqAAcnNSM8eIl4aPgI1L9AJw9LZuaPxaGsHfAZw1C4L1hCQR0+a\r\n2c773G3qvgIJFlYwkKB+7p94e40Ndor6ybLGWMrZFs0wii+nkSUqKQ/cpsEY\r\nPenDAZAiRKEKfrzl5h+vN44Sua62/D16TZm7h+65jJYXLZueWYUqSDhI1cf7\r\n2Rv7NOCrqhjRAthKcdzD6BawipmNmv0ecFF7Ft2oEE+GDrlNZTAsfH7nsF5/\r\ne9sB7Bgn2winj42UBeLqZ60ewSDsqM6cVhU=\r\n=SWbU\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button/styles\";\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nThe `mdc-button__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused button.\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.**\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n**Note: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.**\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button--icon-leading` | Optional. Styles a button with a leading icon.\n`mdc-button--icon-trailing` | Optional. Styles a button with a trailing icon.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n`mdc-button__focus-ring` | Recommended. Indicates the element which shows the high contrast mode focus ring styling.\n\n**Note: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommend always including it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color-or-map)` | If a color is passed, sets the default container fill color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`icon-color($color-or-map)` | If a color is passed, sets the default icon color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`ink-color($color-or-map)` | If a color is passed, sets the default ink color to the given color, and sets the icon color to the given color unless `icon-color` is also used. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color-or-map)` | If a color is passed, sets the default outline color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web 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/density":"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/button_15.0.0-canary.da95e2a05.0_1667581153803_0.9056181903443232","host":"s3://npm-registry-packages"}},"15.0.0-canary.4832e2750.0":{"name":"@material/button","version":"15.0.0-canary.4832e2750.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"7440d275488d17cde29523bc720d00b33c979751","tarball":"https://registry.npmjs.org/@material/button/-/button-15.0.0-canary.4832e2750.0.tgz","fileCount":40,"integrity":"sha512-93NPuUQYgPb7yGSY14Y3cGfJxa0CwEtHhnmJrEgXKGtrcbibdPDZ+6CxuJ/fjwu4JsCJbQwjxdMzRbLnP9CCkw==","signatures":[{"sig":"MEYCIQDmQh/s18J6uUJxYv3RWZoofoSUJnjRFPccOMkyU4jQwgIhAPQDuyXOtWudinC8dmxvQdz9ZGUnBEjmD2mxSJzS6t88","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":639289,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjZXyoACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmq7sA//RNxJcGaPBhFZrMIT+90EKFb2wzVW/VDUvERZBdSNgYWU5XGE\r\nh/CXPDN101WKqV0vdOqmTtT8cocz47M1TjxfmvhCr5fFzP49JPFnAmKXlcNA\r\nZkqPzMBilUW+7wxUbTxZT7UgiPajOvpecE4PdAKMc3sGSZOKgtCa8HUOoPbF\r\n28Nwd/9zekNJvi02exDK0hmYwBTHzA3s5gmn+Qy6W5CbVTOxqCr9U74VFVGk\r\nI8wypT7uBc4HYtgL9BfoSLcb4N4TJEahWirVS8yq8ZN1WkrNVQ574XSly8rO\r\nSgM05DsEKZAr7H2ZH8rvvQ82zfeekELKqynu2wyOsQB7pIwFceDOcAt2XUnx\r\noaLw0XgfgKynBuweTfAVtPUzdArYDsHjxt13r+L37l14HWL1cLC77BSGxEdQ\r\nk3kyBY7CrB9qIWzwN74OywdwIluSpAXi7ExzKXyuIsecbFWEAFY2TMsOWVXL\r\nLMclAXC1HhLWXQAKJ7IV8Ow3dWV7qL+l7U8uuHLq1wAZkRgfiHImA5x+Sl1M\r\n+svhyCwWSWJeMBB6ZDODs/Aj5bMBD9Pyru4W7Rq/kh8ilXYhcfAL3E4i9Ysh\r\nj6VzQsd7B/q4JTkwAvI2AdFw0mGDbZfwiDECiuIQcPUrZIY56rpX/zY9mrbm\r\nZ35gfE0C6h/Sc24KwEdgCGZQ4jT/5D9xoWw=\r\n=0CZ4\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button/styles\";\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nThe `mdc-button__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused button.\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.**\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n**Note: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.**\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button--icon-leading` | Optional. Styles a button with a leading icon.\n`mdc-button--icon-trailing` | Optional. Styles a button with a trailing icon.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n`mdc-button__focus-ring` | Recommended. Indicates the element which shows the high contrast mode focus ring styling.\n\n**Note: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommend always including it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color-or-map)` | If a color is passed, sets the default container fill color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`icon-color($color-or-map)` | If a color is passed, sets the default icon color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`ink-color($color-or-map)` | If a color is passed, sets the default ink color to the given color, and sets the icon color to the given color unless `icon-color` is also used. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color-or-map)` | If a color is passed, sets the default outline color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web 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/density":"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/button_15.0.0-canary.4832e2750.0_1667595432652_0.3951040208139307","host":"s3://npm-registry-packages"}},"15.0.0-canary.215506426.0":{"name":"@material/button","version":"15.0.0-canary.215506426.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"2b2a52bf79130603754762b0101ec258de0c1273","tarball":"https://registry.npmjs.org/@material/button/-/button-15.0.0-canary.215506426.0.tgz","fileCount":40,"integrity":"sha512-fUU/5cyinLg6g7gk2ycnRcMHSUQ6ijttyqdRy/wUzGGvwEL9Qo4PpCyS0RwUDPVD/kVflqP4qZgezAkmc/6wWA==","signatures":[{"sig":"MEQCICaUozu0kNe0JROjGPrFFU2gh3Z9v7YTCgmCHEnvZCBhAiBevy8lWoAx+aw1OgseUdo0gPt84BRB9tsUInjJRne9fA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":639289,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjZbcAACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoFmA//eAhwx5y3i88NiXSQy3laR7ISsxq6o0yYsj3BvTHeraaBvGRH\r\nf05Pbhl6QKzxappdS8pMPTZ642HPLJkQdu4ffzfzOlHtwM+kR1VyTsJhcCOD\r\niE3WGLBlseCc4NMG+vJrEJp2eu7STw/TZJQgvk88hhx3+oeO2VhpSejApJa1\r\nrHDBl4jqOQizTqo++1PnJwBMvFkWk4KpE46GxfODzcJoZC0fZRi9Aw7G5JMO\r\nxPFULZlC2+F2pbrOlwUxW3C/tJ3CcTAzXdOHxaZZKL7++NBIXB99WFRSEMKg\r\nR0hl7WQsEUI3nwskUCqyHO7NAg/nVpWNCgGFGKfhRUyLqzKJ2PeMrLgqAXki\r\nTQf+vNrRgfr6EtjkoatEMMMRhx1WTYEw3AT6oeqj7AidZ461697z8zdwwoBT\r\nQjDMo1SMpZgp7FIPcXRzlmSeZDM6kQObadReHxqhpj9pfQl9P5v5eMN8ajRi\r\nB4Q88VEzC58IsMZqILvsiLsYmEbWIPcVgvwhSG2AvxEfZRwjzBRpn3dtRLoG\r\nLIrdutmkb22rWzxqvtyhgLRh9VS95QtzdP4cKxUy1LWof824Zm7N1Deiv2Gh\r\nHe3wl9sOpn4RkytpvygjmVfkgZKIebLAigPVv7vVS+pO7oiO9m/BU2jHAOCh\r\n8Nzb7376HQZTrPSojLLfkI++gAqS3Ly94Kc=\r\n=iAMZ\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button/styles\";\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nThe `mdc-button__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused button.\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.**\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n**Note: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.**\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button--icon-leading` | Optional. Styles a button with a leading icon.\n`mdc-button--icon-trailing` | Optional. Styles a button with a trailing icon.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n`mdc-button__focus-ring` | Recommended. Indicates the element which shows the high contrast mode focus ring styling.\n\n**Note: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommend always including it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color-or-map)` | If a color is passed, sets the default container fill color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`icon-color($color-or-map)` | If a color is passed, sets the default icon color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`ink-color($color-or-map)` | If a color is passed, sets the default ink color to the given color, and sets the icon color to the given color unless `icon-color` is also used. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color-or-map)` | If a color is passed, sets the default outline color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web 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/density":"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/button_15.0.0-canary.215506426.0_1667610367990_0.3421730868088957","host":"s3://npm-registry-packages"}},"15.0.0-canary.4cf917476.0":{"name":"@material/button","version":"15.0.0-canary.4cf917476.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"edf65bacd4b42252e0aadbc9a49e00869832f0c9","tarball":"https://registry.npmjs.org/@material/button/-/button-15.0.0-canary.4cf917476.0.tgz","fileCount":40,"integrity":"sha512-27pc7yuuTMwmmBvb9qfKiZEudpJHdgie/9C9nKfw/NVCBPGi5ONKjpTOgohnb9jY/OpgZEu5aBkwh/vMuLB6jw==","signatures":[{"sig":"MEUCIB4HEG5iJOglC/H/iU3ICG1UjfacVrMzgjvOr21UeY8+AiEA4IR2HEw7ig9rIBVQ8Rob3jzSjSOMbEwisPrM3bjglfA=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":642629,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjZqWdACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmphuBAAj4oL51uxlCNchY2ZksredMPkNdYWDti/wTEkep2W7RJg7o9l\r\nvJzo/0xBkGMt2xZhr63zLLoWqZYQdMZL/2+x7ebTQhSvqDMHHj1KTNIhMZYP\r\nAful8NxF7G8U782oNXwJCek75fl+U75pIQQaT71NTN6C5zqY3JAFuMyYBn/4\r\n3L8O+pM4HDadnCse56/kczLbCK8AdMl4o51DVOZN4Iq7U2pJ2/gUQz8yxD29\r\nytmaHw4m0prwGYS6ROkNfmTidxGCyF3qrnc2eyoSX+knO0bie2fYB8NXPAoa\r\nlEapJB2UH6gSJ0Bi8DSacizYn0wuxavGccGZ+vxsebh5li14pIOxXwL8mcst\r\nxIcsdxHbdRDtBap4Y3Yd176+qOtgBLJ2UJ2oWNCx5sowcJgnQZB/j9ApJke7\r\nt5oqO25z6f4pEFtyJyu7AhznseoCyFL853I4dErr7NJUAqVzgPnLh+9mpZmm\r\ndkYM5Baek/Yi0fzIbyiHmIehrWatiMahjEWA4KTF0tz8oVYpluJnePBjYjbe\r\ngNqVKVGORZRKuE76ZRzeB2MJfMNohHe3VZP2vY2trMAryN5rj1Bmb82vNUNv\r\ncx0hETEkSeUUNpIhGjfZ07MOvDd95d1IQTtnK1spn338B/NsyddjQzsXt9DE\r\nfeXfbwZrRjB1IhCUPYJ7h7lePTRv/pA/mzc=\r\n=yOnF\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button/styles\";\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nThe `mdc-button__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused button.\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.**\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n**Note: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.**\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button--icon-leading` | Optional. Styles a button with a leading icon.\n`mdc-button--icon-trailing` | Optional. Styles a button with a trailing icon.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n`mdc-button__focus-ring` | Recommended. Indicates the element which shows the high contrast mode focus ring styling.\n\n**Note: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommend always including it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color-or-map)` | If a color is passed, sets the default container fill color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`icon-color($color-or-map)` | If a color is passed, sets the default icon color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`ink-color($color-or-map)` | If a color is passed, sets the default ink color to the given color, and sets the icon color to the given color unless `icon-color` is also used. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color-or-map)` | If a color is passed, sets the default outline color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web 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/density":"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/button_15.0.0-canary.4cf917476.0_1667671453470_0.7573733762718253","host":"s3://npm-registry-packages"}},"15.0.0-canary.eef14bd32.0":{"name":"@material/button","version":"15.0.0-canary.eef14bd32.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"e0d2e3460406aac7d44a8d4787c641deb0ca0e05","tarball":"https://registry.npmjs.org/@material/button/-/button-15.0.0-canary.eef14bd32.0.tgz","fileCount":40,"integrity":"sha512-FWa6pbk/0LM42b0y/ObP4LbSmTx+dOBFvSdMzRpNjys3JnnExfAGAceQKPl/t/B6hIwvyj0YDS55erDtFaVxDw==","signatures":[{"sig":"MEUCIQDKSvkC7ucsyDh+7aBdWg+NNV9ZmHM0hHzxok3YlzXeSQIgePe8tdkc9J1sDZXjEOKrY3HNW/6nxUr8Afp1/i8pa0Q=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":642629,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjZ+3cACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpRfA//bvsfkhBKhxWuMmti319cFrUEiVJb0R5XYshl21fQ9UvZBYOY\r\nf2oFD/nyj/dcJAQ5Flub9wJGsxRYQWt8vmV0mT5mtjK4dw386XB5ZDAcWjZD\r\ncHW3/uKltNkVFbeMEtsSMi4YiJNP8vXuhNhT8FZcAAAz1I6NSY3+05PP2SzN\r\naL15FcIpGGV652NGXuuA2geScH+oJkX9uZ3RIAcii5xlHn3qGW2n6+BNhynT\r\nFdzmMlWaeC72+QcxbZmKkmOIqnZXWCUULRrKgYW+DBAwT4+EZmPcTV9cJ3i8\r\nM5zb3WDa4766INEthtzEx9xT6IaPHaRtdcdSjjuUZepPdcSyNppsEDc+sFbl\r\nGg1XWseqmrVwZwHWYBbH7xS1UOwUSb8Qr+yoP+7Ntjn5/S+mNMyMzxGtP15Q\r\nchDA3f+7PimOSUrM6ChkaAkbedopsjgE57fRUO8OK4HyMY6yhlDRpcMXSYX1\r\njLV9RJjl3ALLASJk5i+qm/zxSjwbPY7XbDJi6FKYpyvbcPySBCH7t72kTlrB\r\nh2IxMpPXuERlSerqlfCx2fcrJo+KOVL+JocH/NiDGrkW1MivojtzOgs4q4ip\r\nCE7WHRyTpKCfaA352zEl9nMKnfUL1A5XNwVKE/YzruGZ38TSnftWBZcJMiSb\r\nf6QjLJ3wfIwyszvfdldfrAuagCwR4VR8rM0=\r\n=Egbc\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button/styles\";\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nThe `mdc-button__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused button.\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.**\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n**Note: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.**\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button--icon-leading` | Optional. Styles a button with a leading icon.\n`mdc-button--icon-trailing` | Optional. Styles a button with a trailing icon.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n`mdc-button__focus-ring` | Recommended. Indicates the element which shows the high contrast mode focus ring styling.\n\n**Note: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommend always including it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color-or-map)` | If a color is passed, sets the default container fill color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`icon-color($color-or-map)` | If a color is passed, sets the default icon color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`ink-color($color-or-map)` | If a color is passed, sets the default ink color to the given color, and sets the icon color to the given color unless `icon-color` is also used. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color-or-map)` | If a color is passed, sets the default outline color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web 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/density":"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/button_15.0.0-canary.eef14bd32.0_1667755484641_0.6553864386680945","host":"s3://npm-registry-packages"}},"15.0.0-canary.6faa29fe9.0":{"name":"@material/button","version":"15.0.0-canary.6faa29fe9.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"e60022d9deb82287d72a494159ad93f31d8f27d7","tarball":"https://registry.npmjs.org/@material/button/-/button-15.0.0-canary.6faa29fe9.0.tgz","fileCount":40,"integrity":"sha512-aQf27NB101drq4qhHaVMP8yG6uQhbsN941zgLP4zGZc5AuBJZJE8d+p7Db3zSI2JkwbZRUNIrEi/130NdZGyMQ==","signatures":[{"sig":"MEQCIC1Nv6bMuOg6004P7e0QL7015rYXPFHBQhaORQPRdTK4AiA3SjYfV+DEBnJbnmOzHXLb/eQpt8viAgS7MLVLNpbKWw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":641895,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjaHfeACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmr4NQ/6Au8oHjvZw99167gO2tVy1jAit5zFCce5vtPX1JkoNN+j1mqr\r\nDyqiGH1lrKx0AertNU0b1C9xgrHRL7vvKIpM32u2YhB7KmNHqjOc0I9llgwz\r\nZlRqUgxyY1zEyC8CgEe/mGMhCR/ts1k1bG7PSoCntAPjDGzXvjFRhBHNm2p1\r\nCZ4ZSw9alQPOh5Iobb+Xti0uurpWYbONjL1nJQhrxbCmfO8PHr9FJa8OefRF\r\n28I7Wf/4xjyyE28qYYsE4VZ6NPzRZdI6W/UN428p+PeorR7oosexfQmXrDT1\r\nqWms0vMw08KI6VQ9kcRLydECRpul+c/VPvQEhU0Wt/now0QOwBDVDvOogd52\r\nFMd9i/f1fdw3Q52v4Dc+aQMXkEkd96vLpNOtafiF7WCr08Hk4rAjc9AsrZrC\r\nC1xaLMq/WMjACSm+1N41cblfUZVs+aUmbqcCF2RsgHHOURUpy+WsCNQC73+v\r\nSTrTPncTgAHAwV4tXDb0zea5P7yVB6YtjmMohMH+acjusonIZmB1+9g9Z0St\r\n78twSNKaf3F3OE/GaAJAJKCKz3+/66GLSLa0pJaBFhAigcbQl81XmKqCmbKx\r\nLQuIh9U9uu9kaZcpeppuq9VMH0ZBm3t+NbPyjJ/FwCdNdCuB/lHwtCFFLzb4\r\nTjDvyJVakts5f1L6P5Ae4dRErlDm4otK/Yg=\r\n=0CO/\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button/styles\";\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nThe `mdc-button__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused button.\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.**\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n**Note: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.**\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button--icon-leading` | Optional. Styles a button with a leading icon.\n`mdc-button--icon-trailing` | Optional. Styles a button with a trailing icon.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n`mdc-button__focus-ring` | Recommended. Indicates the element which shows the high contrast mode focus ring styling.\n\n**Note: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommend always including it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color-or-map)` | If a color is passed, sets the default container fill color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`icon-color($color-or-map)` | If a color is passed, sets the default icon color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`ink-color($color-or-map)` | If a color is passed, sets the default ink color to the given color, and sets the icon color to the given color unless `icon-color` is also used. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color-or-map)` | If a color is passed, sets the default outline color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web 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/density":"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/button_15.0.0-canary.6faa29fe9.0_1667790814077_0.3473869899651276","host":"s3://npm-registry-packages"}},"15.0.0-canary.9af09b967.0":{"name":"@material/button","version":"15.0.0-canary.9af09b967.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"aa269c06441a4fbabcf1d1fff68a7ce21bba3b5e","tarball":"https://registry.npmjs.org/@material/button/-/button-15.0.0-canary.9af09b967.0.tgz","fileCount":40,"integrity":"sha512-rjzXy32cXCYG8vilQs0wJKGsK5B7TSW3kAUil77hm5nLxlVbJ7qwgMRSUABgnw9G+TteMdRVXgVh6XPHwaAWww==","signatures":[{"sig":"MEQCIAtgS5bYKvL3j8X1ER6I5ohHE+xFnzTuFK51tFIQPovqAiAMswr0HWBoElTxvHqIZPwdoGbXDr5OuNrEI361mAK1kQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":641895,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjaU4rACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrSfA//VU81lyXjtKbetSYD/r2+xrMu4Yy3prVXAuETsiJQkhm5ubMj\r\ni0n4Fhh2ANI6d0aU2sZYe0isOGfj7yjyTqWd3qPRUNciamyTNviOrNFB7Nwl\r\nqFGs4rvVCV9g6fkSOMq6GWqoaxXcS6mT251VYCetdGeKO3unx4Ukxe8nRtE0\r\nEAyDA+TBVjw6wk5uiMLgqbCrc40Wu9M31+K0ZkYwilLMMKr04pKm6adwJmr/\r\n11WoUIGP3BBD+OBnmwfZ8BotxUDcZziGx3lpHe+rr2guYccZJGlWTFxsm77c\r\nqe/C39Raom9nRQ+fT3BkJMhsL/UtaaTkorUc8PO24jySO71eDWVy30c9Fx/Z\r\nPURNOnKCZrkcExau4aYV7RKZ62aTISI8fVJHmfBY+z6fJS2PAks4x1k3TsxM\r\n14ZA/WrOm2h7FP92cZQBjZTfSc8VQQvb6uYwBrR+S2IWJQt4xpRn/zZGNMAA\r\nE1xpz3/FDmixOvnh06c1Byr77LGYfuNUjDu7QxZ7axiRBWoFltjdosjzZknd\r\nqFai06EJCtSPFYg/PJ3HFkJlB7UtFj/EX9EuyLX0OAOolFpF+MQcosff8ezS\r\nil6nYzmnHDpiexjjj9i1nATb+leJLHLWpDS7/MVyCvMCgBxsw+c4s7yFDfRz\r\n4gs73IC88qgm13XHPf8Yv6Nb8DGLHaGJeFM=\r\n=1CSX\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button/styles\";\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nThe `mdc-button__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused button.\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.**\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n**Note: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.**\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button--icon-leading` | Optional. Styles a button with a leading icon.\n`mdc-button--icon-trailing` | Optional. Styles a button with a trailing icon.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n`mdc-button__focus-ring` | Recommended. Indicates the element which shows the high contrast mode focus ring styling.\n\n**Note: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommend always including it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color-or-map)` | If a color is passed, sets the default container fill color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`icon-color($color-or-map)` | If a color is passed, sets the default icon color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`ink-color($color-or-map)` | If a color is passed, sets the default ink color to the given color, and sets the icon color to the given color unless `icon-color` is also used. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color-or-map)` | If a color is passed, sets the default outline color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web 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/density":"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/button_15.0.0-canary.9af09b967.0_1667845675018_0.3578679982721744","host":"s3://npm-registry-packages"}},"15.0.0-canary.0f54fbb93.0":{"name":"@material/button","version":"15.0.0-canary.0f54fbb93.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"bb7c5cc037e25e49f7ff6f01a8a2741540587bd3","tarball":"https://registry.npmjs.org/@material/button/-/button-15.0.0-canary.0f54fbb93.0.tgz","fileCount":40,"integrity":"sha512-HIO8cW3if+FVOmukDvM+aiQprXOonQDoydCWHRFCGUvIuCGgzcseTegjycR3ZEEAUlJvFTFMopRNEp0eVGZc+A==","signatures":[{"sig":"MEUCIQCNsMD+6Q403g9MidqDqcbQRwjmiCJuIj8OzWfO39pbXgIgDn2A3DwY4wt3S2HBrOXiESkrrTow2wPhxLf0jRRae+8=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":641895,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjatCcACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpPDA/+PIr/9oT151Y4wSHP5gh1HdviJvUeARQvPCtK6OPtg5OaBXUe\r\nJYC8kz/QjUgu2Gyx6sqwrFjNGLipUT20y/bY3S4qvbRR51lmAzoJxcJMQDtS\r\n1jBaBa35pph6/WkFwT4yrCWO9gvXq+J0NpC00CeuLxtuSSPNOW28WcL9TZ+U\r\nn8TBr62tMsIyosHQtJ5ODbdnxnMkhq5kc+kldE8lB9GFqCSx19a2NLhB+7vs\r\nLS4cDUgKlEb0N7UvsnL7OyOqVAyAJ1Dp0Gd2Ha+tE8EtsSWGuFzUQc2AJj+H\r\nnQLem8MjBDlwn5TD0VStt5j2wxbOBxb1V8sLNDqj/NEopIUYHJR2VL+Ix1l5\r\n10aQUmhQ9RnzYZc0dbpYkFb7plwi+4Hsl3RTU0g+4104mHOQz2ayksAXSKPh\r\nYO3dVgqTG5feAKRBZCY3dEEtQONP1wbhza9hl0ElWKOAaH5mddVAM0ymrBCo\r\nYvdfNAp7gXesM24AY2zC8KzHzQQFHg4szSY4mUIvEo7fDHrUF7O/r6IuxmAx\r\n1x6uK1KayRazFKgwj4kN8tsnuN2ULF5oqk0yJh2Uh/EmJZBPadx3gtNh3W0G\r\nWY+dlmVbxApOPMDIkE1nmQYEU0G99JDU2Keu17zX8HVmAbyppaP6K8c3+hNF\r\nNf4RwW0tAVicTkzhqLf/yTD+JgYD2GuKqp8=\r\n=rNnk\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button/styles\";\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nThe `mdc-button__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused button.\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.**\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n**Note: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.**\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button--icon-leading` | Optional. Styles a button with a leading icon.\n`mdc-button--icon-trailing` | Optional. Styles a button with a trailing icon.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n`mdc-button__focus-ring` | Recommended. Indicates the element which shows the high contrast mode focus ring styling.\n\n**Note: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommend always including it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color-or-map)` | If a color is passed, sets the default container fill color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`icon-color($color-or-map)` | If a color is passed, sets the default icon color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`ink-color($color-or-map)` | If a color is passed, sets the default ink color to the given color, and sets the icon color to the given color unless `icon-color` is also used. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color-or-map)` | If a color is passed, sets the default outline color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web 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/density":"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/button_15.0.0-canary.0f54fbb93.0_1667944603796_0.7129023866258528","host":"s3://npm-registry-packages"}},"15.0.0-canary.a8d47f9fe.0":{"name":"@material/button","version":"15.0.0-canary.a8d47f9fe.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"9aee14eb2ecf60503ed8815c6f40f321d65dd949","tarball":"https://registry.npmjs.org/@material/button/-/button-15.0.0-canary.a8d47f9fe.0.tgz","fileCount":40,"integrity":"sha512-0czwXpUb1DLSNE6sr1wgkZWGNJTp4IlWUYNTB/Tnyn0cEU8ac8UPjq8rUazP7NDZ/iXt+o7JD75cyPhVIGCTBg==","signatures":[{"sig":"MEQCIDoo0VzHbdI4wN0ubHBV51kNuVaUj0rZ0j2aHvR6uCOLAiABYBiGPC2vLXUSH4so7vkrkEOcLbCgVo+muruatIrUuQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":641895,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjayn+ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqfRw//ZniCAja7sDODcjy+WSdkIwesRVgJEUT82S/byr6/sQY9YR0W\r\nUIPXcAMb+BSxhX/q3JAbDDC6C1ckGv4gIoCdFk3vDKmJLc8LfvAnMW4hojwM\r\nynXSpn70z5+YdYivmaMXhUV45qv754iFhw295vb6yEOmSHbpIqQj7pFWDzt1\r\nlZr+IMEHFEBjNfDR4OOme/iXKm4UxpjYtoxX24YF86DJOnvcSPAx78O33GAV\r\n5AFwYoODZkYwb0+Gnp9ZblyWeW7f/ZYXm/1/ByXEJmp8dLERyJsVM/pYSrmj\r\nt1lU/WKtUeMMWnhBcOsM69GnZqqekKpRK12JoNrWMAxTBwx9k2ntNaInD9fa\r\nErBG9My3JTWiHyEhPc45s9X1XQhPO0BUBZwK5ibADZQD2jtMIF+fTPFDmazB\r\nfxaNddiUS+X2ESY+E2sH9lyFK5f7gxscmQPw3WxqdGN18dUH+VaF8Bd4xqYN\r\ntU754sKDFeewKE9z5PwM0rUr8J5m1B6NSV4yfBlrMbB6yn6cOqWP60/6RARi\r\ng1FKFSGKDpMOBsFWrmExUrKHonRQzb6wSFaZmLxqn2EaiqeCcQTQAlSerof3\r\nGFI/HKO5o33XX8AcqyAf9SAqq8NLDD09GL0cGFx1sJkRkdhCk2D6eEExtaab\r\nKU+LQNCVXICyxnCpJlJ+OHk91IYM27wbmwE=\r\n=mEmg\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button/styles\";\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nThe `mdc-button__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused button.\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.**\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n**Note: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.**\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button--icon-leading` | Optional. Styles a button with a leading icon.\n`mdc-button--icon-trailing` | Optional. Styles a button with a trailing icon.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n`mdc-button__focus-ring` | Recommended. Indicates the element which shows the high contrast mode focus ring styling.\n\n**Note: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommend always including it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color-or-map)` | If a color is passed, sets the default container fill color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`icon-color($color-or-map)` | If a color is passed, sets the default icon color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`ink-color($color-or-map)` | If a color is passed, sets the default ink color to the given color, and sets the icon color to the given color unless `icon-color` is also used. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color-or-map)` | If a color is passed, sets the default outline color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web 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/density":"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/button_15.0.0-canary.a8d47f9fe.0_1667967485983_0.0491869940617542","host":"s3://npm-registry-packages"}},"15.0.0-canary.66a1e75e6.0":{"name":"@material/button","version":"15.0.0-canary.66a1e75e6.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"0698eced3852948159199bfa4ab72ddf2bc85c91","tarball":"https://registry.npmjs.org/@material/button/-/button-15.0.0-canary.66a1e75e6.0.tgz","fileCount":40,"integrity":"sha512-DAXkHFwfzAas+ZpH9pMVqPVfhI8jV7F03luIIbSsxq3LwfcJpuxJkas3RsnQHVXewOgzY590kwmsuevzWU8SFg==","signatures":[{"sig":"MEUCIAPO701PfpvCAmr6ailXbrD5dam9ScjjoY5cpvMaCaPlAiEAzGLyoM3W9zwXc6YiZBDZuXYkk4Prlfukwlx2c90R/mY=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":641895,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJja3RvACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpE+A/+Niasr2IkAwYhe25HhrV5tuc7NQd+euNaPJIEGo2/TK8aecOr\r\n6TUdCHFAWLrx/CB9COwXZyR47yh8S4waIQunnXakidMt7t3zoIZgE1s+93vz\r\narmGqsP3sdJzFqHPyr3lEdTMZYQf9ZzmnrejNNFNU0iyoYPpr6gqOiVysmSP\r\nTQpN6qs6PPOjbTclmINYE7CR6nYVaLNhbqNVo7ibZ8HekaMCyNARQdKI2bR9\r\nAlvs7/mxzqT73liQHG7qn1t33v3+Ce7SQOq5YkD2SyNb1pYKf4iC9UowAjJU\r\n6KF084vbagD70OOoXl20G+Lg04p1A3TUohukW1ebpT9IpgLEQCezK1kl1Tkd\r\npLQPy8JJAyW+6XCU512UZP9ioggwvsuRhBidsV2XRdYVkNetzInFcPeiJ815\r\nkOkkBjBzVXNvoa26q1USrHCwyqGIRY0E6Vme83PH27W92N6dD6OsCBUqEHL/\r\nDsaYCcYZJn1ZBwwsedDFrS9BD2kwSXQXeHSZ4848Ee0+2hBTU0dggWqxQRnS\r\nyh5ELqgqtSVsea/P3tUGgTqa9lreGSpfWaJX5/qmweYDOMfUARKQXugBafOv\r\nUQyvm2GCYnfZZum1S2CYWK3tOfCDiuLMoivdqznRvNvLvWo03bOliv92m6KE\r\nAXiTsSW+Z7fQpOYvqj1qiZqpJgAwQG65Jb4=\r\n=Nyl7\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button/styles\";\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nThe `mdc-button__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused button.\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.**\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n**Note: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.**\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button--icon-leading` | Optional. Styles a button with a leading icon.\n`mdc-button--icon-trailing` | Optional. Styles a button with a trailing icon.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n`mdc-button__focus-ring` | Recommended. Indicates the element which shows the high contrast mode focus ring styling.\n\n**Note: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommend always including it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color-or-map)` | If a color is passed, sets the default container fill color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`icon-color($color-or-map)` | If a color is passed, sets the default icon color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`ink-color($color-or-map)` | If a color is passed, sets the default ink color to the given color, and sets the icon color to the given color unless `icon-color` is also used. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color-or-map)` | If a color is passed, sets the default outline color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web 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/density":"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/button_15.0.0-canary.66a1e75e6.0_1667986543490_0.6904005402400304","host":"s3://npm-registry-packages"}},"15.0.0-canary.5e5c2afc0.0":{"name":"@material/button","version":"15.0.0-canary.5e5c2afc0.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"fed253df6111c5d564f5d3062bd3d5124d09d6a2","tarball":"https://registry.npmjs.org/@material/button/-/button-15.0.0-canary.5e5c2afc0.0.tgz","fileCount":40,"integrity":"sha512-USmf5Yp4TSRHAnQv1rfmeR2oYe7LbQr32turUKOvvjSy7bn0pW/5I9GrqmzVkkP9+n/0xGo8bLzanvXOKXgYHg==","signatures":[{"sig":"MEQCICoSoYlN73qgqT8n1qlJFvLda18Bfb1h5eHkH9qS/x0AAiAfpyRMIRODtG06cvKNpJbDDMqjmg8Mj7DyumMpmVAKcg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":641895,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJja5S0ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrxBRAAl/t6dj+wOz5sV4xidhk7medHJtnfZT2Zq3Xq+jrymmpCZn7c\r\nVMVrzyT3HnOj2kDWGoUPuo7ohpXEzv+UZyNR3te0H0Nd2nkzJFwtmeFLlqa/\r\nvLwBITzIVgLFtHgbjjxS4B2pRQEF+XvRzcukfM+lijCo9zsz6MUuIqXfYTgX\r\nLYnxE0esNc0tTX6VGHMg3pqpBK02km5+S2YPDvRtp02UgoYRFuFBK1dlzL9v\r\ncMsTfq4/9kN1goQ4tUOY8GIgtkv+6nu/yBDuY187b67+Lt61XRD5ZmRcdvxv\r\n4acck4+9AsSNGIje3LfLmg9qxhqKftTq+O85/u9z7rSYKDuX5dfQm113xWTt\r\nJryuxQE+oAffyq61DeT8w9TbiZfKfmvM0poQQVSj7mZ3p8/WgYjSLmSvmucF\r\n6upiooCkL5BpAPaNotSMyxyRsAIcRQW56MHefnFtneB+wjXY5SnkMePtbgQ6\r\nN5gxMURrbgzKbYUsXnfSG0aTM5HQ4IjHAFN86gsLzqeFvvZ42LnmL+E1zh8f\r\nS+rhn6gH2gHij3l0bXrluyTQgd7Z1q4wTx92/WqhlKKGMP2N6cITtzJa4Yzc\r\n8uowbbE9jHKOnucBh+SI0ENSWEyR3IbhQcukZ/R/bxk3AEMb6ihIJGK8slaH\r\nKmb6rl/gVfgUCBf3iDNpYT6JhmL+kKPsJLA=\r\n=8skF\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button/styles\";\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nThe `mdc-button__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused button.\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.**\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n**Note: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.**\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button--icon-leading` | Optional. Styles a button with a leading icon.\n`mdc-button--icon-trailing` | Optional. Styles a button with a trailing icon.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n`mdc-button__focus-ring` | Recommended. Indicates the element which shows the high contrast mode focus ring styling.\n\n**Note: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommend always including it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color-or-map)` | If a color is passed, sets the default container fill color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`icon-color($color-or-map)` | If a color is passed, sets the default icon color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`ink-color($color-or-map)` | If a color is passed, sets the default ink color to the given color, and sets the icon color to the given color unless `icon-color` is also used. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color-or-map)` | If a color is passed, sets the default outline color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web 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/density":"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/button_15.0.0-canary.5e5c2afc0.0_1667994804760_0.014109052568536118","host":"s3://npm-registry-packages"}},"15.0.0-canary.3e3f43359.0":{"name":"@material/button","version":"15.0.0-canary.3e3f43359.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"88136d2f8650a72b99c179174ffd6c4158dcacd1","tarball":"https://registry.npmjs.org/@material/button/-/button-15.0.0-canary.3e3f43359.0.tgz","fileCount":40,"integrity":"sha512-JfsDGQ2KsxTB2ZB/xH3yCJSInFPj/SpbUlwqPlMDGGG0Ubwk9JEUbAJsEnOMcY266qrV9YdcF7z370hvD2q+rQ==","signatures":[{"sig":"MEUCIHt+lkRyKPqikzNr+ervc2qa+9MCZ/tKGKoAye/lRvxSAiEA1DUx2rm9vz+y4fGt9Zs8NvwOnvuc2UUZhT6CG+mYFDc=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":641895,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjbAd1ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqyZg//U/xdHGZv7DS4g6TgCOdHTitssqf3eYyD9HDSd4t5puMlmVUL\r\nQnQ3x+pJzg1DEgdTs9lOO5jzkuvF42FtX5sxC4TtKoNA0Ozm70MPpyLziYrZ\r\n37f7u/OY0BnGtDm2KUxFMbL2qYXsFiN1d/kJnMshvMKvq4vU4A4/3M9TzP9C\r\nzmNIKa8i9nfIMZVbbqOX7wXSqugl+4Bz4Wla805cNrZiMZkOWX0Axdwp3dGH\r\nNp7E5mm33DBZRYbA5gpvLeT4ydu2n7bNWFQAV2i97Mg3zZkk342G8bQuPlF2\r\n6PKFLzjaP5vyDGRMwZoZ5e47lq9HnRzFbeQWYzT0iwHm10nG0wk4PHlnK0YY\r\nLieFP6YIl2Uw+woGIphOq67fXUHPzRZZAmzBfwdgVJtkbgodlokaMZMFwGkl\r\nnnFQSw9mYaA8ZPknvwiB9dQprA1F+B1unQlFG0KeI596LDz05CnXfF1JzbLU\r\ncTlNikOr9wpCouN4kAkINXDuDvAmUqFZwIvbfyz7aFtjGr5+kmtjemYfh++1\r\nllaKFz6e3riGRjNmOCUdR8c+VAHQZ0WOymjrEQYbjUWYK3Aq7zatK4oKG+vy\r\nZZUj91/VogFKpIZvmawmV/8VvNz7qRrKK3CrpqnCZ+V60Y80o/jZqRV6G4oX\r\n9AZCHOCmn/sXB0KlIGPMAMPEZZRG0sdxYS4=\r\n=s65I\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button/styles\";\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nThe `mdc-button__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused button.\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.**\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n**Note: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.**\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button--icon-leading` | Optional. Styles a button with a leading icon.\n`mdc-button--icon-trailing` | Optional. Styles a button with a trailing icon.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n`mdc-button__focus-ring` | Recommended. Indicates the element which shows the high contrast mode focus ring styling.\n\n**Note: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommend always including it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color-or-map)` | If a color is passed, sets the default container fill color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`icon-color($color-or-map)` | If a color is passed, sets the default icon color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`ink-color($color-or-map)` | If a color is passed, sets the default ink color to the given color, and sets the icon color to the given color unless `icon-color` is also used. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color-or-map)` | If a color is passed, sets the default outline color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web 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/density":"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/button_15.0.0-canary.3e3f43359.0_1668024180867_0.9504525375280146","host":"s3://npm-registry-packages"}},"15.0.0-canary.3f667fac6.0":{"name":"@material/button","version":"15.0.0-canary.3f667fac6.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"3d10529f800e7e30a61102ad573aa9d3ee841b85","tarball":"https://registry.npmjs.org/@material/button/-/button-15.0.0-canary.3f667fac6.0.tgz","fileCount":40,"integrity":"sha512-JSG8kPcn5nXrauPRXD8kdeyTYf/8HqyjBPbYEC6j+4MCggFiH5VHYwrkXXRsOgt/blAABQJLPD7U2WqGO9A31g==","signatures":[{"sig":"MEUCIQDKJIHIl6IQgEbpjW5FstjwM5I/QFguXexw6axBxy0PPQIgcEmcCkTw/p2kv0OvThfunrvmYui8DzMD9Hdts6Kp7Es=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":641895,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjbCRVACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqzUA//fxUJOwSRolRkOh1vECSEyqNDO0Dx3BFItb0e1AYMk9t/uq7i\r\n8E1GhnOlVWsJLb9xyN1RVzEErNm6ut5gAwaN27viaOuKDtp7TKCFoUbwr4iA\r\nA8rHgSYhfiV2xMoXG6x/fUt9HAaG8wdK5yHTPNNA0456rzXXPGIDhHUSbHBN\r\n1E6qYlGemRVtNu46qzdm5bQ6SiHmyqSk23xRlPzRdVUDWSTCJnkRxRS10Llt\r\nNHtSvpjNtvD6h9IqaoTpiu/JwKus8AsSCNJHFHPjoRwo2AaxaEQaDj8LRUEX\r\nPsSlL6pUhwbjL8aXBWFqUqqErfp4UcPur48ymtC1Y7LG1ICyGRYY1Bi8Svkl\r\nmomLrTgxxj8W44oVRcg0GIFpDiotyXVbIOReZ0edGHUT8PhLUamsEJckOKnI\r\n476QRVV9qjfR41a/WZ2D+Ojv+eDUkPKR0AwfdfWn/9AkiEaSjoWRTNYixPfo\r\n2i1aOPx74mh4GeIZB4BihbwkFlbaQsCztTQaX+ltQpWjUAP0sSRn9RSwnDPu\r\nHb//P05+CUo7RdL9DF0VCIpFVb6T7B/HF0lxjttIpf1SFcRnBaImkg3znnTx\r\nra7llUQL/mX7uU/nZ9cOD1s1drqv1QdqvNtgLgBbFoCvm9UoeacSOdcRtcke\r\neXBa7yVTiKRxqcx16LFe1o2nbXxHBSgXBak=\r\n=mtev\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button/styles\";\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nThe `mdc-button__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused button.\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.**\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n**Note: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.**\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button--icon-leading` | Optional. Styles a button with a leading icon.\n`mdc-button--icon-trailing` | Optional. Styles a button with a trailing icon.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n`mdc-button__focus-ring` | Recommended. Indicates the element which shows the high contrast mode focus ring styling.\n\n**Note: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommend always including it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color-or-map)` | If a color is passed, sets the default container fill color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`icon-color($color-or-map)` | If a color is passed, sets the default icon color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`ink-color($color-or-map)` | If a color is passed, sets the default ink color to the given color, and sets the icon color to the given color unless `icon-color` is also used. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color-or-map)` | If a color is passed, sets the default outline color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web 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/density":"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/button_15.0.0-canary.3f667fac6.0_1668031573158_0.3800484372157076","host":"s3://npm-registry-packages"}},"15.0.0-canary.faa28c1c5.0":{"name":"@material/button","version":"15.0.0-canary.faa28c1c5.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"3922cfbd16694c064672eaa61a8c9d81789957c2","tarball":"https://registry.npmjs.org/@material/button/-/button-15.0.0-canary.faa28c1c5.0.tgz","fileCount":40,"integrity":"sha512-0brsjOvvWZEhICeqKDc2YfETXOptGQ/RRdSB41k5pWwO53QehxCJg4CZaaSypmqDPHnDptLzgUa1zPHKUl6rAg==","signatures":[{"sig":"MEQCIBU0KAKucoN75CNErW0v22qqTMOQfAjKs4EVa/CdlwWUAiAHz74uInF//7xM8jCzqZ76UEcQlsSzStSUx0jphnRjqA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":641877,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjbnntACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoPHw/+N+PNumJzVkvh2izrbLaC26iPtrEWMWGnFINALeZSqsO1ajb5\r\neUSXl3Upd4RNsYaLwLeUaxdpKnIWdd1XyRpU5mAi5eyolKIGB8tI9Afk060I\r\nq8Ne5Ql1DB23KXJP9XI4+UPpsgSOplGGnd6nGnPLvf/W37jsh+B2StJ/Hclz\r\nikySt2yfv+oKcAQ92c6pPb1syUYa6INzOZKkqQdsBOY07SE9dJFlJk1T7NVK\r\naRy+rCUjAlpIfL6joIxAAKM/OmrSV4npmqOgcLIByI5MdzoWFLXak5OuA2T7\r\nMoUyb1411xj666zZlHOD+61nBktjiUPIKOledRhhBFP4NEAESy1+y2F8n3Ld\r\nKZ3r6o3ont0RLeHii1pX0AtQzD9l0EzrfoqPF5daRZZ9czNse7PgdKaKbfw0\r\nOOckQDZXa2BSvH/bGIyKbN3Or/jJ+dV8Eq3XhXrEoIb/+obdvHvmmUna8GT9\r\n41vWs8SmBCCL6BGbydGeHGq1ZhJZCUOxb1nJzInGT1ekGZUVQNr3y0ZrdV9A\r\nfQvktVdq6eqjln1ActAd/u6FxErlPFOJ2WbtOhxat7kaASOgy5X9qAZg+9yx\r\n8rnvN5veN2FRRpOuCb4rirzQAckES3EOBZ31JJfKmc6UkNDAFmAz02xDMOIS\r\nl3rmoCEiQ9AHmw+C/bQfGYQxlJomvZ6FtXo=\r\n=8rJd\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button/styles\";\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nThe `mdc-button__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused button.\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.**\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n**Note: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.**\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button--icon-leading` | Optional. Styles a button with a leading icon.\n`mdc-button--icon-trailing` | Optional. Styles a button with a trailing icon.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n`mdc-button__focus-ring` | Recommended. Indicates the element which shows the high contrast mode focus ring styling.\n\n**Note: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommend always including it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color-or-map)` | If a color is passed, sets the default container fill color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`icon-color($color-or-map)` | If a color is passed, sets the default icon color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`ink-color($color-or-map)` | If a color is passed, sets the default ink color to the given color, and sets the icon color to the given color unless `icon-color` is also used. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color-or-map)` | If a color is passed, sets the default outline color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web 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/density":"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/button_15.0.0-canary.faa28c1c5.0_1668184557441_0.986543942200129","host":"s3://npm-registry-packages"}},"15.0.0-canary.a868c7866.0":{"name":"@material/button","version":"15.0.0-canary.a868c7866.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"1ab834e94e97c1cb6498db798d4e9e3f05202f3f","tarball":"https://registry.npmjs.org/@material/button/-/button-15.0.0-canary.a868c7866.0.tgz","fileCount":40,"integrity":"sha512-wa/RW/0DHUZkYmHOFlMKpeHMovLW3lAh1NmF8POTXRHm3CNGjVnMoeItkGGLzRIeEIm307UYbiwxRcAEZOsUsw==","signatures":[{"sig":"MEQCIHAGhKB2DNWcc9uIdrhjK2fdaKWcKTPyJsIEC0ghzx7OAiBGbwezygQdHseyWbop1jkQSUvRRuHqjJOT4mna8hPgUA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":641877,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjbnoYACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrvOQ//bsoAevL03JO3nSM4DrLwVkMbN4Z5krnsXln9ONt6RTsTsvPA\r\npPNUthOox0laAONLKbdV8n24hIqpDZI8bghV9zxax50FdHAOwQUkuOxDm4rQ\r\nLvn/tZ47qCkV/lsnqifVQy3rBiMS9ZffJA93VuWo1ZW7wquSEkGktRj/TeNu\r\nRA4/vKXJvFtKR3O1l26UjhEl/ok5FLvnw7v2w8Lr16t4h4SCu8+0tTWy5XH1\r\n0a/ZVTILrwdvDCjXY8IvWoddbux0761FGZp/GOuJyc3p+fQfWvwDDCVc/o3D\r\nuBKCfFq0uWS3JcNgX+wi2rfZ22pcZMazwTxSlOOn9yx9LzikWQGEJ7hgYeEd\r\nNGU4bxIRMpZ0yipFdQUvsdcBJYaD4uryZRHagDBdHrkGdFOrWnaZOj0EhT2h\r\nScxrmOnCdkd7h17qRJO1qcD7DMfnliJb1IkoYZ7Ia0zh5cQUfPwHsN7ioJ8l\r\njSD/bPefYMC3NtbwaLII5eg8JgKj+Hue0a8/3sKa8N5QXIHVGTYWSgLFiUAf\r\ni+cSXj8jfZ42xYuX3bsqUtGbun+RZ0Mde6YlJS/Pn9W2sZuIpBfVefCIAXew\r\nCdWSKWZKZ1Lj+wrfdXdz6muN2RVyN3E0g1j7Qb928tw+/8gLQ6s79iKhxNn2\r\n67bN8qeSesYOFBufuMhRe7NybqkyCvjEvC0=\r\n=MKjY\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button/styles\";\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nThe `mdc-button__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused button.\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.**\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n**Note: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.**\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button--icon-leading` | Optional. Styles a button with a leading icon.\n`mdc-button--icon-trailing` | Optional. Styles a button with a trailing icon.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n`mdc-button__focus-ring` | Recommended. Indicates the element which shows the high contrast mode focus ring styling.\n\n**Note: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommend always including it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color-or-map)` | If a color is passed, sets the default container fill color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`icon-color($color-or-map)` | If a color is passed, sets the default icon color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`ink-color($color-or-map)` | If a color is passed, sets the default ink color to the given color, and sets the icon color to the given color unless `icon-color` is also used. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color-or-map)` | If a color is passed, sets the default outline color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web 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/density":"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/button_15.0.0-canary.a868c7866.0_1668184600224_0.6426949615775073","host":"s3://npm-registry-packages"}},"15.0.0-canary.602fe8efa.0":{"name":"@material/button","version":"15.0.0-canary.602fe8efa.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"a805e7b8002830292286451417bc556c51e059c8","tarball":"https://registry.npmjs.org/@material/button/-/button-15.0.0-canary.602fe8efa.0.tgz","fileCount":40,"integrity":"sha512-9ifSdeSLM6Hv2B/3vgRbW3WLX/2xg8c0ZRU5ZL3Hpfj4an5SjjPLdngt91owMvb8u5/Z5jTEq6TDOuoUbQP0jA==","signatures":[{"sig":"MEYCIQCJjgSaeZIdUKX583/Y/tFyqAM2O3q2+rXNCkNuNyt/JAIhAI5LWndgb5Jf2vz/osTQoyI8diVcc6vSuFD4cp0ErD4s","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":642249,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjboJdACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoKKA/5AMmSA6Osf2NAXDU9Simd87XP2kR6/nOdbjzj4fETgenE6Ypq\r\nnQDBnqweCAUg7H/fD77vYbuitWQqvHphE22AMF2zN6pkzEZHYHnNiUxdH1Ff\r\neFZzNxjXwW3KIDXmPY3WXuBbcM9dhaFitC/T6zglnntWJ871ky5nAktTuWE6\r\nGjSrppvxIJwfXT0/eOOMNSbXbylpU7dX4GH6dRuBM4ctUqCUTgdiwPH73Aix\r\nB/cVfmrMZw//YIy73JTnIkOjgLvkoRl/p3TExKzbh1TRrs8dlXyFa5/08Ooo\r\nwWjb1yL1dMkBao1e/axjcf1/X2s1dNLZacrQWKbh+ar32UlluSTIy6t2RzWH\r\nU+whLs5/ZoicaKemEVizDzEKadl3Ey1LFBkBPmXfMz5HrL92JXkoopoSHFQr\r\nARPvke6speyQvb3mCOWt4I1wwq2CFZEwUvG2P6A6K6D1y2ESpYLpQnf7BL46\r\njs5k1JCpAxJGUA/tK2fRy8VMycERqSzSNhS5f/THkLCxurFwj/6rgmL/UOkE\r\nXOIQmPu9UNb2xbDr8OD5N5YC8I93xgtd/3/95roXwE6t9I6Q2qtow5MkeLKr\r\nw12CDudpZr2cio75Rfl+lNYIPiCZnR3HhWxrJHpCI9kaykipBdHuU8kCPMrj\r\n0NN3OuLDfeNVYdJMphRvpsjryS6mNgfoz0w=\r\n=/giC\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button/styles\";\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nThe `mdc-button__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused button.\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.**\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n**Note: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.**\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button--icon-leading` | Optional. Styles a button with a leading icon.\n`mdc-button--icon-trailing` | Optional. Styles a button with a trailing icon.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n`mdc-button__focus-ring` | Recommended. Indicates the element which shows the high contrast mode focus ring styling.\n\n**Note: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommend always including it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color-or-map)` | If a color is passed, sets the default container fill color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`icon-color($color-or-map)` | If a color is passed, sets the default icon color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`ink-color($color-or-map)` | If a color is passed, sets the default ink color to the given color, and sets the icon color to the given color unless `icon-color` is also used. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color-or-map)` | If a color is passed, sets the default outline color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web 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/density":"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/button_15.0.0-canary.602fe8efa.0_1668186717182_0.8853705850282159","host":"s3://npm-registry-packages"}},"15.0.0-canary.558c2be62.0":{"name":"@material/button","version":"15.0.0-canary.558c2be62.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"48ad60277fb0d068b3bd7e3774a188835f0b5753","tarball":"https://registry.npmjs.org/@material/button/-/button-15.0.0-canary.558c2be62.0.tgz","fileCount":40,"integrity":"sha512-7So/BQphaC/XUZUJ+4P435Sl26Di6LLP8lxDRsESgbNQ8K7W41aFQyI9evpx46ilaTWmc4QeTXgusIuNj00Ngg==","signatures":[{"sig":"MEQCIBP/heTMrBuPxK4GiCfqH27DmkI6TZHwbPsAOEpQlzfxAiB5qTsFt/TgsJDaH3F/O6jAmPh9tCGHfm4TuWLHKm1gBA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":642249,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjbtCFACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqUhA/9HDyAYDkTY87xS5UGfDb2YPKSw+fTrXpklX15czvlIa0TCfLa\r\n/DXTdIAL+Yl0/Bnwz30WRCyULYsQ8nFCtTb/wT2xW3B2h3aq8bJNZS0ftQUr\r\nu7dddF74gqNoiOIYAmUbpsM5PldFw2BHxOnzB3D3zmVH8VAzhVh98Tsjor1U\r\naBLHElbLk0/bnJd1SpusXOzUZaHCYdwm4bSI/QJ0BSYKdK7tfayMHloNg77n\r\nHjLklI81CEMtDH+OvGvwRm8eCBx5P7Nu7FpRny4awu3pz/QREtaLFnEGVqMe\r\n6MRMtS5JfereqmXzm3pbtsldnpNhIAqrJfSC0KsM7Mz83h1Gn4UBT+9POacK\r\nBJcBU1/20yxJMzh8Q+Vi7QllrNe4orTa6aMH3kLoX+6HOwRoAGLJ+gPJSzx1\r\nAwHqqzGTrnS1/PxCrhWi36YGqVG3uNOhfg6tzIbL1vg0OF6bGt3KBkBnl3Pg\r\nD9G2L74KJzW9fVw2sFBB2qGPSNSUB200gmlxa8h67Jm4XWpPADV7GqAFp3XN\r\nXHviTgMG4lzAzoEFFqQiMjKA4LhL6LTfm1uGAZjSUpR9ruhfA6aLkjU3Zb/W\r\nw4b02wQ7GP1+2yGtoTsGvONkG/i+M0/RWOJa5KfMYLIkp/lbO4hIoMRb3Wez\r\nKZs/hnJgVZ61/iqt2RiNE2WDuatE3ne7BNo=\r\n=A2UN\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button/styles\";\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nThe `mdc-button__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused button.\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.**\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n**Note: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.**\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button--icon-leading` | Optional. Styles a button with a leading icon.\n`mdc-button--icon-trailing` | Optional. Styles a button with a trailing icon.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n`mdc-button__focus-ring` | Recommended. Indicates the element which shows the high contrast mode focus ring styling.\n\n**Note: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommend always including it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color-or-map)` | If a color is passed, sets the default container fill color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`icon-color($color-or-map)` | If a color is passed, sets the default icon color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`ink-color($color-or-map)` | If a color is passed, sets the default ink color to the given color, and sets the icon color to the given color unless `icon-color` is also used. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color-or-map)` | If a color is passed, sets the default outline color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web 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/density":"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/button_15.0.0-canary.558c2be62.0_1668206724968_0.3128524604101255","host":"s3://npm-registry-packages"}},"15.0.0-canary.b5c13a7a8.0":{"name":"@material/button","version":"15.0.0-canary.b5c13a7a8.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"332fc178f48b842754e7372b8486debd87d927b2","tarball":"https://registry.npmjs.org/@material/button/-/button-15.0.0-canary.b5c13a7a8.0.tgz","fileCount":40,"integrity":"sha512-L2i5/t+Jn7fRSFFNBYR/qHNNs9Zp6yEc79oPFQOhMMZHB+lES/o55M88teTUH61nkLue0CnoZtc8R2GLs2ljsw==","signatures":[{"sig":"MEQCIEIg8tHZhgqJO0ymf9SrP3OpkcyJG+rY6qLJ/bP196OQAiACQQSQND0jPt0ljzuBwzZHxtGWZC7edvHf+IcgUKJf3A==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":642249,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjcmWyACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqTxQ/+MaxDBotnS6u1rWP+3izW4xVDpGNXItZN8SgLBPgW7vv+4+xG\r\nnfkGJv0P+E0vpWYpOWgTp1U0C3nOQCaLefgEtYd5tucXPIASLoP616BO0oDB\r\n6GSiANNL0c/5h8WsU4jc/4SFGXJBjqE09PhHm72CqABkxVPd2uAdhpPZmtda\r\nK1HoZxcmkzHhh80S4aHbCFR7cJ3nrmDpK+6oJsEp8Et/Ba6T5Jl7fKucwOt3\r\nkZpFcIe4TgNFzF0xCFzanmJB5eg3Mxg7ShdYpw/W6sOAPap3pF6mh6Z8NDib\r\ndHx0byrUvBKokohycBlZ66BU9Vh7y0FMbT+5gHHA07et56RGqQgEkrEaV48i\r\niWub4qqitejT5PzN3/U53mZyaWVBQEoWcuJpcsJXPL9Y56uaLMjp5MaANRLv\r\nw/yjCQ1s29LySIEJMU5yupgPgWUdv2YJHWlAY/6NdcGXZNtSacTgkBzcT3kA\r\nTcY5PNg4pOsQsdE+HNr2DCKgK0vI4Lb4LFk0ReG3XclUl+9IASN2+2X+jzZM\r\nKrKzXp9ZiQHGmK0sAwS2/40Aw+gbYrtlLhG17K2Nboev4NdtpUJBU9iLu69M\r\nQgiXKb/fo8Fjt77RnKkL12OkowKDSwr5p7B/GmAmYT/yUBRFlp2BIvx7fPn0\r\n7yMCvIfph/tm1D4AINb92lJ+uWQ6U76ARkc=\r\n=Zv5n\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button/styles\";\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nThe `mdc-button__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused button.\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.**\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n**Note: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.**\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button--icon-leading` | Optional. Styles a button with a leading icon.\n`mdc-button--icon-trailing` | Optional. Styles a button with a trailing icon.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n`mdc-button__focus-ring` | Recommended. Indicates the element which shows the high contrast mode focus ring styling.\n\n**Note: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommend always including it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color-or-map)` | If a color is passed, sets the default container fill color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`icon-color($color-or-map)` | If a color is passed, sets the default icon color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`ink-color($color-or-map)` | If a color is passed, sets the default ink color to the given color, and sets the icon color to the given color unless `icon-color` is also used. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color-or-map)` | If a color is passed, sets the default outline color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web 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/density":"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/button_15.0.0-canary.b5c13a7a8.0_1668441521708_0.972436942311165","host":"s3://npm-registry-packages"}},"15.0.0-canary.a6e1c0702.0":{"name":"@material/button","version":"15.0.0-canary.a6e1c0702.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"949151856a9db74269a3395cbec6505096d87ba5","tarball":"https://registry.npmjs.org/@material/button/-/button-15.0.0-canary.a6e1c0702.0.tgz","fileCount":40,"integrity":"sha512-IzYpGG//UCvbA3+nUC/Gtjc9YaeUvmeLVwfa7ZNubsr30dh/pDXHNAD78+clzf00ge6UHHO6lXFbUx4iU7hXng==","signatures":[{"sig":"MEQCICC3iOfHgGbyZaHMEMSK2kd8ALtjUT1SXORHAhnEd2KvAiB73yVsftNcFLQYlnvesTPaUogDAFIl7h4HZiuDk+sCGg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":642249,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjcnpvACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmraeBAAk99ytHW6I6/P34MjX6bUWL6FJuhrHMc/jJ/pOZnmUrg/7Ver\r\nIuvsf+xByLjyDawkOc4rrxGssTJW+Lla/guLGmj/KkVBMqwp84PwMTjK1XzE\r\n7Il2o7OB1aUEtbJ+3DifIWx7WNIXUqSdhEgBYc60ZTPvsKvR2eJax5k9yI+G\r\nVCW2pE9jcZUg/TRpvTZuTjUywqO0Hi3EEc6KN6uux9rtMbNCbtXKn/p08G0X\r\ntF2nOWBejLJzq2wniX2b87zeeNhqOSuxsS62tSKdfRcmrNoiljGNddOikiih\r\nnN6MrMWqBLZ4QZiYFIiy+gt/P+44/lZlda0sz69pIM5Dxq4sInjCxFIAezTw\r\neKpSyfMVJt1IaXFI/riwb9MA7l4s/K2nKnUgbI0eQ863ZYut71AKmdVq6Sql\r\nRF+dkzXw3gMTF0YaOAXPtp7OmPoPMliRNmKEVnDFVdVYaMTlbbrAg2q+gmUe\r\nt3PTksRZyJxrLppmevO0ldYkdaV9dYfq3n0bDgWOrPxTMshgxH53b/a4IpO/\r\ncgy6UYN5j43toWCCFh4qypIpkqvVkKN380i9/wjG7IzIbcTSrgEnd0igMA7F\r\nbUBL0P5l84+ISL4KtjG41P7OF7KuHsrakM8jmBC0BhYIrlwHPHQ24tDkInWB\r\nZJVfcaUrliee4l+G+Cs7Z0H5XESB9ssZQt0=\r\n=AX8V\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button/styles\";\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nThe `mdc-button__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused button.\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.**\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n**Note: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.**\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button--icon-leading` | Optional. Styles a button with a leading icon.\n`mdc-button--icon-trailing` | Optional. Styles a button with a trailing icon.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n`mdc-button__focus-ring` | Recommended. Indicates the element which shows the high contrast mode focus ring styling.\n\n**Note: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommend always including it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color-or-map)` | If a color is passed, sets the default container fill color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`icon-color($color-or-map)` | If a color is passed, sets the default icon color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`ink-color($color-or-map)` | If a color is passed, sets the default ink color to the given color, and sets the icon color to the given color unless `icon-color` is also used. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color-or-map)` | If a color is passed, sets the default outline color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web 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/density":"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/button_15.0.0-canary.a6e1c0702.0_1668446831250_0.8047489177487142","host":"s3://npm-registry-packages"}},"15.0.0-canary.b6f8a06de.0":{"name":"@material/button","version":"15.0.0-canary.b6f8a06de.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"996bd8929497cfbbcde5700b1e9e301710a63886","tarball":"https://registry.npmjs.org/@material/button/-/button-15.0.0-canary.b6f8a06de.0.tgz","fileCount":40,"integrity":"sha512-3u//530mZPUmT/lMrIgEQMvPbTrDIaWlK7UJqwhw77sOrbV+/IXz9eZdvZEaPd5nsh0Q9LfLCr5yhrBSNb4xBg==","signatures":[{"sig":"MEQCIDftKEdgeGFQDPt5Z6DAcBe1ZHsjefQM1pgX3KyemwpyAiBsigSEbErODRnyqw48F0HCiQI0B6jLLsEp8W+eWxVQUQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":642249,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjc1u+ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqTQRAAmmURrTG9nhkkHNFcX5F0aOo676y+EKptU57B+PFW+C48vTYU\r\nFlaG3MuX9wUisG4g24oWR0mQ+ZFMVHADnJ/Uf6KIe22OnEtwoMgt7OZr7tOx\r\nqSyg/Ykc7ctFoDbVUAiXtS6sQQBg2H8LWazZ2ZPmwcKVvralFcCRYKMiZoN/\r\nlkMtppE3cVmun11zBmtsECIknek91XLOhXs5ntmPc8Wa6JSawd/aI1H4F98n\r\nx9WOL0TxhHEadp+415gC79ZZqIUQRhOiXePMOOLvNiX5CpVrlW4amIqmtMTs\r\nlwF14N/NPJZqCqW3hQhzXEQG8NWbUMJUXN53o0rCOCaJ7k2Xxh832zaNT/1u\r\nYacfaeydGYH/fpSwBILvCDWTp2vGmRIibQhDoHy2i9Ucf52+UdyFv81MbEQW\r\nU401Ih7hoHcvkYfNZC9QA5SNfe5j7G0T4sueP5SDcN4H4sfsBjP/K8tsoSjF\r\nddIkZT93ON8f8jvJdDV51pkAG1wUkuWBYnX91w6LTLqNvLcu/EvRfTa8y4Gz\r\ngivOnvL28v6vBPJ+/WrwTXVzHoXvP3dfCJCAw5ZmH/dZnev6eEtNwfnFmIN8\r\n7xEGd+eWpYQJMXdG7SI6lbboFLfk1URBNmfpXkUJx27HIc6JlZzHxmxdOIzk\r\nhCXOY73ypeBtZvdBRPaO24jxa+dH9QxL5Og=\r\n=fAvA\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button/styles\";\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nThe `mdc-button__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused button.\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.**\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n**Note: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.**\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button--icon-leading` | Optional. Styles a button with a leading icon.\n`mdc-button--icon-trailing` | Optional. Styles a button with a trailing icon.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n`mdc-button__focus-ring` | Recommended. Indicates the element which shows the high contrast mode focus ring styling.\n\n**Note: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommend always including it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color-or-map)` | If a color is passed, sets the default container fill color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`icon-color($color-or-map)` | If a color is passed, sets the default icon color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`ink-color($color-or-map)` | If a color is passed, sets the default ink color to the given color, and sets the icon color to the given color unless `icon-color` is also used. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color-or-map)` | If a color is passed, sets the default outline color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web 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/density":"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/button_15.0.0-canary.b6f8a06de.0_1668504509859_0.08841875594972026","host":"s3://npm-registry-packages"}},"15.0.0-canary.0163f3ba5.0":{"name":"@material/button","version":"15.0.0-canary.0163f3ba5.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"e3ba8529543cd5dadf3da0204c4bfb88ac9ad546","tarball":"https://registry.npmjs.org/@material/button/-/button-15.0.0-canary.0163f3ba5.0.tgz","fileCount":40,"integrity":"sha512-q0RrLwiDazs0XJ/fi/NJ7KsqM5WkxZgEDdk9Ps8zxkZfTCNrzmdTrRruzjfwUlngN+D/tpoqoyp986jKLGRV5A==","signatures":[{"sig":"MEUCIHrUqsf0mBeQvlwBLSF+cpYf+RhsZdQ19o0It60Bx0mAAiEA9FSNtOaBQ+LJmkal0YJNG8ncVpEQQu5ddAFPLV2ARtQ=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":642249,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjc9QpACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqaqQ//bUATC5RwmDEbzZksusQZcczgxltIneo7NbKpf6cVDfP/lxRY\r\nNVwP+1DryXDdOVug6k+VyeU1Qroqu88esiehUCOUfySXOc44oV/z+X38S1d3\r\nS8HMvEdZD92xWlPzXOucfdDJwkk5ItQ+jiwzq0EZ9aSNGNp3aKLwQtb/Fj9E\r\nG4KHALwp8AQPA6qu+W3SE7t6O88DP6PV5FGzevU3UNWvnmE11RVX9dW/qnqg\r\nTO5W549oCJhJuzkqwqhAwmX4thZ6QhGk5WxPzQOKR56RcSoYir97BLdxNG6n\r\nFyX6qFh76jkA9UZgsn0M5oELcxLcUsXRj9AfjB00DNzUUqT7vfVggqS05w7O\r\n/2bH9x8bAW2q4c9wo+I9i/KfgaIEYI71USbwEfohmxWv0oNj36U4YgvWsyze\r\n5RBZQ6+Hn/MndB6Dby3Irlq1ZeOBvJxlXnUzQ3eCKSbsVcQ3yElyo3sRFZRh\r\nJp7yP4K4UjyQBf7AQIy1Lx4xxWIw6l81CN6hmOpJ+EC1zIOcaGtHE18qpvAz\r\nJnR3hhoHxsfY/qztArFIei7Fxl/iyEJD05gyGKvVTKO64dRMTG/mPI3S7Bp3\r\nT5K0xlHzbZlW6yGpg0mUmcETjMEw5hKF34Z7LooGbD3wCglaKUCLKtJTtbcv\r\nQy/EtOEW9fpp95GDC59bB1GwycieJD9DaCM=\r\n=RTbB\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button/styles\";\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nThe `mdc-button__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused button.\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.**\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n**Note: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.**\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button--icon-leading` | Optional. Styles a button with a leading icon.\n`mdc-button--icon-trailing` | Optional. Styles a button with a trailing icon.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n`mdc-button__focus-ring` | Recommended. Indicates the element which shows the high contrast mode focus ring styling.\n\n**Note: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommend always including it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color-or-map)` | If a color is passed, sets the default container fill color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`icon-color($color-or-map)` | If a color is passed, sets the default icon color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`ink-color($color-or-map)` | If a color is passed, sets the default ink color to the given color, and sets the icon color to the given color unless `icon-color` is also used. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color-or-map)` | If a color is passed, sets the default outline color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web 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/density":"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/button_15.0.0-canary.0163f3ba5.0_1668535336819_0.7325356753935961","host":"s3://npm-registry-packages"}},"15.0.0-canary.66c5cbb94.0":{"name":"@material/button","version":"15.0.0-canary.66c5cbb94.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"228519a66b421433c17dcad5b3cc91f12509ad08","tarball":"https://registry.npmjs.org/@material/button/-/button-15.0.0-canary.66c5cbb94.0.tgz","fileCount":40,"integrity":"sha512-dze9cBcqgU6H0D8+Hrj6+Qq/gnCZV3pv1jTVrEi1P5po+Itxlufrl6EPFiyjcfBPbFvVGufK7LSDq96k6bLNjA==","signatures":[{"sig":"MEQCIHO3kcOR5D5HiVz+NKehSyhabh7clM5/bpyvJ59vMD9GAiAzVc3oL/3TiFw7RCOGKXELD5oWc4d7LzzeOj1YT7YMkw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":642249,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjc+jJACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrNVA/+MWPnCT//4KHtUE/HIC6y1EfMb1buh/YxNIm+D6/TZDOSaTzn\r\ns+kvLyb48mqbcN/Pvohg5ag3fCPCnxv6tRt2QA6H1J+8RJPB6hnKqwjMr9IQ\r\n01sRRrYM+7oVu2SVdTRRKv1el72KhCsC7Pmy/vif+stk2jLURpJfWgukWXfA\r\nuU+WHeylVVp9pebx30PiTa9ttCnxt855tCadVZ0AnV9k0vl2dB6WOa+1Bqbx\r\njBs2M6SqzGw79bNQZ5S0vFOVfKZCw795iK0HbTAR5Sm8acLib8pGUN9SnL6S\r\ntCaA2im9n/lseHEKSMqgLnNDPFaKm/vUdx0R5hiHVt9Tzu+wYt4koJDesCDI\r\nzLbvW5SJfQ9M95Axe5UDhjZDSYU8OnBLfRzDfhLK2OnOacyTqU81N/mGo+5l\r\nlMRdN0fTg2lH9gqBDqUAB5z3XitvC9f8NFnT/0hfGyPbpJOmdOK6x3WPP57/\r\n9t41M5xn4NnhSWpOHIRthnKnbKauYpZZsrPtZp+e7B/LWAfVnZTI/7HJfmL0\r\ngxm+16uEOfKdlTpEkX7+Brvpwr4fu22k/zw77mQHR2NEZAPYFBzvtXOcvV0D\r\n6h7DZ2KbTDoaOnhR5o4CVW30wclJgDzhju6Pf0pQ3R2vlLMdHi5vwIp688FT\r\npJMFD42joyE/rdDmCWCUZbLa69vh4EytK3E=\r\n=GxSh\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button/styles\";\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nThe `mdc-button__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused button.\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.**\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n**Note: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.**\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button--icon-leading` | Optional. Styles a button with a leading icon.\n`mdc-button--icon-trailing` | Optional. Styles a button with a trailing icon.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n`mdc-button__focus-ring` | Recommended. Indicates the element which shows the high contrast mode focus ring styling.\n\n**Note: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommend always including it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color-or-map)` | If a color is passed, sets the default container fill color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`icon-color($color-or-map)` | If a color is passed, sets the default icon color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`ink-color($color-or-map)` | If a color is passed, sets the default ink color to the given color, and sets the icon color to the given color unless `icon-color` is also used. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color-or-map)` | If a color is passed, sets the default outline color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web 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/density":"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/button_15.0.0-canary.66c5cbb94.0_1668540617464_0.6184710875195598","host":"s3://npm-registry-packages"}},"15.0.0-canary.b01136063.0":{"name":"@material/button","version":"15.0.0-canary.b01136063.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"6468445fcfeac61df52f72554685904cae31326f","tarball":"https://registry.npmjs.org/@material/button/-/button-15.0.0-canary.b01136063.0.tgz","fileCount":40,"integrity":"sha512-fQg8CbtvvNFTOxxPqtRzts3/IV8l7G8uxO9H5H9PvI9gnmULZzdPCZTD5Re5V8xmh8HHCCeXI3psNYI9BRT+mA==","signatures":[{"sig":"MEUCIQDQvByVwxY2KWnZ120Gk3uxfd4SFjcCW2GXsSGUyHVBWwIgNrpIn1wMX9SEeG5qBPGMrDt/hgG+h8wzkQw7wx/xIs0=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":642249,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjdCu/ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrOzA//c0tYVnp9ShLCIkiQYJ0MzQ5h1tHvOd8DyLKu/J4GhtxGI5rc\r\nN9G/MUrkdTkO2/YkYltsqp2NAOsOyJCs1hVGTlwewGZCVTcWS25OQW1Rxvi9\r\nfAZFyvH6ORQjIAqtaEAHxIwMArZjxY5Aug8NLy2b/wovC/knbGqM0Zl4r2fu\r\nDxT505TO9hVo55Ekpqh15Q0svhw+d2/dnkiPpzteHUmi9xwcRqwnXE0IdzhP\r\nQq9XaY01PbywEl0jk/aEy2mMpZ6piTYDVe4IecdHUScIqHBipWi9vlQUYTDm\r\nfWmKVmqQF1mIFdklRO9iBlZ7Vqaiu1kZI/uGwy1rd8gsI2KeU5ORxig+5zJU\r\n1KG/+8Fdz6q1vIDv1Su+cC1S38Vxa1990rgLOVocRzd5cw/8CqGlD4yc4Jmg\r\nolLmiPd3DDOndkAGZKwfdNolGiEUOmHerNF3Y6fwUEdAvYyW6tEAyMziSSwb\r\nYa4M+Uk2ZPxwTLR/gEyHWF9fg/bIoKJ8dSLhI5PpMO706KcmA9T6DFxhlBZn\r\nZVJ9AGoN3R1lPZ+FN1NTCKQjaQeScB8LbqBWhtEKe3/2IdLqYpKICS42i4nx\r\neqUZx5fuWW/rbl8vI3fpo46jPK50lL9GROeZaomrnbwRXgyWdNzFSBKRO2qB\r\n56iK982cN2c0EiKcuyAouSKCzT/qYSnNKeI=\r\n=DAJ9\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button/styles\";\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nThe `mdc-button__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused button.\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.**\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n**Note: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.**\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button--icon-leading` | Optional. Styles a button with a leading icon.\n`mdc-button--icon-trailing` | Optional. Styles a button with a trailing icon.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n`mdc-button__focus-ring` | Recommended. Indicates the element which shows the high contrast mode focus ring styling.\n\n**Note: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommend always including it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color-or-map)` | If a color is passed, sets the default container fill color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`icon-color($color-or-map)` | If a color is passed, sets the default icon color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`ink-color($color-or-map)` | If a color is passed, sets the default ink color to the given color, and sets the icon color to the given color unless `icon-color` is also used. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color-or-map)` | If a color is passed, sets the default outline color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web 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/density":"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/button_15.0.0-canary.b01136063.0_1668557758986_0.9428477915089055","host":"s3://npm-registry-packages"}},"15.0.0-canary.01da0cabb.0":{"name":"@material/button","version":"15.0.0-canary.01da0cabb.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"2d0b6c6a1ddbaf3998b5faf3001f7e63358b160f","tarball":"https://registry.npmjs.org/@material/button/-/button-15.0.0-canary.01da0cabb.0.tgz","fileCount":40,"integrity":"sha512-EMSB1+4rHoAAcm3NKjhOiWyQOaRnJwAa9rkW3vpNsWudOHxARsraoeHC77ob6pLWK2tNcfuWM6IbxkXVqIRz4g==","signatures":[{"sig":"MEUCIHLeNLZmVT8/C24+ZSFybPtiH20uHxV2RBP6JAneRTx8AiEAglp1wilQiHtbH5enVhRZ2MftLz6EnnAuEZSQvUp9ECs=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":642249,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjdKm1ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqF3RAAko+f1/0k9PEInrlYxzRWUCjEv4HfroJ+3iJhmTFEmL5iqwt8\r\n2kT3QU7y8WXbh605oCx/IrV6TYy8O83EvoZf7Wgh1bQOwPmYtlJFPT8zBeno\r\n22p4x++c0FMW9T8K+Em44ANhuUs4Hpw58U+29QKC5AXPTY9fEqqe9sw4kL73\r\nsBjFuRxl/49toLiQNX/dEK24j/AILFgyAJMkOe3IVq2mMtIwcEjj9njxGbgc\r\nB6v81n5VtmMPF6JYdosiApBLKO20BtgTf/pli5BE+bDb6Bwu4JToCw2fi1DX\r\nILHqpN6n77VJwAwEAeeR8eIkvByhVDDu6WWyStIaiEHEtiZnMMAaCtsyiBs1\r\nd2EjIkUyRBvJ3xaySQlDO7NpdE5L0TkFNPuhy2LE0RB4iOkA1jTxCt+PEeyZ\r\n8NIQz1X8POS22PyQefwDcU1RQMfzA9UPtxCaUcssgekolVZoCJyl4GN4hP4S\r\n5Nq8i1zYTsHrio0sGBU3HxuD9kHQHhtAR9iLxvIIXMFUJX12fpkRUurlmxiN\r\ne1VMOpnN7y7+WGUiNgvFTWlbFklBmMLJo0WhTG8prIntZp9Qk2WrWf3DN69W\r\n2ttkPRkElq/NAYzP9fXuCIlDc/MwbuazLeIZpiTqugMigYeDUZYUr3J3x7YU\r\nns46kONioMloBbvUjmrGGzIg5DcI8m3XdFY=\r\n=W1Zh\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button/styles\";\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nThe `mdc-button__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused button.\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.**\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n**Note: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.**\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button--icon-leading` | Optional. Styles a button with a leading icon.\n`mdc-button--icon-trailing` | Optional. Styles a button with a trailing icon.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n`mdc-button__focus-ring` | Recommended. Indicates the element which shows the high contrast mode focus ring styling.\n\n**Note: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommend always including it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color-or-map)` | If a color is passed, sets the default container fill color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`icon-color($color-or-map)` | If a color is passed, sets the default icon color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`ink-color($color-or-map)` | If a color is passed, sets the default ink color to the given color, and sets the icon color to the given color unless `icon-color` is also used. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color-or-map)` | If a color is passed, sets the default outline color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web 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/density":"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/button_15.0.0-canary.01da0cabb.0_1668590005706_0.240446768740471","host":"s3://npm-registry-packages"}},"15.0.0-canary.4ac393164.0":{"name":"@material/button","version":"15.0.0-canary.4ac393164.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"0cfd09174ba3d279c33f1a8a117fadacea2957cf","tarball":"https://registry.npmjs.org/@material/button/-/button-15.0.0-canary.4ac393164.0.tgz","fileCount":40,"integrity":"sha512-av17FsvzFdOvln7qEX2aDr5gA1Yd1szAYfW7jYYA1RXeF0fmd08XLOqi/GELGY75eg0RelEA8WZzEojUQYut9g==","signatures":[{"sig":"MEYCIQC9ojWIXwd6wPiqk2xX8ZpFBbMA2Whk007BOO51hsHXTgIhANX7V5HaumUWCE0WsS0f9ym5vANiIjWTJUheCqlTeqVE","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":642249,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjdQyrACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmq9Qw/6AnKHHPuOXTS+x2pBSEfRcfmsBVgvSqZON7ALZ1OlIHaTKM+1\r\nVfpH9pExpX9n9QZ96sd3idTehLKPSpdlp2r6KN5/smxUkaFWUNpm/pwLVJJT\r\n6MzV7PCz/J+lGecSmvxUqzVulU0XvyNyB2AY65/atJYgKjvSre7YB/SsN2X5\r\nrCM/GV20zc66WcOF16hG7RpzJICycOMtcgg7Z7y8q2H3W23Wap9VSiglXoxa\r\nRIx5XgIL4KV0wsaI0+FpMYe9fNGHh3qP0sCCI3UuXbkTsPXTcb6/I/vGPjOD\r\nTAFN4Ym672WkRpvFvaVRIsNyt3EB/DStzx2DIM5b2jx7qbLJtNFy9Ade62j3\r\nYtwirXbH0nXAt4WxoWLn50WA9zQyXsiZD5LO/IpVkaWxAL/KkQLkrsv+OfSx\r\n3PhDgwbXI6AHcol8abAL+NvYToLo5VPpjFc09XASIghI29SIO5sKC/eBirX8\r\nZqXykC5d8JSC+DwvKeDjPPopgBn/szcqt8QxM0tQztdgrfrIhAZFIaRCqUaC\r\nCc9nyLvq1dqx709ckJXxXcPW5xHuXUb9jD12/6+1Dw8JVrfx7CLCe1ZMYdP1\r\nBCtK2y/zKO8GRa/+LQg4jMw/ab3DGbNdyXtKGuMecpr6G5xV59Ed0K/6Cc7O\r\n1QlmHuLrhcS70ZDFvZiq3pjckq7C/2EX0IY=\r\n=RMP9\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button/styles\";\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nThe `mdc-button__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused button.\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.**\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n**Note: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.**\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button--icon-leading` | Optional. Styles a button with a leading icon.\n`mdc-button--icon-trailing` | Optional. Styles a button with a trailing icon.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n`mdc-button__focus-ring` | Recommended. Indicates the element which shows the high contrast mode focus ring styling.\n\n**Note: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommend always including it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color-or-map)` | If a color is passed, sets the default container fill color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`icon-color($color-or-map)` | If a color is passed, sets the default icon color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`ink-color($color-or-map)` | If a color is passed, sets the default ink color to the given color, and sets the icon color to the given color unless `icon-color` is also used. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color-or-map)` | If a color is passed, sets the default outline color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web 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/density":"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/button_15.0.0-canary.4ac393164.0_1668615339549_0.2598553606401479","host":"s3://npm-registry-packages"}},"15.0.0-canary.6048fb563.0":{"name":"@material/button","version":"15.0.0-canary.6048fb563.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"d3f0e4a574627698c7b8c877177e076b54242052","tarball":"https://registry.npmjs.org/@material/button/-/button-15.0.0-canary.6048fb563.0.tgz","fileCount":40,"integrity":"sha512-OpxvCkYH5G/+ZX7NCkU5ZWy83RjP1IOWoDkvCRo58fvJE4Js9dc4QchjQi5v9LtLeESTaqwwhsaQU4bXQiV8EA==","signatures":[{"sig":"MEUCIQCgf2TvOY03vCnkU6j48G/umJEpAxvZZbuWLL9b7WWXZAIgV9yTomZfzDeymniwKfGR5cnJD6MOnBCx/5chsh4a67o=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":642249,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjdQ0oACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmoluw/+L7BjAcRSHrwv81S7FpggsJLb8/svjWTbc8ukf00IfGwQD1TL\r\n5Pef9LhmHEVvm7JUOAAQu9nXiSAHms3rTGFLx6ZvyIWzs/uFDvb69kW/eq55\r\ngceKGI8hxd44xgYfN/enQargLQHUTmvRzjUfRj0pIrxtjsOs7chBkcvPhoAC\r\nZeo+oQE5t2PeM07SzUr2otd87aXMmod3CW/euD857wgJfRIy1QpNbRRTFTCO\r\n5X4aGCMcWDZYH+tK7CQhMRATqveTQDkhl4OEAdn/0wJ3SyF19YoMgRLop6Wk\r\njChewDnmPWelUM1D9nNyX+HAuw7MlYfCIySwVjusK/EPOB2Ln0+gLY07yEnz\r\nNLl4xt9AT8ZBo+Wpz6DPVuvJAAqEm1I+LnPkk5YYVxNp+IgVsRPXYgG/EaQu\r\n9BGy4+lx7wKsMXyiLhvvX96xYquv9EWQHIBdpmaSMs0zArXUAE+OtUKw55g3\r\ncB5q4QPs04jYKKfvLhxeiQemjW5yDiSRZjOp5D9C9mlsmO1zpAS3PFekxyI8\r\n4Q21944TMknFSjL/ZdgvYNYBMHq8v6NKt2t21mHMypAQpwF/kVoKvMuS2Ehb\r\nfFey7ZIn2vdsibdTGp6WA0WgKusGqe17iSkHejoxKPHiEAXql3CpaByE6kBM\r\nrvw1eiFWMbzYUakQ9a6fxp6sXUpBESzyob8=\r\n=/bSu\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button/styles\";\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nThe `mdc-button__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused button.\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.**\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n**Note: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.**\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button--icon-leading` | Optional. Styles a button with a leading icon.\n`mdc-button--icon-trailing` | Optional. Styles a button with a trailing icon.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n`mdc-button__focus-ring` | Recommended. Indicates the element which shows the high contrast mode focus ring styling.\n\n**Note: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommend always including it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color-or-map)` | If a color is passed, sets the default container fill color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`icon-color($color-or-map)` | If a color is passed, sets the default icon color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`ink-color($color-or-map)` | If a color is passed, sets the default ink color to the given color, and sets the icon color to the given color unless `icon-color` is also used. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color-or-map)` | If a color is passed, sets the default outline color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web 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/density":"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/button_15.0.0-canary.6048fb563.0_1668615464259_0.6366051405951971","host":"s3://npm-registry-packages"}},"15.0.0-canary.3777b03cb.0":{"name":"@material/button","version":"15.0.0-canary.3777b03cb.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"6ee4e8595118e6a22d6b8ecb8ff144871f535613","tarball":"https://registry.npmjs.org/@material/button/-/button-15.0.0-canary.3777b03cb.0.tgz","fileCount":40,"integrity":"sha512-LfFRFSCiQQWph0nXbQf247kG44gl0xm7BfFjApN6wGWvb+QVPohbCFnSYYoxHtOlRaq6tgdkl9EpowuYzsTPyA==","signatures":[{"sig":"MEQCIBZi2ovH9QqQmRSsLPjJmjtclytra0lO5+2TNLAa55IDAiAR8MHwb/vTjDuuMnK7AMbKzMtVt3IBAAoZKXP23l2YaQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":642249,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjdS7hACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmo3VRAAoEcii1GCGWPiJfSL1uGLcsvOuPH8x0smty99MXn9oE8RQ3c1\r\nymHAd4DtfCuvpZlNdOyKNJHgvxCkV8Cfig3N2ns26XUUc+5AjPHzAEMdhd3+\r\n1puzG2VhTWWJ60u9El7iTYYW/6AQSgqXfueU+3tgJ1ICTdZSguy82C3Vf36c\r\nwbGxy5YuHPewq6FW6l+5N4w3s0NcM81xkcwu0tLe7EyPL4oN+Jrl20bJqQKh\r\n30kfW1DcH36nhR+lssCe3qSN2afn6Bvc6pQcKpxxcNfc3ob94MKcwCD4pLUR\r\nflLBDykClDUKUw7xW+bTXVllKLcG2sEDecf14ob0/WvqWbdLqh3DfHfFmG2m\r\nnJLtSPQfXytfdcBduwtukwPqULEGWtrFc48ayQjxr8XBi3QE7VGEd2ARxaGY\r\n3cC5VW/cFgVPpf09clidc402zZb97AHjnWqDTSnSs6HNQ1AEKOnNdgkuInFN\r\nNFywLIDHk3grK1D6gSl5BVnMI5VzB3kc4XDb2Nn/kPNE7zRWP+dHQvsiLpSm\r\n+9ZYfjc0lZ2KlRhg+OpUSSUOLLXErf0qrCkDLbRYrvZFHwqUTj1/MuYhEzGx\r\nEdWmvS8Wb/E4mxwP7ktjSCbSHkFlLmexsu3dT9TLNtpADyJTh3bN180z7rIb\r\nNqHq5A1HApEXx62111QGENaYrrIbD1xY798=\r\n=2QhR\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button/styles\";\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nThe `mdc-button__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused button.\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.**\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n**Note: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.**\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button--icon-leading` | Optional. Styles a button with a leading icon.\n`mdc-button--icon-trailing` | Optional. Styles a button with a trailing icon.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n`mdc-button__focus-ring` | Recommended. Indicates the element which shows the high contrast mode focus ring styling.\n\n**Note: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommend always including it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color-or-map)` | If a color is passed, sets the default container fill color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`icon-color($color-or-map)` | If a color is passed, sets the default icon color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`ink-color($color-or-map)` | If a color is passed, sets the default ink color to the given color, and sets the icon color to the given color unless `icon-color` is also used. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color-or-map)` | If a color is passed, sets the default outline color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web 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/density":"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/button_15.0.0-canary.3777b03cb.0_1668624097659_0.45646958899603884","host":"s3://npm-registry-packages"}},"15.0.0-canary.f7f56fff7.0":{"name":"@material/button","version":"15.0.0-canary.f7f56fff7.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"3a9fc6835a7f9bada137e409098587882c656337","tarball":"https://registry.npmjs.org/@material/button/-/button-15.0.0-canary.f7f56fff7.0.tgz","fileCount":40,"integrity":"sha512-OCQTtUbIS7iYF+MHHkPXUvB0GDwD4L7lshFBVgEq0ZxVW2JdGeIQ+9XxKErw3wDGl9FY2CpVBhXkMsYQ1mIcjA==","signatures":[{"sig":"MEUCIBjmwObQUlIwsrxJDHAOB2oQpMIcvQjYQGh7KgV2m5R6AiEA5YG/z3WW5RG5WnaGVGFXXAdBYqLDVzae7BElnY76Ax8=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":642249,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjdUBZACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmovDA/+MStSBR2x/KlxtlTnh5cGwNCzMiV5V5d/bzK06GRN3/T45D+0\r\nc+JZe0KnfoiYUCJF3fTrb9Cd3C1WE4otQONKBdjSABjHt1hNk6UPHPcmiu1u\r\nrhtISA4bB2hL59wL4Xp7rPOWACC85zZfU8drBXKxxsAJxoIu47v0Io8QrD4X\r\n1r5rTx2Mnmn6C6ZVxWUbFBXA06OdqrVuVAiEjSMe9ykw84YzvbYGHUVirad2\r\nIE0RRR9bH6MqtvPqg9aSRAVYtCV/Tyo5QmKJufwuT0hb3jxY5kV8dFUg7//v\r\nhxfzY+f3VaOqK3S5xE9aquZkOf69o0x2g7dq4upm3zY/pKPk3r8OvG8oK3P4\r\n30VZIZ89Op528akuXesoCcW1XejHUdvjlaYzxTWNYQhdaHHRMx6F/ZhGR5Oq\r\nnaQcVwcM4Ck5FtMKFO6kRq/gXF4C5Se3kqv+r6lGmh/hX8wZwwmuvdFDRdyV\r\nxixG26JLtiiNcO8Qd07TqVVYeD6IiVyBDJfAfJOjphKqoM2a3uXAL/nw4z2f\r\n5A3fGZWuj27tsNAuMk34Upljk0naFRB0RJm214EV7CZeBn5EdM608yrgBfC+\r\nvRRG1kJ/BOdbtG544jUhwLSmZ4f9fo04O1S/AvZWPEzQpCtwvvekTxNRmpmi\r\nqC7OVfahA7cF2E9M4aKlUTZRzPlSUlYCxB0=\r\n=Yilb\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button/styles\";\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nThe `mdc-button__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused button.\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.**\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n**Note: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.**\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button--icon-leading` | Optional. Styles a button with a leading icon.\n`mdc-button--icon-trailing` | Optional. Styles a button with a trailing icon.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n`mdc-button__focus-ring` | Recommended. Indicates the element which shows the high contrast mode focus ring styling.\n\n**Note: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommend always including it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color-or-map)` | If a color is passed, sets the default container fill color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`icon-color($color-or-map)` | If a color is passed, sets the default icon color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`ink-color($color-or-map)` | If a color is passed, sets the default ink color to the given color, and sets the icon color to the given color unless `icon-color` is also used. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color-or-map)` | If a color is passed, sets the default outline color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web 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/density":"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/button_15.0.0-canary.f7f56fff7.0_1668628569719_0.49764909146083536","host":"s3://npm-registry-packages"}},"15.0.0-canary.7c73f6134.0":{"name":"@material/button","version":"15.0.0-canary.7c73f6134.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"9cd6ae07c6f80db64235dc2a4595c50aec0b73d0","tarball":"https://registry.npmjs.org/@material/button/-/button-15.0.0-canary.7c73f6134.0.tgz","fileCount":40,"integrity":"sha512-XSKBvS8lLuVkreWaO/MCmCGxYsCsf9aSIuMdu2Zg6hj1fUqW85el/a1iomjQ0/19k476ZKKYMnSqPQwlPX1x4w==","signatures":[{"sig":"MEUCIQDRpzWBVUvgZvvNa++2IfDe8HrCpKiQbliyJyCoqTdbLQIgMKn1rvkWIxITF6QXwgE1tdlFG7w9p2MbHh7JcqQ+xTc=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":642249,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjdUFhACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrS3A/9HFy6WUIZQ9icL2Jeb4XwN/UMBxHeDf4/REKtY68hY5rV4iOs\r\nXgH/n9g+VlK0BqM9tVKDh/pajh5/BxGuPBECtT3dAWq4k9afwjEZWDvO56G6\r\ni3nO5WZtfsllOBu/XjT73+DRIImRer6CTbI5RGupHsW/ZzcV/KQg1Ij8NL3I\r\neI1rxdfmCdWG8azxB3vf1x6w+B4mpCxkV1JvFJ97Kgj4WjHBiGLXXVlaHbQI\r\nWYGKSB1toHZMmVQh4uCuXW8cYAlEfR43H7CAKc1GR2/rf9ZNYR609rrKptaw\r\n9jdnw3gBsyRpHmgycQoujrkNlJ6EbaSB/m5lCJ6DeMVgfPN4pjxCQu6P3z1C\r\n+1FbQ37lmTJwMiWjPHlyCnA9ciDXNs5xAzx2XUpKqs3Ss6PMDqwM6N0Mj+VJ\r\nwIdeKOvwsbSJ5o/wycW1MxszIOspd6ohXGj5uA0aB9W0emMh1Vi7W9VnYyiK\r\ncuiu4u/v49KMXHH5eD95myM0k8kRS1QOk9KfoxXA9FCwRkQLU2FT7X+KmWIb\r\nZ/JyW2HUeU9KNGk/HWATyoPoNffmtdZWFHuOrKu9ZpZ1HkXjq7LzDu46tOaL\r\nCyk7eQmAjEORNn//g4vmvAkSu7zJbaDpR+mA/FyuMQohldKLuP4FiKXFb6/d\r\nH694l18vD3twgjF0ldSWxjZ1lUHDu0SD+68=\r\n=EBIr\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button/styles\";\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nThe `mdc-button__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused button.\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.**\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n**Note: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.**\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button--icon-leading` | Optional. Styles a button with a leading icon.\n`mdc-button--icon-trailing` | Optional. Styles a button with a trailing icon.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n`mdc-button__focus-ring` | Recommended. Indicates the element which shows the high contrast mode focus ring styling.\n\n**Note: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommend always including it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color-or-map)` | If a color is passed, sets the default container fill color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`icon-color($color-or-map)` | If a color is passed, sets the default icon color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`ink-color($color-or-map)` | If a color is passed, sets the default ink color to the given color, and sets the icon color to the given color unless `icon-color` is also used. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color-or-map)` | If a color is passed, sets the default outline color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web 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/density":"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/button_15.0.0-canary.7c73f6134.0_1668628833597_0.41614303953758114","host":"s3://npm-registry-packages"}},"15.0.0-canary.f1e037150.0":{"name":"@material/button","version":"15.0.0-canary.f1e037150.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"6aae1459ad9e8eb4114e31c03bb5014f88b3f7f4","tarball":"https://registry.npmjs.org/@material/button/-/button-15.0.0-canary.f1e037150.0.tgz","fileCount":40,"integrity":"sha512-iR7Y0Ce3raqDTFUJUjKPDSUz5RbPtbiLoX/n2yyTv9XEsM57btWIpP4p0VwGQ0lgJpENO08UovF4jlnSDi/GxA==","signatures":[{"sig":"MEUCIAR+KfqqnoQ+e/sK5HYHdW+AlPXLEoEmGUXuL13CO1hJAiEA0NLbDOQXiXUwm1zfL3714FaQj782muYpXvnEYZSFpwc=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":642249,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjdUKEACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmq32Q/9Fg2uQYVYDzhKwhtPqHRXl2hNRFNciVWmbXG16xN0rdn8XD/x\r\ngOGl/XuWMrQx7EW9lyba64rX7gwcitptQDxrkASeB4oPAwkIN/JRmt4Fmp0y\r\nduovB9syA7E2E0xBndSoocWDWK9Wa0pf8zfWUu8UyvBWPc9L9zHt+x6KzKFW\r\nmxVb+MvyvLctEDJuyEBPso/R7ZfcNzLTR+5tdkIn9ih0qfJsds4RqfkYKDTJ\r\nTlttzQoLawC5Gv6mtWwKlkOQkCeNMMzT4dKGZeICqXe2Z6pBb8+oVQiVxGvt\r\nS7TAymnfMg36oBjkv4vXK+AYAjcI3xBt0Pmr0oysnx0CNashW5bvlFZ/gIeR\r\nFd59RH3pKfoTX1WyC2xGEZbFAJHrhImnOtngU+/alCM5Nn4Te1Z10KvCU3Mw\r\nbsHxe3glmEjNRuF3UV8IqQNogP6lmLYIpxtB32WRdSB216QORD0WIP+4uakr\r\nCMgQ/8Efjrhl/GoOwsmpGHYHPHsiqJASJfFcM+3VGbVYqjE4NAjxnVpxsZcY\r\nFP7iYuf5rEBTSVN/ha/gkeVZ63JmqXq+MeCfOgD+k3VXnu0yW1puQ98prGzT\r\nePmKlki0JYbnDgQNpw/ZdtdhZw2X8jZSKnkJyd4USaWi4v6dGioGZMJSumtI\r\nSpeDOCj9Tk3dNx+2LvXMLiUlwiqhIA4NZqk=\r\n=pdgk\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button/styles\";\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nThe `mdc-button__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused button.\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.**\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n**Note: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.**\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button--icon-leading` | Optional. Styles a button with a leading icon.\n`mdc-button--icon-trailing` | Optional. Styles a button with a trailing icon.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n`mdc-button__focus-ring` | Recommended. Indicates the element which shows the high contrast mode focus ring styling.\n\n**Note: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommend always including it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color-or-map)` | If a color is passed, sets the default container fill color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`icon-color($color-or-map)` | If a color is passed, sets the default icon color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`ink-color($color-or-map)` | If a color is passed, sets the default ink color to the given color, and sets the icon color to the given color unless `icon-color` is also used. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color-or-map)` | If a color is passed, sets the default outline color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web 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/density":"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/button_15.0.0-canary.f1e037150.0_1668629124635_0.5030012955313803","host":"s3://npm-registry-packages"}},"15.0.0-canary.40b18d043.0":{"name":"@material/button","version":"15.0.0-canary.40b18d043.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"43175312dc9e24f2d3785208cc1d6d890a17008b","tarball":"https://registry.npmjs.org/@material/button/-/button-15.0.0-canary.40b18d043.0.tgz","fileCount":40,"integrity":"sha512-gbliwMCOEfsGQA8JomldZoRvnnjaCGUFosyvVjnKOZ1ySdOSEZgC6OFV5V8nip4vYfjDB21mPS9rVK5rMuz4dw==","signatures":[{"sig":"MEQCIAZTiUv02GYmkaSHuVHeonkXYygSyWOODxBcpzLzSGRzAiB7P9bC5KU3cNqLNzjneFYNCbu2mQlE4e+WUgtwWCJK1g==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":642249,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjdWszACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoNhA//Vo/0CIuY2SeIVwCq4xp3g/qOf73eIaXTu5hTtrtGElPavfJD\r\nllT9ozh7SBKc4EgnXI4ScKPKTnAgwj44nx6awSoPu2rOczi3ICu9TsPq3Wj+\r\nnAuS6MqNiDlCuJPxzXYX02wEdsIkMjdJ69JCdDAFRLBbFzBjiT1GJ2bbmqcy\r\naoW5kCk39fSPU6W4pauWUGWdkMW7MxqlNxjYcAozevTZt8fTueKPlY9oJ6E5\r\neBOmj26nbQwq4vy/TyN509fpyCEc7fevSEjkE6U1Lhi2RueA9Zf3++2JUMjH\r\nyVyk9STZUhI7uWO2O1AHi4FJpTTXXhx1ZQQ7Iisjc3V9M8Re9AFTOeY7uZd/\r\nh14TDIlZ2SDL+50oJivP+6ccLTDzmsdE/lGA0kuKhX5uY0u1OTfCiKCmXErp\r\nqqytdH2TGYjeyYWpyGPhETmLPyZ0QWuLuQRLHwoD8rOUzraJBYgs0uDA4JEX\r\nXoZP+Lcgx3GONPA6/FzzVSx3SHux6qvrMCtF6OLUivlaimLpiv5aKQvsO0Xv\r\nIgWBOQYitqkcfKUb4GrrTmFi7ClHSkzXWE0xaF9vuqEEJyt4H0A0hKQArM7c\r\nPJpgn+XpbR0IbcqtPxNSdWWEzN7+rwzZXlT6BmWGaMiR2430JaNiPL/TNqfj\r\nit1miO/q5oor0pKqpzBuurrJh0nHXhQigok=\r\n=CEJb\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button/styles\";\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nThe `mdc-button__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused button.\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.**\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n**Note: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.**\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button--icon-leading` | Optional. Styles a button with a leading icon.\n`mdc-button--icon-trailing` | Optional. Styles a button with a trailing icon.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n`mdc-button__focus-ring` | Recommended. Indicates the element which shows the high contrast mode focus ring styling.\n\n**Note: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommend always including it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color-or-map)` | If a color is passed, sets the default container fill color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`icon-color($color-or-map)` | If a color is passed, sets the default icon color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`ink-color($color-or-map)` | If a color is passed, sets the default ink color to the given color, and sets the icon color to the given color unless `icon-color` is also used. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color-or-map)` | If a color is passed, sets the default outline color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web 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/density":"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/button_15.0.0-canary.40b18d043.0_1668639539403_0.8499495144422606","host":"s3://npm-registry-packages"}},"15.0.0-canary.86bde5c06.0":{"name":"@material/button","version":"15.0.0-canary.86bde5c06.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"dfe949e6d5ac2439ac357820e89ab5bfb6529ba7","tarball":"https://registry.npmjs.org/@material/button/-/button-15.0.0-canary.86bde5c06.0.tgz","fileCount":40,"integrity":"sha512-7buRSfZon3xEOSOhEp/iyAyU1thD32J9luCayEbWEGWO/+ldGUfNUR7sE7s0KgKxv/Z6Jzm/ZkEpLKr6LOJsHw==","signatures":[{"sig":"MEUCIFHbeBXUb05jju3M9RM7I72F4Re+N4nSDK/Qe2UPKJU3AiEAnGzP/c/dG/c3CD+6VzqntNbgR5Skq+6+o/9iHZ71uWQ=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":642373,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjdW2QACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmro+Q/+KKeyynyqJN6ouCfjTq8dp1KrlQW5V+ez8GktyEJFpXTJEkiz\r\nvQrS2u0Xj+MvXSjQxniWI/NYqBpzK3VHlbRyrHYjvgTmHYDwAZorJU4r72IM\r\nKdfizlCzwoZte/aZfp4B2UhI8bKx/4Uk80hMJJ3WCOJaLVSe3fN5A/nEKC1B\r\nf/nOwB4wqBPy3DcTkHt1WDp8Jswwo1FpTAnFA5P++Qgsj/s38AsZxd+c8nKn\r\nyqoyFbuJXsMaI5JXo6qFJvEAtpzu7+CN+keFxJB4vHwwbI5zFsT2E7gWwr96\r\n13sqYY5lekmiVaZaHvsIpjw/pgnhCzm3/Ai0ouwdm63CwD2kiW5iiTuZH5OV\r\nat9ZD70IvdRR+QmM/qydhjZ1ztFWCNB2EWfwWbG2Lbmu3vKWxIJgfUHwv5L8\r\niVG1+/rfRpuwytfWY8EUu1paAhdGg71RSleOhE94cO917InMOVe45o+7zjAv\r\nCN/AVS2U8weIzY6LFodsBkTl2QmEYxRA0Jh8qHBn9iwDauBqAj6YnA7pLlEc\r\nX1fE/BSdJ6ColRjQVrFjBIno2qoJw8ZHTY51NNsig1hiJzRggOQzuRD8rVPM\r\nitMcZahnYvMv48oNd1LRSnLiprfdQXyy/uR1d2ne8vSS10IS/Vethmn5CqFm\r\nm/3TFB0UaG8l6jo1aMUwQQQAOXs4nPkse0M=\r\n=ufpF\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button/styles\";\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nThe `mdc-button__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused button.\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.**\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n**Note: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.**\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button--icon-leading` | Optional. Styles a button with a leading icon.\n`mdc-button--icon-trailing` | Optional. Styles a button with a trailing icon.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n`mdc-button__focus-ring` | Recommended. Indicates the element which shows the high contrast mode focus ring styling.\n\n**Note: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommend always including it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color-or-map)` | If a color is passed, sets the default container fill color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`icon-color($color-or-map)` | If a color is passed, sets the default icon color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`ink-color($color-or-map)` | If a color is passed, sets the default ink color to the given color, and sets the icon color to the given color unless `icon-color` is also used. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color-or-map)` | If a color is passed, sets the default outline color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web 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/density":"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/button_15.0.0-canary.86bde5c06.0_1668640144321_0.48982518919769613","host":"s3://npm-registry-packages"}},"15.0.0-canary.bb7751002.0":{"name":"@material/button","version":"15.0.0-canary.bb7751002.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"308d4148bd2d206b983dff242f9a067f68767742","tarball":"https://registry.npmjs.org/@material/button/-/button-15.0.0-canary.bb7751002.0.tgz","fileCount":40,"integrity":"sha512-j44ToJO9CdjdIpmkUeedzLE3JDmKuLwKQ9RLSNzo9dHGBVTI55CXG5TmEs/T1nMooirQ9HoWTd14Nby3cQd3dA==","signatures":[{"sig":"MEUCIQCiYwrNGoukYxFYe2JnPIE15upysW5kHBmO55Oa7Wy8kAIgfjCC2hT/i+XAz8IIVVR9PGZCBpiq+qSVR34DfXmWpqA=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":642373,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjdXmRACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrJNQ//ZELrnQB/383UrKPoKtQBzepLhQTBhILfbiy27mHE9Gb/YxQ1\r\nt2u234rRbAdpA6EJ8nlMDmyOiBxBF4dSniBzWJxnXRfrSVVJ0FMShd1+pNLo\r\noyDUZLByI9pqidaaaGGH0/hLj7Ui6V0NFDkC/ieh3tPvdxIi+0sEISZC/Jjk\r\nmW/7YTI0OMoTo4b6u0wdj4bvKGF5iybyplUx969USOuEFk6USZFfFdVGMJfe\r\nGglxE0nDQBeMKXp/Rkizght44laznv4hffMUfOdYixFhQFsMiRGL05NYWLoS\r\nZPAycod1HZ4T/d88ilqmeE4BuNTnV7NhqWd9NW2mUlv/f76QA2n1rTn33y/R\r\nZqmdLiAR8NECcA4KGT4EMudxfPpq6ZdinOj4oP30KBI1enZrVV5NTytXR4YU\r\nGCEqyU7MAek2caIUM3K/RPTlkxPWJ54sKv53G7CpHBPMyxGPi1LXsU/CVRrt\r\nsIfVV9y5PzdBdXsv9b3LgBGeZChEzu7JVNvxAnnSsBkQrp6GyrtLDPe+U2gB\r\ntvEF+WH4BNOTn3pjPrteyMU0etuhhSvK9UoFWsyrlguAwaW6z+YPSHnhx/Ge\r\nPjMF7lptkCD+0b0INpiLyNG5WkMXZGacVx+xAmtkHl5WzI3F0TncJ45hxeYe\r\nqfqR88cT/aBH+JKy94SObe8F+qfy7+GE+2w=\r\n=cJdn\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button/styles\";\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nThe `mdc-button__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused button.\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.**\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n**Note: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.**\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button--icon-leading` | Optional. Styles a button with a leading icon.\n`mdc-button--icon-trailing` | Optional. Styles a button with a trailing icon.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n`mdc-button__focus-ring` | Recommended. Indicates the element which shows the high contrast mode focus ring styling.\n\n**Note: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommend always including it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color-or-map)` | If a color is passed, sets the default container fill color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`icon-color($color-or-map)` | If a color is passed, sets the default icon color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`ink-color($color-or-map)` | If a color is passed, sets the default ink color to the given color, and sets the icon color to the given color unless `icon-color` is also used. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color-or-map)` | If a color is passed, sets the default outline color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web 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/density":"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/button_15.0.0-canary.bb7751002.0_1668643216862_0.041583646411497144","host":"s3://npm-registry-packages"}},"15.0.0-canary.63aca9af6.0":{"name":"@material/button","version":"15.0.0-canary.63aca9af6.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"85a2625012ef7fa138e013a937a472cfded57f80","tarball":"https://registry.npmjs.org/@material/button/-/button-15.0.0-canary.63aca9af6.0.tgz","fileCount":40,"integrity":"sha512-NMqgiS1m6V4SPjukKZqYQU1jxBrs0tXCrmUCzs+EE6WJwN2ve8r7xLWcCqhiabRN5HSqfjoZd9M6Nq1TC9+kbA==","signatures":[{"sig":"MEUCIATLU6CE7YBm3+fVAPB2csiltwqsTeRV2ZqbC13R9IXzAiEAlzAABmTkf1mO2jdBllNR6R4qOHjQvVD97XIw+VIMKhI=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":642373,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjdoUeACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqDZA//S3qiwY5H5SD7856ZkdwArwQEqR4ACfsQ1rxdXC8nH6WmAf2M\r\n0XpVxAg5QlPxLblduOwPZW+bMVtjD9m8wzFE3TRqzm1/8m1H2zLfrm0ayUBf\r\nXOOrdq/X5UXYuFu2uERH+32eYPpfyICXUwHAaFwPToPA+PqiDTGUj2bk7IK3\r\nWKUdKeEsr7XYwX2gG+2IeRP9b9nHo86GquasNzWsZE2iRx6aD05T7M6kks9L\r\neDTNUPuEY4fV9NZqxI6uln/dSSOg8jTKLPXcHChH9hr6B6V8lilPC2dKk0Ea\r\nJQy20Qeto9P51J2bNNuc+tL0dqLKj/I+giczx5bvkyyXwr/kQrw9bk2AGqAy\r\nkA5IHHHVYFV/9MOuQneetdrGjDUTyO7XA1+QVMBsdbh6X6wm/n3Z5hIfgd0z\r\nR+A02PFq6GSz7zfE4Y6+FGa9ZJQyjpJNQBMlgiBcSfjVc9BP0kGB9geXVnGQ\r\n8V6SpD9l9G2NTiMK6jmQdMh/zDokJFZGu+BM28cX7WLZXvznJ5kjaFFAqIGx\r\nYfi6u2FfXLGRyb3SySmCyTfeAwo2n20etP6PyJJ2ZuV8OiafRNPZrVwkz2xs\r\nSstXabbN9VYBVFaUrYhkrQ3u3xpO7n2EGjW5HXEreg3YkFBBNxtM2HC4Guvq\r\nr2JajUddWnXz2duaOLw2huVYz4+rc/M5AZ4=\r\n=NQ0N\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button/styles\";\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nThe `mdc-button__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused button.\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.**\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n**Note: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.**\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button--icon-leading` | Optional. Styles a button with a leading icon.\n`mdc-button--icon-trailing` | Optional. Styles a button with a trailing icon.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n`mdc-button__focus-ring` | Recommended. Indicates the element which shows the high contrast mode focus ring styling.\n\n**Note: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommend always including it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color-or-map)` | If a color is passed, sets the default container fill color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`icon-color($color-or-map)` | If a color is passed, sets the default icon color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`ink-color($color-or-map)` | If a color is passed, sets the default ink color to the given color, and sets the icon color to the given color unless `icon-color` is also used. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color-or-map)` | If a color is passed, sets the default outline color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web 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/density":"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/button_15.0.0-canary.63aca9af6.0_1668711710430_0.3661193487272958","host":"s3://npm-registry-packages"}},"15.0.0-canary.56482dc2e.0":{"name":"@material/button","version":"15.0.0-canary.56482dc2e.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"15a0c52787b4b1e3f6b0793e4b3c2441463eca63","tarball":"https://registry.npmjs.org/@material/button/-/button-15.0.0-canary.56482dc2e.0.tgz","fileCount":40,"integrity":"sha512-3CZuX2NIH4Sn/N+RJ91XjU7Q7PrSHtfSPHnxfmW6YDiYaRQUcK29K3tAqnOxoE4gT2NZMQbWP+wIkjuv3lc3zA==","signatures":[{"sig":"MEUCIBlTrmGAbrfy38JWgEH9G+O3uxZSaN+muPOZbteyp07oAiEArJcdsXDH1qrhvcmp95qyuNCpScpelo0xG/4XdcwRmg0=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":642373,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjdq3iACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmqf6g/+NuAdIb5u61PhDswJrxU4ujeJ4tzNq+35/3IOYrqfTZm2Sbtp\r\nx2X3zkSBiDAHV0q/WAh5q1ryMxarix1jwuPxOP7hSauulM9nGHtEpdDaAWTo\r\nPNFnasLSzrCBFOl1qFV+SFg4x/BrOGYukc5LIIY5dPelrNms+bYR7C6gR1cO\r\nYcyARcf2Oy7aJ2+N1n1C3K7YtGP4s1BorbnBqh499Mk0rUnX3SaM3ydZIaM1\r\nV/0n5TvFeV+FEAeh2CtGnXLc36+lVOevJ322kRkrgLdB+tsWaOknOfXOc5WV\r\nmK+3q88/BrvkmU31W8V/WCCLWv7lo4Qr1xfTRdu5/QRVLkolFUsAuFuZwB3x\r\nXdiwlCU985bPGqLXE4KoDvIEsI+GXjqKxlvPeHIfVzLnAtVQ3UiWTmeBPX7x\r\nbK8/nrCNLeAligRLYJafgQ/shinMzT7+Z/ZiUTsO1rd4RmiZWyn/bsGH2Sgs\r\nnZVbV7MjwzcE75dpnabpdosYXSdol3uwJvhXhlvQM0gztEbbiOQ5mhQQP32w\r\nuTynjv+juQH+1F9GVj+l7hF1RUOkfKx6KNp8IwaqlW/AKp8qSMeHQ6eQuLDZ\r\nRGXEu0AXvYKJMl5NdH/wRrld75Ca3LybP1bUQOKo+rVJsoPwIxKZJsPLQGO9\r\n2rZYmQ2GSuvXDt0xsn6re5ctRcSHtlIEzo4=\r\n=Lnug\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button/styles\";\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nThe `mdc-button__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused button.\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.**\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n**Note: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.**\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button--icon-leading` | Optional. Styles a button with a leading icon.\n`mdc-button--icon-trailing` | Optional. Styles a button with a trailing icon.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n`mdc-button__focus-ring` | Recommended. Indicates the element which shows the high contrast mode focus ring styling.\n\n**Note: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommend always including it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color-or-map)` | If a color is passed, sets the default container fill color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`icon-color($color-or-map)` | If a color is passed, sets the default icon color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`ink-color($color-or-map)` | If a color is passed, sets the default ink color to the given color, and sets the icon color to the given color unless `icon-color` is also used. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color-or-map)` | If a color is passed, sets the default outline color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web 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/density":"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/button_15.0.0-canary.56482dc2e.0_1668722145961_0.6773756433883316","host":"s3://npm-registry-packages"}},"15.0.0-canary.953e689f3.0":{"name":"@material/button","version":"15.0.0-canary.953e689f3.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"a0d4e77e1d8dd24d9afad2692186fb9fea67287c","tarball":"https://registry.npmjs.org/@material/button/-/button-15.0.0-canary.953e689f3.0.tgz","fileCount":40,"integrity":"sha512-FPo6l5VYS3verU+s+twrsnaTlsh7iko/2GJvNvbUpO73HzeQoJNxf+cq/PjbqehWBGj4Fy+gVmxTTKtKy4IMww==","signatures":[{"sig":"MEYCIQCx/k7W7vzpQuN/wcvzfDviWxIEvexYocvK1vekhAGZTQIhANIMGl3L21VvTKB0PbcJc/pGKomDqLaQX1nd60Cnlb8M","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":642373,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjdrABACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmpwrg/+P3NNJUiKG091smQccsl+vFS+tODVObvzoxWl9x+TbJ2HBVlO\r\nbP3u4Y8HUshExhBoVlV7InCvrW1FMoOnue70xHjQhr2/W7VF+coMYN88u5yb\r\nXpX+XFTOvMbBuYqrok6B04d0JKL1jqheH/FMLDRDuX28qzBG7CdWlzjk3rR3\r\n/pZvFoDVCxuG0Lh30EftZ7y1LcuFNbPzL3YH7xp9bPWOt7QAorScI8UioKbA\r\nSCrISTdU9/EVMftsbFahGpo4Y+yW8u0YXuM3z5OK4SWvzKkHwYENPsvLunEh\r\nn5vkud2zODUT3qXqRya07miZkOQSbMpAHuC7XWt7k3YzqX9Sohf2vZJygk0K\r\nACH6zoLdli31hndZGedUfmh1l/bbHTrJw2gBwq82Jrc5WXTYh2ElJRfLAImJ\r\nTkJz+tWTZVYGpOJc4Re7fAmYK+7rUFDhkH3+DepQxR3n0qw9HarWFY36y5x1\r\nQYUpPSvKz5hFtSACOmKWNX5oVdGL9Yy0YZyAnA8J+6mM5xRIMJEPH517tK32\r\nDybLFOKP30mplAqXzdOBcrt7hBdhIKQFPLDJc0DRvaYsqomy7A4dmPD8Hqh+\r\n8LgMHZaCJ6yTWs/uelAshuVGE53oxStRpUvVZqCB+fZHClZbpAn4Ff3CACq3\r\n0Du6P2ww8n6DhdOS7p1inCnjWcEKOAfTPfw=\r\n=HwXp\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button/styles\";\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nThe `mdc-button__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused button.\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.**\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n**Note: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.**\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button--icon-leading` | Optional. Styles a button with a leading icon.\n`mdc-button--icon-trailing` | Optional. Styles a button with a trailing icon.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n`mdc-button__focus-ring` | Recommended. Indicates the element which shows the high contrast mode focus ring styling.\n\n**Note: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommend always including it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color-or-map)` | If a color is passed, sets the default container fill color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`icon-color($color-or-map)` | If a color is passed, sets the default icon color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`ink-color($color-or-map)` | If a color is passed, sets the default ink color to the given color, and sets the icon color to the given color unless `icon-color` is also used. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color-or-map)` | If a color is passed, sets the default outline color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web 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/density":"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/button_15.0.0-canary.953e689f3.0_1668722689272_0.286792112148994","host":"s3://npm-registry-packages"}},"15.0.0-canary.b5606a793.0":{"name":"@material/button","version":"15.0.0-canary.b5606a793.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"0de803e8a03d5f65e22d0dcf1548d55b0318774b","tarball":"https://registry.npmjs.org/@material/button/-/button-15.0.0-canary.b5606a793.0.tgz","fileCount":40,"integrity":"sha512-rmBrb6+364JPxsyD4Uovxb5IA6y+dqJmglaXH4NdhdKTObYfZyMAbMyW/WUy/uacqrXzlcsw45RII4ipiOkZHA==","signatures":[{"sig":"MEUCIG4oKsB6zOm/Y8UZ/NvdKUpisQtoc6LFMyBVv6qUECruAiEA4Bajz0IdQfFXQAGwfWEu0Udlp536ahfv28h54/o9Fgg=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":642373,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjd1ygACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmp4iQ//Qrf8PB5J5eGnp4jQ2zpiqcmB1ortcVf2SSxhNdR5PUiVt2V/\r\nTRREYO0fHUYKAe1LRiCeI6Dx6Jrr/atfNSlHhAyU5oTDAVmgIFk5oOC+bXL0\r\nu3bBwE5vD/17VlvNqDEjryEZX4/kT9O/Uxcd2Vckjn+ARBsWbMYEDgu+cYik\r\npDX47qmJ4f75q6JSsIjRDcsGFqmMOUMdT1m0iVPBLs5MnLPqIS+YBcX9api0\r\nwTF1HefXXW+zRjx+eY2DyKcY8RDC2WxiQcvITXWlZDDw72+NWmadENrdLied\r\nCNMa4TiowjzcYTiiIVfQXuUOyXzxqFb5y1poibIN5F5k06DWXvh7Ve9Urp+e\r\nUG1T4U8flnrfIPTiZFvRSecXYTdM5MChyAYboflPatmSwm1vuUWn1RV/H+Su\r\ntp3qAyyBm2FH8xbSebl1k6QAevTUQVK3fYKUS7jCrXsmmwV8snCAvZ1pFxyU\r\nL++iNdNpo9KNqypi7GguKLUJDTEaDqF/pO8kEgyehjGKQaO1S+xRgsX3vf0Z\r\nOcFjda6ejEnzmNafnroRkFXBXaCzqeQYp3Y6EyKd6+8I+E8LFxfkpjJI/W9z\r\nq9steWKXVoTEswnnTBum/bjgN6CebVqVj0mYX/dHSAL8E+PUu50yHrz7HmBy\r\nxccAtVgp1mJf+uRsfxs2YBrhaNZCWeCY9oM=\r\n=bdff\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button/styles\";\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nThe `mdc-button__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused button.\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.**\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n**Note: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.**\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button--icon-leading` | Optional. Styles a button with a leading icon.\n`mdc-button--icon-trailing` | Optional. Styles a button with a trailing icon.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n`mdc-button__focus-ring` | Recommended. Indicates the element which shows the high contrast mode focus ring styling.\n\n**Note: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommend always including it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color-or-map)` | If a color is passed, sets the default container fill color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`icon-color($color-or-map)` | If a color is passed, sets the default icon color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`ink-color($color-or-map)` | If a color is passed, sets the default ink color to the given color, and sets the icon color to the given color unless `icon-color` is also used. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color-or-map)` | If a color is passed, sets the default outline color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web 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/density":"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/button_15.0.0-canary.b5606a793.0_1668766879802_0.848764362142072","host":"s3://npm-registry-packages"}},"15.0.0-canary.8c5675942.0":{"name":"@material/button","version":"15.0.0-canary.8c5675942.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"c7f26baa5ff2a310f1a5ac46af7f1d37ab219be9","tarball":"https://registry.npmjs.org/@material/button/-/button-15.0.0-canary.8c5675942.0.tgz","fileCount":40,"integrity":"sha512-8DlO/QyEvqkdJdo/zCgArTyco4OMlutTEZHcNLgbbmTtnvMHCp+aJtlQw2cLUKAvclTlJJlo3C9I+F6Jx8nojA==","signatures":[{"sig":"MEUCIFuEbWUZMhhfmhv3VG0UIgyX71LrD+EjHyq1OgjX68BDAiEApe4K5WojmVvNz+HqBMDPkVSPhAN2Xv70d+DLW8P9LO0=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":642373,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjd6HLACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpVTBAAgQtIibN2SlRxNuYuy8Dn+8A9Y3ALSsBO1Gg4xPFdai09TiDr\r\nkgCsKOggQZorRWqTGvfj2E5w06TJCLLZsj5dHE6212HX+mNx4u0rKKrAWQNb\r\nePYFRPVzE5praGmwN92wyzzNuCrqde+WCNAIWecfw7PTiMDDApJLP6oC+1q0\r\n9WqHiNHc/KWEkCna7QYvLZgPT+zU8OsttXDjHtPfcWpQUin82s6Emr141kOy\r\nIqDvw7NXDxGb46Mynpo03Hz2cd9sMbPMTFYdHZodh36iDx9aXN1Sr/OGRS5n\r\nRt1bg1JbrxN9vNLB3KqFOA9DX7PMVEfqQMmRzwgAc7rJVIH0fkR9il4EaGKK\r\nIHxmP2LBtoQa0e6Ac08+H8uc0UWL2KhdgvG0N0/ICugqni8d270R2NTk1M2G\r\ntmRSZqCIC7JjfUDlzBDQvQmYyO4h8SzzbQMoRWS+TFVJUnxhHEuJJjNAkbAg\r\nOcqgUdFPVrJrIyz4kSix/RHEbsECgh0UKvEPdhdODLCtip1P/adCJ8WlKPGm\r\n0+T3sVsY/fXaUob3eDdpp0LgSQC7rQf2AxqHMrIvjG67BEBAfxcU4QUH6XHr\r\nwLiX0crxKOQzI2CVoPcUFl0USJNyrdXYqLXapveIZPn2fu0W2uqwWQh7liR1\r\nZ57+qIDxJNjYhcffpmmrqdkRNPoRdSr5szo=\r\n=AtOT\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button/styles\";\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nThe `mdc-button__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused button.\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.**\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n**Note: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.**\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button--icon-leading` | Optional. Styles a button with a leading icon.\n`mdc-button--icon-trailing` | Optional. Styles a button with a trailing icon.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n`mdc-button__focus-ring` | Recommended. Indicates the element which shows the high contrast mode focus ring styling.\n\n**Note: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommend always including it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color-or-map)` | If a color is passed, sets the default container fill color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`icon-color($color-or-map)` | If a color is passed, sets the default icon color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`ink-color($color-or-map)` | If a color is passed, sets the default ink color to the given color, and sets the icon color to the given color unless `icon-color` is also used. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color-or-map)` | If a color is passed, sets the default outline color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web 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/density":"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/button_15.0.0-canary.8c5675942.0_1668784587130_0.4641388320047104","host":"s3://npm-registry-packages"}},"15.0.0-canary.697fbdebd.0":{"name":"@material/button","version":"15.0.0-canary.697fbdebd.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"df3e1539dd99006fb838490bc94cc78cc85974a5","tarball":"https://registry.npmjs.org/@material/button/-/button-15.0.0-canary.697fbdebd.0.tgz","fileCount":40,"integrity":"sha512-V5we2nDqactoQBaOcHhpSpStdfWzQ24NTVV7qDb4lkT7LjlCX/NwsxDEnPfEgIjutH27sPSbRU6pZlXrSaUAGg==","signatures":[{"sig":"MEUCIQC04g5Pv/MnoVWS3hNRmzQnHrMVB9kgN1FkpDedoIibswIgbupOP0aF2+PQyEHZB6O59h5ITz0JqL1ZbeMzoeiU/U0=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":642373,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjd7pKACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoT4Q//c0KCnBkFhdZz6E5+muYCb8B55hPWBZuPghfz2OrOpNMmXxQi\r\n3D72yo780lZwfMuwW1Vx5GAUdlPaTN4bY489QaG+yhqvuMHdlXOPA22bmjgh\r\npY1SsIuB6HSrY/Ld5hYdi/8ISljH8IAfDTLUkccu1a0S8GluaB2wIb+CjlVX\r\nQ46sC7q3NBTaQq+ybDiSZggplOHVHBotwnrS+Qj+Ws5wy81yMvSE1pGQD0Jg\r\ne/iCEDlljsL2iDVbmKP/HDiz/YWmqDMDpRHZ6pTC55MgqpO3nKVJ/7H84OkV\r\nmamLkPGErMBZQ0gJcO2ZndYNf4K5Ukv//U8Ff1raPJ0Zp/ykd57HMHjPrfRw\r\nO5gP9ZTEDFur9BYUiCKGD8veifg8Ci7y+v6DIGnNuEv11wilV4Yao/avj1QG\r\nw1FlmzLtMLX+UQGhWp10tGBApTyrzUXswzPEgtZgHFwTyNNPxgZ6YtbQ+j4+\r\nrLuljI1t7Kdm16xDwrTHd0oM2VVOOcy1nKQw2FiG85uw5nE4smDpjCgYngdx\r\naGh8GoxNm12g+9dMV5wSIr1MUvFT5UGoQ02OSOt2MTOjW/JMOzTwxM9au3kb\r\nAbwozpAi/LaBHrnMmCbuNUmaCAEzqo+n8Tpw75pgqOoO9aqXTzIEu10KTB4x\r\ndUVZtwv+N7lUEc19Qd2CFvz0i4N8zdoTXiA=\r\n=6PJR\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button/styles\";\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nThe `mdc-button__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused button.\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.**\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n**Note: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.**\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button--icon-leading` | Optional. Styles a button with a leading icon.\n`mdc-button--icon-trailing` | Optional. Styles a button with a trailing icon.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n`mdc-button__focus-ring` | Recommended. Indicates the element which shows the high contrast mode focus ring styling.\n\n**Note: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommend always including it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color-or-map)` | If a color is passed, sets the default container fill color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`icon-color($color-or-map)` | If a color is passed, sets the default icon color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`ink-color($color-or-map)` | If a color is passed, sets the default ink color to the given color, and sets the icon color to the given color unless `icon-color` is also used. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color-or-map)` | If a color is passed, sets the default outline color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web 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/density":"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/button_15.0.0-canary.697fbdebd.0_1668790858505_0.7728799498563552","host":"s3://npm-registry-packages"}},"15.0.0-canary.d58410453.0":{"name":"@material/button","version":"15.0.0-canary.d58410453.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"b9da5c919ce7a994f43e6ff035c97984c563909c","tarball":"https://registry.npmjs.org/@material/button/-/button-15.0.0-canary.d58410453.0.tgz","fileCount":40,"integrity":"sha512-x1c9oG16PrC+aD2GWUJhJkCMCsFpjJ1d19xhChqP0k8UjmkEtqieoXwBGOs3Fc75SXfej1/HyARY1n3TyfyS9A==","signatures":[{"sig":"MEYCIQCwvwyqy7oQjI5w1pcCYGR80cch0WCSvsMszSNBIMEjRgIhANboROkTSJIxgUVBNTWlhGjjtEiUUVhTAK7DPJ82BA7S","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":642373,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjd9wdACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmr3lRAAor+tWYmcEbjMxNxGMLahPHQl5LL6WIrYjD2w5taYp2ChO+Mr\r\ngCtVskUWreLpFRrMAdYDFwAjjZqUOfaf4jjmzvsQWB4VKiNe/OTBpSE4nO1u\r\nMuUS4Dns9NPOC4ENcUkYCd+/65OkrHZmCvsbVyhzgb36zc+qtBlIaJ+q9/l7\r\nH9kzoPp/i61YMiEXF9O/dX4GcXUsVxplo31myO6lkRJMixjZA5TECDeNRvMl\r\n6NtfP2XpgBfZvJHJl3pbUQJXF2Kr/re0F1m0mwgxRW37GoIqtYKN6wjKv6jH\r\ns//3ZXDctTfRoGNWxXLsnQnueuVgqG1+4cbsivlu6wVWaX9gSXaG2C9EOFWV\r\niIfakH56o308gxU4DiFW724xzQ/9LtRRxWnAt070+gSE+4bNShM+uLyqtUhC\r\n9DKNCvo6U+e6C6w90IJ6z//SVVhWY3fQP3441B4g8mm1m8peraCZV1Op3pio\r\nbmpMWTIQA9XlEp/j7k9Tn7W/wh1DvrT6ZmigL+6LciroNYHI9zTyPMTVna0o\r\nzi8rcvRCieJ1PGaRBNNfwMJcEsLrwLSHFWaM8PRWuVizCC4NjxM1LME6ghC0\r\n4P5X8MLm38oV3JQd5l5gWPNad4BDDeiSYV4JEQY0fpVklGRjg9Wn94D+kwnq\r\n3eIOgHS3A36TO8azWset0n5kRM8d8b+ZLLA=\r\n=/YV1\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button/styles\";\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nThe `mdc-button__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused button.\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.**\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n**Note: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.**\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button--icon-leading` | Optional. Styles a button with a leading icon.\n`mdc-button--icon-trailing` | Optional. Styles a button with a trailing icon.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n`mdc-button__focus-ring` | Recommended. Indicates the element which shows the high contrast mode focus ring styling.\n\n**Note: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommend always including it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color-or-map)` | If a color is passed, sets the default container fill color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`icon-color($color-or-map)` | If a color is passed, sets the default icon color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`ink-color($color-or-map)` | If a color is passed, sets the default ink color to the given color, and sets the icon color to the given color unless `icon-color` is also used. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color-or-map)` | If a color is passed, sets the default outline color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web 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/density":"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/button_15.0.0-canary.d58410453.0_1668799516846_0.10098448605511967","host":"s3://npm-registry-packages"}},"15.0.0-canary.7971d6ad5.0":{"name":"@material/button","version":"15.0.0-canary.7971d6ad5.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"98462efdc38e862e8a1c137b4c14da434d411ba6","tarball":"https://registry.npmjs.org/@material/button/-/button-15.0.0-canary.7971d6ad5.0.tgz","fileCount":40,"integrity":"sha512-lyV4unJUG/onzNSLL5TjTGJxscBReG6+lNBvGSfgCafW2bfHW278BbqPDbPr52ONe6vg5INptZJ6bZx4FStGIQ==","signatures":[{"sig":"MEQCIDsKPJk0t8lEO8oN22siPc+8IzQ/YMmb5PAXL9azBPPPAiATqa2moXdDeQJ/B67GGrrRIgjMgFEfDX/xIDAWDDEEMw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":642373,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjeJekACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmosqBAAmHEfwNnfoWXKrBC67z2+PPVOj568SmY6nG3qVRBwMR3gTNsL\r\nYZNEl6KLoeCjd8fDB+AC/z/PArJBmXtTB1mAw9c/hBCjIxEpMsbK8L+iSJF7\r\nOHnF2hgVe4FuglAqFho1OkCti6zJBFKm+HRubHR4qdTjb+3D3r9XIsxoAwlC\r\nxQ1DEgH/qeT5gFIrATDFYrdxZoe77Bwooq6cwBYFRTLwAUaBiMzwqJNx3nmq\r\n+HqlWmQYEPwUujpe5YXy3Ol1MlMlGM4xAbJd3jimoqPg3qOwXLwTESgCbUbr\r\nKgPFvt6V2+R+V9a14kawJrGZb4vv3lXUhX+RKQF7TbBhXlUygduGAOrFeuue\r\nwH76y1zkydQLr8iQvAfiEKWrLqhunDmxoD1jwA1boxw16k3JGpyrhbG3RFHO\r\nqRi3yMoLlxCLu/O1IgnO87Qm6ng4k+Ak0kyt2ETWQiLMphJElqmHJx57Uw/B\r\nib1q899EAUWbNP8YAlHqPezXCKrg/peChkgi9OeZV1yxV75FfCCWXdAE1UOy\r\nBAQk7u907768IdxM45sT08aR95eMRlpXMYj6todoo3xOeSrdQT1Zr+gx0MS4\r\n9ghxUcotwyqMwQ+C8w6Hwulu/Olu0JXd9FzAZR2HGK3oV0o/W9p7Zs7FB7ef\r\nPuhAWI/pkB4bzQSqXuvtRs+qyBEivmm6/5U=\r\n=GJBN\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button/styles\";\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nThe `mdc-button__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused button.\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.**\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n**Note: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.**\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button--icon-leading` | Optional. Styles a button with a leading icon.\n`mdc-button--icon-trailing` | Optional. Styles a button with a trailing icon.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n`mdc-button__focus-ring` | Recommended. Indicates the element which shows the high contrast mode focus ring styling.\n\n**Note: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommend always including it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color-or-map)` | If a color is passed, sets the default container fill color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`icon-color($color-or-map)` | If a color is passed, sets the default icon color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`ink-color($color-or-map)` | If a color is passed, sets the default ink color to the given color, and sets the icon color to the given color unless `icon-color` is also used. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color-or-map)` | If a color is passed, sets the default outline color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web 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/density":"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/button_15.0.0-canary.7971d6ad5.0_1668847524020_0.31014662435258544","host":"s3://npm-registry-packages"}},"15.0.0-canary.a0ae73b0e.0":{"name":"@material/button","version":"15.0.0-canary.a0ae73b0e.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"27d66e0ffb6e6ab22ce6b15e331cbcd4f06dc33c","tarball":"https://registry.npmjs.org/@material/button/-/button-15.0.0-canary.a0ae73b0e.0.tgz","fileCount":40,"integrity":"sha512-CY+cT6Jb6EzWOpxqdC2pJQesrsjIctv7qqADrplEtlFnNBuhQSoGsWq9uomKntvKAwUf0JTOC2MWcFU1pwstOQ==","signatures":[{"sig":"MEYCIQCRxaIdRgIB2V9GSuW7vHhyU1Aq7LgOULQeiRBnb+SB6gIhAJOhrRtDWEvDH1fpWj4E0bqY3lvkAg7eDJrOLa8tlhdy","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":642373,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJje1jDACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoBuBAApDM8QE8EAe6ZL9vX/Ci31KHTLLiXnnxW7HBP57i8N3bfST5x\r\nJk4eEi5sKOfIMxO2eyAgHluI82Z92u8OQunEO4NyK1pOt5DxG27N1e4yf5st\r\nvQNi1Dg2WAuDNUXPicvphG4IrLIebFmrkIXwjV12FsS1WPmpXqDZYOoj6ZQG\r\n3bYJV8HTIyEjBguaOQ/1n2RQ4sGzIWqj5Dm9HTrzGZ0sDs7wq8B4yth240ap\r\nccjxXPTEZ0R5pqFi9YfCoIiAhndG/4vAvzB8yKgUfi+DEwqfKLHccYVu0pw9\r\n60NlgCTL24LcNoZYKB363Y3ptrNKDnjmHuklMtA2BWUH6dgJV2x9A9iuysV1\r\n/HiY0rjkJEEv+P1V8I/50O2cMKyKV4EOF4lTsLnslHC8syvhgs5wbL7jUqPF\r\nNwt7eJGAv2dGUHYGfekYLScmn23MK4nF995/kTvRudTMj1KAPMNkmaCFdGdc\r\nj7ojozqZLyiDFQgVnuG+wuNLS8Gkrc2PymDoRELIKwdo6/sdWhi76kRO7S0q\r\noFKzcYTitYRQ4M0mG2dOGZXhkJMalG1BtjVmLRehngduwHHPYcNlhIHvZreA\r\nlE7ZC0eScZklB+AflM5bKP+fRWz+vp/0VYzCBT4vul4F5cipC6By3FBhYdOk\r\nGJAOiqS2fAZMT9n3RM3wbwb+YB2hnLJ6sGc=\r\n=syh8\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button/styles\";\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nThe `mdc-button__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused button.\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.**\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n**Note: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.**\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button--icon-leading` | Optional. Styles a button with a leading icon.\n`mdc-button--icon-trailing` | Optional. Styles a button with a trailing icon.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n`mdc-button__focus-ring` | Recommended. Indicates the element which shows the high contrast mode focus ring styling.\n\n**Note: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommend always including it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color-or-map)` | If a color is passed, sets the default container fill color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`icon-color($color-or-map)` | If a color is passed, sets the default icon color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`ink-color($color-or-map)` | If a color is passed, sets the default ink color to the given color, and sets the icon color to the given color unless `icon-color` is also used. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color-or-map)` | If a color is passed, sets the default outline color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web 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/density":"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/button_15.0.0-canary.a0ae73b0e.0_1669028034983_0.14882785564504974","host":"s3://npm-registry-packages"}},"15.0.0-canary.96f472604.0":{"name":"@material/button","version":"15.0.0-canary.96f472604.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"dbcc4460ab8faf9d92d62afe5c0cba9eec7f15b5","tarball":"https://registry.npmjs.org/@material/button/-/button-15.0.0-canary.96f472604.0.tgz","fileCount":40,"integrity":"sha512-ZRADeQkN2decsmRUWUZskHyYmozHwVfZHyIhBSPufzg9h9CeWs45rLPVzcI53Ls7Li7g369rMURjhaFWZfz6Ww==","signatures":[{"sig":"MEYCIQCZoojVt2Pk1UEpeaqzRnkH/7tMxMKOkmbzdfsbKSeJ6gIhAONkmYSoIPCMAgkByt8g1qi98MxuEE44bC83Lr2q1ePo","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":642373,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJje3SlACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqubhAAgkOGob61otmyYmYTEO0pnTfb+IAonTHa2CGkcCC86M7RFNqU\r\nsIWpDcwOtoiEON+dtaBWgNO/9lM64BXydNMsfUeq2xtDKE6f94Chz1xjC5a9\r\na5vgq/7tw2prUmLfGLaHdqbyKde+8MtGyiX9ZUGPYU1yv2rcIVldLoPtNhvl\r\nXjOPbZvntPlUCz9gdjhgd9db9zwNrS9fWYJ1l+H3Q0DCBvQsh8BLEdhE0R0S\r\nJND0t2KxXE8h/JxzbOhIRfpzy+I+BW7wwkP+Ub6eBzGh35iUJG9uvh63EhPA\r\nIq2K3YYq9bfO4VWthl+nJJldLwUCzhBrTCiPf9fXo+PFb7CFBX9Tk2BlfJT2\r\nGyw+hp0kwfNXY1n2DfZ8pz/bwtuVHQC1KN6kuBop+bHUIZY9k+FgnYXfs5mR\r\nXuDKm/A9jmSGI4T4gRpDNcPkpd0nZXdHzk0yAPuBnTdaGI+RV9i6RMIf6i3t\r\njbKDnLRSeuv3QPQK00pKKphhm1HqaWJALiH/bulIK+DZijdUt9iHMZB769sY\r\n/eEMYHj8hiADaDH7t/8dWkvR/BnUm1u3bLgQY+SYtBB88rp9VuDFbRLRV6RE\r\nH9Ns1Wl/UqVEsxlpZnlkFABkwNxiPaKmnDOdssMCdH3xyPjT8OTsHvg/dYi5\r\neGO6a4MDbp9IDWVIfXHyAJJNKu3op8DEwzE=\r\n=f+XX\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button/styles\";\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nThe `mdc-button__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused button.\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.**\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n**Note: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.**\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button--icon-leading` | Optional. Styles a button with a leading icon.\n`mdc-button--icon-trailing` | Optional. Styles a button with a trailing icon.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n`mdc-button__focus-ring` | Recommended. Indicates the element which shows the high contrast mode focus ring styling.\n\n**Note: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommend always including it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color-or-map)` | If a color is passed, sets the default container fill color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`icon-color($color-or-map)` | If a color is passed, sets the default icon color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`ink-color($color-or-map)` | If a color is passed, sets the default ink color to the given color, and sets the icon color to the given color unless `icon-color` is also used. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color-or-map)` | If a color is passed, sets the default outline color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web 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/density":"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/button_15.0.0-canary.96f472604.0_1669035173002_0.5594474566428462","host":"s3://npm-registry-packages"}},"15.0.0-canary.18b8f31e1.0":{"name":"@material/button","version":"15.0.0-canary.18b8f31e1.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"0242e4192359506c399977300853ff0e144bb2d8","tarball":"https://registry.npmjs.org/@material/button/-/button-15.0.0-canary.18b8f31e1.0.tgz","fileCount":40,"integrity":"sha512-clvO7wKYV+zpsgzHngKo6EcirvXovbNMVDBbXirkNne8aABZNvk3K+9neG20Trd4/P6o7+weJEsqny1GfqnC8w==","signatures":[{"sig":"MEUCIHx1BkutzMzRACfJDdmN/LRriW+lpoVcjdoL8pcAO698AiEAntVsE+7tnfQNMxoBvKyDE6hq7prwOygjRqzPjpL3hJc=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":642373,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJje6EdACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrOeQ/8DQs4D93CkmFy4uFlBcd6cDa6JNDsoijAv3BpUHlmGSoYKKhT\r\ni4LvaOd+ZRglzSn8DK1v27hLqXrvY374rjfW+PkV44CF95mDnZM3u5R/04K4\r\nBA2bAsWAzzhH+hDYGO3D69O/XbWnUlLZUufSLnG9Wiq/aWfY+3zMjFmgrW0L\r\nHZ8Q0P8A/RzW/OJhuW/N62e2yva/fYrlFJMGRwlV6Db1vy1MrcxqOtvn7RTA\r\ngJmX/hcUOvX68hlY4F0mSqvWoYEja4ru2gMiey/ZnU8v7z0Fp4hmo+jgTItE\r\n1Y/LfhItpqvBglDYbika6ZdNciEYd8bz/6D4MUh8xOpHJXJuaDiYsf6+6CwL\r\nQVFboHX9DkKYDErJTDwKlOSTwA1GaOXo6/P/Zi8UhuPNZ7MCkSp8ao3cZJbQ\r\n3Nf+8tlvVur4CT/WpK9MGm6qDW9oVi+Y1bOIpXrqi3NuuuyncdlAi4ZdQZ02\r\nuMbNzQben9oRDjor6sHJFH8ICxEK/R+Jg4fwUkAM8cahlLiZuJ2Mcj9gdwvk\r\nCymXcbqWx9xyvawY/oaWF0/9DsgiyunTjnXUxeRnHJBhtay4Ksz/Wj/mNyv3\r\nMwVzrsQ0OE5mo9YcUCylUsxKGQ+RIxhLwOcleZMXaD/yOX2yj20SkR9PxLQs\r\nD6tx4hnVqnxsKgwZ+ss7tjTCRoWkzsU8nQM=\r\n=U05G\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button/styles\";\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nThe `mdc-button__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused button.\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.**\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n**Note: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.**\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button--icon-leading` | Optional. Styles a button with a leading icon.\n`mdc-button--icon-trailing` | Optional. Styles a button with a trailing icon.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n`mdc-button__focus-ring` | Recommended. Indicates the element which shows the high contrast mode focus ring styling.\n\n**Note: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommend always including it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color-or-map)` | If a color is passed, sets the default container fill color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`icon-color($color-or-map)` | If a color is passed, sets the default icon color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`ink-color($color-or-map)` | If a color is passed, sets the default ink color to the given color, and sets the icon color to the given color unless `icon-color` is also used. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color-or-map)` | If a color is passed, sets the default outline color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web 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/density":"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/button_15.0.0-canary.18b8f31e1.0_1669046557425_0.21808727068167033","host":"s3://npm-registry-packages"}},"15.0.0-canary.912f33ce4.0":{"name":"@material/button","version":"15.0.0-canary.912f33ce4.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"e939617674d19405e03645cdf4abdb793d3f0412","tarball":"https://registry.npmjs.org/@material/button/-/button-15.0.0-canary.912f33ce4.0.tgz","fileCount":40,"integrity":"sha512-+zcYWoc1kipfcgoR/aobRLjjJ0daRFSMYM9E/FSqAq+SzUO6SF0U3B0wl0AmfQwCLQQNq9swMdRNSly82z765w==","signatures":[{"sig":"MEQCIEVROQiCOmoddybyuhcq5x1vGkGV1Muo8SidqHOb2dupAiB736zQ+ccmasfJjH8zmKHKunhjGjBgsWDuNpcdDJNlQw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":642373,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJje7tEACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpdDhAAkCDbQIpvjwfi8ay6CjGmpL6D93yZgiR85/qYGwGeJvYeL9wJ\r\nT9ZyTRjbxG5rQ7wlS62GtW/84FeI+Jw8dg5S0Jk0T0MYiBy6aUDOSF72OHPq\r\nOmCK36n8JPIFXKa4l5LUjxwv+6kSfS3iISbk2CHFk1GBY+aVNwO4/0w9LCMS\r\nYFlF3Wv4BqSV3C15AyqDPrQO8iqbA0+m7DuSR/uSD2VaUdap2hIKQr5yMezt\r\n0w8kvKqLuRqJfvW31SyTyqG+x8AlfyXkSwc02EPP5P9McxDuTAy9dg6Kt1Ml\r\nQCaOYoFdgzzLguQJnRC5kVIMrokVkd14swCZo97HynrOpuMG6LycW/SFVpZM\r\n+XX5aF42xq0k5ciVmXGhogW3A9o0pF0BBL/nmrGa/QnZBxZpwx9pJZy3CgDb\r\noPOUWVLUjeHIPzcaHV103HT1C87zrBAMu3m1zDsF+4y+M4hA7uchZPPA3y76\r\n0ZYFNmhP2v2zV3ExbSZTGDEI+RxWSbkNxrf00v/9bUsBzm7nTI7KCiSirLAH\r\nkUX8RG2qiCjmV9JcJwlBDrnh1SFiy0i65tjbs5HrAShuTZrxE4w9HzIpgebj\r\nkuLGgZVW9JQib5il17dBL9DJExHSpLF9wm4lEGTa0e71NUQ03siq848uGNGX\r\ntYUPVQP5o3sijp4gQXOCIa3Ai2J6ydf8Q54=\r\n=+o2c\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button/styles\";\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nThe `mdc-button__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused button.\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.**\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n**Note: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.**\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button--icon-leading` | Optional. Styles a button with a leading icon.\n`mdc-button--icon-trailing` | Optional. Styles a button with a trailing icon.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n`mdc-button__focus-ring` | Recommended. Indicates the element which shows the high contrast mode focus ring styling.\n\n**Note: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommend always including it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color-or-map)` | If a color is passed, sets the default container fill color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`icon-color($color-or-map)` | If a color is passed, sets the default icon color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`ink-color($color-or-map)` | If a color is passed, sets the default ink color to the given color, and sets the icon color to the given color unless `icon-color` is also used. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color-or-map)` | If a color is passed, sets the default outline color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web 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/density":"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/button_15.0.0-canary.912f33ce4.0_1669053252395_0.578062252988431","host":"s3://npm-registry-packages"}},"15.0.0-canary.1e1b1c369.0":{"name":"@material/button","version":"15.0.0-canary.1e1b1c369.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"b54864e16be57502200fc10cfcbcce161fa65748","tarball":"https://registry.npmjs.org/@material/button/-/button-15.0.0-canary.1e1b1c369.0.tgz","fileCount":40,"integrity":"sha512-RooXZORtp90gearxCWEIAvTF+zeJw0ecIIkGCOdLm/0TzZqs4k9JnzJfjHmTzczoIWQLPhE7QhnhwiEgCELDmg==","signatures":[{"sig":"MEYCIQDxRMB4nGEQBLmHZHOopweF7gwIYPQmU0plokOjM5LiHwIhAPta9mauoQ2Fo328lFfBnjyZUnc0ltFK7fDabPaA/TYV","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":642373,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjfm3gACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrjsQ//XVNhqDLCzo9+xuBImw/gVg5r8+IerBC91GKt5wdRwoHMZtzS\r\nZziYQKYzFFt/k1qhNH7IW7EpoeFm1qB/x1sWvkpA5W9vXaZT32r/+hzQKojX\r\nuRYHNKuQg1OUIhFIh+vsQFpg/14jgNXUoN3bJNwirTnR1iyypou1SYpuTgIY\r\nsqOhhMDtPAB3qya6rOSu/jddordccbwxkPbM/Aum5iJ9pGU8dPkAa8Injy3I\r\nRIm9tKYD50lr4b1aTTrtqpra84rH3ZnopDH0EMqFthEZSuTR2P6khrz+HhbY\r\n8rMfCdS6HLvvjwpMb9iYu3d7q1ctCxV2YokiXzawcooBMmKVY6/FJziUDpmC\r\nn5CtrarADYEpHxtmdUqra3xhk4DoMBnJOqU7yVxD06jgEucsJJkACEEtznPz\r\n5Sf5ssp3QpvHtOd1UI3Zp3A405V04uzIEn2dnW9Uyhi80lKtWNKK2IMMSIVr\r\nDUI1Fv99MeziclgBP1JSRui7yQi+HMsdPNZIv35l6vHLgyk51ok4ALMCGgwz\r\nz9naRBTm6kRqLp42WV7gGelDvS4lb5MXcmqz4WHg3fC/dcaldkJx9hHFjiym\r\nWyDbU5Yi5WWR8RNbrjx4U9h2/A8jZxdxb6lIzDzr9fx1bqyh3tj7EdhARmNc\r\n86+H6GN/CrWwSUC+5odQRStZVnO8yCS9uT4=\r\n=cRkE\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button/styles\";\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nThe `mdc-button__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused button.\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.**\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n**Note: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.**\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button--icon-leading` | Optional. Styles a button with a leading icon.\n`mdc-button--icon-trailing` | Optional. Styles a button with a trailing icon.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n`mdc-button__focus-ring` | Recommended. Indicates the element which shows the high contrast mode focus ring styling.\n\n**Note: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommend always including it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color-or-map)` | If a color is passed, sets the default container fill color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`icon-color($color-or-map)` | If a color is passed, sets the default icon color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`ink-color($color-or-map)` | If a color is passed, sets the default ink color to the given color, and sets the icon color to the given color unless `icon-color` is also used. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color-or-map)` | If a color is passed, sets the default outline color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web 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/density":"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/button_15.0.0-canary.1e1b1c369.0_1669230047865_0.8928697074621372","host":"s3://npm-registry-packages"}},"15.0.0-canary.a2ec49244.0":{"name":"@material/button","version":"15.0.0-canary.a2ec49244.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"9a690e68e8289ac7c025933c1c6248bf35ab0e2c","tarball":"https://registry.npmjs.org/@material/button/-/button-15.0.0-canary.a2ec49244.0.tgz","fileCount":40,"integrity":"sha512-GOXOz7b5/JkZJ3JbjSQ9dM8KmLoAumZdQQmB2hw5Wucdc06KgJJIQ8vcdDWwjyV3bV5YO4t+AOS5emnHhne62Q==","signatures":[{"sig":"MEUCIQDXipaArPHewRj+bhJmyD90gA7cl4apUxmKQoiY74Bg5AIgEtkSHt0nHJctT+mBp4SyKK/jeRLDLBmx5WBSY/n63XU=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":642373,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjfnT7ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrmEw//UMkTqYFMhqKYYVOsHHlQMFDnRYZY+Z1R97xAlGAqZ2bvDl9b\r\nlIABLs92hJQf7QQ67whN/XPCgAN62eylBdwZzrD+z/UiWxSMYB0Bcrsn1DDt\r\nNU5rir4VymluDsNlwSkf+20DhR1rygbYasulzNEAC+LMnXtO2EtJiPMGx2bj\r\nOJAmGK0Z0t7OFgA9jy9oz5x+dvwIXrVKIK3D8uFvuPTcJuFhjzIO0HHP7n33\r\nCj0C8yHqPhN19eNT6KlBUzu5DU5bE1eqP3+GHPS7JwGXXZEN8vHq0qzQ/WMZ\r\ng+dpPPgp0MKH5y3Xxht8Q/rCTqHrFvU+MKX9p4dzARsGdPPnc6KOWOZ6JrFD\r\njmaaFX8A6xQUPEQrLDJXYJYVjHYmxeL3yIda0HcRLT6l3D+KqA+JH7b6vU7A\r\nNoFfD3tBgWz36wHvNzFko9HMD9UQPyKuaXeLCzvpJ3zLp9IWoA1JMXc0MMVd\r\nv7oqtp8jCFOXOvomuOw/ls01QFhbQkFFF87dGJFYWzRDPFu9vBnhl2PnOCL3\r\nLdHQ6vPmiPYXBqhEHl90Zov8dDHFTMt4pcU46DrOgJHCSSwAqUbdUQhF9F35\r\nWUgY61z/e+VhyS3iOTyHPA7WTA1JQ+hym1I2wA95T4jjgjtJbopJ7ViTRs9J\r\n10SdUEXgt5CPedRRg2pPKgo6xBLu9F+rCyM=\r\n=Mzj7\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button/styles\";\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nThe `mdc-button__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused button.\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.**\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n**Note: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.**\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button--icon-leading` | Optional. Styles a button with a leading icon.\n`mdc-button--icon-trailing` | Optional. Styles a button with a trailing icon.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n`mdc-button__focus-ring` | Recommended. Indicates the element which shows the high contrast mode focus ring styling.\n\n**Note: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommend always including it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color-or-map)` | If a color is passed, sets the default container fill color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`icon-color($color-or-map)` | If a color is passed, sets the default icon color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`ink-color($color-or-map)` | If a color is passed, sets the default ink color to the given color, and sets the icon color to the given color unless `icon-color` is also used. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color-or-map)` | If a color is passed, sets the default outline color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web 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/density":"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/button_15.0.0-canary.a2ec49244.0_1669231867023_0.6119509924562536","host":"s3://npm-registry-packages"}},"15.0.0-canary.a7458ba0b.0":{"name":"@material/button","version":"15.0.0-canary.a7458ba0b.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"c555604cac77d9d5731a2d02e8e9eec00ff674bd","tarball":"https://registry.npmjs.org/@material/button/-/button-15.0.0-canary.a7458ba0b.0.tgz","fileCount":40,"integrity":"sha512-te0L8eans8o68M1v+T67YP7pHaiwy4TKSQS3hwdk40hz+OB959RrHgJ6qffSZOpKIiH3XdAcm/Ig7A77sJpj2w==","signatures":[{"sig":"MEYCIQCWGvimfeF2ReX6qShXCZikatzDqZvqoKbMipS12FtTtwIhAIiyUKnojM5kHZ70N4ah6bvP+QgDPzcoLg0oNzBw2IQu","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":642373,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjfn+kACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmq33A//RL41l8FM0074pv2/xD9S+YD8/2dqErtBIqeHQXl+53o7/Oc+\r\nVf1InvlzJzYdpvSwW1uX7e2U+Rogaw66chSCmnhJ1m9sWMEIYBnqE+TWFJSj\r\n0YzlU7gJkaLs1+0RYvb7J+IXqQ/igk2a7253YlkGMhUulKSsQFp93HjGB95A\r\nm9eGZa+TKIWPqKXiOVJa5EMICB7H6LKKqfd4L4WkxZ6QjNAtavETCFoEo57V\r\nQlDqivRgPGxPTkW+dLNZgi5ADirgNEQsIXRpbkH0hdG+JOErhrSCaQOOrquc\r\nqIT1vi/YZ8GGI3fGevePxKkC9Bn1BM7SrBtU1xothBUXdK3VuqUn+jrFrqDg\r\nZdfq31hav/bSVbHCPpf1E2MBXYA6hRnOGgBcHugD2b7yap3y0w5rP9r7XHPQ\r\nZ7hzJOfPOsxDtSTW93xL/aYRjS2YQfB8vTfWmKU14NcwAerWWUex5ot2WWD+\r\nNELr5xYJfjbrqwFnk4JdkugkNcHiNf2UVSfG+ET6iO95zy8xL37buoZY84JO\r\npGAVpj4zqg8YK/IgoFF9HLQy0ayQ636yZ/4SLxX0TcuKyM7wipntTQPx03j6\r\nc302YHWFT9UWJOtS2Bxy0xt2K+3QuPH17sBzXCDPgbpkAtuDXchGuap8TVg7\r\np6iJ9N11Wmk58WpCsOP2Dz8iBupVpHCeNX0=\r\n=xXA1\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button/styles\";\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nThe `mdc-button__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused button.\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.**\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n**Note: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.**\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button--icon-leading` | Optional. Styles a button with a leading icon.\n`mdc-button--icon-trailing` | Optional. Styles a button with a trailing icon.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n`mdc-button__focus-ring` | Recommended. Indicates the element which shows the high contrast mode focus ring styling.\n\n**Note: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommend always including it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color-or-map)` | If a color is passed, sets the default container fill color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`icon-color($color-or-map)` | If a color is passed, sets the default icon color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`ink-color($color-or-map)` | If a color is passed, sets the default ink color to the given color, and sets the icon color to the given color unless `icon-color` is also used. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color-or-map)` | If a color is passed, sets the default outline color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"The Material Components for the web 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/density":"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/button_15.0.0-canary.a7458ba0b.0_1669234596351_0.3010240580102346","host":"s3://npm-registry-packages"}},"15.0.0-canary.7c35e5036.0":{"name":"@material/button","version":"15.0.0-canary.7c35e5036.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"deabce1ea594bcdd7d2170a65a38572c3ae7b0de","tarball":"https://registry.npmjs.org/@material/button/-/button-15.0.0-canary.7c35e5036.0.tgz","fileCount":40,"integrity":"sha512-CnX554G82PApjB9hKcIKImQiBMWkhWodnhC2ft4ZoS1hupYsLZwKyvpxjG16OuVvrRFzG8h7tlxYCRx1vis0SA==","signatures":[{"sig":"MEQCIG1QOcI0ccFGSbVlnLWnI3QUK+3/mxN6wLEY0rKV4SVhAiAxnX4svhZn8zt8akMDZT7dPbC+DFUJbAQGfRBVMLz6Ug==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":642373,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjfy3JACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqD5Q//ZSOCtKBQ/9c+bpzyDje7FjlHpfry7/wIh75QF5acjKimur8g\r\nK/RB5Utd02/QP6zkWEPSApJuWj7nj3iLnyvkF2qnBsi6cOPqZh1Dk5mZqHM3\r\n8loif6ZjQo5OJPS+Y32JHx0e3BJByR0OBuCLqF8TwOq8t1GppBEFqTNtnWlN\r\nb7voZIeV8DofiT0849fA0rrBwo3HuLy82k1+Ka3MTlcDLM25f0hz4cytMpqy\r\nPhN5i4RBJSq+srHghmPk+msqyKaCNxhdpdPfG6IQBmjGD43e+NJWIe8xknPn\r\nGcehHPsYfrDJNMhRMnI+H1Zq6wIxysk1YjJg7tQ8aJHJJ6hJwIWph1KBczSQ\r\nrgHsJIsUzEghgHOm1WRgQiRduACuTLouNouO0WVSnQHtuVWzBZa6VeFoIptS\r\nGG08AA30xSQboPht4VPA8YmpRpNNSY5hEfKX0WZrMeipeN9fVxw5eAzPh5dN\r\nHP7AyBGUK9Ff978EPQ9IC32GagmFT5o7+ZAVYQz4sQbv8NAZwj0wDM7VnMGC\r\nVBz0tWAivH49JxytuFUT6VD1lSztta+DczeAvh19w9CRhqG9D6PoKEpf3iB5\r\nS+bcEx9MuA/RYtz+/sOKl9kh/DACKqzcVKgepHxedQ3Yh/5FrUPGqca5CndH\r\n+YxJgVrBW87wPwa4wN/58VCSa3BDoBLo+fU=\r\n=ujTh\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button/styles\";\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nThe `mdc-button__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused button.\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.**\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n**Note: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.**\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button--icon-leading` | Optional. Styles a button with a leading icon.\n`mdc-button--icon-trailing` | Optional. Styles a button with a trailing icon.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n`mdc-button__focus-ring` | Recommended. Indicates the element which shows the high contrast mode focus ring styling.\n\n**Note: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommend always including it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color-or-map)` | If a color is passed, sets the default container fill color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`icon-color($color-or-map)` | If a color is passed, sets the default icon color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`ink-color($color-or-map)` | If a color is passed, sets the default ink color to the given color, and sets the icon color to the given color unless `icon-color` is also used. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color-or-map)` | If a color is passed, sets the default outline color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web 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/density":"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/button_15.0.0-canary.7c35e5036.0_1669279176893_0.7711007679894075","host":"s3://npm-registry-packages"}},"15.0.0-canary.4356e05c5.0":{"name":"@material/button","version":"15.0.0-canary.4356e05c5.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"2e12c81c7e348765fe648fc9284f1a8804db60d6","tarball":"https://registry.npmjs.org/@material/button/-/button-15.0.0-canary.4356e05c5.0.tgz","fileCount":40,"integrity":"sha512-H7TxQks8Bl+tdulFx0oghYw78NAS+VkR4z2esU+dxtoWCVLP15lIYr9vJJ3qeqSWhBVxMi+E44lwopMTazlpRg==","signatures":[{"sig":"MEUCIEL5bfsXQqvhVUDS6dvK53no9vGcfT1LdFtz2t93IaXjAiEAm9Y+bncHDBoJCak2NWnrNhhTpHtsUXmAikqqTTgYQJU=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":642373,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjfz/mACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrxYQ/5AC/iiKTn0k+cUu9SJXJSphcPz8B0GQiOZMpjrvwuHPQmoios\r\np1pfQjf5c4DT+TiLQDM4yGDtapxnenxbuM2EQgj0YpPZWoHiP93JBVS2vfvd\r\ncgeItJ2F1tq6sSyDCzsvs5R9MIKnjhxIq5C+9dcG7+nt3ZH3UD7C6OgaE/n0\r\n2Dk2aUc0yyZSTpyRH9p8Gxiy221eNKJX8ezdRU3UmfbDH1hbolGvpVEOuEpv\r\nP74HSw+13sMQe9cIsgUXyj3PW9kp1WdsERr7IFku73Ok99mJrXQBl3FG3XfX\r\nUyMoCiDH7r3YGvdfDHkL6VA0cEFpNJAdbmK4k3bDHxcOZmtaNX0UyhKeRYFa\r\n2PzZCg5RNU2V/1/j7BmKBhsgnKuuzD0yY60WfT+k4m8Of5R3l+rr92qAaEK+\r\nvaIGWz4ikXMIjUnSrR+f8ln/3w81lIMb2p+7wcBwCT4dpNvfeeleDdUYe4af\r\nZEdgfb227ccaUHsc4Hv2LPqR4dyhaN6g0QHgmUqa8v2S8SRU2OVRhR+Y95Um\r\noQk0gNd5PJiCmb/rRmSIwcg7X4SoJB1+t6X87nAPyXqgGtORUgIoXW003ck6\r\n2A2XG/7nM5+kASXIbL7mvV2xtvUTNDV1iMS5BHHhiXr9vzYTXs1xlkpSwhL/\r\nruF0DDbY2gYIsGsyWdaHcJJ3IZ2GV6kSUdc=\r\n=a8fh\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button/styles\";\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nThe `mdc-button__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused button.\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.**\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n**Note: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.**\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button--icon-leading` | Optional. Styles a button with a leading icon.\n`mdc-button--icon-trailing` | Optional. Styles a button with a trailing icon.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n`mdc-button__focus-ring` | Recommended. Indicates the element which shows the high contrast mode focus ring styling.\n\n**Note: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommend always including it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color-or-map)` | If a color is passed, sets the default container fill color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`icon-color($color-or-map)` | If a color is passed, sets the default icon color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`ink-color($color-or-map)` | If a color is passed, sets the default ink color to the given color, and sets the icon color to the given color unless `icon-color` is also used. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color-or-map)` | If a color is passed, sets the default outline color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"The Material Components for the web 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/density":"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/button_15.0.0-canary.4356e05c5.0_1669283814509_0.7088342342520573","host":"s3://npm-registry-packages"}},"15.0.0-canary.cb605f8af.0":{"name":"@material/button","version":"15.0.0-canary.cb605f8af.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"23672da18eb4173fb2904c52f7151e0b005171f9","tarball":"https://registry.npmjs.org/@material/button/-/button-15.0.0-canary.cb605f8af.0.tgz","fileCount":40,"integrity":"sha512-WLc7cJsUiOnio6UTybOmnAOXZqBkMZMEcqzz4dZh7gyQHhwz04SxD6Xwiu+p7WdGghzPJtlvgYdDTc8p+LfqVw==","signatures":[{"sig":"MEUCIF+6Phw6l12Zoa8wpbxjWNAVADKy4JtZqbeNWViH42HwAiEAlLC/VF9ot30kRlXkdjz+k1FWWCh55T57nFGTPqEFHxw=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":642373,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjf0RaACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoT+w/+LF4f/Pjc/sbrWEKPszlzT2D9lm7nQ4DOl/hsaQkbuG2GTt4X\r\ncNNBWUp4EOXP3BkS4OYcNnNNkZkpCE6d2fGcc0ZTCUcH2apxb+HhnWKne9+K\r\nJaTMj5mrnBLf7hSAtUS1gaiQkHY60XXf7dkVl1vGo6fpVBSqwVKhhILaWsaE\r\ngvaaxDJDkJc8GziOLIdSnk9zEPB9a/Ymj4gmDK6pXIuS1uU4t4PgYk/E1PKT\r\n46aqTPDzz9w1lGDL/9aeFFDaJZMWu0z/ATRZvKmCzfNUEr8MtbQTvBkEct8s\r\nw4esKbngIJttdjgxVb/3F5mutuRBFaNHEYgv15Twu35jNIdwIU4qQfYHtu1q\r\ngAIPZ4Dt7I/+smR5nHkiKIGWmQKvHOcWccqyYTGiozVRJA6uh9o6aOmKuGKU\r\n3b9hZk7/kesRsu2P0/hx10FXwlhbwVQaeH5y6Bknx5Lu4c3kZJ8FC8G278g8\r\nVqHtiuiCGyJbyY6xw2rllaRnND0MaasiKrE1DJZYSQGpwmSq2A4s8WwA7AqZ\r\nQfI9G9s+lHzqFEgIbAQezKn7rI8Dao9FUwgp9NkCi8+saqIif0YdAcyy3zAt\r\nStuR+E4FG0lgEhrMoTHoOXLdDGBU7XcsaLi4Mf9FoyqJTV932t2mq9RKWTUQ\r\nEWStv5sxV4H5I7XdmND4fGD+vK9arQiaRRE=\r\n=NkoD\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button/styles\";\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nThe `mdc-button__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused button.\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.**\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n**Note: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.**\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button--icon-leading` | Optional. Styles a button with a leading icon.\n`mdc-button--icon-trailing` | Optional. Styles a button with a trailing icon.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n`mdc-button__focus-ring` | Recommended. Indicates the element which shows the high contrast mode focus ring styling.\n\n**Note: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommend always including it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color-or-map)` | If a color is passed, sets the default container fill color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`icon-color($color-or-map)` | If a color is passed, sets the default icon color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`ink-color($color-or-map)` | If a color is passed, sets the default ink color to the given color, and sets the icon color to the given color unless `icon-color` is also used. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color-or-map)` | If a color is passed, sets the default outline color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"The Material Components for the web 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/density":"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/button_15.0.0-canary.cb605f8af.0_1669284954514_0.09904643632113719","host":"s3://npm-registry-packages"}},"15.0.0-canary.05fb07f9f.0":{"name":"@material/button","version":"15.0.0-canary.05fb07f9f.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"c048cfc73bb8f5984a8d306a65dea72b204fa96b","tarball":"https://registry.npmjs.org/@material/button/-/button-15.0.0-canary.05fb07f9f.0.tgz","fileCount":40,"integrity":"sha512-T4CCpxJZznttmiviNo32goC+smS6C+2eQNlmrjGwiUHiltefdEwEHytWzm6xIqmSMI5CzZhrv1CY2XpUyBiR4Q==","signatures":[{"sig":"MEQCIG/jkWSje1kBU0L5FdbEn3EqyT/01Z+Dr9DLm5ag1ZfCAiBQAoMnn8wYgP1Z7+l8v/AAAd1VY5P7l5giBmbnXqLPXQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":642373,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjf6ZVACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqIEg//eX7kNhSSzYWbxnMkQ7VAWSxGfiA6YsjvFYKweFuYTQomfUn+\r\n8eZ6Q9Bj/mt7v+LKt/QsNLVgkVCOHiqPztGF6e5mPoQhlY0T1ee02N4cIjOV\r\nigE5VoaihuRvzJgS7hdsTmSWNRFAIdxIf5COkq+vCKpsFhJdq6wHJfk86Qzr\r\nH74pB8FOU6aiXOFjCyoKAbqfpVyh+xb82zjk6lo2uYWkXCk2pA5WASODfm2/\r\niHXB7GWXwdFJCdBlWVjFKtiG+uauR1pPLKnjfJWciXVFSpRTpYuyH6qSR17c\r\nZleQfTrGwDOoHulHazI6OBDnO+XHMl7E5DwGOMxLDtiLrl2PDvmnZCfAVmlW\r\n+cMABl4NZ0xTl2NexlZtulzVJb3C1flbIXVeXdwRqlMmHcA70ooLPK2Ge3+f\r\nLTMaVkmiqRFpJiVw5lRS9mWxIpzzpVo52k0/9knAZwzEnUjadQqnFhCUEhBy\r\noC8GX/dUa3aaPPCFZIklA47JpYoWOhITpb6wSP2/zvl/nCRQNXd1yaklcG0i\r\nAnpDE54yItt4FU8MMJQqP6rrawAPQ7PFQosAL0t8PZxC8OOMkIJBfODUpMNY\r\n3I7ZRyscbTgJ7QZl1q3cwFiEz8bEdGv7Nsg1I96Q7Y7GxD3he4iS9MIDKpy+\r\nn9PqPVghtfDjEN+fwsN43bq5ddZl8q1w0e8=\r\n=LxPK\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button/styles\";\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nThe `mdc-button__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused button.\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.**\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n**Note: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.**\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button--icon-leading` | Optional. Styles a button with a leading icon.\n`mdc-button--icon-trailing` | Optional. Styles a button with a trailing icon.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n`mdc-button__focus-ring` | Recommended. Indicates the element which shows the high contrast mode focus ring styling.\n\n**Note: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommend always including it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color-or-map)` | If a color is passed, sets the default container fill color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`icon-color($color-or-map)` | If a color is passed, sets the default icon color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`ink-color($color-or-map)` | If a color is passed, sets the default ink color to the given color, and sets the icon color to the given color unless `icon-color` is also used. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color-or-map)` | If a color is passed, sets the default outline color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"The Material Components for the web 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/density":"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/button_15.0.0-canary.05fb07f9f.0_1669310036857_0.31347397718578196","host":"s3://npm-registry-packages"}},"15.0.0-canary.a911b386b.0":{"name":"@material/button","version":"15.0.0-canary.a911b386b.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"19aea1fc550ff097dfe2683edef18ce897aab1d6","tarball":"https://registry.npmjs.org/@material/button/-/button-15.0.0-canary.a911b386b.0.tgz","fileCount":40,"integrity":"sha512-kalCydKE1t6gB4NEkp9bOE+LFgHi5rNN7wbRQPGYuvqHYcygloEJkH5dQ+v42dG8KB1KtfgHcKWEXsYTw4tQ8w==","signatures":[{"sig":"MEQCIHQHMjjM33L6WlAz2YU+qEl7hc+zI1LL+rNVqPrboiCXAiBhO4oqLCNjs/3TMoub/+phinP9Ltuj3sS2TbCl/6xGvw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":642373,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjhOYnACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpgAw/+KFhRaOYvMaD6kbJC0OaH7NJZJl0/VuOD56k8WjoO9lFudE0k\r\n6cxh1ecFVSZXieKdaecGTHs4gVZXllgOogsJf7JWFRckS9pG0gmnIwvZe+vm\r\nP8ApZxOMIrduZytxbq9uiSE9msDS1/22iwpUp1nlGSzWl9CtViMXeEMz5Teh\r\nToy7jqm1O3B3zxhjn3SBbM4Wip2WS0iN9gkv16RREFDgTzupiXgUvrha7hp4\r\naXT7NCXbfZsWY6voiCtgPAFZT7+L9HjsJF47d6bjzxbVDuRiL58qEM7n1mLi\r\n0AlTYyxwjDC9m5XxzfeL9eqUa3vvbRzeZjLf1+8tFcafThKpwxdYcF/aGouw\r\nmUUsyOoB0ynfCWbRQ+dUdRErqDAWqvpmrQmCi2o3Z8vyVG3vFvfC6YDYHo6y\r\niCSPK1FSCZn4dZlMU+7Wshz8xhnWGgdlpNMsDaQMhWflXpjOWZdlTbi6h/03\r\nfYWKOjE1eut+XK9iMfurZMNr/kvIJ45jQ+xbF54RDPs4lIyG+TQf/bbkSEmS\r\nP43ZWNOEwyOREPnd9OHKEfIv1ynI1ZWtpmghpWWTv6WvyT6heWgTk9dESB7B\r\nBZDc32ENgxCFERedQyQojVzQVwWyplDmQmGymUIy+P8/G8aT1t7QPUw+K3t8\r\nAFj44qkoaF/UV5KKqa9YhF8gINSmJlPaLiE=\r\n=3GSa\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button/styles\";\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nThe `mdc-button__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused button.\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.**\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n**Note: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.**\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button--icon-leading` | Optional. Styles a button with a leading icon.\n`mdc-button--icon-trailing` | Optional. Styles a button with a trailing icon.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n`mdc-button__focus-ring` | Recommended. Indicates the element which shows the high contrast mode focus ring styling.\n\n**Note: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommend always including it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color-or-map)` | If a color is passed, sets the default container fill color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`icon-color($color-or-map)` | If a color is passed, sets the default icon color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`ink-color($color-or-map)` | If a color is passed, sets the default ink color to the given color, and sets the icon color to the given color unless `icon-color` is also used. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color-or-map)` | If a color is passed, sets the default outline color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"The Material Components for the web 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/density":"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/button_15.0.0-canary.a911b386b.0_1669654054808_0.5769522592855523","host":"s3://npm-registry-packages"}},"15.0.0-canary.2aa8050b4.0":{"name":"@material/button","version":"15.0.0-canary.2aa8050b4.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"625f72dc7266772f0330c5e732995be1ebe48264","tarball":"https://registry.npmjs.org/@material/button/-/button-15.0.0-canary.2aa8050b4.0.tgz","fileCount":40,"integrity":"sha512-Lt85dsACuGDNcF3YurQeca7XerB3frzmcMGTls84Lao+RIvqyp4fhOl0gCvv23zmlp+JluOqJshF3W/AEOUvlA==","signatures":[{"sig":"MEYCIQCs/OBXFemBBGpvBDwzy4y4GnYag0l/04rSgkYWu9GvbQIhAKKCfxaqDumjxS9Uss0PnnIaIppsBV1w0vw/UxLHfDAV","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":642373,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjhQfzACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmraww/+LVkMwGWC9BNUlKdn46c6kSllMkPe6c0KWrXejM8ZxRL8q6dH\r\nFYMsXtz6w1dIXYTGmYBGgGvdu8aX/64brq5UTQAi9nDkAwq2BiN6XwUfUMXT\r\n2W5+sQoP8sDmSMJeR6gm+oyxqJ8a4eCX4kVv0DsqB+IoNLDSV2zAE1jhIvK7\r\nqra8XPWfB54fMij1aO9eDVK6AcpvJaiZ6A/dGcUiJhrYNJIPB0A9tA4jk2Y3\r\nPI6gO2mWDj6Ut6BVOnAB7QEpzHQejgMVuQv02obg5mdyIp02pJcFKXHHiThm\r\nlsfOjiuXL2phqX3JVjdA05jpLZTxhawuGTkZkDPYf3iZ9TtpaL856RZumTHt\r\nRp3AJB2jAwBQhk7SxGEl4I1qUFL5HD82BKwXcER9AS9KVKJVMYaA9+o8fviD\r\nMtfp6/W7/hxkepFuPtffZtoRGUD7sNB+9VPuj8PacE7ybE+WKOoo4P06PwVf\r\nHKzFLNoikJmsdSR4vojUUoFoNeODikP5gACnwihLZi3mQBcW9Yn640VlTWHX\r\nf6i4dDI/2i/8Uw3eID5SGPNRaTuACdXT++rYR52GOzttVR3QaPlSIPCbwVK5\r\nf4mjhvp8ZduYAoMfWijuA8NmwO34qgCzYZJW/6nlhicwYlbkoincQN+aaR5C\r\nMFMYBpA7Z5JCT443HRtymv5nwhR0i6RXZjM=\r\n=cExK\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button/styles\";\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nThe `mdc-button__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused button.\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.**\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n**Note: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.**\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button--icon-leading` | Optional. Styles a button with a leading icon.\n`mdc-button--icon-trailing` | Optional. Styles a button with a trailing icon.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n`mdc-button__focus-ring` | Recommended. Indicates the element which shows the high contrast mode focus ring styling.\n\n**Note: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommend always including it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color-or-map)` | If a color is passed, sets the default container fill color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`icon-color($color-or-map)` | If a color is passed, sets the default icon color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`ink-color($color-or-map)` | If a color is passed, sets the default ink color to the given color, and sets the icon color to the given color unless `icon-color` is also used. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color-or-map)` | If a color is passed, sets the default outline color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"The Material Components for the web 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/density":"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/button_15.0.0-canary.2aa8050b4.0_1669662707102_0.7965736693084275","host":"s3://npm-registry-packages"}},"15.0.0-canary.323904a9f.0":{"name":"@material/button","version":"15.0.0-canary.323904a9f.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"6dee3c43838bcde5ad9d1dcdd6ec47b84adf413d","tarball":"https://registry.npmjs.org/@material/button/-/button-15.0.0-canary.323904a9f.0.tgz","fileCount":40,"integrity":"sha512-oimc9o/36uZ9Tt4T1Lt2HoRD1KeYIwSnT9hXQtM4IDD/bznlNGUZzZJPo9n3OrdKTO1sWP04qEQjO4bg3FgIdg==","signatures":[{"sig":"MEQCICvq+OWS21sBpBxYUPUMk8j46NSud3vjqZepyeSBECe5AiBbLM2Zx2zc2TcMin4IQeRo+Cc3F6TIWZ/c32rH3udXCg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":642373,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjhiaPACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrdEw/9FN4CudYbEKAFyS0KaGNDvydsyhpoe0wJqds2WHu+3ivUc9mi\r\nCVa/f4vjcvsIT6HB7J572cePCZgFzEvsKkR49ZnGW6GhNzrDM4cNqa0bHP6y\r\nTBY3JatvBY0cuRek4F+rofdwClv+eNuugQ8GhsZoKPK2cY8VLxk80FlYnF4c\r\nApJveslviVVSJeVVhabl+mzJb6aDtfxILnyEO/+lnw/swnTQjJRWuYRDRHEX\r\nr/BQX+PwbtrtqptdO0CtcwMKC/dkhAEJEfV6yBgigJ1AjOI77pQH6wbGvRzT\r\nsTYy4c0RSrcN8/2BntxYZJmPagKPDI3/hcLueWqatHh2hw5xfDT5uA5Tm3lG\r\nZwJrlRHfC06QWvjgA52pawyRbNXv6aSZDYqQ4XCG85p50fdOX40T5HS6bNZc\r\nltqAsvUNPnP/x9Eoenkr/VbAWy+0t2oOJ5B8yONe9pcEobLawJCTmtkhrWuW\r\nkZUcwRPtwtWPO6VQVRbgXZf5cbknw72oSNBzrY9FJ4+24bdgQobNECFNPmwG\r\nxs9nFAWHm/kHHk3efQiOXNHoH+RCc896C1otf3WuQmN/FsAhIVohiuMqMTnz\r\nSeCryNw5HcfqMHaeO3EQNDQZRxEyv7moK2vkGX3US8iP0/+zxHbnrnfoNkmB\r\ncx6gyR6oUHj5Eq2pJYpwb3HekPBhNvESonQ=\r\n=+xzG\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button/styles\";\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nThe `mdc-button__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused button.\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.**\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n**Note: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.**\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button--icon-leading` | Optional. Styles a button with a leading icon.\n`mdc-button--icon-trailing` | Optional. Styles a button with a trailing icon.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n`mdc-button__focus-ring` | Recommended. Indicates the element which shows the high contrast mode focus ring styling.\n\n**Note: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommend always including it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color-or-map)` | If a color is passed, sets the default container fill color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`icon-color($color-or-map)` | If a color is passed, sets the default icon color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`ink-color($color-or-map)` | If a color is passed, sets the default ink color to the given color, and sets the icon color to the given color unless `icon-color` is also used. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color-or-map)` | If a color is passed, sets the default outline color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"The Material Components for the web 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/density":"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/button_15.0.0-canary.323904a9f.0_1669736079474_0.5191892342805964","host":"s3://npm-registry-packages"}},"15.0.0-canary.168a629a4.0":{"name":"@material/button","version":"15.0.0-canary.168a629a4.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"39c0fc433f4372443e21a4426fdf5e648d60f251","tarball":"https://registry.npmjs.org/@material/button/-/button-15.0.0-canary.168a629a4.0.tgz","fileCount":40,"integrity":"sha512-jvyfMEfwGvI8gu2px792jjPWl/QcePQmYZQZOiDvpC1L0c+JVDgFR8y435X9vwULP7xmGyUqrdOYSLUmOFGXlw==","signatures":[{"sig":"MEQCIGtG5Mwm9j4WkKlyD9Fhu/D+3XMnUIq53j+PC/HpZ/NmAiAWepHKcgRJVLQQiOsVMyzx8YRJj0U2YplHX/SUo1HgcA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":642373,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjhjgkACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpJEg/+J+ImQvRlrWYflrX5AY7aKEIO0D3pQvLdrekHNkQL9JNMP+PC\r\nyVlSnrGdJ/faO0GvwXdWo9JrCho2l4z0Z+Pl3k2l8mlCEp8yQk4bR9sRnh3k\r\nQkccxmogRynxLZogopJnvc6CBe4JzB32SG5Mu33ax7IKldlAVyWCFrYancNK\r\nn8fMdr7WDdYkUEWwhFVewvhEQ5/PQ4vryUqGAKLQT7BKbSywGYZ1OVCZ5kNu\r\n86x/r25LFqBKTuu1tfZ4bNoN2GwJfBx+ZwJtIGZ+MkrHNyUx8iuqkpq8gCM9\r\nIdLNzNTQ3P1/dn2BCGQ5aaHW8WYGxT5+JnHwPnbx8g3pIWgh8oif15ut3L6z\r\nKCx2YVUXpL9VhQ5om4JMdlWt+j5OPbeq9E8D9b53X9FzhIro6uXebv0DQNQZ\r\noLfcsCGdIddzHbtnAlvo5QweGfFnZrpkvGOhUZvdwdozY422fPqeSJKUBhct\r\nERb0Sf7xekdfPLq5FbCZcyXDRlNpiQBZTtdhBFoof8pcqzmjlMRZ0Q5utCLh\r\niiZz4c1dU1bg6HRLf56dxduVQhPkVSnjuzTd4nKR4S26eilL3SDHCWLTMFdk\r\nGvCKD9cdJcYN9v8y6RXlskhy2wtXgitp2xGIFgSSVeBqkGw6Pl2CqKGmv/jb\r\n+kB3dFmJtfknJOkdj3mAeoEZiYQ2It9XzUM=\r\n=DMnW\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button/styles\";\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nThe `mdc-button__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused button.\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.**\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n**Note: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.**\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button--icon-leading` | Optional. Styles a button with a leading icon.\n`mdc-button--icon-trailing` | Optional. Styles a button with a trailing icon.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n`mdc-button__focus-ring` | Recommended. Indicates the element which shows the high contrast mode focus ring styling.\n\n**Note: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommend always including it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color-or-map)` | If a color is passed, sets the default container fill color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`icon-color($color-or-map)` | If a color is passed, sets the default icon color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`ink-color($color-or-map)` | If a color is passed, sets the default ink color to the given color, and sets the icon color to the given color unless `icon-color` is also used. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color-or-map)` | If a color is passed, sets the default outline color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"The Material Components for the web 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/density":"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/button_15.0.0-canary.168a629a4.0_1669740579870_0.520477592030028","host":"s3://npm-registry-packages"}},"15.0.0-canary.65c411674.0":{"name":"@material/button","version":"15.0.0-canary.65c411674.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"fe2a3dde0ac61419c6cc390f99c644d22c360452","tarball":"https://registry.npmjs.org/@material/button/-/button-15.0.0-canary.65c411674.0.tgz","fileCount":40,"integrity":"sha512-dskOE+K1MlFLjvtPE2/2eyNdDoD4cujsPdCwn8R3RjJr/c9HrtNTvgQ2JiBwvRbbeeG9AShU3YP32zbMw8xeaA==","signatures":[{"sig":"MEYCIQCG+lpvkVWdFYWjixNAhy1c1FMJiWoeQHo6FJYLb2KkPgIhAIT2ZdmEwKABARhwPHD27zOha699VpyrWPwfQYNpjxxN","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":642373,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjhkOdACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrpJg/9G0NIli33gIaLO3HH1+lQu7djXUfWel+vkuJBcu3yPE2/i1wY\r\nTto7NLiQKmHQZMCHw+CDUZRRTWPDHta1vs1x9hnGu58sSKlj726zUJMxZ13B\r\nNmallO43U+rJodILXA+yYdyy9mwmY8EL/6UddDw+kvcjKkJySnJg7zotwl2G\r\nXprqD8NDXDLnlCfWejflOJSRX0g/1nuiVVqR+1drPxfLs7KkwJLlwCZnbmpY\r\no9r78VP/oGuKAUHWp3rgRDqDp3tjW3v34+KZ4NXH4DtJ9Wv3WDmtf6dgm8MK\r\nl+YNGblSZd6f5+wjlvnluvRs9/MmaCjuF7kLYPWGdEV3ZKLZXk8VqWS+Vk2w\r\nj/TGW6trjzDDszDP6fdeQnqnTsu98h1WEAC2tNq54W8jMY5vWKhzjWbAxQxD\r\n7HcpjN2fIBMQTmMW4W8UEuzJASPmB+RPxXv+9vI8WMoVuInu8zdbxLNYpr9Y\r\no9QPLAoY7CXq9K1K4oU6JIIV0dKbnSbnomHQIFpoqU4zsXMhiD242XXrisfP\r\nGJMFlU2OEZGOL7tbxDem6h1/Q3sRMlRBtZII+261YC7zLPDOTJtUAzXWFUZU\r\nowIn2s4/6cVdVUeAIfnY4GZazHkBqRuDP4yNP0DQL79NDLz6chsJX0B6Tbri\r\n1IKxxZUMjtHvOTO3h6v2gSF5l3B/d7kcNec=\r\n=DmKK\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button/styles\";\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nThe `mdc-button__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused button.\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.**\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n**Note: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.**\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button--icon-leading` | Optional. Styles a button with a leading icon.\n`mdc-button--icon-trailing` | Optional. Styles a button with a trailing icon.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n`mdc-button__focus-ring` | Recommended. Indicates the element which shows the high contrast mode focus ring styling.\n\n**Note: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommend always including it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color-or-map)` | If a color is passed, sets the default container fill color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`icon-color($color-or-map)` | If a color is passed, sets the default icon color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`ink-color($color-or-map)` | If a color is passed, sets the default ink color to the given color, and sets the icon color to the given color unless `icon-color` is also used. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color-or-map)` | If a color is passed, sets the default outline color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"The Material Components for the web 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/density":"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/button_15.0.0-canary.65c411674.0_1669743516802_0.008017516676967817","host":"s3://npm-registry-packages"}},"15.0.0-canary.a86d36fd2.0":{"name":"@material/button","version":"15.0.0-canary.a86d36fd2.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"70ce5288c58506c91985605a2f7c8c331942641c","tarball":"https://registry.npmjs.org/@material/button/-/button-15.0.0-canary.a86d36fd2.0.tgz","fileCount":40,"integrity":"sha512-vm03UndNyNeMbDYJlTpofd1Cc09sv5DHqkxuCGE8Vxj5GeALRjpzHg5ZMAcZ1Gd98wuL2aacrrDzMvKnIhN6zA==","signatures":[{"sig":"MEYCIQCgghxiLsE37lr5Ua4wJD7cBQ4dk6WTiPLe3LBEWBSM0AIhAMN/V7+A2gz75aynrxliSBAADYDTER2VOQ/8IjYdQue5","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":642373,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjhryDACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqAQxAAhMKAnZ6Q3DBF5hyETrkNYTvhFTMRO3Sn0vlLKPRy3VNuZUIN\r\nGDMzQsSCwdsc5DE/e5lb+Co7CxLqE0BhhiqXSYwdNEAYlXmYwy5w7i5LDTQZ\r\n7/86EAXz3BfMl3c73VreP5pkyT8VkrNJEuOS4dIlrgdWcykT0eZMuuS16ODB\r\nP8diyohqL9uDjT7DEePqP8+NS3rw3VqknnVTitfI7nCqX9dv+5hob+6IuaDv\r\n2jvAnujEdvWA3StuJE30RGh85dKze1hBMk6yr03BXsNQlWrqb8GCoBFg61gB\r\nb0vxPWdnRrIqTZbyZH5yEhOgICO4OugbXRREEzhnYIescFGLcI9zZUChCa+D\r\nV6CZPqlc6dvnOVoyKwMcPLxFT1VmSyzdQE/1ljcpHP7WL57NvJ+3I5fOB+db\r\nkSyMFCFPz/pbfe7U3y0DPNxTGXCOxd9Qlm+poO49f9x2/794pCgN9U194zzb\r\nDvhgIOfXDbO5MSPkSHrL+jxXIyVYZoD62CTuStfxKzuobUJJbTa4ucT52QSw\r\nYkB6bMUPitwe5IaFvx0nuwe0M6FfDhN317TX8EuAhOdIlHFgAmtFJvTn1w79\r\n83qHT2AfDuqcShufc4i4RpT+YpU/7YjPF4CbiDJCwHtlNea+R9uLCOpdLzte\r\nUWJublteQBuADksB6IKPyE1oO5ci8pczjhE=\r\n=RgBR\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button/styles\";\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nThe `mdc-button__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused button.\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.**\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n**Note: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.**\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button--icon-leading` | Optional. Styles a button with a leading icon.\n`mdc-button--icon-trailing` | Optional. Styles a button with a trailing icon.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n`mdc-button__focus-ring` | Recommended. Indicates the element which shows the high contrast mode focus ring styling.\n\n**Note: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommend always including it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color-or-map)` | If a color is passed, sets the default container fill color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`icon-color($color-or-map)` | If a color is passed, sets the default icon color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`ink-color($color-or-map)` | If a color is passed, sets the default ink color to the given color, and sets the icon color to the given color unless `icon-color` is also used. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color-or-map)` | If a color is passed, sets the default outline color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"The Material Components for the web 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/density":"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/button_15.0.0-canary.a86d36fd2.0_1669774467381_0.16217935935663097","host":"s3://npm-registry-packages"}},"15.0.0-canary.3a1f46c66.0":{"name":"@material/button","version":"15.0.0-canary.3a1f46c66.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"46ebdb6d056d7358a693a28289892dfb6c53ff57","tarball":"https://registry.npmjs.org/@material/button/-/button-15.0.0-canary.3a1f46c66.0.tgz","fileCount":40,"integrity":"sha512-b3UXRG6UL79zNm9no03LPYk+fhKpw7/xvLqM5XQ9cQ7BcygJzNBBiyNNWRNc5vqp6E9GQscyH0vmYZrqMQQ5nw==","signatures":[{"sig":"MEUCIDWbnWOVvLr9OziIxhUinciSWjF02GT8mH2TJ43/7lqyAiEA95WjPaSf3aqKQs4F5kUU+9A+rt9r7bHdamt6JVWy0cI=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":642373,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjh0d9ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrdwQ//UDLzJmx6cYzGxWxVBFEpLdZS+8DHF5KoGPxM47P9XJSbMBp7\r\nPsaFZqKIq2gpFI1uC7R4YIJUVtXOEGZvyIn4oSDpc5ZR2039qSH5uCkKYHws\r\ngkqTy31LDecoxeI0nuU6aLydAUiwy8zg1QUokCIioydAAHe3rojhC9eI+jKZ\r\n4XqbumdB/2LLTx7WtTDM8qYXkFYp+rdNzPowzoIOTLCxGGfhvHoDqD6XxMF+\r\n8MV9bb7Q/7EmujgQR8Ur7DCtF0hjScaOmfb1qeI+Jl1Glq4A0rYYJZDQYhDe\r\nlwt2FqYVfa3Dgs7Yd7GxFSli/Jofwso3vOnzm0UMGWNfZJ5y3ehoQ442/nJr\r\nilY0coeZzQlbc0aPve99LvBhkKoduo9ARWX9vrhM+zthwpaH5liQZ2vBmqQo\r\nOtu6eXkiQxiSWa+4l72wqlv2UbbO0TxKv6DHPDjacgg+LvjuV44CADWhZA2H\r\nl/CuUi/qz7EdYhWTmC2FjNpepZhhcX/rF1kAX7j4l102sg409fWmAoYySgzN\r\nqfmEjeiibqBLnUccscSvufOku1FFRAAKU85EMmjs7rircrAICqPXMdJ/I++e\r\nCZdReo/hDtsTNvsHgfAEnS3im6h3McrSghw3MS//6gTzlFkxrFW/2mqC8u5d\r\na7cfelKUnCxUlU4ZRY7bWj8FkqzhtcnS3lE=\r\n=U6V+\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button/styles\";\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nThe `mdc-button__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused button.\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.**\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n**Note: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.**\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button--icon-leading` | Optional. Styles a button with a leading icon.\n`mdc-button--icon-trailing` | Optional. Styles a button with a trailing icon.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n`mdc-button__focus-ring` | Recommended. Indicates the element which shows the high contrast mode focus ring styling.\n\n**Note: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommend always including it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color-or-map)` | If a color is passed, sets the default container fill color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`icon-color($color-or-map)` | If a color is passed, sets the default icon color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`ink-color($color-or-map)` | If a color is passed, sets the default ink color to the given color, and sets the icon color to the given color unless `icon-color` is also used. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color-or-map)` | If a color is passed, sets the default outline color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"The Material Components for the web 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/density":"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/button_15.0.0-canary.3a1f46c66.0_1669810045222_0.3876234935497689","host":"s3://npm-registry-packages"}},"15.0.0-canary.32d8a9648.0":{"name":"@material/button","version":"15.0.0-canary.32d8a9648.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"fce36f7c213cc429a51f85da546d41a49896f81b","tarball":"https://registry.npmjs.org/@material/button/-/button-15.0.0-canary.32d8a9648.0.tgz","fileCount":40,"integrity":"sha512-7GKaBSXZ1asehE4etSPIdHKUS6y3x4bdQvmfr0a55z775sGFMo6h8CNOZv5xrwTmsBaE71EoU5yQHPfFyW81Ng==","signatures":[{"sig":"MEYCIQDlzWvQNrNe9o7nhvspbyfmbeGAHmbT4Y4sJFYhWckHyQIhAJbAkMh3Oy5lxNEMSztcY3Wu6Rk07grnaveiwwxUbc5V","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":642373,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjiOR0ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrcpQ//ae5QNy4SJpyl7vZQ50orRsjFhhF/s9rMfT6P62NMLyCMSmhA\r\nNgdnrl01fTXw7/rkAk0u5L3aihoxLh5lzxSBLg/g3idKXZAs9Cn7FyVA6cBO\r\nJgbUTuzDUO1F54mMoVHVyp53JbD1MeLNGyUFt+yqxe9/6HLKtnbfUdtrS8XC\r\nK3YJ49r+WPz2YUlEoxeU0lMdPVjXaqPYc8M8U1nf33lMd9kzTVHS59L7/HbL\r\nei0GFl2kCoUG5AgXyW2l+6M3WYsXswCk4/pwgqu9fdFoTIXxtiFQXVk4rENM\r\ntCOdLyVCVeORwmf44Kj7DfUNtRPrsVOHRAhBLV5q+YtO4jvuN+9XQ/pnOfq2\r\nyKXxq/e+38bRsHFxxAVaUwKY8lSAMXupGqJ/jNa5LxaCJJsd2v+umoJY9NeW\r\nd9RH2xv1sQsxEwg15izGZiuQLwLpoXmlTYDxP+vytqipaKgQoxvMDLSFojlQ\r\nNWVY+E1YEUrKs2KTX+xfHlvCCbRq6+9mohYoDuoGX4YO9VeCnnqAnXkFAIRQ\r\nMbn5gM3G6eP6zGGtUxmMuSMTLP96h/L/xC2zd+bgaFIZiJjG3pIBUQiwhujs\r\nniIA4UVXe+yZkYa15IHu8/EU3n2ePsa7Pc9tZypR8nkuOrw5IPEE26CUhR7R\r\nnm5NiQvtScknC7DJ9WH/6UyehMcvdXhRZJs=\r\n=iQDR\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button/styles\";\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nThe `mdc-button__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused button.\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.**\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n**Note: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.**\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button--icon-leading` | Optional. Styles a button with a leading icon.\n`mdc-button--icon-trailing` | Optional. Styles a button with a trailing icon.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n`mdc-button__focus-ring` | Recommended. Indicates the element which shows the high contrast mode focus ring styling.\n\n**Note: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommend always including it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color-or-map)` | If a color is passed, sets the default container fill color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`icon-color($color-or-map)` | If a color is passed, sets the default icon color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`ink-color($color-or-map)` | If a color is passed, sets the default ink color to the given color, and sets the icon color to the given color unless `icon-color` is also used. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color-or-map)` | If a color is passed, sets the default outline color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"The Material Components for the web 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/density":"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/button_15.0.0-canary.32d8a9648.0_1669915764142_0.9998641342021573","host":"s3://npm-registry-packages"}},"15.0.0-canary.03618ab70.0":{"name":"@material/button","version":"15.0.0-canary.03618ab70.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"6ffe58c5df32fabf3b047ef3396fb540b4791913","tarball":"https://registry.npmjs.org/@material/button/-/button-15.0.0-canary.03618ab70.0.tgz","fileCount":40,"integrity":"sha512-r3KoLNjpGbzCU84W2xeqvLDGEGsZzy7pH78p6MLPBPNINl2wx4sG7ZDCBBhnFCRW7dCBy8DtLcNq2uxdwH43BA==","signatures":[{"sig":"MEUCICM2djJJ/xMa8w//4W2LuIZ4PP8agOTxSe8Slv70Q3LjAiEAzouEcddripKVbh9xvPqQ6e6mD0yGU1ppuX/Qxo30OKE=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":642373,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjiRSPACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpfBQ/+J3d66qC/p0UyD7rvIDnZJtSLpJaA8PdVF9iB+xZ0BdK/WL2s\r\nkPoXXNpnNnUWFh8c6yzbxHh5QG7EvyTICKnr9KX8z4djXO6Se5BTk8tbiOF/\r\nVFP71IfX/Dc0l+6ZMv0Yxi07bdgypy7FfUq/tJfKASRbBFdKBMO4a1VYHxBJ\r\n5T8zYDnbrwYLze2+J4nniND1Ela/B8vBx/L/QPLxucshWmLoytSLo5YIMcR9\r\nNjizsfPSh2mrAsDLPl1xavkH2rziam5Cv9s/ETy8q3Rce9DXpaL3nSNqdvl9\r\nEnwKM0BUZMGj5m0hCuhvQbv/1rCzTl1L7b+Km/PbRWOKr3LX5xafrcPigxeA\r\n+ZpMzRx4JOCENGfJ1jpHpiC7gXI0MG2qRZmS1LZ0KxVyJOF416damt6kMRUo\r\nGpooM7O4lwXUZDaUcWxCTbgFRyE0VTrmheCdGPGYBLslviWnI2bI0M8yNUCO\r\nRxdFWo491y0ouG+94A1KbCOMANnUhSBtSjtOzF6zRmt85aTSw04hRNdtUF6N\r\nGTMvt6pG9++0g//jlg3LCh7QS232B5XnliMkAd7o6Ef/qQVToUedD5i/f4Ub\r\ntW3c9vB1VKFAQGRRD1wyw1fAJRbWO8MFvxexWDVubNAghEBIv7ob+8EbiwIa\r\n3K46HEEQuY6FM+B1iIWcch+R54gqk0DUZf8=\r\n=tmKx\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button/styles\";\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nThe `mdc-button__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused button.\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.**\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n**Note: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.**\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button--icon-leading` | Optional. Styles a button with a leading icon.\n`mdc-button--icon-trailing` | Optional. Styles a button with a trailing icon.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n`mdc-button__focus-ring` | Recommended. Indicates the element which shows the high contrast mode focus ring styling.\n\n**Note: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommend always including it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color-or-map)` | If a color is passed, sets the default container fill color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`icon-color($color-or-map)` | If a color is passed, sets the default icon color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`ink-color($color-or-map)` | If a color is passed, sets the default ink color to the given color, and sets the icon color to the given color unless `icon-color` is also used. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color-or-map)` | If a color is passed, sets the default outline color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"The Material Components for the web 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/density":"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/button_15.0.0-canary.03618ab70.0_1669928079528_0.43084942659177106","host":"s3://npm-registry-packages"}},"15.0.0-canary.68aaed940.0":{"name":"@material/button","version":"15.0.0-canary.68aaed940.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"c800716dd50fd8c35eac36d6916bf67e92b2c964","tarball":"https://registry.npmjs.org/@material/button/-/button-15.0.0-canary.68aaed940.0.tgz","fileCount":40,"integrity":"sha512-P+RNqExOXyZlRw++6zRADhS0i3M/UrDuoWkZj8S4my/QpMsCg2hrAUIqPMjyJCmjSva1zykKBMKLuCIJcS3ZbA==","signatures":[{"sig":"MEUCIAs9vxUOb92Xf0vUk4zuLu7WrNBEmdsmH/cGkXdyKP+/AiEA+W2QiBUck/divjpeEUrz7jIfoLn7MbMinjjwpPIaKoo=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":642373,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjiRuHACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmppGA/8D/63CMK7JEPbw96/LNavh/4HllomQ6mCiVxRQpDtS7DpW1p9\r\nLaWH4dMwsy6vzhklkEN88maLIFI9E2NJ1pmCWUqh+belETk0SVX/76YNkiL/\r\nU998wYNPlQtOl9YxwHzUBr/frzLqQ+qfpXH9iHjVXsJsfITQqKH6r2ggB7Oa\r\nrYuS35LOaxhTUYBAvouwgLASGya9Hbb1Mi48eal0pPU9JVLCNmtycNsp9Sfk\r\n3bVwYbOCo1k9LiZshJD8sqWCYOwwT9xjUFKxYFEs+qtkrq4TdtNpD/vkNuqd\r\n5f0bccXoirfo6DLWIkv0tJ/miKGm/WgPacGMWJkDgIKWLylYCvbZpPDV36uh\r\n9L27wQIF+M6V4NOlD5Q3tNGkQD8J5A7dasKUCC072o0NEXxe3bluLFI13Ogw\r\nHh9XSv2tG3NiVqns5S1l1DQq4Hs437FaQ0GBXlulwQltn5N7a8MYapcVwK0k\r\nacUO3kvEY5AVtn1xGvRKZ1Jv0ZIQJDs75gl0aaGfSWZ1edJtGkzbs/8lt1sY\r\njicRv6IOS0cPaMm8c3OyNihLWGssJK0Jg2thdeQ1qpKpOFgi5iXch6liluCs\r\nV7vWUtI3Dpa3wHiRWJtmwssaOJJkHSBU0vr5u1dIz6KTUYV7Re3RF+pRcepa\r\nxQb00J7Kff64uEFJpF+adCTPKOgk/2DaXnM=\r\n=hRjg\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button/styles\";\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nThe `mdc-button__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused button.\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.**\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n**Note: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.**\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button--icon-leading` | Optional. Styles a button with a leading icon.\n`mdc-button--icon-trailing` | Optional. Styles a button with a trailing icon.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n`mdc-button__focus-ring` | Recommended. Indicates the element which shows the high contrast mode focus ring styling.\n\n**Note: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommend always including it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color-or-map)` | If a color is passed, sets the default container fill color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`icon-color($color-or-map)` | If a color is passed, sets the default icon color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`ink-color($color-or-map)` | If a color is passed, sets the default ink color to the given color, and sets the icon color to the given color unless `icon-color` is also used. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color-or-map)` | If a color is passed, sets the default outline color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"The Material Components for the web 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/density":"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/button_15.0.0-canary.68aaed940.0_1669929862639_0.7585333997904238","host":"s3://npm-registry-packages"}},"15.0.0-canary.f0a0bbc75.0":{"name":"@material/button","version":"15.0.0-canary.f0a0bbc75.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"89104c572307168970a54ff8743b00c6529d80f4","tarball":"https://registry.npmjs.org/@material/button/-/button-15.0.0-canary.f0a0bbc75.0.tgz","fileCount":40,"integrity":"sha512-/I4Y9rZtmvX8fgTEkz+JULrn23mItPuTIHTek+E28hGqdiJRC/2fkT96txIp/ZzX9TE2bgQHCuflTEIlguQeMg==","signatures":[{"sig":"MEYCIQCnUqzB5nI7fu4zj10vYgaXzxcx9PZoCFg+aes/dAvv2QIhAJYIbEckPMMvzcWIU9/cBxFJ3QN4NLxsTkbQgPPABby+","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":642373,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjib8jACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmocfg//V6q/AXejGv321fOVScKWl1VAeI48G6+W+Hxrl/X+phR5tHRy\r\n6TmfYIwpexkcxleTeOS/7VS9ibnNzoTrtE/hzysNzWSTlZvSir/MIiih4XWw\r\ndVOf75NggNfs2/BTcGX7LRgJq1YHCQzTEjXiH8JEw3rADVyrX4HuOLk3xL1/\r\nwnDsMHMgZHg8uhIZrSWxynBchOSbAne7o1HCwWCRrK6KiloWELMNQEn9zCGg\r\nxUEGsyQi9I6cdgWE0qvlIWwM4nVILDV4aaWx1vbuPQZzLxb2j8SjJdDuFUz9\r\nhvpqVaQezumhKLv6GnZz4t6gsfWe8JbDH6cPcssIygbsuItPQrgPb40OW1oU\r\nWW0ulISi5emmngHaYfqTVcBSmS3uxoPIcI8g61Vb0yNptq9cv8DDCI56pZdH\r\noIZoLsfXAKGGNKrX/ZubSgD2b+0NZizRRIzeLpuBXNMQnCdxJeUXNOjOe0P8\r\nxUnGuwhu3gEOef3TsQdRRE2GTxdNMAvMrbU3GGgLCOuK2ZFz/MeYex6/IeEO\r\nfFdna67DcEKZhD13jz9+gxd2HKt6zuO9U9e4VwhHcsd2DcwdNtJ4TJFGjPYD\r\n1MsLIq7b4LPDTKshTla8wShyqJaGZTZry/9mbkzpsH8ac9K2fTFbIQdwOzZL\r\nx3IN2FSff0cFREGfoZlyvLJidRai5H6ljvw=\r\n=4RlR\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button/styles\";\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nThe `mdc-button__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused button.\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.**\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n**Note: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.**\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button--icon-leading` | Optional. Styles a button with a leading icon.\n`mdc-button--icon-trailing` | Optional. Styles a button with a trailing icon.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n`mdc-button__focus-ring` | Recommended. Indicates the element which shows the high contrast mode focus ring styling.\n\n**Note: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommend always including it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color-or-map)` | If a color is passed, sets the default container fill color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`icon-color($color-or-map)` | If a color is passed, sets the default icon color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`ink-color($color-or-map)` | If a color is passed, sets the default ink color to the given color, and sets the icon color to the given color unless `icon-color` is also used. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color-or-map)` | If a color is passed, sets the default outline color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"The Material Components for the web 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/density":"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/button_15.0.0-canary.f0a0bbc75.0_1669971746917_0.2635765157412724","host":"s3://npm-registry-packages"}},"15.0.0-canary.dd99c8764.0":{"name":"@material/button","version":"15.0.0-canary.dd99c8764.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"a0deff05c7a9707ed8cbdb87a8ae77a3cc11411b","tarball":"https://registry.npmjs.org/@material/button/-/button-15.0.0-canary.dd99c8764.0.tgz","fileCount":40,"integrity":"sha512-1ggoKodLXnU9ouPNqkoSx6bqOs16tWp7bui8tD837X74N30jj3aVhPAynGJU1iEGg2ZFXC3rcRvbn2P2EyvXMw==","signatures":[{"sig":"MEUCIAfAjZLG73qPhGIkMSxKnNbE3E3Acs2SCXwZHO51zxTSAiEAyQ+7oVGdx+D2KRInU9HST/bCWMzqZ5IFTdPteGzICWI=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":646223,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjigUpACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoskQ/9EErLp3FaJpmibPe640+NYl2RaczPal6bDEoFosu712s92pFR\r\nnZGXoJHJjw02XisIeQ1hwNzjB9z5AjsMq2LP95+4CZviH8xEvqMNTagClXUz\r\nXzPtpMP/ogHm2gbA0CvQ7glBPOQELBdsur3gkwhoLBjgHECxxWK2q9kNyJcB\r\nwlKv7M0eYO1XS/msAZvrJTka6R9fGX8oh0pynA02zrEs+o0zKhd4Wfh9yiS6\r\n/UeAXNmFoS3720SxD94xg7rJuyM0+ZKk2wRBKPWr9+YpI3EpWcxiGO0sQ5KL\r\n3bBE55lpxDglD0vR7ZrSv5eeJQLXlF+8xl7CiJnCR/6We5HOEs6Br9V+gwKL\r\nDSPjJBCulyoBgAI2fXhHYnkeZ5n6rN9Pp0yweiOtBaTCcKMUwB6gVYXJYNtu\r\nUcqDBN1Tb/O3k7EXTr2b2ORVfSaGmdw+KLwtCSO+4H8YPqB3UNd5yQr+5by7\r\nacVd0WwJrN5xmix6Msg8Ar6NBGYVK7uzXT06JuM7OP0BQLEnIwKuZW1oQaw3\r\nbTgqAyer4CRlZCTuHluZbonIAZ5UB71Biztk6JDm7uFb5G+SbAFw19lG1xbM\r\n8B9Eq1XZxieNfsgGTnqDzhx6F8w6MOsfGBeE4pW0JPhSL3sNGWB1QHmmpEDg\r\nLxwPc5hsziaZSTQx1f80z1zMn2jdkg9354c=\r\n=et5b\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button/styles\";\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nThe `mdc-button__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused button.\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.**\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n**Note: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.**\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button--icon-leading` | Optional. Styles a button with a leading icon.\n`mdc-button--icon-trailing` | Optional. Styles a button with a trailing icon.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n`mdc-button__focus-ring` | Recommended. Indicates the element which shows the high contrast mode focus ring styling.\n\n**Note: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommend always including it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color-or-map)` | If a color is passed, sets the default container fill color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`icon-color($color-or-map)` | If a color is passed, sets the default icon color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`ink-color($color-or-map)` | If a color is passed, sets the default ink color to the given color, and sets the icon color to the given color unless `icon-color` is also used. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color-or-map)` | If a color is passed, sets the default outline color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"The Material Components for the web 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/density":"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/button_15.0.0-canary.dd99c8764.0_1669989673629_0.5788034671506128","host":"s3://npm-registry-packages"}},"15.0.0-canary.fabdcca3a.0":{"name":"@material/button","version":"15.0.0-canary.fabdcca3a.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"14312eebd51f5de6ee4600a1497c2005f47e90f2","tarball":"https://registry.npmjs.org/@material/button/-/button-15.0.0-canary.fabdcca3a.0.tgz","fileCount":40,"integrity":"sha512-iaTx95romhULqQDFyrSUHhAIBTyRaLm6D7UlMA/gCto8nTUJrMS/Evm5PgJn09ShzoLqzP7vBJkLAG/xvjDLbA==","signatures":[{"sig":"MEUCIQCCjkywQb5/22lP7pVVNVSGtFEsK/gUbIdR+yLUmeq4twIgdz/bOJJDsqYV5y1d8we3Oab3v+NBl6JLUZlJoHPpVlc=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":646223,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjihSbACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqFkw//eZ2q+CnxVlFH/ARMY6TV8fkJbQu80vWa5H8PmAX7/vMXCHFh\r\nyrYVwGHLgk7MCO4tj3zmIT04n3LYZahwF6kB2IOlxbrEDjTjNRPiSUo2qhZ5\r\npbWuE5zmRY2/wGqQn/UR1cVR88q43Rti49SdE3NL1M+OR9mdExd7RPfEg1cl\r\nub810ZWS7JuZBYE5cG7eH6I5HbNcNsKMPhBn7PeCupay0GbsozhJHJy+Ut+4\r\nq1mfA58FVpJ0+7XLh3wDOzFbhDuTPcHg7x0iqCUV5EIA+9MIkdyVEtidDhN3\r\ncU8LXGNC1lJLfYLlJbBHF08TEA/27GBdoSz3giXoU60XcigNbgwvLMyQMfCJ\r\nPdJyJJi3aE9NDs/LhEB1LLr2hOjEbkzsw7nXqlypY3GPpNnQDGvi7jMsqQjH\r\nOegQRRmYVeKsEgUOZCrgMmS02j208U9cFQ1D5drBHDpObqBDOrGFPfT7PQgs\r\nCZTFe7cDJMhaT5GXEDIWsBSS0594ykJg3+6+iMXB/zNwrkjdXkaVKRId4RUT\r\na6NBgYSeOB2pvRN+HknFu3zUasJRbxTibv+M/I36aw+fxa2EtUkx+al2unwR\r\nwnDp2ENHqHVM8+AJXde90Yy4YWdycwJsbZ3/c8WkXNl5Ruk8KiF9EhUGG8jA\r\ng2Jz+kZaLxC9ysZ19Kf+laCArFzGIFfojak=\r\n=CYF/\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button/styles\";\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nThe `mdc-button__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused button.\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.**\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n**Note: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.**\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button--icon-leading` | Optional. Styles a button with a leading icon.\n`mdc-button--icon-trailing` | Optional. Styles a button with a trailing icon.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n`mdc-button__focus-ring` | Recommended. Indicates the element which shows the high contrast mode focus ring styling.\n\n**Note: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommend always including it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color-or-map)` | If a color is passed, sets the default container fill color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`icon-color($color-or-map)` | If a color is passed, sets the default icon color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`ink-color($color-or-map)` | If a color is passed, sets the default ink color to the given color, and sets the icon color to the given color unless `icon-color` is also used. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color-or-map)` | If a color is passed, sets the default outline color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"The Material Components for the web 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/density":"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/button_15.0.0-canary.fabdcca3a.0_1669993626947_0.3304553858304291","host":"s3://npm-registry-packages"}},"15.0.0-canary.2d26722d2.0":{"name":"@material/button","version":"15.0.0-canary.2d26722d2.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"d4e7b9f0d38d5d041590c36da72d0e45d4808760","tarball":"https://registry.npmjs.org/@material/button/-/button-15.0.0-canary.2d26722d2.0.tgz","fileCount":40,"integrity":"sha512-pn8fs1JrZFdX7QDR1AMmgR/QSmCdQkLDkyyk4rdReYr+X44dlVXk7NNKNHDlIPk3Idg8w7pCNvG1P0UZE2pP6Q==","signatures":[{"sig":"MEYCIQCJSzGGHsEUtOFLZDfU4Awf46ksNi4yFegh4c8v3nT6GAIhAKGlWTh6Aj2/6jlhuba4uCA6++Wk8MRVfcyIFOyJudJV","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":646223,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjiidIACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqiyA/+ODLME0ImlbzRBkTIBIrOJPFMUKno4zV7Xj0lKKLKYFPtWDMR\r\neKG7OKrnpMPS7JdIlzGSip3CZOwIy4D+lnPwhH1fLJPi6TFKr1hptQ9qocU5\r\nmChvr1niGNuX+9gvHud+bZwkh2Xl8f5VcLFcT3ea9AUZghimbi0ELoWmhvaG\r\nCrjJh++ziPTtJj8OzOaPt+DyrsHknUM34q+1j8XMXqo4kxyWQnf5pdr7+FXA\r\nnxrikPp9+1Xi0+/AaBoaqwigXp1cfRIRADsZRXxNzkKUbfu5WNNZhXy6UtOy\r\nFx/aoOuM1/bth+jGvZOQWk3/9fG3cqIVoHo8nAjK4jzGZICZ7E5bdLnjf+lt\r\nXLmHF26ss2eWW7kabAMT7xfHAW5YS062gLE23VzbmrJWZBZ8o8g8F41rEJFM\r\nEx/CZRDf1SlqImtf9GHY4yN+vs5WF4RWqHHXBsn/v/+S6gm+5bTbWBmAdKNf\r\nI0yjg5kKXaS5fqipuL3FRu82phISZ6v82rjO1dXqIdm2PmkFEDq0mAdWjDf9\r\nnpv0KPLvzWVQmpZTf6f16WQ/vCrryn9krVPz1Ml3dbKey8fG2VGg50jJWcF2\r\nbyp3SoSdgHPwqX/JD0vTDjJpT+xGTLqlEEMVZ7lT6GPeF1qbLzSimalWVQCR\r\n/dT6bC9t4BLG6ofhxQxML2VvDUWsSgqLccA=\r\n=IpmZ\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button/styles\";\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nThe `mdc-button__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused button.\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.**\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n**Note: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.**\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button--icon-leading` | Optional. Styles a button with a leading icon.\n`mdc-button--icon-trailing` | Optional. Styles a button with a trailing icon.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n`mdc-button__focus-ring` | Recommended. Indicates the element which shows the high contrast mode focus ring styling.\n\n**Note: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommend always including it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color-or-map)` | If a color is passed, sets the default container fill color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`icon-color($color-or-map)` | If a color is passed, sets the default icon color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`ink-color($color-or-map)` | If a color is passed, sets the default ink color to the given color, and sets the icon color to the given color unless `icon-color` is also used. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color-or-map)` | If a color is passed, sets the default outline color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"The Material Components for the web 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/density":"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/button_15.0.0-canary.2d26722d2.0_1669998408368_0.6136744215068397","host":"s3://npm-registry-packages"}},"15.0.0-canary.eaa0c3a86.0":{"name":"@material/button","version":"15.0.0-canary.eaa0c3a86.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"eed32988ab555dd1e32bf24859dd3ea5e30cc141","tarball":"https://registry.npmjs.org/@material/button/-/button-15.0.0-canary.eaa0c3a86.0.tgz","fileCount":40,"integrity":"sha512-G5d574Or4l56KDVwQkouVjnkkYW2lAH2z7ZvJMz9E80JTdKmF4xe4MnOdNxZWrwWDjdH9m4rDP/+pvjKhlgkFQ==","signatures":[{"sig":"MEQCIBHVb1PQAOjbDh5/CRneiqpvhGBTMazQq3NvWzVmxkg2AiATxyHvrvlUAOO+K/cLgBqpoXfpWLbrCWyHhteQYKMECw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":646223,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjijkaACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmq0Ng//Q9eqChEmOaPrvv5vkzSZR0DdjZfFqMTMXKqFSfytkdPDyzjd\r\nlpmb4Q29bsPs0EjRFUzeuBBzDUOC8GSZEK2ePjnDMWQAbozJzE/JL/kXiRYK\r\nFklTqpQm6yed5WPv1AvqsMLPi08TOHITN30cQnzHoFwM0cr2DBy57dxU89hD\r\ntmlXlokhXHbRvSluZ9SiFTAeKsx+8d4nqYdPD9uwCx4g+sPNjyQf+HjA1dX4\r\nLHn+PbLaQaK51Xx0IgssbsjieZhZaQKKKH4e9UKx+aDhhLMejFcyxhZHtdG9\r\n5Mnf+638/Pnp6XiT9Rx4MTZ7jeIBEB9g7ZEdMw88Ye32tjy0iwsBSxuBuCd4\r\nYeCXPmyk+w729FeWkLqKDX9+W1mXWLQFhM5iF6opyprqfPyJZ+k4UKfs1qQH\r\npmDFY49TqZSmK8Y7j242E6Fpk0rev2TgS0kjO1SjRbVa/Xi+cl36TMaNLPqH\r\n2RCjERej25JL98tDb0nIV4quU3bkJ7pQMw9oTVf7Zg+wq5M2U6LgZD98ySiw\r\n8QMzMo20lVyetL+73mQYJpEbCvOEvMOyftFTcPbhWFnHbqM7Ge6hNwBhxuOI\r\nJUoO5BzJZWiwgK2ELb5Z6IRb+a/rqkz49VEqEt2jpcTBwmpB8v4reOrABBW4\r\nL6pTVxKyVSGryfKY1jz0/rv4CyyIOFH+4iw=\r\n=NhJ+\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button/styles\";\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nThe `mdc-button__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused button.\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.**\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n**Note: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.**\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button--icon-leading` | Optional. Styles a button with a leading icon.\n`mdc-button--icon-trailing` | Optional. Styles a button with a trailing icon.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n`mdc-button__focus-ring` | Recommended. Indicates the element which shows the high contrast mode focus ring styling.\n\n**Note: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommend always including it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color-or-map)` | If a color is passed, sets the default container fill color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`icon-color($color-or-map)` | If a color is passed, sets the default icon color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`ink-color($color-or-map)` | If a color is passed, sets the default ink color to the given color, and sets the icon color to the given color unless `icon-color` is also used. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color-or-map)` | If a color is passed, sets the default outline color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"The Material Components for the web 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/density":"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/button_15.0.0-canary.eaa0c3a86.0_1670002969894_0.4355963991226677","host":"s3://npm-registry-packages"}},"15.0.0-canary.79a613bbd.0":{"name":"@material/button","version":"15.0.0-canary.79a613bbd.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"f4e45b87360dd08999b79d73598273c50a8de583","tarball":"https://registry.npmjs.org/@material/button/-/button-15.0.0-canary.79a613bbd.0.tgz","fileCount":40,"integrity":"sha512-1hoaAmbakcZaNwCdXAnLHCHgTJjKC0ruwc1FXiHqX87v/dWTzJnc8uLvkL6/V8Z+sP/ybW90HNDSZPbOgZbXcQ==","signatures":[{"sig":"MEYCIQCvWocvuVLr/AG27L9TpZIgkS+AK7XDrIjg7HnJMge0IQIhAIbdTETv4tV2rOXvzsM9VK/xpR6HjhaRRGT30PRLxPNB","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":646223,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjj1EMACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoRJxAApGw6j3oNMVZWu1cMYk/TBvTobmJEb2oClp8Ct7deCmsXHYSd\r\nTQVEBxe2ZoWedpR/k3dn5XDYvZb1tCa4tdJADYlcozlPcKPuux1dLNOcKCO8\r\nLVXLA6iHQvCIM7zL8pJZwujOQQKYzd2J9JTCqzFb3fBQFr0rAHd008dUwPpb\r\naPUR7ynZYoiMKtjvBhFqsU8Zh3uHPvD/XTtrzI58G6DlNuzIQF73efqQwYw8\r\nc8aWnOBSATDGgUC9McgdGbIC1UhLVgp/ohCVIDWps+icxVCOW9a/VpkyObvW\r\n6NPv36W4V30Ug/XbiEJyFYJoCRbP09GRtn4eWP/s9PI6ewRDW+oO6S6/kAyK\r\n2EbAtzPawQ5jpKy3gaM3dEJpX1i0bsNmF2y/lpD4T53phOPyDxLsQ1emJlTH\r\nlVKdmvZp8ycurEo9dNbY/GtV6ISMy6tgCeRWzhppbtgqAiIBplGktm2ZUVCN\r\ncQeMuKwyxuWDK+08FOhLYHe6PEk69Lf8YyawQ5HT1BBRMU0HT03T7Jh1/HR6\r\n5kWDo33+vJ0Qgsy9azVj77a8bNWR7fWhrtHfF37c4lnAPydzZ8VHYQj234ch\r\ngfOU+eu7lJxq5IlLqqIQJgx7BvH0lEMYGla6LIl1fLDLnwcCi7E+x7yKHaPM\r\nyScIiiicnExB5SOdJO0vZCITC1BsXVHwPRo=\r\n=DjFY\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button/styles\";\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nThe `mdc-button__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused button.\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.**\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n**Note: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.**\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button--icon-leading` | Optional. Styles a button with a leading icon.\n`mdc-button--icon-trailing` | Optional. Styles a button with a trailing icon.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n`mdc-button__focus-ring` | Recommended. Indicates the element which shows the high contrast mode focus ring styling.\n\n**Note: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommend always including it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color-or-map)` | If a color is passed, sets the default container fill color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`icon-color($color-or-map)` | If a color is passed, sets the default icon color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`ink-color($color-or-map)` | If a color is passed, sets the default ink color to the given color, and sets the icon color to the given color unless `icon-color` is also used. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color-or-map)` | If a color is passed, sets the default outline color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"The Material Components for the web 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/density":"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/button_15.0.0-canary.79a613bbd.0_1670336780118_0.9294897798290802","host":"s3://npm-registry-packages"}},"15.0.0-canary.c871fe61e.0":{"name":"@material/button","version":"15.0.0-canary.c871fe61e.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"bd0a6de2e542cc2c6a464a098746b34b9ce45c26","tarball":"https://registry.npmjs.org/@material/button/-/button-15.0.0-canary.c871fe61e.0.tgz","fileCount":40,"integrity":"sha512-X3e4I77FYZCZ3XesQYaeS39Ge3wF6u4kC4dmuFAxfnyXa/0y2aGqgOSEh3fZJI7sOLybZJsu/BG+J/7TvQ/ALw==","signatures":[{"sig":"MEUCIA2kokc91404mShwHfelhqw+w9xgxzftvlle2lshnAraAiEA2HrHi+LmqWuPc5wuPyg26s5bE3l6yM9mPs3qKLfyUsg=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":646223,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjkEYpACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpHnA//SAv9N55boJPnn71Jk5r1QBnYq4BT9u1qqT86gKzcPVN5Q29s\r\nApTcREQsTp76O46niU1hyD3t5Q6Jn+9ts1Ajv3vnSqI83HCAGe3ks8Et5qTF\r\noapPcg3MeV6jb58QrmDgNjWg+/DTNEOwfyffK3u/3+p1RZ5awGt7Z9UnTlBZ\r\nvPzkpz8Q7rTEx1KVlHWrzoiYCIGFHn8h4+Tolfzf4+05d0PnOFrzbXE1e1/O\r\nTCBlabLAa+LOm81YGqcIL8SHV+8E2IPFgxuZ/+m9hhiApgTxL52eQjSRpFOb\r\nnGneuWpLPIXQqaRaUMsHZ698XRDuChhnGenxdei6FlL+vRkZdgBO6np2mKDy\r\nV7lontWy81VwKt/tBxolmW8+6x47SYMqy0G1U34a1pWzitwHxxqpcAgTN2T1\r\nNuMyQLaoJ9aClmo+VeHSTRE3XaFgv+UnsU6dTAb7DvRUm1HXdDzA8qkPrAmw\r\n5SGTTKocNI/BZS2lDYU6k09TpF7hGLxsYF5jUaP2Ef//mDxjzTFgCJngVPPG\r\nO5q+KSBjeh8XKfdM2Km+jhvJsCkT0Kzl8zQQL9p1K/7X8RKsntfiG7EhL0D4\r\ncnvRyjWLPI3IGgEL+9IyK7brNWXKpNp7E4PIqkSKMiTchN4BB87bepxdY6aB\r\ntRnYdAneHTd4Qgsbs1rp1/wvO2TN3mhehys=\r\n=FJOz\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button/styles\";\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nThe `mdc-button__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused button.\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.**\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n**Note: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.**\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button--icon-leading` | Optional. Styles a button with a leading icon.\n`mdc-button--icon-trailing` | Optional. Styles a button with a trailing icon.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n`mdc-button__focus-ring` | Recommended. Indicates the element which shows the high contrast mode focus ring styling.\n\n**Note: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommend always including it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color-or-map)` | If a color is passed, sets the default container fill color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`icon-color($color-or-map)` | If a color is passed, sets the default icon color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`ink-color($color-or-map)` | If a color is passed, sets the default ink color to the given color, and sets the icon color to the given color unless `icon-color` is also used. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color-or-map)` | If a color is passed, sets the default outline color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"The Material Components for the web 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/density":"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/button_15.0.0-canary.c871fe61e.0_1670399529473_0.9349599965554287","host":"s3://npm-registry-packages"}},"15.0.0-canary.9eaee7936.0":{"name":"@material/button","version":"15.0.0-canary.9eaee7936.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"60c658f246c7f9e442486002f3c30f457eeb8ba0","tarball":"https://registry.npmjs.org/@material/button/-/button-15.0.0-canary.9eaee7936.0.tgz","fileCount":40,"integrity":"sha512-01ZCpb29nW7dJGm2iXUEf84qNLHVy+zOgYdORU+/pLypNfBg4JZZZbWlkasnyVEGL7o9j0Gtiumx8NQUEXWT2Q==","signatures":[{"sig":"MEQCID+Y1GEmQYKsbBGZ+fYA8SxekoE6mATMjzsJzoKUvhVuAiBc3WRNzIhCgJ9L1in9Ux6rdGgEgE8CGt6O98L1CcmoEw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":646223,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjkPF/ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmojBg/+Knq+I2oSAEchj2YA7woSXT9uSX936H3IduesnqQakxcRSJkw\r\nDHJDiA8w/UQVZnNruruC08EwVdKyTv1/f0YMR6nvopTCh322S0kWlv4q8DEg\r\nPtdEDpR9hOTGd6ak5BIbP2ruqEKv/5kiHMRYfeSpjz6H1DCvmW8zu7Vsof4A\r\nmA4kBNYqVGMkR5J5VtA4ChjwwVQXKIiDnxJn3ZYmO1AoHz74xpupp+tulHoq\r\nKaR2r8p0Nqc+8ItC8uWScqlXFYgrrMbm6w0MJV8EHHjXDMUhGDS6mIf9rHRX\r\nSIx9sGLkzUiesH1VTogtNhzbSs5oV8bDV9Sw94VqpGymmadHvRVnP4mR00EI\r\nUJXGrW7Oa3cJdVxwWrw1eqnOmRQA39XQrpAehPv7B2AR4dVKta/fRfNTiTOo\r\nY5lmgW9p7LrD4JBYzA5da4fQVVb6GcrbedXx9N9saR33tCLv0UvshRWYROGR\r\nBkAi0maCQdxSL7fFqjI2TFOaCKLV5wEIfCXg0sIv6kiH7w0nBZ0DvoDkDmI3\r\ntlrWtwELzz2sT7v76HlddtPzR/bij1Lk8W8MZUvuIapcCjZOiuzSQ5zSEVm/\r\nO65a3DGqkdGSPw/U6EcF8WRPQBpIrwUBi5ohiSJdY4UoEvRiXH1nggM+C2xe\r\nkI0FzmSqNLXYA6TXz1U20wU8fLidxeEib/8=\r\n=Ljih\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button/styles\";\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nThe `mdc-button__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused button.\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.**\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n**Note: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.**\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button--icon-leading` | Optional. Styles a button with a leading icon.\n`mdc-button--icon-trailing` | Optional. Styles a button with a trailing icon.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n`mdc-button__focus-ring` | Recommended. Indicates the element which shows the high contrast mode focus ring styling.\n\n**Note: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommend always including it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color-or-map)` | If a color is passed, sets the default container fill color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`icon-color($color-or-map)` | If a color is passed, sets the default icon color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`ink-color($color-or-map)` | If a color is passed, sets the default ink color to the given color, and sets the icon color to the given color unless `icon-color` is also used. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color-or-map)` | If a color is passed, sets the default outline color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"The Material Components for the web 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/density":"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/button_15.0.0-canary.9eaee7936.0_1670443391372_0.14233930431426534","host":"s3://npm-registry-packages"}},"15.0.0-canary.1d37bf601.0":{"name":"@material/button","version":"15.0.0-canary.1d37bf601.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"87ba840279776b3e02347f1347d3e702952a7146","tarball":"https://registry.npmjs.org/@material/button/-/button-15.0.0-canary.1d37bf601.0.tgz","fileCount":40,"integrity":"sha512-8vGO0ZY3r6JlAvP4fFea0A7TaSEckioWk49mbGaml1vuDbBbLgak2cqbYe2ERlOFfeKgwGeI8aqML+K28b8irA==","signatures":[{"sig":"MEUCIAvjLzSaVm/q9OlBArth2oVXwkfitPtVud0NTeoh2ZEwAiEAtiPHSoKKJZnUF3QKHtHkyp6Ufy1veVqokDlAS0Q5aME=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":646223,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjkPp9ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmooJQ/+Lin0vq7NI2rInAbaQj1nGZ+acmmGjK+yD0xeZPL27atu39pt\r\nMjDGTdQhk7FegGUPN9VsM87jFAZcoGobJQUsktRGUILVnhDTPsq+f9pBumnI\r\nDhruUVJJ/8mWSvTyPfJwSagBPZsdWY7z6GpPXuQvLc/lTl0EEDsz3MabcZOV\r\n40KfOu3C/ywhPVm3koUZxu15Bg6wU83ithhQorLu7huvq/dTpdtnSvoQVJxH\r\n92nhOHITqVPFxL2v4oBAEP9n47XO935q+d7AGxfGoHlLXFZVUHVPIUHZE/R8\r\nVG35NERaa9vE6bbGtm+xkbDRp++TNXxYy9DNZ07vHZUCM7fE4W7iKXyXwSY3\r\nBjXkcc+b9zs+j2n58kebjghS9y4g9akt8GtNXiKzt1T4V/2IQrd6hjc3W7fk\r\nG8iEth57JzJCFC5pAea/XCXGVg9d17xpnGZ6SS29S+PB6nq3/gyOboaaOCU9\r\nNwc0lqeC90+DPP/ue7v0p8CYDmnsWTC10VKgeTikrETzaeQJinW8apKvvYSL\r\n71/snBZks928MIDRoew3zVcoyB+6+Oy9J/Dy2bAykTXYoR4AiphHZWqSa+KO\r\ncqNuJJyQ6BXgjXTI39okriXAX4mPkvhZRQg1pttD4tdwxqoSATKYaW4HjJ9p\r\nBausrnemvBdniaIQ/sgoHC5UAQGfU7Mx4DY=\r\n=PAz5\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button/styles\";\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nThe `mdc-button__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused button.\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.**\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n**Note: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.**\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button--icon-leading` | Optional. Styles a button with a leading icon.\n`mdc-button--icon-trailing` | Optional. Styles a button with a trailing icon.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n`mdc-button__focus-ring` | Recommended. Indicates the element which shows the high contrast mode focus ring styling.\n\n**Note: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommend always including it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color-or-map)` | If a color is passed, sets the default container fill color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`icon-color($color-or-map)` | If a color is passed, sets the default icon color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`ink-color($color-or-map)` | If a color is passed, sets the default ink color to the given color, and sets the icon color to the given color unless `icon-color` is also used. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color-or-map)` | If a color is passed, sets the default outline color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"The Material Components for the web 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/density":"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/button_15.0.0-canary.1d37bf601.0_1670445693043_0.7767639131981126","host":"s3://npm-registry-packages"}},"15.0.0-canary.a5fe069d5.0":{"name":"@material/button","version":"15.0.0-canary.a5fe069d5.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"fd122137606c45d916c5da614e8b6c816bb7be1a","tarball":"https://registry.npmjs.org/@material/button/-/button-15.0.0-canary.a5fe069d5.0.tgz","fileCount":40,"integrity":"sha512-CU57lu2Qzx7f65x4F1w0B5aZ4FNc1j+KyON9zUQQP+CMkmwnjOXei6slE9nG9skuBGVrWFSGHemnQOQUGWXetw==","signatures":[{"sig":"MEUCIG91jTUjwHoO+FMUh3lF74mNR/37kjtJi0loxeEVs15cAiEA5B0RopImfVUz2pruXoknjZeP/DaTgqYFSa/RHXyHzHw=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":646223,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjk4IRACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmq76RAAosbSeOG11d6rY2x9w1KCJJFhkPTor5SDD+atatUvOSmLtKej\r\n8C99goa5GppF73Un3v11vp2IwcSroZGCvd80ttZ4noIsdrIdPRxGCQaN/7hu\r\noLdVqZE1slNmxpDOwZPeS8u2/YkrYEKuH4oPGu77U3LNJthXuw9Hziq4IuZj\r\n49Ubg/NwVaPtKaoTzhUyxf7EhfKunjFOC1ENs09Qe9cayA67mE3LwCwNXy+/\r\nSaZG3JBKj9sNkFDaKgwLpGyxFSJJDBVPf3NyH5n/5TBA5HOmo/yMtkNQAox6\r\ncuNVH1+Pwuo1oItaRan//2gxeU31A225QbJgaLnR3GXuAX/8334M7mAeKcJT\r\nuLUvn+73aI/6phb6tC/V0Ck5Dj5a0MTyH5dIOHWbNCS8puJbAJGUHcbqKDq1\r\nMMQPiIpsrVt/3yFlK/ZdhcnyRAj6j29TqF1nhJa+8sjox8e9TDHtv1G0KmgY\r\nYeo590s89k1U9qCAss7t0KW3e4urrYsG571bzrK6tPw7UXIXeF4yFmsP1RdD\r\nFKbMfDnnqT98FTG/dRj6ifLvAGCyyjyk6C9TsQMjFghBlM1IUEaoRpN+Np8/\r\n0Cz6M7WzqyCP4tubipKhLahp08Ra+ydIMDOZqErIE28ffG4YZw/rRvoCTDQG\r\nmHjNfS75q/6unYtHxBJ0X9aPjSFjRGyeoRc=\r\n=y8eH\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button/styles\";\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nThe `mdc-button__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused button.\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.**\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n**Note: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.**\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button--icon-leading` | Optional. Styles a button with a leading icon.\n`mdc-button--icon-trailing` | Optional. Styles a button with a trailing icon.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n`mdc-button__focus-ring` | Recommended. Indicates the element which shows the high contrast mode focus ring styling.\n\n**Note: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommend always including it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color-or-map)` | If a color is passed, sets the default container fill color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`icon-color($color-or-map)` | If a color is passed, sets the default icon color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`ink-color($color-or-map)` | If a color is passed, sets the default ink color to the given color, and sets the icon color to the given color unless `icon-color` is also used. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color-or-map)` | If a color is passed, sets the default outline color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"The Material Components for the web 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/density":"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/button_15.0.0-canary.a5fe069d5.0_1670611472760_0.6158068981907172","host":"s3://npm-registry-packages"}},"15.0.0-canary.ce8b5326f.0":{"name":"@material/button","version":"15.0.0-canary.ce8b5326f.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"a4de16984a1b039b058726bb0cb59693ff11091f","tarball":"https://registry.npmjs.org/@material/button/-/button-15.0.0-canary.ce8b5326f.0.tgz","fileCount":40,"integrity":"sha512-6LUZZSakiJ6PSexRbsJZQ+N787LrecJwBs+VrgF7SjXB0QIvK/uyF8qpADXP1fz17yzZ0RYdnIASL28sLhOtLQ==","signatures":[{"sig":"MEQCIHYi0ZYnd/jO5CoSI4gNg0PN3ykXQz6CjX+F/NF4FsqqAiAisPdazMtmoXJMaBQpxOLJ7xSIbmb111KxHfyVPo0Yyw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":646223,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjk8U2ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmop4w/7BSGfqABHO75uuYYD6jcwQmsUECRiZAtBoYYW2Vki26nnQpui\r\nU1HW9zoe7Bwk2eI7XQeefzEHQ7ZV2jhCZQp/fwB7upSaaBxjG/XkXUq2n51y\r\nHEEmxc7fIWMtT1LHypyqTh/AmU3QIzqYuZjc7vv+zK4vmiwYYLWkJ/zvPQxM\r\n0XtYuQQdqLigL7tJhzLfcMppgohqr2+AD6U8B3a1It63CJLTsR9/z3nUfzym\r\nhscEQizm18jc67HOKf3mYQjALoIWAfplpG1w6pwvoSmwNch9VQvAWbGr4foH\r\nIn2OTL2TRxQhyVWLT9vFDf526r4ul6+6HMOGsYh4i0XVyOt4TInsQWvjZj2+\r\nYplrgAv8ZfkrB1T5QiSJhAE8BT15PBnJe675gU0YkTeB/N8ZtQCXGZRglNK0\r\nTg1GGc43GP+GbE6Gq6XNjyBVlDdaXnoX1zJKgzA1jYyM3fOFmYkEWnn+gucn\r\n+6/W9qG1D/KzPWJ9tmCxB3s88/UwSOgqRPV7jOUfF1u9JfSyQBFqJ1vfrc2S\r\ncT1v9PH0yX8ceEaSNUN9sXkHZ+w9cMmJwCuqqnm9ZGZv0njJf4FuzF8/ByzI\r\nFrmIrH4sDyVwa24R59ghwrCgQxx4SeVO4GAdzR/s3pWeEDlOGmKp2mrPTgcK\r\nBONdj7J8awalluMD03XXWwkqzCBBMeyqqak=\r\n=Q5xr\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button/styles\";\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nThe `mdc-button__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused button.\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.**\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n**Note: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.**\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button--icon-leading` | Optional. Styles a button with a leading icon.\n`mdc-button--icon-trailing` | Optional. Styles a button with a trailing icon.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n`mdc-button__focus-ring` | Recommended. Indicates the element which shows the high contrast mode focus ring styling.\n\n**Note: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommend always including it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color-or-map)` | If a color is passed, sets the default container fill color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`icon-color($color-or-map)` | If a color is passed, sets the default icon color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`ink-color($color-or-map)` | If a color is passed, sets the default ink color to the given color, and sets the icon color to the given color unless `icon-color` is also used. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color-or-map)` | If a color is passed, sets the default outline color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"The Material Components for the web 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/density":"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/button_15.0.0-canary.ce8b5326f.0_1670628662337_0.790867742601677","host":"s3://npm-registry-packages"}},"15.0.0-canary.43f5323bc.0":{"name":"@material/button","version":"15.0.0-canary.43f5323bc.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"dbb8fd57b966491562c915e2f21c9e4e2bac4f62","tarball":"https://registry.npmjs.org/@material/button/-/button-15.0.0-canary.43f5323bc.0.tgz","fileCount":40,"integrity":"sha512-zrzz7SEd7pHw9Jem5jQK2catKcEK5v74WmHQs8q/sJxxg6RP3zHlpH3AbuP3F/M8PJZrW58yfWwoFI+4mlWtEw==","signatures":[{"sig":"MEQCIEjWwSU+KPgDbbvxRa0Tn22OBUxOnY3zKonMm9WMglwuAiB570ITrtK5LSHqhGdwuMv8JPdUU/7Te07ER2S/DnBhLQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":646223,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjl1sKACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoMdg//aSxqvrDrG3qLvfCm/W6chYhlBln4Sc/10qPx6D9eaVRt9ywO\r\nEx2nWLPukJomo9i7Bh0aRo9MSKuSHgmkXevoQygEm+UtjKoo0HsO15OHqnrE\r\naUddTxlox7TanEIqienzyARh1Z7kt0iBze5yT5n5J1w042bQ0FQGLlDRrEAN\r\nNFa2z/j/Hbx3u/5NGfpHOXGvnTtdQSXTLvUpxulPzJlVik+nHMIY6nTFtSu7\r\nrLT5jSEFuDOcpLPNSKDdv/pwBybZh990cHiNJCMoaScphoVcZTUsH2+e4GA2\r\nEr5+sLEmQNTwZ98ZTu1ba3KEleQn+AxVYQ88GRLKdx8lTXyNN7y8/TTXcAP/\r\nLnO6CPJNLhXrf/ZSXVA8uz68rmCrFMZpOkyia7fhlpm+53XVB3e+6IP0ZEO/\r\nSUcc+4W+qKlujXnWiUgee9yp4+684fCxjQB1Wfy8zueQemWg0MVa/87oi+KI\r\noPOkaAMmSL3SZMwH3AJJkrDAIBjZi7RqeEBHJZ7k51YSajZ5QQno+GFeHzrL\r\nsQLBBZJWADBpSxoaqOtX8HIQnY767cdCwJlKB8hgjiHP02/9PzntWcH8L9b2\r\nsjnRJJIISJTrimf0OWbZYpotgU5+2/E3iqDjCl/2AxTmvRJLZxCB9uIf5eIL\r\nvDi78nil23lworKsvg9UuVkzP01s6tUNKys=\r\n=JPq0\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button/styles\";\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nThe `mdc-button__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused button.\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.**\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n**Note: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.**\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button--icon-leading` | Optional. Styles a button with a leading icon.\n`mdc-button--icon-trailing` | Optional. Styles a button with a trailing icon.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n`mdc-button__focus-ring` | Recommended. Indicates the element which shows the high contrast mode focus ring styling.\n\n**Note: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommend always including it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color-or-map)` | If a color is passed, sets the default container fill color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`icon-color($color-or-map)` | If a color is passed, sets the default icon color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`ink-color($color-or-map)` | If a color is passed, sets the default ink color to the given color, and sets the icon color to the given color unless `icon-color` is also used. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color-or-map)` | If a color is passed, sets the default outline color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"The Material Components for the web 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/density":"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/button_15.0.0-canary.43f5323bc.0_1670863626406_0.2699922489299116","host":"s3://npm-registry-packages"}},"15.0.0-canary.5490e32e7.0":{"name":"@material/button","version":"15.0.0-canary.5490e32e7.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"8ebf7e4e2e3ee46133fde4c5a2f1262d0b7fe6bd","tarball":"https://registry.npmjs.org/@material/button/-/button-15.0.0-canary.5490e32e7.0.tgz","fileCount":40,"integrity":"sha512-XAW5ndE2zJnaR+JcTeOujRd5GnQqng9oCv5oyS3/dSWYyi7BFnABm9f8T5nOpQhjEjcgzSmV9hEQWVts+ti8vg==","signatures":[{"sig":"MEUCIBBJkRntZnHfydzGmtDELewDxnltjW568lWl8euPXf2/AiEApH7yvFiixujchAzBEtoKKxCtAu9AP9TMEStQt1GMILM=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":646223,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjl16hACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmp/xw//baM+dMURYjCAw2nDftY7HJNRvyMTuDw32etjZxOIX7CipYiU\r\nYFg0s8ymxHacZJ5vhPkl71s2u99nIGVYxY0uy6O4eu7VIeApHUzXk1/sH49Q\r\ns5sTuxuHkQ7MbFapI7ycHMQ81W+xPU3JGbPlqnNTE6IyW8eOvIy0JexE3Q3T\r\nHeR4yo5iS78kYZ6RtonXo+4mrg+G7EXYJfh0TMHuQUMiWupRVXyP9Cwt1g6Y\r\nS7DxAF5pdxIaV4V12vosO3tLG2LjT24QladfMCSkG0XmXa4pzM1i61ZuUnf5\r\nDTINiHesjf9nI/csj3BWgfh8prxe0JZh9sOcFq/Z3JZKmfk8vB0YUi9NYIqh\r\nDWR902qKmbqLIejAwZXFNPNuGc02m2zAZpqk02WS9ZkOwZ3kLEOUWl7WRgZv\r\nlFtM43m4PUi0GkHIbQ4SJPsoEjPUlt+CO5CqBjjpYHAiyjezhAhGu5/kmje+\r\nbe5qOKR52tvaq90OCKkwIRciQw26WSTLV8sKxEKDBvV3sDhB0l74gf6w0Rvo\r\nkPTeI8MnMOofaMoqn+TObv2tGmfTfUDCHehIYx7w72VOr+rsVciIQvjywt2t\r\nqgl/yZZr6PCQ5cOKGkNek4QuUVR5QHs8ncdknRLzzs0cLXEd6DoavO6ichd5\r\nIIbi+vM7K/S3OxvEX2+QGw1vAoE571sB6OM=\r\n=VBuy\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button/styles\";\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nThe `mdc-button__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused button.\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.**\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n**Note: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.**\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button--icon-leading` | Optional. Styles a button with a leading icon.\n`mdc-button--icon-trailing` | Optional. Styles a button with a trailing icon.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n`mdc-button__focus-ring` | Recommended. Indicates the element which shows the high contrast mode focus ring styling.\n\n**Note: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommend always including it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color-or-map)` | If a color is passed, sets the default container fill color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`icon-color($color-or-map)` | If a color is passed, sets the default icon color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`ink-color($color-or-map)` | If a color is passed, sets the default ink color to the given color, and sets the icon color to the given color unless `icon-color` is also used. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color-or-map)` | If a color is passed, sets the default outline color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"The Material Components for the web 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/density":"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/button_15.0.0-canary.5490e32e7.0_1670864545290_0.08256456602411566","host":"s3://npm-registry-packages"}},"15.0.0-canary.817002c29.0":{"name":"@material/button","version":"15.0.0-canary.817002c29.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"77aa8ff662db790a1e693dcac5c1186b9f1d5cc8","tarball":"https://registry.npmjs.org/@material/button/-/button-15.0.0-canary.817002c29.0.tgz","fileCount":40,"integrity":"sha512-SdIUQQ5rvAz/2NI23bM/qwxIV3lVgHiXC0jinMpabbU8oIF5Wbup1Yn+Y/455jd41Oy2LqZjcVwVvp0gm3gMRw==","signatures":[{"sig":"MEUCIFTjjFgamSoC2+TBqEkxTXWKzDwFGqrwjLMuL1OWolngAiEAzeUGznxl8pjsOwt9qYfWA32LcXdVHF5gRu2lVJ/A6pM=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":646223,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjmPSLACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmo06g/+IX0gM4+/C+IwJdWbEqYziOvDQbblWh5bXYlaJnzIkeJ169nx\r\nwMWNrMKnosJiIBVM8oPgCNNrwSPCWcAobbebG4/dqlq98EJKnuV810c/2Sv6\r\nu6KgyJDiDxqC9Hq3/9toivsVakUYaP/Xkj+LzOIp9keEBpumNbvaMSUf/dMz\r\nfLI+mqvkji0zq7reBzNVfEq8ZwZekqwNkXnTEdeR/2OyQ3Y52KshZIANP0Pn\r\nCsn2C5ImMux4KHgy1GKcOsXD31nRZ66byBaH3PbvVgC478YXqIjaolHa+bOa\r\nJXDQjkCOuG9qM+pBqy6ASxjRx8Qrhai2IxRCuWT6nOcq4cCWUcRH1Dfy0tzo\r\nsyAlAn+/8b2+ulsGs2eGKnlxxrtkWG3ohqGEOMkU5FQI6Wj3Y+ptuy3Yi6PR\r\nHWXe9F0qA19vMfLBchlXoFhBbmydNGVGQgVYfrrzjGanQQhn/hAt0LKS7CH/\r\njY6n3rit7m6IN4vnfAypcNcRteYjdlD3cEX7wPxfQdqzz7WdGRbxPwobs+0+\r\nfbenZaN8t48ea6Sy8lkuXgOCjCo2asK0jK4t9qXTJz+r5G1ngss1JL7Gugcw\r\nEpRSIs/geS7+2x+CLL4tIcFYfwVglH3RMHP0e6aSvNUY3H0lRzVl9x55t0K5\r\nSqfcc8b9oGo2jClmYt/saax5RMymS+JkcrU=\r\n=1CxM\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button/styles\";\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nThe `mdc-button__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused button.\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.**\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n**Note: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.**\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button--icon-leading` | Optional. Styles a button with a leading icon.\n`mdc-button--icon-trailing` | Optional. Styles a button with a trailing icon.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n`mdc-button__focus-ring` | Recommended. Indicates the element which shows the high contrast mode focus ring styling.\n\n**Note: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommend always including it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color-or-map)` | If a color is passed, sets the default container fill color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`icon-color($color-or-map)` | If a color is passed, sets the default icon color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`ink-color($color-or-map)` | If a color is passed, sets the default ink color to the given color, and sets the icon color to the given color unless `icon-color` is also used. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color-or-map)` | If a color is passed, sets the default outline color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"The Material Components for the web 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/density":"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/button_15.0.0-canary.817002c29.0_1670968459611_0.8747944038195874","host":"s3://npm-registry-packages"}},"15.0.0-canary.313a1326a.0":{"name":"@material/button","version":"15.0.0-canary.313a1326a.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"c2ecaae8ef5d5da6e8e1e21e648d2a69f1db45d9","tarball":"https://registry.npmjs.org/@material/button/-/button-15.0.0-canary.313a1326a.0.tgz","fileCount":40,"integrity":"sha512-OMbaPpHKapTklWEVNgHX6sAeI4jdEIvVGkzVHsAp+hh/vxFM692CX5hIEz6BGNE6a9BWJB7QjYU0RKBXPgoezA==","signatures":[{"sig":"MEYCIQCag4AlI7T5ihnESlbA8rFYYM8MayG5qZyt3NB9zUr0tQIhAPY7lxu2YZqZQ0FO8E9MXqsroGqafG/4696Ccd2HrXEq","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":646223,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjmaVvACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmq/fhAAgMxMpa4FuQUjT4yM9PWWifobO3Mubsu2zLQ5UKK7CXeBwHOt\r\n5ZOiYWi+bGhdwG389tUtJYapLVlqoNxKXE9HkOhOt+Ikvf4jvb4mWf6lr/M5\r\nOJnRIeyD+enGf1LEpdJNYn8QcW78cVv1HBcUCPdVGNuKdDS7+FqcKryiz/uI\r\nGXqdaPOS1nVpjkP/NN6Cbc1bFHs0A+RxgaD+h5YEzyuFmh1W6Ju/QSP5i6ur\r\njiIreC6/A5x4GNBnOYzTN24BNF+rQJv45LWBlkkQ43IJfMyBKxa+eRbnOs0t\r\nNNO473b3Xw1QYxuUvliM1CbIZophHgA/shgwyqTu0Hcuw3lJPOT0awsBiY5p\r\nc800K4uHt/zpkQhuVBxQA5q97+zVLKjA13Zepi2QRZ3oGOPMnsaOZxeQUY1Q\r\nDLQApJ2Xuchv7WmZMCypzMq09qiUHC9LRr325L+Z20woNTefAmZgNVbVUX+S\r\nyErvMMwAqz9sOkREBZ8SCclNj2tg30usECvAqHvntjZ7nOegBkLqxGIfMaPX\r\np1Laa/2oOn5lzpE3x4zW1E+f7AvsmntK/ioFIs7oyhWUqOHcmf34fi5Wbc6r\r\np5xANteDvygiudstm6HY4rqtVCu0p0p5Vb7i+6DJtvI5uZ0o/ORtfar0wY99\r\nmmwUuTI5UkPzKAKcjsDLIUAN5Zk+ELmQzX4=\r\n=l3Co\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button/styles\";\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nThe `mdc-button__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused button.\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.**\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n**Note: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.**\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button--icon-leading` | Optional. Styles a button with a leading icon.\n`mdc-button--icon-trailing` | Optional. Styles a button with a trailing icon.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n`mdc-button__focus-ring` | Recommended. Indicates the element which shows the high contrast mode focus ring styling.\n\n**Note: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommend always including it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color-or-map)` | If a color is passed, sets the default container fill color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`icon-color($color-or-map)` | If a color is passed, sets the default icon color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`ink-color($color-or-map)` | If a color is passed, sets the default ink color to the given color, and sets the icon color to the given color unless `icon-color` is also used. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color-or-map)` | If a color is passed, sets the default outline color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"The Material Components for the web 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/density":"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/button_15.0.0-canary.313a1326a.0_1671013743280_0.1971366685497049","host":"s3://npm-registry-packages"}},"15.0.0-canary.a69c14e10.0":{"name":"@material/button","version":"15.0.0-canary.a69c14e10.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"bc30e29aff012fbcc64cf086f4075029f547a41a","tarball":"https://registry.npmjs.org/@material/button/-/button-15.0.0-canary.a69c14e10.0.tgz","fileCount":40,"integrity":"sha512-csMnGoaRKO536IsJpm4JYK6Wn0NmZ9rudsFPRodk9jeCBd+zTAnHLI74AFAzE9cedbisVbPPFmVaJDV23X4NRQ==","signatures":[{"sig":"MEQCIHmiGsQ6EKhGAWKeGJu/Ktyk4chRAMJh7nhR/DLVC3cWAiB8PnYJJeePyKqXBsPe6Jv24qBOzBT9M5JtBSDSKhnbEA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":646223,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjmbFPACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmoi2Q//W/sRyicIiUn3RQIzddfAaq9fnDbn7ldAJbOfQ3mSGIcOGsHs\r\n8/HqMH6WGa0s98QwcXTJMsC8uW1BHGNFOKueCprIwvLJVs2TM9MsTMVNK3b0\r\n/l9eMJE2zR0P+/VKc/xqUUmGUNGF6OD6YW7MVzPznjOplbxALZQPoHOK9Rm3\r\n1orxDI5V4othgF0JudmGtu60GaY+AbbsPfxNz79E07yx4J3t89SFTuFqu0Hh\r\nA0p+zs95IZgLWBXkuJOJiRiFW9YLoAR87qlV3xGijFVRl2MWXG5bQZNUYvGj\r\nDHxMajp1rAlulIIt/6GBDGIJk6I8qmuIXVZs2gFRoCXXhxiQtfAVWoxFE8Jb\r\nvrgixVvbKY/q6rUZjpiLig3VD///GNSmqq3gRHnjaiO3+20quNWkzoma9v6z\r\nyZwrF59YHeaQkQyJMgE+wqKz6FXwhq/Kw3f9+FpkALOVunJUDhgrygR7U+g5\r\ncduNdcju6DFFeHBCWktQeESE+HFbMylFLHKhJClZnVamkQI9wWQf4PVUxgwF\r\nFiTfJL4l9BsmRbL2VGlKBYRIJjndCNseE+QK1SbdYclRZaRSBbM2cI6U8t2/\r\nElo1bzQ/ldSglQ0WWTRwvuv4G2diNeBYpV6BBZM9uhXZHtA/gje7ERlv91jh\r\nwEvO34s4PZlQHPNCekE0JTWQgSjXy2tNZxk=\r\n=pl65\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button/styles\";\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nThe `mdc-button__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused button.\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.**\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n**Note: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.**\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button--icon-leading` | Optional. Styles a button with a leading icon.\n`mdc-button--icon-trailing` | Optional. Styles a button with a trailing icon.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n`mdc-button__focus-ring` | Recommended. Indicates the element which shows the high contrast mode focus ring styling.\n\n**Note: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommend always including it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color-or-map)` | If a color is passed, sets the default container fill color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`icon-color($color-or-map)` | If a color is passed, sets the default icon color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`ink-color($color-or-map)` | If a color is passed, sets the default ink color to the given color, and sets the icon color to the given color unless `icon-color` is also used. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color-or-map)` | If a color is passed, sets the default outline color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"The Material Components for the web 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/density":"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/button_15.0.0-canary.a69c14e10.0_1671016783289_0.40241826579582196","host":"s3://npm-registry-packages"}},"15.0.0-canary.f43e0ceb5.0":{"name":"@material/button","version":"15.0.0-canary.f43e0ceb5.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"aa4a98af21fd2993206afb70cd9111724cc409bb","tarball":"https://registry.npmjs.org/@material/button/-/button-15.0.0-canary.f43e0ceb5.0.tgz","fileCount":40,"integrity":"sha512-MLP1b21IeLaWe5ogg9SLFRJjVChNM8r+KtYn0/aFcaws8ItyMMWiFpcztBnyB5LELQbvYvHrsXgDkIhqc1Gd7Q==","signatures":[{"sig":"MEQCIFF7rZaFYU1U1zfU5BGdMlruOfh35d+F4cNTvofeizx/AiBADpSAM6ycsB92MqKlIy2tWfDORxGrI6cpVJnatY1eXA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":646223,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjmf2VACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqEhQ//aRnwHqMHss29JYQcbLMZeFjO2TjwX+w/qj4vvZJjOlk/ClEx\r\nPDBim0EQy/Ixv7BXItczKISf+VweRLoQ80qfLHWANyRAVBATIUwG5ewxyTPG\r\nrsUYve6rgnDNjxSIDgpCbbclpjbEdw2IgcHM1WG0yWxsYYN/9NESrEoJ6DAN\r\nHr1+dPPBMeg/g0y4eDVvHZdUPCQIwLLWJFDXUusC2sC6tQmmdQ/yoSZY1qdq\r\nY01zghZBgIcK9ralaW1eoJ8OJHQNdkkg1c787AN7z8EQCgvAJOJkCEeZKcPA\r\nQhrnIOfiw6QYkyp5NnG6Vd5sws0/L9uS5VzvHsLq22vbbl5yYew/bZVrSqGs\r\nM3g7d5eKicqGQCMfmtokJZbUxQZdlLulVQqJ4HaGRLrkheAYMgmyN2MwhPbF\r\n1qVRy910LpC737WdcyViwcUgfZNMkCWi6Tr4joJzSq9TOIqZxwt+leKSl+LO\r\nrY/9AVqVmgHiMgc+j+fbDY1LKDkvt//Ro9fW5MhkDAiXPwl1ymlZ3hXz8r7T\r\nUlcFK4cmicOMowWhJhQpk1E7VGlVwLX8RSh+KWqujfn65Umyw/NzRgzN9PIw\r\n1h4zbiBwvZ4bSXlUXM71RQTrXyrtm4EsUaj3GkQR/cNKpRBW6yTFhK4jcYeY\r\n5d08Aqv2WSECpdKukOXI3h79rgr65pNXqlM=\r\n=DFcu\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button/styles\";\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nThe `mdc-button__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused button.\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.**\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n**Note: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.**\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button--icon-leading` | Optional. Styles a button with a leading icon.\n`mdc-button--icon-trailing` | Optional. Styles a button with a trailing icon.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n`mdc-button__focus-ring` | Recommended. Indicates the element which shows the high contrast mode focus ring styling.\n\n**Note: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommend always including it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color-or-map)` | If a color is passed, sets the default container fill color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`icon-color($color-or-map)` | If a color is passed, sets the default icon color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`ink-color($color-or-map)` | If a color is passed, sets the default ink color to the given color, and sets the icon color to the given color unless `icon-color` is also used. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color-or-map)` | If a color is passed, sets the default outline color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"The Material Components for the web 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/density":"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/button_15.0.0-canary.f43e0ceb5.0_1671036309132_0.9724255293907229","host":"s3://npm-registry-packages"}},"15.0.0-canary.34767110.0":{"name":"@material/button","version":"15.0.0-canary.34767110.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"79f9c1e96dd94837a5ce2584d12ed1cd04989723","tarball":"https://registry.npmjs.org/@material/button/-/button-15.0.0-canary.34767110.0.tgz","fileCount":40,"integrity":"sha512-EjbqvmtsP9BukLhp149coEz20w+VaQM4oGWCN9cOzDSKD5fXRLqBU0gLbusvAps3EPYD0jtcBx2JFdhRiIO3yQ==","signatures":[{"sig":"MEQCIGPv4obSUWvJuiW2y1P4nZIinL1x92fdnY79nEg7c/6uAiBBZEqDS/v/EkOKMZnUg6WMIUFQ3ir4MFOsHWCgNoGmqQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":646222,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjmgWjACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmplRA/+OvR7eNFUHiAOOFdriVqi4Vv0nacHg+NLmlY+htxbSHEaTVMB\r\nH+nFICq/9eoqru6d7Tc73q7wq6cW+bEgRwvBTFH7EUQB9+KjocyuymTsbavt\r\nGeY+6lL9cqvlmk14U/K+m/yr1mEsR62rhzZgipC1nwI0PyjaUWcOONSI04HB\r\ngALsBiZFBJTIrNDWdQshjCTZ8lRVncdfX0F63TGfBr9BDcF/VT3oaDb0xPde\r\niMcGu00s6SMJFf9KxY4aVpgWt4N7oB/ktmLBS5+mI1/CQl8ds8RKjxYmQlWT\r\nquHVQiy9B6x09+oUiEVreo05HZ8SabxsTMUC/zAWbUVcN94pz+q50iTI84i/\r\nmIbkLwCLCTTKvLMuuVLEyMkPawvG8VNr+Mj94F+HGm4dD5Sc8PkrZtoj1soP\r\n8cMXd8IlD8XhfwbhhP4DpFkELLhLuhmqcNMjYhUZla1kviGmFI6K16AI1xOL\r\nIQOTj+ciNQNAlPn9IoJuapvDLtXGihfKYT2epAivE/BFulEBPnzjZ9CqR8rI\r\ntAY+nQMh5j9ZsJj4A5b62Q+xKNEYmQl+StOF7cdoF38V8c4qGDjNuOe4c+RE\r\nqdk0ACyT6BEMA8sN5rVJM2E9y8Z+wvmjcgHCfkQe96JaIMeZV98IGqbC2W5c\r\nCF4JNlmTypDE5tYDYJzfWglVHf5YBuWH/oA=\r\n=r9bt\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button/styles\";\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nThe `mdc-button__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused button.\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.**\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n**Note: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.**\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button--icon-leading` | Optional. Styles a button with a leading icon.\n`mdc-button--icon-trailing` | Optional. Styles a button with a trailing icon.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n`mdc-button__focus-ring` | Recommended. Indicates the element which shows the high contrast mode focus ring styling.\n\n**Note: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommend always including it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color-or-map)` | If a color is passed, sets the default container fill color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`icon-color($color-or-map)` | If a color is passed, sets the default icon color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`ink-color($color-or-map)` | If a color is passed, sets the default ink color to the given color, and sets the icon color to the given color unless `icon-color` is also used. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color-or-map)` | If a color is passed, sets the default outline color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"The Material Components for the web 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/density":"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/button_15.0.0-canary.34767110.0_1671038371671_0.7204588358284316","host":"s3://npm-registry-packages"}},"15.0.0-canary.1f99f3c50.0":{"name":"@material/button","version":"15.0.0-canary.1f99f3c50.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"315267303b7a2afe5a6ae1f7b3cb77c6a432efc3","tarball":"https://registry.npmjs.org/@material/button/-/button-15.0.0-canary.1f99f3c50.0.tgz","fileCount":40,"integrity":"sha512-gWnv02F/Kds52AVsxtt8HyrIs/tVnVoucnuAqjldoG6J8IaiTN1c5woI1ogaiQUtnQ+pGe/Vps6qnVoyodKW8w==","signatures":[{"sig":"MEUCIGDRpSXbedFOu4FJdNYZgRDVf8wrJceBQj/lxH2l7FDeAiEAgNqN8PpWmHbZ08aUnS56Eg5CSWKCcdHEjtiGy2200WY=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":646223,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjmy5tACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmo2GBAAhOq2dvBC4icgVK1VGB96qJjfUJBOxyiKzT7Dseot2zqHfc6/\r\nmVYnJC8OY55GSdRf3PaL7JoySD6bGRHmUGmNR7SAv8otjn4L+RiqrPti4qOM\r\nZPv0Aiajj014jRSIXXdW9N1RLjNZklLO6O5dPs2RpNpIDJ3emfpXqIIGdm29\r\nsHQi35i6RnMQdVQyrdkMBjUo60BOwmS2mFx2ZCKByqLbwqo289YJ0sYqp6dA\r\ngp6easlNF8u7BT077moicD8fzNhFxBivqc6Yo1sGu5qW2KA4j4N38CiUsr0T\r\nRFR5eEvGQpCXY6lHf5iEHpW9yXxVEuhl3FfGQz+Pvx5jb9ia7eWkCQQ5UtKV\r\ndxrRZ62txsixh1zjnirOijPXjqcmEKh9DL6WV2YMkTVCfxUDzB3cy8dSO/69\r\nn4ej577Rkjf1BHZ+iRMvqGTGP2xXM5zUXGHfK36nWVtjakljtKWuJgBmRTyr\r\nC0SUlh0/ahXUkwkSdKZ/hU/UlRtwB58GLPxc95dJw2iIZmJc7ln47CX/KO0F\r\n455HwFrnbIqk4xOZpHER50QDUZ+GGTwInmwUTf72GiWGfPYJbevaAL0ecWwf\r\nStdMJPyr20+Y8mOcY6ppYZ4RDJhDoquu2S3CVLyxvYGWiB6W79LUodcoZLI0\r\n++P2lDnXTSAh2ofUfSad+95ZdxH1/WEYI8I=\r\n=AS4p\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button/styles\";\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nThe `mdc-button__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused button.\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.**\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n**Note: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.**\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button--icon-leading` | Optional. Styles a button with a leading icon.\n`mdc-button--icon-trailing` | Optional. Styles a button with a trailing icon.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n`mdc-button__focus-ring` | Recommended. Indicates the element which shows the high contrast mode focus ring styling.\n\n**Note: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommend always including it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color-or-map)` | If a color is passed, sets the default container fill color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`icon-color($color-or-map)` | If a color is passed, sets the default icon color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`ink-color($color-or-map)` | If a color is passed, sets the default ink color to the given color, and sets the icon color to the given color unless `icon-color` is also used. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color-or-map)` | If a color is passed, sets the default outline color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"The Material Components for the web 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/density":"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/button_15.0.0-canary.1f99f3c50.0_1671114349345_0.876454049537662","host":"s3://npm-registry-packages"}},"15.0.0-canary.cfd69490f.0":{"name":"@material/button","version":"15.0.0-canary.cfd69490f.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"5e2d1bcff4b3083a918483d9649243ef9b728d91","tarball":"https://registry.npmjs.org/@material/button/-/button-15.0.0-canary.cfd69490f.0.tgz","fileCount":40,"integrity":"sha512-gob5gdYuxCg7BTobR16VNLli6776yVzkUUaP/ob32a2Bd5HNgkACICX3jChc+b7yuJk1566U5+c1IkzrSL7vdQ==","signatures":[{"sig":"MEUCIQCETWwj1hNNBGVa98WNMXcJ2zMJUgsrC63MXqhghcyfbAIgNQFBm/fkI/3Tko6f6XJQ2fVGyJy4C/OQ6pjjPTDnqzI=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":646223,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjnNBUACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpeXw//SMTBJNNXNbPMWqspy6uGk71AcWSVHMFctIWnD1k006ou6ZAl\r\n8qAV6/vCfvHLddMsm6acrKA7UDphElZTCQcdPZEEI6Y77RGlcz/OGN0cX1te\r\nFwraRxMTBKExH6yfRcYH5/EM4prwNu0b3Tbuw/n0wP8j7G9lhpgLByG9rrIG\r\nRSkMcr0KejKGiL26wWlD6a8dZRZyOsJ/40JshyNgMGrsQnNcctLDdDdQzbe1\r\n/IQwoUxU1XugsokSvDQJeAJ3dcjc1lqBEcTBY2RvoJ/OjRRTSpstIe8QuiYg\r\nvplhnh7kmyycFZYIjf+xvqqXfV+fGWKV+XJuh9RbCaU8KNGHl23csARM5YFT\r\nmlDfo9CBDWbLykdXnJVUr7oD1rpbzocQBZxsOBVem070zpe3TcFvG37Pb21A\r\nTuUMjg5KKzeL6esOhAk+HKCuR4F3Uae8XHlLPLimhPHBY+EVy3rmxQ62ePY5\r\niUeJgZV93RGAyxXCHE7kZmEnd2FSJcaVXh3nki6YhAZJy0esXdaF+8qm31Kd\r\nhZ1e3RFL1v05YdBsrmozVefZy9+KULYNvtbnJnpmVWYoe6oJ/3CFgystIMiJ\r\n0vp3WBERJ2Ane1bCmQIkjI2CcVqga00epRVLodY9S4v8gCKGI+4sfkE1JzHI\r\nUTdPp61y2doSSD+gpAuBUpW7emqvgQCpEGU=\r\n=Ky/Y\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button/styles\";\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nThe `mdc-button__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused button.\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.**\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n**Note: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.**\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button--icon-leading` | Optional. Styles a button with a leading icon.\n`mdc-button--icon-trailing` | Optional. Styles a button with a trailing icon.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n`mdc-button__focus-ring` | Recommended. Indicates the element which shows the high contrast mode focus ring styling.\n\n**Note: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommend always including it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color-or-map)` | If a color is passed, sets the default container fill color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`icon-color($color-or-map)` | If a color is passed, sets the default icon color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`ink-color($color-or-map)` | If a color is passed, sets the default ink color to the given color, and sets the icon color to the given color unless `icon-color` is also used. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color-or-map)` | If a color is passed, sets the default outline color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"The Material Components for the web 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/density":"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/button_15.0.0-canary.cfd69490f.0_1671221331969_0.7488982551399379","host":"s3://npm-registry-packages"}},"15.0.0-canary.94ad8d986.0":{"name":"@material/button","version":"15.0.0-canary.94ad8d986.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"f78478f5c026b9b688b2d8b118049e4c083a1abc","tarball":"https://registry.npmjs.org/@material/button/-/button-15.0.0-canary.94ad8d986.0.tgz","fileCount":40,"integrity":"sha512-8uM5M4JtP4lLXuY4qTjWFA2ZeF3aIyRfbzh37m2+8VAQ9B94pP8mRlwCQaJOyh2vJ07s60MZh0lXYvez/DIVxg==","signatures":[{"sig":"MEUCIHoyYNQ38uCMvP8EprY8VoaxLe542GMr3pz7RXectw6AAiEAnxrEYI+0a9hcITVzek2EO7uLHJay2NgtMU1Vm9282KA=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":646223,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjoLsbACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmq5Gg//fVY4+eDKOeZ6k4oj73ymoNBhoVby4gbcMdUuryPII5r6iu8P\r\nVCu/1kMR0V18vHMrUQ+c8JTIKPRNjPrZrwOIXElhNAIwRfJu0D9s48jVh6n7\r\n0Rj6HYgY7imapS+68A1zi1qILV5lBLPjlf6yL3OTlht36xYwD1He9eJ/DV1B\r\n6J8kq/cY1ekX6XR64c9ouZtzP9Z+4z/b6cy3IjYiebgAS81IWU/IZMPcz9EK\r\nlrGTVnXDGBwmvBKgqyb8miW+UZ0PY/GkJfbp0wiCblcyHgTVvyrNVz77WUz9\r\nPWXqnQaaC4scUtBU4fv4YRaM8r6rYj/x/pxCmQczslUMTVHBhoHVWAc7IoKd\r\ncY6EayfJNNAgHwkBJyQCYgPQwYUwxNvdnuDo++1P6pDdppIg8kuSgRC1sPOF\r\n9oaK7yFQGmok+o9EtlVfCKSUjGjPO2cffUOKae5XLqT4mdO/XwnEA/qfR99l\r\nsixa1mLXc18L3x7yDxtetAd0CtVYDXpWfdWQqGsEAuyI01fO6nYIt0A/kowI\r\nDHV4RrHOXbocfQffxmp0RkvOlsdNbNkhSBhVQ1DU57Vw3zGbwABqkMB8akxM\r\nxHRwIj1S7sLPQgTEJiHQQRRaK8Z6VyDeL39YjITBpPkVN0kd7g9GGLnunXIo\r\n+jNzlxolAIdxiIunUCIldAwEYI3Gg26yld4=\r\n=GapZ\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button/styles\";\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nThe `mdc-button__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused button.\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.**\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n**Note: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.**\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button--icon-leading` | Optional. Styles a button with a leading icon.\n`mdc-button--icon-trailing` | Optional. Styles a button with a trailing icon.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n`mdc-button__focus-ring` | Recommended. Indicates the element which shows the high contrast mode focus ring styling.\n\n**Note: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommend always including it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color-or-map)` | If a color is passed, sets the default container fill color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`icon-color($color-or-map)` | If a color is passed, sets the default icon color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`ink-color($color-or-map)` | If a color is passed, sets the default ink color to the given color, and sets the icon color to the given color unless `icon-color` is also used. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color-or-map)` | If a color is passed, sets the default outline color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"The Material Components for the web 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/density":"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/button_15.0.0-canary.94ad8d986.0_1671478043340_0.45967661897671475","host":"s3://npm-registry-packages"}},"15.0.0-canary.604264203.0":{"name":"@material/button","version":"15.0.0-canary.604264203.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"8f4a0b5ceb8ded9a4bcbde069d43f26deeac2222","tarball":"https://registry.npmjs.org/@material/button/-/button-15.0.0-canary.604264203.0.tgz","fileCount":40,"integrity":"sha512-deF7nfmjWjVuIBbM/GPMyeul67iqkhta5H3ZsVf6u9rlPoxTtFD9IMlMHUxUFUiCmN0s0TU8K0Vrcb0Qb8r10Q==","signatures":[{"sig":"MEYCIQCkOOa61pgNO7TMRGMoojv+dY9ZTq5Z3TEcL1tOwdAikwIhAMToRlDcHS8Rzjbq5iJkl68l9hOOH0RVUxe+zyWTfPKk","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":646223,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjo31zACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpAzA//a1lOr2LXVdRIU1rJ1h+jljS3XvLvk3eo4YKI1yl9Sw4FVYf5\r\nxNMaFUhtIo9WBMO1hLSY6JHuXJ3lSr47Q3tENWHrKtyz3gcrWQMwD+bOxCNw\r\n9QoUG77Pt3j2ypzsoEBgDRNwxHSnURfcP70dJzZ4nnwDTLQTSvwW4+JIEE47\r\nYfmsZCuFkiID5EehXG68Tk0pt+qn9ZKQKg0YMIesmWXCqpCTrSQ8AWrNXk1A\r\ni8gyHW1w2PuP0pwxlF/9v41+fBGio+ntdalj3uskEP4UFbITSrqMqO3Rw7iB\r\nsZ6VitBghvkUiNZL8tRLu2gtr8STlafSUF0f+F2jiO/n8tVgCf/GLr6siB7a\r\n9aiLpO2Dz2kTc2ITbBo6X33JWdfmSon8tDLjcKBcpH3FtrGKsnA/atDjw2R+\r\n7PSanTGeBik29CYUITUlDEgkYj5QtHbray37v3g33rto+/4TmNxdbE6yA6gp\r\n7EmfdN6Wdi8ReDKkYGUYFDkA7atmKhmnIXfnNlJ6s2G78i932MIMM4aPxrxX\r\n+D+cXZnybA0y/O5INNotKHLvZPocx/P6ekkZiPJNgWQU8M6hLQOvrEByLrU7\r\nYVupQllSRTKxrKA8S6Mfv/mgka8QmKfMChWpXsy2jjJLWjD6lcJrkoYuUrr0\r\njSmdi3Iq1O2TjJ7eiWcJQNd6KJoWJLo1arU=\r\n=QK4T\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button/styles\";\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nThe `mdc-button__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused button.\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.**\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n**Note: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.**\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button--icon-leading` | Optional. Styles a button with a leading icon.\n`mdc-button--icon-trailing` | Optional. Styles a button with a trailing icon.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n`mdc-button__focus-ring` | Recommended. Indicates the element which shows the high contrast mode focus ring styling.\n\n**Note: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommend always including it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color-or-map)` | If a color is passed, sets the default container fill color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`icon-color($color-or-map)` | If a color is passed, sets the default icon color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`ink-color($color-or-map)` | If a color is passed, sets the default ink color to the given color, and sets the icon color to the given color unless `icon-color` is also used. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color-or-map)` | If a color is passed, sets the default outline color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"The Material Components for the web 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/density":"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/button_15.0.0-canary.604264203.0_1671658867114_0.5651085969157028","host":"s3://npm-registry-packages"}},"15.0.0-canary.85bcff6af.0":{"name":"@material/button","version":"15.0.0-canary.85bcff6af.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"281a4c8fdddb164a2a5589341e2434e1dca36f96","tarball":"https://registry.npmjs.org/@material/button/-/button-15.0.0-canary.85bcff6af.0.tgz","fileCount":40,"integrity":"sha512-dh++GcwYIon1IwAUripWcPwUcMKkd6ZHzOSzyYwmdy6aOQRQzEUt54T6x86dyYIXfIJXDzUoXSZGOIOWcqK06Q==","signatures":[{"sig":"MEUCIASnysuCK/QctSpmmOXGpdDVPzLtZABi3urhzrcGYMthAiEA/vHOs7LARqrAL7Eq/pSp1zc0uxIBVcWAJO470KK430g=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":646223,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjpDC+ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmq+1A/+KbEUggS6q/Yf/OqsvLPcqQ/wVtmn1yqs8dT7iK4j0as78yAb\r\ng+qfnZJUKVTzV5LRWy6ky6k3yQS2b48H3YMGt93rFExljl3TRGAr2fjzZr0/\r\nHkfHRq2SCOchKjeUUOUSTm7L+KMYD0FkacoxQ+4DoGlzav1eXi6PwnkeVLGd\r\nYtsn1rY4hL2Gv3Nn1hcnJqIU+sOop8YD7ZUz6luCVB5QMFwPsnCwYt8VmN6B\r\nq8HhOJSsEcm5G061SsAlmFkeBVpLgr1buPfqajR3OxNPmDmpEOMsrorLAbtE\r\nrXJ6nEInwzeitkAXFCMBWQAwYaNWLWeHvvlg4cdzTRmpWDi9mJsvQcHHlNbY\r\nZCYxYWCZzzeE1mGAKk9sSQIa7LRg6e+AKjI0/7uiFAXum+cW8ebiSLkdT+C6\r\neJ/bgdqk++btV7qiVbeM3D+tFqPvdC3PV3X3Sl0UsRj88anocwGgm5vTxLGg\r\njP46T7xUc/pd5KkSo4S0bOeAsXf0d5ZEeXqLhQ9rs0NqiQ/T8JsE2mk33SLe\r\nfDU5rED4UGXtKRJgSvefnMmNZxH2+Yl4lJzFArEzCIJ0TILkJaQBj3KMVuAD\r\nSthJ8inoDgJ7ZEfbD48mxS1xo5ulyAn51UykektsXZovGWI6o9hYuN82ztlV\r\nl3zCRQufSH5YM+b7G5qX15H9WfRo/MaqtBA=\r\n=amQI\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button/styles\";\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nThe `mdc-button__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused button.\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.**\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n**Note: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.**\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button--icon-leading` | Optional. Styles a button with a leading icon.\n`mdc-button--icon-trailing` | Optional. Styles a button with a trailing icon.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n`mdc-button__focus-ring` | Recommended. Indicates the element which shows the high contrast mode focus ring styling.\n\n**Note: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommend always including it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color-or-map)` | If a color is passed, sets the default container fill color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`icon-color($color-or-map)` | If a color is passed, sets the default icon color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`ink-color($color-or-map)` | If a color is passed, sets the default ink color to the given color, and sets the icon color to the given color unless `icon-color` is also used. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color-or-map)` | If a color is passed, sets the default outline color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"The Material Components for the web 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/density":"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/button_15.0.0-canary.85bcff6af.0_1671704766312_0.8035176398826387","host":"s3://npm-registry-packages"}},"15.0.0-canary.ece3e8d21.0":{"name":"@material/button","version":"15.0.0-canary.ece3e8d21.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"57a1676d7282ce142160b92baa25bf7d21764dae","tarball":"https://registry.npmjs.org/@material/button/-/button-15.0.0-canary.ece3e8d21.0.tgz","fileCount":40,"integrity":"sha512-X9H4LOCrYnTyQc/uIqFDcPEQnOsQ1Vx/riEHZI2yRK3mlD2XRjHmFu6LxRM9+CGU4NWNqUNvb/5ckLDdBelzkw==","signatures":[{"sig":"MEUCIQCAKfER/fo9/lrBy66Mm8QExfB1mrJeOwjfCFRFjynkCgIgFFKHFkgqe1+LPGaEw7bS1tuXRayMwZO1b1mclUhGCH4=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":646223,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjpI/9ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmregRAAoVZo8oeXNffEg6IsDtXL97k6B+atcECHcUT17AyEdO115XUC\r\nQ82Fa0GNLxC6fZkoa33tU26URc2vcmCoTQZdqH+Wzl0eeFrqfHzlVojvXO21\r\nzr1Q4+/yl8UEMz0QzNvA4ZE1WBx4Na8bsbbz9vx2NCDCPJJnJ3Q8aVZnPTI7\r\nJFQOf8ppbAt+noJpE89a4PXbfSn923hLNt1u9nzTYxBLs9nSOII+YxMaxb+3\r\nHJd2FeTdAk2w+kGpV74ZZ5gwfBlx2sSWsvhF+Tm6PKknqRYtBt6TUfNlpkGP\r\nmt1GAJoFTjY+Y63i5rfFqNPkQgqOmmZR2z0amq2afYZhw/3Supwpaq0KsWN0\r\nomkUzCa8OC2WHNJzoi3BjBuO0sXhozbhsgSqnJVnRbfqYu5whuWHvpZZFhBv\r\nATMba/JDzbHhQ3RN9sRainAl/0RAxyKY67kHsISUQB3GRtN64oW8vsmmJGLq\r\nx8wRvHVJpqgHkT8alJ4BVIVm/WPMxwIcfZNw94fDmVZgqXgwjBugI9qQ9dZV\r\npUfwNiUt7gi97aHItq2svbMu9dcPg8Iqe424KJWQ87kEAqClMYlx4YzDyRzx\r\nxIRS8s1X0i/D9S7Tns3NM0KtaYqROeOG5xLb1SGpxA9GmMhfELpDdHrOU9W3\r\nznvkUa1fjJqPVlvUcmXRYkDRnFvJIlmUFIU=\r\n=mm1l\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button/styles\";\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nThe `mdc-button__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused button.\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.**\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n**Note: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.**\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button--icon-leading` | Optional. Styles a button with a leading icon.\n`mdc-button--icon-trailing` | Optional. Styles a button with a trailing icon.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n`mdc-button__focus-ring` | Recommended. Indicates the element which shows the high contrast mode focus ring styling.\n\n**Note: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommend always including it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color-or-map)` | If a color is passed, sets the default container fill color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`icon-color($color-or-map)` | If a color is passed, sets the default icon color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`ink-color($color-or-map)` | If a color is passed, sets the default ink color to the given color, and sets the icon color to the given color unless `icon-color` is also used. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color-or-map)` | If a color is passed, sets the default outline color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"The Material Components for the web 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/density":"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/button_15.0.0-canary.ece3e8d21.0_1671729148974_0.1255688634882004","host":"s3://npm-registry-packages"}},"15.0.0-canary.278ad53d1.0":{"name":"@material/button","version":"15.0.0-canary.278ad53d1.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"2056b2f39eff7004d7a4ccfc2f8dcb2eca1d7c88","tarball":"https://registry.npmjs.org/@material/button/-/button-15.0.0-canary.278ad53d1.0.tgz","fileCount":40,"integrity":"sha512-XpaZNPtBeqQHktUUe/r1u3+2sKCOM7YqmUTTsvhgYxpuP7Wwqpe67sgzUV4wC2gZegiRfJRj2pPm3iHkEx02yA==","signatures":[{"sig":"MEUCIQDLo+sdjN6L/3DBhZiUaZrn0JdNSJvKx/2Ff7lH9w5duAIgcck1xTuOO3ROXHMb6D9jt1hpEsYTusCNg4k1wYqTDzw=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":646223,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjqyXSACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmonohAAly2dMPQAdccsgJU23fQhQG6Y8presjc3pDHvTU3I6ZuWPFsf\r\njTlRzS3fF89D8AE6UHKZ1Xu3g1/5sN/Vqr1Br7cf4wisNibcIDtjNjEHgGmV\r\nozsuxJ/ew0JuFJLGN6J+658nnBNS7nG0McTUe6RjGxFYZfGDWSf3TuKiJD3B\r\ntjfppsQZBTurZ1ZV2W+D0cFe7fVFVHfAmu+F5x7I8hmB+W3z79bemdDNnFfl\r\nZMT4YXuP+JvKjohTaD4g2nBhUbm7SqGlHVPHl1vmKBQTFezBBnkbQdZ/4MgY\r\nu1lh/VeHxgk3BGsd+ShPRFl2ILjJi1QglFjmN0iyMPAKcrbCU6EELw23dF/0\r\n+PNZQUTmxVZF5LS8ICPC3Chx4GyoZPgFN2/QXTPprFmWY0586Vc49Krs1ymp\r\nxbEns0gpVpvo6kzInoq69bzDewAyvMiv6ZTHgF4CvtJdTZrpIQYCFvUXufjs\r\ntG4wuS3UwqRtDBctTgLJJIHvu8MzWdVQgksIT8Y5uFhlJgwamvb4UqhX03v6\r\neIt9dNTq9GEAkEC6sLcNOo7T0Cqj9xsbF7OQMUyVZryHLgcqkBToqPLxcjrm\r\nQRs+3d6IlbhZ7fPz8qv17g4olKgbGs54BgExetjTb5V0PVjF8VFNnFw3Iqsm\r\nSqb85MnrH7qF4TXo0o5jTgAYOKcY3bbwKTw=\r\n=UVJl\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button/styles\";\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nThe `mdc-button__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused button.\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.**\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n**Note: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.**\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button--icon-leading` | Optional. Styles a button with a leading icon.\n`mdc-button--icon-trailing` | Optional. Styles a button with a trailing icon.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n`mdc-button__focus-ring` | Recommended. Indicates the element which shows the high contrast mode focus ring styling.\n\n**Note: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommend always including it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color-or-map)` | If a color is passed, sets the default container fill color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`icon-color($color-or-map)` | If a color is passed, sets the default icon color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`ink-color($color-or-map)` | If a color is passed, sets the default ink color to the given color, and sets the icon color to the given color unless `icon-color` is also used. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color-or-map)` | If a color is passed, sets the default outline color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"The Material Components for the web 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/density":"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/button_15.0.0-canary.278ad53d1.0_1672160722012_0.4772938655347305","host":"s3://npm-registry-packages"}},"15.0.0-canary.a7d8389e1.0":{"name":"@material/button","version":"15.0.0-canary.a7d8389e1.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"6797af3bc9b6fc10de0f3f4ed04e35c619b47368","tarball":"https://registry.npmjs.org/@material/button/-/button-15.0.0-canary.a7d8389e1.0.tgz","fileCount":40,"integrity":"sha512-q+stK6yAPHUMhFozXWtlhWRRrT1UnM1NoDjQnc7iDFJvmUROzAXFilKXx7dnQ2mrrpVEPDyRkFQyYoHfQ8LArA==","signatures":[{"sig":"MEYCIQCn6l6pHmHYNkPjqYREP/BKi0eIfZOo5/L00+yZlb3c4gIhAJjDU/5BKbk8fMXoC3GIVO3bUICIInCzjBVdru7MydgW","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":646223,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjq0GpACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoOaxAAhNqJqro/Xw6VcGiwqFVfWMGRBBtiRTuz5fO2ufZ3Z50U/aV3\r\nVlLB2hPQ7MpyuF/G6l67ocGA6N3DDhjnoDnFWxcbJklyVFiS4BlsdAqIyqzB\r\nx/xlWNR5Atjc7cVO9ESmwcDmyXk8M82YfJwvfDw+ZziOJx7hoHVw9hPrJfEW\r\n7rrttcEa2nv9ysL2y5+h5mXv160hYHEUoonRHOQBszFKYoINNRW0N0CBKaHt\r\ndkTZCOo8IxcFRJPH1I1VGWUfcx4EFVE6Y6megSGgvGhzYecqL0D3CC9OCdfZ\r\n2POPuHTh+U1ELsArvzK91pMLB/yBAMNmvERaCl3CU5M7jzX0hNJcmByoee14\r\nmaQwq3RBsRm4zX1eAxMKUqVDEHfi5I8PmN5DsHRUyCmM2dyE0EHWthr540l9\r\nPLi9t+r3pyEx9ZhYjyMIyx8RpAcJIXUhnJIhQOyedw34qqqAVwYxGBwKzKOM\r\nHiA3xWYVPWF30JBd59zE3NTaZrvJ+PAVxckSlGnUWPWJwt6/XXn+tXay19lq\r\nSgqXDF/vtoqOpZJimr8+joSPTsRSXk6TmPLvBo0bZqP04vFdhngawDuAcxwp\r\nARYoFRImsDN9cDDjgbl7dR5zUNd+Z04aoPVl4j84RMqtknCuXnf2NdZ221WT\r\nrhZxkbXrYbnZTgu1C7FgwPbWCoNcxWAPZcc=\r\n=pLIV\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button/styles\";\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nThe `mdc-button__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused button.\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.**\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n**Note: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.**\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button--icon-leading` | Optional. Styles a button with a leading icon.\n`mdc-button--icon-trailing` | Optional. Styles a button with a trailing icon.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n`mdc-button__focus-ring` | Recommended. Indicates the element which shows the high contrast mode focus ring styling.\n\n**Note: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommend always including it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color-or-map)` | If a color is passed, sets the default container fill color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`icon-color($color-or-map)` | If a color is passed, sets the default icon color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`ink-color($color-or-map)` | If a color is passed, sets the default ink color to the given color, and sets the icon color to the given color unless `icon-color` is also used. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color-or-map)` | If a color is passed, sets the default outline color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"The Material Components for the web 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/density":"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/button_15.0.0-canary.a7d8389e1.0_1672167848953_0.17680492933659164","host":"s3://npm-registry-packages"}},"15.0.0-canary.8175d5eff.0":{"name":"@material/button","version":"15.0.0-canary.8175d5eff.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"1d708b3a6ae84f9b39ce7a55c7ee8994fadcb681","tarball":"https://registry.npmjs.org/@material/button/-/button-15.0.0-canary.8175d5eff.0.tgz","fileCount":40,"integrity":"sha512-VUTmKdMcfc47E3W2SyCcSzDMjNGBMD2vSNdCSwnNsMJqIThxbcPbmDnlv1+x86MCZW+6Buh2hfLwrEusB2eHGw==","signatures":[{"sig":"MEQCICh5cKpKT/Gop2vxPWu/Fq27GPFJo8urLuGgeKNs4GKfAiB7wyq9JmJ7L5lDpTgd41fESgI527NShiT2Gj6OcgjHzA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":646224,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjq6E8ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoEHBAAkFLZAWuieouIgLKcigIegvDdtIhuCNjhXeAFm4gIIvOFcci+\r\nUXMZjoJnN4mp8kLKdSHClIc7xjt/MumDyYwbnnzUc9HS/A6R1FWzT7Ay6T30\r\nQZSzjeKzK4u+CPA4E3K/yLgmluiR44CJp1VufA5WIo8b3L2eR2dequeHlUNc\r\nSLaFhyvBAdiejNXenHSfKQIJ/CyJL36spbcMMHeWfr+E6qHbN2x5a49ZvDCs\r\nrxxo3xCe31bK9wIinbYkSE65zoyVLjGV4s3QA1AamWQtwkpi9Ifif54BZvc9\r\nb+b1HMIMrTJ3Yoe05PCB8yulN7Jlj+xlxvrJPtFBgXUk61JiGltSzHPDA7J4\r\nTApNYZV6Ivo6StyUlw6WvSnfxvXOIVKxdqxa1qOPQlOpE/Aq7yQFdFnwCghm\r\nX3bFM9TJnmws6jUTBfd4OOKZrDt9zxbPhSOUEzreZcTAs7O+kqHbHNaGS4iy\r\nav0SGF8Vmtug+cnRkVoc3Yfrescm2INtKRPAlYcgCvwzRpHA59CSZE7YKkEX\r\nj9HOBpwcRh6HccRr0oOi0HBJE/HsaNA2Z7rvCXTTkGYR24GH9CRSjwf0yuVH\r\nqxtv5WF5Ge06fG2hVIWDtQZjpZ9dpcp70gCZOhvnJ8VOPAfo8z7BVTmCBlMR\r\nVQ3T4HUht5xLLgoILlEImGe/iVj5F72oa5k=\r\n=9/FK\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button/styles\";\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nThe `mdc-button__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused button.\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.**\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n**Note: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.**\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button--icon-leading` | Optional. Styles a button with a leading icon.\n`mdc-button--icon-trailing` | Optional. Styles a button with a trailing icon.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n`mdc-button__focus-ring` | Recommended. Indicates the element which shows the high contrast mode focus ring styling.\n\n**Note: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommend always including it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color-or-map)` | If a color is passed, sets the default container fill color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`icon-color($color-or-map)` | If a color is passed, sets the default icon color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`ink-color($color-or-map)` | If a color is passed, sets the default ink color to the given color, and sets the icon color to the given color unless `icon-color` is also used. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color-or-map)` | If a color is passed, sets the default outline color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"The Material Components for the web 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/density":"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/button_15.0.0-canary.8175d5eff.0_1672192316172_0.34966394491298813","host":"s3://npm-registry-packages"}},"15.0.0-canary.e21dcb86d.0":{"name":"@material/button","version":"15.0.0-canary.e21dcb86d.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"c2fec704aea2137b3d3ee4753261b67e63b2c1db","tarball":"https://registry.npmjs.org/@material/button/-/button-15.0.0-canary.e21dcb86d.0.tgz","fileCount":40,"integrity":"sha512-ZxLW2BlZ7ncukTmQlb7gkUpNo4YjSGsWbiJPXz9dpx05GhgntCwlKF8MTfBwAvSzYzG2lX6UNRGeSWM8Eb7pIw==","signatures":[{"sig":"MEUCIQDtzYsO+wIn0s4XoSbCmzCkx9+9CILH88MH0n7/VjLOVAIgVdPVg7ift+SlzGnmk3tcbjMvakPxathaXhvbP+bahu0=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":646224,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjrZ34ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoGRBAAg1Ucy4s+W+WZDoc4GnDNu28tfDKZei6P9crXV6IBbK0FOP9N\r\n/RDsO053lD3CoLHS2jkrlOmNpHJ7jfF09d9At9KIsq4o8kDaq561+8Ekw+5A\r\n0MHtvcTzx4RbBZL6WwtCByrVgY9pipo7+93LEQP3H6/b4H42Nw5h4vQC8Dpi\r\nWlcndvzLbUDKHtwBFQl24szc81OU4Xoa/EO08B63Dl0rkg8yLYRW0IaB6ctk\r\nN1HvkiJtEkrOcKgsJPECzFQl8UvleXwTxcrmUyGfEmD136su7mkZLY3LJ5xz\r\n1dmjHIU+vLkPXh1Y+iZMp7SZmtbL6FZxIzn6WjXNPBt859Pp6KZPXuevJ64u\r\nBxsPffH2mydhCtaGnczaIxhhg4dqBbNkp6ASMMZCvwLPTdr4RIlxH60XfOGT\r\nmDPtEO6KjivFPX+8fLU2w/j/NCxTbLph9aR7m8RObXWeS1/zGJ7t1/Tqt+di\r\nzm3jQpwBtnr2EXxXCzDrFDY/jihpwV2uR7taUFNHC4cVLuapeY3A3tmvP5TK\r\nGwzOXaBZs4dXac0uJdVskArI7kAwbE+rdxXM826xuTB+VNEI7qWSRoq0lri6\r\n8u3QyroCXGPHQyBM7B4X4j2HQORHuNZby99MBRR71o0MLQ6YDMWkh1cFX3hR\r\nZftTcrq7I0SjB0vO2nfh0tj9OQAmu3B3exo=\r\n=DER6\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button/styles\";\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nThe `mdc-button__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused button.\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.**\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n**Note: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.**\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button--icon-leading` | Optional. Styles a button with a leading icon.\n`mdc-button--icon-trailing` | Optional. Styles a button with a trailing icon.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n`mdc-button__focus-ring` | Recommended. Indicates the element which shows the high contrast mode focus ring styling.\n\n**Note: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommend always including it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color-or-map)` | If a color is passed, sets the default container fill color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`icon-color($color-or-map)` | If a color is passed, sets the default icon color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`ink-color($color-or-map)` | If a color is passed, sets the default ink color to the given color, and sets the icon color to the given color unless `icon-color` is also used. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color-or-map)` | If a color is passed, sets the default outline color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"The Material Components for the web 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/density":"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/button_15.0.0-canary.e21dcb86d.0_1672322552490_0.6688871116222468","host":"s3://npm-registry-packages"}},"15.0.0-canary.20ab6f5a8.0":{"name":"@material/button","version":"15.0.0-canary.20ab6f5a8.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"563185419f3058bbb23d3bc024bfa0715b99ad80","tarball":"https://registry.npmjs.org/@material/button/-/button-15.0.0-canary.20ab6f5a8.0.tgz","fileCount":40,"integrity":"sha512-vKSPb9xg9i+MQ8NnWOzidFygSAyzpyrKyahNgC8pnEN5cChBc5bsLmM8RjZSEFbZtFx/kSFnxf/iXfyQ55HL2g==","signatures":[{"sig":"MEUCIQDSKcyHzn2ftG8SPUd5w3E+7Y4iEYmft5Sb4N2jLHA+zgIgMZyJ/hAoMJl92NsbTUl1+LZYyzBiCHUpHbZpHP52unI=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":646224,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjre1bACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmo2/A/+OBbEVseY2p9ltO0Pwaq2XyXd18FhYepeoXqq4ES2klqEAcG2\r\nwe7tk9Rt3icDcblkOsXwo6nNq8jmG8r+RdNznVDUmFWsRd3rc52a7eIAfmRf\r\nWTc56jihv6PZeybiWryVgZQ7S5ocHXOAdFJoJTf/THXLO0bjI3IEx4aSJzeJ\r\ntyRvCK2IwHyKDN5g2Vki8wObW0N+hqQcvwjDvizEjvxa9aUcJXKmWzEYHliP\r\n1shNlVVlVdh5DwrlXSfX7MgLkNznydbDn+TD0oONlQvYAXOjP2pMP6l3hQIU\r\noSh86cgR+Z8sODI9gOFAX5H850ipAhcMviuLRnziJ6VLBMfnegfLdrsso3/B\r\nxQ6GK8+EUTTUJVew+wfhLz5wQ5nK4bWb0aZpuqSic8bPq1ewjc+tSviVHYL8\r\nANSBfI+k79SBELt2Ay6P2Ws6I6rtPgS7pNj1iOHveF2qLaPrRmrAvWos3QsP\r\nDMCbyv16Taf+tRkbBmlxxAPJOq1bpIrJzgWX+Wv4dbktaxn0FGUod4WCSklj\r\nf7+Atr7kOPTI7uXJ/UCcKkHVq3IfsyDjpLHamoPcCkmR2DrWczWK7C7Bwd6A\r\nRqzldwhi1gTGF5hA/p4zVb8X8VoAqSW8o0v7t4pDsmOQZ2rGni63SGRRb0Zy\r\nyyDYTkFaqbjEIlCTt4rmRGsyyYGAAP56ASI=\r\n=lMt6\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button/styles\";\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nThe `mdc-button__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused button.\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.**\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n**Note: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.**\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button--icon-leading` | Optional. Styles a button with a leading icon.\n`mdc-button--icon-trailing` | Optional. Styles a button with a trailing icon.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n`mdc-button__focus-ring` | Recommended. Indicates the element which shows the high contrast mode focus ring styling.\n\n**Note: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommend always including it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color-or-map)` | If a color is passed, sets the default container fill color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`icon-color($color-or-map)` | If a color is passed, sets the default icon color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`ink-color($color-or-map)` | If a color is passed, sets the default ink color to the given color, and sets the icon color to the given color unless `icon-color` is also used. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color-or-map)` | If a color is passed, sets the default outline color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"The Material Components for the web 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/density":"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/button_15.0.0-canary.20ab6f5a8.0_1672342874963_0.912318058512797","host":"s3://npm-registry-packages"}},"15.0.0-canary.b9806f623.0":{"name":"@material/button","version":"15.0.0-canary.b9806f623.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"491c65d66a2e006340d26747b7531bb82751ab7c","tarball":"https://registry.npmjs.org/@material/button/-/button-15.0.0-canary.b9806f623.0.tgz","fileCount":40,"integrity":"sha512-neTHxuOsvuj5qAFUhIuJYlcxjXMCU8y3ccGAqAjjMIdro5XkbB+fwc7I0hiLGKjkwoy9lCrs1PvFbGMnDTVaXw==","signatures":[{"sig":"MEQCIHwn9yEOcH1JodU0hKd+hWvr/RzJtb919twGPxVx/FjMAiBjbN6GRUFxwME8XnCRUWv8XzEVObSC5x8fQTz58uzZkQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":646224,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjrh1hACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpqVA//eGtityhd4RhXHpJmfnuEzA3uFHwR/roLbYJ+1OcoLVEUS/kT\r\nHOIz5sntTFHYr1OE9HFmeavvvNXVUtBhXFhHRRkWvFn7GiUTqnH1L4Rx7Eym\r\ngD2OZe8wDKT850YMEgQrbGvbxU6SBAOtN9So0rjORoMbmtU+VwcJeyi3nwnw\r\nc0ju8kMJi7csg+LnHi7VqspHgu+/wSlpIvGhFmXDEOrX6HrmOH/F9WyDpqLt\r\n8jmNLjE0vvs77azUMbOWoNC4NKxi8HL30iXjZ2Q9t5jzTT8uT+uckrdtXBYb\r\n2TClG9Db4yNPanFkoX3j1MZT9jbSeUzYjgMxqHmgQI/+8eUoO8fwbXD0eKmm\r\nYXGyOCmwRyZUZmp6Sh00pOZ/SNCjA7Zn4oJ5qEPyhYkhe7vXQFnI+gNz+AWL\r\nx3b5XgDUQRrvO7O/gBs0N3BqUMOwMb6YEjYPKv/WJH3VCpJGw+BnOXBKP57M\r\n/WQMwW1VUXuExl3xXL2lG8HJ9NE9ruPkQMqI6/L0uYdcks/HWIByEMKWV1p3\r\neyeIt0yeK6mUbpqb64jmKweYcDGv6R0O+fBLwaU69TSc06mjfXRLd4VKei5d\r\n8J5MILsAOGEohg3sDDwfWtl5RHW1DnLw/IKuDPtxEWtERM8V23pMEDkilDbn\r\np9GGLjfZLTdijHx/EUz6bMz7qf+UcWbuFMo=\r\n=4fHd\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button/styles\";\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nThe `mdc-button__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused button.\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.**\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n**Note: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.**\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button--icon-leading` | Optional. Styles a button with a leading icon.\n`mdc-button--icon-trailing` | Optional. Styles a button with a trailing icon.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n`mdc-button__focus-ring` | Recommended. Indicates the element which shows the high contrast mode focus ring styling.\n\n**Note: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommend always including it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color-or-map)` | If a color is passed, sets the default container fill color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`icon-color($color-or-map)` | If a color is passed, sets the default icon color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`ink-color($color-or-map)` | If a color is passed, sets the default ink color to the given color, and sets the icon color to the given color unless `icon-color` is also used. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color-or-map)` | If a color is passed, sets the default outline color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"The Material Components for the web 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/density":"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/button_15.0.0-canary.b9806f623.0_1672355169109_0.030468565204117892","host":"s3://npm-registry-packages"}},"15.0.0-canary.50c9f550e.0":{"name":"@material/button","version":"15.0.0-canary.50c9f550e.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"164f92398f6086a32c4f1dccf64d1b9f1caac4b0","tarball":"https://registry.npmjs.org/@material/button/-/button-15.0.0-canary.50c9f550e.0.tgz","fileCount":40,"integrity":"sha512-1IGbxOftU8e2HAzjPLQiPc+QW4tvQ0gJizlPvzkZzZEXv/hrZNrMkJrpQ325+PrUO8X6bQ+7bExxC4EsvkROqg==","signatures":[{"sig":"MEUCIQDn43bIwLx/gIKf0lp4WF3gVk+Sv/Et5wERnspbSAPWzQIgGPjdcj92CfKthcbYDOX4ZtutziAEumD0TukELP38Nlo=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":646224,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjtE4vACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmqoiw//f9KYS4+TtH/tXKfDa/YExk3PaZiDKGrkuIlB6Xj7OGyEk+nJ\r\nGmFnc/VyNkxvRGajJYHRn3e1Ui3P5VLYvTnmPKHP59H/ierJGFsdLXHY87MX\r\nfnUThIm70CxA4WYNENzRQ/iPSc3Oo+FrRZp0var7Tx10vUvSmZmdITFmPi3/\r\nYyP1QuFL5xz1idUOqt8WQcElpSh0fWY2BfhWgfrUeaNZoWjzg33kbyz1sew5\r\n9Nfu0C/Neon7lvqznETK3CcSEkoRajv4BzZohwt9H705mzH4S/vLTKtCw/Hy\r\nA9vpSLsA5vY5JwSU9xkNoBx82gEKRlcQrBx1ckHb/7hSY4l02McFNxv2SxI8\r\n6zqLBNkhyMVrz31BjsgqOcze7bgk243UST1xioiAZQU6TyBFOE+5yuwkmQkK\r\nWdXJUVreYM+3ZUyWEDPTF6qRhrz5nIfxtnd0kJm8FGyNdSJuTdaekmaW6J6s\r\nB5GFxDrz+aJy7/LESgbzTiGPeRcvk4U1joEVbe/WC2earl6qqX1CAlV1bVes\r\nyvBCqdlp/39HIY9TiUjbCCYQ4d3Xt97GITMGTXi5pj3EhHWFjpE2zaAHOBqj\r\nGJyZT3B/7mSk1IH0n0xY+uY1UPyC6xLT6zrVZStY1X+wHr9B+7j3YBZm69Wf\r\nV9IWSm+ReNHWEMn+8YELDpvO7m+qG8S3ZMs=\r\n=cALl\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button/styles\";\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nThe `mdc-button__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused button.\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.**\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n**Note: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.**\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button--icon-leading` | Optional. Styles a button with a leading icon.\n`mdc-button--icon-trailing` | Optional. Styles a button with a trailing icon.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n`mdc-button__focus-ring` | Recommended. Indicates the element which shows the high contrast mode focus ring styling.\n\n**Note: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommend always including it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color-or-map)` | If a color is passed, sets the default container fill color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`icon-color($color-or-map)` | If a color is passed, sets the default icon color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`ink-color($color-or-map)` | If a color is passed, sets the default ink color to the given color, and sets the icon color to the given color unless `icon-color` is also used. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color-or-map)` | If a color is passed, sets the default outline color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"The Material Components for the web 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/density":"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/button_15.0.0-canary.50c9f550e.0_1672760879210_0.8036878157962453","host":"s3://npm-registry-packages"}},"15.0.0-canary.af490a848.0":{"name":"@material/button","version":"15.0.0-canary.af490a848.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"4530684d71c089c3276daf8fdc9de43249c28062","tarball":"https://registry.npmjs.org/@material/button/-/button-15.0.0-canary.af490a848.0.tgz","fileCount":40,"integrity":"sha512-Jl9OVugTL4SROyuNgmTFDDenqVi8fziHAjzIvRe8UXeqtR7YckNA+yrF6u5yEwLOlVUiBj7jEEFAO6gulLLp8w==","signatures":[{"sig":"MEQCIDCNCecrbtFGAjhuVSL7Qjuz5m8ANVAzmjLEtpkSsFoLAiBQvSL+NOtpoLXaQiEZsGK5OIRvtdNtpFF86Lm51kdAYw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":646224,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjtFBzACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoT7w//fkZaVbmibUtRuzIhzJcT3iYAKc5NWbA5rSAiZdU3zTySl+GG\r\nUFbXL1PszZuECRfUUj8ORkA4BR0bRvbmhOV+7DFbR2L+RR5As2M5AB1dK4iz\r\nvJrU0zfohJ4HAm4goZhs5mbB0JkOIxPu9j6LESFlkRuECUkKcdVx682IlGra\r\nKnbk0nTasVQ26yUMx3u7TNH2vpckdrmgVMCtc9MX0KWcXpW0+ZBY0jOytcZ4\r\nUh9B8mKpD5xoUrp/NOYRNN4xlO/xuCR5as7x/UE1bX8h73ibOSWE9WjoEhRk\r\nSfZGpRDbD3m2oYqr1STFYo6Q6J0WcYcS8Xd8uroK3DmAIvRaQYH6V4qkrC6y\r\nv+SM3I3bFGzChSfZYEbdh+DnRdBmUyDixzxRl3Ug0P2AYO9kwI9ozIz5qfyt\r\nbNVYwXk++eRn8Rox9GCI86SnCxe5W3j7PFcoAH+/6HiEyEcZhQR9AUQPe3RH\r\nwBH7xFJbN/CpDjroH8JHgDDl9nf3EUw/xAjirBkv1agSqjz5epU+0v7nlOmL\r\nyorAPa+cFGFtlGql4YBuMU5Wu7484LolKqt2xyq3B6ndZ82ghAjpQq0Y4qET\r\numKfiHyRHFbPN+1MUGoP54eqho1Q2SYkMUF/WHE75Jx3AqLjhuoZ22jDwv2I\r\nwV3xHSmSYqrE7e5YP3s437STTedQ9t8vxII=\r\n=OP5n\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button/styles\";\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nThe `mdc-button__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused button.\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.**\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n**Note: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.**\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button--icon-leading` | Optional. Styles a button with a leading icon.\n`mdc-button--icon-trailing` | Optional. Styles a button with a trailing icon.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n`mdc-button__focus-ring` | Recommended. Indicates the element which shows the high contrast mode focus ring styling.\n\n**Note: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommend always including it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color-or-map)` | If a color is passed, sets the default container fill color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`icon-color($color-or-map)` | If a color is passed, sets the default icon color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`ink-color($color-or-map)` | If a color is passed, sets the default ink color to the given color, and sets the icon color to the given color unless `icon-color` is also used. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color-or-map)` | If a color is passed, sets the default outline color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"The Material Components for the web 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/density":"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/button_15.0.0-canary.af490a848.0_1672761459245_0.713005033829633","host":"s3://npm-registry-packages"}},"15.0.0-canary.7cf487c98.0":{"name":"@material/button","version":"15.0.0-canary.7cf487c98.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"94e05414d0c3bb9ff2189438c69e988301a14b17","tarball":"https://registry.npmjs.org/@material/button/-/button-15.0.0-canary.7cf487c98.0.tgz","fileCount":40,"integrity":"sha512-hSIz1iSPPKiY5wIJEFnLdt8quhUhzUSVAZXknGLcUOo290hrB12R6swmdwgw8xkdVUGsS0ZDn1PmEQlfYeox+g==","signatures":[{"sig":"MEQCIHxfszUP5vdJ0ADhPHcyPuIwSfShBAig/muC6nOyCl2ZAiAVcMmmB4CE0B13bfm3IiSvdZUW42aRdeJjRy9ZpxHd/A==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":646224,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjtGg5ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpWPw//bnMjjJpe2ui0VMae9jw+sMI7KVJ9/szfqhATPcz9/LVN5n0/\r\nWfNMCRzpfEZXRLB+5ca5fpLRMy4py/3xD1IixfAxn1OEaIqTNcRkjjYh8fFH\r\nzNdObcifpqT+pNfFqKN8y7wt4gQTawlO3WQpEZfzvOLJgtsYujhSzVVCvaLl\r\nPXBNdGFYLar7jSo2OaV9EX7UwlCGd/GSGbO80JWANvWpCCFG1LvWe7tQfJFF\r\n1eJs6SZFjy9GJlopRlJQjuW0aMjjmEABsYsm3tLvkQv3XNRZh3zdeYDU8AIG\r\ny6/A9Cf+JnvH4bzfEJ1BuT/xd0oXoacRNdWhDXm76gPTOIAHC3G5BSi++kuv\r\ngU7glgV2cgooqAVAvtqCt/0jD32LgHSuFFvkc3vtLw+AngETALhzFGU/G9EZ\r\nN2dC9Xx1hY8LXnjDoJPCoM06pdMBqlWsTGcok/tzj+mHo+0/zT420y/+KUsH\r\nWvd1qzCsouI7a+KXDK1kqASROUL58c6sGsqx9JCYAsanGp8Q0SWA4FN6LF2m\r\noBOFh2TabkVzNr7no9xQZFCT10D8UWoMr9KOT8YgKZaoPf3q/2oUeVsOtK3+\r\nTyE6UiqswmANkNZdFiBnPvONAdjCi9wzZSvqaMS2hHAD2R/JnhT04PJzmYK8\r\nb/DbuS5kYM8QdHxlNdo9K6DI+CW5LjsVo3M=\r\n=ax4a\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button/styles\";\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nThe `mdc-button__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused button.\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.**\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n**Note: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.**\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button--icon-leading` | Optional. Styles a button with a leading icon.\n`mdc-button--icon-trailing` | Optional. Styles a button with a trailing icon.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n`mdc-button__focus-ring` | Recommended. Indicates the element which shows the high contrast mode focus ring styling.\n\n**Note: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommend always including it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color-or-map)` | If a color is passed, sets the default container fill color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`icon-color($color-or-map)` | If a color is passed, sets the default icon color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`ink-color($color-or-map)` | If a color is passed, sets the default ink color to the given color, and sets the icon color to the given color unless `icon-color` is also used. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color-or-map)` | If a color is passed, sets the default outline color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"The Material Components for the web 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/density":"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/button_15.0.0-canary.7cf487c98.0_1672767544772_0.006678715887228792","host":"s3://npm-registry-packages"}},"15.0.0-canary.a52be2d5e.0":{"name":"@material/button","version":"15.0.0-canary.a52be2d5e.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"ae79b6b913151d25b65e4a3c5ca2f65f962822e2","tarball":"https://registry.npmjs.org/@material/button/-/button-15.0.0-canary.a52be2d5e.0.tgz","fileCount":40,"integrity":"sha512-jSEZwGESzYgu54S5ut0WEPDYlQ1fYufsFobI0mqjT4NTU4EXyVepQVoj/8I8dPG1mSVEgphaqATKsqUtIp4AOg==","signatures":[{"sig":"MEUCIQCW/9xIHxtOWZKllV0XMZS11jsMJ7nRQASRflbD1Sia4gIgF2QUouEPgI/mJ5X7azdV6UoayICCr0doYMdji/VtJQg=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":646224,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjtH5XACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrvSw//cLJ/d/7WWhvAYCOZhMIuYtNkzHZZwnHlfFidz+7zMpfnyRkD\r\nyTTSml6GvHER3lrYl1yDHU8yY0aAz4VipQBKZ2RveKAA5NyUrPmGYh3TNtPy\r\ncOI9yR3w3S2faNiVe7Zl/CJP30uex/xygVhRBm794/DE7Uwa4kuPR4MBaHb3\r\nqmACaBam/pKr9FYQ67fYMKrw8tiyLdZiSu+kW6EUUSGojb8K46z8bl2erBqA\r\nmfY+UcBVPaPhJYcPbPoymB7RjchNuVi+RmDtoUNrLXjWCzxva7WOq8TZEBH4\r\nC7m9SFTjZyUqnnQbaCAUhwpOtjJ5G8Do+u6lONyPehpVpKYhp3zf27AqiNPl\r\n98osFGOhPHWK0YUxK0ud8Hz8rIB2R194rV7chHxJCA0antkD1rCRIUL7hCGq\r\ncL0hmOgL40B9R0hM5YOO8nXiZihKmBWHvxmulbXazA2RvTZGb46wNMY66Ker\r\nhop9LPnVNU1GO+Hp9V6c3hQ/QbQEJDh9CL5+Akt3565XmtYQXWOuhYAyZKHG\r\n9YBq9pbNv1kE33puUVUL9UdAVhT9UWuRqsTzmbFxzJUE1HlqZE60nujxTWkl\r\nPpYCy38zhoxkJmDOscaECiVpsE8qyjMHr2Zk6P2YguVAyaXMOgbq7JFw7diT\r\n+L/hmda7ic4ju17TDCgCz7haED1sr1+6p0M=\r\n=p8S2\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button/styles\";\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nThe `mdc-button__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused button.\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.**\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n**Note: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.**\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button--icon-leading` | Optional. Styles a button with a leading icon.\n`mdc-button--icon-trailing` | Optional. Styles a button with a trailing icon.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n`mdc-button__focus-ring` | Recommended. Indicates the element which shows the high contrast mode focus ring styling.\n\n**Note: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommend always including it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color-or-map)` | If a color is passed, sets the default container fill color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`icon-color($color-or-map)` | If a color is passed, sets the default icon color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`ink-color($color-or-map)` | If a color is passed, sets the default ink color to the given color, and sets the icon color to the given color unless `icon-color` is also used. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color-or-map)` | If a color is passed, sets the default outline color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"The Material Components for the web 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/density":"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/button_15.0.0-canary.a52be2d5e.0_1672773206922_0.7920173111428832","host":"s3://npm-registry-packages"}},"15.0.0-canary.e38ba17c5.0":{"name":"@material/button","version":"15.0.0-canary.e38ba17c5.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"7e0d7316c407ef548d6782fb78a74a60ef43026b","tarball":"https://registry.npmjs.org/@material/button/-/button-15.0.0-canary.e38ba17c5.0.tgz","fileCount":40,"integrity":"sha512-Fb0gxeWc6eUE+0jfJ81r9IfJSN1WrKR+ivd+PXcATaEHlNDS/NauGsjxnJV39ELfk7f9mAWfpFpBPGcAr831bg==","signatures":[{"sig":"MEQCICXKKDCpxN8uAoWyLsX5cUiDDu8ZONhorLUh9vz0zyO1AiBNk2CHoqMfNCN5ASh5Se4030BPntsZYDNg2XDrwTnEGA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":646224,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjtK0kACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpMgQ//Ui3wYcV7ZFqDt7g/kggFQQ5qojOti1fAVf6XhE0vglIkawRp\r\nvoNQAaIOJNvvH75jbbRylmcNxLj8CNLcJisq/D07H1bDyG9yYpo4knS/TOZO\r\nK0CoeANmYLKOuZeHdjXYUr2VwDXCB6R1cFoWo1aVUsRpjXaRZmt9gGOJ0c75\r\n+8PGkglBthZmrcK2g+8OgR1SEkF/buXGm3BhE29Ke9Ocd9vOxsgniK6vVU/A\r\nni7xsVu2L6DNGSfkxO86RpKQmaYpC1hGs1k4fT4cv2JQQLFTdq510bUuGGC6\r\npbm62pAP5qAMG0LBCkZV9C5AzZBHXHkoeY8zk1HdUpqkANkawzc8bmK1ySG1\r\nBoQPBo2lweYw5LNxC6FPRT5jXrBD1Xvfk+hnW+DGGwPFvxSKagcIJVH9Sx5C\r\nchz5+RBLp8vCIV9qwQgHPPvMKv7nJdSG/4YZhBYeVfylzqNNY2YRTN45sFrJ\r\n10XQKtdV+qEoYyvKl/tvvYghFB7KLjzqLMD4k46MBA6gc6ISCNErXRbs15P6\r\nDUBoUnf4kLawe2gFt97niMoAsCIdStUKHNE9bFXJKEAeK71PuS2vdG3NcLO+\r\nhPg6HfvdVBKN4vdQ6Mq3hs/IRk7Kz3IJqLF/DJvILbxEN7TpI3rR386p5mNC\r\n6YWmI57tvxhbPbO3aKidCQbVQGCMgphhvpo=\r\n=/kR4\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button/styles\";\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nThe `mdc-button__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused button.\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.**\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n**Note: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.**\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button--icon-leading` | Optional. Styles a button with a leading icon.\n`mdc-button--icon-trailing` | Optional. Styles a button with a trailing icon.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n`mdc-button__focus-ring` | Recommended. Indicates the element which shows the high contrast mode focus ring styling.\n\n**Note: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommend always including it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color-or-map)` | If a color is passed, sets the default container fill color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`icon-color($color-or-map)` | If a color is passed, sets the default icon color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`ink-color($color-or-map)` | If a color is passed, sets the default ink color to the given color, and sets the icon color to the given color unless `icon-color` is also used. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color-or-map)` | If a color is passed, sets the default outline color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"The Material Components for the web 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/density":"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/button_15.0.0-canary.e38ba17c5.0_1672785187783_0.8432832922252125","host":"s3://npm-registry-packages"}},"15.0.0-canary.49041a6c3.0":{"name":"@material/button","version":"15.0.0-canary.49041a6c3.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"1c3a145672e600763a7307991c1c806e74e963b8","tarball":"https://registry.npmjs.org/@material/button/-/button-15.0.0-canary.49041a6c3.0.tgz","fileCount":40,"integrity":"sha512-Pj4szjXJXU8ktbr7EwctsVaDUcCMmTnRR28Oomr1ItAMnI9ZcGcDZjwNLeSttSFoR5XH40IJq8AeLejCb/DIwA==","signatures":[{"sig":"MEQCIANXGHjBHl0IWm6elDwrtCkSTnkowhF55UGJbVKtG8LdAiB17RrMNgftJ7Dt74MjM+4hlAKxeYRMjst8/yoTmGUolg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":646224,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjtZirACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrKdQ/8Dis6rZcZRDlEQcxGk7EKxpWhcfBKszooLIyL5qYkFM/YF6kE\r\nGBXSjg/6WKZqmp4iJvfLJ0mdITl3FP9bEQaCp8SWq3Q8/tQLMCd1G4VbCSmL\r\np/iVGYK8EoKrqkOiiYpGkxCsrdPjAxFa/K7O6J253MApS48fGdCN2/JxLv5h\r\n+kQVEDPXJgNdREqs+4IUDAL1MTbzcD6aZfUgVytK2cT2GhL33oYX9YyImMQ5\r\ns1jT6xTiNe59k2Cq5eZYkxcTml4U+Bymr1Q3U6bhdgviVTZcvyka3ygVkppM\r\nLoh7sohUFIU/TIjoz6w3z4LOLVZvTMMuw2gRuwF8MCsZozK3KSYokUqiEfYh\r\n2K52yrveOdc/o4r6a+gjnikRDZadjpP4q+mAQdk5Meg1ylvaFofDyDMTSN5w\r\nFAAFYHRFBM6wVa+zWpa5fMKeHveia67iReJEFqxMwUc8qRydSMp7ulCrNwIl\r\n3jwNAIVGlNvoz+t88Pv8fbCVOScf6bLT31LZyTMvVvA2RKuvJobkOOjiQrwM\r\nIDrxOqETyNcZSnika2psjXPh6CbqAfmJdhWJpYiuRKfEhQJVtIiRZe1PbnBw\r\nwhdQKHf5v7xSs6Uke6Keq4hMXa0COZttIBRb6tJGEs9rpzJ/Ry0OlICBOwgr\r\n/oM2Pr73CrVK6YKrjjrkYBETGJPXS+sNI3Y=\r\n=2/BW\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button/styles\";\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nThe `mdc-button__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused button.\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.**\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n**Note: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.**\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button--icon-leading` | Optional. Styles a button with a leading icon.\n`mdc-button--icon-trailing` | Optional. Styles a button with a trailing icon.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n`mdc-button__focus-ring` | Recommended. Indicates the element which shows the high contrast mode focus ring styling.\n\n**Note: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommend always including it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color-or-map)` | If a color is passed, sets the default container fill color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`icon-color($color-or-map)` | If a color is passed, sets the default icon color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`ink-color($color-or-map)` | If a color is passed, sets the default ink color to the given color, and sets the icon color to the given color unless `icon-color` is also used. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color-or-map)` | If a color is passed, sets the default outline color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"The Material Components for the web 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/density":"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/button_15.0.0-canary.49041a6c3.0_1672845482874_0.5300382804716905","host":"s3://npm-registry-packages"}},"15.0.0-canary.c492898c2.0":{"name":"@material/button","version":"15.0.0-canary.c492898c2.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"93d7c2a640669adc9cb9d10121b4fe0c23827d16","tarball":"https://registry.npmjs.org/@material/button/-/button-15.0.0-canary.c492898c2.0.tgz","fileCount":40,"integrity":"sha512-HyNrz865ajYIFmpZlWvJ4neeLwWgzruZgepudrxZglEa9X1HNYLD1mGGelKnPGM8og9S3GyPE6QSq34i1DuOOg==","signatures":[{"sig":"MEYCIQDMNyqKzx5HDlTaf4yHd99FBo+Evul8o/Nxm75rNqbCuwIhAM99S9J/Ld0mFWm5CI23HNPEHzbS//VWAaj1TivTYFGl","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":646224,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjtbl2ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmr4eRAAlCoF2QmfsLLnUWwcqBc+ns/i6Fg528+WnK8opEhthy0qJ5m+\r\n7ai9JLqgv77fXdze0lJvDm1B98RHjTmop3QdB0tnhjzYSa3FLg461qFUo29+\r\nNg90aVjUzWXWTNhxlGmefgb+53lB52oiXmF8/NjdcNAn1Juz6s+nJWcR32Bt\r\nfONmXqx/mPOxqzkcWxE7VHuhMIuFaUrinK7RLgU3Bt4lFhtTr/q7mzlEIISI\r\ncimv7IC9rnqb8/T2yj/K8N/WuaeNW3PDBpJVwEG6N//XOnWpANI1vmsjS2xd\r\nytREVRM6URc67rIZZl+Thne2P6pDDJ+hGQj6Eqoh+mBftJWJZ0Rs0f4ep0A/\r\nek4tWlpN0TgjRQ9a4Tc3Uu1gPGmXX7VxIfCv9Xr4unflbUALnmQgM7dcH1D8\r\nKj2EZsTh55F//NiHAXZE950IKbhZzRVY5JGFB+Q2PTCxLg+wcVjR+0cX6BKG\r\nxNpG5px7Ly42HmNHaDzET2tgmjVopaC/U5J3MBWKWWsFHhel5jN3FU2IQWpx\r\n3QwXrugbR++54biuyuLFaD70d2zUfyrTz2dQ4F0hMqLy/wTJRHhbX7dtyArk\r\np10yI5SN3eqlZTLWjA2cEXA1mN06zw1HflK+gUUwMOO0eX0lhKXonwmrzS1Q\r\noqPqxC87xcPefNf0c4a2ZFEcYhdsRvnafRw=\r\n=Wh1I\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button/styles\";\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nThe `mdc-button__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused button.\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.**\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n**Note: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.**\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button--icon-leading` | Optional. Styles a button with a leading icon.\n`mdc-button--icon-trailing` | Optional. Styles a button with a trailing icon.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n`mdc-button__focus-ring` | Recommended. Indicates the element which shows the high contrast mode focus ring styling.\n\n**Note: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommend always including it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color-or-map)` | If a color is passed, sets the default container fill color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`icon-color($color-or-map)` | If a color is passed, sets the default icon color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`ink-color($color-or-map)` | If a color is passed, sets the default ink color to the given color, and sets the icon color to the given color unless `icon-color` is also used. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color-or-map)` | If a color is passed, sets the default outline color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"The Material Components for the web 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/density":"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/button_15.0.0-canary.c492898c2.0_1672853878680_0.05096000312353155","host":"s3://npm-registry-packages"}},"15.0.0-canary.d7a2277de.0":{"name":"@material/button","version":"15.0.0-canary.d7a2277de.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"40aaab39a856628c8ac8f671cf3abe465ab2c53c","tarball":"https://registry.npmjs.org/@material/button/-/button-15.0.0-canary.d7a2277de.0.tgz","fileCount":40,"integrity":"sha512-3ewHCKtkobcykWv/RDE3Qfc62xc8qCCA4ba0EavgAyrKvCwoCLZu310YCeKWDgWbJ68Ihpn2Zp8KDstRkLW8qA==","signatures":[{"sig":"MEQCIEktLgcymHnocJmVkSTOKgTAuzMi1fJ9SJ1ohzUCu/uhAiBkB5nls3fBlGJRKy3Z9j6//CC5CJSMxWIZPGMTTzxwHw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":646224,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjtfE9ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqZQRAAg//AsTo2xP0NQQ7XQMAvTRNGfH1GXOPIu56HAokxYOOaVjVx\r\ni22TW9jI9g45531PmBNfvDc7jULaA9gC2QJLvCNEUDSdQaaaLBAXeYf4snDM\r\nxyqy6aeFpnGHOR9HCWq/izp9jOdBlYhETk16Bej8Hvg5qewvqDWGEW8sRZ29\r\nSzeZMgyxmg00qkgUU7AvGI9J+vmhDPG635MmG0Fxf4UW59xPaijSVPPZ3Ly7\r\nYixD2GYXmi8sdnUd8eg4OPUXHbAfktUulmr1S1G+Ocb0dYPH+wdFCAAZ+Z9P\r\n6esCmpdo0z93PVQ0QihPKesglsd7oDdPAc6zAun+NtZ2O1LZ8AbKmMVX/sMN\r\n3GDBQ5BvzNDq1qtmWc0NJ9nZkfo+hN9JKxQs+Ad++88ALOyClHK7FjUKpYNX\r\nNDZyfSZWI1jSwGWZVWLL/irXJWPSvsBMZv90zl5WIaS+S6aI277vCTZ5bmd8\r\nXFuV9wknXqV0VWSglx5dZMouvLPk9jqqzICkT955L56thUUoNLwPPc04AyEB\r\nX84uV2YD75IpX7vqfS11ItZ7XB/ym6UA8YAZ7SLhZfN8zpV9amAF1wnpyYxZ\r\nK2WzCZ63S7YYEcIC0Gkm05NiIFQdUJJFZ2oKFQJS2m/MhmlzAWYzBUKIi7LC\r\nHQMr/qgRXIbeg+1HlfP6C0zzjbiClqPHeBw=\r\n=MXGF\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button/styles\";\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nThe `mdc-button__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused button.\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.**\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n**Note: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.**\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button--icon-leading` | Optional. Styles a button with a leading icon.\n`mdc-button--icon-trailing` | Optional. Styles a button with a trailing icon.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n`mdc-button__focus-ring` | Recommended. Indicates the element which shows the high contrast mode focus ring styling.\n\n**Note: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommend always including it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color-or-map)` | If a color is passed, sets the default container fill color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`icon-color($color-or-map)` | If a color is passed, sets the default icon color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`ink-color($color-or-map)` | If a color is passed, sets the default ink color to the given color, and sets the icon color to the given color unless `icon-color` is also used. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color-or-map)` | If a color is passed, sets the default outline color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"The Material Components for the web 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/density":"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/button_15.0.0-canary.d7a2277de.0_1672868157287_0.677518229797192","host":"s3://npm-registry-packages"}},"15.0.0-canary.fd95ca7ef.0":{"name":"@material/button","version":"15.0.0-canary.fd95ca7ef.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"0dfa2366bc8043c35d807866ea16984f3a86095b","tarball":"https://registry.npmjs.org/@material/button/-/button-15.0.0-canary.fd95ca7ef.0.tgz","fileCount":40,"integrity":"sha512-EG32mxhJZmiWJAvQ1CFsAd95NQfbxFNnmRIphNfvER3koy+zEKVB7CjVAXK3XCptlvSfbn5384qfAJKYsK9HsA==","signatures":[{"sig":"MEQCIC+3HweKinfm7Jcg6rf/LcuZL/vESr41EddK+USUzV3UAiBk9bvGnX4aYePlxmBhZMKBmYFv8y1yP8rITLz5G6SMyg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":646224,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjtiHKACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpFSQ//U0QX2wGlgJt26dvVwL2lFW7f0e9KszZs00w8wadJxwfDDM+6\r\nnFxe8EbUP8pr/2Evw7KtvLnizsbyLpiNe5+aTmm9kBFo8/0vTGD5eJRoL2PM\r\nphhYaet8F/V+XoR/RCl56gimg129P2Hs0aka96gZ/A8WyED28JtuAIwSUcn0\r\nr15LotZQAOIkTde7hwEy5sOCNsXtz1pDuAXyOGdy1D1xN22IabFFa69NuD/V\r\niPVtF8zLJfRKJuY5S05me+Y5TTB+oOsc/rnMCMSdB2MFjONHURqz+OKIakBd\r\nFipSSSwxyMkbAwDUvz75fOd80G63dxjuQYlEkygiNEKNRlq+OJ4lPQXMh6hA\r\n+V3Q2FwcErI66gLZQoiDMpEd7UntfIUMDCE484LS+dFr9/eIUYvXXygm1Xkp\r\n8l0QwUzdU1zH60CSwui9v5UemgycDI5J3HaWT8fVfrY0aoZWn0AjeOBBRS+H\r\ndzAq8PpgRc9Zi1ijE5EougWMWJ/uHvfv1Nx9ztbZk535STbKWwC2GCcaF0WB\r\nnD1SwGS5rAq8mtFyxTRn6w8/rAEUNI5C8fzo2XtRK9T2SrsNC4g1vm3CE6Jm\r\nJ8QZ/7yXyol4/ZlE8P9TckL7JFs2R0CydYDQMBWTrke1/mawOqjmeULjpPba\r\nLvBkClGpBkFOF6aBg90s0zb305CAugTFAic=\r\n=Ia+Y\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button/styles\";\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nThe `mdc-button__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused button.\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.**\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n**Note: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.**\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button--icon-leading` | Optional. Styles a button with a leading icon.\n`mdc-button--icon-trailing` | Optional. Styles a button with a trailing icon.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n`mdc-button__focus-ring` | Recommended. Indicates the element which shows the high contrast mode focus ring styling.\n\n**Note: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommend always including it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color-or-map)` | If a color is passed, sets the default container fill color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`icon-color($color-or-map)` | If a color is passed, sets the default icon color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`ink-color($color-or-map)` | If a color is passed, sets the default ink color to the given color, and sets the icon color to the given color unless `icon-color` is also used. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color-or-map)` | If a color is passed, sets the default outline color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"The Material Components for the web 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/density":"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/button_15.0.0-canary.fd95ca7ef.0_1672880585976_0.798923396425214","host":"s3://npm-registry-packages"}},"15.0.0-canary.1eb44faf9.0":{"name":"@material/button","version":"15.0.0-canary.1eb44faf9.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"1543d856b65f8d7578c54a2c2006483b530c5832","tarball":"https://registry.npmjs.org/@material/button/-/button-15.0.0-canary.1eb44faf9.0.tgz","fileCount":40,"integrity":"sha512-ZiCKMQzVfYWrUOB1mgaiHl24zNrqAf7XOWIGN/ld9oztmeNCElB+wyiBbdxvQvs6es+78za+XdXSw+FzbcyPUA==","signatures":[{"sig":"MEUCIQCW9iHAaZaikyNtGORuiTzqBbDsCj+d4UH+Rq3kI+GgFgIgAlw8FdUzdNF5QmReRSYaV53dLvjX8ohqToE2RLV0d6k=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":646224,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjtpPSACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmozkxAAifQk43QuT3TIaU/SKihKzR155fjLUjJHPAMhUZgqQJC+i8jR\r\n+RlWmFWk0PZBuY7xDbQ27KKUpYBTPB+3vdyFRoo9kvXOfWZg38yl7qGw+S11\r\nOn7jj7p6+sBAhWd1WvuBwz6yJf4i/iB1Joe2/isw1+8CG5oFbxImXDZTv2xu\r\n86xX84LUC8fW5awZ4zRS51KSZ6k0JHqMtcnA2Sz46BwxIzaUYsthmfs8K/91\r\noR80ty2h7K20PWkUTYLJMB6BFcDA71gv74AV1k1GIsGvG5rKND+Ptq+mqdkr\r\nNJO4UMTCm8vl1QcCVgkuqzqCfOe9q4MOG6Ac4QKuG6V8O3q3GxCfdP0aWW8P\r\npj7sUW6PM0F77ZMtDsSAMTiQ0jrIXwokjKVZKmkZZQI0G43Ma4+OETlYtJpb\r\nyU7V+1bvNrB4VokzHUvzFiT3RsIcplw62yzHykL83c8N58zwjuKKlDT08jXX\r\nxbiALYDKhYyZZVoE49/WkOOmfY+XYQMP8DC/SSaESnE089Si0IPNYCCfujzQ\r\nLdyjJvjNTgzwtr/5qFPui2tMbXKE40DI6/8tYyrTAImwlXnaZtzqdGFFF8DD\r\n8uMZy2S1vtrZK+inA/IqFjmA0WrDEWDs8wJAEqWkOiHzNUr2zK2y4zrbz3US\r\nPkdi+FLAi/Dq9QiOvVK0vTMguXxhNmyUE8U=\r\n=hf7G\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button/styles\";\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nThe `mdc-button__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused button.\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.**\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n**Note: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.**\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button--icon-leading` | Optional. Styles a button with a leading icon.\n`mdc-button--icon-trailing` | Optional. Styles a button with a trailing icon.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n`mdc-button__focus-ring` | Recommended. Indicates the element which shows the high contrast mode focus ring styling.\n\n**Note: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommend always including it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color-or-map)` | If a color is passed, sets the default container fill color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`icon-color($color-or-map)` | If a color is passed, sets the default icon color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`ink-color($color-or-map)` | If a color is passed, sets the default ink color to the given color, and sets the icon color to the given color unless `icon-color` is also used. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color-or-map)` | If a color is passed, sets the default outline color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"The Material Components for the web 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/density":"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/button_15.0.0-canary.1eb44faf9.0_1672909778216_0.43433886600785887","host":"s3://npm-registry-packages"}},"15.0.0-canary.adcdb7db9.0":{"name":"@material/button","version":"15.0.0-canary.adcdb7db9.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"a3f68b4b2127dcadcb9032443d7385e62985e59c","tarball":"https://registry.npmjs.org/@material/button/-/button-15.0.0-canary.adcdb7db9.0.tgz","fileCount":40,"integrity":"sha512-Nvwcx4AOb+wmcE++zwK2/XyvwM2X6yxYwSA3h4+KK5e7UUiYvUuIJuHMaZLjf4+g7MMtDY+LAyfTd+lppqIG4A==","signatures":[{"sig":"MEYCIQD/tDFGO0g8yb+F9ThfENPQE8+GJg8HGOmEXX7EGOePFAIhALpygKpnYziLjah5uG12weD4xJkWEhvK0ozcTwqLE2/g","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":646224,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjtvlFACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmqjdg/6ArNdf8zKio2RZET6SFnTYvxT7pQ3sajkReMMAKxNuJrc3paI\r\n+3zTX2127NhGvyLuc0T2CzcD2h4y4MDaoXoNbrAXYaovJO2tVUWTTjY6dGUn\r\nF/X9IgqhRSOkpTl8eCav2KVqcbiWDtrnKUOGLPIc0KBk9oFhu8R7w65dKiXw\r\npUyWhxFrlOYJxmSUoYhVpDTl+B7s0jELKk1WJvGGyOYpv5UBrCV5KlFc9LWa\r\n2E7pN73TvHEXNrvn5qznAdrKPI06pO6N6WXeVjvtxGoe+ZcFe/eRaU+ruLHl\r\nkbZAm5lTkS6VhOp5kq6L7ADSYDcXvwaIy5JITFbZhnB5PTLiPU0UUwTT00WT\r\nmgfwkD77q1fnyTxc9TTE9YaClJd/JT0fdqvWAlAQLyuMrDavlgh0+uwqhNpE\r\nuylmLYA7fFSRa4C+ir8H5XuJXgNWRTJvPOl1f03alcQvu34yrw58Z3DD4Wb/\r\n2t9rsaLZqZ5cdeHxDHAdF33cLzgFIONiWH4PPpTgaiaAA0FXOmUavbzOd5Bd\r\nBD5TgTa4V3ZomifaSlzRtoy5Hx/eZQQSlhtbHHmgLNi5Le96uTRDXp9M4BN3\r\nW0aFgdCpXRtMjofzP2qLL94jGFBbbKAYzJSosBXpiAjgtBasxrtLQpEnI5Tk\r\npCA9ae+ws+84DSJBInraa9vyZbSZMgzGHCw=\r\n=9dpm\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button/styles\";\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nThe `mdc-button__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused button.\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.**\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n**Note: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.**\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button--icon-leading` | Optional. Styles a button with a leading icon.\n`mdc-button--icon-trailing` | Optional. Styles a button with a trailing icon.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n`mdc-button__focus-ring` | Recommended. Indicates the element which shows the high contrast mode focus ring styling.\n\n**Note: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommend always including it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color-or-map)` | If a color is passed, sets the default container fill color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`icon-color($color-or-map)` | If a color is passed, sets the default icon color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`ink-color($color-or-map)` | If a color is passed, sets the default ink color to the given color, and sets the icon color to the given color unless `icon-color` is also used. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color-or-map)` | If a color is passed, sets the default outline color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"The Material Components for the web 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/density":"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/button_15.0.0-canary.adcdb7db9.0_1672935749532_0.7596612305127093","host":"s3://npm-registry-packages"}},"15.0.0-canary.067af7eff.0":{"name":"@material/button","version":"15.0.0-canary.067af7eff.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"fc9e12cd68fe263dd5bccf4a58275f5c393727ae","tarball":"https://registry.npmjs.org/@material/button/-/button-15.0.0-canary.067af7eff.0.tgz","fileCount":40,"integrity":"sha512-Ki9kwqnD6x8hjE/ixfCRMDnEW60i3QAYP1KrhFMe2det5+iktpYh98iULKNHFOUetGhU8BfM0Ej2DGqj6AM3kg==","signatures":[{"sig":"MEYCIQD7g8vjujaeR5GBQJwsqb19iTrILiLXPGg78HpNH/vnlAIhAMor0WJzbxnGUjvawp81pxdLWHq/3fCqh9vMOl+/W9ko","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":646224,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjuKvHACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpAjA/+Pwt4ntyhLCIhGiQhgqxUp+mdrzwUalDO0zuCbzdOdvUbg92Z\r\nzCIXeBaAYzzgsYukxPT2S0DbsA4yVT/TdGfUP9NeVptMo//QLnTUN0d9OPwx\r\nhT6S55lnQhkWgnfln+2eGhOOrLGbdeQROySVwKBOpM8OzUCThuFrTzTNCmB5\r\nDQIDttgd/E5Cu/80d826ZP+PzMhdGBZrNg8qmw/jMQAnMphWX9H5R74Ka9zC\r\n0PA49Z9YkVNOQNKzmJlKH5+Tf6+jG5JHRcAJs3HVXgQ05nENRPpaqYI8HFcJ\r\nS+BC2h5y+w6N88uCjjsG9FVHzGjO+l1ajoqdQPadiXv7yuNy/FbcK92HzA3g\r\nCeus60yJPbxiKGhCOfDeEfLlcIzCJSYH7Q2sbztk01sdsqXSlHLjh59cnNBS\r\noYBZYprktuZbs895DPiWBKXIavkk4M+xpFKcMEJL3nQOtFEWjxYt/IS3ubIU\r\norCI6g6Gp02XgS+apB0LxCJRwU0U7yN/kYoWhgEL00sBpwPcT2q23s0qxaZ0\r\nkT+W7TfHCgszLetKOkzh2zixDzYDDQlbJGhZWcw/l8pyta9NA51ZW3xA0Iyc\r\nANyGx8rDYsJWhEylPsoruu/bPiSobXRwA4PZ8PV+Ighq0Ad1frciiWGLayiU\r\nmH1SCjb8BpmJgoFRCP/ERgiWCo/uRpie/5E=\r\n=JInB\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button/styles\";\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nThe `mdc-button__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused button.\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.**\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n**Note: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.**\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button--icon-leading` | Optional. Styles a button with a leading icon.\n`mdc-button--icon-trailing` | Optional. Styles a button with a trailing icon.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n`mdc-button__focus-ring` | Recommended. Indicates the element which shows the high contrast mode focus ring styling.\n\n**Note: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommend always including it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color-or-map)` | If a color is passed, sets the default container fill color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`icon-color($color-or-map)` | If a color is passed, sets the default icon color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`ink-color($color-or-map)` | If a color is passed, sets the default ink color to the given color, and sets the icon color to the given color unless `icon-color` is also used. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color-or-map)` | If a color is passed, sets the default outline color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"The Material Components for the web 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/density":"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/button_15.0.0-canary.067af7eff.0_1673046983709_0.7285844586610613","host":"s3://npm-registry-packages"}},"15.0.0-canary.21d1196a7.0":{"name":"@material/button","version":"15.0.0-canary.21d1196a7.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"a20247629cf0ec56521bd0af36e662e8e16a9f46","tarball":"https://registry.npmjs.org/@material/button/-/button-15.0.0-canary.21d1196a7.0.tgz","fileCount":40,"integrity":"sha512-5umO7ViaycfOHf3lGt+NkeWT/HOjtS7chAkjRsFJIuUajUdxpKhniAYPUjphFpoCE8NoDJPaW63dFC/vv7wQeA==","signatures":[{"sig":"MEYCIQC5ZEvDsaZkA0q9n/U+KawVmqvDAaJtAIP94/8uE8gGuQIhAK1aUa/tdnFDUfCp1taSQWTEUsRHnNmgOXHY17XO+XAV","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":648128,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJju+/vACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmorEw//Rr6hFEBGoZKbDNevG+3XJGZd72eRswX8/PBHyVO/KK4M4x/J\r\nJxJadlHYiepnZQ2rZ0TQ9J6eX8+p2spUgXa6PMr1Z+dYD4GxtScIg/F5zRNb\r\nB8kEPChG7PV0GKmv0wBGlNKnmnawop2GmIgqRwfVVRh1gJTQIlyi+5aQG+C7\r\njh0IHFLlPytmEcVaFM7YRxicfno7k0mXs3aj9F7gBW9Uqg31Pd717NfFhg6l\r\nFX16baeAKZC5SVXDx//C/bkRYuOkqLLBbYw+j3auUf4T3OTpXt4wpEQNXl6F\r\n5NVLI8ZEKr85ovYTX0tN0zhx5xyDpoziRPHS7D3Gqa03OIwkFpcBHsPz6Yzl\r\n8n3Vc5ehl3PyxV/s8j1M3N2vrPCGai0UBdPjuUqlk7gzwwxurLOL9l9zfxh2\r\ni+77/Go0VnB1KNc4t4mQsdGlwTH8kd/Bl3h5UHlX+L703TrPNUk5A/6c88md\r\nxLpf4BlSv5meNS/AKuh/Ekch5Urp8N2mC1ubPqqsZ1KsQqfLAY1+T+KW1pyO\r\njGRbaWI5xTQSxlGWWZXpbcC7r3H6cdRfRMQxA7IHEmtF8foP9ieAv5aDDsyE\r\na8a0zynVhXvdl/PixvpEpIqUZs4tZPG3IIW7AfQUM9y6KLgSgQft9J6kYOv9\r\nei45d76byBappucHRi8hMntZ8NtBAxkwlWo=\r\n=FKFt\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button/styles\";\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nThe `mdc-button__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused button.\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.**\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n**Note: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.**\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button--icon-leading` | Optional. Styles a button with a leading icon.\n`mdc-button--icon-trailing` | Optional. Styles a button with a trailing icon.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n`mdc-button__focus-ring` | Recommended. Indicates the element which shows the high contrast mode focus ring styling.\n\n**Note: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommend always including it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color-or-map)` | If a color is passed, sets the default container fill color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`icon-color($color-or-map)` | If a color is passed, sets the default icon color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`ink-color($color-or-map)` | If a color is passed, sets the default ink color to the given color, and sets the icon color to the given color unless `icon-color` is also used. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color-or-map)` | If a color is passed, sets the default outline color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"The Material Components for the web 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/density":"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/button_15.0.0-canary.21d1196a7.0_1673261039246_0.8724784911593728","host":"s3://npm-registry-packages"}},"15.0.0-canary.8d2d8d3c4.0":{"name":"@material/button","version":"15.0.0-canary.8d2d8d3c4.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"87c720d0dee4847314aad728078ccd4179dc3351","tarball":"https://registry.npmjs.org/@material/button/-/button-15.0.0-canary.8d2d8d3c4.0.tgz","fileCount":40,"integrity":"sha512-Ffws1vUOt36JZdQrzXv+UDUq29Y7/H/m544QoTxHBe7Bfww4yuXKRZp8skoGpCd7V5ep81HzFQyoCrlxOsjBiw==","signatures":[{"sig":"MEQCIGMclCaS0BFPnz54Em+LZJhpR2nDppBZjMr9aoCqAvb6AiAqJVSZscisZJqWXV40VKKcliAthhg+nFloS+fRJ2Csiw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":648128,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjvJQNACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrYsg//S98MP70pbQnh2yNDu6u1ThKgRjtTRgPAVZEVwrVzJUCaxfm0\r\nm3eN+pps7X8Y7ad3mN0UwELpEq1jnnCbHegjSqm/OKkvl+Lp3jKIG4LFJ/Z7\r\nHe7NVizmUBxH3WLCr6BmwPROKuJr05JJEazA2Bh+NFKxE68ZzKubb8A+gumB\r\nZWTjLrLQUKQoG60ba12r2D0C7hzyxgTIXIF8+eizyxEBKTvZgCPe7zA1WvSV\r\nj0o8Xz4NAwGV9M/T0ZHeOifM/kyBx+p4pTGAo9jic2jaKUbqUINao6O2sElR\r\nYHwlAhel3rpfbrKaVx0OsWyuD/6tmlHDKhhfe3AatTAVtfVWfIpsxshuUhdh\r\nxjD2L3zGs/tD6Xwd8jzX9fyxKAOsvsNkY8IE2T1pAiBHfs3ZqVLw3icEg38C\r\nyQEFsPyYMtbfSJ1kN5msjA+3VxERrfoo8zMb0JtDREw2W/7gJkLpbw7eCGkb\r\nEB2sNhyNeiwKnZNoeVUWvjCDKibl06UFYTr7a8+E2BPDBjEV7b4jjHDFZePr\r\ncd08PiwBv2AErGfldTmLSuQPrHh0FOpSNQTPQy1qgH/BMMpIRF1ZM3Gku66C\r\nrsIZFLyyQ+R0IlT+PIgztFHjYYnkAPxcaQoWCDtgNz7jN6sUHTU72aH6NM4V\r\nqSiOgdF9bwkAuXfxfhhCgYwAkJjGVSvyuio=\r\n=2N0M\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button/styles\";\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nThe `mdc-button__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused button.\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.**\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n**Note: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.**\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button--icon-leading` | Optional. Styles a button with a leading icon.\n`mdc-button--icon-trailing` | Optional. Styles a button with a trailing icon.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n`mdc-button__focus-ring` | Recommended. Indicates the element which shows the high contrast mode focus ring styling.\n\n**Note: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommend always including it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color-or-map)` | If a color is passed, sets the default container fill color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`icon-color($color-or-map)` | If a color is passed, sets the default icon color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`ink-color($color-or-map)` | If a color is passed, sets the default ink color to the given color, and sets the icon color to the given color unless `icon-color` is also used. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color-or-map)` | If a color is passed, sets the default outline color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"The Material Components for the web 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/density":"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/button_15.0.0-canary.8d2d8d3c4.0_1673303053536_0.5845376970492069","host":"s3://npm-registry-packages"}},"15.0.0-canary.fc6ee6c32.0":{"name":"@material/button","version":"15.0.0-canary.fc6ee6c32.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"e1e68a497aba84c4aff02aab5dedf406fc6df507","tarball":"https://registry.npmjs.org/@material/button/-/button-15.0.0-canary.fc6ee6c32.0.tgz","fileCount":40,"integrity":"sha512-E2AVoPk17g/C+owBtU5aTUpdWCDmqsU/ukk+LQMUKcdkRVOChas6s+Y6JaX+PsZA+N0qnfXyWLx8wAq/NQNGLQ==","signatures":[{"sig":"MEQCIFEJiFwUP3qR8oCaoEW3XBm74r6NPBhBYZ1RKTUUyiBAAiB3zdtLQQEp3HRNQOaykDMDdJgJTVzneoiRjyYWEJV1hg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":648128,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjvZIkACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmp5dw/+PrLJuaT0E4lIrRrcx8VkSwaYXWI11wONTv1r23aaY4yvgt9H\r\n5OyZPqIEn3C0yLg0ixhYUYwMqGxF1NKIe7ZPqy8KVbxxemMFa0PKc9YDF1Hy\r\nuGU2lSdLDcMgOiu/20PamDDVBbPo+mR9kCZII/+poVefjR5NSiQEeD7IvCbU\r\nXRs+XGgRmpUXG1bp5tNcd6PVm3OvG62yagkm1Qsa3rM422ciRo2NvMRd3v7B\r\nF+NjqW4smB/VdqxKpj+sJUmf0bpPgZO59I9LbBJbVVdpS1whY8rxTOS1PnQw\r\nT221C4MR4h04iiAS6PP5Yq3BidoyBUrTGf1m2mZkVAZ+vQX6puEWM9dEBD3y\r\nJfAO5mblaP0aG03dFL/XADU6dO0Rc+dgrRbqoP8U+xdbAQO2fwgpOG+3CwzT\r\n2IR353BsZ9hYs8BiC3nRM6NEO16WucwwkfwDePuiy+hCWecUv7O3VO0e+S0Q\r\n0m8GKtgekUcV82bJRMNngTAk5/Jpa5rbCzNk5Ptcwloyz/iu2wWqG+4et1qL\r\njWgxpCoTiLyv7wQ3lgftbEGLgFN4NGZJyjMdAAR92qWRQZD4H5hoQoJfHtkd\r\nZO8GAgt25cT7MTWS4ApaTlp6OU4RpVrJ9dPSvweWlIA7AuDnMPYGANM/CdR5\r\nioNXt+z5827Dl4MgSpVQUxj3qcURB1sJeVw=\r\n=4HI+\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button/styles\";\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nThe `mdc-button__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused button.\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.**\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n**Note: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.**\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button--icon-leading` | Optional. Styles a button with a leading icon.\n`mdc-button--icon-trailing` | Optional. Styles a button with a trailing icon.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n`mdc-button__focus-ring` | Recommended. Indicates the element which shows the high contrast mode focus ring styling.\n\n**Note: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommend always including it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color-or-map)` | If a color is passed, sets the default container fill color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`icon-color($color-or-map)` | If a color is passed, sets the default icon color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`ink-color($color-or-map)` | If a color is passed, sets the default ink color to the given color, and sets the icon color to the given color unless `icon-color` is also used. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color-or-map)` | If a color is passed, sets the default outline color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"The Material Components for the web 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/density":"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/button_15.0.0-canary.fc6ee6c32.0_1673368099811_0.11568912528629705","host":"s3://npm-registry-packages"}},"15.0.0-canary.73537ab0f.0":{"name":"@material/button","version":"15.0.0-canary.73537ab0f.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"3de46b3b121c72a592cc319e82397e891bdf5025","tarball":"https://registry.npmjs.org/@material/button/-/button-15.0.0-canary.73537ab0f.0.tgz","fileCount":40,"integrity":"sha512-T1S5Mj5vIQ8aaXpcp3ax63GABfVeZmUyOYuGJ1zMz4ViPFvtY2WtyOduqjoIeMk9Hy2jcIkPsV6JOLVZ2xN+ug==","signatures":[{"sig":"MEQCIFIm3M+dNUZGZnt/EAXSQGzD71o1duOJRkjlxuKvG8GiAiAgDNPk+T+eli5pCxu2S7CPieuv8PnunwYO2+HaMQoKPA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":648128,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjvapmACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpqkQ//RYiQv4o+3vw5WKowMjlqzxbk0/94Z1nVSOQ5WXAB9MjGJFGe\r\nJ16SM1S/2alJenJiqIALYWMQ6uaIB01VaO3SHCgp7kS1gSDNBYs/yLZqja+J\r\nvDJYBMmB+IJgJWJdT3vDKbS2BEMuiLjvs3CQhgUuh1dqVmgAONrxJjGnZweT\r\nuRpHb7ERWVgY9djMYZscguD9OPkJOUcSCSmPS3KX/rFmBiRTCHxFQWPKuW7Y\r\nGMx6ZhdEgb3CrmLtkncA14IegQybGbMeFWDbMp6kPunGsMRdtpYNg/Yhv5W2\r\nw2v3ntx4m2XuxaDKTbZBG3h2Y6F19gPcNrWdr7o6i788RHjFFO3+2+71nlTk\r\nnVO4fJHX1ykPjrrMDCnkfxoB9ZXVbQ3+a8jAyCFn6iNC5qdHn1DA83pWFUQt\r\nZ5R1qnZsMawwpvjMTXG7/QH4Z9618uDckCbraTGUz8Griyq9XHCy3U6s23EO\r\np6hVnC3wsp977Eu1GmUEPF5lgv/48xYicabN3xrnOPIMLv7CVJxL8CGXtSvD\r\nX1+xOkJWDFM0wTyqH/dk6W7pHtbVCLqEp8hZND3KYKLhJLxHdpPNIoPxnzgK\r\nACyqlh74DfEfDc+nojH1XJ0RZdFNOEmZHFrPItSLzuCaPfyJJoeVJ22LaPBb\r\nGs03FpAj7nYa/w0P0b23Tzmb2kEEgKc5Wd0=\r\n=je94\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button/styles\";\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nThe `mdc-button__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused button.\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.**\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n**Note: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.**\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button--icon-leading` | Optional. Styles a button with a leading icon.\n`mdc-button--icon-trailing` | Optional. Styles a button with a trailing icon.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n`mdc-button__focus-ring` | Recommended. Indicates the element which shows the high contrast mode focus ring styling.\n\n**Note: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommend always including it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color-or-map)` | If a color is passed, sets the default container fill color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`icon-color($color-or-map)` | If a color is passed, sets the default icon color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`ink-color($color-or-map)` | If a color is passed, sets the default ink color to the given color, and sets the icon color to the given color unless `icon-color` is also used. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color-or-map)` | If a color is passed, sets the default outline color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"The Material Components for the web 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/density":"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/button_15.0.0-canary.73537ab0f.0_1673374310087_0.7837712466138338","host":"s3://npm-registry-packages"}},"15.0.0-canary.684e33d25.0":{"name":"@material/button","version":"15.0.0-canary.684e33d25.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"714aaa80ceb73fef2852dd9b25bfe634076e957c","tarball":"https://registry.npmjs.org/@material/button/-/button-15.0.0-canary.684e33d25.0.tgz","fileCount":40,"integrity":"sha512-Nkekk4edeX+ObVOa7UlwavaHdmckPV5wU4SAJf3iA3R61cmz+KsgAgpzfcwv5WfNhIlc2nLu8QYEecpHdo9d/w==","signatures":[{"sig":"MEQCICLwxvP+w4kSzu5zgjDfGgV4fs3cqw+NFwcNFziNzwu1AiBNXSU5nsGAMFF75K/JOI9yLA8h++MWCI3mKojjVgjBjw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":648128,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjvbocACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqIoA//Q2USTL85KfCyKgY7vWZWdijFzKD1o22SKz9A7DY9DI+Dx2AI\r\nxgx7pcS/bPghbmRUjvFDdalG3ukUTMjAtk8E6OCI/JPzQf1aoMJofJ6+PaAM\r\ntD4A9VV+J5VTFp8GBys9ELg44nmMzq/99CY1K4jhZ4C3LkkzAYRCIUZmyZw2\r\nZQGqmkte8xFr2k43Vyhhv6IqMPUoBQvz+rzgQKsFlEZWGbxEi/3Iq+DkiQzz\r\n6Bk714EkBWZ8WEWm8jRg6Opsr4mnZ9xRfYNDuzzOi7DFr8EFH3tZHNV6OYCX\r\n73dTGPqUE9hMuPdVyH5bvY9tRAdX/byJ47Tfw3IOKPTTsvJxmvo1ZNuwEFxs\r\nQv4h6UPuOf8YRpZp3Njn1eXy/ddgpE07ZxDtYjE8qRMSJ2pru7H+9FDcYubj\r\nhfPmqRhGl8WXarSc9ojnfjrn3hATryoZRKLDt55OtSul0DssZEIh0Mdsbbp4\r\nA25BepTFNNTWgslLJjIYfRj9SIvsGRkZlwpChoHBVjCpqD37nDF0H6kajAUn\r\ngwO1Oj/T6jtiZfhFef5x52l3BcQeMhLh/MixGDbaA+Jw7T0MrHX3bvjcpg8X\r\n5TJOxz9HpQwH3Gm9w+IUnXBONgTi8Gyl8YFDXUyYwP/ngAcwBUaLGqQaakZe\r\nXTVzjyLyrEtdZ+U1LjWK8rJljkS0foaO1uE=\r\n=oLmJ\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button/styles\";\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nThe `mdc-button__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused button.\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.**\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n**Note: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.**\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button--icon-leading` | Optional. Styles a button with a leading icon.\n`mdc-button--icon-trailing` | Optional. Styles a button with a trailing icon.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n`mdc-button__focus-ring` | Recommended. Indicates the element which shows the high contrast mode focus ring styling.\n\n**Note: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommend always including it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color-or-map)` | If a color is passed, sets the default container fill color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`icon-color($color-or-map)` | If a color is passed, sets the default icon color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`ink-color($color-or-map)` | If a color is passed, sets the default ink color to the given color, and sets the icon color to the given color unless `icon-color` is also used. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color-or-map)` | If a color is passed, sets the default outline color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"The Material Components for the web 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/density":"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/button_15.0.0-canary.684e33d25.0_1673378331864_0.6351905449810549","host":"s3://npm-registry-packages"}},"15.0.0-canary.0e89aab6b.0":{"name":"@material/button","version":"15.0.0-canary.0e89aab6b.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"3f1921443c79d7480f7fd037ac23608948c0884c","tarball":"https://registry.npmjs.org/@material/button/-/button-15.0.0-canary.0e89aab6b.0.tgz","fileCount":40,"integrity":"sha512-UOl00D2H97AoCR8PV1s81olRfwwYSCWaZxh655C42IE8WllaEaXQIpPgFhbGjTJq3imVNzHvzBgRR1TlL5101w==","signatures":[{"sig":"MEUCICkBBF3WUPatCZso2S3M6hd4zfLYarjl4IFSR59FGxvGAiEAuYtzSuaT9iXfnJlJpaxDMRPJ/frkdn+z0ztS1xl1erk=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":648698,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjvuFbACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrGig//ZCjeciH2W+hYgHW9Mv0HGTyWIjlchpx1x5w1dKeMe7x8pLQc\r\nsCxop5WjYFdCCMZ8sKdUNgdFxPQcsjQvL2o2mDCC4FbfdxgiRPVfHfdAVhJ5\r\n0KBiWXT1EJp0KYhCq0qNdezCz3AYrPU1Ub4aFqvOXI9VJpD2otcaVVH6G199\r\n7bJQ2PeBRcKUNpL8U3usDEFIVKQMz0tJlNMc0orhuyohnrtG5L5dtr55RFTv\r\njuZQ0gi1iiyobbKKKtPsFdJsBh8Nw4Nju1UudJ2q6l+4Wm1Qr4BGyw24yyld\r\n0oZ2E89s0yg6ZT1nX+P7aAYTiUKsocRJrEunPPjorNxeKFOglw/8DyP4y1zl\r\n1CNM8fcblvqtyuHKqUjiZ4jT4OUPhq4MZa4xHJM6pHFhmpA8pFbjtf5ql7L6\r\nj8p2SOEbIn2dReiaPToQo7ClPxpRDPYir5tjgytMDvMFCqFvg2uR0N3zKY/M\r\nWhHpC3Wq0LofCJ9EARyHlJeNwcEfCEWF+K3yhvrRScFeVAPkY3vmbYqLx2hY\r\nvwQ/ULuV7N65veUlVt68sHPhe7hBN/S0DdIQK274In2kYibhoZgYYXWmGtHn\r\nMVp1DY3PROMYt7ObopvDhdSO1QJwWBtA/a1kchVoWweUU40RG6t+Pymx2PgM\r\nHTCkXa3WDMzP/NOy0CqrxoCtkD8v8HGVnQs=\r\n=RRNE\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button/styles\";\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nThe `mdc-button__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused button.\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.**\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n**Note: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.**\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button--icon-leading` | Optional. Styles a button with a leading icon.\n`mdc-button--icon-trailing` | Optional. Styles a button with a trailing icon.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n`mdc-button__focus-ring` | Recommended. Indicates the element which shows the high contrast mode focus ring styling.\n\n**Note: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommend always including it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color-or-map)` | If a color is passed, sets the default container fill color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`icon-color($color-or-map)` | If a color is passed, sets the default icon color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`ink-color($color-or-map)` | If a color is passed, sets the default ink color to the given color, and sets the icon color to the given color unless `icon-color` is also used. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color-or-map)` | If a color is passed, sets the default outline color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"The Material Components for the web 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/density":"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/button_15.0.0-canary.0e89aab6b.0_1673453915096_0.2947448084351758","host":"s3://npm-registry-packages"}},"15.0.0-canary.b0103d10a.0":{"name":"@material/button","version":"15.0.0-canary.b0103d10a.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"ba2a47edcd4bd4aa7a51d7877da013c17c0a672d","tarball":"https://registry.npmjs.org/@material/button/-/button-15.0.0-canary.b0103d10a.0.tgz","fileCount":40,"integrity":"sha512-eVxQLVPTOCm5n+xjzkLeXCPyOSL1pYz7t0As7KRhNrd2qlzKFqDeuueBwzPl9HW2VyhrCSo+1apXKkWPHKKEKQ==","signatures":[{"sig":"MEUCIQDgjLTTgkAxc6Bh8BCzEJloG/mq813ZlqiHSJBozOzzrQIgJ5t5DxOFWLbE8F53Ia7wRW0mIWaFTMCLMDimwyMw2wE=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":648698,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjvwpGACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmpdzw//dZJzq7j1Sx4flFsgbqB1ufryU9igraK/d3RRImJFbTBJL/fG\r\nfDIF6MUocn8AxKMigM1kayB+sbwtl5Ac41viGUpJeHOl0iVXbDSgPUVkWdUv\r\nsErkYeFjQoqGEssmSnfSNxO28ikD0TEyPa9na8B+4bhb7/fXgv2Pm74EiEjb\r\nvYXuG6HVVtgTa5BBHrjIJw6yycXjWN0PIbP9fFS27m+fay/CEykKI8LA8VtQ\r\n9N6UX5X2cRzgxhLALhA6QfCCqu87pqUt6gWCOd+DFVBD6XAYf5cjCHltKcaw\r\nP8NDfTJEKIfddhpdIRbkpDBPGFmNSeHPagteURcBWBWB/8glXgNUi05Om9u6\r\nZoyg7MXBcHYQAqjCeP4OQC4s5ov1qBcD8qHN+86oItcK0hAlLt71vqLFGCMt\r\noG3GGcXu3alyeXvqwyD3ObQnZS/ekPjpWXQaoE/9gugB4ahDtQMwJdWgjbty\r\ndD5gikPzc63w9oFInW6ZXd9XAGj/Unryh64soXNOJDl/DXmGFW4oBCYo2M4Z\r\nfYtkp3HFIH75G7tAspQe0l2qESR0zdLuAlPplPESV88VY3n76uQeo4P7V0ct\r\n0BbA2ondbF6tR0ucrfGnTfcZ+DGq3qJFsk6a5aRcBEt07EcGMiHL7agnMXsV\r\nKN/ljLrb6BlBom3RqmHLF2MgCdlsMLkofYw=\r\n=KM/6\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button/styles\";\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nThe `mdc-button__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused button.\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.**\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n**Note: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.**\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button--icon-leading` | Optional. Styles a button with a leading icon.\n`mdc-button--icon-trailing` | Optional. Styles a button with a trailing icon.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n`mdc-button__focus-ring` | Recommended. Indicates the element which shows the high contrast mode focus ring styling.\n\n**Note: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommend always including it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color-or-map)` | If a color is passed, sets the default container fill color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`icon-color($color-or-map)` | If a color is passed, sets the default icon color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`ink-color($color-or-map)` | If a color is passed, sets the default ink color to the given color, and sets the icon color to the given color unless `icon-color` is also used. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color-or-map)` | If a color is passed, sets the default outline color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"The Material Components for the web 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/density":"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/button_15.0.0-canary.b0103d10a.0_1673464390294_0.9803840065735336","host":"s3://npm-registry-packages"}},"15.0.0-canary.50e7a5312.0":{"name":"@material/button","version":"15.0.0-canary.50e7a5312.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"f95e52d213614ff693764bcbb4a093dc3359375a","tarball":"https://registry.npmjs.org/@material/button/-/button-15.0.0-canary.50e7a5312.0.tgz","fileCount":40,"integrity":"sha512-5/jjGiHQc5D8UGxjhTtnyfPMLQF282N/wAeqvei911xcf4XJH50xQfam6v6ku8XUySnXfqbY942pm7LbN5s2AA==","signatures":[{"sig":"MEQCIHswdmmLcBdUTpgNXt4VAVOtw899eQCxmb3n81eJ9y9uAiB9kq0QUKBHgXCCvmXZaKvsw3g47xVfDzbq5AhEQ5tOtQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":648698,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjvyIFACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmqg6w//Ubg3oIbydu4Mwnc9dJI3M/W0gWycyLezaq28KV3KMzaZ5PQ6\r\nFNEh15Xd7CNWJCKgyMA0FF7+px6GOy8qnOIhAKWKcPkSblA17y7JG0HoUjOA\r\n9AN5Xa3MA2uNLdKN/aY80+cQNRk7Mx5m1IX3oFMTwIbeAWJdFyQFYCTq7o0V\r\n1inEGEm7ov8bTV72NX69ElNRoMTR7KFgUtPj12hPli5igEH66MKEdIfl3B0N\r\nI25nrqc61iNt1rp26ccLfU8wk4nftih2rtjdpLvmdpLUwbjPJYQRjk6lpBtn\r\nhg2tYEenP1kct6QNwIuBeyIPKYIBEJ3gadRO7beuieJYCyg6q1WY1sqMNmYm\r\nsKW8T24+b7HDdxAC6LfySSR5TjYVQCciQ02yeButkO01f2Ru9l8DTvrdm+IF\r\n4UNZ3Hyj83DaWLYR4timV3iAjUyLdZN0FDs0jZAFaNQmGt5qgxWUlDuhR8au\r\n/ihFWCc/omVm5oePoNs7kEoONm1ZjUc/69YBOv3qnApD6E9X66BBCXPAKkZd\r\nhCJy5SjPzAWUPFSSIjkn6L/5BIkO+oK54hVzWvrulI/VA9+/TvmAA7uG6IcW\r\nqT+SJ530gHP5aTcxxIvUjS3qKvtedGwXZl1jUcG45X8vaZmrLXxQnSpGfuBk\r\n/DmkHA4R24GSAjytmgAULwwH0AdSdorBCfM=\r\n=LeER\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button/styles\";\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nThe `mdc-button__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused button.\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.**\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n**Note: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.**\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button--icon-leading` | Optional. Styles a button with a leading icon.\n`mdc-button--icon-trailing` | Optional. Styles a button with a trailing icon.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n`mdc-button__focus-ring` | Recommended. Indicates the element which shows the high contrast mode focus ring styling.\n\n**Note: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommend always including it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color-or-map)` | If a color is passed, sets the default container fill color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`icon-color($color-or-map)` | If a color is passed, sets the default icon color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`ink-color($color-or-map)` | If a color is passed, sets the default ink color to the given color, and sets the icon color to the given color unless `icon-color` is also used. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color-or-map)` | If a color is passed, sets the default outline color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"The Material Components for the web 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/density":"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/button_15.0.0-canary.50e7a5312.0_1673470468823_0.2197979009510933","host":"s3://npm-registry-packages"}},"15.0.0-canary.202823f54.0":{"name":"@material/button","version":"15.0.0-canary.202823f54.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"5e87e02cbf7e3994832d9bc5fc69ca444423e209","tarball":"https://registry.npmjs.org/@material/button/-/button-15.0.0-canary.202823f54.0.tgz","fileCount":40,"integrity":"sha512-kwsHvPr5TIhTmfQbTEVMBc6JZFVKgFIp2nJDJna/ziWAKQnR+ixlHBfGuC4zjjvnXcDQaSJQhXAfxK2ZPliKEA==","signatures":[{"sig":"MEYCIQD+fHuOo4eKqqQglU1n6CAjAea7oIAibzIRdmt7eflDZgIhAP9m0GNsA8FlgfvdmKmTiwJzeehs6uVnveEUHDb5tlT+","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":648698,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjvyvCACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqDeQ/+NSekprijOW4+nFjEZ6p6r6ljUF/n/8nlbiLZxh6EJ05mReyy\r\nHZyMlyMnGrlHoc2nnEwzLQBiJ9BOVeZE25TSQfapEOrCq1B7DJfiGpdfJ3EG\r\nr39SKYwxEj0t7Ap2iL4NUbzErBD2Ythasf843W6s3X8RZOFXDLVC4zewrCsk\r\nyQzQyMCo3mwT/B2TPXU/MI7jA8uc1VYWzdLgz0M+Q0ba9Gx0xE9bSX7r64OM\r\nwzm2v0ckBp1kw+OYymYiVOH097YuCDUyk7LBsHWZrR6qJClk9VTQX7bTF+DV\r\n5P06ggIvUXP00G6UJJwDHRayKeoGwHhTvD5zjgRUoLoK1L7nA3XndOx24oxb\r\nM7lOjiEb9sT33DQUuDCYi6/kzm1ikZRqyRCxvjEPFhgD43DODD/szEaaqdMD\r\nz4YGAfs8hPdE/n/h56LIiUf3F3hRAWsEu5wo2Wi8y3LfUVBK9H9kzEZbkr7y\r\nf6grilMsJRwg2URHiTJeOYkXSLHli3IPSt/Qv4TLV4BApg54Q6T5Y7d8dlAJ\r\n2G1oYY0CljQ9IqfX5V2lAovLdP8nHAvlBl0MkeyWoivwvvIXG5hJmboGIj5f\r\nWnUQT0VyCRCSg/tGpWqoQVUrTMSYxwvuyxhHt8lUqMMZRhtL7vbT8uIRA4N8\r\nKOPEvfyjZEmoLF6/+oZ7vveNXbgsP/uyQWw=\r\n=+cbz\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button/styles\";\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nThe `mdc-button__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused button.\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.**\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n**Note: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.**\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button--icon-leading` | Optional. Styles a button with a leading icon.\n`mdc-button--icon-trailing` | Optional. Styles a button with a trailing icon.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n`mdc-button__focus-ring` | Recommended. Indicates the element which shows the high contrast mode focus ring styling.\n\n**Note: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommend always including it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color-or-map)` | If a color is passed, sets the default container fill color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`icon-color($color-or-map)` | If a color is passed, sets the default icon color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`ink-color($color-or-map)` | If a color is passed, sets the default ink color to the given color, and sets the icon color to the given color unless `icon-color` is also used. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color-or-map)` | If a color is passed, sets the default outline color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"The Material Components for the web 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/density":"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/button_15.0.0-canary.202823f54.0_1673472961775_0.3733277191345794","host":"s3://npm-registry-packages"}},"15.0.0-canary.199fe2a2a.0":{"name":"@material/button","version":"15.0.0-canary.199fe2a2a.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"50b009649a3e45435c668b2d1ffbdd2fb9ec5d9e","tarball":"https://registry.npmjs.org/@material/button/-/button-15.0.0-canary.199fe2a2a.0.tgz","fileCount":40,"integrity":"sha512-PT7PclYoprSGI64Zfv2ErOM6BRjvdgaSnzYXN9zfeq1U1o0w/yTQRqFnqtGiw3Wgui7hMq/FK53WiitYBmsBJw==","signatures":[{"sig":"MEQCIFPad3ZzuTj6EbjuFjYTdjDIkNMnB4Ywzv7u017F/zi8AiA4XV4aeozugNLw9DqWim0/0zFUGkfaB6h9tnT5bw9D6Q==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":648698,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjvzBuACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqaQg//SrIvHH5CQGh+r8q49QwI6+lcJRjKlwhOKwgZjPl8O1EVHn0w\r\nboMcn8yJ9GHPd34gdf58amGIJukY7H6Cp4UPOJZUqkbZqzjb4DoAexwo94VS\r\nvRy01RN8veUODqdZfp37xvuY6eQLW+BWf7EWfw8WWlgTSNPpP0sR/Syc5oE1\r\n9b68gFnkmZiltI/0mQkdqIYCTssKQLq4AI4exBQggvquluP4nkP/oXguVQBB\r\n722X6SxVcigdU7TkYeWSp1dcD1sNJTRz3fShI2xlTlvkXXlspflR/AsHU06V\r\nc5GeQ2hEm956ybRsVSbFp+hRlbmxbjXXaLuycH7SN9yGaVOmjrOtuUJUFnnb\r\niHdQmyBXarS8BNQlfQJqf19H9zWQ/TfrFlbtrVcCGtJ/K32kAvU9/VH8AQV3\r\nFunqEmrkKs2fN03+Y250nrPzFQUS/Ox5RAoz4kk35VZ0kjMgB/7U1FoTizp9\r\nIULghseJ/zTTYjBTf/J+j1qj2SopNt0TBLnObIn4FzpjvBPW+2b08WXU3bTA\r\nWHsbKdwhF7PuhKdK7a9CY23LV+d+yz4ZxGjRTJx+Kf/F9FGULJIvSmzA4elV\r\nq1SQY8aMiDEzrSFKPngjR7JhLgWBOwR0uSdu60+DDBeH3+gDGuW7YHeMu3U0\r\ncLA5DPzm9Ks8inqqAXSpJMujoDtqk9AYInE=\r\n=0Spq\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button/styles\";\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nThe `mdc-button__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused button.\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.**\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n**Note: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.**\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button--icon-leading` | Optional. Styles a button with a leading icon.\n`mdc-button--icon-trailing` | Optional. Styles a button with a trailing icon.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n`mdc-button__focus-ring` | Recommended. Indicates the element which shows the high contrast mode focus ring styling.\n\n**Note: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommend always including it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color-or-map)` | If a color is passed, sets the default container fill color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`icon-color($color-or-map)` | If a color is passed, sets the default icon color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`ink-color($color-or-map)` | If a color is passed, sets the default ink color to the given color, and sets the icon color to the given color unless `icon-color` is also used. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color-or-map)` | If a color is passed, sets the default outline color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"The Material Components for the web 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/density":"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/button_15.0.0-canary.199fe2a2a.0_1673474158072_0.630293875004355","host":"s3://npm-registry-packages"}},"15.0.0-canary.8c0786d6f.0":{"name":"@material/button","version":"15.0.0-canary.8c0786d6f.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"8f9f1b6cd09b582e5aab4f5a5fa870b3c180f4c5","tarball":"https://registry.npmjs.org/@material/button/-/button-15.0.0-canary.8c0786d6f.0.tgz","fileCount":40,"integrity":"sha512-VeZ557GCrbeoAsyt6AcVCi6T6bCI8jH48VlqwEGi2YJSr8IFSJAgQqX70m0NzOJU9bMI+no21wrdNmFQpQ/PrA==","signatures":[{"sig":"MEUCIDk5R6n5msEEAkfTPmMEKr6qvTdtNVl9d5BvGFNIg5J+AiEA6ghfqWEGgJgil5ODkWTKDfmJalS9iCvfuRDnt+g5CEk=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":648698,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjwBryACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpMnQ//Rxn0UueLLzAwfFl2ARcG1PjqmX9odFj9Af5t4IYZ2bH+oAes\r\nBsWJerjL5hO/D/clGvR+xT7SpUs3Fwj0CE7UQhncV+P5GkpVAUUDgE5XkVK9\r\nH/xu68zApUaex3/3G3l86E0ACt30fIqCqhzWgQ0B/67uxYyU/5VCNmEIt9kO\r\nInWMXFE5zgtQNFe8T2VFDVJiuk4qUj6KmSjWK/rHUJiy9k+ZXd4ZRCL9jzwx\r\np6aRpW0lUFngo6JPNbKPEWLJa53BE/HtTaRYeCon8RNITaALArIJjhvtWw2U\r\nlVvmO62H1P88sqBoxDyaktWEdc7tAUu/wJOdob7TyTRefjvWe7yF7k/Rw3b7\r\no5KedUprU03YTS8ba5Zf2av/IUPOK9IqWkDqxuGxWfYibQjfXm2vjT6o/EAm\r\nNOdXkZ/6BWEm8zv7yeDc0GKz0atcOC0DF7cJg2yTgq/lSiR/urMQNoc8vczK\r\nqCLG7qEl/Sqf1TdWP5ucTrJu1SWzMJgU5tX3lfHJYdTMblPehz4leDaCfc9z\r\nfq80mstSWYFcbfKaZKFLJkqmQoe/l/oa7giMOpn25GHbX0UCIMMt3Zuzaxs1\r\ntVD/tH/geeI3ydP59cXvcTq085Z2SLElxbwN6beuAJnXmsunSmqytdIPdojo\r\n6YjdGhojkqxvC+LtAe6N6J18aZHvTZA+rTY=\r\n=pfl+\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button/styles\";\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nThe `mdc-button__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused button.\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.**\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n**Note: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.**\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button--icon-leading` | Optional. Styles a button with a leading icon.\n`mdc-button--icon-trailing` | Optional. Styles a button with a trailing icon.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n`mdc-button__focus-ring` | Recommended. Indicates the element which shows the high contrast mode focus ring styling.\n\n**Note: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommend always including it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color-or-map)` | If a color is passed, sets the default container fill color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`icon-color($color-or-map)` | If a color is passed, sets the default icon color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`ink-color($color-or-map)` | If a color is passed, sets the default ink color to the given color, and sets the icon color to the given color unless `icon-color` is also used. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color-or-map)` | If a color is passed, sets the default outline color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v14.21.2+x64 (linux)","description":"The Material Components for the web 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/density":"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/button_15.0.0-canary.8c0786d6f.0_1673534194011_0.34056686505315326","host":"s3://npm-registry-packages"}},"15.0.0-canary.8a74f7c6d.0":{"name":"@material/button","version":"15.0.0-canary.8a74f7c6d.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"3578597d983e3913ae821c7c2e8a6b6f249e0e77","tarball":"https://registry.npmjs.org/@material/button/-/button-15.0.0-canary.8a74f7c6d.0.tgz","fileCount":40,"integrity":"sha512-xaIpSSc8IsPyBKDS8IRDMjVunSpuLxV96mrSiHcV/n6BQIUzpWzZ2EV0mAxiPOpiFE1f5YrYOfwyx7zoH/pY4A==","signatures":[{"sig":"MEQCID1TOqu3lwra+HVR27mW4TsJOMIHSalOcInOOq4TIFFyAiBd4qRFZYdyGDMiXdKblpI9OH0FGuV3REws/LTtzzqTQw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":648698,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjxvYCACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmomhRAAk0dZo1p35L1FgNFGqNMaAUyphefm/Q6KUoN6GGvIepd+Xkgo\r\nSVK9ldaYYcYrqfVRXd6BZtANuI1e7HKnPCAsNHlmPuoJBvFU+yGkNHa/Rr5y\r\nzKzDJa9Z90HD23Uz2VBM5iJ1IwBmQUzed4qm/l+1kXtTkaIBpH6G/ZDS9ygf\r\n3kj9rKtexki5Tgc9WERAOFqUPZK0WL3/jxke6w8zepeuj6sUHOYCOD+N2EGo\r\nVzC+Tya0iUPVd0qfl7kKlNv98PAde5IcGmsgCh7LaOxNqxnSFq6s7I9ug7cn\r\nGVBTpnC/PAcM1xGPelw6PnSZwue33eWQKpB34qtQd9cdMkqqegchRZveXePl\r\nni0E84Z1EtFfIi5Ho9cKGehbxGX+0cjNwcz5s3pMZ82vIM1Cr1TzV2mzqlAI\r\nML+6JZe1Qt0nsz4pV9fwnM5erFsLkTP1qaDTbKwzzhcOhpOINtfxL3nap1w0\r\nHykdyAzh5/NJzEBkKnVDBYrshek6HOZkgTXM/XUfnTKkpvUN31PZr3abMUuD\r\nLBFSttqbEhwldiUmKUv5O4hbc7/eFXOlzyvXMVpVs11Io14mREYsKTC9huc3\r\nG0ZzezFQgOr8qnfPH+Y0899d9SKp0Yi0fckyluhC9ZOBuid1clq1+XKaHuKu\r\nqZLQBnf8e1Ab1oASgIwAznPs07M+XToah78=\r\n=TkGn\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button/styles\";\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nThe `mdc-button__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused button.\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.**\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n**Note: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.**\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button--icon-leading` | Optional. Styles a button with a leading icon.\n`mdc-button--icon-trailing` | Optional. Styles a button with a trailing icon.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n`mdc-button__focus-ring` | Recommended. Indicates the element which shows the high contrast mode focus ring styling.\n\n**Note: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommend always including it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color-or-map)` | If a color is passed, sets the default container fill color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`icon-color($color-or-map)` | If a color is passed, sets the default icon color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`ink-color($color-or-map)` | If a color is passed, sets the default ink color to the given color, and sets the icon color to the given color unless `icon-color` is also used. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color-or-map)` | If a color is passed, sets the default outline color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v14.21.2+x64 (linux)","description":"The Material Components for the web 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/density":"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/button_15.0.0-canary.8a74f7c6d.0_1673983490481_0.17339202425665046","host":"s3://npm-registry-packages"}},"15.0.0-canary.b4687fdc1.0":{"name":"@material/button","version":"15.0.0-canary.b4687fdc1.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"8ec5fa7603c8468cd88ae683c432cc427b0f1c11","tarball":"https://registry.npmjs.org/@material/button/-/button-15.0.0-canary.b4687fdc1.0.tgz","fileCount":40,"integrity":"sha512-ZHhuDuL31gNdQQlL0qjf12WuLdzXTckNO1qPdxkAfUbQozYY125rdEUljl6qe5KP/0Fed51gjWkbp4g0ml6hGg==","signatures":[{"sig":"MEUCIGwe4gCcvBLNjtBV9JLWX7KZw9kxObYEBDuJ3Y5WipfkAiEA2lU0yVWtms4OHcaVnQNVMgfaV7c2DZ/Qf3gWKlJYEHk=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":648698,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjyZ7NACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpGGg//SC8NtCwqEnRCPoDRSm1qhWfgFCrhtQ9pYJwZC6/cy56vfAdm\r\n6oP3MmOcQTwBaZNQq/qDy1xD30T7JPsh8wyfU/eAi6hBBrqPVGbFu0LjQ+i9\r\n0i5zURmHeOfwHgVHNqbl7FWc23y825OFz4mdueWTdsGtIq+z9Do4CeJBW7KA\r\nNseHGtpZIbt3E6u3Qfo/f4JzMMaxHnl0zOQEYmZ4JOAhzocffIOw9xOw5vk1\r\nkmtSUsud/heQ9kILt+qIYWTfLpABrojTgMIJW9/mS3hPBxpFuGLBWVVMytKW\r\nfEd6GymVaEv1iLWtQGXP7T2MsB8RqwSKk4ppQTt7Q4ejZmhFZXjztPaQztjg\r\nPfWvpzSfS8qq2XNjT66PulI2W5lw1Dff859tEn/SiDes1acAZ03I5RGji80V\r\nmwX+Kq0elm1SNSBk/Np1cTAnYtOw1inukGOggptr4RGQjYUU41ZoHdyWPeQf\r\nRycmRoBluOg55OZkeCvQoriFm/t1MUQboz+wijYAP5v31777yXoPjDykbwOC\r\nbaEFfgInpefj2LBajKDvR3IGcVLUlQaOLI9Yc3MjgM2dj72qE0U6hKNk0EK0\r\nvelRCxLDcnAGoLEefdVUOPj1SzxTyiOIsjjU8BXRRPdu8LMjWZmtQHzSLU8i\r\nxzAiLwrSPJcjkY08mudDooutPDVEN5vIWBA=\r\n=1isp\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button/styles\";\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nThe `mdc-button__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused button.\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.**\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n**Note: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.**\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button--icon-leading` | Optional. Styles a button with a leading icon.\n`mdc-button--icon-trailing` | Optional. Styles a button with a trailing icon.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n`mdc-button__focus-ring` | Recommended. Indicates the element which shows the high contrast mode focus ring styling.\n\n**Note: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommend always including it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color-or-map)` | If a color is passed, sets the default container fill color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`icon-color($color-or-map)` | If a color is passed, sets the default icon color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`ink-color($color-or-map)` | If a color is passed, sets the default ink color to the given color, and sets the icon color to the given color unless `icon-color` is also used. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color-or-map)` | If a color is passed, sets the default outline color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v14.21.2+x64 (linux)","description":"The Material Components for the web 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/density":"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/button_15.0.0-canary.b4687fdc1.0_1674157773675_0.9366199880502917","host":"s3://npm-registry-packages"}},"15.0.0-canary.b836b9892.0":{"name":"@material/button","version":"15.0.0-canary.b836b9892.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"8cad79ea90edac7f7ad9dd2193bfeef550a577ad","tarball":"https://registry.npmjs.org/@material/button/-/button-15.0.0-canary.b836b9892.0.tgz","fileCount":40,"integrity":"sha512-V+qn6X6egDQbWumpWnOIjIawBZ/XOLJqhwyHfvLe0Z2JYVQZ1C2+tsa83+YmD7GclyTcb9T8BpX1kxL8cc989w==","signatures":[{"sig":"MEQCIFpcPVw+NWvNq3HPxfbgJ1l+r1W1Hm0BTwR384Pe85S1AiBOvbMYVJX5Z/+glS58h0r/W0rEusz/AQWeuYqVlv6bUg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":648698,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJj0F4fACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqOIA//VGn6d5W06KwuYLTVE/mDXdlml1tJQH2n/LeM4Y7RQnB41zgQ\r\nO2sdbpCAUpiF/ewcerMRDUTUL8eXxMYTK8DzlCgdARyvGLfnpEPViVSobqTb\r\ngLQtjJsO4mV1BSEbFTHcKXUHLGvH+sFhqB+KnIZveS8RVwMYyNWqcOjvEbDI\r\n31ffK/ZP6T7Jyy+g2c/gvDRDIwB64bPCjnHU78O/fiWd9dgcFXSTemHbfTRR\r\ng1P3PXymz0Ok33ZFDsZjrt3IW/ILmKjLqDAqqKQIk94wEgz665bMnzKlGHgq\r\nsTC18NSbPazl2DbJV9atTC/9Z1Ss7N/PvIQxjBBfbhlYl3LvKrHiM5VJGTRB\r\n7IuFOkFp5i9wkzcEXDvxLRU2LJc3t32iMH4CaHsWmVr9FUoLCHQIHHIlVESz\r\nhP9qdmu4uqJ1LSujQN65xu0z+xS7HJRXbu/qR5zpSlDs/+yGBw3Ec6+EQEKi\r\nNqzVPonO4gqaeEC8rzA6FgWewLh1yOq/B80OCYoVCv/wD7OXf2ZYXbvDPAQW\r\nu+Hy4l+ERs+cuseqVWBTMsv8DMGhqWPSlcSava+P8AQKhEJXAfd03CaQ1cNZ\r\nJOlH5QU4bVxPdf1Vr/fs7swpsJib4S45MhCu8REBrDAKA87/1m9WzqwLs5Dq\r\n/t1HMc/GB3rCm4SUytcu09uXxUHV9l3M9jw=\r\n=37i4\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button/styles\";\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nThe `mdc-button__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused button.\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.**\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n**Note: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.**\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button--icon-leading` | Optional. Styles a button with a leading icon.\n`mdc-button--icon-trailing` | Optional. Styles a button with a trailing icon.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n`mdc-button__focus-ring` | Recommended. Indicates the element which shows the high contrast mode focus ring styling.\n\n**Note: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommend always including it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color-or-map)` | If a color is passed, sets the default container fill color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`icon-color($color-or-map)` | If a color is passed, sets the default icon color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`ink-color($color-or-map)` | If a color is passed, sets the default ink color to the given color, and sets the icon color to the given color unless `icon-color` is also used. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color-or-map)` | If a color is passed, sets the default outline color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v14.21.2+x64 (linux)","description":"The Material Components for the web 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/density":"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/button_15.0.0-canary.b836b9892.0_1674599966785_0.28911025113675404","host":"s3://npm-registry-packages"}},"15.0.0-canary.e8912fd37.0":{"name":"@material/button","version":"15.0.0-canary.e8912fd37.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"d4a373d27408d611cf120992dd820edf4fb666fc","tarball":"https://registry.npmjs.org/@material/button/-/button-15.0.0-canary.e8912fd37.0.tgz","fileCount":40,"integrity":"sha512-crDilq0OiWy2yBNmgI8gJ6rsFhJeRVWwc0qs4wQjF9yeK/oMzEhxDXENvSDryPvWRJYag9mB6H+erMRpszJFPg==","signatures":[{"sig":"MEUCIQCzAkhKWxQsJzk4Fz+oyWpnWbKhRrTnAZPLbv0Oy6+kEgIgBz2qSTPV18K1vawG/BIG62X+uSAhbx8T4I05BJZE0v4=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":648698,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJj0sasACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmokxw/+MpC394iBXs2E+aU27mR5Z4XKTayYAeAgbey0QUtaT2jdNBK0\r\niSESCXn7/CxXCHvGaMhtGJjCIDhCLs6El3Rpf2ycm1cL2vKS1FMu1QObxK06\r\noarTmNljpfscPtNaUxHIGGjcehGMZKA9ZFfN8dHiFuAXZqno2+TlMbHPKQYp\r\nfpj2I3V3cyl4Bxb5HP66riThx4/ZieGgMfa0CPFgYwYNVkoETbIpbpSPh6WV\r\nTxQBhReLXAt/ENSpz0zI2X5aiN/SLbKkD7S8yJ0PzM73nWFwQvUdkJZR3kqL\r\nzrc6pGnfsyiJBgE6cmhJuCKkPozUJ0P7cB72YHe/NvRFrGb0dyAxkBj+7ist\r\nacD3S5F/rM0/vWhNmSyf3gQeS4aXQbagVT1YOpKqzuYEYXU1D/MQStLbrys8\r\npMOnitFtohn7BVpiWq+GNLRIYK8Tz3SGYLcv+DsIH+dPxygdxQNdIqc5eibD\r\ng8ZbQ+mfPbi/hzqGkvivm//VCDDJMuwVxat20F0SNGOV0CNmZIcqvtvahIjY\r\nrZVYDBxdGnlqctYdPddQl5CCK99H3/yvclnVqUH/MUFCjXMWE6ojqbQhp02q\r\nRbiZGfa1hkIREmMjq2dRGDdYoVOhdTe+Dhs0AuNnDs3d+aVGI6uSx2yrad48\r\nsFpvJ0auaN3SG9Ume3G9sR7Xt4NynjjuR/g=\r\n=8inL\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button/styles\";\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nThe `mdc-button__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused button.\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.**\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n**Note: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.**\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button--icon-leading` | Optional. Styles a button with a leading icon.\n`mdc-button--icon-trailing` | Optional. Styles a button with a trailing icon.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n`mdc-button__focus-ring` | Recommended. Indicates the element which shows the high contrast mode focus ring styling.\n\n**Note: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommend always including it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color-or-map)` | If a color is passed, sets the default container fill color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`icon-color($color-or-map)` | If a color is passed, sets the default icon color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`ink-color($color-or-map)` | If a color is passed, sets the default ink color to the given color, and sets the icon color to the given color unless `icon-color` is also used. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color-or-map)` | If a color is passed, sets the default outline color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v14.21.2+x64 (linux)","description":"The Material Components for the web 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/density":"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/button_15.0.0-canary.e8912fd37.0_1674757803602_0.9357536639962789","host":"s3://npm-registry-packages"}},"15.0.0-canary.16fbd30ff.0":{"name":"@material/button","version":"15.0.0-canary.16fbd30ff.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"204391ae6225784c053c76245d210f0f925feaa1","tarball":"https://registry.npmjs.org/@material/button/-/button-15.0.0-canary.16fbd30ff.0.tgz","fileCount":40,"integrity":"sha512-YER0xWwEz0KjrNcEWfL+8mFVGkKlB8H5SWyu7hs6G0uRl+UWNza2gsukRvDrJ1xF6eBna9ZlX2Z8yPfGGs2A5A==","signatures":[{"sig":"MEQCIFbD0L3TYx4dbDg3x/DBHtf4r/LtpjGsblmbHE7b4861AiAN9L/LohAgsqIthSnS+wenqJbVpCJze3ppqFwGNM32hQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":648698,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJj0sf1ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpUlhAAjI/95aW+l+mlOCSHwHD7fLla3aXmd2C8nyb7CE5rkcOdkfaf\r\nrMv9YZSVIJX5/J5ey5oBF1BAVrnmJddoDlzl+TUHkxkq/wnlQ+QC798OyZ5J\r\ndJlxVQJrAUyF7FwZZq0LQSV0tnDjOXUKyTnAQyZtVBzk9uPw+xM7kHyfUc9A\r\nA/E+oGz3pPrflm0mzjURCW7EV067WNZ/Wz4r25mLn6v7fMHHRVR6xRGd3geo\r\nmQVRUmFl6+hEYBt9GHDuxko1WHj6+G5wQeKepvD+4+83/q5uAv/12QyyQ9G/\r\ntwocOxJadBUrXB+BlkxXAcch2UjUxsGMG4jD31ADjfELgYAD0K3WGGEgFxKP\r\nPd8mj+ZkYe3te0qJ1sst8XETSwFKX7bwbo0YXgM5t7QTk/mWOMj9WTI07MRA\r\n4zOSBOFKNAvfj6Fi/Kk1jn9QsVNP+97XO1wxQNfGO6KRT0ER10BpS1v11m7k\r\nnw44AGHnetq9qXilYyTcaaKA7ttYeT8v37bg7tTihLXVQiF85WByhALSXs58\r\na6vin8JOz23LypwSrRjZtgoDSv7wqEup08/kyVuSQWzwzdCtG7YOtffb73t/\r\nfbc6XzXVrEU8YcmTcWefP1hm0lODINoUWbvdffwKDYWRFlpmkWEby0g+74XZ\r\nvqsh5V4peBmbuIKlIJZXVvqCDT5HqW1Fgjk=\r\n=3B1C\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button/styles\";\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nThe `mdc-button__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused button.\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.**\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n**Note: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.**\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button--icon-leading` | Optional. Styles a button with a leading icon.\n`mdc-button--icon-trailing` | Optional. Styles a button with a trailing icon.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n`mdc-button__focus-ring` | Recommended. Indicates the element which shows the high contrast mode focus ring styling.\n\n**Note: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommend always including it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color-or-map)` | If a color is passed, sets the default container fill color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`icon-color($color-or-map)` | If a color is passed, sets the default icon color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`ink-color($color-or-map)` | If a color is passed, sets the default ink color to the given color, and sets the icon color to the given color unless `icon-color` is also used. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color-or-map)` | If a color is passed, sets the default outline color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v14.21.2+x64 (linux)","description":"The Material Components for the web 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/density":"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/button_15.0.0-canary.16fbd30ff.0_1674758133572_0.4243730105049359","host":"s3://npm-registry-packages"}},"15.0.0-canary.033ae083a.0":{"name":"@material/button","version":"15.0.0-canary.033ae083a.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"c280d8e94296b41a86c7fd76ff61eb6f3c7c94e5","tarball":"https://registry.npmjs.org/@material/button/-/button-15.0.0-canary.033ae083a.0.tgz","fileCount":40,"integrity":"sha512-BMV4lZAlPMokhP1SOEUIcu+vXq3epV+WlhC9Rqzyb0hQ3myWnBXmpjMYnnRMtXAuW2mntIVS9jBobFDQn/Ad1A==","signatures":[{"sig":"MEUCIQD646baHecdh5SeAT4cD5NV0tMVF0NkPNcyHi8KJtCUMgIgfZXLlUY7Fk9GShyAGEH5NkPzRQrhV3BAflX/tibJl+M=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":648698,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJj0tQJACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmopkxAAlvH1yMmF+xAQN4hqiiVX4TdJE2fbLw8kP080lUrnHX6E3nac\r\naNjSNNksl8soca1AKH7cf6xFcwv4hCa/4KKMmlNl6oZ2CyprQo7HRzvR6Rxj\r\nzoDHcxrI5vTdrBfLpqfA50pFby7VdJF/8gpDUfOCMGOHrIitBMdk82AdjDkT\r\nNS+z+KJkVq/xj/GZeosAryeSyCmNGkHoAgXaFQwoGyJ2KwVIpX8Faw1uFk2Z\r\nQyieHu+D/GBH8bUKK/F9xNlD58/JL74kfr8NCJ69p4EXbXbc1QSo95U6s6xR\r\nvULUfcztMMyk2bxvJbzcdxYrUpmwcoRSaxqx/TCvcr4mMKGC/3me/hsuHLmC\r\nw5gVr9FBd+iehLcdOSVJPdF+vIMrfe1YGeRblfq4MxkOyCZgwHIY7uKWUYcN\r\ncWPVNSG2RWA8nrHQjsz9wJ7L13eu4EvfduTCsh9o+f+ps/NJx6ghTu+fujUV\r\nkw+qPX2dWz575OCMk8I6FhY5K8d5s73jw98yUKOtmeHPrZKs9QXTltRidtdC\r\ntffy6+4L6wKD+O3jbAVdrUy6OXZ//3ZnAwenGAloRmhqS5H0xMyKRsf29HEo\r\nROFpHrlIgiljn1S8oHI6hlMWWbcV84Tgn1HE9bWgLNtIIYBPhj00rpmGE8Hd\r\nF3d4BCH4SnFthf75AFG7bpNQ2VXoGM8NuOI=\r\n=5Bmv\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button/styles\";\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nThe `mdc-button__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused button.\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.**\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n**Note: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.**\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button--icon-leading` | Optional. Styles a button with a leading icon.\n`mdc-button--icon-trailing` | Optional. Styles a button with a trailing icon.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n`mdc-button__focus-ring` | Recommended. Indicates the element which shows the high contrast mode focus ring styling.\n\n**Note: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommend always including it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color-or-map)` | If a color is passed, sets the default container fill color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`icon-color($color-or-map)` | If a color is passed, sets the default icon color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`ink-color($color-or-map)` | If a color is passed, sets the default ink color to the given color, and sets the icon color to the given color unless `icon-color` is also used. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color-or-map)` | If a color is passed, sets the default outline color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v14.21.2+x64 (linux)","description":"The Material Components for the web 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/density":"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/button_15.0.0-canary.033ae083a.0_1674761225144_0.32511466209377393","host":"s3://npm-registry-packages"}},"15.0.0-canary.3a705fa1d.0":{"name":"@material/button","version":"15.0.0-canary.3a705fa1d.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"4bd50127dec44634545674503443083414157bd3","tarball":"https://registry.npmjs.org/@material/button/-/button-15.0.0-canary.3a705fa1d.0.tgz","fileCount":40,"integrity":"sha512-TJYNA19RcYe6U/3nP3iULlPQJsAemXVnok/ZM7Wf/mg8BuJpPsYVJoBgOGqfPQC5Sr+vF8rZAdOAZm2ruX/K4w==","signatures":[{"sig":"MEUCIQCH4/U15ZwV7XAQPPYCjFVghvl0GJ9DlmeG1yHPUK4bbwIgF4b7Kh36/OzZCbFNWZUdLg01mQoiqhe2oFKc6S/m+ik=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":648698,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJj1FOnACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmomjw//Rn0sAQal8XEzInumiI8BnlJ2cqIlIIRzov4VVTIlvcSwgKMZ\r\nIxHBneGbKrm0iBrFAoYwMPyoBBh6QmZss6q50VemZBU2kfqDF+CSb/ZGuZ6D\r\n8RoYzL1qtpB4UUFi0eiuLts2BTgvxGPqivCFW6C8gLtjg11OWh2VDlPeDtNl\r\n0Z0/myvzpmhQVeHZyksizlesSlQ1weTJtzwpibNatHE7FTJhHXYPJQlQ68RD\r\nOQVPW69JgAM2OHX0w19qv55FfGxndHREcubRJKjqlDA5qa4RuVS9h6vR6KQo\r\niA7fIZ+9LWj+BxmaeOfcX1h0O7qB4TJ3fWdPYNnQz4oMo4poEbO9+K8S5Nia\r\nMnRNdSA1F4UK5CUj7dCRK94WmzAcbj+Jvh2b0+v7N+9WVzt/OTL58ZqO11Qq\r\nLijisXvebgZ2bpMUwKM2EBqxiKnwGk56rYSzMSZUQE4ndvwVVGnQzb6MXGW3\r\ncEisyjN4bpLZNoDwmF2tMrstUFa4n/DofCXoFk+jju9UYzzxiNfa4rLo2rJw\r\nKM6smBwPlca8vwjxn0jn8xiEo8a3jFgYmoEgrb3Qt5gvdMCpFyPZAImHV6Lo\r\nqlWLS6+2s6gFWjHS/XiNU1R7AOOjGj2GYPwswE6Db9aRWegRwN8dXaKhPQle\r\ntJhn9hkdwfXEffsIRBmKT3+UdGwRuCG5T3c=\r\n=GUeR\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button/styles\";\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nThe `mdc-button__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused button.\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.**\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n**Note: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.**\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button--icon-leading` | Optional. Styles a button with a leading icon.\n`mdc-button--icon-trailing` | Optional. Styles a button with a trailing icon.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n`mdc-button__focus-ring` | Recommended. Indicates the element which shows the high contrast mode focus ring styling.\n\n**Note: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommend always including it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color-or-map)` | If a color is passed, sets the default container fill color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`icon-color($color-or-map)` | If a color is passed, sets the default icon color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`ink-color($color-or-map)` | If a color is passed, sets the default ink color to the given color, and sets the icon color to the given color unless `icon-color` is also used. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color-or-map)` | If a color is passed, sets the default outline color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v14.21.2+x64 (linux)","description":"The Material Components for the web 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/density":"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/button_15.0.0-canary.3a705fa1d.0_1674859430919_0.884463959154411","host":"s3://npm-registry-packages"}},"15.0.0-canary.d6bea2ff2.0":{"name":"@material/button","version":"15.0.0-canary.d6bea2ff2.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"164e98ee5040fcce7a257b83ac3ca397e4f32b06","tarball":"https://registry.npmjs.org/@material/button/-/button-15.0.0-canary.d6bea2ff2.0.tgz","fileCount":40,"integrity":"sha512-Q9q688kzMTdz9abk1ihwm1mpxZwV0QT4Q3s5+kk3OhBiF15zoDLBCdOcza7xifx16mYzaMpxkxzBQe1djRVtrQ==","signatures":[{"sig":"MEUCIEPYLRapEYax2NQT9+VSTGXiZ896FHHcHwfjb41IlJNWAiEA9ePaCXgH/9r5V3KNOW6wy+fJuZUCo80z/ZyXLNsSnLo=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":648698,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJj2TQLACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpGow/5ARiURMeI3cJu9iEwAI1Lp2stEDbGYB6Hop7wCLbTLCv+viGu\r\nfpsRToBsIKpFxLPEanOS1KII3dbhM2R4QbIsYbi5ca/gmFBoMe9ophn614co\r\nk2As0brug/OC/X8ubsenc8I2i6BzqeTcMbsoeOpjgep6rMeTuTnYvqwuaRDb\r\nqjlP55JvCVNjE1O2kC3pV4Sr6Lo/iEGzZFwkS9LNVFK1zO3TOLxxM2G7bYGK\r\nsqL5rcVUabAzBlGXw05RTOWrrfmlLxLdBWqsEmC6Ip7iHnhes09O81w9u2Ht\r\npTtl3Mgzzt2sgzpqgqdS0JoDEqLvRuzsa/daJrqR01TXdKXRRXP3G8izFwtd\r\njvdiR1NSLIPJe33xFw55InWT7dIzRPXlOzj0GT89E8+oVSluNv+Ja9kSu1Ti\r\nvbFLM8SrXPGAnRYdKwQCxt25o+bEqXNmXy72LfmIh2njJaKN239zAO0G8/Q/\r\n/hsVwQx2+n1OGkLUW5sko5AuOsdn1H5sWoF8aAt28YzoczqZKZEfMsM60vtO\r\nyAC6YYDLxoQvzLQezAsN+ITRwXbV6Ce+ZN+ihPCty5SSf4CLSXCc9q1B2DAh\r\nQpAAzNUQEJDvl4LvxzT012N7NOtfO/TqGTJe+hsZx++G80NNCSbF76buPeg3\r\nhCgtNEPqb/UIR3UJZQWquomcdfC8lI8RG80=\r\n=4aaq\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button/styles\";\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nThe `mdc-button__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused button.\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.**\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n**Note: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.**\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button--icon-leading` | Optional. Styles a button with a leading icon.\n`mdc-button--icon-trailing` | Optional. Styles a button with a trailing icon.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n`mdc-button__focus-ring` | Recommended. Indicates the element which shows the high contrast mode focus ring styling.\n\n**Note: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommend always including it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color-or-map)` | If a color is passed, sets the default container fill color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`icon-color($color-or-map)` | If a color is passed, sets the default icon color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`ink-color($color-or-map)` | If a color is passed, sets the default ink color to the given color, and sets the icon color to the given color unless `icon-color` is also used. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color-or-map)` | If a color is passed, sets the default outline color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v14.21.2+x64 (linux)","description":"The Material Components for the web 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/density":"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/button_15.0.0-canary.d6bea2ff2.0_1675179019308_0.8580697907914219","host":"s3://npm-registry-packages"}},"15.0.0-canary.0c94182c8.0":{"name":"@material/button","version":"15.0.0-canary.0c94182c8.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"33f7562b56331a71f40c3731d219739fadad932d","tarball":"https://registry.npmjs.org/@material/button/-/button-15.0.0-canary.0c94182c8.0.tgz","fileCount":40,"integrity":"sha512-dhKbbLCEjjaGQ5U5vX/gSdNsKaCGzioy/LjoTEXuDxuKZe/GKAPRNRBikOxCjL5Qc++v/6Uccd6Ib6rxZ/esYA==","signatures":[{"sig":"MEYCIQC7M3WLt3t3bOuMnplD4hSVIXhDxyEOAc7ccbpWoNvPUgIhAMHUMPQ1oke7kY++E1iIurucbC6pSQsBFAP1Q+88uKZV","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":648564,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJj2qT5ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmruNxAAn40vvLlhnEorLPKC0Hx58nEeaUNmuPRH5dn24jZKnocUHdxA\r\nbi+OT616b8lnST1gychvkH8bLaFyRP0hAZHG3eqewaWrR1+YmHA6/HJaMa5U\r\n9DaEw1NtJXxk/4ax/H8exhGfUSYWeaqnyquzrHDkm8TC+M+4LF+UpBurn+Ev\r\nzFoHaKHQaB73Aq7KtmgdltDskx41YJnrp002l8oqg2gh/mZlsAHfqYhPzGq8\r\nci49/1DhEpibaI37U5wJx6sz+plOCAAZiMKgAM7ArwuOQe9JY6c5ECymOynS\r\nW4FN4KAbOzPijYk6v0/dGaBnym6kZjTBGM5C+qex+RW9z5JgwImA+S2LJA5Q\r\n3Ko+3zGVD5S0KGUaww9Kj+e57nJL18k2EFMEakGaHkNdOcVWOYk2oYd9vb/d\r\nKveyFDDQi52lJdk4IYCNFftt95/cHkFJ8diK+6iNdPf0Lsyir1CxLC1qV6vQ\r\nOqh0MEbxdLxQ3G8Z92dVkq6P2C/bzr/jKkv43yNikpu5ikiBEztvSyt2KyIM\r\nu3wqlaTCbDbCo5EgCOEhFFJjw18fBQ7XkMSwrGDSYuTgWS8BXvxCicrQA6N6\r\n/skNkFXufN2hr87DoMl7YzUyE5xRZAq/62ucjvFTkg6tCoub96bpD/xh4UfA\r\nD+6iTNNjFHD5yPVz69AQO3B3slVv2oXmIfs=\r\n=PIs4\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button/styles\";\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nThe `mdc-button__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused button.\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.**\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n**Note: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.**\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button--icon-leading` | Optional. Styles a button with a leading icon.\n`mdc-button--icon-trailing` | Optional. Styles a button with a trailing icon.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n`mdc-button__focus-ring` | Recommended. Indicates the element which shows the high contrast mode focus ring styling.\n\n**Note: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommend always including it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color-or-map)` | If a color is passed, sets the default container fill color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`icon-color($color-or-map)` | If a color is passed, sets the default icon color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`ink-color($color-or-map)` | If a color is passed, sets the default ink color to the given color, and sets the icon color to the given color unless `icon-color` is also used. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color-or-map)` | If a color is passed, sets the default outline color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v14.21.2+x64 (linux)","description":"The Material Components for the web 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/density":"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/button_15.0.0-canary.0c94182c8.0_1675273465262_0.02359613893307899","host":"s3://npm-registry-packages"}},"15.0.0-canary.15b221540.0":{"name":"@material/button","version":"15.0.0-canary.15b221540.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"865a27d3d2c975f87c20120035081c2fc6643ac4","tarball":"https://registry.npmjs.org/@material/button/-/button-15.0.0-canary.15b221540.0.tgz","fileCount":40,"integrity":"sha512-21rg4NU+t/huA+kdIysF63tvCxD3oZWyeILfe6ZOlYJqD1T/CJ7BLPoHt7tsdfJyU/h80typN1z5Fo+p8EF6JQ==","signatures":[{"sig":"MEQCIAihvN7oubL1IJ340src4vN22IW6rMjCiyaULPya58QGAiBhFcJCCFRBvqFDOxi+DbTfD+aExPrgO0lJsXrNGfwgkQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":648564,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJj2qbxACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmrf+w/9FehwEHi9Wt+YSFcCyBE6gpBuKojPc1ex2wTBertSPx3O3Jg3\r\nRfFSgfzYk+ZP5KpDa8ivCpe45JAI1bOmDBHDQ3Taw/1/zQ8dL1awpcr3+uvI\r\nrXv6PeoZegwNnfOX23k9p0zBw6BWhty3m6hGexp1xHVsn9iKRK0jXP42/wj0\r\nkL0ZBI/hn1H99upeqTBcEc7oLiB2euuykvJ6z+2IHiWulOp3E+hXeixf0sfl\r\nVm+tmscAXV1QzNia+SaIBpbxrcOgEhImr0tomZYXM3QWFtWbk3BRzyAZ0LGm\r\n0LrM7N27vZGPoMAlqPn5tOAa7Xub4B0OvXnsvKc3Q29EGigx1fKorFg58U3Z\r\n0MTFscRO5D17TvGRi9dzPJZ8tplhPVQqh2Es5KTmZ2kItOHDL4UbXXSfO2fy\r\ncCnS0vgumXvl9gWOoVqtAhfZWyi2diX3nrlI8z1avNoDINFChxo8ObYoaV91\r\n4QH/wZOG0z0ztqSaq3xvnQnmfD+EJ4mE5cPBPx5sPfo9iYQt+P1PMJPfNGal\r\nyhsGyaPOyPHKrfTM1gOhyARGcB+ggNXKuUqbYyeE8K0JJSpY+1JRRoqYz6IF\r\nWC2gPZ8QS2IG1jE8EI9+RRDnnEICQ9Jar9GNBfbqqNWWrX4yTJBrIQLLhcHH\r\nl9cOqoMbdG+0Da6j4BBY1KYsC4vD7wBQAbs=\r\n=/Gox\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button/styles\";\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nThe `mdc-button__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused button.\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.**\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n**Note: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.**\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button--icon-leading` | Optional. Styles a button with a leading icon.\n`mdc-button--icon-trailing` | Optional. Styles a button with a trailing icon.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n`mdc-button__focus-ring` | Recommended. Indicates the element which shows the high contrast mode focus ring styling.\n\n**Note: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommend always including it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color-or-map)` | If a color is passed, sets the default container fill color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`icon-color($color-or-map)` | If a color is passed, sets the default icon color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`ink-color($color-or-map)` | If a color is passed, sets the default ink color to the given color, and sets the icon color to the given color unless `icon-color` is also used. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color-or-map)` | If a color is passed, sets the default outline color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v14.21.2+x64 (linux)","description":"The Material Components for the web 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/density":"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/button_15.0.0-canary.15b221540.0_1675273969059_0.8331751475558387","host":"s3://npm-registry-packages"}},"15.0.0-canary.eeebb8bba.0":{"name":"@material/button","version":"15.0.0-canary.eeebb8bba.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"85ad226c9d7ea7dd8e6b6face884e12c0006c695","tarball":"https://registry.npmjs.org/@material/button/-/button-15.0.0-canary.eeebb8bba.0.tgz","fileCount":40,"integrity":"sha512-isMcJuaEtz4bLDtpexOeo21joMA2IYwSyQHv93XhihBT5/QTWVaRzO+V00nEG2RCREbGCqAkjpBARdTJnz4B5A==","signatures":[{"sig":"MEQCIFlamDpfpoq+Ss0SC1eaXqrNGnYnyDQHIQIa9KOPaxQxAiA4amh1RpDr5+7s0D0P8d++Oee7FGkPHG+5THrp+1ncgA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":648564,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJj2q3kACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqMaA/+LjCG3ODsoyISuQ+6wAV76jQVIoPjRmu+U3/RNRFk2x3RLlpY\r\nK6FNKMt6jKzM4l9g3T+U9Ssw4bMsoZWv8kGcD4FC2B/pdR3qW62kw1MuXo6L\r\n3BcQVaJUtEGJhye6AcV20H3gFyB6dquLTeD5XkBq+x6hcoJBohczah91zGE5\r\nDO7j7MFKBX7XVWW2OJs6HH50NDge4V3YFfAFERwHP7OdphX5p9TyWLR8aWy8\r\nWRwPFrkIzRROjGYL2EOlFKnMFOeZ2CqlP8bxwUhVnTOnvpGVgyfcz8uGeIBO\r\nwKYBRN2YslleWdQ07izii5dx2XjId3Qk0oKPNx0ynqPHXnNiDa7H46X0qD1c\r\nwrvyl8AI5oDxmBWi23aekEvRgKOQ0poEvrk2nt9DnJYl67cwF+ep84+/irw/\r\nShQJJOy4TbGCPSkszwcAETg4xHVn0ZWDUCfgY+09JRaaqHz1Z4XOXsEw4E1H\r\nOkufQ3hXt7BHlg0YYPfe6zv4RLHnLWhM9Y3BQoma58hAyLB6zw4Tp3BDyLrs\r\n2jHnO6Hf9B6z0FBWk9wh/ufIXdh3LcG1z9GrP+7VNiMvQASUf5MqGG4ZdnqB\r\nsNbEhc6RLL5gzTxmwiQWM44eVwsyNX+p9UQcRyKGDWqa7QVaPxe0Kim0RidR\r\nDEJeIFe+W6X7309Qj3cHsIe69XMBqAG+yCE=\r\n=AXBJ\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button/styles\";\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nThe `mdc-button__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused button.\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.**\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n**Note: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.**\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button--icon-leading` | Optional. Styles a button with a leading icon.\n`mdc-button--icon-trailing` | Optional. Styles a button with a trailing icon.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n`mdc-button__focus-ring` | Recommended. Indicates the element which shows the high contrast mode focus ring styling.\n\n**Note: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommend always including it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color-or-map)` | If a color is passed, sets the default container fill color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`icon-color($color-or-map)` | If a color is passed, sets the default icon color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`ink-color($color-or-map)` | If a color is passed, sets the default ink color to the given color, and sets the icon color to the given color unless `icon-color` is also used. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color-or-map)` | If a color is passed, sets the default outline color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v14.21.2+x64 (linux)","description":"The Material Components for the web 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/density":"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/button_15.0.0-canary.eeebb8bba.0_1675275747720_0.8133613547038521","host":"s3://npm-registry-packages"}},"15.0.0-canary.6a4b3f834.0":{"name":"@material/button","version":"15.0.0-canary.6a4b3f834.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"20d2dfd79977842495b19c93b9fabcdd480c784e","tarball":"https://registry.npmjs.org/@material/button/-/button-15.0.0-canary.6a4b3f834.0.tgz","fileCount":40,"integrity":"sha512-0gI/Dy2bFg7EMfZ2cPt49wyK91dzrObp16E4hQRtKulwq6/UT3GY5pItxci9PzZX6j48CwUPlsY3/WTZ35CNMA==","signatures":[{"sig":"MEUCIQCjfeACXi03HahWU92RMfvNBf4Vthjq68ytsk+jHBxb6wIgKzyQQGMmXbimejGyACTQhw/PeLcww4Z558s5E+2wrHg=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":648564,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJj2rZfACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmobtg//Wi+4mjdSxu7yTYDcjCJus+TFrx3i8M/HDxhuRuWO9/9Xmrgn\r\n1oU2Y8uiB1OpCp2/47HWhUsP0NzgWIvxQVe/vVIw8Xpc5FzCOwslM65ORS5h\r\ntIkzwWw7ZtYcdqCaTyWFlDp66AO49nNX5c+KiABqzzt54tzh8UcwLC/t1z1v\r\nz2Az5tCZ5cFPWnmTu7V2IMmFi262p+fiLX9jqITwH/xNTsWG8bw5U/xUvur0\r\nv6yUWhQ1qTWhqJ0YO1BEtseG0Ns3WvLUjs9Zi/cuqyRb4x+CxcRRq2xSbwjI\r\nmPT4By3Q6fWfdDY2XDLj/XHNM+W8+KHHNnIhYoVpuRbaCutnHyro9SR+nEhd\r\no2NlculIDsAg+cF34B60ij/+Y1x7I4JPo+37e7me2IhDkOPZxgHCqzOsGwPF\r\nV6wod8o+qlOi9+p6raDlsmCjucBLJwAVCeDPfACTwl0i2QFDmVCB+fqxrGvb\r\nJwYrOPpH1vT90oBdALAJuFh2ohJelqL0ztGYth/KGG14IlXo7PRL9qMs4ZJB\r\nbKdGtmUGEvd6598VNt08ZZbtm1ziei566gi6tqnoT99vvBygGs7A5uYxSTwF\r\njpOzRhxd6/S/45v7gKkjEF21NtNoHsIxBBNOlWXCUL73JTTMo0RIHiCMcVgB\r\nDHXQvB7xN/k0uFdUfbhjAvZTiOqTJcIPOpA=\r\n=Bu8b\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button/styles\";\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nThe `mdc-button__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused button.\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.**\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n**Note: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.**\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button--icon-leading` | Optional. Styles a button with a leading icon.\n`mdc-button--icon-trailing` | Optional. Styles a button with a trailing icon.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n`mdc-button__focus-ring` | Recommended. Indicates the element which shows the high contrast mode focus ring styling.\n\n**Note: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommend always including it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color-or-map)` | If a color is passed, sets the default container fill color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`icon-color($color-or-map)` | If a color is passed, sets the default icon color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`ink-color($color-or-map)` | If a color is passed, sets the default ink color to the given color, and sets the icon color to the given color unless `icon-color` is also used. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color-or-map)` | If a color is passed, sets the default outline color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v14.21.2+x64 (linux)","description":"The Material Components for the web 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/density":"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/button_15.0.0-canary.6a4b3f834.0_1675277919479_0.4148643986077041","host":"s3://npm-registry-packages"}},"15.0.0-canary.b177b40e2.0":{"name":"@material/button","version":"15.0.0-canary.b177b40e2.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"5a54e0fb638edba664f76abe877421d89e1bb5b6","tarball":"https://registry.npmjs.org/@material/button/-/button-15.0.0-canary.b177b40e2.0.tgz","fileCount":40,"integrity":"sha512-ze1wJxsz528VYz/FBnGm0GIY+h+1H3q4tdzf8nNqzqhcl9qNA/1woHkI9kr/NHFyl1fXeA3Ujc8jYEX/YgbObw==","signatures":[{"sig":"MEUCIQCzFNAmQ5xa6Ei1UZMocf5S0LWGXuxN5S6tAbw7BtBSKQIgbudMmDjekmnoEhuPkBtcy8OeodFIW9jYrJL1wHAX9AU=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":648564,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJj2y88ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoyKxAAhmlWJIAC/nD7CQWZSVOr7y1eyYzj8rXvPPBDf9657RGGHecj\r\nKAh+wBCRtCWwJ8lV3FIpikRQwz4muKHlC1x+bNQdXfh2MXoYXn9fI8Y6dWmT\r\nxNwlxezRjKbKCasEAh1aIyKYk/ZplxpNaepG7HtvVccvnu+zZGDQvV8N8IPu\r\nQqMfENNpdGW6QkThl2w1mY3HljIPLiGXoXrbIptbfu7FyrxgeR7raj20evRy\r\nd1CqNLUTxqAAEXx4mGWs/mjVDx7AiAmi4EbiPE9uF4YU1mLnHjyKyC0viRyt\r\nudIqQL90/36oqo+aEBrJfTTH2yD5tZ3eH23l28rllcCSa7B7CivkdkxPjQua\r\nDvXJwaw4Rg5nQxgIrF1y/u/DF8/Oro3kNXe19m7ApFfZCMqdBC9UF0koeMCG\r\n3M49L9mLlPgBAbyPvTSlC2lvJ9FswGy8r1O/r/VzNvJBGAJc0tD/KqhBOqEw\r\nqNffluq7SSYb18H8OQVE1EwoxxJ5Pc2DGSGT9WXZ3daDtrVfs9bng7EdYVHc\r\ncF99K69slQ9+i3z07MkI4DLSg9ueiKuv4Lfhwrp67HeUijPfIzh0m0nYEvAG\r\n43mkMRXMgVBftpIcgMbBI51lnvK7R5Sq0FI6rp9KCzeqUs7vOMgyDqzqQVGa\r\nxEt6NuE7xZrUCYCup2RnY7MgXPWLkWceTtg=\r\n=S8RT\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button/styles\";\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nThe `mdc-button__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused button.\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.**\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n**Note: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.**\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button--icon-leading` | Optional. Styles a button with a leading icon.\n`mdc-button--icon-trailing` | Optional. Styles a button with a trailing icon.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n`mdc-button__focus-ring` | Recommended. Indicates the element which shows the high contrast mode focus ring styling.\n\n**Note: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommend always including it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color-or-map)` | If a color is passed, sets the default container fill color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`icon-color($color-or-map)` | If a color is passed, sets the default icon color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`ink-color($color-or-map)` | If a color is passed, sets the default ink color to the given color, and sets the icon color to the given color unless `icon-color` is also used. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color-or-map)` | If a color is passed, sets the default outline color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v14.21.2+x64 (linux)","description":"The Material Components for the web 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/density":"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/button_15.0.0-canary.b177b40e2.0_1675308860115_0.24991086755463776","host":"s3://npm-registry-packages"}},"15.0.0-canary.d9f821042.0":{"name":"@material/button","version":"15.0.0-canary.d9f821042.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"7cfe593dd82ab382800a1b3244341c8e5df35523","tarball":"https://registry.npmjs.org/@material/button/-/button-15.0.0-canary.d9f821042.0.tgz","fileCount":40,"integrity":"sha512-MNvVgvEu2GxnlXIBbeW15nJwXNG2Hs2+DKMNZrbPoWBo61JZKP6C6ygTMhLJcQD/MHVR2xQz5RQqC1+dBl8GMA==","signatures":[{"sig":"MEUCIGcv+OIQYl+7EXCWi9BjNJ7zc44nL7saOg1SGUcYGW5sAiEA9TJd5/rjUOeCdj3jZpUj7gWYgy5tX+i45YBopvw/370=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":648564,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJj2/UWACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrrWQ//WulpUvY5YMLB3eTbqRbLA6uSUw+7M5veFpwMog4hNKOPoewj\r\nA39a/Cn7hNOEwuf3lghChqX7MSvJU028VogqGqrc0xpf/TZB/7QC6K+QHErZ\r\nabPeN4iXJYiislVqmwZIFZ5nBJafGfj29ElhZvLx6ougfcOFeaE1DLBPA7G8\r\nKwCnLFb2pggEMUW4cjlnKgpRBs2CKfiAY42uAGQqEuFkwe57QWwSzGlvhb6y\r\nRfKiYHdttZWjVF4BjhaFqOv0iMiqY3e1wvAUbNY+34POf0vsO5/xSdhW0Q1s\r\n1wgWq8QXtdMADPeCgZDUqrUj85jtntjjyC3IrdopJ4k+m6699uOGmy4JxSK9\r\ndqCQb5wPDCvdZ61fwq0iLZSg/wBymJoNmRC6epMj0gZ3RZ8BNYQJ2Ib0b2Ng\r\nOXRz/OJdosVNwFtbmRIEQ85eW/8KlCLOkyAGCbRQn1FQ+hnM3Rv72i6elPGH\r\nRB2n20ZUyA7Psdj0fpCdB4NiaJJXw52+vyRHxF0GGsN6KKYJKfCGFbbPwUC1\r\nQNJdbvpXTeyLMoL7hzobJO8J7Pe34AGCooijFlbMZTTN1VEbCVb9RX8vUQa0\r\n1lTCck0P584vbP5+yBttwMBegVcEEt3VSjwCIPj+5HI50Ja/j3Cr520/5Jm4\r\nxjh9sLkXJZTx8xPFlBOGM5RMItKWWxtl+BU=\r\n=GMmp\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button/styles\";\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nThe `mdc-button__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused button.\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.**\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n**Note: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.**\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button--icon-leading` | Optional. Styles a button with a leading icon.\n`mdc-button--icon-trailing` | Optional. Styles a button with a trailing icon.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n`mdc-button__focus-ring` | Recommended. Indicates the element which shows the high contrast mode focus ring styling.\n\n**Note: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommend always including it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color-or-map)` | If a color is passed, sets the default container fill color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`icon-color($color-or-map)` | If a color is passed, sets the default icon color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`ink-color($color-or-map)` | If a color is passed, sets the default ink color to the given color, and sets the icon color to the given color unless `icon-color` is also used. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color-or-map)` | If a color is passed, sets the default outline color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v14.21.2+x64 (linux)","description":"The Material Components for the web 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/density":"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/button_15.0.0-canary.d9f821042.0_1675359510117_0.7066793065281487","host":"s3://npm-registry-packages"}},"15.0.0-canary.47c7deb19.0":{"name":"@material/button","version":"15.0.0-canary.47c7deb19.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"e05d0963f4fe74bed64814d51113bc87b7a195b6","tarball":"https://registry.npmjs.org/@material/button/-/button-15.0.0-canary.47c7deb19.0.tgz","fileCount":40,"integrity":"sha512-0+CfHO8qQd8433pyhH7n6qeM0YdlfcKQ67AgRZZPapAQ7zqqedGHw+HEBgz+/VptPjgarAeJUiocn5P0pdXfGg==","signatures":[{"sig":"MEUCIA/qE8IoWUpLD57hIHVmx6a1WO9PNg4z5uzPZ+8/0l/VAiEA7kXWEhM+tsoYhsVK00dglfWf8G+NTypIPcxRjIj7Pig=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":648564,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJj3M81ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmq1qw//b5Nkbn3C9PLxZbiYMxrUK6/mFvRfPT90erq5xvgjS4MJv9C0\r\n9rfKxk4r2UpbUZCgJh1eY8xY00VqAcjPlQymNOeBOXUCRnORM8PTUuCdKOVW\r\nv9edp84qOn1AzFPPC1oWIng7LWhEM+FYY4LmI+j92WEFS4sZ/2dVPrsMJiNe\r\n7YJnIaxkY858wXkVZ/eamXMU/aqzLcI33MGWQek92GXjGTmlYwTklD1p6PQu\r\ntd1PR6MbyA8ve9+IPms+oyCd3n1/b6QFMDLwAyumGPaIiv+r2c96WwLaT3aU\r\nGQVTHgaQW38Ex4+0a7czSe1bxWehjkozLaKm7f4HK8ZzMwY9jB7mOKBlTGP0\r\nRNP7sIPzt760I/ug0cAmcV4GgiT4t4w8hB/KfEub1a0tFS+6JNAJudDhoNHA\r\nnG1rzBr7nOD1Nse7PXv5WLwY2XML2TiOv/XIPyn2i5FQbf40CsS15TQ6T3mn\r\nJ3nZCa9YPQbL1gjAHREo+GT8MhM4LKiKOFF6vSa3GDr9+1s0GSSkeMkRET/V\r\njSUF1UlS20KkmHP5scEechGswsqAE4O8G984cQ896H5AnawhSxpGlfBaEnWH\r\nPJXXee8uNkDq+hV3s4aNu787KV8mV5GpZjP9sHabki+FodNpIsH+l0F3ZPw2\r\n1HLoskZHcHMHUmba7580A6DJkbiSe2bp9qw=\r\n=lu+d\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button/styles\";\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nThe `mdc-button__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused button.\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.**\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n**Note: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.**\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button--icon-leading` | Optional. Styles a button with a leading icon.\n`mdc-button--icon-trailing` | Optional. Styles a button with a trailing icon.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n`mdc-button__focus-ring` | Recommended. Indicates the element which shows the high contrast mode focus ring styling.\n\n**Note: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommend always including it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color-or-map)` | If a color is passed, sets the default container fill color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`icon-color($color-or-map)` | If a color is passed, sets the default icon color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`ink-color($color-or-map)` | If a color is passed, sets the default ink color to the given color, and sets the icon color to the given color unless `icon-color` is also used. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color-or-map)` | If a color is passed, sets the default outline color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v14.21.2+x64 (linux)","description":"The Material Components for the web 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/density":"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/button_15.0.0-canary.47c7deb19.0_1675415349524_0.929109164435181","host":"s3://npm-registry-packages"}},"15.0.0-canary.a16dbd1a6.0":{"name":"@material/button","version":"15.0.0-canary.a16dbd1a6.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"bc947e28c4388c267fea5f00f6d854d758cdba8e","tarball":"https://registry.npmjs.org/@material/button/-/button-15.0.0-canary.a16dbd1a6.0.tgz","fileCount":40,"integrity":"sha512-H2za/Bln1Kv0AiCNOPVMAUggxC95n5JuraVOTd/D/O/GfZzlSOVpV3BTjnPN9aBsLZF/Zgsrjt0Czcsa0gnZKQ==","signatures":[{"sig":"MEUCIQDeu9ELLYqBwqKJd8vYstnxKbhOQhdvQYHzILEuX9356gIgB+kWazU0ZSYtZRxfTcKe8YFMHJMjfgnAgdezYQHnin0=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":649726,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJj3ffWACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpEWA/8DPYO6jVb5b2+hMo/nE7AzULlVOihsSTlZ4uVM6B6o8Kh2Tlu\r\nOFhuie69FUxZfno9/F0Raj6fJ8F0ZwhKrZET+fXfECXPL/o9DVLIUqVpZz3q\r\nQMz4/g9yBkQ/oVJQNXxqHKMNM1hIimv4xoQMnCxDB51iL/yrlxSSrLNNkyLl\r\nHOK8YC2/YI4Y9OV+d9IR45edrpkOlB/BeF7YVXexCKtH+anY+Y9sqOjvBCfx\r\nZeKqt/sfVQyvI6NsSubqbUXjv9WimC6AeP9xKPi7GFktvIMUv+Iub31WEuZE\r\nS5QFgaMIB5CQFib94zCmhZ6pp0y16rk0CBw/GDyHrcXIPPBNYaJij80DBQ4c\r\nmioO9afJkqPVrbNZPNrfM0kMMGGLhFbfAomqH3HaLXFPLV9VAxz25ttZzVpQ\r\ni9eeOxATuwlqNPFBlxxOAwSEKkr3MZjdLb550UCh5vQE4I9ONulcSedZ15FH\r\n5iRUO4kE99kdDNINjIdcmoEuEZqiZcMNRynBbuZZZDJoGdqtb+Jvvpf4ZE73\r\n2TusyHUHeNZTnadSeL9Lc+j4DuSpuF3KZ3fxfPrD1eEyvVvvJpCfJa34eAxm\r\n1ichUx7yvXLIBFTuoA5sVDVzNXIpYo/76uDUmicYN7lsBRuFv3thbmI0jdjT\r\nHW0Mm/1NYyAaThkUn5scY8J4aiWf+wfjfo4=\r\n=KUy4\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button/styles\";\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nThe `mdc-button__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused button.\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.**\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n**Note: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.**\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button--icon-leading` | Optional. Styles a button with a leading icon.\n`mdc-button--icon-trailing` | Optional. Styles a button with a trailing icon.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n`mdc-button__focus-ring` | Recommended. Indicates the element which shows the high contrast mode focus ring styling.\n\n**Note: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommend always including it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color-or-map)` | If a color is passed, sets the default container fill color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`icon-color($color-or-map)` | If a color is passed, sets the default icon color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`ink-color($color-or-map)` | If a color is passed, sets the default ink color to the given color, and sets the icon color to the given color unless `icon-color` is also used. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color-or-map)` | If a color is passed, sets the default outline color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v14.21.2+x64 (linux)","description":"The Material Components for the web 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/density":"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/button_15.0.0-canary.a16dbd1a6.0_1675491285848_0.3964470183087925","host":"s3://npm-registry-packages"}},"15.0.0-canary.93416f87a.0":{"name":"@material/button","version":"15.0.0-canary.93416f87a.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"734ede2badd997b6ee1407fe4747485fcb26f75e","tarball":"https://registry.npmjs.org/@material/button/-/button-15.0.0-canary.93416f87a.0.tgz","fileCount":40,"integrity":"sha512-Zk7PcbJf+P6O2jVljb2eWUMQy1y/Wio5U5cNB6SC33GKuPnJAFFbbHZj9t24fVRTAhI2I/Mhh14Lmy+Ev3lnaw==","signatures":[{"sig":"MEYCIQC8u2rzAvYsxoSVRECQIdyEUsEtjIhuGN5xy84tix2BKQIhANCW0bNC6jpV/FztrJTXb3pesfjci3vRStpbrsmd3Kpl","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":649726,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJj4lEgACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpU9hAAnegQvQa7122nus1csPNKR4UPGNT5VrHCCbmB1sZShR5a31rg\r\nN8Db3QngDSKmJgb41x5tdEFQ+r3MhFYCjxPvPh7/GcE8U+QG3nnq+zIp2LDa\r\n18nbl1oDld8XtDN1ZnZ4nxTWkmcxyeoVmY8AxEKKA7fChQK5mxlw1D67QvQP\r\nqAlX0PLXnqO0NPiOklk4thgdxaj1cJ++SyHLxvnPv90K3DlRt6ia42Q0wi89\r\ndCwwCHoY64tX9xcU29g56mJ5yHn8rUj+F+BvpZeY8d0Hz+Jvzi/d6B0kYe2X\r\nq81RvwCoXSjhFUyX6QU8Zen6ORSNLBLqkYNYPZUR+4Qt09Rx9zYVQZwtdxpr\r\nL0EIdHRbBJYUVVAjlifcMxNTtRfsWZ6F7xiTTn9BPVGQ6vK9KJ9gdAcC8A7Q\r\nSoJXFKMyvgpCxmLEQbjlINirDLyD2IzDcE1Mk/3xIsEMgC/c//CKiH0o0TjC\r\n+ilKPJb0pNrkbWXE8CNVeSUHucUmHvuFpuxOYxambsqK5tG/C1gHstEWJK48\r\nAVtzAiGoEVp+d2gxDbr4OA2QawIQZi6C6Lb7y1OeQQ6SuQf9vXDkFTGwTiz4\r\nM/v0bFZAmfchEWG9LRWf3eLvEdgzMIyaqdOBrpcAOqZnNccMGbI90F2JwQck\r\nTjDTDtU9rSUhU4iSbCYOFMtu57rsKJdiryY=\r\n=U6ai\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button/styles\";\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nThe `mdc-button__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused button.\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.**\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n**Note: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.**\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button--icon-leading` | Optional. Styles a button with a leading icon.\n`mdc-button--icon-trailing` | Optional. Styles a button with a trailing icon.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n`mdc-button__focus-ring` | Recommended. Indicates the element which shows the high contrast mode focus ring styling.\n\n**Note: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommend always including it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color-or-map)` | If a color is passed, sets the default container fill color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`icon-color($color-or-map)` | If a color is passed, sets the default icon color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`ink-color($color-or-map)` | If a color is passed, sets the default ink color to the given color, and sets the icon color to the given color unless `icon-color` is also used. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color-or-map)` | If a color is passed, sets the default outline color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v14.21.2+x64 (linux)","description":"The Material Components for the web 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/density":"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/button_15.0.0-canary.93416f87a.0_1675776287791_0.18540997880483978","host":"s3://npm-registry-packages"}},"15.0.0-canary.49b8e7442.0":{"name":"@material/button","version":"15.0.0-canary.49b8e7442.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"6728efe072f7bdc00644906cccb1a42aaf1ccfe5","tarball":"https://registry.npmjs.org/@material/button/-/button-15.0.0-canary.49b8e7442.0.tgz","fileCount":40,"integrity":"sha512-9fe7tTGRF6npHp/05BlGizaZptMY341Tvf/STihbSRbhUEbORl0blBLf5iaeJEcQXewM5YmLxFXBTWuNUGPBJQ==","signatures":[{"sig":"MEQCIFuNuWh2yahSwNUUCUo6WXnHE3Wo8wYDZSBrXEWlnCesAiBIZ1IZJdSaoIdC4OeCGEFiOXEAfvwrMNw+yWamrVhViw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":649726,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJj4to4ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrjCQ//UhwbFcqec8/MuZeJ0LxD7FtJvcz6j8AwwzdQrCP/QXRiRi+O\r\nfNdCEF89J6m4IlmZl/KutM0bBi7BLjjl8bQB5MD5xv3yptFNoIxpAqak5Zq4\r\ncA9YROrSvlga2ZJpuny3JtLSLX9HnZz9wUMQLrwgtSRA7qYz80Y71/kSiCY3\r\n8LXXtTjzjTTBmu/JndIIllguP7zEVjNyPTJId/Leoi6aWoof3hDk6n2y/aIf\r\n/oeh5b/k0LS62eUx9/L3sSif+Chf5UiFETz+ltCC9pYCS3JX617Nxg3opTGX\r\nGOlF8aHr4ypMVfwh3NxeDsYYtqgbZB5S9dwo3VqBFSwvy65Ukx3/YaIvs3Lq\r\nns9TYfYWLXD0ao7HXW0HfqChdHVdjNGZkgOTlGCKfTupTipGudEoVjqXhgW9\r\nrTH6rHSzLhZtRrZkebt8vRO/s7fWLYA6fybrFg2oGXIuMcbVw+TuFfdiyVgZ\r\nooT68biG8wJQ0QjnE+kX3OoQmYNO3Sb3d0Bpru0iZbxvFeEguGsFvdzl06Qy\r\nfRFk2AXBHrv44UpB3CV4K9KhOB/Th8lgnPQCmF0RyxqOp5ufioz+WOTVxzfk\r\nuXxSe0Jsn5Tplb8+XtVY80rtOMUUkXuINlrWljHi5jcQfrIum7VCU/rxUM1Q\r\nZWaSmDeSxGxkqgRSRk4SZ/0TL5Sh1A32Hbs=\r\n=J+4u\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button/styles\";\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nThe `mdc-button__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused button.\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.**\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n**Note: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.**\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button--icon-leading` | Optional. Styles a button with a leading icon.\n`mdc-button--icon-trailing` | Optional. Styles a button with a trailing icon.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n`mdc-button__focus-ring` | Recommended. Indicates the element which shows the high contrast mode focus ring styling.\n\n**Note: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommend always including it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color-or-map)` | If a color is passed, sets the default container fill color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`icon-color($color-or-map)` | If a color is passed, sets the default icon color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`ink-color($color-or-map)` | If a color is passed, sets the default ink color to the given color, and sets the icon color to the given color unless `icon-color` is also used. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color-or-map)` | If a color is passed, sets the default outline color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v14.21.2+x64 (linux)","description":"The Material Components for the web 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/density":"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/button_15.0.0-canary.49b8e7442.0_1675811383924_0.016158473010909224","host":"s3://npm-registry-packages"}},"15.0.0-canary.de38de758.0":{"name":"@material/button","version":"15.0.0-canary.de38de758.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"1cd87fdad08899760c78c849f85ea4fb19a04391","tarball":"https://registry.npmjs.org/@material/button/-/button-15.0.0-canary.de38de758.0.tgz","fileCount":40,"integrity":"sha512-11L9eNUrdaQ4iH6DyfENjGIDvrJSJNe/O3JOnIFxgceYytc4/dkWi6Hro/Pa6UtlqHXJJi95kz6P9fDvKxFXIg==","signatures":[{"sig":"MEYCIQCDwAjfgCwBwvqChLGXdGzz4tVoLYBBS0n1sEqQOyzjdgIhAJuNCin37FTVYQOiRoijAXWfVupLtMtQ/YR4HEUumqrV","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":649726,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJj5RRtACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrM/xAAmrWToLDaKwvq3hdCwKdmcmiyz92W8x/TOierU8aUKIj0xSNa\r\nqYT4+E7IgSef54EbCiwmL5zQb407A+pRiLnNpCXWY68TS7CSE4hplh+BhWzV\r\nrFr7wZOjDNq49xLtvuRzkUxK3Qih7U7Vx4vQbXnTml/pRa2jQ4FbPiSBcyCi\r\nvlG0ZlXXKw+XCEjeFggordtvsGYEqa9TYR7XNhmTLh53cuhfVGL5HUPVMnfa\r\niUWBn3ZGOyZ5b65H6vl53mhAF9hQbmZCcqFtDPuEqlsRcMpoopH2ySpqCMpr\r\nwmlvhHlCKf2olFDEJ/osRR1kQNBr5lIMsS4SPDHHkWhyagd/9c7zTrLhEaok\r\nggxQ76RPu9NCa4HtBZ2Ty4mPCnPVe6R/ym3p3G0rFdiw+pAwCWkrIG6PqJAd\r\nhjj2OCokVRfen0GGCY90VXeXSkTRm3XUe/GVk286c17ofsO0XXfQjXDjyEsf\r\nTMLq64O1E1fqDZySqABANna3JGrBNeC/gTFMe6cxFlCm6Cf3HkmxfmvbIEyY\r\n/1QvNy3P33P+VUhGzlv0nYx81Wy2RtH3YFzo1Dfgn8cCoqqAvupPM+KBdr7+\r\n3w/Qp9N6ChNndq8t4ODV2AA4tHRy/p2OWI4OLhs+6/WNc6ae+MeZTT/9Gr4l\r\n5bmgpsMkfWmVhJH/uJgRBko/jk7MJ13jPQc=\r\n=Fufh\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button/styles\";\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nThe `mdc-button__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused button.\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.**\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n**Note: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.**\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button--icon-leading` | Optional. Styles a button with a leading icon.\n`mdc-button--icon-trailing` | Optional. Styles a button with a trailing icon.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n`mdc-button__focus-ring` | Recommended. Indicates the element which shows the high contrast mode focus ring styling.\n\n**Note: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommend always including it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color-or-map)` | If a color is passed, sets the default container fill color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`icon-color($color-or-map)` | If a color is passed, sets the default icon color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`ink-color($color-or-map)` | If a color is passed, sets the default ink color to the given color, and sets the icon color to the given color unless `icon-color` is also used. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color-or-map)` | If a color is passed, sets the default outline color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v14.21.2+x64 (linux)","description":"The Material Components for the web 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/density":"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/button_15.0.0-canary.de38de758.0_1675957356796_0.10301310455372215","host":"s3://npm-registry-packages"}},"15.0.0-canary.4d62de70c.0":{"name":"@material/button","version":"15.0.0-canary.4d62de70c.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"11d65efbbb1ce45ce23ac19ccbced34cbf5c2b03","tarball":"https://registry.npmjs.org/@material/button/-/button-15.0.0-canary.4d62de70c.0.tgz","fileCount":40,"integrity":"sha512-WGVU0hZlN8dDpE1D3EP8lUyclCXYifp4j5/Tbj8hYQzkx2z/MnJDCTQvE9467tZL26Gm9dacG7LTufG3i/ceIQ==","signatures":[{"sig":"MEUCIQDsxm2VnNTwweFftTtLeo7QgUFgLOi5oT6+4kaGbVZFcAIgTsaqqWQZ+lyRH+ggQtcfLHXnQ99gXdYSffaPtsi0S60=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":649726,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJj5W2jACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpM/A//T8hUe3Va7HqPrgexM1XGA834QYvlHvEpAZPpur846hh0CIZ0\r\nUmbqJXuBPEdIrGBOmv5DevbxD58duV7SuOOI7pbBcf/rHGSkXpdj3cVEu/4l\r\n18KtyL4Tfgf21clzVXXcXMqg2yAQyV2BAEEJHKPR1zLmkvYjhsvoP+uCTSRX\r\nQ7CV2Pal5rHTC1Dfs5pJGQYqO3CgbBBHpcZR48O404obAUj8SsMuM6ugoJmW\r\niJmJdF/kKVMe+kCYGiIv6/6slKfCM/f+ncDKqdQMIt1Nb8UNeqfiSWAPqk6q\r\ngXDwbOwRfJ1npfHl1/wGe76hsWUZ+jfL5s6BPiX1SjuwTmKtLpqmxBwKfxOc\r\nCmTykfv4uUvzbubKkzyc2WNDJg0ITG/EUdUjrdR+QZUhRkUFMC20OPZn0ooj\r\nGcdrzAjYXUB7uiOdCa4g8HalTapQYMXPxTRJqFmTYV6R2lD0QuWA6JU9UzCt\r\nBdqu/LfTtCSNCKozvckJJVlfL/DfE2HunikYOIT+G1s4Nv+GuVIVzjCqzVLw\r\nl7b8FB/Ftu1P2TWLsTrJ6rh52VXW/juRUuHNGIE3NFqwP6NcD+mpq9NMhkTH\r\nEZq61qDoZHcUov01iUVilbfyTz2KfBelLNMmiHpneOmhMq0YavC4lxJR4OAj\r\nNG+WQkE2WWUSD/Y9U0WFqniU4UoBv95cfIo=\r\n=3P0v\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button/styles\";\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nThe `mdc-button__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused button.\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.**\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n**Note: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.**\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button--icon-leading` | Optional. Styles a button with a leading icon.\n`mdc-button--icon-trailing` | Optional. Styles a button with a trailing icon.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n`mdc-button__focus-ring` | Recommended. Indicates the element which shows the high contrast mode focus ring styling.\n\n**Note: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommend always including it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color-or-map)` | If a color is passed, sets the default container fill color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`icon-color($color-or-map)` | If a color is passed, sets the default icon color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`ink-color($color-or-map)` | If a color is passed, sets the default ink color to the given color, and sets the icon color to the given color unless `icon-color` is also used. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color-or-map)` | If a color is passed, sets the default outline color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v14.21.2+x64 (linux)","description":"The Material Components for the web 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/density":"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/button_15.0.0-canary.4d62de70c.0_1675980195484_0.7334867749530052","host":"s3://npm-registry-packages"}},"15.0.0-canary.6fcd8d418.0":{"name":"@material/button","version":"15.0.0-canary.6fcd8d418.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"728004e65d6a32a54c299cab696c07d5fc46fa39","tarball":"https://registry.npmjs.org/@material/button/-/button-15.0.0-canary.6fcd8d418.0.tgz","fileCount":40,"integrity":"sha512-jEwOFxd07NUqAxlsYJQjdX9U+J2FjM7qXHgkgFHjAPRRGOrX67BHwyLoX0x3jjCW8IT2Id7lWoA6KmPuRTW59A==","signatures":[{"sig":"MEQCIC9dVzPqq8cmE2KEIEF5AKpnRQ5C7XtSUdNW4MOQIQG1AiB2NRocWF9aiDLJHdAxo0FNZy8a56266hUIUUU4bgYOsQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":649726,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJj6iPtACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmp6Lg//feE3D68q0YnjcGjRagmegvo51VPrw9ZbiuKjICR1MPYlqx8P\r\nP8l+zMWcKsPDmHw30rqjOAUucTTpqJEIuUV5IFBLO0DDsrjlDGpVC/OGpWrj\r\naiEpZVWJuQEsuQmCCMo4jTEBT0hmn7QC9LwN58kVqfCkeADf4apQctdRBAqY\r\nNn+yOybNSruGFGuciBHdMeHrv56gcN1feIvnShvkp2JAx2qo7zxHXpsMsV3u\r\nqq+GHlh4CjfaGjXkMjX9agnKqzGR3LLjEyAQwD3RAD+cCIw7km9aIhlp6w65\r\nW7lqXEjmgA1LMsNZwTDPgw8rvKTBA1lwpCUUb6VvxUZEePce2voEw1ZXKc5k\r\ntUxlnmXyz9QTavqxW09M8QfLbbKx8G+UTizwYgywNNbGS8UgScVJ+kC49zox\r\n1NRa2j/kNGKaau5wSWcqpPXpUIvLJvqr1/GOPGi7m9+S9pFqsV/sd2fMQpFB\r\ns86udxVbx0/Uo3SuKPO3Iqv/y8nwE5DrVApwgriNi2gzdCOQpjTQwG7PzH/o\r\nvC8wGM//ZJBQ+4slSZP7p9qnHtytqCzwMsX8I2bjU+rRm1uIzoAM3GycbezC\r\nbFd5jF3UIEPyZYGqQuN7o2c8gEDt2RtBcpE4UmVGH0SQyNtAMBqg/a81Y7LF\r\n4GKaM+UMylHUMb35+sEWAIGDhjIFq11HltM=\r\n=77j9\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button/styles\";\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nThe `mdc-button__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused button.\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.**\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n**Note: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.**\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button--icon-leading` | Optional. Styles a button with a leading icon.\n`mdc-button--icon-trailing` | Optional. Styles a button with a trailing icon.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n`mdc-button__focus-ring` | Recommended. Indicates the element which shows the high contrast mode focus ring styling.\n\n**Note: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommend always including it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color-or-map)` | If a color is passed, sets the default container fill color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`icon-color($color-or-map)` | If a color is passed, sets the default icon color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`ink-color($color-or-map)` | If a color is passed, sets the default ink color to the given color, and sets the icon color to the given color unless `icon-color` is also used. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color-or-map)` | If a color is passed, sets the default outline color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v14.21.2+x64 (linux)","description":"The Material Components for the web 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/density":"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/button_15.0.0-canary.6fcd8d418.0_1676289004649_0.43574254918273136","host":"s3://npm-registry-packages"}},"15.0.0-canary.066d9439b.0":{"name":"@material/button","version":"15.0.0-canary.066d9439b.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"f3a35eff948cfc4dd308a817f7ff3aa332be1f00","tarball":"https://registry.npmjs.org/@material/button/-/button-15.0.0-canary.066d9439b.0.tgz","fileCount":40,"integrity":"sha512-oaxNzeKQEUgkNnc+g+dp4bXEVG7GVhnW5KAa7c1fpOnhts39hxU2PaB+AcCtHegSBFEuBJUNEMt0oupjdRl2Dg==","signatures":[{"sig":"MEQCIHLscqSbVVtPa6gxjo+JOtp+KS20HDEJMIWC3JciAlGkAiADZC6XW079kFZezivBnh8+G/rKZhStA1pl2GPFWBJVjg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":649726,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJj7TlDACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqV8w/7B7E5ha9VFoArYDpJdvOwfcpXho9AQR0Ft3hyyu0K5TT+GZLr\r\n5kqxz50VtBeQn6y1jsOuPDlwO0GqZ1ed7mbR2jMAuX33ET8kghsatOS3CYJl\r\nVEZUTKvcCn/h2kzdiNkh1DTG0jGgdPI5IQii8n0dl1GDx/lsHxd3AdH/nw0q\r\nWvvW2GtzzVvEp7yFtpA2xQqPkkRU4RrHqKzoBUF3KGCI0hJncGVAdWB+pGLi\r\ntOdiQLzFieMl81A67u3N++HLXnf9WyNSJGPVPf8KofloqTLSdFV83AALWBiE\r\ng5FeiL1Zgw1bDPjNgCzljdzZWDGGKpCu+sc+SNxMdqXBinpMWp29ExtkxoK6\r\nFcGIMZnc41ZXA//IUTflBLIsqqgm/UNykYdWh8Z3xXdOhhAuGit/4j/UT/I2\r\neWbx2e33gfp3G/gIkKKLxfbqPr0X6FxOoFF2wnghFH7giSbGdl/ileYnsK2U\r\nId5ezNe97gWEgjYEpNOoOyROlYtgnK9VfAJy9jBFTG4D5sSZsz++43vq656l\r\nfBpBABsTdURhdUCKKNErepH2Lg4ZYcXh3jZRRTbydFGhGxfuCV5JKQurj698\r\nNqbafOZlS7qS4ANBfULIkFthkob+kVARCLQHd0iHHXcxpQrbMkVxn/jqqKtn\r\nG4y0OZCaWkOcOwvDBUEZWMMIq9vTXIYEZYM=\r\n=REF1\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button/styles\";\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nThe `mdc-button__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused button.\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.**\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n**Note: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.**\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button--icon-leading` | Optional. Styles a button with a leading icon.\n`mdc-button--icon-trailing` | Optional. Styles a button with a trailing icon.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n`mdc-button__focus-ring` | Recommended. Indicates the element which shows the high contrast mode focus ring styling.\n\n**Note: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommend always including it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color-or-map)` | If a color is passed, sets the default container fill color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`icon-color($color-or-map)` | If a color is passed, sets the default icon color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`ink-color($color-or-map)` | If a color is passed, sets the default ink color to the given color, and sets the icon color to the given color unless `icon-color` is also used. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color-or-map)` | If a color is passed, sets the default outline color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v14.21.2+x64 (linux)","description":"The Material Components for the web 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/density":"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/button_15.0.0-canary.066d9439b.0_1676491075585_0.8222183230975166","host":"s3://npm-registry-packages"}},"15.0.0-canary.7ab32468c.0":{"name":"@material/button","version":"15.0.0-canary.7ab32468c.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"b333582699155f6646ff19a0625624c0359efb57","tarball":"https://registry.npmjs.org/@material/button/-/button-15.0.0-canary.7ab32468c.0.tgz","fileCount":40,"integrity":"sha512-HjF/QaUGpOcdxCZ8FqUA9Lo3e+Z0I/KOiufmroVK/39/1eaeZKR7wr8T/T4laKMhQ1Cawb/g0P0zAUu5SH9uhQ==","signatures":[{"sig":"MEYCIQCN21uycCYApn6SIv7mzmUlrITR+CyEO68xBi5QKmKQkAIhAPmRa1ianmkCpwiFf5hxNyw5e58P8jQfm4JnJqI11ypE","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":649726,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJj9Q6wACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqC9g//RE0KiaUTVO5pq5CjeN+waAwJ29Ylm9GxuEzs5x6lpiBF/ulC\r\nGWLJWgyILMYImaSIGJRrS/FsbEiyjRp+qj/9Z79c5063YlbagLef83zy7a+J\r\ntVSPAflPegATW7l6PVEzsyUONlqFqb9ORgWntcBnk7XWoESLl3K1bctV9uC6\r\nDszOEiYI/FV8J6C0NboSpWcYivBJrNbEXiVHZJ1YVytm1K4zfi30TpI4cPzd\r\nddPqhmUC2m4UVhhodnzzsaQbIIwuQPFbx9JZY9vV4FXxXzrVWupMUqoS4ytb\r\ncETmqlRL9iDxlRvIoUbK/4w4N6N+1iNsA70ETuKrxyJfxvy0j7EyxzU2IFoc\r\nbhkFPrN7jAJ30oPLrFxZnV+iPJ8gNCFw1lQhCQ8NuFmo0vVDgIFnm+fXbqsf\r\neJow6oagsXDqhAmGAc7j51FXW8xAJQVl+OKDZP7f1B/X4FL93r5gULZguyf8\r\necigjN0MuzWwJRtWwbN1gvomGIE5Fi7f0ZAuwreGzhP3AwBcvVvXQnzWovEE\r\nx2w06UV6/pHPZaUHy95W2oNO+jgFr+G0FGiVVCn4YLFRJjQufKg7HHI2ERUD\r\njGqyfFIkCn4EIt9VQXqFHW3A0pnFmCvu6Cq5edcsjZjDPOrubBreKmoIfSbK\r\nU2OpQDEXno9mxbVDSUwurncnF6dEDNCujyk=\r\n=cVAg\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button/styles\";\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nThe `mdc-button__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused button.\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.**\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n**Note: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.**\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button--icon-leading` | Optional. Styles a button with a leading icon.\n`mdc-button--icon-trailing` | Optional. Styles a button with a trailing icon.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n`mdc-button__focus-ring` | Recommended. Indicates the element which shows the high contrast mode focus ring styling.\n\n**Note: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommend always including it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color-or-map)` | If a color is passed, sets the default container fill color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`icon-color($color-or-map)` | If a color is passed, sets the default icon color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`ink-color($color-or-map)` | If a color is passed, sets the default ink color to the given color, and sets the icon color to the given color unless `icon-color` is also used. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color-or-map)` | If a color is passed, sets the default outline color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v14.21.2+x64 (linux)","description":"The Material Components for the web 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/density":"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/button_15.0.0-canary.7ab32468c.0_1677004464275_0.7828121168388835","host":"s3://npm-registry-packages"}},"15.0.0-canary.fa27ba61d.0":{"name":"@material/button","version":"15.0.0-canary.fa27ba61d.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"43c7e22d9ae863e9f8c83cb38dbc1d04a9be11f7","tarball":"https://registry.npmjs.org/@material/button/-/button-15.0.0-canary.fa27ba61d.0.tgz","fileCount":40,"integrity":"sha512-Ot9iU24+034vV7WKUZDqpbycGThn8+0QZMcLmPHEq+/WzVcHV8HFCoFYR64IbptAAW5pWrYC/XRrEUrnwCKt9Q==","signatures":[{"sig":"MEUCIQDH8KXrFEhkdhPZikmSy4gUY+Xc4SpVeFWFRJjDsFyqnwIgJ/YIDdM7n1rcL5wm9Lb0RowM1U7CLhN1EqEP0ei69wE=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":649726,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJj/NhRACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqEIg//e27AwmiSW/9dHU9cL3J0EonxUEX/oPsH4G/Pcd2j3VSpOYpD\r\nfuGTGxBEnlrmA1H3jUR9io4i/qxmSxQgJVfVB/q54zJWuoVQ/JzPkpznLbpa\r\n4gPEPcMq8MI2+FYFY1b6X2iV7cth5nst9peku3zmY8Noq1EmzMXxtnn+A44p\r\nywp58wQgNPcI2jne8ACWvgkEWBaVSmBBcUa9mjkeADK/F4PNPIzHD7Lwrt2d\r\nhqMuCrVtdsLnnB72PYAyPcwZ380GH6GhIbHACJ8Lrx7ZonzLJLi7yr9HZrVE\r\nvb3ou/SeEtitfRCpv4MsUJVeuCtJDugh6xD+F9xke0uc3+5G+eLR+j+Ekt4x\r\nkT8WnrI8Tzo2NrojQN9adjlCsdAeSzhcAS6i63OstI34d84C+7S7gNvt5RKQ\r\nbu3E3AolJXI4omqy4YfswyJ2dhYgZv28Bz/Y4/SjkWoqXUppEFopndQ0X7/U\r\nbUqikpH0rP3kY+rPFtirsavMKaP/JfWR4njY0sNxvGs1lZHCfZGGrLaTqc9N\r\nyrZFbXdNKRZeNmLtNFDnd5kZVPJgzIpX3BevR2Bo2dOBuCATUiyScBXoCxmR\r\nnEqM8wa9BfxoLceQZi2Ylw99tDkI3drtU+zMtkAThbzhu3XHQImt6ZEPzfid\r\nj9sjgsFMzebp/hqtWjLZWstADxV+2gECrGw=\r\n=BVF1\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button/styles\";\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nThe `mdc-button__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused button.\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.**\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n**Note: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.**\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button--icon-leading` | Optional. Styles a button with a leading icon.\n`mdc-button--icon-trailing` | Optional. Styles a button with a trailing icon.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n`mdc-button__focus-ring` | Recommended. Indicates the element which shows the high contrast mode focus ring styling.\n\n**Note: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommend always including it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color-or-map)` | If a color is passed, sets the default container fill color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`icon-color($color-or-map)` | If a color is passed, sets the default icon color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`ink-color($color-or-map)` | If a color is passed, sets the default ink color to the given color, and sets the icon color to the given color unless `icon-color` is also used. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color-or-map)` | If a color is passed, sets the default outline color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web 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/density":"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/button_15.0.0-canary.fa27ba61d.0_1677514833300_0.7224224889389756","host":"s3://npm-registry-packages"}},"15.0.0-canary.311ab4d4a.0":{"name":"@material/button","version":"15.0.0-canary.311ab4d4a.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"1306996337defbcf5678aa9846fc84158a6541a4","tarball":"https://registry.npmjs.org/@material/button/-/button-15.0.0-canary.311ab4d4a.0.tgz","fileCount":40,"integrity":"sha512-/10gajqRuDyLVrgpVosSxyyWua5WV/XFo6uvYASIOaTyYPsdv5BxsQNsIV86SeJpV1wjA8KBlCsbGQLKJD3kYw==","signatures":[{"sig":"MEYCIQCmUffyZf/kC2A4BhvQP++xKAxi9gLhzKZdGUnltPp70QIhAKA8Kfdd6NenloPN2AyD4qg0yUadRLpEgxx3xETCU3SW","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":649726,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJj/N1AACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmo3vg//QG04F0yem7DsbnusFjfwlPd6UNHJehaoHQZpbd4ZKt2lKyRt\r\noE30qHhqmy0EOCSjT4kDothzQnBOL8ZpZeJEzFyEwIKbJJ9+XzJFJflxQxtI\r\nzqlmnVa7BSiP+UQqks33pDcI5dB+u68mHnVCOOTm/7GVgEM8PluintrJtEOw\r\n/xV9rKgeDvwZ+jpyL/ZjQKNMQxvgarYa8rksEyUk/U7Ads5nER+mnmiOUBAK\r\nnrmJZIyaJ5lKwFWEINGNmGxRk3weIRm8tRRBflL3q1I7ZjcV5eb6ScLtnFIB\r\na6LtPbOWT6V1pGImqLE+Zrad3cR8SqNrjLTA0z/0+va0fET41t+9fqkTIveZ\r\ndQJJOuWqTacM5ULoICoHGgn2wJxD63Ev/7joA+h2zISaNfRpIvqrEFe47XTQ\r\nSLczNK8OSOwv+fVAW9t2TqQK5hS7hIPQSXw2gVqTI6vAGeexbqs+8dyHH+Zx\r\nTexKv1gUF9+y4y58la8pUecylD8ejbynB+um5dzAgldcMdZnCRUuDshfyg5d\r\nTQ3CvWYZN4F3h6T9LXBM6DioURMPXXAoA3IYYYazN/y4WK0ovBd59GxOgwZj\r\ngPjN2VNsamnRPDjNw3JCoKJpSecM9uKFSDaqr5GQH5hvCPlqwzHBKtHYol5i\r\nb+RwPE7mIy6FRTaUbpsEu3LgdRht7K0wi3Q=\r\n=CoW1\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button/styles\";\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nThe `mdc-button__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused button.\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.**\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n**Note: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.**\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button--icon-leading` | Optional. Styles a button with a leading icon.\n`mdc-button--icon-trailing` | Optional. Styles a button with a trailing icon.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n`mdc-button__focus-ring` | Recommended. Indicates the element which shows the high contrast mode focus ring styling.\n\n**Note: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommend always including it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color-or-map)` | If a color is passed, sets the default container fill color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`icon-color($color-or-map)` | If a color is passed, sets the default icon color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`ink-color($color-or-map)` | If a color is passed, sets the default ink color to the given color, and sets the icon color to the given color unless `icon-color` is also used. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color-or-map)` | If a color is passed, sets the default outline color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web 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/density":"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/button_15.0.0-canary.311ab4d4a.0_1677516096195_0.14604789870346746","host":"s3://npm-registry-packages"}},"15.0.0-canary.901c83e77.0":{"name":"@material/button","version":"15.0.0-canary.901c83e77.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@15.0.0-canary.901c83e77.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","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":"b7fb63c63196547f3d8cf5433cf1c95542b2be68","tarball":"https://registry.npmjs.org/@material/button/-/button-15.0.0-canary.901c83e77.0.tgz","fileCount":40,"integrity":"sha512-SnlIjpnjfsaic2B4TWq7ywJWM2hyhSAMyRWjw9BABSziJIpYvEP8evgJaN4yaWbxY6boJsupHkGTABmD5Z2Y0Q==","signatures":[{"sig":"MEQCIB9aoIUeCj7CeNvGCqNyVTcHjDSTdXuf+n0HzZOEHlDdAiANswMap0LvIzw0+qPX7gGo8xIeRfmgrCQUQy8Ou5AXug==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":649726,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJj/PEhACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmqu2g//Ykn+OIrDNKPF4Kz1pdTJc2Mau0vNhLrB2fbfGbEE5pQmHx5q\r\n/TtlhNTnP1Qrm6jUqjW+f+qSsT4Ne/vPwglhBswfVuDcWZVmNI1WeEa0GCvE\r\nWJ77JCn8NNXAW+1z0yoE55NeRX20vCTjvHjaeog/RLgJEveZ4NyjyqErj80/\r\nLt5RK9xszu5/fPbYdslw+xxPRPA+xiZRhVR6dGdFqaUroZvQoBOukOJ+5uqD\r\nR05Ew4llAJfPJXUilBwnQQjBhqkOSUZsmPit8mIYbkCsUv33G5vsSFOy5uFg\r\n4Z9z2KHyIDwAKPKM0PomDYDTeTWOyeHTD8EQf0GUy/WE0v+3SBAVSVuTd9o7\r\nbHeVVXpmcgbPj7ufKPWNdYNKopM+OOn/gONwyyN0kNBIpgcnaBGvnsOyG9VL\r\n90ackYtYWWriXL90Z+KCEBeuxSSuGb6E6TYl4OiyCJccBx1/IWkhcjAtCSug\r\n0pgG1rMHPwuMvYXE94Uz3Y8m/vwFwdVJI+djD22nKkje1QxP6lMAO96jR/UL\r\nQ7Y138ZkjvY8OBg5jFsNzWMHnUOy6WfuemzNDeTkSgiWQWhmLk2Jw7+/4LlP\r\nnjZwAY/5CNPUmtm9rCXCLlaXt0eGxfTHvgbfJTbQ8xdiiv3kg55+s5E+G5ux\r\nx4IRU8Bp7p7zvkK4Kt70AVttQHE5T8+l1XQ=\r\n=Gm9c\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button/styles\";\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nThe `mdc-button__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused button.\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.**\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n**Note: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.**\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button--icon-leading` | Optional. Styles a button with a leading icon.\n`mdc-button--icon-trailing` | Optional. Styles a button with a trailing icon.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n`mdc-button__focus-ring` | Recommended. Indicates the element which shows the high contrast mode focus ring styling.\n\n**Note: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommend always including it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color-or-map)` | If a color is passed, sets the default container fill color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`icon-color($color-or-map)` | If a color is passed, sets the default icon color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`ink-color($color-or-map)` | If a color is passed, sets the default ink color to the given color, and sets the icon color to the given color unless `icon-color` is also used. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color-or-map)` | If a color is passed, sets the default outline color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\n","gitHead":"86c988d321eecbf29bbb6cc63f7dfa18cda02d4f","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-button"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web button component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.901c83e77.0","@material/rtl":"15.0.0-canary.901c83e77.0","@material/shape":"15.0.0-canary.901c83e77.0","@material/theme":"15.0.0-canary.901c83e77.0","@material/ripple":"15.0.0-canary.901c83e77.0","@material/tokens":"15.0.0-canary.901c83e77.0","@material/density":"15.0.0-canary.901c83e77.0","@material/elevation":"15.0.0-canary.901c83e77.0","@material/focus-ring":"15.0.0-canary.901c83e77.0","@material/typography":"15.0.0-canary.901c83e77.0","@material/touch-target":"15.0.0-canary.901c83e77.0","@material/feature-targeting":"15.0.0-canary.901c83e77.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/button_15.0.0-canary.901c83e77.0_1677521184793_0.05947626063361411","host":"s3://npm-registry-packages"}},"15.0.0-canary.5cb8e2174.0":{"name":"@material/button","version":"15.0.0-canary.5cb8e2174.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"457ea20b5f095803566784e36b347e30bb97a356","tarball":"https://registry.npmjs.org/@material/button/-/button-15.0.0-canary.5cb8e2174.0.tgz","fileCount":40,"integrity":"sha512-gQcKkyZr/BI68zIE4l/XxZZ+BDRD4+UaKWqesDtDASvHNSuFFoBfbCyPWluCfzK7JoEuHhi3qo0hC+0qytDzWg==","signatures":[{"sig":"MEQCIBBP9HF7v5NusM/tnni40SAnVCq0emAWUl03gflDlPQbAiALQPe9L6vQJO3zKj91fPJg3PLmvgzmn/Qhzt4qNiGDBA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":649726,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJj/37xACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmr/fxAAoKaF6A9p81MCAG/utvILkL0DSSB98Thzu2TQOPBYJAJ/hOKC\r\nqhsXjDUrk1pdD8F6azzk2zPdoUo2Adr7DE9mteLfKTxWFQgrV6DDgcWlj9j/\r\nQOkbyOmr43yYaZEM9eizdKkmkom6QBqiZVYzl+RgurlnNQxNYet3azHAUEBd\r\nOaSsdbcp/scCbJHbPvBGTMh8uQ/bf00ZScF3GwPM0a7EKA/voBkLzU+ipuGA\r\nFszI1NooxaZprvbPIyajKDijy9VfAAOB5tp+I6/O1Ogmi6YYIGF8UkpGdoLA\r\nursroVB7jzfDByVUdjQ1AIfOYS7TweWH6yqeLijRCqAvdkG8wKRj3HEwS0Lq\r\ne0FKf1cFVOkfr3LUfEsZM+aGANmbeuA4J8pppQawqVvUVOMIBXgDHLs3WTL7\r\nungaOD3Cgi8nYvtcsS+5bZ9zHobWlwzSUPlGhK1d/4N5yZEnoFc71XTF28bn\r\nWYKugixv9sl5QANhj2PQeVUqekmJaUQUSx5zIF7UHUY8/WPYL82/RObZrZON\r\nGqqAV3WFXLk4AE4T09HLfiYf1cdAT90mPq9/skds5U/tzEkgqw3ZTaboc4lQ\r\naJhoNtZ4oRaE/zHM5/qenX1zp9KkwoUgP7zJryy+1lRsOywsLaAt4gbQV0Bt\r\nfNpjsReEoetoLKuQ82TzJNfEJIft7Zrwo9A=\r\n=RVJo\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button/styles\";\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nThe `mdc-button__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused button.\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.**\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n**Note: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.**\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button--icon-leading` | Optional. Styles a button with a leading icon.\n`mdc-button--icon-trailing` | Optional. Styles a button with a trailing icon.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n`mdc-button__focus-ring` | Recommended. Indicates the element which shows the high contrast mode focus ring styling.\n\n**Note: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommend always including it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color-or-map)` | If a color is passed, sets the default container fill color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`icon-color($color-or-map)` | If a color is passed, sets the default icon color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`ink-color($color-or-map)` | If a color is passed, sets the default ink color to the given color, and sets the icon color to the given color unless `icon-color` is also used. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color-or-map)` | If a color is passed, sets the default outline color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web 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/density":"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/button_15.0.0-canary.5cb8e2174.0_1677688561077_0.48148848631418706","host":"s3://npm-registry-packages"}},"15.0.0-canary.f32339937.0":{"name":"@material/button","version":"15.0.0-canary.f32339937.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"84a6e113ba23bd1b894ffb1843a00f46b572cd8a","tarball":"https://registry.npmjs.org/@material/button/-/button-15.0.0-canary.f32339937.0.tgz","fileCount":40,"integrity":"sha512-YaA2GiaxEyGkkF9+nq6Rjn0nfpnqpCq4ttKcsCFjpYj2x/IcGChcYT5OnXAlMsXXlU2OZcBo+VA5B6Y18lsddw==","signatures":[{"sig":"MEYCIQClG4Fic1bqKOD5uEmrZf9Zm4XVLbfxtOT0UwHgDzsuhwIhAJdf2GnGDeoFndYvYHOBkL5fb+47KIUR2ySOiQmkka8N","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":649726,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkBgOkACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrQyQ//ZvHF/ZJBd3vYkcs09XtCJG15pjRqzwGCoRlfgeQ0MkyEsdIM\r\ngqbGKRWqTfiAMRAO/IT5AxmquygWFcUVpAbmc0xmMQXM/ffaX+N3mk+tZNm8\r\n0zfCTmaKzXuP5x8d9x4FJY3qsgyqeqrAXaYHCS5196+ZcxS/Lf8M9YyP++P4\r\nm25G5j+g35jfBFpryd4rPgidwDhaTyngHvuK/vv917nsXkwyP3KxotdxlD+O\r\npLW8/OhgndHbvlneatlGpX6Vg4O+7q5m8xPTs7SAx7OythK3MvtZ5ZXA4of2\r\nBCl2YsNdaYLEkdxW6Cxu+v6i8N+qhQdTCDYkimFsHEc9l99y/HTEvmUDsXoC\r\nQ9rT4KHQCM5E3eYYhWsF2aoMgjA5QFLmMdI4XjKmp6uE67a9lrFO/XytV7n1\r\nMVMnR9iU51iHErhUArMUgOCTKuU15ZpMk7Ny1seCqVVodKAt2YcmzltvOGrC\r\nLJ7Vwg+1/eC+ll4g7jUZOTEeevf0vGNExaPjxMBV5gWi+f5XP0tf8juVLcN0\r\npbjEicr6nKvYRxJOD/7fja8Y/UhJ6tpKsh2sOtbytpNYE6Df46OODcBrGm1L\r\njds0/c36NriEnJFc2JxV8GlpMebZwQe3WSE4P6STNbnIFnH7w7nbvpnKGSeM\r\n0ELjSRU+bD1S6UesCUgO+aiGk3jMIXGN8TE=\r\n=vu10\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button/styles\";\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nThe `mdc-button__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused button.\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.**\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n**Note: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.**\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button--icon-leading` | Optional. Styles a button with a leading icon.\n`mdc-button--icon-trailing` | Optional. Styles a button with a trailing icon.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n`mdc-button__focus-ring` | Recommended. Indicates the element which shows the high contrast mode focus ring styling.\n\n**Note: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommend always including it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color-or-map)` | If a color is passed, sets the default container fill color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`icon-color($color-or-map)` | If a color is passed, sets the default icon color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`ink-color($color-or-map)` | If a color is passed, sets the default ink color to the given color, and sets the icon color to the given color unless `icon-color` is also used. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color-or-map)` | If a color is passed, sets the default outline color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web 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/density":"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/button_15.0.0-canary.f32339937.0_1678115748228_0.4082593089096429","host":"s3://npm-registry-packages"}},"15.0.0-canary.7644d63d5.0":{"name":"@material/button","version":"15.0.0-canary.7644d63d5.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"dae35bee775ac19d64b6a1ed65ed10940f8a571a","tarball":"https://registry.npmjs.org/@material/button/-/button-15.0.0-canary.7644d63d5.0.tgz","fileCount":40,"integrity":"sha512-t3kZbMiCFSblFr0pFQN2WjbI11f1FIF/5oPFMlZ40yy8KwAcJy7DtLA5o8g9+Y5puF56Y25kJzNSDoyGXfVsAQ==","signatures":[{"sig":"MEYCIQCKGvhYKCOzDoBW5Mk8awW5UPuojtw/QO8njwulaPs3vQIhAMcFgp3OJMjAL+FdyBOGuQWxNeTLXNuYF/uUtpLha9Wy","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":649726,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkBmjdACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmqn2w//SlihUts1gkYR/WkvUsJmLdXngYdAsSEbYbi3mWy6zVb2LuIY\r\n2W6vcS4ntGKzuXlxbnHyeQdVZHD/oH16BzRW3hZVkXMrKjqjtbU+qVpOsdDM\r\nGj4f2SqRqhh3RwKggAFHaoApzDHXzQ780MV7A9FL3BsW7bhMZOfwhiw5gpwL\r\nz9j3wq6Q/8RFM5RnuADYayDrgOZHFT49hLBW0hxfASRKujguRg3lWvb3KauX\r\nJ2b4x/cLcH9WysphTz4ma6ZiLTG8iWKCDju1Sd7lhtivOjbKHQ0BLc+jEthc\r\nU6oJjDvtcETbx87r7R9LShwHK5wN0eQ5TYNseWiWSbX7xa/4g/t3mznkKokM\r\nL7rQcYGHlTDnTWqyvjqVX1nWo5mskyY+9fQ4+Me/TBBLgdLs69qS4jIwLhXA\r\nehSOTAbZrUbR8QBzx3ZMTu379opPJhYLrV4hDN7xN+gkb+NySLlaELt9H8rt\r\nt2cmf/vAgH1oVT5I9WhEHwaD/OEVfMZmFjNfPzyjvzr11mGt1kBha18DLmfX\r\nPFQoyA+1695+YR1FvwWW9JIv0iJ/kVDSXSNuewOAqKfxsui9gsNOmAkW+rD0\r\nZnxYri4EJFi2CzZN8x389uOQSEA32WnR1kVG6n8HRj66KtVoIfbdQz63S2aB\r\nKsWRFD+1qyMv3V/oNwTOdRTuV7KXC0cI8aI=\r\n=jppY\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button/styles\";\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nThe `mdc-button__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused button.\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.**\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n**Note: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.**\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button--icon-leading` | Optional. Styles a button with a leading icon.\n`mdc-button--icon-trailing` | Optional. Styles a button with a trailing icon.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n`mdc-button__focus-ring` | Recommended. Indicates the element which shows the high contrast mode focus ring styling.\n\n**Note: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommend always including it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color-or-map)` | If a color is passed, sets the default container fill color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`icon-color($color-or-map)` | If a color is passed, sets the default icon color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`ink-color($color-or-map)` | If a color is passed, sets the default ink color to the given color, and sets the icon color to the given color unless `icon-color` is also used. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color-or-map)` | If a color is passed, sets the default outline color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web 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/density":"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/button_15.0.0-canary.7644d63d5.0_1678141661677_0.15218102180777704","host":"s3://npm-registry-packages"}},"15.0.0-canary.d96330c08.0":{"name":"@material/button","version":"15.0.0-canary.d96330c08.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"bb37db984045939bdbb963f8ddbb538d810d6961","tarball":"https://registry.npmjs.org/@material/button/-/button-15.0.0-canary.d96330c08.0.tgz","fileCount":40,"integrity":"sha512-bFmHldKpOkeYHmS68+mYS2eBN9TAUp33E5/eTbbalqu3JI0iF5Nfnn/CuiRfJHQYk5AHquD/vJR6U2tDtPLuvQ==","signatures":[{"sig":"MEUCIAGF9j2EVpMc2AmvJ9L2sgGfG5K+HEN91TFWLWel11yrAiEA7A58ScfydQ94z45/CH/qPPWe2ofUfGFztCoDOFW898M=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":649726,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkCHSIACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqCEg/9E0qy2DZkdR8tmiAraxUcnMQ9p0uaAHEHvk8ct80oLjAN/vkI\r\nHzwh0GoAhn3bK3VUo2fIGFevYM2hDLCC2LLrdTknoxUZsfXHvlE4AksU9TIV\r\nPw7ghC554rp6Dfqf6kiQHKxzz9k7Od7HmtNKJC0RpeewK9Lbk3blkGnTZJ/p\r\nHt2pJGDvZT9AjbhsHm6ONa8N9NANUVQytvlytsYyZPqZurOglANofiPwBXJJ\r\ny7Mpbqih8tGU8D+49prXQRHNA1q4athJxdF3HuYf4pFAG9qEdxllpY9s5u1J\r\n/vE17nnmkapCm6PCUVePQFn4cu0Jx4VJZd+3SK5OA2aqTtgjU3jTTr2g5oPX\r\n9NX16Wb4guvpBjJJMcu1jUmHwaYfcRFDDIhSOlOA11Ibad8/f10xGFe9ih2G\r\nUzDmDamOfWdBWkR0Eft6iV8AUil+M1MnGV0zYJrx+mO4/rTokoGyu9G7ihV/\r\nkGT7TwIQLtxpKpL6GGOUjSnVaHSmYER+LFbPn3/69vdof98Fq1SFUFK957Ts\r\nk9PQKC93EHCXhkKlWZ+VP4kUvVF0o8L3e93ndYxBHms/juzLRc1B1v0QybqU\r\nGb3QK+eN7hWUoRVI5biVdX1WEdBkidKONQ9RPNKLh+5ODlT7pIwExZECjcNb\r\njzPRoyd9ZmgGFqhMNHonPEN8WJX/Q4WQmEk=\r\n=I7e8\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button/styles\";\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nThe `mdc-button__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused button.\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.**\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n**Note: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.**\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button--icon-leading` | Optional. Styles a button with a leading icon.\n`mdc-button--icon-trailing` | Optional. Styles a button with a trailing icon.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n`mdc-button__focus-ring` | Recommended. Indicates the element which shows the high contrast mode focus ring styling.\n\n**Note: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommend always including it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color-or-map)` | If a color is passed, sets the default container fill color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`icon-color($color-or-map)` | If a color is passed, sets the default icon color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`ink-color($color-or-map)` | If a color is passed, sets the default ink color to the given color, and sets the icon color to the given color unless `icon-color` is also used. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color-or-map)` | If a color is passed, sets the default outline color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web 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/density":"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/button_15.0.0-canary.d96330c08.0_1678275719955_0.4711964952659795","host":"s3://npm-registry-packages"}},"15.0.0-canary.c99cae77c.0":{"name":"@material/button","version":"15.0.0-canary.c99cae77c.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"48b868151806270fb543a09a7a7e38228c1f8c3b","tarball":"https://registry.npmjs.org/@material/button/-/button-15.0.0-canary.c99cae77c.0.tgz","fileCount":40,"integrity":"sha512-X6Dg7vxQkb+0hBx99ReZgXXfmkdEUTv/yvmylThXqQF0igdx5skipoiWCTVcDVQjVkqcwpLD+VQnM4QWrXeUMg==","signatures":[{"sig":"MEQCIDdMyPjIs01ntxM+PfFm6MWr3Av4+MyOmn+ni8bEvYNuAiAAhjLmLhfziLCuFGP1OOzGfoRSPmBm6J923LSZWUB7Ow==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":649726,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkCR2MACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmr2ag/8DFmDIYO9U8DVeGO7PcPa3DcLFDaOCH4ODXL88Iyr9wXG+2YL\r\nHlu0ouYEH885+clWH3wMFtD4iJ1RTcWXIE53AZ4deTl4lk2wWo4FsalunHXz\r\n7x/vmWEJMzwKbOCA48ey6QLOQnD1oGGDbhaKSenkqDLz0q5HKM89LWMJW3/2\r\nuSKM3P4flX8hkBduzsfrIV177GEN0aiZI90BZRtpGnDLNIBQzPF2tFKlfwav\r\nAjqGKxu5Ka50IOXj5U4IFPJzjXwauR9D4U5KsV+6TxSasYH7SWTNwGVpqoR8\r\nxDOWDGpHKod3Lxs5ERo3xGOymx0RW9hoINGMBZLhPqc/0w9B4Fzvakj9s4Ga\r\n91VKECMWfOu1wZz0kGsC4v4Ishc0aDi+YduAOgz8ZH4NEKw8SCfFmtXmS68U\r\ntBu235SWuvSbRUS1iHtUz+9YJuViqNtPIyt8wY/WMjlQEbTQ1d1ys80rXDTJ\r\noGPuxnYb6NeIs2lPfwuWojbsjbRjJ5WMxi0O8IkxCBxSBUycBq+m3eD1K6Ps\r\n5nkXxV8huRTunyiGx19Itu6HJij32rHGuRzOfZhmKbBHdnABOn0gKbIkwWrL\r\n5NVlLFPRmWw5ZgHkcZqR/MDqtbLPkutfVK6uQF3aantGERV2LYf0EapK6KYc\r\nmZT+1XFgCbqDkzgLMAaSSSgYBt3YoJYifCU=\r\n=M8k2\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button/styles\";\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nThe `mdc-button__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused button.\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.**\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n**Note: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.**\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button--icon-leading` | Optional. Styles a button with a leading icon.\n`mdc-button--icon-trailing` | Optional. Styles a button with a trailing icon.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n`mdc-button__focus-ring` | Recommended. Indicates the element which shows the high contrast mode focus ring styling.\n\n**Note: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommend always including it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color-or-map)` | If a color is passed, sets the default container fill color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`icon-color($color-or-map)` | If a color is passed, sets the default icon color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`ink-color($color-or-map)` | If a color is passed, sets the default ink color to the given color, and sets the icon color to the given color unless `icon-color` is also used. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color-or-map)` | If a color is passed, sets the default outline color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web 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/density":"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/button_15.0.0-canary.c99cae77c.0_1678318988570_0.33312078061893935","host":"s3://npm-registry-packages"}},"15.0.0-canary.6023b1cd3.0":{"name":"@material/button","version":"15.0.0-canary.6023b1cd3.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"8b7a1c9f3fd55a8bd90046e7b1a310295b98f2e3","tarball":"https://registry.npmjs.org/@material/button/-/button-15.0.0-canary.6023b1cd3.0.tgz","fileCount":40,"integrity":"sha512-P0qZCo0vV/REdPu95Em/+AmlB/9/NIcBUkPE9BFPZ2wSX9jZej1eM7C3DB6R/YZaX4dliDIm+fZ1jjl6lYjEEw==","signatures":[{"sig":"MEYCIQC30GdJ2VPzOB3rjK7Whnb5U3PZZyhTCkxJT79lCzVXXAIhAMhx4Jb8tBo/6NKcJVXmMFqFfnFotYIPDNPyfXt6ISrt","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":649726,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkCeybACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmog+A//V+TGjehqdpvO30wWgMq/kDD/kPahdz6Mi5uMQ+a2jufSoBnr\r\nG3Exkiqf4Bz1pZ56ksZzh3fFe/4/70yBFdsFTo2FxXSzvr2KrBZJyFbQt0e5\r\n/irDe7XyFqt34z97ejCAIjCsQOFhoz2b19uCpaPhePHuXPjoCsrpaFI2NrSd\r\n3qrS41DM7wz+UnsTs2GuagaFS74hOmzivCU9HE+GKT26C3knsXb9qaqNJ5sP\r\nZVoaCNnRVZhEQnR4X8wOWAB4r8pfBjglN2GZXn4JMT9aXswE2iTkxmTzUeVg\r\n4VS0HxzvS73vwU/vc50O6R7spbrluPE3dWs7v8BaAFfbM7q2FMrJ+Yy+LR3n\r\nqsroxovr5k6m3Vzj6YWHS93Y20FesGp78ut/WfV2jsQC+YMJif0h5rR/iOMl\r\nD2uAaZEvMKg0MRQMNsUGV93k95CgG7crKggH1f/+GC8LSpVFizQEpLKNhY7f\r\nOFwYADP1t/InOZC779Aq81Cj4QciDRxxtalxLH1y4So8ufl6HvFvIgl7J3/B\r\nMq4h7YEDsuC4rGSqNljvrs3PhfguEt5fubWJkQLqueY+Qc8S4JFzt8OiqanN\r\nJTutrxQ+nBFvsZauEbObk47bsKl/XTc9/ywmPq0YJ2q0/+lDJdEviPQeXgCu\r\n+T3aZodO8+0s4ay6yZBqoZ0w0+yGZyNdrcY=\r\n=hq+7\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button/styles\";\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nThe `mdc-button__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused button.\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.**\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n**Note: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.**\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button--icon-leading` | Optional. Styles a button with a leading icon.\n`mdc-button--icon-trailing` | Optional. Styles a button with a trailing icon.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n`mdc-button__focus-ring` | Recommended. Indicates the element which shows the high contrast mode focus ring styling.\n\n**Note: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommend always including it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color-or-map)` | If a color is passed, sets the default container fill color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`icon-color($color-or-map)` | If a color is passed, sets the default icon color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`ink-color($color-or-map)` | If a color is passed, sets the default ink color to the given color, and sets the icon color to the given color unless `icon-color` is also used. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color-or-map)` | If a color is passed, sets the default outline color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web 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/density":"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/button_15.0.0-canary.6023b1cd3.0_1678371995041_0.373394709390388","host":"s3://npm-registry-packages"}},"15.0.0-canary.274610c77.0":{"name":"@material/button","version":"15.0.0-canary.274610c77.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"711b7f6c691314f753dc4c731fa77657da465362","tarball":"https://registry.npmjs.org/@material/button/-/button-15.0.0-canary.274610c77.0.tgz","fileCount":40,"integrity":"sha512-EOuloiQDpwvvHJHDHvJ8Ga8x1FNy/QhePnebIplHGE915zbftzki8BJLo7DIuzcXlYLrxpOFSBw9vezvzM0NqQ==","signatures":[{"sig":"MEQCIF3w+DY2tuPXLxrW7kIDorJWvK6rGl6oIV+MfUbk9ZfNAiAcIW1Ga4y3srh4UkIGNGLbAOChGzTDRg8rgxuhhsN6aA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":649726,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkCfQsACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmrr+g/9FvBNEmlo9WQP73VmgeBZC1Ek4OVXDroOrRgpnHQEcmJ0ofk4\r\nGlS6d/t7eWWm0jVSmq9GLcWt8kVjFQKTP2yLLh9NQeYDLZt2hdUv0dzoAnbT\r\n3BqJePAdEHjg/Gv2VKvrXG4TaTSLEd6F4WNe/ZwFn7mpdOT5TgdlmexpsOsW\r\nrOoF0oiqC0DlhB+w/4O8KzQXC3O+uiIImQPEi2+LhdSecs1p/ssdZtMzGg+5\r\nhDNryzyMUwOLNhrCAih5+76ifaf2kPWQqEz2lOkmN048T7XfphgSfgdFZG0f\r\nPz6VS0C3DtxIoBicNvRVd5P5kogtniVgqs89XmdBrZgKFdjtQmL2BnXuk/GF\r\nscIgy6o61z7usZ0ltRVML5g71peNgHT7BVPl8XUe3D+kJoab2Vy9lQgziuO7\r\n/YKMcAU1UMFNZNyTBygNDhqTTV80OAlPYyupbvIvDCM8jHxnZqcVLnRcwqN1\r\nWP7PAeOf4FtcU3esuFz6iX6fWohwanEHftu+nRKN1ZkKoFiTwhj7zJU0d42y\r\nKmtaIvvTOtKXfqT9c0UL3IUvWg8K9tu49MGgrUN7hDK7YQh/z/yIh8wDrBCU\r\nm2U8vnblJP0vuCZfMhus6GIjbtyr45xZcuiXRJZp8fVHe69w87Wt4d6NUx71\r\nUiVw6pknA8Lg0Hic/SaBxhdy2OPMC7kibL8=\r\n=yoMy\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button/styles\";\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nThe `mdc-button__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused button.\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.**\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n**Note: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.**\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button--icon-leading` | Optional. Styles a button with a leading icon.\n`mdc-button--icon-trailing` | Optional. Styles a button with a trailing icon.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n`mdc-button__focus-ring` | Recommended. Indicates the element which shows the high contrast mode focus ring styling.\n\n**Note: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommend always including it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color-or-map)` | If a color is passed, sets the default container fill color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`icon-color($color-or-map)` | If a color is passed, sets the default icon color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`ink-color($color-or-map)` | If a color is passed, sets the default ink color to the given color, and sets the icon color to the given color unless `icon-color` is also used. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color-or-map)` | If a color is passed, sets the default outline color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web 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/density":"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/button_15.0.0-canary.274610c77.0_1678373932208_0.4148575953105147","host":"s3://npm-registry-packages"}},"15.0.0-canary.a274583b9.0":{"name":"@material/button","version":"15.0.0-canary.a274583b9.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"c45312030da53b87a650ad60cd724cb8377a4231","tarball":"https://registry.npmjs.org/@material/button/-/button-15.0.0-canary.a274583b9.0.tgz","fileCount":40,"integrity":"sha512-x01iNCFXBhrXbOROXHEuhCGix0GhGrDvyqaQczebJlPFVHayeP8dGpksL5Wo12Er2tlOOtZNTxA0tBsGPTt5TQ==","signatures":[{"sig":"MEUCIQDrf53ydWTQuRU+9Rmxubig3t6pqaVjn3kVTqN3rq/BbgIgAbXdhYeCcdB6yQdeuv3+tjbKTQq/weWnKCC3Gpu3JTw=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":649726,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkCjkUACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpN2g/+KlgJsG7SMe80HJPSD8mqfrJlF9fPkb88mAt2QfP7B8JNrYHQ\r\nYeg1Tq0J8j6n3Sf8RJU0zAdYkADmBHPzX20z1B0CablpEvDE+S8NFGCOsU4I\r\nm6Rem9YTSfPrAWemI9fILhxZfw9s79m4iJkci1sQoI7Css+vaV2WDr0CsiIZ\r\n0f5nlKnpa9E7EVIfrovgj3cMpTYPnWnf800LG15rOyUAv4UCysJxxi1pxRLh\r\ngakeqeji3CacDHCIN8udOHDJ66ZAgAthSA4vgzNr8odhFTWETf+3UTLbupbV\r\nWdry3lh0Oaf/T9nZzn+dJGxIMW4aYCUbAsH62E1V+n0bVuZ3fO43ZEhXEqsL\r\n3VnQOBrug6BF/ghbkfPB6+hyB9SozzeheEqjfw+Jp5LMNDHxcAK+hVOKX/Q/\r\nvFf/eElZXNR9N08nuo5ZaJCC21dO6e92yd0Pl5DpgMLAz8cw7OD+sC2YWu15\r\nnBv+KY2fAQPylsg+hgKNCVT9ylRWv6XgAAzvkAiNkGdbiaBdxWwbqcmX7/6H\r\nrsjx9L2ANQZlcqxnqb2armvgnA+8mOK9xcTww5lxPH1eAKCWZIxw/8s7LNpD\r\nV4E9H6ZyY9eqZX0IILmLafB0n+wzQGAgwCEjjLA90Ocf/Lig7b1obZD+kqMF\r\nJpj8rHxrTquuAG0oBp9nW4VMAfb8MVw0BpA=\r\n=lc33\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button/styles\";\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nThe `mdc-button__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused button.\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.**\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n**Note: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.**\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button--icon-leading` | Optional. Styles a button with a leading icon.\n`mdc-button--icon-trailing` | Optional. Styles a button with a trailing icon.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n`mdc-button__focus-ring` | Recommended. Indicates the element which shows the high contrast mode focus ring styling.\n\n**Note: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommend always including it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color-or-map)` | If a color is passed, sets the default container fill color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`icon-color($color-or-map)` | If a color is passed, sets the default icon color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`ink-color($color-or-map)` | If a color is passed, sets the default ink color to the given color, and sets the icon color to the given color unless `icon-color` is also used. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color-or-map)` | If a color is passed, sets the default outline color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web 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/density":"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/button_15.0.0-canary.a274583b9.0_1678391572128_0.9027540022777927","host":"s3://npm-registry-packages"}},"15.0.0-canary.da22ca960.0":{"name":"@material/button","version":"15.0.0-canary.da22ca960.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"b4dc73df9f8f64c27015cc5dca9ec00f6025abb9","tarball":"https://registry.npmjs.org/@material/button/-/button-15.0.0-canary.da22ca960.0.tgz","fileCount":40,"integrity":"sha512-Xcq9zwDu3Tm5Q8qwk+OLsPm/xBnpVvMPVRaH/rsmHXWO2pKTGZjBBhBGXHz+msKiFRdwSj124AUE8xXqpkUKLQ==","signatures":[{"sig":"MEYCIQC0nUCzmbNPaOryk8O9/Mo618BIti1g0ylUW6r8Ok3OrAIhAMrjZtCB63/LyzLT0Ghz6sZadwacZTrYWx4XeKYYKbjT","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":649726,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkCj8RACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmowiQ//bGaHKMIbWUR4sbJHtbF+8CsjreTV41OlTTRIf4wp4yk+hH8r\r\nFaOBooLWEvTKUr8XU33Bd1QRG3ZV8iOfIccE0BTN37lO31lNQjiamc1GynHQ\r\n89iNGfIOodR4+2WxlmdB4tikOPqk/JtQzmSfR64GuI9QYDT4/Wev1yJAoqPD\r\ni34S5/p3eawdtzntGx5hYcN+aoo1AkfDdqI87gxpSpcIHJMLxmUl+StwxIPf\r\nWtGo/Tp5991n5HQFWITa9A9TcAr07DpPcLk3Iv6MMzrP6JFvPdfnubkZ0dAL\r\nBmX1zTVAgvI4hsHcpY1zfkaFYiVxGRR6V0vRb3Xrf7HsxsbM4tGeq29Hyz5D\r\nK38vL3vr/+T1cc34144xqzuMmI5ej7RjW0BPkJp437ZH8jA+Wp1Od362GueH\r\n9E+NxusojR3tcN7jd/YF21xeB6Zr8nj8IMTwTlPccOAezpKJ3sRL84XXdmrP\r\np1PcQ28zXtSvUP/WpUxD/pFJq8kRw64sh9jKZxH9XHBQxfkpYaoX7xkOB8DF\r\nnSxXr8AsWMtKhx9A0PMfRB5wkG8DHR99kNnBr/0Adkzmg1Ivk4+oCGMwjpKp\r\nlTf/e45+kxA5/g6nDxSaoeC6ZaYby8CafNMTrY1B19kVkWV+Qa4sZLu8EDBx\r\nDvn0zNMYioGhRYLOxsN1ofA5UODJ3x2Ic2k=\r\n=jUdU\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button/styles\";\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nThe `mdc-button__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused button.\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.**\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n**Note: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.**\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button--icon-leading` | Optional. Styles a button with a leading icon.\n`mdc-button--icon-trailing` | Optional. Styles a button with a trailing icon.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n`mdc-button__focus-ring` | Recommended. Indicates the element which shows the high contrast mode focus ring styling.\n\n**Note: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommend always including it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color-or-map)` | If a color is passed, sets the default container fill color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`icon-color($color-or-map)` | If a color is passed, sets the default icon color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`ink-color($color-or-map)` | If a color is passed, sets the default ink color to the given color, and sets the icon color to the given color unless `icon-color` is also used. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color-or-map)` | If a color is passed, sets the default outline color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web 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/density":"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/button_15.0.0-canary.da22ca960.0_1678393104952_0.3726874856997344","host":"s3://npm-registry-packages"}},"15.0.0-canary.304a94e8b.0":{"name":"@material/button","version":"15.0.0-canary.304a94e8b.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"f44722559866f2dbb147fccd49e3b8f3d55e8c66","tarball":"https://registry.npmjs.org/@material/button/-/button-15.0.0-canary.304a94e8b.0.tgz","fileCount":40,"integrity":"sha512-1MwrNwZ8yuOXLe0t5hRHCUswF4W+VCtZQ0RZp1K+gzjkl5mI33Zz9da1fjxEOGoO7Ppu6H3xcq31yvwHtK4PHw==","signatures":[{"sig":"MEUCIQDBSVg2S6+vk0opAb5oFRc6LJeNjx+v9Y9tsVHuYgEG0gIgP0tV9Lq5UlJM+3UTqCUp6g5NuMqTkynsXTuRuOJ1VYI=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":649726,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkCkVYACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmq8Mw/+OZ7d8aIrirFtJFD9/eTFw2b729ozgauSgWtgGjEbRUSrPO/P\r\nVVI+7RNR1gYBqXqo5vrN/yjeSqeGkKItP8hFu372bkWwSOx/FBnjW36PniDC\r\ntmnFOkCt1SlLOTboTWn9JW70ojNftyAh54yckJhY8scYAgYgKg8FVM2C2Qkj\r\nIlzShntRrh3eqgqWSdCAcAcfPQER/F+txxV0rNbsQMztxIZY+muBt4MYCUKO\r\ndiXDkSIYUCiYzdXDefoJWnSBPpEEKuwXCM0t3eZWuLggOBkkgcFLsAecvccB\r\nkHadre7LOSZGZQqJr/iO8CNcNvpHAEEnY7PX5UE61YkCCTgXC8Y0/pI/m6JD\r\nW9T6lZj9lwkiRCvy1P7x9NooM0LbDFVkqW5GRKDNASapzMxynfKEmr4iZpwF\r\nzI793Vzu3xIvSVNWTHwPZ5xMj9K8mmZwgKBieq3aN0cc9kAo5breJhUcZOTG\r\nNKGBK3rPcd1A+04N2WFZLCYrMaxI/uqQ3mwX/xC3JETtRmWxOvFFLspOFL+k\r\nZLY1qOLlgrvQ2ZQKslUK2frET200dAVDbS/zXKxZa3FVB+ELOpMTwJpYAnYy\r\nK41YkzIPKe2l01yP8KqOz7x1KY48v0pUWz4rxnMPbypvvOqK82tENGn6aRB/\r\nkExO7PDCvImafIsIGSFUyLQyU+t9ueVNMYg=\r\n=8rTG\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button/styles\";\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nThe `mdc-button__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused button.\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.**\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n**Note: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.**\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button--icon-leading` | Optional. Styles a button with a leading icon.\n`mdc-button--icon-trailing` | Optional. Styles a button with a trailing icon.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n`mdc-button__focus-ring` | Recommended. Indicates the element which shows the high contrast mode focus ring styling.\n\n**Note: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommend always including it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color-or-map)` | If a color is passed, sets the default container fill color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`icon-color($color-or-map)` | If a color is passed, sets the default icon color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`ink-color($color-or-map)` | If a color is passed, sets the default ink color to the given color, and sets the icon color to the given color unless `icon-color` is also used. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color-or-map)` | If a color is passed, sets the default outline color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web 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/density":"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/button_15.0.0-canary.304a94e8b.0_1678394712292_0.7180798551454195","host":"s3://npm-registry-packages"}},"15.0.0-canary.6c265915c.0":{"name":"@material/button","version":"15.0.0-canary.6c265915c.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"a7fbdc925fe605bcb1984b75f6be32693099c29a","tarball":"https://registry.npmjs.org/@material/button/-/button-15.0.0-canary.6c265915c.0.tgz","fileCount":40,"integrity":"sha512-X/bUSOoncTAMrQsN8dZ2qL+5NNSnG/ACazFGF4VpiXLVerNadp06dTPzve0rtUoNAFQgn3/sfRC4S4dx28MBtg==","signatures":[{"sig":"MEQCIFuyduHiNoidboh6sgnVkGMB9BPcrzPqAQkvaYiyML7nAiBu5mR2hss0Pvv+p0RDWVhSogNgler2nWymEs67zz82PQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":649726,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkClPxACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmp+Bw//ScNq9lSMROZp1sLVbIOCncuNL1/dOWVaOJuQKQJLCzE69cc2\r\nTCQzyoRTSk2X99lUKyLmtJ6czTuwU/9idpmC5Iiar4I/+lmQKjasrevNqxzd\r\nhPSihs2htSpGZAeTMtPlKFdnjYBMW6LRUZLcKm532ptSPzr630wK4yIEhzie\r\nWwNCpYae1CvW/5xJCt6cmZ+7ogvpdBSeJZWkiTUFQxkNI91dO0oVHDFUtEQG\r\noXzRgayqm9ae/7OQVmqld6scSCBd6bZSSGGWROimH5OfRY6zp3vN5+lzfjWS\r\nOgskzrDqofVdH4Tt9kUbZddMWexS3MlfnGZWO2cHCSAoeSr8gucvySddk0YY\r\n0+xvH2pDgGUReydk6zqJ3y4xWblGdv8hlC59aOgutwghdED1xa1Qf4pHHTBH\r\nfTP5ohMTcr5XeZ6xveN1iOeaTJpEs4lZ2bX4R2hUWzS4i13iKdGvIDsHiWEF\r\n4gWFsiNj77UB0BbiZ/EeM2gxhGpoHy2naEjqZsYEV4MQkqrExIlnn1906ICj\r\nqwGSakW+3kICG/qGHzFctECr5MloMUxcwx17JC4PGv9zWJVgoyar0YrdqEEV\r\nmqXlQDbSoxifoguptQgbB11OZZ2qcyM/hPL0X/u7gCTiZzE0EUOzQbjKvWK/\r\nCjbZaFpYHt1S+lvyWtHk3iG4UyQSagL+cQc=\r\n=+Hi7\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button/styles\";\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nThe `mdc-button__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused button.\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.**\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n**Note: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.**\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button--icon-leading` | Optional. Styles a button with a leading icon.\n`mdc-button--icon-trailing` | Optional. Styles a button with a trailing icon.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n`mdc-button__focus-ring` | Recommended. Indicates the element which shows the high contrast mode focus ring styling.\n\n**Note: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommend always including it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color-or-map)` | If a color is passed, sets the default container fill color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`icon-color($color-or-map)` | If a color is passed, sets the default icon color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`ink-color($color-or-map)` | If a color is passed, sets the default ink color to the given color, and sets the icon color to the given color unless `icon-color` is also used. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color-or-map)` | If a color is passed, sets the default outline color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web 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/density":"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/button_15.0.0-canary.6c265915c.0_1678398448688_0.9550961874141253","host":"s3://npm-registry-packages"}},"15.0.0-canary.de5224633.0":{"name":"@material/button","version":"15.0.0-canary.de5224633.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"2dbbe9f3aca8984590725363c36e73afeb00cfdc","tarball":"https://registry.npmjs.org/@material/button/-/button-15.0.0-canary.de5224633.0.tgz","fileCount":40,"integrity":"sha512-4qDXyAi+zqexjqcrd6YGZPJvs1re+qoSiZZexD8e3d+ABU/a5r1tgiQLIOqq4wky4300UHRO0ZN+aBCBnBzzbA==","signatures":[{"sig":"MEUCIQCl5NbnTZEC4eLta7hxIN9yka2qklNE4I2TMy9iE+VzcAIgbhywMyJzMuj8j+H0qRNpaMVvW9OaUmkrGJykagsAkqc=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":649726,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkCnIMACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoudhAAmHD8LwWt9cs/txmu+Sn9bL4FNm9cIzW41+Q750YEgLtTnX3B\r\ni2GKXnJTLjbTkAivLlUurhSVdWCZ9QP4HebzpwEmdd6A07QPAMzMQvjmubw2\r\nZam8VvV2zA33B61cdl8FwTyhulLKjSHEHR8hetur+YOiPKkBguMVqgerFSD3\r\nwko/n0oVQCcb0o0XW8zaC6fHHdC+89P+F6lvdV/jQgR4WDOM4dGS87PAoO6l\r\nk5ThQaNxZxFptKgBCVc3PqXmhP+xjtleApoCZMyKjOv3X1pBfKTc41+ROiAg\r\n6FWyy6rstuydQd4yTG592TmkQa+QRAXrlSfJO7I1zn2EqHa024PUX2NtARcu\r\nV7QqkF0Z/Tbgy4SC6ouK7jrEDr3dyuCLDU0v70MtfxawtMSPvopt/WVKtFSE\r\nXWKjCtLoGjUGJSRnw04QWd8ccItrT6PRoyjiZaVD5plOzJ9oC+dt2by6dLz7\r\nhCRv8edDAnTRtoDXMjoGGCygXxWelMGLTw0PKd3uxzSjQ+sT2K7QiT69C64i\r\nF/Fx5uwZwXwqQyoEoVEpzaMTXaknEtOkqginzJFoUYUY5ZmgNy2h3ceTtvfE\r\n/Hygix8VZQ8oKsxDg69t8xNX90ImD2kVo7geAOVbFeusQZjKja3Xul8Csxcm\r\n9894mwRuVDXuLj062fdSDFP3tgdcLuTQJOE=\r\n=jzKL\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button/styles\";\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nThe `mdc-button__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused button.\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.**\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n**Note: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.**\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button--icon-leading` | Optional. Styles a button with a leading icon.\n`mdc-button--icon-trailing` | Optional. Styles a button with a trailing icon.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n`mdc-button__focus-ring` | Recommended. Indicates the element which shows the high contrast mode focus ring styling.\n\n**Note: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommend always including it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color-or-map)` | If a color is passed, sets the default container fill color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`icon-color($color-or-map)` | If a color is passed, sets the default icon color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`ink-color($color-or-map)` | If a color is passed, sets the default ink color to the given color, and sets the icon color to the given color unless `icon-color` is also used. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color-or-map)` | If a color is passed, sets the default outline color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web 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/density":"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/button_15.0.0-canary.de5224633.0_1678406156034_0.3182178563379152","host":"s3://npm-registry-packages"}},"15.0.0-canary.8879557e6.0":{"name":"@material/button","version":"15.0.0-canary.8879557e6.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"8d07b46cd478ea026ea71782dc2edd1627d9168e","tarball":"https://registry.npmjs.org/@material/button/-/button-15.0.0-canary.8879557e6.0.tgz","fileCount":40,"integrity":"sha512-kRnMlgIsOV17BA7hTqXjGEz0Bkw2CjZiWEfoAnlN5Z2OveawyijO/oGYoUkIMJzo+qwAKl1Qbx/4KPsL/oGvsQ==","signatures":[{"sig":"MEYCIQCHy6fNKNH6+y5vv3GLBCI0ZMIkkYIddJi/Ooo+pGKO1gIhAKw8551mwiCRm5oF+nzIlMSQ53kZp+DJlERDu6+8xkiW","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":649726,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkCznFACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmo3AA/+MIxRcP4SgfHJz9Is1elYZ8lA6DFlixWz/crTI7jiaH7Cnawt\r\nv0hWt5CEbUYR/j7t1NA0thaH+wjKlNoKyu3Nb9860A+jq3n6C38mPpHVad6V\r\nc29TzoykEzs816PtE4l5XH7n+wOuEX2DC5h9hgXzPbg/Qs1LaEhGdeNd47fr\r\nNr1ck3cZoqO+OO7dHNzRVPvzFeWGgpAbZS9QpQRTi7QI/3I9zmXuXy9XmKde\r\nzTZPrxa4rlyH1B5Mi7/2DDWd6haZ3d1QKtE4VGKciKlf/og/D/pQeT+KWiB0\r\n9djxhhIOCK7aB76trncivR2KCHH8T+TXZ4wDsUSv+84GxzXhhKQcwiYQGgzX\r\nokr5VLA2w6h4GaVdR85Az+FOneyL3B9XOHKeOKrJ+a03fz60y8ijvjPU3kFN\r\nhxJ28d6igHFKAGrpblN5twZVZnv64LTkBSjCBOO80F6LQ50/PbMxQzHvdQLV\r\nXSyqlVD17cT/FTNQLddDM5pznW+MY2hxcA9XsUd4Ii6dXKpK4I/1M/jmcDgp\r\nupj0Ktgpea1twe4K765rzybG10C5UYWjilpvICYKeEWbZMbE05kk0RCh2uLn\r\nJI1OpvjXiKUWJ5LZXyvNfQfW9JAAqL5UWczK9WG0S3PaHzHM7wmV/GEQm2Ak\r\nQLy6HHZUcQizqFDFEpKMlSzjgHTPuraW/QE=\r\n=F2qC\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button/styles\";\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nThe `mdc-button__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused button.\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.**\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n**Note: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.**\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button--icon-leading` | Optional. Styles a button with a leading icon.\n`mdc-button--icon-trailing` | Optional. Styles a button with a trailing icon.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n`mdc-button__focus-ring` | Recommended. Indicates the element which shows the high contrast mode focus ring styling.\n\n**Note: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommend always including it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color-or-map)` | If a color is passed, sets the default container fill color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`icon-color($color-or-map)` | If a color is passed, sets the default icon color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`ink-color($color-or-map)` | If a color is passed, sets the default ink color to the given color, and sets the icon color to the given color unless `icon-color` is also used. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color-or-map)` | If a color is passed, sets the default outline color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web 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/density":"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/button_15.0.0-canary.8879557e6.0_1678457284773_0.6662585573376552","host":"s3://npm-registry-packages"}},"15.0.0-canary.23073a303.0":{"name":"@material/button","version":"15.0.0-canary.23073a303.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"ba6b1174dc27fac59fb00485be2164357de72d28","tarball":"https://registry.npmjs.org/@material/button/-/button-15.0.0-canary.23073a303.0.tgz","fileCount":40,"integrity":"sha512-CdjwDzBzIT6sKTyJ1bfyTviveTpDegmMlbeyrMrvmmCYM50a72wigfVrs2F0o9uaeVkT6mclEp3NqNZXeLXmUA==","signatures":[{"sig":"MEUCIG0bQdogbHOJF0vMcwmCXdXG5DI6NbJgp/MqIHAev+mEAiEA5kjPvc0QbMtUbum0T+Ot1DulKeIX69q8jHIRmqy9XDw=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":649726,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkCztpACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmq57Q//fYo/AoDwNrbPkKjlaEmTEJw5l+NcMdOLk2alI8jodZFV1jmi\r\nWuxgnmEAmYI+WqY5XMJt+DnD8OLWNX1Nnsw8Pn83FO32puTWvh5rnsEAyOZj\r\n8R6lcj5ZFsDMk5tFK5rfk890UgL5aJ6aLrWNAllCB2d1fRqdoNIcOAu9YRip\r\n9AYKr3NiJGPEA1cBneoIubJ2EZLno1uUyqzPWPULiAV/IRB/DfDCXMELON+G\r\nfJgl+0T/Lyx34NhzDo/JtXNyjdtOHGhIlLVcliZsP2eszjL7gizAF7tXCNsZ\r\nUN9Thhf/IPxePSuH9+4qPLbZ7H9Z1X8MTMids80Mr1DsbBWYdA0tYs1HuaC9\r\nETWFJP1JKp8rpuCk/MYYV3A8uU14E4m80SUL2trMcN09qQd7y5P8H6CuQen9\r\nWNb6ZNHCUbg+QnamYpMbsIMI3i7s8ew3GI60NmFD8rKWKWKbgrBeBn+MwN2l\r\n7ZiTFD9agVNMLen0wXaPMbn3ZpEPac/wnUwaROBL4jnCqr2SyzE/NE4m6sSZ\r\nRmpAi4t0B2vt3YxMN4oe9s7+6GWxfgf5I3auMzaXydfVwX3xYv45Wl4fL1qN\r\nl31wuJ4zh1hGFSF+voCbstU7Fo27xmY3UMlIjeRbnCi44dC7Ic+hPH0yKp80\r\nTCEwMWEbfylK9yqKzT8WthoUicMQb7+Dxdg=\r\n=LMuM\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button/styles\";\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nThe `mdc-button__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused button.\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.**\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n**Note: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.**\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button--icon-leading` | Optional. Styles a button with a leading icon.\n`mdc-button--icon-trailing` | Optional. Styles a button with a trailing icon.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n`mdc-button__focus-ring` | Recommended. Indicates the element which shows the high contrast mode focus ring styling.\n\n**Note: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommend always including it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color-or-map)` | If a color is passed, sets the default container fill color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`icon-color($color-or-map)` | If a color is passed, sets the default icon color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`ink-color($color-or-map)` | If a color is passed, sets the default ink color to the given color, and sets the icon color to the given color unless `icon-color` is also used. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color-or-map)` | If a color is passed, sets the default outline color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web 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/density":"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/button_15.0.0-canary.23073a303.0_1678457705665_0.41292654129343087","host":"s3://npm-registry-packages"}},"15.0.0-canary.51c7d4014.0":{"name":"@material/button","version":"15.0.0-canary.51c7d4014.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"542875d0a56a0f2b6a022c21dac672803e7808d2","tarball":"https://registry.npmjs.org/@material/button/-/button-15.0.0-canary.51c7d4014.0.tgz","fileCount":40,"integrity":"sha512-t2doRPac245T8iU62ZfC1dmwl5u390R2wath1x4FCKrlAgnrOp1naJuUPjpGMYD1qJ3WxttDGIqtY19u4hf3xA==","signatures":[{"sig":"MEQCIGgveWj2TAl8ScndDiJDeHNHpSMoQ8Gj6KUbqH/f1r4UAiAvV9lsh3dSvk+f3G3O1ekQaie66xG8A5bbh19x2hhulA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":649726,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkC18lACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoGYg/8CXX30MVe72NyiQZ0LRqB/glIDnlvhVMqKYjJhGa1ft0H6PO9\r\nBFycg5/jZAMH4ZLnzp+Xsb2wrlKUPlJ+OkXoOxh/FpEGNDujFnjjepxd6aCt\r\nByVFoMukZgn+hWCE9/1VrnhQegVaNAQnvZQSqvkw6qdgN4LmGWU6ZGca+RG8\r\nkOiFDVZeCLruqzTHfC6OUbFvARJkr3WCtMAQys/eYFiuxPsgyobMebW2NqhS\r\nVKArkl7Z6zhIbAPl0jVvuvD1EwUVEmkXavfn130jsqi2K9QGd5rIL8tOQkPE\r\nKqxQ0YDnTnkKQVDmc+JxDzBW+DRdG4bk72a9D4xnBfGCMLzd194eJcKLKqcq\r\ncHgsyqqYi4DKcu3sBkZfYTgskR8l7eLqhzcisETtUBStnfngw0z7g4Rxso6E\r\nrHIZPd+EYqcHV9f7Lj/Ri3BjykSKh76AwjgN9PQaXdsF9UY8CCyJIfzXbX3J\r\nTIOZGxn2oYTqaSX9fwkfg/kQeA60PlpbIZYKhNi/FsAI3Psw+EkmWE5CsfBz\r\nTAxCeUmHuFX5boQiFj0kcBFFLwA5HipRG32aAfLWphd8ovit3UVSydseQee1\r\nRNQPuDH70ydwa4sxCf/sI35o9aL1VpnHEq3dBSIlohaNsidGUvcd9n8So6Zy\r\nitW78t/cZweu+c7sQ6K42U7+QpQVDF45Hxg=\r\n=gTu8\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button/styles\";\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nThe `mdc-button__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused button.\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.**\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n**Note: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.**\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button--icon-leading` | Optional. Styles a button with a leading icon.\n`mdc-button--icon-trailing` | Optional. Styles a button with a trailing icon.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n`mdc-button__focus-ring` | Recommended. Indicates the element which shows the high contrast mode focus ring styling.\n\n**Note: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommend always including it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color-or-map)` | If a color is passed, sets the default container fill color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`icon-color($color-or-map)` | If a color is passed, sets the default icon color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`ink-color($color-or-map)` | If a color is passed, sets the default ink color to the given color, and sets the icon color to the given color unless `icon-color` is also used. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color-or-map)` | If a color is passed, sets the default outline color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web 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/density":"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/button_15.0.0-canary.51c7d4014.0_1678466853326_0.12069739956285441","host":"s3://npm-registry-packages"}},"15.0.0-canary.1175a5be0.0":{"name":"@material/button","version":"15.0.0-canary.1175a5be0.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"728366c3846147ac68e088948d9676fba7157382","tarball":"https://registry.npmjs.org/@material/button/-/button-15.0.0-canary.1175a5be0.0.tgz","fileCount":40,"integrity":"sha512-gdGhBDYu5s5pGah3FALOHyHLauYoYfvhcCInYk6tKmLm9OXWKjW2azd/c3m7opL3JwUmhU/pw3J41dEGA7Y8Uw==","signatures":[{"sig":"MEYCIQCq4h9wUzi8+H+/WFL/Ai285DmxqRYw1WdiZGmk/iVchAIhAOqVhteaX7I20wuZNs1wBmKsOAurh37JDxss97t5ldyk","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":649726,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkC5eNACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqlPg/+J3AA6OeKBIyAeBvVwUbAm1/iZLrHQlYqWt/QnkR07Cc32l54\r\ni5XyP8eWcaHyDU/oDw37D/Aw9dSEnht0utGQMkvRjrKYQJU0ztMXyyQHTAEm\r\nJFQJNlyoaTCz5ezwhAFrwsFJLKMKDmpEtK7DpbMVeIu2BUpGspkibUBXUcts\r\nRmN+6TtO3qDjX0DZNFqg3QfrYILO468qeMMMS3M825/QpmYMoxT1jJ5MtDxw\r\n7qxwtfIAVWaCxRGtXSjXKcZFxQSU1g3VNUPn7yXxI1Y48tEtVmNQta9hfC8a\r\nvLl6ljt6j68yflwSeDo5Ae5Rp6pqS/4IyUrTLqKniKe8OypVtnqR9gJZaFl6\r\nrzvsje87Sa3soed3+Cda3zeWI8geNhYSFRsMTyzy86M8LXa6INfndsfHj03d\r\n6rW4cQ8WmtCxSjaRWpDBVZ1UWmo0SJP09XrQLfNEpkjiKhgkuU27gwNsvYXT\r\nT+Zua1kUGvhLknsX5Fi6wv7UjJOoryZK8+DpPhquU8rluvHYr/FGqPiC7R7U\r\nRfvkQYL/p97VUOxuKMN7rBsoEAbNsKsb6ji5MTkzJqGNZGHozYvUv59tsK7b\r\nF87/8Tc1SbR9PorpvBFhf8mTb+vCrcDPDD0jAjfxiPYEG6xWbe8v+Hdqo3s9\r\ngQ9HoRYmQPQhPAXy2/hyH/RLVXY2Q/FeNU0=\r\n=k8aQ\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button/styles\";\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nThe `mdc-button__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused button.\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.**\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n**Note: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.**\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button--icon-leading` | Optional. Styles a button with a leading icon.\n`mdc-button--icon-trailing` | Optional. Styles a button with a trailing icon.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n`mdc-button__focus-ring` | Recommended. Indicates the element which shows the high contrast mode focus ring styling.\n\n**Note: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommend always including it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color-or-map)` | If a color is passed, sets the default container fill color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`icon-color($color-or-map)` | If a color is passed, sets the default icon color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`ink-color($color-or-map)` | If a color is passed, sets the default ink color to the given color, and sets the icon color to the given color unless `icon-color` is also used. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color-or-map)` | If a color is passed, sets the default outline color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web 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/density":"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/button_15.0.0-canary.1175a5be0.0_1678481292971_0.9333117794896417","host":"s3://npm-registry-packages"}},"15.0.0-canary.7adf3af80.0":{"name":"@material/button","version":"15.0.0-canary.7adf3af80.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"291e10e642000a5ef6d1f11d97b364a85441295d","tarball":"https://registry.npmjs.org/@material/button/-/button-15.0.0-canary.7adf3af80.0.tgz","fileCount":40,"integrity":"sha512-BaabEBsLmDGitXS60BqLCy+ZbGcVtZ6hTevaB+pd9WZG7S1nuqAiV0Q6hlK5s2rr1dCPw//Eh7dBXDSWNvoYFA==","signatures":[{"sig":"MEYCIQCkaCpYostTltCVpjTumFMejyvJC09ZXmeUDQlNaJQxSgIhANb/k/q9L4FrCt5ztOLVAKdkxG8nTbAZ6dD7B28tKgLt","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":649726,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkC9h3ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqEJRAAkt5w+6jKYmQWEMwFzxDT2YhRQ/41cSV7AeIl+49z5/FomwBQ\r\nJCH8pvn5cylAJOziBP44MCeLi1MVC3qDFSgx8GbyvivSq5aaFKsjoxjcSePT\r\nk+0+SX91kTCTXHDyaJhurVBxcu6HyHODwweKcqZ0ZoXLB/1DkxwmvJw+bhrF\r\nnmHEiiy+IdD5aF4OEEbq3LZFYhKtF6W5DpvZ09Pe79BaJQJOuCEUfZQVgESF\r\nTTidLPWDtXqHZN0hS7LHpdyDhVXyBTS4lHk6bAT191iAETWCBE9Z3H6a3d/X\r\nuKAaNiK/9fBb1xEkCjQ8rpwHU1bcuGQ36AjyPvBQz3cPw4Tjjiz+ZsyLXc8Q\r\nS7oGz6wS5/mZwFbTKAVcP0gxeXNXOAubWnAJcwv8yBxaHmjEi1LytqEmPxmN\r\nJvJqmS7rm7nwP53C1MzdYpTkCqNrj24KpXNuMtzndmJ1cx2+mpIyHNw5keFV\r\njE5ZEuBZv0vVbI8aj1IsepA+3+GJoyWxYnqkv93Ve5JbqVaSxwxSKwGJcEJ1\r\nCkBceqw3GI2mVnwLeDwg1qEWV5w+y/TV0lxd2TQuQaMKIIfInJqlGePk8yTw\r\n581tMmx8oCCrCHpm+JM2qcBjXS8KKj6atP597kUfd8sg58MinKm3zb3eJdBP\r\nxnega/HULyWYhpFDCjoHt9fPigDSOvPQhFY=\r\n=+zRU\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button/styles\";\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nThe `mdc-button__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused button.\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.**\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n**Note: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.**\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button--icon-leading` | Optional. Styles a button with a leading icon.\n`mdc-button--icon-trailing` | Optional. Styles a button with a trailing icon.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n`mdc-button__focus-ring` | Recommended. Indicates the element which shows the high contrast mode focus ring styling.\n\n**Note: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommend always including it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color-or-map)` | If a color is passed, sets the default container fill color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`icon-color($color-or-map)` | If a color is passed, sets the default icon color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`ink-color($color-or-map)` | If a color is passed, sets the default ink color to the given color, and sets the icon color to the given color unless `icon-color` is also used. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color-or-map)` | If a color is passed, sets the default outline color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web 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/density":"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/button_15.0.0-canary.7adf3af80.0_1678497911260_0.5958684586522687","host":"s3://npm-registry-packages"}},"15.0.0-canary.82554d770.0":{"name":"@material/button","version":"15.0.0-canary.82554d770.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"0a8d97a5cdbbbb32f17636be488b9f643e695654","tarball":"https://registry.npmjs.org/@material/button/-/button-15.0.0-canary.82554d770.0.tgz","fileCount":40,"integrity":"sha512-6iQyfASrbyPiSArUK4rYEbdhixJzFFjZ0d1k+C4UqT0559HBWQaxLLW8rsNDRJYOXIrTYicE++GPGfLBzlrzaQ==","signatures":[{"sig":"MEQCIE3AJiUl/2l7AjuSqhQBOtzxbTpHDf16Ps0uSILISzHzAiBk+b9oZACtPrDXa6q6WRfwfNToKHoMvDFNAs2MhpQftg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":649726,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkC9tWACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmr/wA//fBD14b4XMoPPr5Vn0KJm7ooMG8SO9T5ZO9vjELXk1z5JAAeY\r\nMtE1l/Haa5u+9EVBEdlC1IaoNsMfxkL6DFSFwsu+dsBAgv1SNJaTmovsOAnG\r\nNVdRuMUc9LtgUd9PrSbUQcFaDzmPHASiwWWm8zIx4MU9q+VJUsAglV+jtY/7\r\n5DxAoZtc1zxZSxOPZFGr5k1/a2dpItqpDmi/4PwlLcJaHlY+cCzQ5zoX0jvg\r\nXILRnyH+j5zQEGe6yMBCPRUPAjfA9M8bGjiVzLVe2gNlZXZEaK0teCJZcGCD\r\npnr1/SM1fs/CMMu/ekh9pr/r+gjVoUOAw5N76Mf7u6kxCpHCwadjfprhwSyH\r\nySpmAl1uhuJdV+4w233tYdl4da+KAeByQQCIBwC6NqWbZTWWHHE5jpWCiK0k\r\nwn/KzLODWe9lyfD3E6kR4rq2uIPOdVHtA9PmV6ozpAIAIyUzFP683bCpJzLv\r\nZt50H2FOtRAzCH+kDAmtv+IGr7J4O7LVqJXCFvf2uvUV6EndEyjtjqpfCoPM\r\n7QxtK1Mmv5gkUyWavIfq239gFPfcTARQPYP8BmRE7DEk49vbKFf2+d6uvT7p\r\nBBzCCP7V34htnccVzSBlsxwwnhqVF6IhZVv+2nKdFXobzVBVNesFni0GbIo2\r\ngRfzJgJveyZJsLbcZcxE+6s1r/PfwCSuin0=\r\n=/aIS\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button/styles\";\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nThe `mdc-button__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused button.\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.**\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n**Note: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.**\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button--icon-leading` | Optional. Styles a button with a leading icon.\n`mdc-button--icon-trailing` | Optional. Styles a button with a trailing icon.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n`mdc-button__focus-ring` | Recommended. Indicates the element which shows the high contrast mode focus ring styling.\n\n**Note: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommend always including it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color-or-map)` | If a color is passed, sets the default container fill color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`icon-color($color-or-map)` | If a color is passed, sets the default icon color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`ink-color($color-or-map)` | If a color is passed, sets the default ink color to the given color, and sets the icon color to the given color unless `icon-color` is also used. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color-or-map)` | If a color is passed, sets the default outline color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web 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/density":"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/button_15.0.0-canary.82554d770.0_1678498646540_0.13839303748900234","host":"s3://npm-registry-packages"}},"15.0.0-canary.93fc524b7.0":{"name":"@material/button","version":"15.0.0-canary.93fc524b7.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"1ac2f1e6a134e6afbe4c0353826cc9bf5ef04e51","tarball":"https://registry.npmjs.org/@material/button/-/button-15.0.0-canary.93fc524b7.0.tgz","fileCount":40,"integrity":"sha512-43GmFwrArplL0YrF5GjakOCVTwpwWmGp4JcpdILFwmEjSeGQCzE44787FP6hxozq8HDREaR5IsWroE26aF76nA==","signatures":[{"sig":"MEUCIBt+/YmVvTueLPvnhODwgEOFdEeamf3szv7qCjSzHUtFAiEAiB2TIyj2bmrW9D9D1wlK51ivsvy9WOqCyUpYh+VBekA=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":649726,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkDuEjACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmo+ThAAj7w7DgZoz/m4bsAYbV/jBCAlgnx90pFO1AD5hjoIRThlTZgO\r\n98xq76VuxzRO2ELccmFwoikq6yEKovoe+77gt5KhnyAGuDxoAg1dAYkJsRFZ\r\nHrhYsaJ+9zQd1q4gZ3ZJtdM919EZ+4dtJiaAsbMLTEyXYcVnE1VY+w/olQpl\r\nBnJTilrqb4eFTJ5Ym/rZYNsFO1352d0WnTHphk5sfKRc5/aLdmG8cfxz5thP\r\nihRJnFECEX2+qgQk1bIlFLkpLEUUt9fR/JxJypHn/p5YSxiRUoLDK+QSvBSH\r\nsQLjKVsbAx/6JA0OjQWRaZPGOPh5DD3hHUOzovpUQ7VurHtrLKS3Tn/6oCyi\r\naMygu+OZh5u2sHJV2jwLofBjzN8VvjSfdcKX7VIj3FNViUO+DXMuuwlUD6MZ\r\nNrU+ozUzWx4Y3LuAphHH5EuLD/im34sohMoMqqNH+6e/JxZrkFbAN1SXFbuk\r\nM6tRyQh/HvE0W7gzSFKIANOVF2hxY3hxNgdqhAG9J1LfPJ6ugnyBTLejzx3f\r\n4HSJaJ2/MX2Kv3Oqfnd2b++VBqa4TcWWh9iYTS3btZNdKNIAViSziNTSo4MM\r\nFHDvVoqSzZE0U5xbaatR7l/vChKwxx6JSnP8Ra5tM+AD0HRMrTkP7Hhqb7Ye\r\nne7/UkD6FqRQpSPDpFtg47icYMVTsPlpkUE=\r\n=Sjv3\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button/styles\";\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nThe `mdc-button__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused button.\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.**\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n**Note: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.**\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button--icon-leading` | Optional. Styles a button with a leading icon.\n`mdc-button--icon-trailing` | Optional. Styles a button with a trailing icon.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n`mdc-button__focus-ring` | Recommended. Indicates the element which shows the high contrast mode focus ring styling.\n\n**Note: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommend always including it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color-or-map)` | If a color is passed, sets the default container fill color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`icon-color($color-or-map)` | If a color is passed, sets the default icon color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`ink-color($color-or-map)` | If a color is passed, sets the default ink color to the given color, and sets the icon color to the given color unless `icon-color` is also used. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color-or-map)` | If a color is passed, sets the default outline color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web 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/density":"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/button_15.0.0-canary.93fc524b7.0_1678696739411_0.2639307959443822","host":"s3://npm-registry-packages"}},"15.0.0-canary.50be0fbae.0":{"name":"@material/button","version":"15.0.0-canary.50be0fbae.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"e163e7c337ab5ab26525dcc146d364fd5ad3b0a0","tarball":"https://registry.npmjs.org/@material/button/-/button-15.0.0-canary.50be0fbae.0.tgz","fileCount":40,"integrity":"sha512-uVVbBJRkXnSKIYot3YnlwUeaBELZFoDRbeFAaWj6L+SVdNDXZyt6dmGiC8C2hbUYBi44gZkmi59AZZ1coCochg==","signatures":[{"sig":"MEUCIQCVvXO1pAqBqx6GOyqYO7FFWd93P12eQVTmRrtGFz5JcQIgU+KPpvmaGhI7b//PgAD3ikzclBxYGYznsRd92FqGyNI=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":649726,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkD2D3ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqsMA/9HU9y0Z4NIgS1ptIG5rHSbrNTxhbTdTrBKfbQ6MQtmB6mS3HK\r\nQbrox6HFQlY1tPXMsOu6sVZxgop4zvEPXLmKYmTv3nM5KS/yORXldI367YQ4\r\n0ka7nnjJyyGWUgCjdEJ2LLv3XPNb+nJXEuvBO1MuRPd4u9MgLDdnJxEe5OcP\r\nz6UhxzsIwHRkdQCNM4O9rK9mWH5K2M/7D8g5WV5dPIR6HaOTMsoPbya+R5ol\r\nvHh9Vt54kWAdnaij1ZvmAS7hwZobH4SGEGKYj8WxDBVNJXsam4j6ataWCz3+\r\ntard6OknFpdZ5czqdCSdthrfGSjmP6/li+4S75gPTG7Z7V+5/0ogTTX1Rkro\r\n7ybZYP63lVk0A1qirerzd2tIpYWnJxB9XzPb9GD0iaxWESp1IpTgCCMxCv0M\r\nbilR158p0JAg0whBD63HWNbn5UUvVtFrGcvtQmpPGZb8lpgbmSps/3B42U9H\r\nFUJudDmVxMjcWAQmrnf+r4UuOOoX+8dS0HmE3EJLQECLARUlvJOpbA+H3CHT\r\n6ZCSpYWnFdOB0G1Rnor2eZlJ7mjAjk9xNm3Ayr+ulgSWfsCdt7dDoE0pRUE9\r\n3GKKJPnMnbOLKpt95DhqsjJJlnxxmHZGt2MbPNWgse5G2ZtvyOCiXr9ckbQc\r\n1ZsOcSwaz3WBthjWQNp0ZZn0c6P6q2rk8Qk=\r\n=aSH+\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button/styles\";\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nThe `mdc-button__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused button.\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.**\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n**Note: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.**\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button--icon-leading` | Optional. Styles a button with a leading icon.\n`mdc-button--icon-trailing` | Optional. Styles a button with a trailing icon.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n`mdc-button__focus-ring` | Recommended. Indicates the element which shows the high contrast mode focus ring styling.\n\n**Note: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommend always including it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color-or-map)` | If a color is passed, sets the default container fill color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`icon-color($color-or-map)` | If a color is passed, sets the default icon color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`ink-color($color-or-map)` | If a color is passed, sets the default ink color to the given color, and sets the icon color to the given color unless `icon-color` is also used. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color-or-map)` | If a color is passed, sets the default outline color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web 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/density":"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/button_15.0.0-canary.50be0fbae.0_1678729462839_0.6451634946946225","host":"s3://npm-registry-packages"}},"15.0.0-canary.6b5ffccd9.0":{"name":"@material/button","version":"15.0.0-canary.6b5ffccd9.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"26e6fba2b5a92a3775338a077dab6030cf72c932","tarball":"https://registry.npmjs.org/@material/button/-/button-15.0.0-canary.6b5ffccd9.0.tgz","fileCount":40,"integrity":"sha512-dCzHuVOmxRo+SQKMoYAnwclMEvxZTWcgo6CRbI1WGDusyQjNBFzDFPvxlGiyJKrugYyxIa0ICKecyxhHfJqIHg==","signatures":[{"sig":"MEUCIQCT7nmTmKdw6M0bxBUZ8tt6191f3qdpzJRanb/I1DljvgIgc/aZlMYS4xnSBVrAk+g34AyLaQVPmOOAGSYu7p4d5l0=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":649726,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkD2G+ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoDIxAAgNdeomNgIORRaAajtVri2vedEX1vudu2Wu4qYtObw6K5bLHt\r\n1U1bO6byQw933wYjihKRaoioNm/RAwngGEflzfTTA29ojNvnk1C/uMSLRdpb\r\nakEEuhPzeGYgdpSRTbJq/uXiPUp1bKnWjY1N+wNCLxGFGOKYg8sPy/uUrfN3\r\n3zdB03UD+QhpOdzT2Qv5DtfNQdWdwtamqWVkf6Vq2/VCiyYYoICGDK0pdbCQ\r\nWpoRuu6sytYQL5NJgJ7Jg7euXECm/ZkYukICKWKD/3EjWRvrgEYxjNFS49nR\r\niz6pX4QJdOr2CwrTEKlTVoigWun6wQ4nTi/WTWDQVTo3DfZaPicthS2ZFZBg\r\nMOR6ogd5s+0UTha6jujrLA5fA7ZcTIJptkKyR/6a6Y5pf2fVVHcH6vJFuxDu\r\nXaiG6CVuWaEOYdCuAcNLkedZoVDcoe0G4khDB6Ba+vRJ+iRuT/WZ+kae9v1g\r\nbmmfbnSxJSOrYqVmVr0uAx+KOOm0ZBv9HZv/GbgSNB7CjfCbBhczfO9mhSEo\r\nx3ovnEwhUQ0SMjYx9CURLjC2ZJCyh/g8n6whA5EKlmrczhrB/gK5n0ePwQZB\r\nREdfMXoR4jB/6lod1RNh02o5ddnE1hYqpRCb+PmAvfYmA7q07VrYC2UGUW77\r\nnvjkbTQrfAirJUK+2CNudvjWvLNiAHrm34o=\r\n=ilbN\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button/styles\";\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nThe `mdc-button__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused button.\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.**\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n**Note: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.**\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button--icon-leading` | Optional. Styles a button with a leading icon.\n`mdc-button--icon-trailing` | Optional. Styles a button with a trailing icon.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n`mdc-button__focus-ring` | Recommended. Indicates the element which shows the high contrast mode focus ring styling.\n\n**Note: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommend always including it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color-or-map)` | If a color is passed, sets the default container fill color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`icon-color($color-or-map)` | If a color is passed, sets the default icon color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`ink-color($color-or-map)` | If a color is passed, sets the default ink color to the given color, and sets the icon color to the given color unless `icon-color` is also used. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color-or-map)` | If a color is passed, sets the default outline color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web 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/density":"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/button_15.0.0-canary.6b5ffccd9.0_1678729662193_0.6470348401671853","host":"s3://npm-registry-packages"}},"15.0.0-canary.1c8013f4e.0":{"name":"@material/button","version":"15.0.0-canary.1c8013f4e.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"ce2bcf2cbfba1b42405bb97212fc4bdb74342bd6","tarball":"https://registry.npmjs.org/@material/button/-/button-15.0.0-canary.1c8013f4e.0.tgz","fileCount":40,"integrity":"sha512-/MUdh5vl/619wx44JKuFJ3+nK0x1vYjEvipw4LuotB+2wEnp969RktaDEvRqDP+qYLe5NH3ta5Megskp3zwnTw==","signatures":[{"sig":"MEUCIEuZ7ekiOw7gH9nsbabPgDGF0Bz4QHwHzTl8o6siF+VlAiEAnoFuCOfrpAWR3aH3uY+0+V/4cup8OzhYQ5FAGyBJrwo=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":649726,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkD2VOACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrlZQ//bIwhKWewXK5k2sk100FWil+KYhL+gsFIgNMgdAN09N7x97mJ\r\no7tZkyW7/8BOIAQjZabq+hx3BkfmDz0NcUN5csufL7aWbuFht2flD1zyMHlK\r\nrqFAlyPIFzgyBfKzehKqR3s/KnqxR9WIeluy9jal5YJh+7d4y94HY2dbMOhB\r\npndTkzZSWqNd2PdqL1MOWi6PIrn9G7OBbsJX+9/RfdIf45xOLUVFI2B1iRsh\r\nIs17bVHWJKGFOddtN9xEzItbJtjRUo9jfI1BshabpHXPZscu3du5D/QOMWVK\r\nBe2xR07NOwuA8mHXL3u6V1oZy+pfKoaqH7Tk+UanY3NoDarSuNaVuxkH+EkX\r\nsb4f+BW+E7vntt1FrpX6zuVR4DklAFIBY9yhTIH/Z4uuneKLjLfjtHrzRVLD\r\nPuaWX47EobznNhI2ROZu1O8Q06DdJgd0r1j/FVV0x/P3A3164u8xlmGevmkU\r\ngXmPvpODmU3bTJwM1g5hHzuA8SOB72Tm5nGUAZ/noYJigilX5fVN118Pe9/k\r\nOVdPBzqJAesq7z8L/u5acdmvxyD7zLI1Zkvh3/3b9S5keXR3AlMes+RHL+uA\r\neqk2ziUat5+JoGCaSbvBPynRMr7nDydA8u5YgA2uz2FwsX1s1ba2tL5vbDgz\r\n4G9EfNvMqjSghkVkX2g4Qs2/J0J17FZetGQ=\r\n=JZh+\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button/styles\";\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nThe `mdc-button__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused button.\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.**\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n**Note: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.**\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button--icon-leading` | Optional. Styles a button with a leading icon.\n`mdc-button--icon-trailing` | Optional. Styles a button with a trailing icon.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n`mdc-button__focus-ring` | Recommended. Indicates the element which shows the high contrast mode focus ring styling.\n\n**Note: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommend always including it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color-or-map)` | If a color is passed, sets the default container fill color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`icon-color($color-or-map)` | If a color is passed, sets the default icon color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`ink-color($color-or-map)` | If a color is passed, sets the default ink color to the given color, and sets the icon color to the given color unless `icon-color` is also used. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color-or-map)` | If a color is passed, sets the default outline color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web 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/density":"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/button_15.0.0-canary.1c8013f4e.0_1678730574297_0.27621506527546313","host":"s3://npm-registry-packages"}},"15.0.0-canary.112715df5.0":{"name":"@material/button","version":"15.0.0-canary.112715df5.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"19cbae4063599e22cbc70d3fcf31cd39d219f3fa","tarball":"https://registry.npmjs.org/@material/button/-/button-15.0.0-canary.112715df5.0.tgz","fileCount":40,"integrity":"sha512-67HHOKOhuxu48y+kaUdeLoe8Ea9i5CWJNZVAe/4xs6EQqVR0yEO06xdzueIK0XwkalMcUD8Slcb0Rt17d9Rdyg==","signatures":[{"sig":"MEQCIC3F9IfQWOHRBWTobBx89YUO1+NPSeRjkXllGAvnllncAiBMmvZo/kw5bqr9oVnXf6Gsic/FwrCe2E5ounL/LF7PXw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":649726,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkD23bACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmobGQ//ffFIGFmXhEpUs1ecZ+UNO8V3+w869abkWJyzlqngB85fqF30\r\nRDt+C3pQ4da4s3+r5JYX2vsjGgN9nVDTIkoKz68cfTWTwezc1EKsTpoq4/vq\r\nYzLrloCTpf4J8DmvlUPsAm2IdXwAF7lCtR+gJ9DWBEf6LF1fxyuzlST5547b\r\ntt78ny0gvJlRWqPQb7QwBdwoKVBNXm9wZ1UEHbNjigT30NI57tPhiHFzMAP7\r\nmMYRAnCgql5jzGLgCz+BaZlj7VS1J6SeXmAikpW+7sa+xINQDmDTf/gWMJea\r\nopit4BxKkMwJwvEHLXLLZM0zOcA6VxC6JBoGJqA8wPHEXfc/WmBHM5eEO1et\r\ngv1BZewoFJ+QARzO1w2QYG9p5olIRcQHQxNVsA/Bb/elTzB48kOv67k/5PtK\r\nmOfwJP7DLJEdSDT3S0WSerqYH5jhlGcneX7fQZI/flCrRzmB9JcTFTjIAujp\r\np1tvrFr+BNCwa42udUbbaBPUt/RVHKIDWZnDU0EfuQO/rn0xsSgCPFki95Ta\r\nl1F48vFm8A0+UM8ATlnycqFWiDr1RhMo+cy7Xftk7mRaOL4ZJ5mFobXYK3Dc\r\nygK8frFvpXXXvop4hPR5hWNZlYDy2NyQleECV1yMSjrCa5U/Ur9sf9CYNRJw\r\nMSjAsfaBwOUBP1BEbNwuYMHqhz90lrsQn/s=\r\n=67qq\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button/styles\";\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nThe `mdc-button__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused button.\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.**\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n**Note: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.**\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button--icon-leading` | Optional. Styles a button with a leading icon.\n`mdc-button--icon-trailing` | Optional. Styles a button with a trailing icon.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n`mdc-button__focus-ring` | Recommended. Indicates the element which shows the high contrast mode focus ring styling.\n\n**Note: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommend always including it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color-or-map)` | If a color is passed, sets the default container fill color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`icon-color($color-or-map)` | If a color is passed, sets the default icon color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`ink-color($color-or-map)` | If a color is passed, sets the default ink color to the given color, and sets the icon color to the given color unless `icon-color` is also used. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color-or-map)` | If a color is passed, sets the default outline color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web 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/density":"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/button_15.0.0-canary.112715df5.0_1678732763084_0.6147957893762017","host":"s3://npm-registry-packages"}},"15.0.0-canary.d250911f2.0":{"name":"@material/button","version":"15.0.0-canary.d250911f2.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"893782ed70dc44da4aa6331b45ef5cf5926f9822","tarball":"https://registry.npmjs.org/@material/button/-/button-15.0.0-canary.d250911f2.0.tgz","fileCount":40,"integrity":"sha512-gFSS465hSO2eqIMCaXOVTjUCOEcM9sSQoHxHLrwCjUISZrHecpyZX9h//uWyShNgMSZ/VuJ/MHZpilFl1svwxQ==","signatures":[{"sig":"MEUCIQCepD+URSDTPQEmbZ/jUcC6/6x2GyTfQvZaQXypdlEQngIgDW+zgS1FdTpM23g//gxGcL/o5Ty9bg73FsRFyTL4KBo=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":649726,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkD3ocACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmrs/g//foDguth8w550Lx+EyaHHPDymc7gIiHGo67pFIMjOEilhYxjd\r\nSJclaIyI894Lt/VJVR/Jk09S+tV5ifx5TFFPZ24qv9uVbzj/t6VRn/F53lQ6\r\nCWw/y7PX1HQDM/o7sR4Kl+c2dNOp09vbSac6qz9LNpUxyAJTJX2++A7lkJEA\r\nIHVoBo6AMCvyH9mLDpkQIe+6Sr/f+QwKoUx3LmAWb/rw89RHTMaO2mzjlgip\r\n664sfrWfIh/SRVe3wE11JLMmglFW6of3GMGH3kujHz4MjWVOPOHtkLnmyrqS\r\nJvZxTFTCkKQJdSAyUbR1lj71MOUi8Nw1JKIiSwj1gpngaPi+akM9JgziAq/i\r\nGu7Trbd2xTw7dpQ1zdNz6t8CEEc4KeV3HsOrESBhDIF/jOk9yfUuWUvOuro6\r\nm6qCWEhQWeKmaGog0fDl9ZG46rYH+YRzwxspgziIi7K+zX6m3+XlBgcU4uwc\r\nIm98RCmaY2q04iVMtBh8hj/mAtb4ti102inJlCDS2ktIdk4XpWPYiHidVuaC\r\ndK2z+EZW4RXvjRlJWGj50/vMmpzG5FQ8TTcNJ6GCUge/o28UhFl0xvsMwXqU\r\nL+LbU15Gls2F5hDzzraWfH1Lb0YJuekgPtAD9TK9wdnGA7pId3QJsUaMk2oN\r\nj5tVs1idq/aZ0Duln3pqQ1XqE+V+ZsyP3WQ=\r\n=a3K2\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button/styles\";\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nThe `mdc-button__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused button.\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.**\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n**Note: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.**\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button--icon-leading` | Optional. Styles a button with a leading icon.\n`mdc-button--icon-trailing` | Optional. Styles a button with a trailing icon.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n`mdc-button__focus-ring` | Recommended. Indicates the element which shows the high contrast mode focus ring styling.\n\n**Note: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommend always including it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color-or-map)` | If a color is passed, sets the default container fill color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`icon-color($color-or-map)` | If a color is passed, sets the default icon color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`ink-color($color-or-map)` | If a color is passed, sets the default ink color to the given color, and sets the icon color to the given color unless `icon-color` is also used. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color-or-map)` | If a color is passed, sets the default outline color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web 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/density":"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/button_15.0.0-canary.d250911f2.0_1678735899785_0.6041018157011249","host":"s3://npm-registry-packages"}},"15.0.0-canary.7cd925c12.0":{"name":"@material/button","version":"15.0.0-canary.7cd925c12.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"52c27f93240568709b0474169b79bdb9c53af7ee","tarball":"https://registry.npmjs.org/@material/button/-/button-15.0.0-canary.7cd925c12.0.tgz","fileCount":40,"integrity":"sha512-1FitMF5jy+iYrpYSCRhiucndw7cSb2z9121hl/+LUGhnUd3ViD1nqmidg5ZnHFvCT85igUpP972ekmPiVDqysA==","signatures":[{"sig":"MEUCIQCQ0ZEKCV8wvgF0mjnahCYopWdA60X8YgPCaLFzBT4yTQIgWPSiUSFPybJhQOWdofWFiX3zcJSS9qWq4kDYVFtAV50=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":649726,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkD3vfACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoXzxAAnJUltfB7mpDsqAawSGITGofwsRwo7D7VJ04rdrApmSfCyjXR\r\ne4YFdk2zJGsuw2DyELhZCJ6qYORuKdxHs/m7H/H1HQHpYFmPcBrguL1HozT3\r\n2cii5mglfsKkV00REbHbrehi/iQ9Mzom6aTo3PEQA0Kn6bmnlWyH4JTAb8NF\r\nxSoWLePdPu2udFvyW4G2Dul3PDw8durJQ7YsxzLi2RcZ+xLafvShT9Wudvvg\r\namToUZUq9vkvba80Zw+8wMV7zfpbdPRozqrT/fVcV9rM8TU8rV7IgZGa1rRF\r\nLx8rC4aUGNcOhi8SwSEGyau1EclR4aTEK3jqkIsj9oNXbmKdZhQEsXqPr4vJ\r\ne3w+9RTCXIdScjeHSPvX6pGQvAI5Jfywpwl83QLd8n1KdZ25FUiJK3boA4aN\r\n/MGXR+IyTzGS5ViBultxgnO65oSf61yZ7+yMzILKJ+wa9zrQ+iD2J2NLBpDE\r\nOd8L1SyTyzGc7bu/JXrjh0/Me5RkA/Ufit4F9UIdVMct9gF7DBzUB+3DqkMG\r\nSwQpbi76TZTx1CGLGP2YtAVaoW8O/dOVoGkwuvEEWNwAl2q6NMWDxmtgasxJ\r\n8NTuZL2gDNZr5R4sgD9yJK3IZlPd3e64s2ig5ij2NbVtkTn/ZgefMgKgu9m+\r\nautNr0BerL6OOjx9vwKr1dEoNN3sMYsnKUM=\r\n=jtK3\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button/styles\";\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nThe `mdc-button__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused button.\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.**\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n**Note: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.**\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button--icon-leading` | Optional. Styles a button with a leading icon.\n`mdc-button--icon-trailing` | Optional. Styles a button with a trailing icon.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n`mdc-button__focus-ring` | Recommended. Indicates the element which shows the high contrast mode focus ring styling.\n\n**Note: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommend always including it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color-or-map)` | If a color is passed, sets the default container fill color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`icon-color($color-or-map)` | If a color is passed, sets the default icon color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`ink-color($color-or-map)` | If a color is passed, sets the default ink color to the given color, and sets the icon color to the given color unless `icon-color` is also used. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color-or-map)` | If a color is passed, sets the default outline color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web 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/density":"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/button_15.0.0-canary.7cd925c12.0_1678736351108_0.3793193216531301","host":"s3://npm-registry-packages"}},"15.0.0-canary.b2ddacf73.0":{"name":"@material/button","version":"15.0.0-canary.b2ddacf73.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"bfcc418bea8316ebedc92fb6cc4b61b3546285d7","tarball":"https://registry.npmjs.org/@material/button/-/button-15.0.0-canary.b2ddacf73.0.tgz","fileCount":40,"integrity":"sha512-2eDRWuoCZjBUtV5WUCn5tJqFODZL8qScvhLIEiuHE6hUJopJpfFFq5DXEHHSAGsHfggX81LqOAy5Uv1oLBzFUA==","signatures":[{"sig":"MEYCIQDIL+ILS4Vy18AO72aFm2XoTd+9TbbF8OLKBmdYs2vADgIhAPeXAIDydwiI1iBUM15XrM5TymyMtlvDE/di0FXM9IS8","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":649726,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkD3zoACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpbgA//arXGQ+rXfOGYjsC+iNNrAMmiLIP4XyImM2clWBPWeVHfpuZP\r\ntio9x7RycEIl1I6Btx3pBbXUmlOv0QO9GQozwFVD8y6YuL/VE5HOG3IIWBRv\r\nKn1cwgQp+pCslQ698qw7wEGxz9NJR//2+OWYrNIY3Q/AeiFzrx3sKCmX+Yff\r\n5Ej/CSrNhN7fbAi/PVMUqY8BCbNgUDa0IuM3YHl2qPNR97qry3r07/RcrfM5\r\n4WEeeFn05JloI6LlbiBDKKuKJMLABvrLS1hT3li2oc+73t9LvUfCo73rDpBu\r\n1U6p9oSR5XxDTjbwWbuMxmT1aOCYElu3lMeBd0t5CMC0UiD2OLmetE7YcDK6\r\nPZg79dMXQ8Ed+mSmArbAxvlr6t+pCVrtDRNvXNr26wB2dDHVhwv7M+key1qT\r\nGHhC3NSCwabCE9tinKka87yQQICtA8d8riEr7QfE2LT7bq+oMeP9Z6X/HeTQ\r\nIXnAUrJon7JtAD4qpy0+FGc1DeSmTIUC0ax2UtjpQiq/6cICGnQ+sbZxEXrF\r\ndBr55ukymE7cDoe0hP5Sc4j2xwjsHaXI9pWCzxX3SZkSvC8iSEhn36XD7BOJ\r\nI/JuPkoPz76Cvj8a1EaUYtckFUBm3n8gaFAyIW1pBeVszUcPR5jxCDaEtuoW\r\ngBNf6nO1oQNUHvhV9Vej4fQbZVupcEBHlEM=\r\n=kSW+\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button/styles\";\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nThe `mdc-button__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused button.\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.**\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n**Note: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.**\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button--icon-leading` | Optional. Styles a button with a leading icon.\n`mdc-button--icon-trailing` | Optional. Styles a button with a trailing icon.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n`mdc-button__focus-ring` | Recommended. Indicates the element which shows the high contrast mode focus ring styling.\n\n**Note: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommend always including it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color-or-map)` | If a color is passed, sets the default container fill color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`icon-color($color-or-map)` | If a color is passed, sets the default icon color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`ink-color($color-or-map)` | If a color is passed, sets the default ink color to the given color, and sets the icon color to the given color unless `icon-color` is also used. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color-or-map)` | If a color is passed, sets the default outline color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web 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/density":"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/button_15.0.0-canary.b2ddacf73.0_1678736616550_0.904904711451662","host":"s3://npm-registry-packages"}},"15.0.0-canary.989ae2ecc.0":{"name":"@material/button","version":"15.0.0-canary.989ae2ecc.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"8939b316cfaa51b94425d86302fb5b19c420ac3d","tarball":"https://registry.npmjs.org/@material/button/-/button-15.0.0-canary.989ae2ecc.0.tgz","fileCount":40,"integrity":"sha512-M+/5XT0/Obj1F3ak67MC0U8KWvvDz3OO5do9Eh0QhonjgDGYPloLuVJyAhICPbVN1uR9dXyoWEQugCqpR9Nn6g==","signatures":[{"sig":"MEYCIQDq1zYa/b3XKB6B0LY2ByuZhwSqpNAk40JuLhOX23x5KAIhAMRE31sa48qGLz8imqLJ2GWg8gmxeKHJdo0Ai52XTJk4","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":649726,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkD38RACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrYeg//ZJx9B8jNvVX46XQb8NLyE/v0c0GO+8dtpz+OAib/0w2MqpZM\r\nVBU6hE1V840noGCT78tqjnIIrNeokPvPHUWomfnYvHrmpjA+cRNkcAPKCRFk\r\njh06QZNVshf1mCVQ6anbk3Dveosc6SvmRenneTvYoq9tsbODmvOaGafH0gAh\r\n+HVnIsfInZiG243LSQFAK5bTKAlqUnFg/X89gtAaVtbAlH+ocku2tkumJjD3\r\nn6r+XiSPwq95ffZtM1JA05vRpuXXcoGjTOLeJm/Y3jZLTJzhV8o1Ha1Uo/V/\r\nm/xTe8LzUbBE4ibOUih5pP61KAgRAHAZndRpWdAEMERiANWfsub6/lJs8CdS\r\nXVjnphcCDjOhb5YT+NvoCWUYkfPBGYjMd8lg3ITNi+7xQdtq7ReP0HkMfOlI\r\nFPY3+5+Sa8DRkQA+IMXHEtRK4YfcTEJkLJ+QBbUJnQZGnbIHBfujQ1bFUE90\r\nbEl/7ENa9umDFYLhHInwBiLQpXa5dyp2QOvGk6PCUKBSDjIRJw8wUXy+p4EL\r\n86sll8ImcGG/YRqaLVxdB15/n/dAT3bKkqJ8Po8mcMBPRRPcpPRt/dnnteY1\r\n+QiTKbocAmrIrD8sAe5zlMXnommYzuap6DdQT4l0VNgTL0O79ypQXFmuDFe2\r\nbcyAV6qi6V6boLO/pepLmPmC7kTd/ZuAMbU=\r\n=Vn3k\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button/styles\";\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nThe `mdc-button__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused button.\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.**\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n**Note: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.**\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button--icon-leading` | Optional. Styles a button with a leading icon.\n`mdc-button--icon-trailing` | Optional. Styles a button with a trailing icon.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n`mdc-button__focus-ring` | Recommended. Indicates the element which shows the high contrast mode focus ring styling.\n\n**Note: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommend always including it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color-or-map)` | If a color is passed, sets the default container fill color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`icon-color($color-or-map)` | If a color is passed, sets the default icon color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`ink-color($color-or-map)` | If a color is passed, sets the default ink color to the given color, and sets the icon color to the given color unless `icon-color` is also used. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color-or-map)` | If a color is passed, sets the default outline color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web 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/density":"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/button_15.0.0-canary.989ae2ecc.0_1678737169048_0.7577934438514333","host":"s3://npm-registry-packages"}},"15.0.0-canary.89c66483a.0":{"name":"@material/button","version":"15.0.0-canary.89c66483a.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"49c60a0fd27225cf03314e40f4a22c1b1e9d8514","tarball":"https://registry.npmjs.org/@material/button/-/button-15.0.0-canary.89c66483a.0.tgz","fileCount":40,"integrity":"sha512-VGxx5lNivKfVuYGSJoP66J8m/3lQtGHWycnUwc9rMA2a5Y2Wbutv8EPWVXes3Xr7qA+BTRTHR+vMmsmVBlZ//A==","signatures":[{"sig":"MEUCIE8BizmqE0vRkf2NgO68DW17ZJwUN44hzt7M+sV0LNZwAiEAgEeTjyRJB/FmwcmPTq2rJXUcKgHIrIePRJlt+WkzJ0Q=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":649726,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkD4SkACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqXZw/+OWC/ofWcSPQmmhPC1vy8M4rQmBonvfXE/Bu2RuDH4DYMsyzl\r\nmUIsWvnd15uAuQDGSEWCe+kq8D+p+DsSRJkdklZ7B8iqKIc1BBWOG0NV385Z\r\nDOhDRNczY7aWukhE1OxcEEEX+rr5g65pTKDd3JcIEz8CwcxmAE5Wn2YRJrU1\r\n4EIroIhDtAViq7SOz6PYbp/gQmgV8P0hMm8439xYw2Oo6RZG4XPPjK4SPAoV\r\npeGFYMCibB6uWx/EyPyeLZnGcR1eZpYYIJLxdIcAi91T5IEDS7GKQApDkNw1\r\ne45be7q0KhbXw4k7WnDj80X6jOJDN9La3WbLt9L8+lZst0ymcJ31cN6LOuB0\r\n3eMYo+EAQ5871Rz1HTNwYup8u2kVR75/QHJwJzGOV0IKAlxyy+C37Or/qKHs\r\nZ3tnW3uh681NzXOzh2dljP+/zrrRVYedTRYILSwLNlEBmH9YLEOXeXDxDZTG\r\nP+7OKIcCuzAmCSisWArJOfg27/ZizHe7uZfqV6Yntcv1b94rzyBCdyQNqt7w\r\nuC4dulJVt/EqA2Le5uw4NWhK7n2Th8c+6G8dfbN9jXLOxdtq2h1cNmv3R9pz\r\ncUJ046ZhV1ozVbZY2+tmVfHfx9iIyAgHst1yfY4QGgI4gMkGWHcXUpP+oRBm\r\nw5dEQKSJJRZW2XoNrbBfObGbIpazAmGIAXI=\r\n=u/K9\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button/styles\";\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nThe `mdc-button__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused button.\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.**\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n**Note: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.**\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button--icon-leading` | Optional. Styles a button with a leading icon.\n`mdc-button--icon-trailing` | Optional. Styles a button with a trailing icon.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n`mdc-button__focus-ring` | Recommended. Indicates the element which shows the high contrast mode focus ring styling.\n\n**Note: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommend always including it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color-or-map)` | If a color is passed, sets the default container fill color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`icon-color($color-or-map)` | If a color is passed, sets the default icon color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`ink-color($color-or-map)` | If a color is passed, sets the default ink color to the given color, and sets the icon color to the given color unless `icon-color` is also used. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color-or-map)` | If a color is passed, sets the default outline color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web 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/density":"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/button_15.0.0-canary.89c66483a.0_1678738595817_0.5416992766674029","host":"s3://npm-registry-packages"}},"15.0.0-canary.6a85742c2.0":{"name":"@material/button","version":"15.0.0-canary.6a85742c2.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"919e53d1a8cc05b3acad105cf20f48f98bbb3a7b","tarball":"https://registry.npmjs.org/@material/button/-/button-15.0.0-canary.6a85742c2.0.tgz","fileCount":40,"integrity":"sha512-qxepvGyxd3cJ4eBz5RLksPawW2BhqOF3u66oByk9is/DnQrL1tBBig78AwNX8u2lLl7NJO0PGZ31iOflD5JveA==","signatures":[{"sig":"MEQCIDvG7/TMZg20nmFiLnHhDO9W9RrbtpG/IjJEMaZC4A6aAiBIiJm6dAvsy5PpeZkcueTl8wCJZSYsrnEd2c4NuEXx7A==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":649726,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkD+BDACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrJdQ/+KvwcrlUmiYEDE4SXaf0EfbJTM49VYHqsV1POka0aC7IIr4qN\r\n/30JiKo+mk89u9xen56y+eQTDQF6V2z8utu2Fx8QyWg67/Y/ZdHLg32W0sMn\r\naAHRKqo69+a+c6Rccja1NLq8IP3YrXIHfDSTCiGIQMup33esiEKv/XJyJUC1\r\nrKy/HjuJ2opg7xs4Mf6n2LbsVf1OYW2Q/k0mV9MUh6BUEgeTprF25e+GseC9\r\nFC00TofBoYqhVWiUYNz+Cu7vgrXMvNTWcasmoOFzFDT+NEDEj6bXTN2etpv1\r\nbuxdJF4xyaRCt/hvOgUf8CTnRE95ZiZsNuBy5DOQI3SA+Fxs9duGN7mdW6Ox\r\nh0nwBlZAt1ZsVCcaPVQVIttOs6FvIl4eYdI/1pIpWEoREGaQRCyvpbqR+YFp\r\np+MD7CexNFKj/DH4s9mQKkh7f/veye6HPBi1GeV805ksbvPGH3xnqzn0rNxC\r\n+zvvk0/dddjJO+RiNYTyEorvJe6MkwqefOe16x2sai1YP9ufkhfHks65tQIf\r\nbzs+Ne7VTmbaElGfFglmgqI6910rnYp/CmFDOTeqD0jNXxeETwUZ3QnChP3o\r\nwx9AETMU478sWUTmdT+U4iDxesO2jZFKQJKoulwoZSsO1xm7HtsLNvvDjVIy\r\niOjdVpSohkQ0zA+7AFDpCtm2wLlikaeIQCw=\r\n=fJNn\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button/styles\";\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nThe `mdc-button__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused button.\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.**\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n**Note: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.**\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button--icon-leading` | Optional. Styles a button with a leading icon.\n`mdc-button--icon-trailing` | Optional. Styles a button with a trailing icon.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n`mdc-button__focus-ring` | Recommended. Indicates the element which shows the high contrast mode focus ring styling.\n\n**Note: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommend always including it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color-or-map)` | If a color is passed, sets the default container fill color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`icon-color($color-or-map)` | If a color is passed, sets the default icon color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`ink-color($color-or-map)` | If a color is passed, sets the default ink color to the given color, and sets the icon color to the given color unless `icon-color` is also used. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color-or-map)` | If a color is passed, sets the default outline color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web 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/density":"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/button_15.0.0-canary.6a85742c2.0_1678762050940_0.562198199610306","host":"s3://npm-registry-packages"}},"15.0.0-canary.bb6cd78d5.0":{"name":"@material/button","version":"15.0.0-canary.bb6cd78d5.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"3e357e64950df4ccb1d90d21170feae97085b1d7","tarball":"https://registry.npmjs.org/@material/button/-/button-15.0.0-canary.bb6cd78d5.0.tgz","fileCount":40,"integrity":"sha512-w2xGybvbawpGym3F7NvaFeTVtAJZ+ngLnckC7kGQhoRjq+v2shJ19kDD7NYDFqQ2uU+Fan2oL/1OKOtDf+E+Rg==","signatures":[{"sig":"MEUCIQCuRx+mzFwz3UTpeBEjiyHvujdqOBIjd7t5X495VgD++wIgbTenflYco6+HaoHM6TXMlMsVgZeT7VRBxHQgGGO5aRI=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":649726,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkELoaACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmo2OA//fLL3Pd/9Sxy1Oggo+GPfGUfY8GJjVyyNet+OepLJIAQr76yZ\r\nMnhEA3HdxwTKyiRV9yharHB9/pui8i2oEpzB8mkvrsQKMLsbJXZK04rVWdEi\r\nQU1Lg9z59xlrzIjqvOUp/C5O/wstPzEOpI5SVEjZu/Lyk7qKFY92K4ohVAdQ\r\nGjIKHzHI+7+TszksEBvzOIYI8ngmC8273eo8GbSO1adlFw3RL9Yf2vpgcjQz\r\noyg+WlIEQLe9Ul/K0hCmdzOgabr/5HvM8igTdm+NzEpz6MOfVRLDqqdGQ+Hi\r\nYAe8G9jl3EfQzGPo6rum4tEWyik4zKo2tFhZcqYDWnF7euwzCoJTPhJIgbL5\r\n4sa3G8893XkJkailBwlbf2IjUBkCxqWBwgeStC7Hrf+i5at8byqGRAXJ/cFg\r\nY7Trb0lhTAA21aQhEqv1ASv34tmNFBSDfTuq3D0lSeKdR15vGCWPTImjXOUQ\r\nAqADz4itv3fLKnF/17guMp/rzY4IQaIAnZNw9vVjEIRCTu5EaOfigTCblU/x\r\nT67abTevxioSOkHmgt+qmVkHPlvrrGHqF9JlKix/3WYVaYbPHygF4VqECeFl\r\nu7T3vFjJvI7ChmevY6hVwwtKZsAD+Af+T3ktgpQC9Yh9lfSFGdq9lG08y/Yy\r\nc8JF8YkAtIrAultUlgfsf6bgCX8UOvRI4Bc=\r\n=xmsS\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button/styles\";\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nThe `mdc-button__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused button.\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.**\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n**Note: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.**\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button--icon-leading` | Optional. Styles a button with a leading icon.\n`mdc-button--icon-trailing` | Optional. Styles a button with a trailing icon.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n`mdc-button__focus-ring` | Recommended. Indicates the element which shows the high contrast mode focus ring styling.\n\n**Note: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommend always including it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color-or-map)` | If a color is passed, sets the default container fill color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`icon-color($color-or-map)` | If a color is passed, sets the default icon color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`ink-color($color-or-map)` | If a color is passed, sets the default ink color to the given color, and sets the icon color to the given color unless `icon-color` is also used. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color-or-map)` | If a color is passed, sets the default outline color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web 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/density":"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/button_15.0.0-canary.bb6cd78d5.0_1678817817865_0.9969720049911313","host":"s3://npm-registry-packages"}},"15.0.0-canary.5f94aa37d.0":{"name":"@material/button","version":"15.0.0-canary.5f94aa37d.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"ff9766335fdf773a6b1d28b8d0752ff5e2bc8cc9","tarball":"https://registry.npmjs.org/@material/button/-/button-15.0.0-canary.5f94aa37d.0.tgz","fileCount":40,"integrity":"sha512-/FmFARzsn8ni7UHyyAR9bInMtu1k160LKH6RRljKm8wK+jh2Nqo1u9rB98u/TsG4fwWWFATNqSIgFHJclz5EiQ==","signatures":[{"sig":"MEQCID6u8Gui++DWQnHyBuoDQI12D5gcs+hxfrEkNaC3q4jrAiB9IxDc8EXSmmImMr3VOJL9wrc+/lLFDVMOgoxVQvcthA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":649726,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkELrjACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoJBxAAmAMLyoByZGqmecWcFA46Z145BdzD0E8rN+XOhpKwDccdHgkO\r\n4/Tds44DkZurwXJZPtSiQ2FaaObbQz1ny4yYChPj/Pkei20xZGDasTjfp/75\r\nKbnB5TIiUNmDQ00zi5Ziq9zsupI1ea1TYhwqFr1j9DS3AtxdSPb+xU6b3mrM\r\ndq8wCdbhXrQJkM1EMWrlQwJrRqYnUCDjLHirRuoU4tmYV2yr2LyrRIzQ9F1f\r\n0vKIuxu4B6MYp98ypoX0v5zygIxVtsrbMziOxxEzDrBRF6FKWLLEt3f2zq1o\r\nO+q51UuT/l96vDEcMK0Z5O1ZIr2Fuj04V5mPoKZLbL7D/73MGCA3NWYSrfUK\r\nHb3pg2Dra5ygiJHIlgm/jZ2hOLbq0oI8pSivNp/8g3uHwDQC7rtAJMqnjXXj\r\npy9Bp+A8QbJbHKkVgyVDHwQMT+Jg3Suc9dNvfcd/O0oEUGHlNrKiOXtNo2FY\r\nHKipD0z7jztQVeRk+wJe/mvhI+2/Sp8TpxH+YciRAZxzuduM/NFN+YIcsjMi\r\nuiwncAGgoqZlgPdGirjEArinNXZbBKx0JP16LurEzkPmR35gh5clriVnvpxB\r\n6uer2XfcFDLh5aZWQw/vVMjT90pyHM0xeAQmZNjdVRkyucn6uW2NTiPMNhTR\r\nTFBmYY8PoK5oMHB1abEMfX482c0usBH1Kwg=\r\n=u6Wv\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button/styles\";\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nThe `mdc-button__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused button.\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.**\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n**Note: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.**\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button--icon-leading` | Optional. Styles a button with a leading icon.\n`mdc-button--icon-trailing` | Optional. Styles a button with a trailing icon.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n`mdc-button__focus-ring` | Recommended. Indicates the element which shows the high contrast mode focus ring styling.\n\n**Note: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommend always including it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color-or-map)` | If a color is passed, sets the default container fill color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`icon-color($color-or-map)` | If a color is passed, sets the default icon color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`ink-color($color-or-map)` | If a color is passed, sets the default ink color to the given color, and sets the icon color to the given color unless `icon-color` is also used. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color-or-map)` | If a color is passed, sets the default outline color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web 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/density":"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/button_15.0.0-canary.5f94aa37d.0_1678818019366_0.3012333606714932","host":"s3://npm-registry-packages"}},"15.0.0-canary.1bd317240.0":{"name":"@material/button","version":"15.0.0-canary.1bd317240.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"73e3aaedfbf532969f89dc2a774fb664439419b0","tarball":"https://registry.npmjs.org/@material/button/-/button-15.0.0-canary.1bd317240.0.tgz","fileCount":40,"integrity":"sha512-EcAWck7FmF/ghLm9WLKoPOPPi7bFQ5LqNm4rrHT0OAvqlciOro+tk7UVepfHiMn4hB03OmVwDiTUTzyk8VE2gQ==","signatures":[{"sig":"MEUCIQD8V6F7sxi5N6YyYoE9uy+L86f3ATesWOsma6gCkM3OxwIgdx1ZqZPS1eUhOF7kgmFrytkbOMPVsmr8ulVp9jR1wKY=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":649726,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkELvJACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmroHQ//QdyhuI70kIV2OtQF5klyOgzgllnXJ6elBbine2FkfsCGmJAL\r\nhrzm3c9pdgeeJGE8JxM+ZfYYNNSAQgi+ovFdYo1jX7F2UxHvWaK+hKVxWSo8\r\nPRQo/hzobBfa9KBX6Y2qIGQtSTCOcehkUDUK+ndcxivARJ4UY4V+9YI0HWe/\r\nVgLyP1jWOcYiDyT/PArUImrmsynFgbkkKUBZiWrCORXFaC52bw8xG3QdXwdl\r\nKmv5qAx1xos6NlFSUxWths+edpheakrOc6nlE/YUsPeuLF8UEz0+YVfjnGQo\r\n6CZye+DUdIp3NgxS+2efCcM3Re4ipQiaL/cg0NLSweZ1+idT5TgGDgFKJJYp\r\nomChO6zseJzFWBVgoNpSw63sXZGePrwrMazDx+zx4WuOD6RgIHeJYM7mX7dM\r\nX3WA7PH6QIc/X07B7sBqFkYlRfO5qShNeM+diIPjncQdt9BF83YF8kzeANXB\r\nyJ3YSijLn21AkuzBhTMP9G071jbaDbb/SI9tuzzJD/4/oxH5EEIbSNT739RI\r\nkqPqBsb5yeQ1ML0qd3xROOEtTeRc8gS9guI5QlTV6RTme1k+uHXocxyel2HK\r\ndULB9rO9tQQA9anwLO3j92sLz7EkWgijrkKzRtJWdcV3+ZUdM3DZpkoECwgK\r\np3b6bZYToNqTDGvHjHzy+RyEBO2f4SiBiSY=\r\n=L07O\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button/styles\";\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nThe `mdc-button__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused button.\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.**\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n**Note: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.**\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button--icon-leading` | Optional. Styles a button with a leading icon.\n`mdc-button--icon-trailing` | Optional. Styles a button with a trailing icon.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n`mdc-button__focus-ring` | Recommended. Indicates the element which shows the high contrast mode focus ring styling.\n\n**Note: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommend always including it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color-or-map)` | If a color is passed, sets the default container fill color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`icon-color($color-or-map)` | If a color is passed, sets the default icon color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`ink-color($color-or-map)` | If a color is passed, sets the default ink color to the given color, and sets the icon color to the given color unless `icon-color` is also used. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color-or-map)` | If a color is passed, sets the default outline color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web 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/density":"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/button_15.0.0-canary.1bd317240.0_1678818249016_0.058214904987708094","host":"s3://npm-registry-packages"}},"15.0.0-canary.d441d2a2a.0":{"name":"@material/button","version":"15.0.0-canary.d441d2a2a.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"e313accaa8a7092c2a3cfa341c0db0b38f1a7d9b","tarball":"https://registry.npmjs.org/@material/button/-/button-15.0.0-canary.d441d2a2a.0.tgz","fileCount":40,"integrity":"sha512-iSvgi01DGJROIAfCS7o4PiA2e6XIOWKUFWquw8RaO47UoXSkr2wVY3qdEhe9kkL+ea2mRzjqEbGlT3cYA13/HQ==","signatures":[{"sig":"MEUCIFbjX9GcxSFXVflv8XL8t5vxNXGYWpStoR9fTawX6ZzoAiEA6XXHOx7X2dTXh3pPUyQvyk2IXK+V3G3nu+CluNNpti8=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":649726,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkELxoACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqSOBAAgpk+Yu2DeETQ9ulACcbrODUyF38oASTIpUAjLEl15tTaSOi+\r\n+SO9JieI43rR1yLzlFLfA/1do7VUDAhC5sU4R5Y7Q0suAOsRYYu5JjdUya6m\r\n22h6GUcyn8eVjTbyJqAU9fzMCFw/akKyTTw9srZ6L9gtVzAomK6xZS8Va0hn\r\nniEyiZNc3Pz7Sp+hC1IMyOlPLF4j46qzQTQvLuUvuAmR8jHmUc2aRl2d2PEf\r\nngu1eYmzDjaT7lB/vsNc8tBpXTlnHP+XxWsLL0r3eEuKld1xirQek4FB86QK\r\njsQ/Rn9j9/cRQoWXQ3ObTbxGPeLrzMdaXY2J3tLBe3+RRiHc7zASx5KG/sgE\r\nIXIVpFNFvDjY9+RjF8v71gSuW2RlIFPCzTMqoubyt8xGrn9vKMusFE7sCdsy\r\nbs69c4UgrNYHWoNjZVTfcHzOblaLP2GNc0vVE4QcWVlt1QxBR81yfGYvsixs\r\nc6yQ8GsVF3iUuuI64CVP3wa0ZgUPdZqaswiK8tg2J8ANr0V3SozR/ETlUfrf\r\nwGcuFwrslqd9BS61AlEbaO3PRgRdhgu6Os01ehPm7Ba3vB8I6rH52dfpyoVv\r\nkNL2Nrw8V5U3ULAdaa4pndm1fhGbmUx0Pvg2RfyxfGFSMDQubJV0ZC+iILJk\r\nh+jVJzkQIom4jRx2X0N18Luf4R3RbO4xKAQ=\r\n=1rFI\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button/styles\";\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nThe `mdc-button__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused button.\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.**\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n**Note: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.**\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button--icon-leading` | Optional. Styles a button with a leading icon.\n`mdc-button--icon-trailing` | Optional. Styles a button with a trailing icon.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n`mdc-button__focus-ring` | Recommended. Indicates the element which shows the high contrast mode focus ring styling.\n\n**Note: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommend always including it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color-or-map)` | If a color is passed, sets the default container fill color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`icon-color($color-or-map)` | If a color is passed, sets the default icon color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`ink-color($color-or-map)` | If a color is passed, sets the default ink color to the given color, and sets the icon color to the given color unless `icon-color` is also used. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color-or-map)` | If a color is passed, sets the default outline color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web 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/density":"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/button_15.0.0-canary.d441d2a2a.0_1678818408712_0.8551339849266395","host":"s3://npm-registry-packages"}},"15.0.0-canary.fff4066c6.0":{"name":"@material/button","version":"15.0.0-canary.fff4066c6.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"d77441475dcdcc547cc78a49c0dfb82d97d5e70e","tarball":"https://registry.npmjs.org/@material/button/-/button-15.0.0-canary.fff4066c6.0.tgz","fileCount":40,"integrity":"sha512-T0xQ752fD4fjtusXHM3kPJ0Vh2vWiDSgXDYfzrL8vtHeu5+4X+2Ph169ccTu7camdBvUZbRBmCHvfO95xRcRGQ==","signatures":[{"sig":"MEUCIAJQcFSr2ETWoUlmjpk5Bsts5n/S1MHS+pl6Hp3V/mQqAiEA4EIgLF8BgelNrfIT0xTcsk3cdrdJrsfHfoQvXCwogGI=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":649726,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkELyTACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrPPQ//czYXR3FnsqA1H3TWcKvuYr4rHszypU+crIyPVFoA7uB4wZTS\r\n9jtqFSHtRua/ZvtNzB5osR9H51a/3qT6F9eqA9eGaUqVkN+S2URxlbWhwWL5\r\n4KLRDGGQT8dLPOFMYj1IDdx0tdPqKPZZabkJVe3aH67QAwSK8Q824uoAr8DK\r\nPghxb6DJEYqdfjOFI0eagDgRdapnv4t+TpzUR2CJo9VB2zN8PIyucLWm90Yr\r\njQKesLijQvju4muADdhfat1yp3jdD1+WpGSExUhJsDvT/uHn6RuNr9nGVgUM\r\nZeJzkElNoqUO2/F5h9b3Jy4fgpyoOR4p2PodoSdiMIqSIZdsinzvBxvECkmI\r\ngW4qWbfGSLsfIcla0kBBVbYfEaRYQZef9SV60O9K/VT5FTTHpqIwkkNesgKv\r\n9aoGDlb/SY0pr1brf2mGuDMJXNrjTDu005RmiqTi05za+qMd+OiWod+6z016\r\nrTzXLXtHzU8nG+goeRfe7/5wDF3uKkeOq7ilgfVfPxXSjjWVbFGiQXXPNNUt\r\nRoSgkh3ciooYL6S7tv0Plm6QYyDMn1GiZGFR0z8ATf0LzRQHRF7g/OH7nULt\r\nLLQKzzX6kfDKmtN1SqdGd6WHj1W5LidNqK+dhY9vLuQrEc9W5mwjRIQsvWkQ\r\nEAgEEIu/x8QtxG1nytJxY2fLIAMLu7TrdD0=\r\n=fsdW\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button/styles\";\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nThe `mdc-button__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused button.\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.**\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n**Note: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.**\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button--icon-leading` | Optional. Styles a button with a leading icon.\n`mdc-button--icon-trailing` | Optional. Styles a button with a trailing icon.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n`mdc-button__focus-ring` | Recommended. Indicates the element which shows the high contrast mode focus ring styling.\n\n**Note: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommend always including it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color-or-map)` | If a color is passed, sets the default container fill color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`icon-color($color-or-map)` | If a color is passed, sets the default icon color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`ink-color($color-or-map)` | If a color is passed, sets the default ink color to the given color, and sets the icon color to the given color unless `icon-color` is also used. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color-or-map)` | If a color is passed, sets the default outline color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web 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/density":"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/button_15.0.0-canary.fff4066c6.0_1678818450934_0.1050226184209575","host":"s3://npm-registry-packages"}},"15.0.0-canary.87809c710.0":{"name":"@material/button","version":"15.0.0-canary.87809c710.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"b8576027997fbda6e94ff7b5b0ec190eaaebfe27","tarball":"https://registry.npmjs.org/@material/button/-/button-15.0.0-canary.87809c710.0.tgz","fileCount":40,"integrity":"sha512-23NdxYjNgvgEmxuDWklqqi1bwmkNFlZBe9OQoCSkxBXelmfRPKhUexdSr6k16ilhYMS/700bO6eBs/DJO8wy7g==","signatures":[{"sig":"MEUCIAcu0EC2XXNXX7rihNpVKGbtDhfUCxdHdZIx+733fs8OAiEA8XCiUhqNHdddiMTE1paGxGXbdO7DoQIiGqUJkaagfPA=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":649726,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkEMBXACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmplWg//ZnhrBdybNLOsi4+t8rgvJfKozu4/JRJ56cI/Q3eTGTJnLDXz\r\nodDWtuFEf/u/+FS58aWs6OO2Vn8vOokIafrpkXS1rIeWrb+wBlK1EnPzy7lL\r\n5xmzc2Z/TvpGdHTMjV+SzhqMXD98gnyoZoYLKjcb/WHLAiDmyeMtwJT1LxzK\r\n9cHj6KO9cglyY9K6m3H/nj7DEZMVyExaffMFOYIBPnXtFotPyKMVGPxbPmgB\r\n83pugzdpTwfFwWzoXA/NL/WPE160eQMgnPy2qWhrpGsKfs93kFnBOrjW4opS\r\nGsBL8IxRJ0Hk9Vd070WCui058rufd+Yj4M78nDm23fgV5oBWKChj5cxeeiEQ\r\ncWf9LwLmVogjdNEvdHmapOKu6nLRzwmPPZVkVaay2jGCkhe8Tv9RCPcpcNlK\r\nrkkIN0PLvGTvXWXlqMZLXD6RcuiHHHT+YKDFBgtyhIGx5Rs9x7gO3jFRdadm\r\nl3V0T0O1CRHdDv5lg+Np2FrNTSS7RLj1B4C6TEsfkBepmtiEeO9ChDKNvm2I\r\njmMSylk2dwrSux7+rnG6mYq8kfagTy3GE+nPX/gVh1YikzRpJCXeNEPxhysb\r\nzqeb1TYsLKC05LZChjnRxjRlg7P2s6pNLNQ5wPV8Ma19dwLT7aiatsnlmv+y\r\nSEarZIQCPH7ISGqJAcjSYoBDPUm716eg1Po=\r\n=HzdX\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button/styles\";\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nThe `mdc-button__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused button.\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.**\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n**Note: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.**\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button--icon-leading` | Optional. Styles a button with a leading icon.\n`mdc-button--icon-trailing` | Optional. Styles a button with a trailing icon.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n`mdc-button__focus-ring` | Recommended. Indicates the element which shows the high contrast mode focus ring styling.\n\n**Note: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommend always including it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color-or-map)` | If a color is passed, sets the default container fill color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`icon-color($color-or-map)` | If a color is passed, sets the default icon color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`ink-color($color-or-map)` | If a color is passed, sets the default ink color to the given color, and sets the icon color to the given color unless `icon-color` is also used. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color-or-map)` | If a color is passed, sets the default outline color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web 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/density":"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/button_15.0.0-canary.87809c710.0_1678819414900_0.2991189510228336","host":"s3://npm-registry-packages"}},"15.0.0-canary.48d30012d.0":{"name":"@material/button","version":"15.0.0-canary.48d30012d.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"d0bf9f096d7fec23b9cf6f8842df925483cb5f59","tarball":"https://registry.npmjs.org/@material/button/-/button-15.0.0-canary.48d30012d.0.tgz","fileCount":40,"integrity":"sha512-6f9pf7bwb9CHKJuvIBGiGM9ePUpYCDO9UTR6gULQCYnLpVWOOd3IqKxI2vKV7dYll6SQu2ayIlIp7H7l+W24Jw==","signatures":[{"sig":"MEYCIQCPZu4jTucvszYXRQsqZpoRDy6UM27mV2tWwkjTc5ibWAIhAMLYWqHy1jbV/1tOB+kHVugvq5k/iCoVRtSj0neDl7Jq","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":649726,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkEMFbACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoJDA/7BbiRIs6C3DWR9OteWSWu9nrlLTIekUogaX0q84Yi6BOMk70T\r\n5MPzasKrqx7nOtqcXOIXEc5R1iCvyxblvdVDJx5UUEvCzCUzlt2Y21K/1ekN\r\nRtI5xuZS8jwUlLhrGxprrRBKYLo/ZbNTuKWxuU6kjl2x/pPh+yYI1x6oEYj5\r\nCT8i/e9w+LhKP8URw6/g16xEfv8kOZUonm2xQJX97MFXWhOuIzYHvD7PD2Ce\r\nXQd/eU13AvPngsr4HOIt9eSSYNr7p5NbfTmMns56iJ0+NYbAaHDwUDrvg0C4\r\nyQuRenRw5vr0eo+gifaskomWv5D7RXEFHh/M61y/4QAHXZleCr67qjj9Ew8+\r\nPihwoQZZc7az0wnGA0lyXiaVAmkt/bqTM9WlyAZxkhLDzr67pWTxJQLMHgJD\r\nlaGlJvJqtZYDm52+yhd/G1fHUn18ziE2ixNNwxwt40agJB9tEPUnuWSpttHp\r\nWPZN7tYrLQbcUAenj8LiavX+Ikb4vcrjz2CwsGBT6m0JmRWrBVmTqk5kGrmP\r\n2pepAqzwulEIKyJG8bmGveITajDE+7H99xDQNpmhFpyEJo5vzbIuASSoqSW5\r\npul9D6vSsKA+TgJXP2GNwDpWfJPqSfzLSzgXXHRJb1UAKrZc77hCGh4+MA0D\r\nsaXDI8ZR8MNdjGCZVhRkVkSRM9lax0pdbwQ=\r\n=NiTZ\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button/styles\";\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nThe `mdc-button__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused button.\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.**\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n**Note: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.**\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button--icon-leading` | Optional. Styles a button with a leading icon.\n`mdc-button--icon-trailing` | Optional. Styles a button with a trailing icon.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n`mdc-button__focus-ring` | Recommended. Indicates the element which shows the high contrast mode focus ring styling.\n\n**Note: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommend always including it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color-or-map)` | If a color is passed, sets the default container fill color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`icon-color($color-or-map)` | If a color is passed, sets the default icon color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`ink-color($color-or-map)` | If a color is passed, sets the default ink color to the given color, and sets the icon color to the given color unless `icon-color` is also used. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color-or-map)` | If a color is passed, sets the default outline color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web 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/density":"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/button_15.0.0-canary.48d30012d.0_1678819675392_0.5204150350653067","host":"s3://npm-registry-packages"}},"15.0.0-canary.419b23cc6.0":{"name":"@material/button","version":"15.0.0-canary.419b23cc6.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"cfc2e2a2c7c58b9dcec298d1239bd5a264eb9a25","tarball":"https://registry.npmjs.org/@material/button/-/button-15.0.0-canary.419b23cc6.0.tgz","fileCount":40,"integrity":"sha512-MAxZ/0B5K1ZGTICMP6PND8H4iN39ddEvkMv4IRC/IFdU0gj4GUi+wnwP8srPwLVVTHtyiZeV44H2D5S4D+CT9w==","signatures":[{"sig":"MEUCIQCeNUXYgvnOSJ1J9Nt3b0rJODBbjIC/+nwaPihHEtOmqwIgcCnaD29GHOhZ0EvRInhj0DLjVvqRBugzt7W+Sml7WVs=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":649726,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkEMPwACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmo1+A/+LbFi6mtq31DbgJ2IhDtGKqZ/6pDbwgluxcVG1eim+0cmcscS\r\nJ4VYeRyg0RM7fhk2ibIyZbyjRwKId8h16vp0qN5MyQ+PSaw+GRALaFSPPOPL\r\n75F1/ayY2BxZ4I43WxCt1g/46i0vc3yeQhq5MOnyRU2B+MfLdqp4tQhEncRx\r\nI+RiFfR3T4Edi0Vqv+mlB1jWkfX+KdesV8R84VRXzmpGk36yEJukUnr81nOe\r\nVBeU3gz5By7m9iFkXqX0Srr+xsslGLBeAifAZ6AeI3OQ6NszVcV2xKq8LCQj\r\nJp5KoNx8CQeLSoKd4DiQ7DCUpgPInTuoMJPncx7HxjiXYOQtrX06+B3DAumf\r\nx6NDrf8gzmztNQrTYV7mUey86pN/mb0aBuST5xrSQI24bwRIi+u6Z3sfIPGF\r\nZfThQvvXBpaXePq96dE51j3HPjSJ1LT3ZXRh9ttL+p5fhj5Ja6M9fB+YDwjo\r\nFJPoE/TrlH3lN0v9XI12sYFyjH8DM1v66ZuT1Q9+fo+d/LEgX9YZZ+16s6ff\r\nzcHg+JKc2HqLu0xHyaWwG1KFGZi5Kr6DFk0NwrvKyeiDoO5yEZEr6sRI6ntk\r\nsmFyRvp1jFkeHMBkoV3MvyK0oNHIGh1FoSFBi+DGesX74rhBcsWaOyk0P5RF\r\n3W8K8Kf/+dVvn4ZxIo9Tod4pJC/LQByaACY=\r\n=Jjtq\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button/styles\";\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nThe `mdc-button__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused button.\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.**\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n**Note: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.**\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button--icon-leading` | Optional. Styles a button with a leading icon.\n`mdc-button--icon-trailing` | Optional. Styles a button with a trailing icon.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n`mdc-button__focus-ring` | Recommended. Indicates the element which shows the high contrast mode focus ring styling.\n\n**Note: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommend always including it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color-or-map)` | If a color is passed, sets the default container fill color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`icon-color($color-or-map)` | If a color is passed, sets the default icon color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`ink-color($color-or-map)` | If a color is passed, sets the default ink color to the given color, and sets the icon color to the given color unless `icon-color` is also used. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color-or-map)` | If a color is passed, sets the default outline color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web 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/density":"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/button_15.0.0-canary.419b23cc6.0_1678820335809_0.7916218533184769","host":"s3://npm-registry-packages"}},"15.0.0-canary.bf86521f4.0":{"name":"@material/button","version":"15.0.0-canary.bf86521f4.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"42e3a577606406fd35f8828e607d86e1ba1d5691","tarball":"https://registry.npmjs.org/@material/button/-/button-15.0.0-canary.bf86521f4.0.tgz","fileCount":40,"integrity":"sha512-sc3Hc3AutMvOwb4WJF0J2CVMIfRVrDXGnSl8nJwuJyqn/polfyNd4yqd4J70Tz82hX0koBSWg6hD80+TL7VKfg==","signatures":[{"sig":"MEQCICPCu1WeVbPLiV1jMorvzmoUkbwSCxBqo0KIscsdC97uAiAhQHj9le5iiPEM0NGgw+EjZphJOKoyxD2Nz0yE3s8+QA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":649726,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkEP+fACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmp7iw/6Ay+Q/RWnnpweknpssRbshmgj2F3tGayskHhMkwUm34gII2HS\r\nUb9iX4Y4K+xppQ6rMJaRsJPYr8wAVycip7AShLEdbjdIyUKijb1qIqr/HPPN\r\nlxXKROHldUpQycRDHMsMq+itSQZ9ZyD8HB8+mgSP0XZNYx0qSCPZkuDSVq77\r\neZjArlP9p2UP6x+g4L2T4D/tWE6YbmFvJIAB7xN4fiY7AQdqMhaqJIYZSyHW\r\nUPxsMRVvfQLpzw9UNHFBqMHF9rWqqzrvqeMgmMjdSe+xVsqnJrBDvritXwOk\r\nEVsm9yJA8LIQ7JxbjVvL4dDStWh1z0x0LEnK82S3DvUEKukPeaf/uK/4P2gx\r\nj3cvkCwvX5caC/ECNaFssMLJHEROHmQ8F3GgwSy2rRtbHmIWTK/Vu0nr+njM\r\njVEwWXz/7T/Z4qNOScSqrNVJueEFBcPakidcFvpgIbD8yNzlzMEbWpnTOqLq\r\nh1Uwkgb2Y+G1Y91qzkvtbxL2s9mEdYJWqThmFh2jyUI+/WAD1zr/d2RnHKoC\r\ncyZAR5pc704mg5Dsgsws3FJUpi55/1ma6Y8r17LfuLfgKgTsCkOh84KEKpYf\r\nWv65YhxiFlhKT732UrQfOT4TmqxAYMdv/MgQ5z6+Zf+HRT58oU/bZ6B+/bJB\r\nyv1RUNqDqTnLel5Y/1GKn12M2dtxN8kkOAQ=\r\n=+hKY\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button/styles\";\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nThe `mdc-button__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused button.\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.**\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n**Note: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.**\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button--icon-leading` | Optional. Styles a button with a leading icon.\n`mdc-button--icon-trailing` | Optional. Styles a button with a trailing icon.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n`mdc-button__focus-ring` | Recommended. Indicates the element which shows the high contrast mode focus ring styling.\n\n**Note: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommend always including it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color-or-map)` | If a color is passed, sets the default container fill color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`icon-color($color-or-map)` | If a color is passed, sets the default icon color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`ink-color($color-or-map)` | If a color is passed, sets the default ink color to the given color, and sets the icon color to the given color unless `icon-color` is also used. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color-or-map)` | If a color is passed, sets the default outline color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web 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/density":"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/button_15.0.0-canary.bf86521f4.0_1678835614936_0.9043584600533017","host":"s3://npm-registry-packages"}},"15.0.0-canary.11f3d280e.0":{"name":"@material/button","version":"15.0.0-canary.11f3d280e.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"c942d222eca3b12efe49da8e81e12143a6498c68","tarball":"https://registry.npmjs.org/@material/button/-/button-15.0.0-canary.11f3d280e.0.tgz","fileCount":40,"integrity":"sha512-6YPsIanoYybxQ++A716mcudOgpVVCZXzfjASbXjvajWDFlJEmAb1WyDmmsifqpNt0JEHt7OuGWn0z5R584jCyQ==","signatures":[{"sig":"MEUCIQD2rWqyCXLGuEKFjUYzOBNVtIMZJg1f1Ch6gE+rtQcjBAIgECNNsVGyuzYcE9ZxKqtxKfAg8xRaa2X/FsHhloPZSqg=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":649726,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkEQ0tACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmptHQ/+MXiAp2Zypz3IsWUHp/lesmIYU2nnHwjgpVMo40x0j7nY8MaQ\r\nFzQZgv3cHwHzdY32IT1A4LO1WhQIVO9EZm87+udQEWTR8sZKW1hrGbR47te9\r\nzYCxQfK01nfXKIfdlKF2SVlP84BITTcCziIkYWhyIaPTg8s7ik6iOY6MuP2F\r\n+jqBHUn2nSKNttWFjWvGAO19hUFo3T1Ngmb34mVNtlM0mrFtxPBPQxysMEHe\r\nTgk4fd47i0ttbMKSAMRI9NOHl5VtKkiaLxZFm4WQsHj18EvlBrxq2zqXIuqz\r\nj6c/GYv1cA7/hzemaO22VQFUXJ6Kawo3X4JB2LxEJ5cnlQxQmBIK+7kKYJmE\r\nw3Jt9spKKqnw4iIGG1XGPP3p1CAiC/08mXM3L+cDYQ1GgLgx5XugWji0memu\r\nFtccj4Xm6VlOpfGwpNgWk/UrDR6Qz5cG8Sm6rEUeIy+0fPIOkiQ2bLwIpFvf\r\nb/vkWicWnSihMFwt9oEC2hkgBReRdDJR5Y4M9hZIsBKl/Y+WYgEKIT3spTRD\r\nTqaI+pRw92UKLz+Wj9BLqZ/FTkv9S0SXLrESglOzw6TWlkQklTphgfMXWxaP\r\nKTpO1oh+ulst/bm71hDuvK1v5vztsIpZhUKE3fBum4ZpCFCMJehksRVNCiSq\r\nQmxSmmnn4YsE3r67a3mYbxHlaf2vFCtN5j8=\r\n=GGNA\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button/styles\";\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nThe `mdc-button__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused button.\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.**\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n**Note: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.**\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button--icon-leading` | Optional. Styles a button with a leading icon.\n`mdc-button--icon-trailing` | Optional. Styles a button with a trailing icon.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n`mdc-button__focus-ring` | Recommended. Indicates the element which shows the high contrast mode focus ring styling.\n\n**Note: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommend always including it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color-or-map)` | If a color is passed, sets the default container fill color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`icon-color($color-or-map)` | If a color is passed, sets the default icon color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`ink-color($color-or-map)` | If a color is passed, sets the default ink color to the given color, and sets the icon color to the given color unless `icon-color` is also used. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color-or-map)` | If a color is passed, sets the default outline color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web 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/density":"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/button_15.0.0-canary.11f3d280e.0_1678839085281_0.07126600420589146","host":"s3://npm-registry-packages"}},"15.0.0-canary.b281a409a.0":{"name":"@material/button","version":"15.0.0-canary.b281a409a.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"6489e4eb8a047cec6376178c1330b4068b3921e1","tarball":"https://registry.npmjs.org/@material/button/-/button-15.0.0-canary.b281a409a.0.tgz","fileCount":40,"integrity":"sha512-VAARf7omE+jseDBbi07CMyunsNWUPddttxzYhLobi1fAOFTY+Eciz1O9rLHjwAG3913mPYONbzi0ZJwqz+9iiA==","signatures":[{"sig":"MEYCIQC9c/K/pLrhZIRIQdxThJ9GHf6XmIw81eTjzTFj4yuhCQIhAK0CgRFFPVYl0c5n3o86xk6LKL7Wvk9Asl8s5ofCpjBk","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":649726,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkGdASACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpCAA//aR5O73CnaCvqU+WnUAjjHgK7N/LHr1RzWWcK/qssAcSj68cs\r\nRGO7+2WCgX5u/XfINeSKta6FDSm29qLhHNgrcB3sIK35ZV+TuAz+jnbNIqE8\r\nXdin+wnfoT1yqBN+65Tp/fXczDR/IaIcEBk2UzOW4+2GpVB79w8JJddPC979\r\nvpfqXqSgnZXSgvt3b85S+VgTlu3xJLKT2AmCwKNybQSeNQziAZ2PoIzfmLe5\r\nUbAE5Ip1S1pKJ64z5L6TCUSzM0o0tDSg+Bvf4vRf1/6ukxm1dQ+ZIeo0v8pR\r\n8CbS4fhi/kEplyUDmLeXC+5czMWMGyvB7bmSGRUyVxvtMSiq8+kr8S+ZwcAN\r\nyL8TW6VIOfO0O5TYLjnPCgM8NUd4Iem/cYV1LP4cFL1ApIOC613eI/CeeP39\r\njVStTtkbLpl22lWvsmnVBiZADs308EkxHKnJw8MAC5x5mwLt4j9OzK4QFOri\r\nkGt5fB53butHxNNm5NXnJjnRJKR/1egehbNMn8WpOa5b1YERkGVViIKqWaeC\r\nI2nD3t8ScbkS08ynQqf2iF3dewRfZnlcdAHYo7f38oz9G7XN4mw88I5irl//\r\nWu8c9yC4CwJAd+APdvPwNM6ntJJCPDj0CyoDYrpKLqOxi8hLBy7cYzwgVKP2\r\nnTKuveTYmnUeU1+tvbkC2FTWf+1BCh7zIVo=\r\n=ktu6\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button/styles\";\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nThe `mdc-button__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused button.\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.**\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n**Note: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.**\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button--icon-leading` | Optional. Styles a button with a leading icon.\n`mdc-button--icon-trailing` | Optional. Styles a button with a trailing icon.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n`mdc-button__focus-ring` | Recommended. Indicates the element which shows the high contrast mode focus ring styling.\n\n**Note: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommend always including it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color-or-map)` | If a color is passed, sets the default container fill color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`icon-color($color-or-map)` | If a color is passed, sets the default icon color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`ink-color($color-or-map)` | If a color is passed, sets the default ink color to the given color, and sets the icon color to the given color unless `icon-color` is also used. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color-or-map)` | If a color is passed, sets the default outline color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web 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/density":"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/button_15.0.0-canary.b281a409a.0_1679413266063_0.9998752020867561","host":"s3://npm-registry-packages"}},"15.0.0-canary.39e473690.0":{"name":"@material/button","version":"15.0.0-canary.39e473690.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"b71878c4a37968a70de1214829b89d2c8a2ffca2","tarball":"https://registry.npmjs.org/@material/button/-/button-15.0.0-canary.39e473690.0.tgz","fileCount":40,"integrity":"sha512-tTfXLdIim/LWyTgJTSusKQnd6qKd8jyVx8pSGKiUndTvDZWMd9rl1j2OLPBYTM4DF6TOiwsiQqU26zN0tPpQ2Q==","signatures":[{"sig":"MEUCIBFjV1XK2bkenwWWHFI85ycBuFyI5E2i4xrmNCwmAOdHAiEAli6BwY5Ydon3DQ2yQUsXu1rLoWC3glnhd69AWjfBcfc=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":649726,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkGe6mACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmq7UQ//cOMiWlJVChiMYDTx2o3uSYPgp+fBduYl7ti+OUIPxDQ5po8k\r\nxQsZnjx5psVXpBbfupLuaYCVBmu/uueN+Ezuq6S3NIfhXB/Jy/+UPp8En7Mr\r\nr8kXvlTATCv0yimPIxqeuADI4ry+pZgdl2WLRTVtj0f49xJMtyYAEg9rLzIL\r\n4c7BGPHP6aFsGIlVt9B8rkR9xfOXeX4mXJIugrNQokEIQDiKCcrpnYs3q5mm\r\nf14W3yx9PpSMp10Zcv9gl17XTUCEoq+6d1IMt+Fa0FeMP9GGgXw4mk5F4twZ\r\n2bAS2Gkk91tqNu3BGW7Hzb1PMQ3GzqH/bhL4diT8541LBVJjfB6zW8QcKAYf\r\nBT12qZk0poacQlPVnjpdSxncp83s/RZyeT3iRvLOH+kaP1HME/Ru+zYR5RHe\r\nPe4S/kiEhyY8teBTHS/YS2ueTdg7wvLVR/l5bSz8N1xRnX7Bg+NW4TnAm3u3\r\n+4NatvACz/wuyW5Z1hSbDNXn5Lu0Y2VhZ9YGoS+MWUScABvPOCBuOotXQNj4\r\nMv4M7oOmG8Hb9oTgZbYmQuZzXhDqiL3B1fHLlW3hRj8OpeKZSvd4A8DVIEx6\r\n/jCZ2A/93ehZ4Qrbjc5Y8tvQQmBZIBM5uccYNF0ctmrpRtFhCUhREl+IOai4\r\nS62U4gVwoXcmAIUiwYfQptdkiYG7DLFZ1u8=\r\n=/ny2\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button/styles\";\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nThe `mdc-button__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused button.\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.**\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n**Note: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.**\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button--icon-leading` | Optional. Styles a button with a leading icon.\n`mdc-button--icon-trailing` | Optional. Styles a button with a trailing icon.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n`mdc-button__focus-ring` | Recommended. Indicates the element which shows the high contrast mode focus ring styling.\n\n**Note: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommend always including it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color-or-map)` | If a color is passed, sets the default container fill color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`icon-color($color-or-map)` | If a color is passed, sets the default icon color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`ink-color($color-or-map)` | If a color is passed, sets the default ink color to the given color, and sets the icon color to the given color unless `icon-color` is also used. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color-or-map)` | If a color is passed, sets the default outline color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web 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/density":"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/button_15.0.0-canary.39e473690.0_1679421094619_0.6063343814961963","host":"s3://npm-registry-packages"}},"15.0.0-canary.cedffb44c.0":{"name":"@material/button","version":"15.0.0-canary.cedffb44c.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"d829554f384ee95b142d700d380bcfa9ea4bc298","tarball":"https://registry.npmjs.org/@material/button/-/button-15.0.0-canary.cedffb44c.0.tgz","fileCount":40,"integrity":"sha512-1vnF7MzKJZ5BmsX+vgIMXyqJ2rBhO1SjSAt65ZEwjTxccTTth10RT/gqZDuxGqH9gqX354XRAi+O46W610I+AA==","signatures":[{"sig":"MEUCIDllm87ViiKL2AJ8L0EpEWRYOUyErzBN7kcENo8eyWRgAiEA4mCqqs7pI4AouYXA0YTfMotftvEfr321g4n36eiHxIA=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":649726,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkGfBFACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqaaRAAlukHqRGmWm0/l1+NLDDo51gwQs2RJnwRDZJQDnWVvbNEu1CZ\r\n+JiCgv/EBOpC5/Hv359SDUfKaGXlvq7OSV7EStxc6jjAfDMxi0BB5uQ6Iur4\r\nYRbypM9Kog8rVcPvQ0e/V11C4+aqrBLvKv6/FnRlqkW5rNpPUMlWrVb37GXG\r\nQd+TJyGzrvZGV0l+ui6nDqryYAWtFX1aucoo1AQvhA9vcyMT6vpe7jmnKx5V\r\n1DJlKGHtciEVuOLYbi4A6sss09yAxJVUa2Ksb0u/XR0GnVkfpZVpGNkWEs1C\r\n6VftZEvC+0FBdcxD4vkIxBocNmY45NFARUU9vZb7wstN+lQdgAKatyHFut+q\r\nCLWw+tzxXvI03eXIfEWzBBOc25Yqsp0nw0hBvFYR/g8puUqIrNTES2kP1B/9\r\nN5sBvs9roqPktNIOOUF9e6yYh0WcLiCDzcXEur3KXEoBEN2/pNGKVZr4/CSW\r\nQPsZgLenfy43fS6ioJ9deKRtuoS2S2Pg/vxd/F26YFRzWzCW4y/qFYKssUF4\r\nvQww/tDwFMo7rAjNxD5F2BNoQWH7mMsYAUYeYPSfjuHhBff/ZSq1q4ErpvV1\r\ne6aDbwPHECyYvCOkbhoQk5h42M/iAAsj3VsnsyHQbS3pg+y/12Vmo3TGEeah\r\nLwPpQu+k7mJteUjpCFC8aSQhmn7O8Ex00SM=\r\n=Yx9V\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button/styles\";\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nThe `mdc-button__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused button.\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.**\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n**Note: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.**\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button--icon-leading` | Optional. Styles a button with a leading icon.\n`mdc-button--icon-trailing` | Optional. Styles a button with a trailing icon.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n`mdc-button__focus-ring` | Recommended. Indicates the element which shows the high contrast mode focus ring styling.\n\n**Note: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommend always including it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color-or-map)` | If a color is passed, sets the default container fill color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`icon-color($color-or-map)` | If a color is passed, sets the default icon color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`ink-color($color-or-map)` | If a color is passed, sets the default ink color to the given color, and sets the icon color to the given color unless `icon-color` is also used. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color-or-map)` | If a color is passed, sets the default outline color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web 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/density":"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/button_15.0.0-canary.cedffb44c.0_1679421509326_0.4266289202964073","host":"s3://npm-registry-packages"}},"15.0.0-canary.36a4cba99.0":{"name":"@material/button","version":"15.0.0-canary.36a4cba99.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"8f8c38c9235c545ef21e80ee766f615496fa3548","tarball":"https://registry.npmjs.org/@material/button/-/button-15.0.0-canary.36a4cba99.0.tgz","fileCount":40,"integrity":"sha512-r1g9nryTYtiqXgBap4NJ3JW14vvbMRJs0cA52ZqsPGrskwqlCNKs633wCRDOB8ddtlc2ll1PLXWkA5MVi8kyRQ==","signatures":[{"sig":"MEUCIDL6pznGmlwKrD3utFZEFgtVnvAVU4PqDgw+LSXxMc//AiEAxJCAzv4aMzJbnwBylX4srTvyaldYNVkq5xRzHRKWxPQ=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":649726,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkIyjWACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmodwQ/+P+FYVWMGSIqKDuxPRwZtoP7Pw33MK6buz7zafHRN1HzmNCzb\r\nmdII8qxt+65McvS+Ao3CrnFUSk25XYVdARjwz+qVddPeFfv5BxsA3XvduZSh\r\nsOy3kVls1heA7qYmpzrwJJbOHUASjinbBpgDiyL4O09+109twa73yJNj5kBY\r\nIZLzL/93WSm5kQWiHIMRlg0Nw6nJ7nBgdpz5vISZugQHWxuWDzmAsuA6bjj5\r\n3vlroRGfWUcgJ0RzAa3UPawvwoIDYrmo7xvT8BpFUHBJj2b5UvRb3PADbHzr\r\nkf07DlV6Yv/iLr4wN9YuultmGfiDAl/mtmhRkUp3GqoxfKLMRzuzia6NQtSp\r\nWcpQEVOG15MhLKbMpLg0+Ff6t228ZTXUeiE9pWhEeJueNWR58xIF8qvqwI7/\r\nTzlxkTUqVmGE0/bkXXdHypvW7DFfjBqREpnN8UMtUyjysr2SzSJEfxjltOny\r\n1f3xaOCpZGnkp5i6HqMFva07xRfcv5sfYUisWL22g7dDZ7e3jhRSUM68usIc\r\n5SfBA36oGWwVbwEeu7tdIyoJHQwwBJAYbTOC9adMBdJ1TojR7GpysPhR90uu\r\nB9N+4YTmWdQG0b5mo4pwQaYPj/H2lRY8lYmMecH2M+e+ciVjiaRvwW+S/I/p\r\nflZ15p7DEOpXo4Yp+HQ+kVEW7vPGYaFRuV0=\r\n=LwC2\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button/styles\";\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nThe `mdc-button__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused button.\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.**\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n**Note: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.**\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button--icon-leading` | Optional. Styles a button with a leading icon.\n`mdc-button--icon-trailing` | Optional. Styles a button with a trailing icon.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n`mdc-button__focus-ring` | Recommended. Indicates the element which shows the high contrast mode focus ring styling.\n\n**Note: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommend always including it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color-or-map)` | If a color is passed, sets the default container fill color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`icon-color($color-or-map)` | If a color is passed, sets the default icon color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`ink-color($color-or-map)` | If a color is passed, sets the default ink color to the given color, and sets the icon color to the given color unless `icon-color` is also used. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color-or-map)` | If a color is passed, sets the default outline color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web 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/density":"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/button_15.0.0-canary.36a4cba99.0_1680025814572_0.5422727478477596","host":"s3://npm-registry-packages"}},"15.0.0-canary.ed7e82ded.0":{"name":"@material/button","version":"15.0.0-canary.ed7e82ded.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"c96b7f17bcca1e9e7d01625e022bee405172bad1","tarball":"https://registry.npmjs.org/@material/button/-/button-15.0.0-canary.ed7e82ded.0.tgz","fileCount":40,"integrity":"sha512-d2ImKwmAId/Ca2ZuXdJOSCgHBi8ynqdLBhq5j94iEYXxy5nGXEva1zPye+SYv9Xygh89PJn6WW/RYKiYBVPOnw==","signatures":[{"sig":"MEQCIEr238ADuYNlRfSGDkt1S0+1sOlDATsnCrDQoiuwhFsMAiBgbIc2koLwxi9VpIR7z0rqTPbEmNP2wZhWT4XjsxG+iw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":649726,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkI09lACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmpkvg//cDbG0VdG9TwbKzLTGptgN4Gxqa458lg8LTMxGlN0GcSjcqg7\r\nnpSootHwINbVl6IpLOjlchOicgqLkWsXTnW3HYwXyYI1EaCHRTdl3IGcEaoB\r\nvTvecBXYD8g899moYTPN6Mxy8aXzerHdaYoFrWEsgcTMO8YzwYEqm8HNUqh4\r\ncI5sJj/sZLac8sbBO/2znh4MxyXfrDlFBSXO7pDh6YXvpaFOfoZatAq4qKqq\r\nJQYX1bFcLmnURzFj6PBxuRt/LZOngq7ft4IKyVl99nQ1Vt3ynIpWyO13yTsq\r\n450sLl6zNdtzyBEtbWyVIeN7spm569WoTKNXrc5Kn0BILBn5mvNtTK+uSmKw\r\nXFGZ8+uE81z1MlqFO0fR1bely3VMl+IvaH1v3TIY6w7hlXJJPeiID4GKRBDw\r\nunua3r74BCVwtehvO+cTsDeEjEkOLKkORyIBf6q9grwuqKpYFZExWb6b3oNo\r\n3fkWjvVbueIN4OZcyd24Smpq9IkKE2AYHWq/rD3BwWPoCLryu9Iu19KerUri\r\nU9i9glp7QpKUUGULoQaE5rgF/rH01RF/IMWFLk6uowAPOBKqC8YHzh5MAsHF\r\nGRa3xBckMWoh0PEoJNFx4MN9OH6cKJG1+a1zCJo07FXeK9RGcBSIjXLEY8xq\r\nKGkHPXltAFNyk1NyW09dxIvE7irpVQEVX+A=\r\n=6ZJq\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button/styles\";\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nThe `mdc-button__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused button.\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.**\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n**Note: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.**\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button--icon-leading` | Optional. Styles a button with a leading icon.\n`mdc-button--icon-trailing` | Optional. Styles a button with a trailing icon.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n`mdc-button__focus-ring` | Recommended. Indicates the element which shows the high contrast mode focus ring styling.\n\n**Note: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommend always including it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color-or-map)` | If a color is passed, sets the default container fill color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`icon-color($color-or-map)` | If a color is passed, sets the default icon color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`ink-color($color-or-map)` | If a color is passed, sets the default ink color to the given color, and sets the icon color to the given color unless `icon-color` is also used. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color-or-map)` | If a color is passed, sets the default outline color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web 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/density":"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/button_15.0.0-canary.ed7e82ded.0_1680035685408_0.7804129928606274","host":"s3://npm-registry-packages"}},"15.0.0-canary.55093ee1e.0":{"name":"@material/button","version":"15.0.0-canary.55093ee1e.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"a8628a88163f2755a65c43646cca61d137f50c6e","tarball":"https://registry.npmjs.org/@material/button/-/button-15.0.0-canary.55093ee1e.0.tgz","fileCount":40,"integrity":"sha512-R1F0SXTpZKq2kTZqRxDqJE2sG6BIYaYgY33U5VSljee0fO9ixDST/IZZbI9klru9D0pXX7UhyKRNeQm1eWppOg==","signatures":[{"sig":"MEUCIAZfdbYyCK3uyaWdRMysjvnVkDPVOh+zecg/BkbvB2QUAiEAtuqnA8ksY6+wBOEPdG/zwlcZ0SgXlEGqZj17K2DBKx8=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":649726,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkJIgNACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpimhAAgHVSpoWTmzUYWJ/M26trwf46FBwzgxHq6Nm1lkWS+mEww1j4\r\n471LaaTL9KzP0lZ50K6+m/eMjmf/BSdI2InwDSLZ4yULnxZ0bvYLDaknfPPl\r\nrNK4ohJWbA1uHqai1kSk2MqbxC1FgCODqc7sZ1zarjKrIB31ekXtIkRrRVUw\r\nRdatSMO5SrOc/+HyNWwtZk9nGas33mBYzYiDXzzGB9qW2mu/hlJzK0eDKRzP\r\nRYu8YFGaB/PJ0XcAwoAK2Vpg5P2pauStKIkpA9dGnwy4hxvv8DNJMia25B0i\r\nSR1efAXixTZvTUst6xOl9dkky2coQFeGy/UbxaY1g1JC5bkoh38k2sWXaSTG\r\nUi8DtWoruf+mCTPn6NXtVv5X8Htk/JXz1nz0ZV54gotifeTXvzTslWV1Kt2h\r\nINoZ0xnZfFo9IByg6FZtNhS1slyXhPZbX0T4TEuhUpoOuLX370jxBEEMc/dT\r\nDzQDFpXJchcuuBNyWGTv6E38BlTTF3oMDeltRQF6anZdzvaisxpBskJMsq4B\r\ngZ1bM7BSDkmMp+cssFSITbNi1piNtv7Vlk8/4KjDN7w/3QzC5trtbq39wRqw\r\nZLVO0PgxY8jfNMOTXnInTGcGeDAJk3ShfD41+ncL94Ux+4aKIrfohPXhs3Tw\r\ntzb62wj5sY15kn/z+WygGYnY4UUPCKnS+ik=\r\n=9Ryj\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button/styles\";\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nThe `mdc-button__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused button.\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.**\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n**Note: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.**\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button--icon-leading` | Optional. Styles a button with a leading icon.\n`mdc-button--icon-trailing` | Optional. Styles a button with a trailing icon.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n`mdc-button__focus-ring` | Recommended. Indicates the element which shows the high contrast mode focus ring styling.\n\n**Note: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommend always including it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color-or-map)` | If a color is passed, sets the default container fill color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`icon-color($color-or-map)` | If a color is passed, sets the default icon color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`ink-color($color-or-map)` | If a color is passed, sets the default ink color to the given color, and sets the icon color to the given color unless `icon-color` is also used. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color-or-map)` | If a color is passed, sets the default outline color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web 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/density":"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/button_15.0.0-canary.55093ee1e.0_1680115724797_0.33242659121685225","host":"s3://npm-registry-packages"}},"15.0.0-canary.0c53abc81.0":{"name":"@material/button","version":"15.0.0-canary.0c53abc81.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"d7e2c1e93a9625e2a4606f74833cfbd45613aad2","tarball":"https://registry.npmjs.org/@material/button/-/button-15.0.0-canary.0c53abc81.0.tgz","fileCount":40,"integrity":"sha512-3CrNeGmFc3BZYazsfOfCFApBA4IlO21F4a/9mRbOIOINkN7sE6IuU0eqNRNDzkMsluQQV8QMo6BWNOOxA5hrtw==","signatures":[{"sig":"MEUCIQDLsznPXOrhfjsOK4O+KXWiV3PBp0Jc4MTJ9dBO4j3F5QIgHhrkTFiorpm9PQKudPgZxa0uatJ5Ns9MQ019MSlYRNg=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":649726,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkL3S+ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpUrhAAg7wwoNMQLVU6Fb2d+oM6oxLe4lFmvladgM/gk23qwNe0yEmH\r\nxPTO8ya1J003hhjVJppKwWHDKCZ6Ma9pckxYsUM873pneiij/6fGLZJNj+Aw\r\nh663xDLg0YQpo8vNec67MB5O1Kbv+wSbb0VHdrKbxt/1cZ0OIc9mn4cFMdPR\r\n9lfuRMobzbeh4AqYMNQOuH/hdHslWQVyE2Q/mLI8amy8pYxXSgMMplXmRBnh\r\ni/3ytMyixxd2+hvRNFhMNw0b8gNBr8481kstTMPIrz/zAEphV5Dx+ktCRnPh\r\nZs12AWClKBsaAW6efgvctmLXE+SYD0F7IKoorCf0ZahQ6dkifiOUF33QNuA4\r\nGY7Jb74D2c9eUsUI1FOINp2mkW5iKbfjskSmsuNKwGOTC765ZISpKrZnuIpH\r\n4Bq3+L4ceiZUB4QktGA6CypnV8cabt8ktv9UryhyFg01mZnlXtPSw1R6YB8/\r\n4IpOYGP0scO+zOrVX95GanAlzqlPrGkvjhFJuerf2vOYZDrKzmCHv4dunz88\r\n6xRI1yuOjZ7kuGnRsToLsE783/8J3x75/YU26EIfBP1PJLrwx4ucKF5JychZ\r\nOFvigclpftTRjb5CA0UixrMl/vwXQs6+bmwi8MsaaVj9/ob457ieDT1uAq04\r\nTT6s18xaPcUAnLzx+GoZf2DpshW8Y8Gx5zc=\r\n=tj59\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button/styles\";\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nThe `mdc-button__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused button.\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.**\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n**Note: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.**\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button--icon-leading` | Optional. Styles a button with a leading icon.\n`mdc-button--icon-trailing` | Optional. Styles a button with a trailing icon.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n`mdc-button__focus-ring` | Recommended. Indicates the element which shows the high contrast mode focus ring styling.\n\n**Note: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommend always including it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color-or-map)` | If a color is passed, sets the default container fill color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`icon-color($color-or-map)` | If a color is passed, sets the default icon color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`ink-color($color-or-map)` | If a color is passed, sets the default ink color to the given color, and sets the icon color to the given color unless `icon-color` is also used. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color-or-map)` | If a color is passed, sets the default outline color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web 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/density":"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/button_15.0.0-canary.0c53abc81.0_1680831677967_0.5442746999521468","host":"s3://npm-registry-packages"}},"15.0.0-canary.51311e69e.0":{"name":"@material/button","version":"15.0.0-canary.51311e69e.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"050131e9c6bfd5db3a76b8e5becef8bd3538379f","tarball":"https://registry.npmjs.org/@material/button/-/button-15.0.0-canary.51311e69e.0.tgz","fileCount":40,"integrity":"sha512-iyj57vLyKjum1UEBY6LEX0bGUnKQnhE3oNnITbnF/22lwQaubLoW2rFZPAukNZY+NS2f5elQAqineiRijA/d2Q==","signatures":[{"sig":"MEUCIDZwHmLkoUsuiJIEkemqgaukHWQWiMYMdb4no/Ig6LypAiEAj7ha0VQyf0zGM3Kc6gnkDEUsvaoFIUsfw8AanSPk7sE=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":649726,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkMFwBACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoEgBAAmG9jkJYTKFdfZWv+kxk1pNaiPhZBe7nOL9QyMq9s/SNeWoOv\r\n6ZYzy2S41LfTG6bwBl8KGpYwyHbKCIzPgI5wbRixvhafgsVC9WyLMyFipqLj\r\nUQDZBgByviuM9hEF55y+6e/eB2MkNv2Tk3vq2eus7nknhHyLPQLoxV4FfBX8\r\nIWfPWnDnpRO/j/Ilm7Ff7WKzjOkM4ffTzqgnBiBAGZB1Z2lqDNxQuAupvcuW\r\niJr2bksgmFdgNL3RVCIRJ5oLiaJhhVhk5ByH+8k4zY8uuQRDwqLLlr91KSTW\r\nU0sBew3izlgDNJHfGHjHAJbDvKujaAyTWDIu8clGD8ZfHegi+hBMB6UOAJLU\r\nOiFmTII6Jy1p5bDLd7S/J9Zfr8xQLSm6cE/XkpQXgdR651Ci/YAf9z4Kh8l6\r\n+VhBQS9PW49NYCneRE20bZD6iUTQSenl5DApJVv7HAl7wCBlKHqyTOy9ZMTF\r\nj0dPrBjoLW6OcpG9rhT6WK+WTHboz8cE8a1g4xZe+zKjTj3FB2bo7EkZPaXw\r\nDXC38tBTeSsx+fHYv9/eLF2nTZPQOtUDIkhUZUbsBND0ilYj93bWDWbWhYNx\r\noGp31mUeDmr8L1jOm7uW689g1BaWNaWXvJQbPseYZ/ypIiHDUqoVwoswEROa\r\nnIRcA18ruGFMFJqmeZXo5+S83fNO58AdavE=\r\n=FHsb\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button/styles\";\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nThe `mdc-button__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused button.\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.**\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n**Note: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.**\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button--icon-leading` | Optional. Styles a button with a leading icon.\n`mdc-button--icon-trailing` | Optional. Styles a button with a trailing icon.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n`mdc-button__focus-ring` | Recommended. Indicates the element which shows the high contrast mode focus ring styling.\n\n**Note: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommend always including it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color-or-map)` | If a color is passed, sets the default container fill color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`icon-color($color-or-map)` | If a color is passed, sets the default icon color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`ink-color($color-or-map)` | If a color is passed, sets the default ink color to the given color, and sets the icon color to the given color unless `icon-color` is also used. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color-or-map)` | If a color is passed, sets the default outline color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web 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/density":"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/button_15.0.0-canary.51311e69e.0_1680890881688_0.3208273665223209","host":"s3://npm-registry-packages"}},"15.0.0-canary.113b1a38e.0":{"name":"@material/button","version":"15.0.0-canary.113b1a38e.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"5f12b691699b2b54004d376eb5b42df1836d4dae","tarball":"https://registry.npmjs.org/@material/button/-/button-15.0.0-canary.113b1a38e.0.tgz","fileCount":40,"integrity":"sha512-Lhe9aBDhuUxUMnn2Q1xxiKYbgh766iyWFXS7IfGx/T4fo3/0gV0jjp02sBSEiQ0CIlX5w462ugH3efwhgMy1cA==","signatures":[{"sig":"MEQCIHE0fKQHt2o8z5KJ/nDfyvsi7D6h7kT4zUmTJozBlqEPAiABHS67MO0BCIo9ptKBIJpZmGiYUoyXXhzZjycQqFgEew==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":649726,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkNIVzACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoqzhAAl3x79rwSxz1815LFFoQApfsECuXq7dCpMFeDMcxdCXwS48GU\r\nmrAjU/30FDRqSJLEP/DhRX65WhAmZpkJKv1Bg4QgDVKiV3gU1QEJ9/JddMMK\r\n3oaYglG834DVbVsYC+7TL2bL4vWlca0zPBmMliVZVQaqjG75gxl63pxjDb3h\r\ng5UHHMZxsoIwYsUkMfvS59weZh+R2lzf84qsoWxiSCyVRjv+0LoHke3LxeAN\r\njfNVosE1a3Vd1MPkKMxQpwS4fhx7IR4ensENVXGfCKL52ufhULPOTT4YpcsT\r\nV0mirHNQmH8tBc9tdd/hzTJbuMpWLZoGsjL271dbsqv8ZjNU7iHbB9gyzkFt\r\nwj66PlRjXcIeNFgpZUnW4hKrWtd0p/+8M8uRmLuE28dyrDAfzYEMmb/mBN4z\r\npRJ7hFTo5YXLQnnrHWqzjqZnWDz/uQdXGfjkBaeszcV09AYOrlJi8ka4cJVs\r\nYJKIMfZ6/VFZUGQpbleifllPop7vwOwudAa/jjBMazV/6msAxwL8JfqMS6yC\r\nVkmL1xkAmKnBJf7k98jcbHtU4YNGwEge97tzdQQq4qnTZUI19O6rL2AYbjw+\r\neYL1tqAzOL5lBXMxrrsyAzCPb7YHM0c+L4KWtbpJZy5FKAhiUHnhqLUQi/7o\r\n7KjhZ54DkgPaSNBiqZTcWnjevlB/xSwrJ+0=\r\n=xREm\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button/styles\";\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nThe `mdc-button__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused button.\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.**\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n**Note: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.**\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button--icon-leading` | Optional. Styles a button with a leading icon.\n`mdc-button--icon-trailing` | Optional. Styles a button with a trailing icon.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n`mdc-button__focus-ring` | Recommended. Indicates the element which shows the high contrast mode focus ring styling.\n\n**Note: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommend always including it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color-or-map)` | If a color is passed, sets the default container fill color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`icon-color($color-or-map)` | If a color is passed, sets the default icon color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`ink-color($color-or-map)` | If a color is passed, sets the default ink color to the given color, and sets the icon color to the given color unless `icon-color` is also used. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color-or-map)` | If a color is passed, sets the default outline color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web 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/density":"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/button_15.0.0-canary.113b1a38e.0_1681163635492_0.31712977752102955","host":"s3://npm-registry-packages"}},"15.0.0-canary.ea2191426.0":{"name":"@material/button","version":"15.0.0-canary.ea2191426.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"9ed1b3b78a9c18fd2683a3e9092cff1cf7fd8550","tarball":"https://registry.npmjs.org/@material/button/-/button-15.0.0-canary.ea2191426.0.tgz","fileCount":40,"integrity":"sha512-N9dTOddqfmKPpzJOe4oLWn+AVO6F6/oQOAQFBVvrwEPG4AKI2n0f9giQc6gunUys/Dj7Q6oNvicxny/NTxWJZw==","signatures":[{"sig":"MEUCIQClougBtR4sNVGbF3mamxpeiHu4AsyofySd33dKi2UHQwIgOy35xh22gZyrXK6rZhous6zHLKy9jILZuYLeXYeUUGY=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":649726,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkNdd9ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpZ9A//cA+TG4U0gkVNYLrmQJzDf7pWuiqjSBdfh+CslmGkUNbfXl2g\r\nhiUaEM7mqmlY3LZWJre6jr7pSRyWeMI/kkC+TcDPtrlXDzZpzGtPbB/IDtv/\r\nupNPcL6+ZMb4/U/rZ8vHZyAg5pPUsZN+qnpI4Gwxa1MjJQLYYvuLMFQ5q2aU\r\n7O4znJ8KsWvOGK0jb3b5bSR1OFRxdS/Vf7a2ysCd7mC501Y1DiOtxhVFYKo5\r\niyhFf4JluYQLA7RmtTmsoMfRjqlLJSTSLzK1eLgJVly1VqeHxBxFZg9Xo1dO\r\nanE/7ApSRwvm21qprrUMVUcMr6pVwkn+UK+utnA7//uwq6mmEIva7uT3oZlZ\r\nkJVRpBAWYTOVN6aGu4c99fUBI4vvwXMo0NN7R4yqEHcgpsvHmf3tuY6uicFH\r\nsUT2L8sW6GNT31mSSAOYOnZsbvlTJzG/1J4nq2KADlMx9xYouhJ1MX3D1WDn\r\nOzYwnIMlLnd5NXapVHCkWyQujCxR3fQ37PpymcCoPIhoaFW8H7BjHZzf5HrY\r\nBX6hKbxiuVJOuSZ0RqzueSepAJNHk1WoOlgbbyXaKgO/6rZlGejdD9ec9gsy\r\nXYgIKcGdYki0TFbk3gNhW8VLqJgRSu6r3LbjKQuV2/VlZMAHkBfKvVxKImOo\r\n6LhjZ+2z3XqKRXGEaaBcLU7t3+0sIGgpBDs=\r\n=Qkdc\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button/styles\";\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nThe `mdc-button__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused button.\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.**\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n**Note: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.**\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button--icon-leading` | Optional. Styles a button with a leading icon.\n`mdc-button--icon-trailing` | Optional. Styles a button with a trailing icon.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n`mdc-button__focus-ring` | Recommended. Indicates the element which shows the high contrast mode focus ring styling.\n\n**Note: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommend always including it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color-or-map)` | If a color is passed, sets the default container fill color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`icon-color($color-or-map)` | If a color is passed, sets the default icon color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`ink-color($color-or-map)` | If a color is passed, sets the default ink color to the given color, and sets the icon color to the given color unless `icon-color` is also used. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color-or-map)` | If a color is passed, sets the default outline color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web 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/density":"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/button_15.0.0-canary.ea2191426.0_1681250173025_0.21352026118427858","host":"s3://npm-registry-packages"}},"15.0.0-canary.5a5c38538.0":{"name":"@material/button","version":"15.0.0-canary.5a5c38538.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"07412e1f316940a34ef45b1c25594bf78de82351","tarball":"https://registry.npmjs.org/@material/button/-/button-15.0.0-canary.5a5c38538.0.tgz","fileCount":40,"integrity":"sha512-0XjpUWt5wV9jAlgx6nOcL3l4paO6OptXAtg+yEzNwBa8JLjOFcoYEyl7xB7yi/R9tgAc9smy+d8a/OIYszGkeQ==","signatures":[{"sig":"MEUCIDf8a6Y0tj4uHEw9xprXoXjUUhOCgpUT12SrjNpGbWs/AiEApLHmaLnfkkftdLmseJ94dQGpq+1w/8s+RHnVz4HuxjE=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":649726,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkNd+CACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqrnBAAnVB/GmhGTD0/1Acy+tmOy1QylnQhWzLe0naY7k+Wb2ZMOIZc\r\nlLOTMmc2HZnNFWKbjQ+1oKUdIX7+iZ74+02g3pzeOUK9btyb3fnqNJ85585G\r\n9BaHS1Uv5twp16heo4TcX/cy81omRGYGnRAHI2QuYu0PV92VqI5YSeRWyZoj\r\nV0ISAqoi4KclwjMXsvI3/LScj3/DaM7wxaNyxZ0VXFN2kToiYbk5qETkujhV\r\nNZW97pSE8VYNRdSJPXwRK2+wDeYPUJRo4R5xny4h0q90ucH0QSp9oCS2I0Ls\r\nCx2Ea/c87iiMrPJ9oQ5PUDUe1eEruhlFhQMniSy/HTsXoQzn44QvC15csMS9\r\n2/OwwTQO7skIDNS08IMhIC10z8HV1eJoXuj4X2Xo5obEJG3Z4jgGkmrjjZPM\r\n/bjC/w26G8HTKyGqqKw7nBOQKDZ0E5G66MxJonEwKAZ2MIoD3pWOv5wCwFYL\r\nvhiEahbMdiHKB1NEzJckyXYGNpL5cGl3gvWW1X6G6h8L3PKdwd68st6OLrUc\r\nJRzR5nVLM1xbzQyeuC09Cx9e0Q2r69qE2velnN3aNi1tSm43weDM/mj0IEWQ\r\niTroMv2E2JasxH/Z1JP5gkzx7nBTi1hKNT4949nITSlV1DxnJ76Vt9n0kNR4\r\nlDB8R6Ykwvppju6cJfCAsUAZjDD5yzfWpgw=\r\n=m47g\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button/styles\";\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nThe `mdc-button__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused button.\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.**\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n**Note: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.**\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button--icon-leading` | Optional. Styles a button with a leading icon.\n`mdc-button--icon-trailing` | Optional. Styles a button with a trailing icon.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n`mdc-button__focus-ring` | Recommended. Indicates the element which shows the high contrast mode focus ring styling.\n\n**Note: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommend always including it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color-or-map)` | If a color is passed, sets the default container fill color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`icon-color($color-or-map)` | If a color is passed, sets the default icon color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`ink-color($color-or-map)` | If a color is passed, sets the default ink color to the given color, and sets the icon color to the given color unless `icon-color` is also used. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color-or-map)` | If a color is passed, sets the default outline color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web 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/density":"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/button_15.0.0-canary.5a5c38538.0_1681252226441_0.7856879899672753","host":"s3://npm-registry-packages"}},"15.0.0-canary.e4b5ea7eb.0":{"name":"@material/button","version":"15.0.0-canary.e4b5ea7eb.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"726e99be2fa6ecf641722464866069039318712a","tarball":"https://registry.npmjs.org/@material/button/-/button-15.0.0-canary.e4b5ea7eb.0.tgz","fileCount":40,"integrity":"sha512-JW1QlZlVkM3vhM/q3CSuwu2KJVu2mmKcL2ulJGCPmDs2V/MAS2yNZRZLfFKZfjEotnjhZFWpUS/gyQ/r4XKk+g==","signatures":[{"sig":"MEYCIQDsSxt8WUrr3DGE/a9HymIjXgsLD4Zwz40EyUAyymQtoQIhAO1VoIkIFAZkK+bw60XbA01okQcUt7rs5GHreW19T4Vl","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":649726,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkNed6ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmogwA/+ICn/29zxg/2GYJAYg2SMZEnaLshvBhUokfdVwAjMsX3j2Swc\r\nU18uh6KdXFth9KYY87rIttIPoBYdJ3mpJg/Ajp+QZMZ5NRFOPH84uLzESGju\r\nPk/LpPdbfiKHNADkCamVCbF0CLaRyYVbdAUMzeKr8jfVN2S6jNrd0KgXJvkL\r\nfxaVFC1vHFjpYoHY9KBeB2S9bkXjVrpQhbrsdjyc78tiBrENjwiILTOz4yO1\r\nc+zw0mnn6ON3wGy5V9NrgkJttfjtdCzjm/V5glihIqshcppqroqaRBIXg7+O\r\nFyDa9RljvX7ozwhXcBOSzH6nVJKQ7ssGn/SXhtg2aks0wlH0snsVOTRlv5xw\r\nTiMnEuhr40hZctBOKxOsSvyzGPVfy+WnrX3HsWdNqF0+0YNUlf6Rs+mu1bq3\r\nt2NRyM64Nm5WRMjentTTSEfxdt2SXdvqs1+DB41yEO8Y4n14H9qvcNKqKYFZ\r\nNA+kqPhKZeLHhCUpi8I7dVjtQP0p1B+VHJfcddyx77wYng2R50hJ+ImcUlvA\r\nP4QKp5ZR2g0Hcuz9wYIHoSln3eY6KeNxt4eKYro9HkBvBUobxiixEpnnVlFC\r\ndQTJDYdwotsYBk8/V9BqWspGgg/JsysIutdLyzIY3a4TzXHem1YRyafGKvDN\r\nN3OHXMYq5SkJz0nly/bgIbtlrhDkRpkUgyA=\r\n=DcJM\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button/styles\";\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nThe `mdc-button__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused button.\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.**\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n**Note: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.**\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button--icon-leading` | Optional. Styles a button with a leading icon.\n`mdc-button--icon-trailing` | Optional. Styles a button with a trailing icon.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n`mdc-button__focus-ring` | Recommended. Indicates the element which shows the high contrast mode focus ring styling.\n\n**Note: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommend always including it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color-or-map)` | If a color is passed, sets the default container fill color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`icon-color($color-or-map)` | If a color is passed, sets the default icon color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`ink-color($color-or-map)` | If a color is passed, sets the default ink color to the given color, and sets the icon color to the given color unless `icon-color` is also used. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color-or-map)` | If a color is passed, sets the default outline color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web 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/density":"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/button_15.0.0-canary.e4b5ea7eb.0_1681254266049_0.6402316405274795","host":"s3://npm-registry-packages"}},"15.0.0-canary.a094dd9c1.0":{"name":"@material/button","version":"15.0.0-canary.a094dd9c1.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"d201c475ee004e4de46e2c098c7adf7beede52d5","tarball":"https://registry.npmjs.org/@material/button/-/button-15.0.0-canary.a094dd9c1.0.tgz","fileCount":40,"integrity":"sha512-NGV4ZIggawKcljhuieKbZ8DkNe6wLPxFfG87G9ZQJddvG6CigZyI/WXrr+vyY5GpbLYhdqQuekgHPqHNK8HfRg==","signatures":[{"sig":"MEUCIEY2Brk9zF7L/Xa3icRxfLjAwi4t5YivmVd4EYdjbpr4AiEAuI14SLsyN4YGjBadD8pjRPS+7RVZCp5xz+gMIhNEdKA=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":649726,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkOdbeACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrrSQ/+PKZWQO1UgoopTBkow/S6K60GqPPFh0YLlG4LkN5JBNt4wp1m\r\ng9JPe9kLnM2Lh3WAWBs3Sh31veSioy6+f0b8N3cKWTPvh4VjxoN+4IxJSET4\r\ngBRVrvz0dPYM1mbd79VjgE2l8Ue0AWvYb+vErW7SyCHasA6kD5xkLTJ8GHZ6\r\nHynb1J1C4E1BSlmQi0mYRqiKoidu0mJXIbcG8ehzhmUr/IA5TvBcH+kuJ3eZ\r\nL9NSHHphRZSnWoK+jT0dqwxMYcWAi0bPKsdVR01XmecrBGugdUF60QaUFv8D\r\npVAjnJ9FUph8vwhSPtBT2JxeM0gahIK/aJv5oY9spm7YMjqPNIHb4MHs5kHX\r\n/4aP5zDsEE1bxz9dzn1ZKrjBNG151j5K2QYO1q3nR6fd5JVOWbApLxHTfh5T\r\nsMe4bI3LUDD3VNtAxnNBxAYpo5ygxNp4gDo5hcx5pJMAvYKuaraMclfHpLhU\r\nZjhy8Td0IqNRlxi5i0t7peUAZB7IoVjEN45cQRDAJss/n+KY94On8RZyLj0j\r\nc18rwBU/F60x3weWvwKHeKT+SJCkht0kmkq5c20NfP5icZzqjkVFemnpDAjW\r\n8zw9YsagSOgxVV67LfpbliRLDRbBzM0t5OATZNlNlMmIfLeCOUkVQujwmrla\r\n2qe5v8FrNAc+Hpy9goLn0PjsDBESuIq4aQ0=\r\n=Zm5E\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button/styles\";\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nThe `mdc-button__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused button.\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.**\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n**Note: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.**\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button--icon-leading` | Optional. Styles a button with a leading icon.\n`mdc-button--icon-trailing` | Optional. Styles a button with a trailing icon.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n`mdc-button__focus-ring` | Recommended. Indicates the element which shows the high contrast mode focus ring styling.\n\n**Note: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommend always including it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color-or-map)` | If a color is passed, sets the default container fill color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`icon-color($color-or-map)` | If a color is passed, sets the default icon color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`ink-color($color-or-map)` | If a color is passed, sets the default ink color to the given color, and sets the icon color to the given color unless `icon-color` is also used. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color-or-map)` | If a color is passed, sets the default outline color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web 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/density":"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/button_15.0.0-canary.a094dd9c1.0_1681512158313_0.6920542955570943","host":"s3://npm-registry-packages"}},"15.0.0-canary.f771b091c.0":{"name":"@material/button","version":"15.0.0-canary.f771b091c.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"777c23a9b736eea49b18e0598f87089457104f50","tarball":"https://registry.npmjs.org/@material/button/-/button-15.0.0-canary.f771b091c.0.tgz","fileCount":40,"integrity":"sha512-6YgANZu+IORCXCo4qbVEqNWyj+qXO6ahH5hRDMQrr6xLrqu6E/LA/RJO1BWs7t86x/sciTyKHfS/MZQewJgnNw==","signatures":[{"sig":"MEUCIGBQhuUudDFLf6lje7vs8AZiOUWjJ2FippDhI0p7DYk6AiEAkh8pdK+/vSLS9BfqQlNBwuOG8OvrdLIZoMjG1kyRNFQ=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":649726,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkPWfsACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqZEhAAjCllUnxS/6IUOqyBVMZItKwgwflduxA2sRS8dR58IBa+EqLR\r\nWo6oasruazTzBVzwrCaVu/a0uN92vXCwbNURq5PYI9hMRJqEdX7uutimN0wE\r\nfkcMj3STpukKaJWJZ0+7WPIQv6jVzPMvqlco9tZWiSXiPHAuh8XZ0cbYwLXy\r\nmWl6bsRcdvD8Fv9zFQRS5aurV+x8ll6wwl14VRFf8B5cLAy1hmidgW8bXPar\r\nvNdf89nal4TWzaydB4AivhO8jwv/AiToZMGTO3P2cN3Mdb11+XggqHvqR8Ci\r\nkI+X6i59vTNth8QbHgdFFuusAlhLRcfPqkOwytTqFJCYJlG113SDAHZ1MJMa\r\noa2Fu4Gb4o9C2ArWMIC0wCWClYEZKRasi4d5iThS7vIhzTEnyFrX4bZBrDWy\r\nZmNCJcXx20vdfjP24pfsUi5xADj86EoVkH/5SjICpcyAF6J15S4wzDtweoI+\r\n5CabaQ6xGwnfixTw9laN6teChTLHtsrEqqCQPMda9IwHjFJ7ARaMCpjEGaL4\r\nuUsGZaAbZ2ABSZP7phQjBT/Fm0Y3aH36pEoMQPzlEMshuSvA6usFUTxqlLw2\r\nfRABnqGqDJLgdq2G0p8cmtiH+qf5EzJM5DFzsOXjlAbaMXewGz2RqtOPIuzN\r\nzo3kt5oyl0layRM1g6/ZF1gRh3IjLGs9KQ4=\r\n=4ST8\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button/styles\";\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nThe `mdc-button__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused button.\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.**\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n**Note: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.**\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button--icon-leading` | Optional. Styles a button with a leading icon.\n`mdc-button--icon-trailing` | Optional. Styles a button with a trailing icon.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n`mdc-button__focus-ring` | Recommended. Indicates the element which shows the high contrast mode focus ring styling.\n\n**Note: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommend always including it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color-or-map)` | If a color is passed, sets the default container fill color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`icon-color($color-or-map)` | If a color is passed, sets the default icon color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`ink-color($color-or-map)` | If a color is passed, sets the default ink color to the given color, and sets the icon color to the given color unless `icon-color` is also used. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color-or-map)` | If a color is passed, sets the default outline color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web 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/density":"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/button_15.0.0-canary.f771b091c.0_1681745900071_0.24223722638862322","host":"s3://npm-registry-packages"}},"15.0.0-canary.79b1b612b.0":{"name":"@material/button","version":"15.0.0-canary.79b1b612b.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"b8f5a6795e0c73fcc999fd51020702e2e88e1da2","tarball":"https://registry.npmjs.org/@material/button/-/button-15.0.0-canary.79b1b612b.0.tgz","fileCount":40,"integrity":"sha512-GHzgITCqcFQtLckRgyIdVT5AbSnhvDF9HFjwNfYJ/O5AIb3oHfIZB/hQg0bExXqUTv9Ew42kkwIKqXTpAoLkBg==","signatures":[{"sig":"MEUCIQCyBIhOgW72gRYUNGzug5ICNz276v8zePLl5vmaD+LbqgIgKHlxhqEVa7WHrmvDgT6jDrnowrYthIT4RjRNlImO44o=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":649726,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkQHv9ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqGaw//XSfwAXsEHLuWGiz5+6ARaOzhXo0C05Mc6vsn5a3SFA20yA/p\r\nGVwB7kjRszA0b4duxC+3mOuxkWh2RthsCkiDoMQCxD7Ti+HlSPAzG5LA52la\r\nqO7jns+l8dBc/aID/ZBRJ0l61UmKWMRX5yCxhj6xcb8QJVdAB4kzhtQYQmmz\r\n6jutqylYjCQcd27LgYvsyTHyAd6eQPEMkQ3VSOYdvxJKpVjo77KaV3KKV1ec\r\nR1jlYrSJhhld+1b6Tt1IW6zJno3uwDFfbGJyRSAqXnKGZyd0zkqxAavgsKKm\r\nrsBtv3iCqeaWfZ4VjR6LCEBUNV+4PiKUO50jGamDIYk1h6umdLLlTBFJyH4Q\r\n11P8opNPv5XvFm4GI9urpxHHEeTP+D0Je3saox2Kqg5VHrBlUv7FfOwnX/c4\r\n5TvVXMKlMLZth2m96E9XGNn+hZrdZxEuFNwWz+lMZGi5SaHmp/6fhBpzcQh4\r\nTJdXDT4fANn5yvSM4iAKFpa2x8IZI2K7qDWkadf6ezWC1chmsVhm0tDpW2LQ\r\n/R4xGEnPNPgWUq9eCw4J90k5JrMH/0dwTiitPKM2xxNJkaWVebQE+Zy5aYmB\r\nkr/EYiNQZn8ImnLiMsoQ436hDcC+5JHeWSKgwtEu8y4Up28TtDZnpF6zpRsH\r\n/tppWuRqpMkVR+8ApvSMlaNivPh4x05JogY=\r\n=hSSO\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button/styles\";\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nThe `mdc-button__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused button.\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.**\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n**Note: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.**\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button--icon-leading` | Optional. Styles a button with a leading icon.\n`mdc-button--icon-trailing` | Optional. Styles a button with a trailing icon.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n`mdc-button__focus-ring` | Recommended. Indicates the element which shows the high contrast mode focus ring styling.\n\n**Note: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommend always including it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color-or-map)` | If a color is passed, sets the default container fill color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`icon-color($color-or-map)` | If a color is passed, sets the default icon color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`ink-color($color-or-map)` | If a color is passed, sets the default ink color to the given color, and sets the icon color to the given color unless `icon-color` is also used. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color-or-map)` | If a color is passed, sets the default outline color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web 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/density":"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/button_15.0.0-canary.79b1b612b.0_1681947644722_0.7739485179551138","host":"s3://npm-registry-packages"}},"15.0.0-canary.6f50071e5.0":{"name":"@material/button","version":"15.0.0-canary.6f50071e5.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"9f4f2dd1fb5bc8c94c09903f7cb45f8b926aecad","tarball":"https://registry.npmjs.org/@material/button/-/button-15.0.0-canary.6f50071e5.0.tgz","fileCount":40,"integrity":"sha512-WmEOpD+PmKPNQpSiNe4OfkTz83VFOipJCSIPPpiMxZXM41CujwXMARHbv/vhdo/SUO2wDu6t0fiLL32vlsmF5A==","signatures":[{"sig":"MEUCIGzWb5jGR7/s9pC9cL6j78CkxZz3+DJv3oZp7h6xkFJ7AiEAiLhy/PEZ32ERhNDLVTXIXMYsbylsNta9EgcXMsEQ/28=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":649726,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkQX36ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqECBAAiHZdpFTSeztoKI6y5MK4WBmR4faNHHaVKKF+oPGIVcZODCWy\r\nLsMUsk0UWBYHPXSVvyyDD/9qWLpnBaIKH7jNSBHrcMD4NnNcv4nRwljQjzLg\r\nyXk4MJQ5Vr47L0iDrFoFQ/N2qcWj6UcAJbk0QGD2Wj4A/Xm2j/PY6/V6XJIY\r\nH6XU7i5zCWAa/uH0fQGlTJyuxYLY6IgHlXXBc9HolglpOUYZTQWM1HwMs/wu\r\nsbzhgCAVurCgnHdrIUen7TuEKOxLjPQ9+IcIWfZPDUMl7+ZxoxEAaEXmINeb\r\nwyg5uL1HIpwtgoggS3uUfpw8Pgcl6OlJH12b5+r2amDHnN3l7xum2QqRrwiX\r\nV5j0uM3cLM9p36yee0iyNEDDwW/7DQ8Zk/oGxGag03ThBA1xMji0MBpEqllD\r\nHcCSKSpiZ8HqGZvFM9IN0oWOrOj8yGUrH+AOEaHf71oMqT9FjEcl8lU+fl1+\r\nQSuO//VuQs0OhX2ZwN663VbHddLD41v4DP8gf7umzKbZOBADTMZXgsoQTAsy\r\n+RVFqjeUNtEY9MEG9a47pcpY2NQeg4c4BVxRFwmmDKioCKTnDf41yKX8YSZL\r\ntzbzRWenLDcBWhmJwxmdtLrtdjWJJVoy4UniI137K6U/kYTJjy51oXeaF1mL\r\nqPxb5IjuNFm0TzgGx2BxWBTxuzMt+v6z4Ro=\r\n=Hp7l\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button/styles\";\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nThe `mdc-button__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused button.\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.**\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n**Note: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.**\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button--icon-leading` | Optional. Styles a button with a leading icon.\n`mdc-button--icon-trailing` | Optional. Styles a button with a trailing icon.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n`mdc-button__focus-ring` | Recommended. Indicates the element which shows the high contrast mode focus ring styling.\n\n**Note: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommend always including it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color-or-map)` | If a color is passed, sets the default container fill color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`icon-color($color-or-map)` | If a color is passed, sets the default icon color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`ink-color($color-or-map)` | If a color is passed, sets the default ink color to the given color, and sets the icon color to the given color unless `icon-color` is also used. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color-or-map)` | If a color is passed, sets the default outline color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web 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/density":"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/button_15.0.0-canary.6f50071e5.0_1682013690523_0.4485395781229258","host":"s3://npm-registry-packages"}},"15.0.0-canary.ef754381c.0":{"name":"@material/button","version":"15.0.0-canary.ef754381c.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"c72bad3cc0cf451a2e5eacfade09e01d8905867b","tarball":"https://registry.npmjs.org/@material/button/-/button-15.0.0-canary.ef754381c.0.tgz","fileCount":40,"integrity":"sha512-4VASvAJVe7XvYXQ+GVVvtwG+fIi3F9LwORzq0zu4tHSqczKkQ9TYpyWVkg07y3k8j2SdJhfH0nOHzEvO5eOH5A==","signatures":[{"sig":"MEUCIAfI0Q+mTWD2ijWIqyHgmZNhIsL54v0v0JDU/q5K45FBAiEAyWN+ZXiAlw+n9Z4GGMX6vG6LXjfd/4xFT5XRmyqNPr8=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":649726,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkRuu5ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpWFQ//VhdanLU+LH78K5mg9xli3JnV5RblX9QFw+WhUv+UBjmzMLWc\r\nonNSgz/k0b5icvjbR0iSXJt+BQxztbdeDhcOmm6spK1tAEC0H7cYHZiV5S20\r\n1FlioSphGsthaq3Tr9TJG4+k//DbgsRR46blB+9PoaZoN3UqMCvo3ER0LqRw\r\nEANwhhtzEQtm0ziKbLhvQ4rrZ0mT/bRI9AcRBwCVudXElubKMgu5rIJ43QV3\r\n+lxNReuwT1xHoGeMIYdjAd11fqXaqXnPlKe+0OSyZaQzNmMLnB2x12Zecu1A\r\nP3ohXumkdrosefw3a38khKrcHykfAuMbiyJ8NzxTpIp3QKy17qK/jLa3yFM+\r\nYqitShnxS+jcUG5f9W2S1ByZgo+ZJeJVOCF+BGEBlaExMMZoXteudqbTVy+6\r\nhDJKiHVI3wl+K4J+nF5f9UXhfRfvxEIhhvDFrW+irtiP6/0My/53ZEPYfgLJ\r\nya6Oui3s/iVi5uCi4OwNnwrXGwxaTIwUdjvTwQFNyoC4N8CXI+5O80iIy/ip\r\nAXZu8P71M/jVDEIc6siPfq8CSmkfI/k6lZ2SgYXPwumE6UiMJuUa2x7+5BYl\r\nou2I8M4iGggMhTTd92S7wWcymTMPVSLXmiTdAWbnjPvMzaSnH9JYL/iXD6gu\r\nSOlWLJNg7SpaAquKndvvRWedflXpdwHnHHE=\r\n=6Zf/\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button/styles\";\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nThe `mdc-button__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused button.\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.**\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n**Note: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.**\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button--icon-leading` | Optional. Styles a button with a leading icon.\n`mdc-button--icon-trailing` | Optional. Styles a button with a trailing icon.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n`mdc-button__focus-ring` | Recommended. Indicates the element which shows the high contrast mode focus ring styling.\n\n**Note: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommend always including it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color-or-map)` | If a color is passed, sets the default container fill color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`icon-color($color-or-map)` | If a color is passed, sets the default icon color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`ink-color($color-or-map)` | If a color is passed, sets the default ink color to the given color, and sets the icon color to the given color unless `icon-color` is also used. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color-or-map)` | If a color is passed, sets the default outline color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web 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/density":"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/button_15.0.0-canary.ef754381c.0_1682369464727_0.9648919709392927","host":"s3://npm-registry-packages"}},"15.0.0-canary.69ebf61ea.0":{"name":"@material/button","version":"15.0.0-canary.69ebf61ea.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"760b5340365480f1b3e1968ebb7e4a3cb0ae2809","tarball":"https://registry.npmjs.org/@material/button/-/button-15.0.0-canary.69ebf61ea.0.tgz","fileCount":40,"integrity":"sha512-gY4THFAtPTeq3WTNkIW87qDeQrUp5aU6sdj7QBx/wOQdNyAlu6O61MLh//XmNJWpzPJ90AZBKp2HPpWmiydVYw==","signatures":[{"sig":"MEUCIQCdJ4j4QS0KM/fj/3Qvm7l4+aj5Aj+wTT3lwD1QbkxfWQIgKZDGLaAWYh++t5TJzS6M2Fy/wmwaBragkkyhw3w6JfQ=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":649726,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkSq8jACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmppShAAgdrEz9eet/QOnSCT3c8JrdQYgAvLJG2GcXzVuEQ/QdNlNT3F\r\nzAwPqRkUdce/PX59PXRctGDOohkP3YgqEueyyIO4MQAkJhe04+covca2Ch/i\r\nDw5UPKIP6QxTTOorBu2GP1Oz2NLREiRytxi4/3BqFn63vcPKxpNwMQvbhAgI\r\nk8XsXQn1FIl9oW5p7CmgivWfWPXyTde3bgCnQ5LBjUYJKfy2QcsTpQ8KGgNJ\r\nIHngJcD+vd/cUbP1bnaCwpbCKlq6b3v+wAh6KFC/VOS/CmnMLE+onpveMlWF\r\ntQP2rCL615DLG7ceInTej2fYuMlUSVQ1IQoM7teafm9ExXgjc6JPTFULjw7Y\r\nZCnD+yVlNOi7QQsga9YVzmETAKcX8PkfWzyoq1XPq7i/ApuD6M7mFoTdVOiG\r\nZi+/oWeRfNmWlfBoAULt7zL2jw3AQf94JQSWx7u1Fpc7MGV8iAix4pDMMCLh\r\nFTSws1ozMTSi4bDPkyXVI5QYBd7XuM/61eoqYHyFMYw//RVCxIYm54ZWjA5m\r\n3rtKfBohqZcnN05sMAE/K5VVY0ZbrHFGqPzqccN93V4Bl5iB6joelYhMDoUo\r\nyz5L5A0Pa6/mpWuLynOKA6wl3sTDX40/zPP0PhsP6uyVY2r2xrCqMO6hhP3P\r\nkLt8f2Qv+PLQ4IHqdvUnGUEBtc+mUyxcpPU=\r\n=s9kD\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button/styles\";\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nThe `mdc-button__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused button.\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.**\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n**Note: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.**\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button--icon-leading` | Optional. Styles a button with a leading icon.\n`mdc-button--icon-trailing` | Optional. Styles a button with a trailing icon.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n`mdc-button__focus-ring` | Recommended. Indicates the element which shows the high contrast mode focus ring styling.\n\n**Note: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommend always including it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color-or-map)` | If a color is passed, sets the default container fill color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`icon-color($color-or-map)` | If a color is passed, sets the default icon color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`ink-color($color-or-map)` | If a color is passed, sets the default ink color to the given color, and sets the icon color to the given color unless `icon-color` is also used. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color-or-map)` | If a color is passed, sets the default outline color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web 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/density":"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/button_15.0.0-canary.69ebf61ea.0_1682616099649_0.6458234833620304","host":"s3://npm-registry-packages"}},"15.0.0-canary.b90be86de.0":{"name":"@material/button","version":"15.0.0-canary.b90be86de.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"fc5800e6c40758ef0e8710b3d376fdbf045d4803","tarball":"https://registry.npmjs.org/@material/button/-/button-15.0.0-canary.b90be86de.0.tgz","fileCount":40,"integrity":"sha512-n7p1pTJv+UR61Ou5t61cB8dJYVAMnJpT6VKvrAn4KRcbfuzRWLVMFz+E0v2MPQJW/5r17uOzmD1adPMykGW6Bg==","signatures":[{"sig":"MEUCIH4ZCj41/IAWTRbJZYKWddxo5T/kBQMjwDKF2R/k9aKVAiEAteWgeatNSYC6k1VH7LfyrSYzE8s46FEo1EZT5bWGbv0=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":649726,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkTGMaACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqeQg//Qq4P1mH85cxt6qCNs3vnfponv5N5s/+9UnMnHcEgfyQqBGSo\r\nz+w3sTF6vp97DQ8Kp/+9kj/anCaNjgvzbdENtk4Df0vCy1tRAo9Ck1xht4Ep\r\nQ0DqC25Oud1qoVTQ4bEnOEzlS6GD+VmvIpf3fF0LH4rRCshSPTDjSF6AalN8\r\nQqpjEapHDm0KPZfNcJP0F9IfUwzAyJUW2r0k4Fh14ctDvWbIDK5b8fEWPyJR\r\n0QJCDk3AOWkBt0YkY+zwxp06wWEk2XQVuzW8LOTBX+jMstrhG8mgFyjVcZtj\r\nt02s1RkbYjGYNMQlwxrt1Qlg3pHzNmfP5riwWHJhJc5l6cUdEjxhETFoPlPp\r\n6Eg8Vh/GqV0gsXB9bwjD784Iy9+YEAqDCXh9ezm9pVwlGnkeoHG7RE0RkJPA\r\nmGWMYwUF+43kAhyTvJ/l2Xh4te1Qy0cefwjqXjiNkJs+Il5KrcjIXOcDOZcO\r\nMjgQkZHsEUrf/2T6SgtYdZt5vTGvvAYjtTBqnQiUw+z9V56AN9gzyEdAigHc\r\nkMvpCFoeFDqREr1z0N8fm6mnOsLJXwqEDqgrR/O0s/vyeigAsBBjZ5BKsh+9\r\nAqea6xOAhC6z1o+w0zW0FWZuzzEBNsKgy6LIUzWa3BXKGhDoFdMPaf46knWb\r\nde0wwnL9iKZvNS90UgcaIM2a/5exk8pO+Z0=\r\n=0YcA\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button/styles\";\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nThe `mdc-button__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused button.\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.**\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n**Note: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.**\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button--icon-leading` | Optional. Styles a button with a leading icon.\n`mdc-button--icon-trailing` | Optional. Styles a button with a trailing icon.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n`mdc-button__focus-ring` | Recommended. Indicates the element which shows the high contrast mode focus ring styling.\n\n**Note: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommend always including it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color-or-map)` | If a color is passed, sets the default container fill color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`icon-color($color-or-map)` | If a color is passed, sets the default icon color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`ink-color($color-or-map)` | If a color is passed, sets the default ink color to the given color, and sets the icon color to the given color unless `icon-color` is also used. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color-or-map)` | If a color is passed, sets the default outline color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web 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/density":"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/button_15.0.0-canary.b90be86de.0_1682727706316_0.33820053495414615","host":"s3://npm-registry-packages"}},"15.0.0-canary.51f9c0c28.0":{"name":"@material/button","version":"15.0.0-canary.51f9c0c28.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"59bc47143681f81c4d826ec45075ba2483e05f71","tarball":"https://registry.npmjs.org/@material/button/-/button-15.0.0-canary.51f9c0c28.0.tgz","fileCount":40,"integrity":"sha512-eLiLRm8uKERgpnnoUKaG98O5Kh5lQljaAWz/RBiKiwia+przJSikMtsBrBMV8BrwKg5wOIFUrUsJOP0q2YcYyw==","signatures":[{"sig":"MEYCIQCjEUEaqiU5L1+djGDoRzS9qNsqbnKgXhDp7Q5677eaywIhAO4ThZnUdrKElfd45W9kQqWOP7c/1/dd203RVNWO7WfJ","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":649726,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkTGVkACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmrm6w//frziezNc0JJL23qcoIgzQ+JSL9FfdHbtQXg3zbUWSUPOuwlV\r\nlpD6iV/vmuxOLuDKr355hP7vjUulfK/icrHootD0/RQOAlTUCJBEnreWGSUz\r\nnTdIPxPaCjRz1rDGu8Xs1sD57HnL2v8V6Dc/VuDUowC86NF1gxW+8Ep0C969\r\nvDWGjzMTQC1WCUiUADgKVV/B4ioCabT2F4FQUow30JYSN+MTkHF3EZMX925E\r\ncYxHd6mig6s8sgGOviCs2ppg2Uo8USJ92olff22tIRJsX0Ezc8DuJgFpooOK\r\n0EI21E3D1NprO4P5CSalpjIbD9yv61It4yiHn/pCaInJyYVNAeNNE2VVeIsY\r\naplWZr/hnpUAfh0p3HE5oy0ThDuwtFaPP897eCwOqIfCjP71ZHnuASNOyvJJ\r\nz0m3FVT5T4dgmTw0Giqo/2M7Y5ErWs+53h76DTgutfGeYT+eNGqmuEQrq/xg\r\n/v2SfVXGZg/7c8wIRKUCv1wquufCkynhK422Oa5aJtlrtCSJYtLpO/rq+dGQ\r\nNpsP7eVf9Gk0kiS2wfjDDeyr1rSJyHtwq5/GDv9fQMgpX3CIfHeFtTs4s2Bi\r\nx7Z1EBGWgADUwdP4Xpsz1bVyTbjVrf0LAKkEppimo8QCCXqNCis2kggoLCgS\r\nVHVcQ37c3fXRBikSTdF9nZ8AD7jX6NtyOMk=\r\n=Kqqj\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button/styles\";\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nThe `mdc-button__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused button.\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.**\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n**Note: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.**\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button--icon-leading` | Optional. Styles a button with a leading icon.\n`mdc-button--icon-trailing` | Optional. Styles a button with a trailing icon.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n`mdc-button__focus-ring` | Recommended. Indicates the element which shows the high contrast mode focus ring styling.\n\n**Note: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommend always including it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color-or-map)` | If a color is passed, sets the default container fill color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`icon-color($color-or-map)` | If a color is passed, sets the default icon color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`ink-color($color-or-map)` | If a color is passed, sets the default ink color to the given color, and sets the icon color to the given color unless `icon-color` is also used. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color-or-map)` | If a color is passed, sets the default outline color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web 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/density":"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/button_15.0.0-canary.51f9c0c28.0_1682728292247_0.3247166813350608","host":"s3://npm-registry-packages"}},"15.0.0-canary.4e840d685.0":{"name":"@material/button","version":"15.0.0-canary.4e840d685.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"c2ac9e3009935777a171505ab38a55c6f8b14f65","tarball":"https://registry.npmjs.org/@material/button/-/button-15.0.0-canary.4e840d685.0.tgz","fileCount":40,"integrity":"sha512-fCEBmlJqSZd8yOY9ixe3fgRmwsgqTHWXY56tVnQnVyupsCb5RdWWKDa8a5XJRDL2GWo6YHkilLFq6VC461uqBw==","signatures":[{"sig":"MEUCICbrZeSIZaOya0TQzX1mM/BSVizg8CytMmB1yCepdNq1AiEAu6tc6ahHxJGcCFt35tedntw8+i6HXjHtWSBRG3mSZ3c=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":649726},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button/styles\";\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nThe `mdc-button__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused button.\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.**\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n**Note: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.**\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button--icon-leading` | Optional. Styles a button with a leading icon.\n`mdc-button--icon-trailing` | Optional. Styles a button with a trailing icon.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n`mdc-button__focus-ring` | Recommended. Indicates the element which shows the high contrast mode focus ring styling.\n\n**Note: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommend always including it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color-or-map)` | If a color is passed, sets the default container fill color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`icon-color($color-or-map)` | If a color is passed, sets the default icon color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`ink-color($color-or-map)` | If a color is passed, sets the default ink color to the given color, and sets the icon color to the given color unless `icon-color` is also used. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color-or-map)` | If a color is passed, sets the default outline color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web 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/density":"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/button_15.0.0-canary.4e840d685.0_1683041623155_0.1297429697655912","host":"s3://npm-registry-packages"}},"15.0.0-canary.10b8563e4.0":{"name":"@material/button","version":"15.0.0-canary.10b8563e4.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"51613112cd92e7f649bf3fb21af3afe3a702eaef","tarball":"https://registry.npmjs.org/@material/button/-/button-15.0.0-canary.10b8563e4.0.tgz","fileCount":40,"integrity":"sha512-56IyUG7jyqe+BSuJsI3CekZG3WsGoU5zQdNsD6qNHUZqcp6t4XoEkRuunqajdNfbgfHFLs9vO+8V0GJhn5ixHw==","signatures":[{"sig":"MEYCIQC3TsKzb8UFSVehm4uhvZtBuUdIt1Mt5d9TPEWB5dSPygIhAJgZUVJ/yznpGpIIxLc/BPqdbMDmdh1RVwdIzUVv+wmq","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":649726,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkUZ/GACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoGaA/6AtMTlD78Llym8NtJxJJQrB9vyYeol1PGjN8rcHeiCWkxHzob\r\nU7tsOcD60JAA28/lgb69gT2xttMqqRa55J4kHflnkyEYkixDw44m0bWqb8mj\r\nRJHE/wJz0hVzXBvvB7G7QuCBngRiA3IB8990drjAny/hLLvEw6d/87yBS71G\r\n+mEOzE7QguvdWXGP7XBEcqcXbVR3+fC1diosArwTZ0bJgyHTJ3zjtKg8xZdZ\r\n+gbZ3dgj2/4pJvcYTgDZplTiC6xwOVxxmIozOVXG/eF0zv8Ttrk5l9dE/SZS\r\nif6o+A34hJ/m3akPCuQjp35KP5Jx85fCaou6a0qwazeqVM2rbsTZOr6vZAC6\r\npPR7fyn0fTf+TUf7yUiGpjqsPi24pgTAs6+HKEwUbRgfkrL0ZJDsCGWuOEuj\r\n6LoUsHNvwijOwScDRcMddYQayI5DGxeUoI3+QF+cpGOOhTsY+HnJjQ9XPRJO\r\neo481gmovhAwNm1wtF7BMhaOKTqbo4SHVN8evqHlwA6E2VKrJz4XeN28+q/B\r\nP0UHB94xgBD+Q/ojwKIG9Msi6V+XvvlEpu+guUqNAp5LybOcrDlNhCo36g7D\r\nXG1JPSGjJwVo77t/VO6DFhXKGxmMpNGDlsqTQi1/M3cZwMdX/A+ckgIt+Tim\r\n1bRNe6rIlA3OE1Feq2CUuYD9uWPxZJKFwe4=\r\n=Mt7G\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button/styles\";\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nThe `mdc-button__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused button.\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.**\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n**Note: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.**\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button--icon-leading` | Optional. Styles a button with a leading icon.\n`mdc-button--icon-trailing` | Optional. Styles a button with a trailing icon.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n`mdc-button__focus-ring` | Recommended. Indicates the element which shows the high contrast mode focus ring styling.\n\n**Note: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommend always including it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color-or-map)` | If a color is passed, sets the default container fill color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`icon-color($color-or-map)` | If a color is passed, sets the default icon color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`ink-color($color-or-map)` | If a color is passed, sets the default ink color to the given color, and sets the icon color to the given color unless `icon-color` is also used. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color-or-map)` | If a color is passed, sets the default outline color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web 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/density":"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/button_15.0.0-canary.10b8563e4.0_1683070918612_0.04449192472179586","host":"s3://npm-registry-packages"}},"15.0.0-canary.736b7fda4.0":{"name":"@material/button","version":"15.0.0-canary.736b7fda4.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"b16c220e1786184b358116d02d0a9ccb84a76533","tarball":"https://registry.npmjs.org/@material/button/-/button-15.0.0-canary.736b7fda4.0.tgz","fileCount":40,"integrity":"sha512-qnwIWae0aD+9AepekQBsZKBO0X8C8cAI3tpInFudVAAXFklpHCCbMCabK3Q35GZFmla3QqGaByeyqaZIHFZrGw==","signatures":[{"sig":"MEUCIErFal3/n3G/Rl7jMKlIj5M1Ib1z6IBGnfnZDbU6Ebk5AiEA3vaFr7BG8psTKbH/LhWGjSgS/MhMOWWt5KXuUjNxuoY=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":649726,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkUnksACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmq9Og//fNIY4Zyg7BAmMj4J/WLB8FVQK2bC+jGPDBC0BAWD2CGsYFV/\r\nVyj3ai7OObZiTEQm0vYi6JnDt8KTWW5txcm+aldJ7eyCpahy9SnRUwKpTXwI\r\nI209rtprHC1wcEQDVRmsNdT/FFbxUlnhSbF7JISLb5ithEnCI0iOQEwEt6rK\r\nUxqn53/foPM3dYpwI1Se+LT5XuR70VzHfKojJVJp37k71OOOA738JFnztq20\r\neGUc84YmOHjv+RSff4Up1RhdxxVB6iPCuNp/sfu6WhrrHCm7xE+PejbF7DBC\r\nIWPSE8icjd4JIiUtIp13vVGkDx0EiiH3n2f1SF9s8Pv8SfU+FmwANWZnI17y\r\nNHgyfHYwKzQCj3T9JaelEofboTmZo9bNTQ9FoKH8AIF8uZjZZeH0dopXI6N1\r\nEUDVjtM55sLqJiNPvfcZaSeTGGtLh+Q5dxFxpE1LoY5OjDLbkYnemMk8MHxq\r\nKoyLCJxSmJzyKn+PZl3xeJ3ZJb8wicUtV74eoPUNEqInN4uB65aaCb6f3g62\r\nJzBuh29i5FDXOoRPVDp5D4UGCC00rLAjmuAcuZQHgn/yeKGxcJyRKHMqNdj3\r\nAd5wdxGuI5OuT0k0bnB76uwa2H20Rnhj0cWb5UTTb6CnkeYUw6GJWwZK/BNM\r\nOWLihY/a+KCaEe04qYZYZEnzUES3VLew+vc=\r\n=3QI3\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button/styles\";\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nThe `mdc-button__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused button.\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.**\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n**Note: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.**\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button--icon-leading` | Optional. Styles a button with a leading icon.\n`mdc-button--icon-trailing` | Optional. Styles a button with a trailing icon.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n`mdc-button__focus-ring` | Recommended. Indicates the element which shows the high contrast mode focus ring styling.\n\n**Note: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommend always including it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color-or-map)` | If a color is passed, sets the default container fill color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`icon-color($color-or-map)` | If a color is passed, sets the default icon color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`ink-color($color-or-map)` | If a color is passed, sets the default ink color to the given color, and sets the icon color to the given color unless `icon-color` is also used. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color-or-map)` | If a color is passed, sets the default outline color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web 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/density":"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/button_15.0.0-canary.736b7fda4.0_1683126572655_0.9968142685544448","host":"s3://npm-registry-packages"}},"15.0.0-canary.0e533c5a1.0":{"name":"@material/button","version":"15.0.0-canary.0e533c5a1.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"73955986d78ad5b1019af346dab64e6961eae14f","tarball":"https://registry.npmjs.org/@material/button/-/button-15.0.0-canary.0e533c5a1.0.tgz","fileCount":40,"integrity":"sha512-Lpd5hcs/3p5Z4AVTi0SEGgZVEjSa4C7z5zuF4eZF6zHgdWQtyvFmwxAvAzmeZ7L21auq0racXqa264y57iJk/Q==","signatures":[{"sig":"MEYCIQCFnqO5ucdz+fR/9e6Cq7nCrypv8D19DTp0pzACetZozgIhAKPX5t2JVBLVsU6TdCuQc7JpvQUP/GI15XRBrLitzLcR","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":649726},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button/styles\";\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nThe `mdc-button__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused button.\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.**\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n**Note: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.**\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button--icon-leading` | Optional. Styles a button with a leading icon.\n`mdc-button--icon-trailing` | Optional. Styles a button with a trailing icon.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n`mdc-button__focus-ring` | Recommended. Indicates the element which shows the high contrast mode focus ring styling.\n\n**Note: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommend always including it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color-or-map)` | If a color is passed, sets the default container fill color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`icon-color($color-or-map)` | If a color is passed, sets the default icon color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`ink-color($color-or-map)` | If a color is passed, sets the default ink color to the given color, and sets the icon color to the given color unless `icon-color` is also used. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color-or-map)` | If a color is passed, sets the default outline color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web 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/density":"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/button_15.0.0-canary.0e533c5a1.0_1683305782798_0.4836709997817563","host":"s3://npm-registry-packages"}},"15.0.0-canary.5f01c15a2.0":{"name":"@material/button","version":"15.0.0-canary.5f01c15a2.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"e14d4ddb1f6b3e70a6ce584313e3d70a01f60fc1","tarball":"https://registry.npmjs.org/@material/button/-/button-15.0.0-canary.5f01c15a2.0.tgz","fileCount":40,"integrity":"sha512-XSi9i4gEATapID9QgjntTuQWaQ1JWF3Yc9bNHkD2dr6t6BZ/21T70kHSCdvAk8w5XkGesT7owjglM+JWFD9jeA==","signatures":[{"sig":"MEYCIQCEgNQlVjF4iY0sAluxunJgKsKbBye8/1o54xZme+4YegIhAIYsELwP72TirIWV3GbzSvsmLlVrLIdn7hz7RhoB+Zll","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":649726},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button/styles\";\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nThe `mdc-button__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused button.\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.**\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n**Note: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.**\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button--icon-leading` | Optional. Styles a button with a leading icon.\n`mdc-button--icon-trailing` | Optional. Styles a button with a trailing icon.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n`mdc-button__focus-ring` | Recommended. Indicates the element which shows the high contrast mode focus ring styling.\n\n**Note: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommend always including it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color-or-map)` | If a color is passed, sets the default container fill color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`icon-color($color-or-map)` | If a color is passed, sets the default icon color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`ink-color($color-or-map)` | If a color is passed, sets the default ink color to the given color, and sets the icon color to the given color unless `icon-color` is also used. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color-or-map)` | If a color is passed, sets the default outline color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web 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/density":"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/button_15.0.0-canary.5f01c15a2.0_1683307584108_0.5470847546684419","host":"s3://npm-registry-packages"}},"15.0.0-canary.3b5b55e31.0":{"name":"@material/button","version":"15.0.0-canary.3b5b55e31.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"ff363f7bd20d6dcdb16f359dab15db32bb3fe19a","tarball":"https://registry.npmjs.org/@material/button/-/button-15.0.0-canary.3b5b55e31.0.tgz","fileCount":40,"integrity":"sha512-O9EIe5xpGHM8NCb2FySv7jP0hXWckk6crxii1c2Y/BD9jhfac971kS6iAsWE2veXPE9b5S19g/n64iaaI6KxHg==","signatures":[{"sig":"MEYCIQDyFsMIOSQKMkEhDkbfw078Tpl29BnCLC51UgVAA5Hu1AIhALdAx3Qa5/50eBi2h6c4kaKSYn/ylpw+7aZDGqnZY32O","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":649726},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button/styles\";\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nThe `mdc-button__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused button.\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.**\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n**Note: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.**\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button--icon-leading` | Optional. Styles a button with a leading icon.\n`mdc-button--icon-trailing` | Optional. Styles a button with a trailing icon.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n`mdc-button__focus-ring` | Recommended. Indicates the element which shows the high contrast mode focus ring styling.\n\n**Note: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommend always including it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color-or-map)` | If a color is passed, sets the default container fill color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`icon-color($color-or-map)` | If a color is passed, sets the default icon color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`ink-color($color-or-map)` | If a color is passed, sets the default ink color to the given color, and sets the icon color to the given color unless `icon-color` is also used. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color-or-map)` | If a color is passed, sets the default outline color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web 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/density":"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/button_15.0.0-canary.3b5b55e31.0_1683311960481_0.9911727615501567","host":"s3://npm-registry-packages"}},"15.0.0-canary.d0788120f.0":{"name":"@material/button","version":"15.0.0-canary.d0788120f.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"5ce9ad79505f0ad4585248656038138db910fcf8","tarball":"https://registry.npmjs.org/@material/button/-/button-15.0.0-canary.d0788120f.0.tgz","fileCount":40,"integrity":"sha512-rH92BE2bnuDgC/71Eui54SThekSr0+eEwooyM50IosF+/fR+nqzffUvsV4nfsE6BDMaeODh23z4lg1MHOzo5+g==","signatures":[{"sig":"MEUCIHPdd1SyGhoGbuYhQKB4qHC+EZ3oFHlvTCSNjgSmKWKGAiEAmh/BBaJObMeuyomgq6xVUPJyRwKGEPz8TU6WgpKSbYc=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":649726},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button/styles\";\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nThe `mdc-button__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused button.\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.**\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n**Note: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.**\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button--icon-leading` | Optional. Styles a button with a leading icon.\n`mdc-button--icon-trailing` | Optional. Styles a button with a trailing icon.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n`mdc-button__focus-ring` | Recommended. Indicates the element which shows the high contrast mode focus ring styling.\n\n**Note: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommend always including it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color-or-map)` | If a color is passed, sets the default container fill color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`icon-color($color-or-map)` | If a color is passed, sets the default icon color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`ink-color($color-or-map)` | If a color is passed, sets the default ink color to the given color, and sets the icon color to the given color unless `icon-color` is also used. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color-or-map)` | If a color is passed, sets the default outline color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web 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/density":"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/button_15.0.0-canary.d0788120f.0_1683620592437_0.8826467147176957","host":"s3://npm-registry-packages"}},"15.0.0-canary.f52358dd0.0":{"name":"@material/button","version":"15.0.0-canary.f52358dd0.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"78ec83ca99b0de1cf48a4597146987bbc8fa19f7","tarball":"https://registry.npmjs.org/@material/button/-/button-15.0.0-canary.f52358dd0.0.tgz","fileCount":40,"integrity":"sha512-BhvvpUgwCiiFgMoD5xA5YH27BUI46RIDQ6igvF+jFJJonZASGuzTVFzxZsDc3jN70xVaZPCeAi9GTJKKDz9RBA==","signatures":[{"sig":"MEUCIQDf2bEMvEelIr/QHtqjMg+yaOT3nR/6jzZ+bp1ELLADIAIgSHxaCd2YXKReiM961hEYItymG3RPZXdTZkPpbyDUT3U=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":649726},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button/styles\";\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nThe `mdc-button__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused button.\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.**\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n**Note: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.**\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button--icon-leading` | Optional. Styles a button with a leading icon.\n`mdc-button--icon-trailing` | Optional. Styles a button with a trailing icon.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n`mdc-button__focus-ring` | Recommended. Indicates the element which shows the high contrast mode focus ring styling.\n\n**Note: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommend always including it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color-or-map)` | If a color is passed, sets the default container fill color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`icon-color($color-or-map)` | If a color is passed, sets the default icon color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`ink-color($color-or-map)` | If a color is passed, sets the default ink color to the given color, and sets the icon color to the given color unless `icon-color` is also used. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color-or-map)` | If a color is passed, sets the default outline color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web 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/density":"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/button_15.0.0-canary.f52358dd0.0_1683901835677_0.03997068554879735","host":"s3://npm-registry-packages"}},"15.0.0-canary.d3c3fbaa3.0":{"name":"@material/button","version":"15.0.0-canary.d3c3fbaa3.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"0e61671acafc3f6d27daf705292f7ef832af4c60","tarball":"https://registry.npmjs.org/@material/button/-/button-15.0.0-canary.d3c3fbaa3.0.tgz","fileCount":40,"integrity":"sha512-OvKTIl5h2t6RZQE6b4j1e7p3r4FJTpdvjZmJ/vlu8NzVJu9cBLJW4rg/xKpkx26lNsmG2TKy/YQJOtz895+2kg==","signatures":[{"sig":"MEUCIQCYAmIz7ovWXJD48U95AC3lB5bJIyRg7kF2Ity0qTJaIQIgHKcRqTw8fTnicH9gWviczL9o0Uscgu4TdU7vHVTpBgI=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":649726},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button/styles\";\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nThe `mdc-button__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused button.\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.**\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n**Note: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.**\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button--icon-leading` | Optional. Styles a button with a leading icon.\n`mdc-button--icon-trailing` | Optional. Styles a button with a trailing icon.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n`mdc-button__focus-ring` | Recommended. Indicates the element which shows the high contrast mode focus ring styling.\n\n**Note: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommend always including it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color-or-map)` | If a color is passed, sets the default container fill color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`icon-color($color-or-map)` | If a color is passed, sets the default icon color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`ink-color($color-or-map)` | If a color is passed, sets the default ink color to the given color, and sets the icon color to the given color unless `icon-color` is also used. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color-or-map)` | If a color is passed, sets the default outline color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web 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/density":"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/button_15.0.0-canary.d3c3fbaa3.0_1683914462758_0.5330759188681018","host":"s3://npm-registry-packages"}},"15.0.0-canary.576d3d2c8.0":{"name":"@material/button","version":"15.0.0-canary.576d3d2c8.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"de4c5f73c8dec9398a8cf3a39f9b91eb8965833e","tarball":"https://registry.npmjs.org/@material/button/-/button-15.0.0-canary.576d3d2c8.0.tgz","fileCount":40,"integrity":"sha512-NrL9dJ364BJhf31+pffZw9iqOEM9pYxYshSH0xO9mjuo/F/VmPsFrUoK4PE+rx2/JltIhGJ+zaooZowEYIHlKg==","signatures":[{"sig":"MEYCIQCSgMrtOZf2F4opoxF3pVy2J/+I6Pvs1O2u66kdvZV8QAIhAOC/N76xCSE9L0co1CNw2LMcV7dQjxJl+q7vGKGo9xgN","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":649726},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button/styles\";\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nThe `mdc-button__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused button.\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.**\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n**Note: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.**\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button--icon-leading` | Optional. Styles a button with a leading icon.\n`mdc-button--icon-trailing` | Optional. Styles a button with a trailing icon.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n`mdc-button__focus-ring` | Recommended. Indicates the element which shows the high contrast mode focus ring styling.\n\n**Note: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommend always including it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color-or-map)` | If a color is passed, sets the default container fill color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`icon-color($color-or-map)` | If a color is passed, sets the default icon color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`ink-color($color-or-map)` | If a color is passed, sets the default ink color to the given color, and sets the icon color to the given color unless `icon-color` is also used. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color-or-map)` | If a color is passed, sets the default outline color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web 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/density":"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/button_15.0.0-canary.576d3d2c8.0_1684202408884_0.8098820348176332","host":"s3://npm-registry-packages"}},"15.0.0-canary.19bb36a46.0":{"name":"@material/button","version":"15.0.0-canary.19bb36a46.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"21d6c8a531632498d68821628e18fd089c8f2d0d","tarball":"https://registry.npmjs.org/@material/button/-/button-15.0.0-canary.19bb36a46.0.tgz","fileCount":40,"integrity":"sha512-Wc6iPuM56rxPQzlgM6uRCq/mksbwqIdGWwQcT4s/BHzI5OA/C7qdG24iVmPjRvoY8igfTBroOH71hscY1YoWuQ==","signatures":[{"sig":"MEUCIQDxZ2QqqZpGUr8gUwabI4QBVpwsKcvZYqJdIyW+XSuakAIgP2UTG6AeTlzfUrXJCIaSNt8O7DavCuhH8iVONWrq9NI=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":649726},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button/styles\";\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nThe `mdc-button__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused button.\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.**\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n**Note: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.**\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button--icon-leading` | Optional. Styles a button with a leading icon.\n`mdc-button--icon-trailing` | Optional. Styles a button with a trailing icon.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n`mdc-button__focus-ring` | Recommended. Indicates the element which shows the high contrast mode focus ring styling.\n\n**Note: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommend always including it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color-or-map)` | If a color is passed, sets the default container fill color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`icon-color($color-or-map)` | If a color is passed, sets the default icon color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`ink-color($color-or-map)` | If a color is passed, sets the default ink color to the given color, and sets the icon color to the given color unless `icon-color` is also used. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color-or-map)` | If a color is passed, sets the default outline color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web 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/density":"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/button_15.0.0-canary.19bb36a46.0_1684266849281_0.549547839858874","host":"s3://npm-registry-packages"}},"15.0.0-canary.aa5ac7fe5.0":{"name":"@material/button","version":"15.0.0-canary.aa5ac7fe5.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"bfadfedfc950c9804247d75c618ac9f2b50c5348","tarball":"https://registry.npmjs.org/@material/button/-/button-15.0.0-canary.aa5ac7fe5.0.tgz","fileCount":40,"integrity":"sha512-M8ijsCMPya2mLU1iEcZ/lyIOGtNOr+Fy/mJeEKhjjSAkrFh2sOGNyRwbKoPA4IthhxnBajq9hDfpST9ao1wxQA==","signatures":[{"sig":"MEQCIEvVbWweKxPsVIgvakw6AnD1uHiIab8AadqqPB49RNxVAiAHMdQqO2k+vjihubPTn7t/F6UL/W/waGtDr41psP23iQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":649726},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button/styles\";\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nThe `mdc-button__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused button.\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.**\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n**Note: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.**\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button--icon-leading` | Optional. Styles a button with a leading icon.\n`mdc-button--icon-trailing` | Optional. Styles a button with a trailing icon.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n`mdc-button__focus-ring` | Recommended. Indicates the element which shows the high contrast mode focus ring styling.\n\n**Note: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommend always including it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color-or-map)` | If a color is passed, sets the default container fill color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`icon-color($color-or-map)` | If a color is passed, sets the default icon color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`ink-color($color-or-map)` | If a color is passed, sets the default ink color to the given color, and sets the icon color to the given color unless `icon-color` is also used. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color-or-map)` | If a color is passed, sets the default outline color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web 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/density":"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/button_15.0.0-canary.aa5ac7fe5.0_1684776350965_0.5154029848102126","host":"s3://npm-registry-packages"}},"15.0.0-canary.90291f2e2.0":{"name":"@material/button","version":"15.0.0-canary.90291f2e2.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"1760fa368b3e787c8ca0a2d4133016e7c2e8bc0d","tarball":"https://registry.npmjs.org/@material/button/-/button-15.0.0-canary.90291f2e2.0.tgz","fileCount":40,"integrity":"sha512-m3YqCh33kcPGYehCKviDy7RxQIEM2m8Exo6AswPPsxd95jSN3rAeF+pXopoXW5QTOqyKHqHymTKTRYYvwvZHYg==","signatures":[{"sig":"MEQCIEaHlsnvvfBRaVULRcqclZbwqMYRaO2jYUovpqKaiYX2AiAZp62Jstgv6ZSn3bpIVX5GovBMgjwzK92zZTt6RLd/TA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":649726},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button/styles\";\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nThe `mdc-button__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused button.\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.**\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n**Note: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.**\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button--icon-leading` | Optional. Styles a button with a leading icon.\n`mdc-button--icon-trailing` | Optional. Styles a button with a trailing icon.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n`mdc-button__focus-ring` | Recommended. Indicates the element which shows the high contrast mode focus ring styling.\n\n**Note: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommend always including it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color-or-map)` | If a color is passed, sets the default container fill color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`icon-color($color-or-map)` | If a color is passed, sets the default icon color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`ink-color($color-or-map)` | If a color is passed, sets the default ink color to the given color, and sets the icon color to the given color unless `icon-color` is also used. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color-or-map)` | If a color is passed, sets the default outline color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web 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/density":"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/button_15.0.0-canary.90291f2e2.0_1684863767218_0.7291264153925106","host":"s3://npm-registry-packages"}},"15.0.0-canary.446734f27.0":{"name":"@material/button","version":"15.0.0-canary.446734f27.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"94ae411c6ef5167d44253b5bad4a8d8c4edd9f83","tarball":"https://registry.npmjs.org/@material/button/-/button-15.0.0-canary.446734f27.0.tgz","fileCount":40,"integrity":"sha512-KsgPe7JJiSmDt4hbVlJ6T6AHZAwFSqOWnJXbTLmtj5gjmY4b4OSGKoqjTbmYgPLllQBbTy3B86LUSZWKnAau9g==","signatures":[{"sig":"MEUCIDVnxjoDJ9z7VxtQTqg9xYfS3Tw7v1Da6WC3yTKBSwC2AiEAg8xqgppgAlze90SZPRrZnlxcZaSs2rTpDaOxvrV8Vmk=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":649726},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button/styles\";\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nThe `mdc-button__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused button.\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.**\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n**Note: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.**\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button--icon-leading` | Optional. Styles a button with a leading icon.\n`mdc-button--icon-trailing` | Optional. Styles a button with a trailing icon.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n`mdc-button__focus-ring` | Recommended. Indicates the element which shows the high contrast mode focus ring styling.\n\n**Note: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommend always including it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color-or-map)` | If a color is passed, sets the default container fill color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`icon-color($color-or-map)` | If a color is passed, sets the default icon color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`ink-color($color-or-map)` | If a color is passed, sets the default ink color to the given color, and sets the icon color to the given color unless `icon-color` is also used. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color-or-map)` | If a color is passed, sets the default outline color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web 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/density":"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/button_15.0.0-canary.446734f27.0_1685483302226_0.6688395972704853","host":"s3://npm-registry-packages"}},"15.0.0-canary.19de312d8.0":{"name":"@material/button","version":"15.0.0-canary.19de312d8.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"4a393704c980f615f258c1ab02389084d68a7430","tarball":"https://registry.npmjs.org/@material/button/-/button-15.0.0-canary.19de312d8.0.tgz","fileCount":40,"integrity":"sha512-vO8s+emy33zo3L+HPxpMZRHXEeNrpmTRRzy07zKkeEiRWtVYUK8AEcLwoKdphKylQSiM7QitQorzAdTi2v2uTg==","signatures":[{"sig":"MEUCIQDI6kQ/NdcMi45QBVrF/3mu3+eyptasWUvv6hpkV2yaAAIgbeNHxp8J9Ln6pDu242JurToQZkjWahHK5ei7Chuk5Jw=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":649726},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button/styles\";\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nThe `mdc-button__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused button.\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.**\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n**Note: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.**\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button--icon-leading` | Optional. Styles a button with a leading icon.\n`mdc-button--icon-trailing` | Optional. Styles a button with a trailing icon.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n`mdc-button__focus-ring` | Recommended. Indicates the element which shows the high contrast mode focus ring styling.\n\n**Note: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommend always including it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color-or-map)` | If a color is passed, sets the default container fill color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`icon-color($color-or-map)` | If a color is passed, sets the default icon color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`ink-color($color-or-map)` | If a color is passed, sets the default ink color to the given color, and sets the icon color to the given color unless `icon-color` is also used. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color-or-map)` | If a color is passed, sets the default outline color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web 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/density":"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/button_15.0.0-canary.19de312d8.0_1686071911206_0.47622701892407027","host":"s3://npm-registry-packages"}},"15.0.0-canary.6081d829b.0":{"name":"@material/button","version":"15.0.0-canary.6081d829b.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"d09db8d5dd411454d6e6d475ee2f5b99b819d39a","tarball":"https://registry.npmjs.org/@material/button/-/button-15.0.0-canary.6081d829b.0.tgz","fileCount":40,"integrity":"sha512-4O0Y+4c6Cm4ZNJiutnEXczZToWqofW7Oz6C+I8lfJJreNNmR0KIrsGO87cUWfJ0Jmg+GEqYBlU6BMXlA7nXQCQ==","signatures":[{"sig":"MEQCIAxtDCFpF3odx4fwbL2bQQrkSfFITV8FHNPWEBOYPDERAiBvLrmHGiBptqvUYsmH51zRjZ/SoM/qfLvVZq5pyRs0Pw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":649726},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button/styles\";\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nThe `mdc-button__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused button.\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.**\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n**Note: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.**\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button--icon-leading` | Optional. Styles a button with a leading icon.\n`mdc-button--icon-trailing` | Optional. Styles a button with a trailing icon.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n`mdc-button__focus-ring` | Recommended. Indicates the element which shows the high contrast mode focus ring styling.\n\n**Note: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommend always including it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color-or-map)` | If a color is passed, sets the default container fill color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`icon-color($color-or-map)` | If a color is passed, sets the default icon color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`ink-color($color-or-map)` | If a color is passed, sets the default ink color to the given color, and sets the icon color to the given color unless `icon-color` is also used. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color-or-map)` | If a color is passed, sets the default outline color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web 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/density":"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/button_15.0.0-canary.6081d829b.0_1686100448028_0.12341624728892264","host":"s3://npm-registry-packages"}},"15.0.0-canary.b26c34a68.0":{"name":"@material/button","version":"15.0.0-canary.b26c34a68.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"81af5d1270eec7b53a32ae5877d0b5c7ff813269","tarball":"https://registry.npmjs.org/@material/button/-/button-15.0.0-canary.b26c34a68.0.tgz","fileCount":40,"integrity":"sha512-RJwrQpTZeOsfioHIjxLxFxL4c2DmTGIVwyoSjRFiNrDyCt+CPuN3I5QNMOVmrFCbhEiXzVQFbawRlK4YUUl3kA==","signatures":[{"sig":"MEUCIQD0EEvly4p849S7kN71ikQRY+frJ1WFEk+J2cGHGcUVfQIgDylpsIpN9WwNrz0rV2DIAGimAAST4GArOgnXncr1UKg=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":649726},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button/styles\";\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nThe `mdc-button__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused button.\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.**\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n**Note: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.**\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button--icon-leading` | Optional. Styles a button with a leading icon.\n`mdc-button--icon-trailing` | Optional. Styles a button with a trailing icon.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n`mdc-button__focus-ring` | Recommended. Indicates the element which shows the high contrast mode focus ring styling.\n\n**Note: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommend always including it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color-or-map)` | If a color is passed, sets the default container fill color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`icon-color($color-or-map)` | If a color is passed, sets the default icon color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`ink-color($color-or-map)` | If a color is passed, sets the default ink color to the given color, and sets the icon color to the given color unless `icon-color` is also used. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color-or-map)` | If a color is passed, sets the default outline color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web 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/density":"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/button_15.0.0-canary.b26c34a68.0_1686169101202_0.8517074150686692","host":"s3://npm-registry-packages"}},"15.0.0-canary.4fe911371.0":{"name":"@material/button","version":"15.0.0-canary.4fe911371.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"f898c68791c25b8fa16bc4b19369bce45ed60bf4","tarball":"https://registry.npmjs.org/@material/button/-/button-15.0.0-canary.4fe911371.0.tgz","fileCount":40,"integrity":"sha512-wh6+i+sj5k0Gae6QjcH5qDjA+WmGDdaNITTStMySNDGIr/z+q6BKtVHoPnoNLi4RtwVNZlkANsBGwbVEjlg/Lg==","signatures":[{"sig":"MEYCIQCfcfUAbbW91n1IHLlr+OXC4D/FxZ88aYfWYrGu/ZLYkAIhAOkmHJabdCDpkI6PJW0O7QpEriZQqjyFB1zbSAtZOh2J","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":649726},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button/styles\";\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nThe `mdc-button__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused button.\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.**\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n**Note: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.**\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button--icon-leading` | Optional. Styles a button with a leading icon.\n`mdc-button--icon-trailing` | Optional. Styles a button with a trailing icon.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n`mdc-button__focus-ring` | Recommended. Indicates the element which shows the high contrast mode focus ring styling.\n\n**Note: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommend always including it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color-or-map)` | If a color is passed, sets the default container fill color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`icon-color($color-or-map)` | If a color is passed, sets the default icon color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`ink-color($color-or-map)` | If a color is passed, sets the default ink color to the given color, and sets the icon color to the given color unless `icon-color` is also used. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color-or-map)` | If a color is passed, sets the default outline color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web 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/density":"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/button_15.0.0-canary.4fe911371.0_1686179166973_0.8268453730513472","host":"s3://npm-registry-packages"}},"15.0.0-canary.a9ff9866f.0":{"name":"@material/button","version":"15.0.0-canary.a9ff9866f.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"f137d67d966f1fc6661e85e580c9a7dfec653f4f","tarball":"https://registry.npmjs.org/@material/button/-/button-15.0.0-canary.a9ff9866f.0.tgz","fileCount":40,"integrity":"sha512-YljSjrNTWzlqyEdNGjD+ruR2AYNwTXCZkcP1UhtPfenIwHNANOX1tKo9aLaJxkVHaSvE7idxy/ttMgOVdH5YLA==","signatures":[{"sig":"MEUCIQDjG5uIwFTN4wBFNa5rqPSHbMi+FDvBjExncqOGYNypRQIgTC5p+tJaLROsSzsD7FD/45nEFpmhuEHZdY7oVWCeEk0=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":649726},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button/styles\";\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nThe `mdc-button__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused button.\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.**\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n**Note: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.**\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button--icon-leading` | Optional. Styles a button with a leading icon.\n`mdc-button--icon-trailing` | Optional. Styles a button with a trailing icon.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n`mdc-button__focus-ring` | Recommended. Indicates the element which shows the high contrast mode focus ring styling.\n\n**Note: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommend always including it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color-or-map)` | If a color is passed, sets the default container fill color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`icon-color($color-or-map)` | If a color is passed, sets the default icon color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`ink-color($color-or-map)` | If a color is passed, sets the default ink color to the given color, and sets the icon color to the given color unless `icon-color` is also used. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color-or-map)` | If a color is passed, sets the default outline color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web 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/density":"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/button_15.0.0-canary.a9ff9866f.0_1686656302078_0.5144037518716242","host":"s3://npm-registry-packages"}},"15.0.0-canary.b994146f6.0":{"name":"@material/button","version":"15.0.0-canary.b994146f6.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"d2b57d4417b88c3eb42551806df5ef8eab2e8a0f","tarball":"https://registry.npmjs.org/@material/button/-/button-15.0.0-canary.b994146f6.0.tgz","fileCount":40,"integrity":"sha512-SMyqtsvJuCqpXBz2JgciuR6wddNJSGpTXUFxmLbGluBy5/hHm06JWlOFcUOxGDv46OdRGGrRfkg6A9JtvtsJsw==","signatures":[{"sig":"MEUCIEnJaUv3jYs+845JkCruJSDRN38MC/RLCScybN8goGFNAiEAy9mlHvW2fo7f+M+eaYsb/Xf1SHXGm0oN0wuC10F1rpc=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":649726},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button/styles\";\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nThe `mdc-button__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused button.\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.**\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n**Note: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.**\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button--icon-leading` | Optional. Styles a button with a leading icon.\n`mdc-button--icon-trailing` | Optional. Styles a button with a trailing icon.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n`mdc-button__focus-ring` | Recommended. Indicates the element which shows the high contrast mode focus ring styling.\n\n**Note: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommend always including it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color-or-map)` | If a color is passed, sets the default container fill color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`icon-color($color-or-map)` | If a color is passed, sets the default icon color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`ink-color($color-or-map)` | If a color is passed, sets the default ink color to the given color, and sets the icon color to the given color unless `icon-color` is also used. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color-or-map)` | If a color is passed, sets the default outline color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web 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/density":"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/button_15.0.0-canary.b994146f6.0_1686776636493_0.16321315994670127","host":"s3://npm-registry-packages"}},"15.0.0-canary.1fb4b1a06.0":{"name":"@material/button","version":"15.0.0-canary.1fb4b1a06.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"ffd19c25da5826ff298bfcbdcf8827cecd1a221f","tarball":"https://registry.npmjs.org/@material/button/-/button-15.0.0-canary.1fb4b1a06.0.tgz","fileCount":40,"integrity":"sha512-IoZPM2cQrKSzMmvbWglQMj1Tf/s78tdOAMXwN6QwXmAev5BLjMHF/FN6UkDI1PVHI8dx3CJrxuGmZRyOtE2jDg==","signatures":[{"sig":"MEYCIQCfwoXHfYSLFYKdKQQVTPtBF7Yc8KlrI3Jx3quVf+mu1AIhAKyRc0TyRfTDI1Sc5aic5v9kBUOm8EcXeDgV3kzoecFu","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":649726},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button/styles\";\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nThe `mdc-button__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused button.\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.**\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n**Note: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.**\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button--icon-leading` | Optional. Styles a button with a leading icon.\n`mdc-button--icon-trailing` | Optional. Styles a button with a trailing icon.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n`mdc-button__focus-ring` | Recommended. Indicates the element which shows the high contrast mode focus ring styling.\n\n**Note: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommend always including it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color-or-map)` | If a color is passed, sets the default container fill color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`icon-color($color-or-map)` | If a color is passed, sets the default icon color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`ink-color($color-or-map)` | If a color is passed, sets the default ink color to the given color, and sets the icon color to the given color unless `icon-color` is also used. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color-or-map)` | If a color is passed, sets the default outline color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web 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/density":"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/button_15.0.0-canary.1fb4b1a06.0_1687892239373_0.5094249579260439","host":"s3://npm-registry-packages"}},"15.0.0-canary.c64a2776e.0":{"name":"@material/button","version":"15.0.0-canary.c64a2776e.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"d441081412050fdd893f21de860b76ef8e320457","tarball":"https://registry.npmjs.org/@material/button/-/button-15.0.0-canary.c64a2776e.0.tgz","fileCount":40,"integrity":"sha512-IqF4XAoTfLPatWcZmCSuDrn05yyGLD+r/OuGZ3EUsainWbZVxchocZhFqrac+4kZveEEBKQHpux9LSRom/Gpjw==","signatures":[{"sig":"MEQCICcqmlrxkf6yrU0zboefAWf+2SsEr7okO03Z74/QNeAfAiA3QMMHJx1aRzKxhNf4Ob27cIEVx74O7OUXbbwbSwiz8Q==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":649726},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button/styles\";\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nThe `mdc-button__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused button.\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.**\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n**Note: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.**\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button--icon-leading` | Optional. Styles a button with a leading icon.\n`mdc-button--icon-trailing` | Optional. Styles a button with a trailing icon.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n`mdc-button__focus-ring` | Recommended. Indicates the element which shows the high contrast mode focus ring styling.\n\n**Note: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommend always including it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color-or-map)` | If a color is passed, sets the default container fill color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`icon-color($color-or-map)` | If a color is passed, sets the default icon color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`ink-color($color-or-map)` | If a color is passed, sets the default ink color to the given color, and sets the icon color to the given color unless `icon-color` is also used. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color-or-map)` | If a color is passed, sets the default outline color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web 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/density":"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/button_15.0.0-canary.c64a2776e.0_1687897006740_0.2377749031729497","host":"s3://npm-registry-packages"}},"15.0.0-canary.b05d9eb7c.0":{"name":"@material/button","version":"15.0.0-canary.b05d9eb7c.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"33bc9deef475c2f8b42d1ce31fc2e7a819f4410e","tarball":"https://registry.npmjs.org/@material/button/-/button-15.0.0-canary.b05d9eb7c.0.tgz","fileCount":40,"integrity":"sha512-IXADdL0yi0UZ3ZXxHC2kMPaS2XW3obl/WoU2KyX9yc3zGyVvPHY2jBA6coeIr14FPVnwBYXrTbSoDfbc5v+nig==","signatures":[{"sig":"MEQCIB/xZ0ic0dxvrPEIxWPKqiNzYXek0D+/gEUcXLTqDcUKAiAh1jCIVYjPXCIMiS5KWaeIk/YOIyUWSj9bDVSEc1lDTQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":649726},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button/styles\";\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nThe `mdc-button__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused button.\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.**\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n**Note: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.**\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button--icon-leading` | Optional. Styles a button with a leading icon.\n`mdc-button--icon-trailing` | Optional. Styles a button with a trailing icon.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n`mdc-button__focus-ring` | Recommended. Indicates the element which shows the high contrast mode focus ring styling.\n\n**Note: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommend always including it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color-or-map)` | If a color is passed, sets the default container fill color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`icon-color($color-or-map)` | If a color is passed, sets the default icon color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`ink-color($color-or-map)` | If a color is passed, sets the default ink color to the given color, and sets the icon color to the given color unless `icon-color` is also used. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color-or-map)` | If a color is passed, sets the default outline color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web 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/density":"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/button_15.0.0-canary.b05d9eb7c.0_1688055831008_0.7627555577824112","host":"s3://npm-registry-packages"}},"15.0.0-canary.2a9697dc5.0":{"name":"@material/button","version":"15.0.0-canary.2a9697dc5.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"ba123e36d855dab10575663a41d298f5b5b7dee7","tarball":"https://registry.npmjs.org/@material/button/-/button-15.0.0-canary.2a9697dc5.0.tgz","fileCount":40,"integrity":"sha512-xEjTz4Nc/qiFdLMcnesD+YBQcNtJZF46L46jLyj/DI8krjOTWs4SfNN609QPTyXLp8KzRKQPPLfSIeOfaTF35w==","signatures":[{"sig":"MEQCIHsQsaez+FKHI0NA8mCiwFNUhj0zItZUTm8PRU/tgBnxAiB9/qLvPr8GmlT+JYF2cRQp3+HNKa/BZQHIHqmMJbxiKA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":649726},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button/styles\";\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nThe `mdc-button__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused button.\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.**\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n**Note: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.**\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button--icon-leading` | Optional. Styles a button with a leading icon.\n`mdc-button--icon-trailing` | Optional. Styles a button with a trailing icon.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n`mdc-button__focus-ring` | Recommended. Indicates the element which shows the high contrast mode focus ring styling.\n\n**Note: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommend always including it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color-or-map)` | If a color is passed, sets the default container fill color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`icon-color($color-or-map)` | If a color is passed, sets the default icon color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`ink-color($color-or-map)` | If a color is passed, sets the default ink color to the given color, and sets the icon color to the given color unless `icon-color` is also used. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color-or-map)` | If a color is passed, sets the default outline color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web 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/density":"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/button_15.0.0-canary.2a9697dc5.0_1688163242365_0.9845030250586337","host":"s3://npm-registry-packages"}},"15.0.0-canary.0c52adeab.0":{"name":"@material/button","version":"15.0.0-canary.0c52adeab.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"f585f1115ff980777e9383fd59177044d46c4ef1","tarball":"https://registry.npmjs.org/@material/button/-/button-15.0.0-canary.0c52adeab.0.tgz","fileCount":40,"integrity":"sha512-kxRQkNhbNttLsaHvYcvUBiS0Ry+or8GoatJRpBXH0T/ckFASiI7N6QGHRApH36o37zrt2XTczXdNFCwcFH7dNA==","signatures":[{"sig":"MEUCIQC2OYDXRQsiHkPJTJq95l6HQL4pVWdZZh22+9MRM3hFXwIgFyujjXaIFgdqVBkKqNm+sjsLGtaHm0vLDLBs9B3+PLA=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":649726},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button/styles\";\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nThe `mdc-button__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused button.\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.**\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n**Note: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.**\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button--icon-leading` | Optional. Styles a button with a leading icon.\n`mdc-button--icon-trailing` | Optional. Styles a button with a trailing icon.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n`mdc-button__focus-ring` | Recommended. Indicates the element which shows the high contrast mode focus ring styling.\n\n**Note: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommend always including it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color-or-map)` | If a color is passed, sets the default container fill color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`icon-color($color-or-map)` | If a color is passed, sets the default icon color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`ink-color($color-or-map)` | If a color is passed, sets the default ink color to the given color, and sets the icon color to the given color unless `icon-color` is also used. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color-or-map)` | If a color is passed, sets the default outline color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web 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/density":"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/button_15.0.0-canary.0c52adeab.0_1688574357250_0.5246991700701111","host":"s3://npm-registry-packages"}},"15.0.0-canary.83355c322.0":{"name":"@material/button","version":"15.0.0-canary.83355c322.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"c2eb8965b39e59ee06dcdfaeac7b4a911501a52a","tarball":"https://registry.npmjs.org/@material/button/-/button-15.0.0-canary.83355c322.0.tgz","fileCount":40,"integrity":"sha512-/EXNsI4CcB3NsHsqBkW/NP3MBdKK4e3ZnmUmFZox1GDXNJLe304iQARPH6PHbF/rkSfkLlI66ba8IL/iyEw+2g==","signatures":[{"sig":"MEUCIQC6jBDpKbstyfuhnOyRxLP7Qerd4poNTnzQ5aMKYDcxOgIgMSE5QcsKxkVks7j4tJLvvTXRsTeyl//+KKiBlV0Iyrg=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":649726},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button/styles\";\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nThe `mdc-button__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused button.\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.**\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n**Note: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.**\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button--icon-leading` | Optional. Styles a button with a leading icon.\n`mdc-button--icon-trailing` | Optional. Styles a button with a trailing icon.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n`mdc-button__focus-ring` | Recommended. Indicates the element which shows the high contrast mode focus ring styling.\n\n**Note: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommend always including it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color-or-map)` | If a color is passed, sets the default container fill color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`icon-color($color-or-map)` | If a color is passed, sets the default icon color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`ink-color($color-or-map)` | If a color is passed, sets the default ink color to the given color, and sets the icon color to the given color unless `icon-color` is also used. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color-or-map)` | If a color is passed, sets the default outline color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web 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/density":"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/button_15.0.0-canary.83355c322.0_1689001545656_0.9427971529061188","host":"s3://npm-registry-packages"}},"15.0.0-canary.bc9ae6c9c.0":{"name":"@material/button","version":"15.0.0-canary.bc9ae6c9c.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"adb43ffb0bf57cd634a0c31b6a5f26123e78c2c8","tarball":"https://registry.npmjs.org/@material/button/-/button-15.0.0-canary.bc9ae6c9c.0.tgz","fileCount":40,"integrity":"sha512-3AQgwrPZCTWHDJvwgKq7Cj+BurQ4wTjDdGL+FEnIGUAjJDskwi1yzx5tW2Wf/NxIi7IoPFyOY3UB41jwMiOrnw==","signatures":[{"sig":"MEUCIQDDWVIoqVSwhAyIY3cXm5pqjvtEPHNcct03EgJrs5lulAIgL+9JXnXf8KTCQJdupg9C1G/5Y635q+N48uzECNxM0vE=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":649726},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button/styles\";\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nThe `mdc-button__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused button.\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.**\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n**Note: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.**\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button--icon-leading` | Optional. Styles a button with a leading icon.\n`mdc-button--icon-trailing` | Optional. Styles a button with a trailing icon.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n`mdc-button__focus-ring` | Recommended. Indicates the element which shows the high contrast mode focus ring styling.\n\n**Note: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommend always including it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color-or-map)` | If a color is passed, sets the default container fill color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`icon-color($color-or-map)` | If a color is passed, sets the default icon color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`ink-color($color-or-map)` | If a color is passed, sets the default ink color to the given color, and sets the icon color to the given color unless `icon-color` is also used. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color-or-map)` | If a color is passed, sets the default outline color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web 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/density":"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/button_15.0.0-canary.bc9ae6c9c.0_1691097664048_0.7457127238125891","host":"s3://npm-registry-packages"}},"15.0.0-canary.3c44cd956.0":{"name":"@material/button","version":"15.0.0-canary.3c44cd956.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"5eed2ac2217cae47ee647296c811a2562158e680","tarball":"https://registry.npmjs.org/@material/button/-/button-15.0.0-canary.3c44cd956.0.tgz","fileCount":40,"integrity":"sha512-IKU0ljThZf7d0ds0c3PraTAw1dnREbSjD5akUYPOuhNjrGMXbgdzUFXBlLK7eeAvHOhxXpH+2N93jEfTsKhAvw==","signatures":[{"sig":"MEYCIQDJ2L99txXs0cMgz60bT/vNcmr8F2ZY3bpiP9HT/z644gIhAMtYHiT63vOduH2n3bQFSvSoSfpgpzWw0bfRk0UG3Jln","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":649726},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button/styles\";\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nThe `mdc-button__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused button.\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.**\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n**Note: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.**\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button--icon-leading` | Optional. Styles a button with a leading icon.\n`mdc-button--icon-trailing` | Optional. Styles a button with a trailing icon.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n`mdc-button__focus-ring` | Recommended. Indicates the element which shows the high contrast mode focus ring styling.\n\n**Note: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommend always including it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color-or-map)` | If a color is passed, sets the default container fill color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`icon-color($color-or-map)` | If a color is passed, sets the default icon color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`ink-color($color-or-map)` | If a color is passed, sets the default ink color to the given color, and sets the icon color to the given color unless `icon-color` is also used. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color-or-map)` | If a color is passed, sets the default outline color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web 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/density":"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/button_15.0.0-canary.3c44cd956.0_1691430446954_0.43412092985544337","host":"s3://npm-registry-packages"}},"15.0.0-canary.02702296e.0":{"name":"@material/button","version":"15.0.0-canary.02702296e.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"dcb69f89c9a5ef7c2362984c6b90931cd1dbb8b7","tarball":"https://registry.npmjs.org/@material/button/-/button-15.0.0-canary.02702296e.0.tgz","fileCount":40,"integrity":"sha512-DazsU/Zi3/gj04EPLkbBZ4qvpBPht/KEzXqv2oWI+IQii4jFhqvF1JVcTx5ZcHZREpIaS+7f8nCwBIo7N+HpoQ==","signatures":[{"sig":"MEUCIQCxc7Dqa2Hj9Sz2gSeo9q2GOijvIkCxE8sICRz4IttYmQIgfOlB/H0Tmq7jJgtmI35tJ7lBFr0HdRpgQ16UdXGbtos=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":649726},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button/styles\";\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nThe `mdc-button__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused button.\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.**\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n**Note: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.**\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button--icon-leading` | Optional. Styles a button with a leading icon.\n`mdc-button--icon-trailing` | Optional. Styles a button with a trailing icon.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n`mdc-button__focus-ring` | Recommended. Indicates the element which shows the high contrast mode focus ring styling.\n\n**Note: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommend always including it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color-or-map)` | If a color is passed, sets the default container fill color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`icon-color($color-or-map)` | If a color is passed, sets the default icon color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`ink-color($color-or-map)` | If a color is passed, sets the default ink color to the given color, and sets the icon color to the given color unless `icon-color` is also used. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color-or-map)` | If a color is passed, sets the default outline color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web 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/density":"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/button_15.0.0-canary.02702296e.0_1692965106661_0.00893218039596988","host":"s3://npm-registry-packages"}},"15.0.0-canary.872b65832.0":{"name":"@material/button","version":"15.0.0-canary.872b65832.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"3b1f7d17ef9443a1f9de0d9f8a076397d663765d","tarball":"https://registry.npmjs.org/@material/button/-/button-15.0.0-canary.872b65832.0.tgz","fileCount":40,"integrity":"sha512-zCiX+x6ltapGKtSU31QE03OAYW4UWXKsv+MjznvtUecAbpG0Yh4JZkZbOOLVmWNMMmCV11jY3cZTgN+Fo5kPng==","signatures":[{"sig":"MEUCIFTS8qplrRkjLngg1t0gQ+dzcOcSlpTuTWTfhKmeMsYSAiEAhz47j2tqIjGximcAZIm2zpz+unRW8omHlsW95U6IhsM=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":649726},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button/styles\";\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nThe `mdc-button__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused button.\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.**\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n**Note: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.**\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button--icon-leading` | Optional. Styles a button with a leading icon.\n`mdc-button--icon-trailing` | Optional. Styles a button with a trailing icon.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n`mdc-button__focus-ring` | Recommended. Indicates the element which shows the high contrast mode focus ring styling.\n\n**Note: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommend always including it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color-or-map)` | If a color is passed, sets the default container fill color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`icon-color($color-or-map)` | If a color is passed, sets the default icon color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`ink-color($color-or-map)` | If a color is passed, sets the default ink color to the given color, and sets the icon color to the given color unless `icon-color` is also used. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color-or-map)` | If a color is passed, sets the default outline color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web 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/density":"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/button_15.0.0-canary.872b65832.0_1693397609406_0.6933470655468494","host":"s3://npm-registry-packages"}},"15.0.0-canary.89b2e4122.0":{"name":"@material/button","version":"15.0.0-canary.89b2e4122.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"a76a94e18bf624b15b82971026f0082f9fe21d1a","tarball":"https://registry.npmjs.org/@material/button/-/button-15.0.0-canary.89b2e4122.0.tgz","fileCount":40,"integrity":"sha512-mMfU7TpHT0sYxA2jhQjVx1H++ChlBGIX5KAlGoNSYtriF+vZiIpOdyQfCwJIgwXdPMSfFfcFUKmYSyR9e+YB6g==","signatures":[{"sig":"MEUCIG8MeNY5hyL/RVeoPvjICUqZ6HbBzx2XDkuOCSbD8tyNAiEAxv9hJSgqFZ4MsKbc+KiZ35oE1Bg1hBBgU/OaY+R/wBM=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":649726},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button/styles\";\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nThe `mdc-button__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused button.\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.**\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n**Note: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.**\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button--icon-leading` | Optional. Styles a button with a leading icon.\n`mdc-button--icon-trailing` | Optional. Styles a button with a trailing icon.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n`mdc-button__focus-ring` | Recommended. Indicates the element which shows the high contrast mode focus ring styling.\n\n**Note: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommend always including it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color-or-map)` | If a color is passed, sets the default container fill color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`icon-color($color-or-map)` | If a color is passed, sets the default icon color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`ink-color($color-or-map)` | If a color is passed, sets the default ink color to the given color, and sets the icon color to the given color unless `icon-color` is also used. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color-or-map)` | If a color is passed, sets the default outline color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web 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/density":"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/button_15.0.0-canary.89b2e4122.0_1693498017078_0.7152397287336523","host":"s3://npm-registry-packages"}},"15.0.0-canary.7a3942e7a.0":{"name":"@material/button","version":"15.0.0-canary.7a3942e7a.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"2dbf7e00d2c54ccf562d9e9c2425ec4c140b2dce","tarball":"https://registry.npmjs.org/@material/button/-/button-15.0.0-canary.7a3942e7a.0.tgz","fileCount":40,"integrity":"sha512-t1ouxo+nomL13RBh/rygOYMpR647FGJ9ZCa4k7KRQk6OZUJEcBPnu9ES8b5r0iogJ4vVqZpM/4VzHMDRWEeFjw==","signatures":[{"sig":"MEQCIDmJmB3jO75EXG3d+h77Zc13DtIxH3NbkvLiDERODqZGAiA7CyQc01/nk4HZFx1GIixVsWG0+oOrLwi/m4wafggoeg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":651075},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button/styles\";\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nThe `mdc-button__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused button.\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.**\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n**Note: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.**\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button--icon-leading` | Optional. Styles a button with a leading icon.\n`mdc-button--icon-trailing` | Optional. Styles a button with a trailing icon.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n`mdc-button__focus-ring` | Recommended. Indicates the element which shows the high contrast mode focus ring styling.\n\n**Note: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommend always including it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color-or-map)` | If a color is passed, sets the default container fill color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`icon-color($color-or-map)` | If a color is passed, sets the default icon color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`ink-color($color-or-map)` | If a color is passed, sets the default ink color to the given color, and sets the icon color to the given color unless `icon-color` is also used. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color-or-map)` | If a color is passed, sets the default outline color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web 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/density":"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/button_15.0.0-canary.7a3942e7a.0_1693507193454_0.04855887484389876","host":"s3://npm-registry-packages"}},"15.0.0-canary.54feb3020.0":{"name":"@material/button","version":"15.0.0-canary.54feb3020.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"c7ed00e140154f7e63af06c8fcc6dcd38c4bfb34","tarball":"https://registry.npmjs.org/@material/button/-/button-15.0.0-canary.54feb3020.0.tgz","fileCount":40,"integrity":"sha512-2Nht1trjgDYZMz0rbAB7oLjgEGIrredZ5BzWyw3Af+Ehz2HBjLaoQ3qZsv08UFYoz74qGKCXFvm2q8DEvxkEnQ==","signatures":[{"sig":"MEUCIA05Qy0laU5k6Vb5Ou9fwIY2DYDg7MZnPJ5+3t0VYPc1AiEAr5xBWWCpQ5Tio3Qk7RiPhIH9O4wRGQSoSOU5soN7jMQ=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":659498},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button/styles\";\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nThe `mdc-button__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused button.\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.**\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n**Note: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.**\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button--icon-leading` | Optional. Styles a button with a leading icon.\n`mdc-button--icon-trailing` | Optional. Styles a button with a trailing icon.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n`mdc-button__focus-ring` | Recommended. Indicates the element which shows the high contrast mode focus ring styling.\n\n**Note: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommend always including it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color-or-map)` | If a color is passed, sets the default container fill color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`icon-color($color-or-map)` | If a color is passed, sets the default icon color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`ink-color($color-or-map)` | If a color is passed, sets the default ink color to the given color, and sets the icon color to the given color unless `icon-color` is also used. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color-or-map)` | If a color is passed, sets the default outline color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web 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/density":"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/button_15.0.0-canary.54feb3020.0_1694466314543_0.8213760711316165","host":"s3://npm-registry-packages"}},"15.0.0-canary.6cda3ce8d.0":{"name":"@material/button","version":"15.0.0-canary.6cda3ce8d.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"df26bb26d2e559913dc1f5b6cad7abc5e0abf770","tarball":"https://registry.npmjs.org/@material/button/-/button-15.0.0-canary.6cda3ce8d.0.tgz","fileCount":40,"integrity":"sha512-6sB1s2knQQBlQNam7GF/qPaiWDTWM9+95J/kwkJyqYqFHgfjTgh/7BNPRXIAuEJsdxHcfw2uL48AARC4peoPjg==","signatures":[{"sig":"MEUCIEzdqtNbNlDi2qUN8u5GMZroiZY1A7q/bZmON9KumlhLAiEAjyJSxxokJBps/76qle3pMFx7wiG47qlCLlHKBBxPPjs=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":651075},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button/styles\";\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nThe `mdc-button__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused button.\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.**\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n**Note: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.**\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button--icon-leading` | Optional. Styles a button with a leading icon.\n`mdc-button--icon-trailing` | Optional. Styles a button with a trailing icon.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n`mdc-button__focus-ring` | Recommended. Indicates the element which shows the high contrast mode focus ring styling.\n\n**Note: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommend always including it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color-or-map)` | If a color is passed, sets the default container fill color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`icon-color($color-or-map)` | If a color is passed, sets the default icon color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`ink-color($color-or-map)` | If a color is passed, sets the default ink color to the given color, and sets the icon color to the given color unless `icon-color` is also used. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color-or-map)` | If a color is passed, sets the default outline color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web 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/density":"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/button_15.0.0-canary.6cda3ce8d.0_1694483114248_0.45366064808562756","host":"s3://npm-registry-packages"}},"15.0.0-canary.205b20b36.0":{"name":"@material/button","version":"15.0.0-canary.205b20b36.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"8f7a1f7fd69cb50f406563fa8bd982448a3f9072","tarball":"https://registry.npmjs.org/@material/button/-/button-15.0.0-canary.205b20b36.0.tgz","fileCount":40,"integrity":"sha512-vpsIXYxo9T7c1UMgSLf2FxMmGwpiqoMPdZZUa5XqSFX33VufE/4RFReqPZv1FbAMamYgENRxOrGr8YurVl/AcA==","signatures":[{"sig":"MEUCIEVKhMKsv7lI0P/DPPiSlXA++bcyHXd4qn94fsE13djwAiEA/stp1Wv4xZc/T5MI069DsTRIUBYcKJN13MJ4S1nziN4=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":657376},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button/styles\";\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nThe `mdc-button__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused button.\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.**\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n**Note: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.**\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button--icon-leading` | Optional. Styles a button with a leading icon.\n`mdc-button--icon-trailing` | Optional. Styles a button with a trailing icon.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n`mdc-button__focus-ring` | Recommended. Indicates the element which shows the high contrast mode focus ring styling.\n\n**Note: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommend always including it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color-or-map)` | If a color is passed, sets the default container fill color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`icon-color($color-or-map)` | If a color is passed, sets the default icon color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`ink-color($color-or-map)` | If a color is passed, sets the default ink color to the given color, and sets the icon color to the given color unless `icon-color` is also used. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color-or-map)` | If a color is passed, sets the default outline color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web 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/density":"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/button_15.0.0-canary.205b20b36.0_1694625475854_0.3185545461276922","host":"s3://npm-registry-packages"}},"15.0.0-canary.22bf82024.0":{"name":"@material/button","version":"15.0.0-canary.22bf82024.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"9af4930f4307590b614f429e8072d04f85c53444","tarball":"https://registry.npmjs.org/@material/button/-/button-15.0.0-canary.22bf82024.0.tgz","fileCount":40,"integrity":"sha512-qVUW6dEzPp3jgCwHLs50DZycAQHIcme227ug0PT4OmbpoEERYGeSht+jfF51U596U/UW5bqiR0ZMQ+//SjlKEA==","signatures":[{"sig":"MEQCIGSwmtWbC9ss+jMhjMOcrmkfCFeZxvK7e6ZfADsztinmAiBmiKU8/Qdm7+Wrkxba1ZZPwgHO23ZeL8ExQ9Xyle3QhA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":657376},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button/styles\";\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nThe `mdc-button__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused button.\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.**\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n**Note: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.**\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button--icon-leading` | Optional. Styles a button with a leading icon.\n`mdc-button--icon-trailing` | Optional. Styles a button with a trailing icon.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n`mdc-button__focus-ring` | Recommended. Indicates the element which shows the high contrast mode focus ring styling.\n\n**Note: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommend always including it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color-or-map)` | If a color is passed, sets the default container fill color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`icon-color($color-or-map)` | If a color is passed, sets the default icon color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`ink-color($color-or-map)` | If a color is passed, sets the default ink color to the given color, and sets the icon color to the given color unless `icon-color` is also used. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color-or-map)` | If a color is passed, sets the default outline color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web 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/density":"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/button_15.0.0-canary.22bf82024.0_1695028323078_0.5141582140798089","host":"s3://npm-registry-packages"}},"15.0.0-canary.a246a4439.0":{"name":"@material/button","version":"15.0.0-canary.a246a4439.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"84676925fe6da5367b759c4ce9a585f7cbc96416","tarball":"https://registry.npmjs.org/@material/button/-/button-15.0.0-canary.a246a4439.0.tgz","fileCount":40,"integrity":"sha512-rGpVRde0Aqhv2t9QvT8Zl3HvG89BeUNPOpgfpaLBZ4SGGAO4rIrckl/eCENibKgmmdCKcYZlG9gc5abQVPfUvw==","signatures":[{"sig":"MEYCIQCYlVHd45eimJv7T0n2+o+aS1+e5WOASxPa5iqbMSxtQgIhAJYBT24KMCPvnuf+UZJtRmiHSGNKUj2Jog9/UoQN5yXE","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":657376},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button/styles\";\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nThe `mdc-button__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused button.\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.**\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n**Note: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.**\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button--icon-leading` | Optional. Styles a button with a leading icon.\n`mdc-button--icon-trailing` | Optional. Styles a button with a trailing icon.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n`mdc-button__focus-ring` | Recommended. Indicates the element which shows the high contrast mode focus ring styling.\n\n**Note: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommend always including it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color-or-map)` | If a color is passed, sets the default container fill color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`icon-color($color-or-map)` | If a color is passed, sets the default icon color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`ink-color($color-or-map)` | If a color is passed, sets the default ink color to the given color, and sets the icon color to the given color unless `icon-color` is also used. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color-or-map)` | If a color is passed, sets the default outline color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web 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/density":"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/button_15.0.0-canary.a246a4439.0_1695059169368_0.7490533264693939","host":"s3://npm-registry-packages"}},"15.0.0-canary.d153db62b.0":{"name":"@material/button","version":"15.0.0-canary.d153db62b.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"4336a3416b2e163a70578fc06911ec086f9d248a","tarball":"https://registry.npmjs.org/@material/button/-/button-15.0.0-canary.d153db62b.0.tgz","fileCount":40,"integrity":"sha512-3fJedQMrPNSw+/a2xgXpgI3gwy0O1LMaNt7Jl+ZLOFcFxJY/0uWdP+nzGYn/NotpUoFgNs8Eohubus38lJItsQ==","signatures":[{"sig":"MEYCIQD+XPXCzYsoA1aoJaaoUhf6ZRm4bZGMGec3Q6bCp1Bn9AIhAPNZACPl3xLgTcI4R29Q8QOEdHqSFGuIro300N/gVB6k","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":657376},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button/styles\";\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nThe `mdc-button__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused button.\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.**\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n**Note: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.**\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button--icon-leading` | Optional. Styles a button with a leading icon.\n`mdc-button--icon-trailing` | Optional. Styles a button with a trailing icon.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n`mdc-button__focus-ring` | Recommended. Indicates the element which shows the high contrast mode focus ring styling.\n\n**Note: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommend always including it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color-or-map)` | If a color is passed, sets the default container fill color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`icon-color($color-or-map)` | If a color is passed, sets the default icon color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`ink-color($color-or-map)` | If a color is passed, sets the default ink color to the given color, and sets the icon color to the given color unless `icon-color` is also used. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color-or-map)` | If a color is passed, sets the default outline color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web 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/density":"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/button_15.0.0-canary.d153db62b.0_1695150913532_0.7297316925572896","host":"s3://npm-registry-packages"}},"15.0.0-canary.2528c1c3b.0":{"name":"@material/button","version":"15.0.0-canary.2528c1c3b.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"955976ac7b5e5a57dfa72075b1e4af39938e7446","tarball":"https://registry.npmjs.org/@material/button/-/button-15.0.0-canary.2528c1c3b.0.tgz","fileCount":40,"integrity":"sha512-MSOQaVq8PtUWYzna7bkp76MsFqPKJkSfgA6Zi3e0skNJUwkV9D+xaBA+QGfMC4trTSv9mTZO30CU4xxQQ7qzug==","signatures":[{"sig":"MEUCIQCS4zyHxmPg7GVmpSYcKQ4l99PmuWtVGMiwo7pUKHAV4gIgF09alFob1UtE3gN1m7oLjktn3Pu/G0yLKvtOTi36tl4=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":657573},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button/styles\";\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nThe `mdc-button__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused button.\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.**\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n**Note: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.**\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button--icon-leading` | Optional. Styles a button with a leading icon.\n`mdc-button--icon-trailing` | Optional. Styles a button with a trailing icon.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n`mdc-button__focus-ring` | Recommended. Indicates the element which shows the high contrast mode focus ring styling.\n\n**Note: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommend always including it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color-or-map)` | If a color is passed, sets the default container fill color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`icon-color($color-or-map)` | If a color is passed, sets the default icon color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`ink-color($color-or-map)` | If a color is passed, sets the default ink color to the given color, and sets the icon color to the given color unless `icon-color` is also used. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color-or-map)` | If a color is passed, sets the default outline color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web 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/density":"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/button_15.0.0-canary.2528c1c3b.0_1695233197306_0.9781251853029689","host":"s3://npm-registry-packages"}},"15.0.0-canary.1728a6dcf.0":{"name":"@material/button","version":"15.0.0-canary.1728a6dcf.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"08ac461ecb81e2682b5cc668b56e66c806a5b58f","tarball":"https://registry.npmjs.org/@material/button/-/button-15.0.0-canary.1728a6dcf.0.tgz","fileCount":40,"integrity":"sha512-npdYpUHrZI1YiSiEtYGGdHOY/t0JF2lKCjmNrhJQiZSeV2hUvzLBAOnCQO1WX7iOCnIfoWeD4RkmFc5BUbVVqw==","signatures":[{"sig":"MEUCIGL3wtk8WRRkxYJN1/aIYAADE+kgDBwhcipjdZMsrIWnAiEAjQKfRHZ0k+x1pwaaeyaU9GA9To5hXANACyEDuQ4ufQ8=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":657573},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button/styles\";\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nThe `mdc-button__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused button.\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.**\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n**Note: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.**\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button--icon-leading` | Optional. Styles a button with a leading icon.\n`mdc-button--icon-trailing` | Optional. Styles a button with a trailing icon.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n`mdc-button__focus-ring` | Recommended. Indicates the element which shows the high contrast mode focus ring styling.\n\n**Note: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommend always including it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color-or-map)` | If a color is passed, sets the default container fill color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`icon-color($color-or-map)` | If a color is passed, sets the default icon color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`ink-color($color-or-map)` | If a color is passed, sets the default ink color to the given color, and sets the icon color to the given color unless `icon-color` is also used. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color-or-map)` | If a color is passed, sets the default outline color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web 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/density":"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/button_15.0.0-canary.1728a6dcf.0_1695691395192_0.6624182490255615","host":"s3://npm-registry-packages"}},"15.0.0-canary.ebb636f3d.0":{"name":"@material/button","version":"15.0.0-canary.ebb636f3d.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"2d3067b10e36f5bfca7e77f5ed12a3a41e8c72aa","tarball":"https://registry.npmjs.org/@material/button/-/button-15.0.0-canary.ebb636f3d.0.tgz","fileCount":40,"integrity":"sha512-UTepDMlfEqCp2h9AbD4jONq4y5EjbexboOrh6pWTwyradiMu+QUgfVea+SfvkibAG9PBqmgvWlxnSvSzA1sd9w==","signatures":[{"sig":"MEUCIQCBKRdTWSyfZv9Cce3euxnDHAjBxY7g1JPFgbtRGKYh6wIgN9CkgG/EHyzO3AnVYKLAPLWJSp38L1+ujaq5ViuXn3w=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":657573},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button/styles\";\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nThe `mdc-button__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused button.\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.**\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n**Note: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.**\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button--icon-leading` | Optional. Styles a button with a leading icon.\n`mdc-button--icon-trailing` | Optional. Styles a button with a trailing icon.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n`mdc-button__focus-ring` | Recommended. Indicates the element which shows the high contrast mode focus ring styling.\n\n**Note: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommend always including it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color-or-map)` | If a color is passed, sets the default container fill color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`icon-color($color-or-map)` | If a color is passed, sets the default icon color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`ink-color($color-or-map)` | If a color is passed, sets the default ink color to the given color, and sets the icon color to the given color unless `icon-color` is also used. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color-or-map)` | If a color is passed, sets the default outline color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web 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/density":"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/button_15.0.0-canary.ebb636f3d.0_1696016669531_0.9757622400504398","host":"s3://npm-registry-packages"}},"15.0.0-canary.c0d21ecc9.0":{"name":"@material/button","version":"15.0.0-canary.c0d21ecc9.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"a7f3b74f2779ff05953cdbd05ba0fb703f4919bf","tarball":"https://registry.npmjs.org/@material/button/-/button-15.0.0-canary.c0d21ecc9.0.tgz","fileCount":40,"integrity":"sha512-pLopQ66BZizg2TMk0QdfewJpZeM0YfmR9Df9/GMPuyY1kJ/62Fqw5QeXhhBAWEM8V3iWa6aksB6/lKDJWGTqhg==","signatures":[{"sig":"MEUCIER7ZuyDGhIA8Kd6JKwYUAgY6CD1BYX1WxHWfDH8+iPgAiEAvLvI8Hxd8nLKmTfQxIc9aiX7hQ5WOx08+knjheup4HM=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":657573},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button/styles\";\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nThe `mdc-button__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused button.\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.**\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n**Note: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.**\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button--icon-leading` | Optional. Styles a button with a leading icon.\n`mdc-button--icon-trailing` | Optional. Styles a button with a trailing icon.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n`mdc-button__focus-ring` | Recommended. Indicates the element which shows the high contrast mode focus ring styling.\n\n**Note: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommend always including it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color-or-map)` | If a color is passed, sets the default container fill color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`icon-color($color-or-map)` | If a color is passed, sets the default icon color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`ink-color($color-or-map)` | If a color is passed, sets the default ink color to the given color, and sets the icon color to the given color unless `icon-color` is also used. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color-or-map)` | If a color is passed, sets the default outline color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web 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/density":"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/button_15.0.0-canary.c0d21ecc9.0_1696880211388_0.8935518631885764","host":"s3://npm-registry-packages"}},"15.0.0-canary.127a44b28.0":{"name":"@material/button","version":"15.0.0-canary.127a44b28.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"632ea05477ad468f4341621a57e7441c28216726","tarball":"https://registry.npmjs.org/@material/button/-/button-15.0.0-canary.127a44b28.0.tgz","fileCount":40,"integrity":"sha512-ftTRfJnlXMJQbsJLV9JOhCrzHASJeMYMMfzy6kMaRFeieHG66OqyWVtaaDIypiup9QhqI9WKdb8iVoMxfwKlJQ==","signatures":[{"sig":"MEQCIF++Vgi2qG6ULSzHC0m/4GKsxuZW35a9xDgV2LO7JdJwAiAacFor5R3YDSEC3HaJtKUDQsbUb4XZvi9Sl6VHrmE7lA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":661005},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button/styles\";\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nThe `mdc-button__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused button.\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.**\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n**Note: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.**\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button--icon-leading` | Optional. Styles a button with a leading icon.\n`mdc-button--icon-trailing` | Optional. Styles a button with a trailing icon.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n`mdc-button__focus-ring` | Recommended. Indicates the element which shows the high contrast mode focus ring styling.\n\n**Note: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommend always including it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color-or-map)` | If a color is passed, sets the default container fill color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`icon-color($color-or-map)` | If a color is passed, sets the default icon color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`ink-color($color-or-map)` | If a color is passed, sets the default ink color to the given color, and sets the icon color to the given color unless `icon-color` is also used. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color-or-map)` | If a color is passed, sets the default outline color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web 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/density":"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/button_15.0.0-canary.127a44b28.0_1697140822005_0.2674341306635062","host":"s3://npm-registry-packages"}},"15.0.0-canary.0ad128337.0":{"name":"@material/button","version":"15.0.0-canary.0ad128337.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"d2725ea883769c422106a527f56b9abeffd5a3d9","tarball":"https://registry.npmjs.org/@material/button/-/button-15.0.0-canary.0ad128337.0.tgz","fileCount":40,"integrity":"sha512-6tm4CYbaiQFGK4c/J0JL5MgvmGUFvGBhD7kLfTizWfSGy1e9bZi9PC+l3NJQltKrX/saYhpvF6zb9iNdCWRr6Q==","signatures":[{"sig":"MEYCIQDiv+mbMCkaZ/6eJ19tHsG3cN9Wq0Xl73h3rH2I6XuFcQIhAM/volmu/EcXy3ghx7B5URBqev+C2Kbvyrhl38ABpCXI","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":661005},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button/styles\";\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nThe `mdc-button__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused button.\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.**\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n**Note: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.**\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button--icon-leading` | Optional. Styles a button with a leading icon.\n`mdc-button--icon-trailing` | Optional. Styles a button with a trailing icon.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n`mdc-button__focus-ring` | Recommended. Indicates the element which shows the high contrast mode focus ring styling.\n\n**Note: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommend always including it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color-or-map)` | If a color is passed, sets the default container fill color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`icon-color($color-or-map)` | If a color is passed, sets the default icon color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`ink-color($color-or-map)` | If a color is passed, sets the default ink color to the given color, and sets the icon color to the given color unless `icon-color` is also used. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color-or-map)` | If a color is passed, sets the default outline color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web 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/density":"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/button_15.0.0-canary.0ad128337.0_1697741517527_0.578876533485184","host":"s3://npm-registry-packages"}},"15.0.0-canary.9cec94097.0":{"name":"@material/button","version":"15.0.0-canary.9cec94097.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"b5dcdc6abf2836a764ebc57049deedda2dbb6295","tarball":"https://registry.npmjs.org/@material/button/-/button-15.0.0-canary.9cec94097.0.tgz","fileCount":40,"integrity":"sha512-6302rcZJ74LIlQhGVBZjn2IiBFGD5fOmK+njwsXPWgMfL7YokuM+bvxNt9s5wY7OEcKjQ0wka7nkUxhyj6op5Q==","signatures":[{"sig":"MEYCIQCA2G3ij99rMcpi37TjnSb1kUGSTi9GpsT/gNZ3Lf3WmgIhAP/oqdhZMyt/KMh8p0temRqW7eLnWXxsAxjEvDl0tJmq","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":661005},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button/styles\";\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nThe `mdc-button__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused button.\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.**\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n**Note: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.**\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button--icon-leading` | Optional. Styles a button with a leading icon.\n`mdc-button--icon-trailing` | Optional. Styles a button with a trailing icon.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n`mdc-button__focus-ring` | Recommended. Indicates the element which shows the high contrast mode focus ring styling.\n\n**Note: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommend always including it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color-or-map)` | If a color is passed, sets the default container fill color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`icon-color($color-or-map)` | If a color is passed, sets the default icon color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`ink-color($color-or-map)` | If a color is passed, sets the default ink color to the given color, and sets the icon color to the given color unless `icon-color` is also used. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color-or-map)` | If a color is passed, sets the default outline color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web 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/density":"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/button_15.0.0-canary.9cec94097.0_1697756964658_0.15954868185254667","host":"s3://npm-registry-packages"}},"15.0.0-canary.c51a0bbcc.0":{"name":"@material/button","version":"15.0.0-canary.c51a0bbcc.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"e076381961b6b82c2b29fc2efcaf778e8e912e8c","tarball":"https://registry.npmjs.org/@material/button/-/button-15.0.0-canary.c51a0bbcc.0.tgz","fileCount":40,"integrity":"sha512-tYK0aRNoySFpyMnqGuKC7R9vIu+Z3vWpnw48lRmOvCdXRwj7sdm0+eSIslzHBVJ1Lw4Q+B4I+4x1w7WcRGhrlA==","signatures":[{"sig":"MEQCIDcf2RYxc8uSVG+yCFlXV6GhPoyZulhr00l9fYs19j3oAiBJ6l3Tmn+ui/QF/vXmxmP32niWXPJGsJUyVFQE/ilFaw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":661005},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button/styles\";\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nThe `mdc-button__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused button.\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.**\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n**Note: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.**\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button--icon-leading` | Optional. Styles a button with a leading icon.\n`mdc-button--icon-trailing` | Optional. Styles a button with a trailing icon.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n`mdc-button__focus-ring` | Recommended. Indicates the element which shows the high contrast mode focus ring styling.\n\n**Note: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommend always including it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color-or-map)` | If a color is passed, sets the default container fill color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`icon-color($color-or-map)` | If a color is passed, sets the default icon color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`ink-color($color-or-map)` | If a color is passed, sets the default ink color to the given color, and sets the icon color to the given color unless `icon-color` is also used. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color-or-map)` | If a color is passed, sets the default outline color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web 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/density":"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/button_15.0.0-canary.c51a0bbcc.0_1700081918630_0.025641918512005812","host":"s3://npm-registry-packages"}},"15.0.0-canary.d76666ad4.0":{"name":"@material/button","version":"15.0.0-canary.d76666ad4.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"8608a4a579c6f7648cdd04f7165566445d40ba52","tarball":"https://registry.npmjs.org/@material/button/-/button-15.0.0-canary.d76666ad4.0.tgz","fileCount":40,"integrity":"sha512-rIeLE5Or29ZN+RnETlWzsZ9enkOIWlpjc5josVlJakqND/BIRNyZzfandiflCV9ytcYw8qXKnELk88qxlfsxRw==","signatures":[{"sig":"MEQCIA8B+pMt/uBh1fEUo+eAtRner6zwkmugZeaxBX0sOdkfAiBAKBDYyfRagkhv1OrSEKSUI+/uwtwZeD5RVHfQW1TvAA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":661005},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button/styles\";\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nThe `mdc-button__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused button.\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.**\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n**Note: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.**\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button--icon-leading` | Optional. Styles a button with a leading icon.\n`mdc-button--icon-trailing` | Optional. Styles a button with a trailing icon.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n`mdc-button__focus-ring` | Recommended. Indicates the element which shows the high contrast mode focus ring styling.\n\n**Note: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommend always including it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color-or-map)` | If a color is passed, sets the default container fill color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`icon-color($color-or-map)` | If a color is passed, sets the default icon color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`ink-color($color-or-map)` | If a color is passed, sets the default ink color to the given color, and sets the icon color to the given color unless `icon-color` is also used. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color-or-map)` | If a color is passed, sets the default outline color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web 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/density":"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/button_15.0.0-canary.d76666ad4.0_1701123183875_0.8494716033434169","host":"s3://npm-registry-packages"}},"15.0.0-canary.8656bf0e0.0":{"name":"@material/button","version":"15.0.0-canary.8656bf0e0.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"12a5bc87f66faeb4bb35f14689527f849cc24a46","tarball":"https://registry.npmjs.org/@material/button/-/button-15.0.0-canary.8656bf0e0.0.tgz","fileCount":40,"integrity":"sha512-C0fokAQCemnuIFhwYeho18GkzXXpUiGGQA5pYQjv3217zds2HzLdrfx9daqoseCmgNQV2kxqLFfmVrihCoXNuw==","signatures":[{"sig":"MEQCICuN9H88gfce7PEaEblIeTzYA4izJG8uMtmSMH9tVD+6AiBDPDFAprQE1hrc1jnjojvE1AkcHTelh0BjpTWcAZhWCw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":661005},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button/styles\";\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nThe `mdc-button__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused button.\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.**\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n**Note: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.**\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button--icon-leading` | Optional. Styles a button with a leading icon.\n`mdc-button--icon-trailing` | Optional. Styles a button with a trailing icon.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n`mdc-button__focus-ring` | Recommended. Indicates the element which shows the high contrast mode focus ring styling.\n\n**Note: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommend always including it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color-or-map)` | If a color is passed, sets the default container fill color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`icon-color($color-or-map)` | If a color is passed, sets the default icon color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`ink-color($color-or-map)` | If a color is passed, sets the default ink color to the given color, and sets the icon color to the given color unless `icon-color` is also used. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color-or-map)` | If a color is passed, sets the default outline color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web 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/density":"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/button_15.0.0-canary.8656bf0e0.0_1702415914957_0.9205552719215411","host":"s3://npm-registry-packages"}},"15.0.0-canary.7f224ddd4.0":{"name":"@material/button","version":"15.0.0-canary.7f224ddd4.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"8de20a17fa75529f65553d9fb6c4af5d2743fa94","tarball":"https://registry.npmjs.org/@material/button/-/button-15.0.0-canary.7f224ddd4.0.tgz","fileCount":40,"integrity":"sha512-BHB7iyHgRVH+JF16+iscR+Qaic+p7LU1FOLgP8KucRlpF9tTwIxQA6mJwGRi5gUtcG+vyCmzVS+hIQ6DqT/7BA==","signatures":[{"sig":"MEUCIQCQwYUNRXk/9o0XBpRSMva0fPzGKtTfNA8wpnUERd7MJQIgQEWV612mLWb+9OkBvMeOpDdQa5HUYR8Q13iwjNvUTr0=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":661005},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button/styles\";\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nThe `mdc-button__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused button.\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.**\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n**Note: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.**\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button--icon-leading` | Optional. Styles a button with a leading icon.\n`mdc-button--icon-trailing` | Optional. Styles a button with a trailing icon.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n`mdc-button__focus-ring` | Recommended. Indicates the element which shows the high contrast mode focus ring styling.\n\n**Note: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommend always including it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color-or-map)` | If a color is passed, sets the default container fill color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`icon-color($color-or-map)` | If a color is passed, sets the default icon color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`ink-color($color-or-map)` | If a color is passed, sets the default ink color to the given color, and sets the icon color to the given color unless `icon-color` is also used. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color-or-map)` | If a color is passed, sets the default outline color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web 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/density":"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/button_15.0.0-canary.7f224ddd4.0_1703743740365_0.8730382225852722","host":"s3://npm-registry-packages"}},"15.0.0-canary.a0b8a90c0.0":{"name":"@material/button","version":"15.0.0-canary.a0b8a90c0.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"b5df1f1d48d9ad130886ab16baf60314c966632e","tarball":"https://registry.npmjs.org/@material/button/-/button-15.0.0-canary.a0b8a90c0.0.tgz","fileCount":40,"integrity":"sha512-djrMGug8ExNCArmez9PbLWqgrEJJ/E2n3vngdvBLlTe3aiCf8bI8P/xKTZydOuclDq5f8LROw8R33GyVfsz7Ig==","signatures":[{"sig":"MEUCIFMjrajmeJ8VhFQMBiircIbPtc7nulC5FDU9vhsPL/6iAiEA0rN/3ljZiIcYailP1grWaHJLYdF7S0HWCizCj7xFTPM=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":661005},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button/styles\";\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nThe `mdc-button__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused button.\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.**\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n**Note: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.**\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button--icon-leading` | Optional. Styles a button with a leading icon.\n`mdc-button--icon-trailing` | Optional. Styles a button with a trailing icon.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n`mdc-button__focus-ring` | Recommended. Indicates the element which shows the high contrast mode focus ring styling.\n\n**Note: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommend always including it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color-or-map)` | If a color is passed, sets the default container fill color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`icon-color($color-or-map)` | If a color is passed, sets the default icon color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`ink-color($color-or-map)` | If a color is passed, sets the default ink color to the given color, and sets the icon color to the given color unless `icon-color` is also used. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color-or-map)` | If a color is passed, sets the default outline color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web 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/density":"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/button_15.0.0-canary.a0b8a90c0.0_1707333566255_0.682090235242558","host":"s3://npm-registry-packages"}},"15.0.0-canary.e50b478eb.0":{"name":"@material/button","version":"15.0.0-canary.e50b478eb.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"c9f5bf27831b6a323b3ab282d364ecc24e9a5cf5","tarball":"https://registry.npmjs.org/@material/button/-/button-15.0.0-canary.e50b478eb.0.tgz","fileCount":40,"integrity":"sha512-UPQ7KrUD1nQqBw0/e00iRqUI0/1fbHdSOL/0tbkx4qExlyFz4+lYhvZ8gDEfaNnepuh1BJgSkD0NlxrFX/oMhQ==","signatures":[{"sig":"MEQCIDPFTmCbKmBrYL5cWrMnDLiLobYHaktSPIFSRRqn+UxMAiAFmoBeUxUjL9FPDdAAB3KdmMcOXvfKvgKGJzf7Z3Se9g==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":661005},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button/styles\";\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nThe `mdc-button__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused button.\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.**\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n**Note: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.**\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button--icon-leading` | Optional. Styles a button with a leading icon.\n`mdc-button--icon-trailing` | Optional. Styles a button with a trailing icon.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n`mdc-button__focus-ring` | Recommended. Indicates the element which shows the high contrast mode focus ring styling.\n\n**Note: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommend always including it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color-or-map)` | If a color is passed, sets the default container fill color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`icon-color($color-or-map)` | If a color is passed, sets the default icon color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`ink-color($color-or-map)` | If a color is passed, sets the default ink color to the given color, and sets the icon color to the given color unless `icon-color` is also used. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color-or-map)` | If a color is passed, sets the default outline color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web 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/density":"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/button_15.0.0-canary.e50b478eb.0_1707415677031_0.040833354981123504","host":"s3://npm-registry-packages"}},"15.0.0-canary.c43b3438b.0":{"name":"@material/button","version":"15.0.0-canary.c43b3438b.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"cbb6c679cdd166cbcfc7d50e8c4060192517dbba","tarball":"https://registry.npmjs.org/@material/button/-/button-15.0.0-canary.c43b3438b.0.tgz","fileCount":40,"integrity":"sha512-c22s6lThy5PriicexM7tN/plYu7EjQpU63pz6gzTzpBLnSx6JeEARnTBionoKg7CcDm9ZSeeKtRXSfyOnKQhRw==","signatures":[{"sig":"MEUCIHHuoeqCAV2GpBb0xiZKTJe11FpSPtP/DnndfsrcttOhAiEAxzRzLnCLhYRfKYWYXFos4ZXpusADrX3cKz/+ACxpgCk=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":661005},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button/styles\";\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nThe `mdc-button__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused button.\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.**\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n**Note: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.**\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button--icon-leading` | Optional. Styles a button with a leading icon.\n`mdc-button--icon-trailing` | Optional. Styles a button with a trailing icon.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n`mdc-button__focus-ring` | Recommended. Indicates the element which shows the high contrast mode focus ring styling.\n\n**Note: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommend always including it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color-or-map)` | If a color is passed, sets the default container fill color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`icon-color($color-or-map)` | If a color is passed, sets the default icon color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`ink-color($color-or-map)` | If a color is passed, sets the default ink color to the given color, and sets the icon color to the given color unless `icon-color` is also used. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color-or-map)` | If a color is passed, sets the default outline color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web 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/density":"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/button_15.0.0-canary.c43b3438b.0_1708719448894_0.3170987489574706","host":"s3://npm-registry-packages"}},"15.0.0-canary.819498d8c.0":{"name":"@material/button","version":"15.0.0-canary.819498d8c.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"6cff4dd99c32386f7a92aae6b9a316f8b0a0e3fb","tarball":"https://registry.npmjs.org/@material/button/-/button-15.0.0-canary.819498d8c.0.tgz","fileCount":40,"integrity":"sha512-wWPRnhWIK57SCqzh8pzEj7Er6rmP1QYqLYAd82y2h7YRhmzZbylKPJpi7XiMJLfPG7Jc4xJeqV8ASLgCYV7y9g==","signatures":[{"sig":"MEUCIQDvXusiPZYd1jCfpMbIfc4NS5tnfk0nHegSSSM1B2HqjAIgakK7LVevyM7ZUUiIboDNKLxIgTbG5fMuCVOtfnltOEw=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":661005},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button/styles\";\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nThe `mdc-button__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused button.\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.**\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n**Note: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.**\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button--icon-leading` | Optional. Styles a button with a leading icon.\n`mdc-button--icon-trailing` | Optional. Styles a button with a trailing icon.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n`mdc-button__focus-ring` | Recommended. Indicates the element which shows the high contrast mode focus ring styling.\n\n**Note: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommend always including it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color-or-map)` | If a color is passed, sets the default container fill color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`icon-color($color-or-map)` | If a color is passed, sets the default icon color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`ink-color($color-or-map)` | If a color is passed, sets the default ink color to the given color, and sets the icon color to the given color unless `icon-color` is also used. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color-or-map)` | If a color is passed, sets the default outline color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web 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/density":"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/button_15.0.0-canary.819498d8c.0_1710515692694_0.609376333758016","host":"s3://npm-registry-packages"}},"15.0.0-canary.453a6248a.0":{"name":"@material/button","version":"15.0.0-canary.453a6248a.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"11e991a15399a0d75143cdb79ad4113d1155e58b","tarball":"https://registry.npmjs.org/@material/button/-/button-15.0.0-canary.453a6248a.0.tgz","fileCount":40,"integrity":"sha512-wlyCSmXWNyRcElhxd4rxjezjliPScPW50uJqa/CMxmMj1GjL4WjDF6ZZsT1AXr5uYZsGbjbkoyyp5IDPBoUGcQ==","signatures":[{"sig":"MEUCIQDwZvA2heqdozVQ/tLFbMAqCUWa9R5sY4ygofNblaGNjgIgHF3LqqSYiHB6quHiKqXY37dOHRrT/9lS+tL5Aq9FUYY=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":661005},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button/styles\";\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nThe `mdc-button__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused button.\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.**\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n**Note: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.**\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button--icon-leading` | Optional. Styles a button with a leading icon.\n`mdc-button--icon-trailing` | Optional. Styles a button with a trailing icon.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n`mdc-button__focus-ring` | Recommended. Indicates the element which shows the high contrast mode focus ring styling.\n\n**Note: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommend always including it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color-or-map)` | If a color is passed, sets the default container fill color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`icon-color($color-or-map)` | If a color is passed, sets the default icon color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`ink-color($color-or-map)` | If a color is passed, sets the default ink color to the given color, and sets the icon color to the given color unless `icon-color` is also used. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color-or-map)` | If a color is passed, sets the default outline color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web 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/density":"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/button_15.0.0-canary.453a6248a.0_1711386809356_0.43226791135710485","host":"s3://npm-registry-packages"}},"15.0.0-canary.68edc03c6.0":{"name":"@material/button","version":"15.0.0-canary.68edc03c6.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"b271d2e201ccc1a2dd3e7c3adbc92ab17a6da467","tarball":"https://registry.npmjs.org/@material/button/-/button-15.0.0-canary.68edc03c6.0.tgz","fileCount":40,"integrity":"sha512-9t6NczOvcLhJMvaXMTnhvm5OrzZOQ/6BTZj27JfmR223viQjxw5u6mAyyMdnyQR2tLQ4aUUSBHHrwfT2qbYiXw==","signatures":[{"sig":"MEUCIQDK6CeIvFAbhSRyIBf91uMGOXwQsmt/UQNSYymqBJtX5QIgKhHFgob9PFceXfRbIemeFYATva9yqF5DIcudiKUdBFM=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":661005},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button/styles\";\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nThe `mdc-button__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused button.\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.**\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n**Note: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.**\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button--icon-leading` | Optional. Styles a button with a leading icon.\n`mdc-button--icon-trailing` | Optional. Styles a button with a trailing icon.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n`mdc-button__focus-ring` | Recommended. Indicates the element which shows the high contrast mode focus ring styling.\n\n**Note: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommend always including it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color-or-map)` | If a color is passed, sets the default container fill color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`icon-color($color-or-map)` | If a color is passed, sets the default icon color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`ink-color($color-or-map)` | If a color is passed, sets the default ink color to the given color, and sets the icon color to the given color unless `icon-color` is also used. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color-or-map)` | If a color is passed, sets the default outline color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web 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/density":"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/button_15.0.0-canary.68edc03c6.0_1712603155957_0.14851285830359817","host":"s3://npm-registry-packages"}},"15.0.0-canary.5bebc0064.0":{"name":"@material/button","version":"15.0.0-canary.5bebc0064.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"0cff3da2f7c1f4c5f28348e2a928bfe6d8ccd80a","tarball":"https://registry.npmjs.org/@material/button/-/button-15.0.0-canary.5bebc0064.0.tgz","fileCount":40,"integrity":"sha512-Lg9OdfEnGcNxrPVTJPqky20gDFuni2JTVUInuV5ZkmNZJzcZpyQafrkWM2Sr1XozZlo8tlhVhJC0ja+/dzdQzQ==","signatures":[{"sig":"MEQCIFQM/Y/t3R78OJcw1+MFgiWM/8W5RfJE8BCb4kL4DBHsAiBn1IBjgqF0GkUWdlZiGRqmwkiYCoQ0gMxXPHLleo/SBg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":661005},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button/styles\";\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nThe `mdc-button__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused button.\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.**\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n**Note: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.**\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button--icon-leading` | Optional. Styles a button with a leading icon.\n`mdc-button--icon-trailing` | Optional. Styles a button with a trailing icon.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n`mdc-button__focus-ring` | Recommended. Indicates the element which shows the high contrast mode focus ring styling.\n\n**Note: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommend always including it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color-or-map)` | If a color is passed, sets the default container fill color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`icon-color($color-or-map)` | If a color is passed, sets the default icon color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`ink-color($color-or-map)` | If a color is passed, sets the default ink color to the given color, and sets the icon color to the given color unless `icon-color` is also used. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color-or-map)` | If a color is passed, sets the default outline color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web 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/density":"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/button_15.0.0-canary.5bebc0064.0_1712871647444_0.04300943134129076","host":"s3://npm-registry-packages"}},"15.0.0-canary.311f29a60.0":{"name":"@material/button","version":"15.0.0-canary.311f29a60.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"b8abeb2e5fa902836db0de4a8a1174a2ddfc2201","tarball":"https://registry.npmjs.org/@material/button/-/button-15.0.0-canary.311f29a60.0.tgz","fileCount":40,"integrity":"sha512-8gVAA9zDX/Hf137CmHVXaajotTb58VCIoIgu2OF0r7gpi1FRD7BBmCEtPF02rtNcxB5P/xlkYM3ADIC94ES2aw==","signatures":[{"sig":"MEUCIA2wn+D43ZP6aKj0CZ9iVQTqK9bVFCU30DwYMXKz5s3QAiEAsKJESec68LaROgLdITM9kYBYyRoYE5Jfi7ZreWn+gVw=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":663387},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button/styles\";\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nThe `mdc-button__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused button.\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.**\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n**Note: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.**\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button--icon-leading` | Optional. Styles a button with a leading icon.\n`mdc-button--icon-trailing` | Optional. Styles a button with a trailing icon.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n`mdc-button__focus-ring` | Recommended. Indicates the element which shows the high contrast mode focus ring styling.\n\n**Note: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommend always including it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color-or-map)` | If a color is passed, sets the default container fill color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`icon-color($color-or-map)` | If a color is passed, sets the default icon color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`ink-color($color-or-map)` | If a color is passed, sets the default ink color to the given color, and sets the icon color to the given color unless `icon-color` is also used. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color-or-map)` | If a color is passed, sets the default outline color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web 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/density":"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/button_15.0.0-canary.311f29a60.0_1713895190375_0.5041039085708161","host":"s3://npm-registry-packages"}},"15.0.0-canary.65c10a622.0":{"name":"@material/button","version":"15.0.0-canary.65c10a622.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"03dea466b7855199217b63b0c570438c9b923d2c","tarball":"https://registry.npmjs.org/@material/button/-/button-15.0.0-canary.65c10a622.0.tgz","fileCount":40,"integrity":"sha512-B7qrWxf8sDwK8KZtG8R8gNy5AMoXJi7L6bSoS4P+Jc6HZFX9uL2D0eXPaV9reotm5NeAHr9t1BhrATTg7KvIvw==","signatures":[{"sig":"MEUCIDx97yQVQ6fEoPZDnvW1zLuM4x/uUqmjrLZ6lQB4ap/ZAiEAszTiobkbG4YyYVziQeGDrVYEvtw7vQG1d7bZXR7LilQ=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":665948},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button/styles\";\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nThe `mdc-button__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused button.\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.**\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n**Note: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.**\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button--icon-leading` | Optional. Styles a button with a leading icon.\n`mdc-button--icon-trailing` | Optional. Styles a button with a trailing icon.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n`mdc-button__focus-ring` | Recommended. Indicates the element which shows the high contrast mode focus ring styling.\n\n**Note: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommend always including it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color-or-map)` | If a color is passed, sets the default container fill color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`icon-color($color-or-map)` | If a color is passed, sets the default icon color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`ink-color($color-or-map)` | If a color is passed, sets the default ink color to the given color, and sets the icon color to the given color unless `icon-color` is also used. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color-or-map)` | If a color is passed, sets the default outline color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web 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/density":"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/button_15.0.0-canary.65c10a622.0_1714070926898_0.18709515293507395","host":"s3://npm-registry-packages"}},"15.0.0-canary.4b35cb7d0.0":{"name":"@material/button","version":"15.0.0-canary.4b35cb7d0.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"cc801bf60fb96074d196e3b603b185304aaadf65","tarball":"https://registry.npmjs.org/@material/button/-/button-15.0.0-canary.4b35cb7d0.0.tgz","fileCount":40,"integrity":"sha512-BQF9gn7/tFWhORGBUFaDwkF6HSE2NYVeAhL0HC5HyYAYFNvcwk5UfFkmh1cfQrforkJpkg3tIS2Y7SxWJEAJEA==","signatures":[{"sig":"MEYCIQCUdhIYrGOhQ1TcXiWoqvEgfLIYS9PFqBOBBIqgmZ0chQIhAK5kBsdKftPKB1tnH+JbJDCANNZ7l9QdJkFkhp4MCP/F","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":665948},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button/styles\";\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nThe `mdc-button__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused button.\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.**\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n**Note: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.**\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button--icon-leading` | Optional. Styles a button with a leading icon.\n`mdc-button--icon-trailing` | Optional. Styles a button with a trailing icon.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n`mdc-button__focus-ring` | Recommended. Indicates the element which shows the high contrast mode focus ring styling.\n\n**Note: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommend always including it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color-or-map)` | If a color is passed, sets the default container fill color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`icon-color($color-or-map)` | If a color is passed, sets the default icon color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`ink-color($color-or-map)` | If a color is passed, sets the default ink color to the given color, and sets the icon color to the given color unless `icon-color` is also used. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color-or-map)` | If a color is passed, sets the default outline color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web 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/density":"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/button_15.0.0-canary.4b35cb7d0.0_1714651370734_0.5584696111260763","host":"s3://npm-registry-packages"}},"15.0.0-canary.f80ac92b0.0":{"name":"@material/button","version":"15.0.0-canary.f80ac92b0.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"7fe1e6d519c441b66b0bce525b8231a1b1d35c40","tarball":"https://registry.npmjs.org/@material/button/-/button-15.0.0-canary.f80ac92b0.0.tgz","fileCount":40,"integrity":"sha512-vmClD7L+WK7LN/ZsjCr+6MYd7YRrniB8NXP9+HaXgoQFnC4RD/qN04IRU2DoZzF9M+/cPZHOslS/ZNaYCH+YiQ==","signatures":[{"sig":"MEQCIH+Use7XtBou7zeMZajF15l1SP5cmLxpCSmZG2ZT+jG3AiBeXuIuCul4UfIkOH797wlaoNWFF1YJIWeson8/xFEgqA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":665948},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button/styles\";\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nThe `mdc-button__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused button.\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.**\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n**Note: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.**\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button--icon-leading` | Optional. Styles a button with a leading icon.\n`mdc-button--icon-trailing` | Optional. Styles a button with a trailing icon.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n`mdc-button__focus-ring` | Recommended. Indicates the element which shows the high contrast mode focus ring styling.\n\n**Note: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommend always including it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color-or-map)` | If a color is passed, sets the default container fill color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`icon-color($color-or-map)` | If a color is passed, sets the default icon color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`ink-color($color-or-map)` | If a color is passed, sets the default ink color to the given color, and sets the icon color to the given color unless `icon-color` is also used. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color-or-map)` | If a color is passed, sets the default outline color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web 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/density":"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/button_15.0.0-canary.f80ac92b0.0_1714651984098_0.29352857622869255","host":"s3://npm-registry-packages"}},"15.0.0-canary.2f5b899bc.0":{"name":"@material/button","version":"15.0.0-canary.2f5b899bc.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"62cc765f4934890e6d09630ec805056010266d06","tarball":"https://registry.npmjs.org/@material/button/-/button-15.0.0-canary.2f5b899bc.0.tgz","fileCount":40,"integrity":"sha512-k1q8nInOd288wjYfC19ILJfPQ24TF3LIDWUrSPyLwCKZmvY/cvXg8Tf2ADme3hrph0+51//lKoq5sS89/58DWg==","signatures":[{"sig":"MEQCIDOF+Gzh6BJotCHuyJw/bHn/o9c/BXP5C7+oUB+g4N6LAiBIZ2yoaxtdvOZGsf20cYgm/YCjgKgjoVmmluuhgPoVag==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":665948},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button/styles\";\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nThe `mdc-button__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused button.\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.**\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n**Note: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.**\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button--icon-leading` | Optional. Styles a button with a leading icon.\n`mdc-button--icon-trailing` | Optional. Styles a button with a trailing icon.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n`mdc-button__focus-ring` | Recommended. Indicates the element which shows the high contrast mode focus ring styling.\n\n**Note: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommend always including it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color-or-map)` | If a color is passed, sets the default container fill color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`icon-color($color-or-map)` | If a color is passed, sets the default icon color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`ink-color($color-or-map)` | If a color is passed, sets the default ink color to the given color, and sets the icon color to the given color unless `icon-color` is also used. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color-or-map)` | If a color is passed, sets the default outline color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web 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/density":"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/button_15.0.0-canary.2f5b899bc.0_1716213365604_0.5140818197871371","host":"s3://npm-registry-packages"}},"15.0.0-canary.cfec83c74.0":{"name":"@material/button","version":"15.0.0-canary.cfec83c74.0","keywords":["material components","material design","button"],"license":"MIT","_id":"@material/button@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":"20eba4bbd7a786cf0eec2cbd7473899118e10afd","tarball":"https://registry.npmjs.org/@material/button/-/button-15.0.0-canary.cfec83c74.0.tgz","fileCount":40,"integrity":"sha512-l1KoI/JCzefIhqrsbEK9D8TszHp3DxrjwoQrBomZw3NpOfkWTvEtVS/ddhFKsy60OrdoH4Y2QamPiFLoah2wfw==","signatures":[{"sig":"MEUCIGx/VNOiKiKMCNq2KKIwwKVzglWESxigeyQ6V9XLkmkjAiEAv00bnWlWJ1k5c8z7ANEVcbhPfK46MLuXMiU3O5na/ms=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":665948},"readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button/styles\";\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nThe `mdc-button__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused button.\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.**\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n**Note: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.**\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button--icon-leading` | Optional. Styles a button with a leading icon.\n`mdc-button--icon-trailing` | Optional. Styles a button with a trailing icon.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n`mdc-button__focus-ring` | Recommended. Indicates the element which shows the high contrast mode focus ring styling.\n\n**Note: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommend always including it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color-or-map)` | If a color is passed, sets the default container fill color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`icon-color($color-or-map)` | If a color is passed, sets the default icon color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`ink-color($color-or-map)` | If a color is passed, sets the default ink color to the given color, and sets the icon color to the given color unless `icon-color` is also used. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color-or-map)` | If a color is passed, sets the default outline color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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-button"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web 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/density":"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/button_15.0.0-canary.cfec83c74.0_1716231398540_0.9964053023113948","host":"s3://npm-registry-packages"}},"15.0.0-canary.423edc3dc.0":{"name":"@material/button","description":"The Material Components for the web button component","version":"15.0.0-canary.423edc3dc.0","license":"MIT","keywords":["material components","material design","button"],"repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web.git","directory":"packages/mdc-button"},"sideEffects":false,"dependencies":{"@material/density":"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":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button/styles\";\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nThe `mdc-button__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused button.\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.**\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n**Note: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.**\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button--icon-leading` | Optional. Styles a button with a leading icon.\n`mdc-button--icon-trailing` | Optional. Styles a button with a trailing icon.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n`mdc-button__focus-ring` | Recommended. Indicates the element which shows the high contrast mode focus ring styling.\n\n**Note: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommend always including it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color-or-map)` | If a color is passed, sets the default container fill color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`icon-color($color-or-map)` | If a color is passed, sets the default icon color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`ink-color($color-or-map)` | If a color is passed, sets the default ink color to the given color, and sets the icon color to the given color unless `icon-color` is also used. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color-or-map)` | If a color is passed, sets the default outline color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\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/button@15.0.0-canary.423edc3dc.0","_nodeVersion":"14.21.3","_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","dist":{"integrity":"sha512-7fxNiSlSCgf9UThQm3peGXTwjRbJigsMsX9+ibsAp+vwhqVDEX4TZ5/w61MCEw9j27CHHfzEpR+/0qC6YMVu5A==","shasum":"cdfa7dfbc72b46a9755401378b53a5979c50a735","tarball":"https://registry.npmjs.org/@material/button/-/button-15.0.0-canary.423edc3dc.0.tgz","fileCount":40,"unpackedSize":665948,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIF3IfnUj8TZIRF5NWRt5vB8DSCxloR1ILCnMWluQiq8PAiAO3NmTVKHBMgoGgtaBSFtk88W6r5aQsvINCkIT71xtSw=="}]},"_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/button_15.0.0-canary.423edc3dc.0_1719425524800_0.7529715809888502"},"_hasShrinkwrap":false}},"time":{"created":"2016-07-20T22:59:27.082Z","modified":"2024-06-26T18:12:05.402Z","2.0.0-alpha.6-2":"2016-07-20T22:59:27.082Z","2.0.0-dev.20160721":"2016-07-20T23:51:54.371Z","2.0.0-dev.20160721a":"2016-07-21T00:47:02.305Z","2.0.0-dev-20160723":"2016-07-22T23:56:04.844Z","2.0.0-dev.20160810":"2016-08-10T10:38:21.484Z","2.0.0-dev.20160822":"2016-08-21T22:20:28.714Z","2.0.0-dev.20160822-1":"2016-08-22T00:37:13.481Z","2.0.0-dev.20160903":"2016-09-03T08:16:20.145Z","0.1.0":"2016-12-15T17:54:17.458Z","0.1.1":"2017-01-09T15:57:13.936Z","0.2.0":"2017-01-23T16:49:31.493Z","0.2.1":"2017-02-06T19:04:41.641Z","0.3.0":"2017-02-21T17:27:30.192Z","0.3.1":"2017-03-06T17:02:10.627Z","0.3.2":"2017-04-03T15:27:59.803Z","0.3.3":"2017-04-18T14:51:14.794Z","0.3.4":"2017-05-01T15:43:01.441Z","0.3.5":"2017-05-15T16:25:58.794Z","0.3.6":"2017-05-17T14:28:15.248Z","0.3.7":"2017-05-30T19:04:30.194Z","0.3.8":"2017-06-26T16:10:48.397Z","0.3.9":"2017-07-10T15:58:47.817Z","0.3.10":"2017-07-24T15:49:11.396Z","0.3.11":"2017-08-07T20:48:24.007Z","0.4.0":"2017-08-21T17:27:45.933Z","0.4.1":"2017-08-24T14:46:39.775Z","0.5.0":"2017-08-25T17:20:53.944Z","0.6.0":"2017-09-05T20:16:04.316Z","0.7.0":"2017-09-18T18:35:34.505Z","0.7.1":"2017-10-02T21:11:38.495Z","0.23.0":"2017-10-16T21:02:15.722Z","0.24.0":"2017-10-30T19:11:17.976Z","0.25.0":"2017-11-13T20:02:20.301Z","0.26.0":"2017-11-27T22:26:25.363Z","0.27.0":"2017-12-11T19:35:29.712Z","0.28.0":"2018-01-08T18:55:09.287Z","0.29.0":"2018-01-22T18:30:54.115Z","0.30.0":"2018-02-05T22:02:18.730Z","0.31.0":"2018-02-20T18:22:57.963Z","0.32.0":"2018-03-05T22:08:39.684Z","0.33.0":"2018-03-19T16:39:57.251Z","0.34.0":"2018-04-02T21:51:51.182Z","0.34.1":"2018-04-03T23:39:43.880Z","0.35.0":"2018-04-23T22:39:57.627Z","0.36.0-0":"2018-05-29T15:22:05.116Z","0.36.0":"2018-06-04T15:37:43.206Z","0.36.1":"2018-06-18T15:40:17.991Z","0.37.0":"2018-07-02T22:13:54.923Z","0.37.1":"2018-07-16T21:19:10.511Z","0.38.0":"2018-07-30T17:06:48.496Z","0.38.1":"2018-08-13T20:39:01.056Z","0.39.0-0":"2018-08-16T15:15:56.681Z","0.39.0":"2018-08-27T17:40:33.080Z","0.39.1":"2018-08-31T21:36:26.430Z","0.39.2":"2018-09-11T16:55:06.682Z","0.39.3":"2018-09-11T17:18:55.051Z","0.40.0":"2018-09-24T20:01:50.414Z","0.40.1":"2018-10-08T20:54:36.355Z","0.41.0":"2018-10-29T20:22:05.293Z","0.42.0":"2018-12-04T22:54:45.748Z","0.43.0":"2019-01-07T19:49:09.067Z","0.44.0":"2019-02-04T18:23:50.436Z","0.44.1":"2019-02-19T23:02:47.440Z","1.0.0-0":"2019-02-27T23:59:32.124Z","1.0.0-1":"2019-03-04T23:33:25.291Z","1.0.0":"2019-03-06T21:08:13.714Z","1.0.1":"2019-03-11T22:07:19.572Z","1.1.0":"2019-03-26T19:25:55.366Z","1.1.1":"2019-04-08T20:13:55.066Z","2.0.0":"2019-04-29T17:40:04.786Z","2.1.1":"2019-05-10T17:25:11.752Z","2.3.0":"2019-05-28T21:23:47.016Z","3.0.0-alpha.0":"2019-06-12T04:06:54.217Z","3.0.0-alpha.1":"2019-06-12T19:02:13.169Z","3.0.0":"2019-06-25T22:28:00.240Z","3.1.0-alpha.0":"2019-07-16T13:29:11.428Z","3.1.0":"2019-07-22T22:02:44.029Z","4.0.0-alpha.0":"2019-08-07T21:09:35.455Z","4.0.0-canary.0":"2019-09-05T04:37:54.595Z","4.0.0-canary.1":"2019-09-09T20:20:46.961Z","3.2.0":"2019-09-12T21:53:33.730Z","4.0.0-canary.79d881baf.0":"2019-09-13T02:21:36.645Z","4.0.0-canary.e851d4f40.0":"2019-09-13T04:07:23.759Z","4.0.0-canary.905884690.0":"2019-09-16T23:48:12.595Z","4.0.0-canary.199534d61.0":"2019-09-27T18:57:57.356Z","4.0.0-canary.22d7ad2fb.0":"2019-10-15T18:57:17.614Z","4.0.0-canary.735147131.0":"2019-10-16T01:23:39.627Z","4.0.0-canary.062ade5c0.0":"2019-10-17T01:01:39.195Z","4.0.0-canary.774ad4f8.0":"2019-10-17T04:04:41.168Z","4.0.0-canary.5916d18c.0":"2019-10-18T20:08:46.537Z","4.0.0-canary.d4141c95.0":"2019-10-24T01:38:23.073Z","4.0.0-canary.2b878b3e.0":"2019-10-25T02:10:51.160Z","4.0.0-canary.b06c0efe.0":"2019-10-26T01:35:17.188Z","4.0.0-canary.01628efa.0":"2019-10-29T00:03:12.302Z","4.0.0-canary.b5c6d66b.0":"2019-10-29T17:57:00.711Z","4.0.0-canary.cdf858ea.0":"2019-11-01T17:59:02.511Z","4.0.0-canary.719b57e1.0":"2019-11-01T20:01:44.102Z","4.0.0-canary.97cbbdc2.0":"2019-11-01T20:29:22.667Z","4.0.0-canary.8e36b3b7.0":"2019-11-01T21:01:32.139Z","4.0.0-canary.62d3a09b.0":"2019-11-01T21:10:54.652Z","4.0.0":"2019-11-02T18:11:48.495Z","5.0.0-canary.b5eb51e94.0":"2019-11-07T18:33:51.054Z","5.0.0-canary.58500806e.0":"2019-11-08T15:35:54.647Z","5.0.0-canary.66299b646.0":"2019-11-08T20:33:52.247Z","5.0.0-canary.821871e04.0":"2019-11-08T21:28:23.111Z","5.0.0-canary.491fddc31.0":"2019-11-08T22:07:24.527Z","5.0.0-canary.b0cecf145.0":"2019-11-09T18:42:34.360Z","5.0.0-canary.afe0dd1bc.0":"2019-11-11T15:37:54.089Z","5.0.0-canary.b4cfdc40b.0":"2019-11-14T15:58:51.690Z","5.0.0-canary.525989b5d.0":"2019-11-14T23:30:59.067Z","5.0.0-canary.7084b403a.0":"2019-11-15T01:06:05.010Z","5.0.0-canary.3cbee6dac.0":"2019-11-15T22:33:01.737Z","5.0.0-canary.591a6ad44.0":"2019-11-18T23:48:45.350Z","5.0.0-canary.5729943ba.0":"2019-11-20T05:19:36.628Z","5.0.0-canary.e89750dc7.0":"2019-11-27T02:09:57.710Z","5.0.0-canary.3e560b33a.0":"2019-11-27T02:10:46.250Z","5.0.0-canary.7fd17ce5e.0":"2019-11-27T02:11:05.182Z","5.0.0-canary.ec729683b.0":"2019-11-27T15:55:12.710Z","5.0.0-canary.b8bc4a26e.0":"2019-11-27T19:16:56.866Z","5.0.0-canary.f978109c3.0":"2019-12-02T17:07:34.309Z","5.0.0-canary.ad9dfe706.0":"2019-12-03T23:18:16.319Z","5.0.0-canary.5e45d77f3.0":"2019-12-03T23:19:49.715Z","5.0.0-canary.d10e8cdf3.0":"2019-12-03T23:20:34.059Z","5.0.0-canary.a5dbd8a2a.0":"2019-12-03T23:55:14.013Z","5.0.0-canary.ba879b68b.0":"2019-12-04T20:22:55.416Z","5.0.0-canary.aa0eba489.0":"2019-12-06T01:59:18.234Z","5.0.0-canary.cb7b71a86.0":"2019-12-06T23:56:04.204Z","5.0.0-canary.50f110a6c.0":"2019-12-10T16:59:47.167Z","5.0.0-canary.878a08b7c.0":"2019-12-11T20:16:31.113Z","5.0.0-canary.397905b4e.0":"2019-12-12T02:47:28.935Z","5.0.0-canary.1fbf5bd1d.0":"2019-12-12T18:59:29.400Z","5.0.0-canary.b723dfa78.0":"2019-12-12T20:10:06.923Z","5.0.0-canary.1c494e567.0":"2019-12-12T23:37:00.851Z","5.0.0-canary.c9e98a125.0":"2019-12-17T18:10:13.905Z","5.0.0-canary.5ffe8f7e3.0":"2019-12-17T22:33:28.781Z","5.0.0-canary.47949b08e.0":"2019-12-18T17:40:45.213Z","5.0.0-canary.b240bcc1b.0":"2019-12-18T19:17:06.469Z","5.0.0-canary.391674a26.0":"2019-12-18T19:17:18.450Z","5.0.0-canary.c4837746c.0":"2019-12-18T19:35:24.311Z","5.0.0-canary.e41a70425.0":"2019-12-18T23:20:29.232Z","5.0.0-canary.bac43eb43.0":"2019-12-18T23:24:17.616Z","5.0.0-canary.2e491de55.0":"2019-12-19T10:49:59.188Z","5.0.0-canary.ae101c144.0":"2019-12-19T16:25:06.549Z","5.0.0-canary.a51c31f26.0":"2019-12-19T17:14:27.754Z","5.0.0-canary.21fc4e13b.0":"2019-12-19T21:27:18.509Z","5.0.0-canary.d2ae6e17d.0":"2019-12-19T22:24:19.292Z","5.0.0-canary.ba30399ad.0":"2019-12-20T01:10:09.035Z","5.0.0-canary.a08ccec35.0":"2019-12-20T23:26:57.876Z","5.0.0-canary.a2f75105e.0":"2019-12-23T19:47:55.915Z","5.0.0-canary.c054a24c7.0":"2019-12-23T21:50:12.831Z","5.0.0-canary.c6808c51c.0":"2019-12-23T21:54:48.616Z","5.0.0-canary.7bce9cf77.0":"2019-12-26T18:45:51.116Z","5.0.0-canary.c92f038c3.0":"2019-12-30T22:03:26.224Z","5.0.0-canary.1f1ac7558.0":"2020-01-02T20:54:19.026Z","5.0.0-canary.ec26e799c.0":"2020-01-02T21:42:31.190Z","5.0.0-canary.0a40ced40.0":"2020-01-03T17:09:38.729Z","5.0.0-canary.3adf84899.0":"2020-01-03T18:22:36.461Z","5.0.0-canary.0d42ee650.0":"2020-01-03T21:37:10.658Z","5.0.0-canary.847dd1ada.0":"2020-01-06T19:26:30.063Z","5.0.0-canary.39df7e5df.0":"2020-01-07T00:55:44.912Z","5.0.0-canary.f1a2581ab.0":"2020-01-07T14:59:54.224Z","5.0.0-canary.7c7ddf347.0":"2020-01-07T15:16:21.617Z","5.0.0-canary.a1c84d4b5.0":"2020-01-07T18:10:40.763Z","5.0.0-canary.ec9f16578.0":"2020-01-07T19:39:39.870Z","5.0.0-canary.b602226ce.0":"2020-01-07T20:15:24.343Z","5.0.0-canary.b2d2dc08c.0":"2020-01-07T21:26:10.531Z","5.0.0-canary.61f2d7580.0":"2020-01-07T21:39:49.692Z","5.0.0-canary.d1be53a2e.0":"2020-01-07T22:17:15.478Z","5.0.0-canary.9b0d06e32.0":"2020-01-07T22:19:27.662Z","5.0.0-canary.730c807a0.0":"2020-01-07T22:21:02.321Z","5.0.0-canary.2213152cd.0":"2020-01-08T17:22:21.113Z","5.0.0-canary.5750f7169.0":"2020-01-08T17:57:04.866Z","5.0.0-canary.f7abc7a43.0":"2020-01-08T18:27:55.404Z","5.0.0-canary.bf7b4a061.0":"2020-01-08T18:41:41.335Z","5.0.0-canary.784fa7903.0":"2020-01-08T19:10:27.968Z","5.0.0-canary.823c050ba.0":"2020-01-08T20:10:52.307Z","5.0.0-canary.70c708dee.0":"2020-01-08T20:22:27.343Z","5.0.0-canary.5ed9d13d0.0":"2020-01-08T21:42:45.970Z","5.0.0-canary.4819cc7e5.0":"2020-01-08T21:58:24.392Z","5.0.0-canary.fe3ffd2c3.0":"2020-01-08T22:16:21.839Z","5.0.0-canary.c0e850090.0":"2020-01-08T22:23:20.146Z","5.0.0-canary.615f86f38.0":"2020-01-08T22:40:26.813Z","5.0.0-canary.1eb032637.0":"2020-01-08T23:00:06.434Z","5.0.0-canary.5bc5ebfea.0":"2020-01-08T23:00:59.489Z","5.0.0-canary.1112b8def.0":"2020-01-09T22:10:23.505Z","5.0.0-canary.aab102017.0":"2020-01-10T00:12:28.183Z","5.0.0-canary.426913342.0":"2020-01-10T01:44:33.614Z","5.0.0-canary.d4ea9a706.0":"2020-01-10T17:25:30.730Z","5.0.0-canary.7d4ee2996.0":"2020-01-10T17:57:03.598Z","5.0.0-canary.981ec9b6f.0":"2020-01-10T19:26:58.184Z","5.0.0-canary.737da83fc.0":"2020-01-10T21:18:58.494Z","5.0.0-canary.aca8e6c18.0":"2020-01-13T19:32:22.260Z","5.0.0-canary.c38d84e21.0":"2020-01-13T22:13:43.206Z","5.0.0-canary.a4db5fbad.0":"2020-01-14T02:15:31.623Z","5.0.0-canary.faa9af310.0":"2020-01-14T16:53:00.870Z","5.0.0-canary.60354c577.0":"2020-01-14T22:46:04.554Z","5.0.0-canary.d07c78daa.0":"2020-01-14T23:38:40.831Z","5.0.0-canary.8ddd5c6dc.0":"2020-01-15T01:43:08.744Z","5.0.0-canary.a9511d870.0":"2020-01-15T19:10:26.807Z","5.0.0-canary.7c8583c4c.0":"2020-01-15T22:48:09.559Z","5.0.0-canary.5d4b82bac.0":"2020-01-15T22:48:30.194Z","5.0.0-canary.57d0186e4.0":"2020-01-16T18:17:38.473Z","5.0.0-canary.071a6ab70.0":"2020-01-16T18:24:03.595Z","5.0.0-canary.22e0cb618.0":"2020-01-16T18:47:06.815Z","5.0.0-canary.f16f15b8f.0":"2020-01-17T00:07:08.159Z","5.0.0-canary.aa8e43e9a.0":"2020-01-17T00:36:48.102Z","5.0.0-canary.fe1f3ca07.0":"2020-01-17T01:00:38.163Z","5.0.0-canary.d405af26b.0":"2020-01-17T18:17:22.532Z","5.0.0-canary.6e857aae2.0":"2020-01-17T18:20:55.642Z","5.0.0-canary.e2e764f7c.0":"2020-01-17T18:36:08.402Z","5.0.0-canary.7ef986a87.0":"2020-01-17T19:30:59.941Z","5.0.0-canary.29402e2d4.0":"2020-01-17T20:39:58.180Z","5.0.0-canary.2b3ec563c.0":"2020-01-17T23:11:40.025Z","5.0.0-canary.e8a993677.0":"2020-01-21T16:50:08.009Z","5.0.0-canary.cd4903304.0":"2020-01-21T21:37:27.807Z","5.0.0-canary.7e4b04b25.0":"2020-01-21T22:46:30.882Z","5.0.0-canary.ebc296937.0":"2020-01-21T23:45:08.514Z","5.0.0-canary.cf33f113d.0":"2020-01-22T01:22:23.640Z","5.0.0-canary.e1d5f1be5.0":"2020-01-22T16:55:38.974Z","5.0.0-canary.6b6a4ff92.0":"2020-01-22T17:57:50.990Z","5.0.0-canary.6092f71ee.0":"2020-01-22T21:17:06.142Z","5.0.0-canary.d8d95020f.0":"2020-01-22T23:09:34.414Z","5.0.0-canary.b7facc628.0":"2020-01-23T18:12:46.253Z","5.0.0-canary.63f357dbf.0":"2020-01-23T21:55:24.079Z","5.0.0-canary.f2426d26e.0":"2020-01-23T23:55:20.367Z","5.0.0-canary.7f5e0c23f.0":"2020-01-24T16:47:46.032Z","5.0.0-canary.3fc3ab520.0":"2020-01-24T17:20:58.781Z","5.0.0-canary.80a4d326f.0":"2020-01-24T20:45:52.943Z","5.0.0-canary.ef7de4def.0":"2020-01-24T21:32:25.218Z","5.0.0-canary.93e2288b6.0":"2020-01-28T16:56:05.007Z","5.0.0-canary.34ef15f67.0":"2020-01-28T17:24:18.862Z","5.0.0-canary.d3d176ba5.0":"2020-01-28T17:29:32.902Z","5.0.0-canary.32c1df133.0":"2020-01-28T19:43:29.009Z","5.0.0-canary.f3adce86f.0":"2020-01-28T21:49:05.823Z","5.0.0-canary.a4423f890.0":"2020-01-29T21:09:41.152Z","5.0.0-canary.9351f167d.0":"2020-01-29T21:55:45.084Z","5.0.0-canary.29b89dbc1.0":"2020-01-29T22:16:54.080Z","5.0.0-canary.45985457b.0":"2020-01-29T23:33:03.322Z","5.0.0-canary.a1a0deb3e.0":"2020-01-30T17:37:28.391Z","5.0.0-canary.181486643.0":"2020-01-30T20:56:19.866Z","5.0.0-canary.3a85313ac.0":"2020-01-31T16:23:22.405Z","5.0.0-canary.b6c7f624b.0":"2020-01-31T17:03:05.627Z","5.0.0-canary.b3f70ebde.0":"2020-01-31T20:10:20.393Z","5.0.0-canary.3e782d8f8.0":"2020-02-02T01:12:45.885Z","5.0.0-canary.535398572.0":"2020-02-03T18:12:24.138Z","5.0.0-canary.5ff33802c.0":"2020-02-04T18:03:53.540Z","5.0.0-canary.1eb29491c.0":"2020-02-04T21:00:38.154Z","5.0.0-canary.4c7154b26.0":"2020-02-05T16:03:14.739Z","5.0.0-canary.ab5f49a2c.0":"2020-02-05T23:33:17.418Z","5.0.0-canary.c541ebe15.0":"2020-02-06T22:29:58.411Z","5.0.0-canary.98f7faa05.0":"2020-02-07T19:21:18.676Z","5.0.0-canary.b4727e43a.0":"2020-02-07T19:55:32.416Z","5.0.0-canary.91d9d5a65.0":"2020-02-07T22:59:30.511Z","5.0.0-canary.d5c006ed1.0":"2020-02-10T16:48:44.273Z","5.0.0-canary.559f1a570.0":"2020-02-10T17:25:00.693Z","5.0.0-canary.ad3bbf782.0":"2020-02-10T19:11:44.057Z","5.0.0-canary.570d8e49c.0":"2020-02-10T20:43:29.852Z","5.0.0-canary.48b06b89a.0":"2020-02-11T18:43:15.183Z","5.0.0-canary.612443dfb.0":"2020-02-11T19:49:08.402Z","5.0.0-canary.8c11ea2a3.0":"2020-02-12T08:51:35.502Z","5.0.0-canary.b2f3d311e.0":"2020-02-13T21:44:09.995Z","5.0.0-canary.4f488d0ee.0":"2020-02-13T23:06:17.536Z","6.0.0-canary.fe79de07d.0":"2020-02-13T23:23:39.752Z","5.0.0":"2020-02-14T00:08:57.841Z","6.0.0-canary.5e313b1f2.0":"2020-02-14T23:48:15.508Z","6.0.0-canary.6a56f387c.0":"2020-02-18T19:43:53.260Z","6.0.0-canary.bdfd52632.0":"2020-02-19T20:22:41.080Z","6.0.0-canary.ad2e4376a.0":"2020-02-20T23:16:18.948Z","6.0.0-canary.765caef18.0":"2020-02-21T17:33:14.056Z","6.0.0-canary.949562303.0":"2020-02-21T20:37:54.585Z","6.0.0-canary.7ec96974e.0":"2020-02-24T18:58:12.421Z","6.0.0-canary.265ecbad5.0":"2020-02-25T21:00:54.281Z","5.1.0":"2020-02-25T21:38:13.946Z","6.0.0-canary.2cf87456f.0":"2020-02-25T21:38:55.006Z","6.0.0-canary.781434a92.0":"2020-02-25T23:28:06.198Z","6.0.0-canary.d6f60c98b.0":"2020-02-28T22:03:36.288Z","6.0.0-canary.69edc6e28.0":"2020-02-28T22:12:16.751Z","6.0.0-canary.9372e4939.0":"2020-03-03T19:10:30.211Z","6.0.0-canary.9cf5e9842.0":"2020-03-03T23:25:55.092Z","6.0.0-canary.3657f8863.0":"2020-03-04T17:44:17.017Z","6.0.0-canary.98b843417.0":"2020-03-05T18:31:09.294Z","6.0.0-canary.17b9699c4.0":"2020-03-05T19:22:25.061Z","6.0.0-canary.6ee035572.0":"2020-03-09T16:46:57.984Z","6.0.0-canary.bd33cb56b.0":"2020-03-09T17:22:13.633Z","6.0.0-canary.26c049afa.0":"2020-03-10T17:02:34.629Z","6.0.0-canary.1db5c9fc8.0":"2020-03-10T20:37:19.361Z","6.0.0-canary.4971637f4.0":"2020-03-10T22:58:31.433Z","6.0.0-canary.1ae8130ce.0":"2020-03-10T23:05:33.962Z","6.0.0-canary.8639c2690.0":"2020-03-11T06:33:25.732Z","6.0.0-canary.d5808057f.0":"2020-03-11T16:25:39.471Z","6.0.0-canary.b3f58203d.0":"2020-03-11T19:38:13.748Z","6.0.0-canary.bec065920.0":"2020-03-12T20:20:34.954Z","6.0.0-canary.776291ef0.0":"2020-03-17T19:20:54.089Z","6.0.0-canary.ece19f3dd.0":"2020-03-17T22:01:22.471Z","6.0.0-canary.4dc45af6c.0":"2020-03-18T01:48:05.325Z","6.0.0-canary.6b48781bf.0":"2020-03-18T15:34:55.426Z","6.0.0-canary.a88c8e4dc.0":"2020-03-19T17:36:02.508Z","6.0.0-canary.cafe18860.0":"2020-03-20T14:53:39.522Z","6.0.0-canary.35a32aaea.0":"2020-03-20T19:59:23.921Z","6.0.0-canary.e75deb854.0":"2020-03-20T22:15:25.265Z","6.0.0-canary.2cc6966f6.0":"2020-03-24T18:43:40.092Z","6.0.0-canary.8707953b6.0":"2020-03-24T18:47:16.804Z","6.0.0-canary.10af6cf39.0":"2020-03-25T18:18:33.777Z","6.0.0-canary.7d8f9c8d7.0":"2020-03-27T18:05:06.823Z","6.0.0-canary.d6315efe2.0":"2020-03-27T19:56:37.553Z","6.0.0-canary.a3016368d.0":"2020-03-27T21:19:45.273Z","6.0.0-canary.4b45b6620.0":"2020-03-31T15:56:32.085Z","6.0.0-canary.e84b9c8.0":"2020-04-01T16:56:07.365Z","6.0.0-canary.e33c49e.0":"2020-04-02T00:09:42.413Z","6.0.0-canary.f1f8e60.0":"2020-04-02T19:14:05.914Z","6.0.0-canary.1e17c49b3.0":"2020-04-03T18:04:14.842Z","6.0.0-canary.6a40ef217.0":"2020-04-03T19:24:52.389Z","6.0.0-canary.5f24faacb.0":"2020-04-08T15:36:45.063Z","6.0.0-canary.82fa986b9.0":"2020-04-08T15:41:53.263Z","6.0.0-canary.9930d9cc5.0":"2020-04-08T19:32:40.967Z","6.0.0-canary.6601d24af.0":"2020-04-09T00:30:06.856Z","6.0.0-canary.05f5e1583.0":"2020-04-09T00:47:31.814Z","6.0.0-canary.bce00e186.0":"2020-04-09T15:23:05.346Z","6.0.0-canary.927fa902c.0":"2020-04-09T18:46:43.784Z","6.0.0-canary.eb28b6ecc.0":"2020-04-10T19:31:11.400Z","6.0.0-canary.816a43b42.0":"2020-04-10T20:52:56.499Z","6.0.0-canary.008c4d319.0":"2020-04-13T16:34:12.223Z","6.0.0-canary.cbb3f28ca.0":"2020-04-14T05:06:11.517Z","6.0.0-canary.f172b0f90.0":"2020-04-14T23:10:37.409Z","6.0.0-canary.c02642273.0":"2020-04-15T16:17:39.154Z","6.0.0-canary.8a299b568.0":"2020-04-15T22:43:31.686Z","6.0.0-canary.490fbdc09.0":"2020-04-16T05:59:57.287Z","6.0.0-canary.f838c6e55.0":"2020-04-16T14:26:57.165Z","6.0.0-canary.ce6cb7024.0":"2020-04-16T17:19:24.713Z","6.0.0-canary.0ab62a65b.0":"2020-04-16T18:54:42.683Z","6.0.0-canary.ca61b656f.0":"2020-04-16T20:00:15.783Z","6.0.0-canary.45a6615e3.0":"2020-04-16T20:33:09.161Z","6.0.0-canary.4b04cdb0f.0":"2020-04-17T17:41:19.382Z","6.0.0-canary.b273afa93.0":"2020-04-17T23:03:10.096Z","6.0.0-canary.b70bc601e.0":"2020-04-17T23:21:44.548Z","6.0.0-canary.c4b4bba96.0":"2020-04-18T00:18:12.327Z","6.0.0-canary.6c1ebc721.0":"2020-04-20T19:58:37.794Z","6.0.0-canary.9cff4318f.0":"2020-04-20T20:56:14.385Z","6.0.0-canary.7b4482402.0":"2020-04-20T22:20:33.178Z","6.0.0-canary.deda86d8c.0":"2020-04-21T01:15:10.594Z","6.0.0-canary.d10412cb2.0":"2020-04-21T18:18:44.013Z","6.0.0-canary.c141801d5.0":"2020-04-21T19:42:13.942Z","6.0.0-canary.28d10a96e.0":"2020-04-22T22:07:27.592Z","7.0.0-canary.8540808be.0":"2020-04-23T17:26:17.648Z","6.0.0":"2020-04-23T17:26:48.267Z","7.0.0-canary.2673adb74.0":"2020-04-23T22:45:55.520Z","7.0.0-canary.b10d0d7f1.0":"2020-04-24T00:21:23.739Z","7.0.0-canary.3bd8c1bac.0":"2020-04-24T21:06:18.239Z","7.0.0-canary.b83c8dc22.0":"2020-04-24T21:19:05.189Z","7.0.0-canary.1b3dd846d.0":"2020-04-25T00:44:09.969Z","7.0.0-canary.29debfea7.0":"2020-04-27T12:32:33.175Z","7.0.0-canary.28d32f8e0.0":"2020-04-27T14:07:14.063Z","7.0.0-canary.af71cfdd6.0":"2020-04-28T23:17:41.576Z","7.0.0-canary.99d2fc961.0":"2020-04-29T10:44:16.758Z","7.0.0-canary.0e052b24f.0":"2020-04-30T01:29:51.226Z","7.0.0-canary.ff4bc632a.0":"2020-04-30T08:28:05.053Z","7.0.0-canary.b0f83d2fd.0":"2020-04-30T14:33:02.485Z","7.0.0-canary.e59906a57.0":"2020-05-01T15:42:31.550Z","7.0.0-canary.c02712b59.0":"2020-05-01T18:26:02.789Z","7.0.0-canary.15d65448e.0":"2020-05-01T19:22:49.977Z","7.0.0-canary.142b1549e.0":"2020-05-01T22:36:06.250Z","7.0.0-canary.524b7b812.0":"2020-05-03T20:47:48.373Z","7.0.0-canary.bd8ca9678.0":"2020-05-04T17:19:19.178Z","7.0.0-canary.2553e86fe.0":"2020-05-04T17:31:22.828Z","7.0.0-canary.03dec929e.0":"2020-05-04T23:34:15.329Z","7.0.0-canary.d92d8c93e.0":"2020-05-05T16:59:24.792Z","7.0.0-canary.09f591967.0":"2020-05-05T21:04:40.394Z","7.0.0-canary.3846ce311.0":"2020-05-06T14:09:44.708Z","7.0.0-canary.ed7f32463.0":"2020-05-06T16:08:07.494Z","7.0.0-canary.8135cc085.0":"2020-05-06T19:55:21.122Z","7.0.0-canary.deb212de4.0":"2020-05-06T22:18:56.556Z","7.0.0-canary.f83e00898.0":"2020-05-07T16:49:42.530Z","7.0.0-canary.047e6b337.0":"2020-05-08T18:38:41.687Z","7.0.0-canary.119e21426.0":"2020-05-08T20:22:40.235Z","7.0.0-canary.2f052d824.0":"2020-05-08T21:07:36.797Z","7.0.0-canary.e84444387.0":"2020-05-08T21:31:48.721Z","7.0.0-canary.893eb1876.0":"2020-05-11T14:13:22.227Z","7.0.0-canary.a5aeb3001.0":"2020-05-11T14:29:25.299Z","7.0.0-canary.610c68d97.0":"2020-05-11T19:32:47.458Z","7.0.0-canary.ed52af767.0":"2020-05-11T20:27:27.961Z","7.0.0-canary.058cfd23c.0":"2020-05-11T21:25:17.040Z","7.0.0-canary.0a371b4fe.0":"2020-05-12T23:18:25.878Z","7.0.0-canary.2139200b3.0":"2020-05-13T14:47:33.536Z","7.0.0-canary.744d751a0.0":"2020-05-14T04:43:03.027Z","7.0.0-canary.ad0c0c103.0":"2020-05-14T14:51:40.023Z","7.0.0-canary.fd8f8f2b7.0":"2020-05-18T17:53:50.819Z","7.0.0-canary.730920fbb.0":"2020-05-18T19:44:21.083Z","7.0.0-canary.bcdad99bb.0":"2020-05-19T03:18:14.171Z","7.0.0-canary.4497b86ed.0":"2020-05-19T03:50:59.195Z","7.0.0-canary.2e60575da.0":"2020-05-19T16:09:35.076Z","7.0.0-canary.e3eacefcc.0":"2020-05-19T17:38:21.890Z","7.0.0-canary.b065a4d2b.0":"2020-05-20T14:36:54.742Z","7.0.0-canary.4ebce8d78.0":"2020-05-20T20:50:44.986Z","7.0.0-canary.b0fdca492.0":"2020-05-20T23:03:03.697Z","7.0.0-canary.c67667e8e.0":"2020-05-21T14:13:02.856Z","7.0.0-canary.62b5f37db.0":"2020-05-21T16:41:25.493Z","7.0.0-canary.2e218dbf8.0":"2020-05-21T17:02:17.343Z","7.0.0-canary.7fd792bb9.0":"2020-05-21T17:14:48.067Z","7.0.0-canary.a66493cd8.0":"2020-05-21T17:18:24.072Z","7.0.0-canary.da05f66e1.0":"2020-05-21T17:20:09.758Z","7.0.0-canary.740860e78.0":"2020-05-21T17:26:52.764Z","7.0.0-canary.5cea2610f.0":"2020-05-21T17:28:56.252Z","7.0.0-canary.cf7747ef7.0":"2020-05-21T17:29:18.350Z","7.0.0-canary.862d0d7bc.0":"2020-05-21T17:32:02.105Z","7.0.0-canary.0008c8a91.0":"2020-05-21T19:33:20.860Z","7.0.0-canary.541638fa2.0":"2020-05-21T19:48:17.452Z","7.0.0-canary.6167cd075.0":"2020-05-21T20:21:16.609Z","7.0.0-canary.863ac1b0f.0":"2020-05-21T20:59:59.141Z","7.0.0-canary.d30a214ac.0":"2020-05-21T21:04:12.927Z","7.0.0-canary.62abbc8d7.0":"2020-05-21T21:28:49.755Z","7.0.0-canary.49bf31d5c.0":"2020-05-21T21:32:15.203Z","7.0.0-canary.8e17857d0.0":"2020-05-21T21:33:08.555Z","7.0.0-canary.c113fc942.0":"2020-05-21T22:46:34.353Z","7.0.0-canary.912d9021d.0":"2020-05-26T18:45:35.631Z","7.0.0-canary.68a2af131.0":"2020-05-26T19:07:45.295Z","7.0.0-canary.01de07011.0":"2020-05-26T19:52:47.311Z","7.0.0-canary.51d4535fe.0":"2020-05-26T21:35:18.981Z","7.0.0-canary.b86d826b7.0":"2020-05-26T22:13:54.203Z","7.0.0-canary.d91794c7e.0":"2020-05-26T23:55:06.593Z","7.0.0-canary.8c6d7e076.0":"2020-05-27T18:59:30.815Z","7.0.0-canary.5b5f62f93.0":"2020-05-27T19:16:32.694Z","7.0.0-canary.d9972abb1.0":"2020-05-27T20:21:00.905Z","7.0.0-canary.6556eda2b.0":"2020-05-27T20:30:11.317Z","7.0.0-canary.32aa23641.0":"2020-05-27T21:38:27.650Z","7.0.0-canary.654934dfa.0":"2020-05-28T00:37:04.533Z","7.0.0-canary.41910b8b8.0":"2020-05-28T00:51:29.797Z","7.0.0-canary.d66d22bf9.0":"2020-05-28T19:55:34.370Z","7.0.0-canary.8904f3cbe.0":"2020-05-29T16:50:33.842Z","7.0.0-canary.51512a4ac.0":"2020-05-29T19:15:21.953Z","7.0.0-canary.0743288fb.0":"2020-05-29T20:05:14.871Z","7.0.0-canary.06ef147b5.0":"2020-05-29T20:40:52.920Z","7.0.0-canary.8073a20a9.0":"2020-05-29T23:25:45.704Z","7.0.0-canary.72ff42330.0":"2020-06-01T16:44:30.354Z","7.0.0-canary.9ea52070f.0":"2020-06-01T16:49:15.360Z","7.0.0-canary.d86ad3b60.0":"2020-06-01T17:49:03.254Z","7.0.0-canary.b9776b1d0.0":"2020-06-01T18:26:18.172Z","7.0.0-canary.ba6f7c294.0":"2020-06-02T17:02:58.017Z","7.0.0-canary.cf3b664ab.0":"2020-06-02T18:23:48.519Z","7.0.0-canary.4ba3c9a31.0":"2020-06-02T23:52:29.585Z","7.0.0-canary.388b042c7.0":"2020-06-03T13:46:52.216Z","7.0.0-canary.cca1ca84d.0":"2020-06-03T16:03:31.852Z","7.0.0-canary.9b0b5f2e0.0":"2020-06-03T18:57:53.416Z","7.0.0-canary.0a7895f4d.0":"2020-06-03T21:09:18.118Z","7.0.0-canary.7461aad68.0":"2020-06-03T22:12:49.156Z","7.0.0-canary.a0dc2b5c4.0":"2020-06-04T21:14:30.548Z","7.0.0-canary.2b420c5b3.0":"2020-06-08T16:14:43.153Z","7.0.0-canary.8fa22aacc.0":"2020-06-08T18:04:49.347Z","7.0.0-canary.21c4e4ed8.0":"2020-06-08T18:44:34.010Z","7.0.0-canary.dfde46516.0":"2020-06-08T19:42:12.211Z","7.0.0-canary.05cc5c206.0":"2020-06-08T20:57:24.058Z","7.0.0-canary.3ee488f1c.0":"2020-06-09T14:54:14.340Z","7.0.0-canary.b83d720ee.0":"2020-06-09T17:26:29.641Z","7.0.0-canary.afb1c11a9.0":"2020-06-09T20:16:50.238Z","7.0.0-canary.39e6f71e2.0":"2020-06-09T23:40:01.560Z","7.0.0-canary.d4c66dc7d.0":"2020-06-11T17:46:59.593Z","7.0.0-canary.be4a19f9f.0":"2020-06-12T06:08:47.218Z","7.0.0-canary.a6ac8f629.0":"2020-06-15T21:31:03.018Z","7.0.0-canary.9833dc287.0":"2020-06-16T19:49:43.302Z","7.0.0-canary.3aa33998e.0":"2020-06-16T20:21:42.840Z","7.0.0-canary.d2b54d183.0":"2020-06-18T01:16:03.564Z","7.0.0-canary.f2a488e95.0":"2020-06-18T15:04:43.182Z","7.0.0-canary.bd8d1aafa.0":"2020-06-18T15:16:44.265Z","7.0.0-canary.1321eb968.0":"2020-06-19T19:21:43.001Z","7.0.0-canary.db5cc0382.0":"2020-06-19T19:28:10.779Z","7.0.0-canary.6ac9bf031.0":"2020-06-19T19:48:37.711Z","7.0.0-canary.c21b5c367.0":"2020-06-19T20:10:58.795Z","7.0.0-canary.bfdd7fd39.0":"2020-06-19T20:20:18.727Z","7.0.0-canary.10b505785.0":"2020-06-19T20:21:45.935Z","7.0.0-canary.6483d3f44.0":"2020-06-19T20:37:59.351Z","7.0.0-canary.30a74e921.0":"2020-06-19T20:40:13.531Z","7.0.0-canary.c20727498.0":"2020-06-19T20:43:03.822Z","7.0.0-canary.4e360ae94.0":"2020-06-19T20:59:48.803Z","7.0.0-canary.8550fa53b.0":"2020-06-19T21:02:06.522Z","7.0.0-canary.93ade142e.0":"2020-06-19T21:03:19.570Z","7.0.0-canary.a0032f5bb.0":"2020-06-19T21:28:30.009Z","7.0.0-canary.3f342e721.0":"2020-06-19T21:30:43.659Z","7.0.0-canary.ff89457cc.0":"2020-06-19T21:31:42.189Z","7.0.0-canary.4a1855cf8.0":"2020-06-19T21:34:25.206Z","7.0.0-canary.8602f1b4d.0":"2020-06-22T17:24:05.801Z","7.0.0-canary.69f9f0982.0":"2020-06-22T21:14:57.367Z","7.0.0-canary.369a293f0.0":"2020-06-22T21:17:34.655Z","7.0.0-canary.f1432b5c6.0":"2020-06-22T21:25:35.466Z","7.0.0-canary.4757a16b4.0":"2020-06-22T21:53:43.711Z","7.0.0-canary.f8f472762.0":"2020-06-22T21:57:46.863Z","7.0.0-canary.7e4d55c34.0":"2020-06-22T22:29:40.866Z","7.0.0-canary.bd1dbc91f.0":"2020-06-23T14:28:32.867Z","7.0.0-canary.31523bc62.0":"2020-06-23T14:33:59.425Z","7.0.0-canary.a96b6d4d6.0":"2020-06-23T14:40:17.506Z","7.0.0-canary.ef3a09533.0":"2020-06-23T14:48:35.695Z","7.0.0-canary.080965f39.0":"2020-06-23T15:17:57.493Z","7.0.0-canary.1bd67b65d.0":"2020-06-23T16:00:24.254Z","7.0.0-canary.18ca31248.0":"2020-06-23T18:25:22.435Z","7.0.0-canary.39cf00836.0":"2020-06-23T18:48:17.928Z","7.0.0-canary.1bfda9e05.0":"2020-06-23T19:00:46.106Z","7.0.0-canary.08731bd95.0":"2020-06-23T19:03:21.342Z","7.0.0":"2020-06-23T19:11:15.536Z","8.0.0-canary.a3212b209.0":"2020-06-23T19:12:06.974Z","8.0.0-canary.15e81fe98.0":"2020-06-23T19:41:28.667Z","8.0.0-canary.004c9d392.0":"2020-06-23T22:56:16.937Z","8.0.0-canary.03bde00f5.0":"2020-06-24T00:31:59.136Z","8.0.0-canary.599b8c319.0":"2020-06-24T14:56:57.816Z","8.0.0-canary.87e3be418.0":"2020-06-24T17:53:36.704Z","8.0.0-canary.035cf2a6f.0":"2020-06-24T18:38:57.820Z","8.0.0-canary.2fed2c12f.0":"2020-06-25T20:02:07.122Z","8.0.0-canary.38197b443.0":"2020-06-25T21:22:52.776Z","8.0.0-canary.69a35e80c.0":"2020-06-26T17:39:05.900Z","8.0.0-canary.df7154fb3.0":"2020-06-26T18:17:06.619Z","8.0.0-canary.d5618602a.0":"2020-06-26T21:48:35.558Z","8.0.0-canary.e590b376b.0":"2020-06-26T23:23:55.518Z","8.0.0-canary.0c9d6bd2d.0":"2020-06-29T17:15:39.510Z","8.0.0-canary.c1fec4246.0":"2020-06-29T17:31:03.132Z","8.0.0-canary.c678a9d34.0":"2020-06-29T17:52:02.505Z","8.0.0-canary.521afaf6e.0":"2020-06-30T15:05:55.452Z","8.0.0-canary.a2ad48839.0":"2020-06-30T19:14:41.734Z","8.0.0-canary.ec2385881.0":"2020-06-30T21:47:21.205Z","8.0.0-canary.610c26c4a.0":"2020-07-01T14:56:38.198Z","8.0.0-canary.e2ea4a99e.0":"2020-07-01T19:27:34.161Z","8.0.0-canary.a78ceb112.0":"2020-07-01T19:39:18.516Z","8.0.0-canary.b0c456d33.0":"2020-07-06T22:41:52.617Z","8.0.0-canary.2e5711e04.0":"2020-07-08T16:48:33.141Z","8.0.0-canary.811fc5d24.0":"2020-07-08T17:16:07.660Z","8.0.0-canary.6ed717ddd.0":"2020-07-08T19:44:31.022Z","8.0.0-canary.d850de590.0":"2020-07-09T18:05:52.830Z","8.0.0-canary.e07a70841.0":"2020-07-09T18:35:34.680Z","8.0.0-canary.37947ed6c.0":"2020-07-09T20:36:29.677Z","8.0.0-canary.5d443afec.0":"2020-07-09T20:52:07.335Z","8.0.0-canary.9ac1ed914.0":"2020-07-09T21:20:58.600Z","8.0.0-canary.1e7cb6198.0":"2020-07-09T22:12:48.164Z","8.0.0-canary.843f636c0.0":"2020-07-10T17:43:06.962Z","8.0.0-canary.b2edaeead.0":"2020-07-10T18:07:35.838Z","8.0.0-canary.5dac1f624.0":"2020-07-13T16:34:38.613Z","8.0.0-canary.4497acef8.0":"2020-07-14T14:20:37.547Z","8.0.0-canary.e6e23019d.0":"2020-07-14T20:10:54.096Z","8.0.0-canary.d548d7a92.0":"2020-07-14T21:13:22.634Z","8.0.0-canary.58ce529cc.0":"2020-07-14T21:15:26.126Z","8.0.0-canary.a0f1202dc.0":"2020-07-14T21:34:48.217Z","8.0.0-canary.ad4df58c1.0":"2020-07-15T00:09:44.904Z","8.0.0-canary.01db89053.0":"2020-07-16T16:39:51.817Z","8.0.0-canary.fb5a4cdeb.0":"2020-07-20T19:20:22.267Z","8.0.0-canary.8df0f517c.0":"2020-07-20T23:56:01.240Z","8.0.0-canary.abcdbcfeb.0":"2020-07-21T00:50:32.050Z","8.0.0-canary.7bd5075de.0":"2020-07-21T18:47:33.066Z","8.0.0-canary.405a29a20.0":"2020-07-22T22:23:38.536Z","8.0.0-canary.f3693ac4c.0":"2020-07-22T22:34:09.537Z","8.0.0-canary.12a109680.0":"2020-07-22T23:03:53.111Z","8.0.0-canary.bbd06696e.0":"2020-07-22T23:53:19.071Z","8.0.0-canary.4951e7651.0":"2020-07-23T01:50:02.665Z","8.0.0-canary.75deebbef.0":"2020-07-23T17:47:08.642Z","8.0.0-canary.95aff33ee.0":"2020-07-23T18:47:48.018Z","8.0.0-canary.9d9f47473.0":"2020-07-23T19:59:12.421Z","8.0.0-canary.00dfbf6be.0":"2020-07-23T21:00:01.960Z","8.0.0-canary.b87e522d2.0":"2020-07-23T21:24:05.080Z","8.0.0-canary.5b3e150e5.0":"2020-07-24T01:24:23.460Z","8.0.0-canary.f0ae11786.0":"2020-07-24T01:44:00.717Z","8.0.0-canary.fb4ee66c0.0":"2020-07-24T02:11:07.882Z","8.0.0-canary.5511e0aeb.0":"2020-07-24T16:57:12.125Z","8.0.0-canary.8388a9bf6.0":"2020-07-24T20:13:43.181Z","8.0.0-canary.ac405eae1.0":"2020-07-27T15:06:59.761Z","8.0.0-canary.75553837c.0":"2020-07-27T15:12:56.838Z","8.0.0-canary.b96fbfc7a.0":"2020-07-27T15:38:31.590Z","8.0.0-canary.61f1a8d85.0":"2020-07-27T15:47:33.007Z","8.0.0-canary.81dc33377.0":"2020-07-27T15:59:41.266Z","8.0.0-canary.ffd9ede58.0":"2020-07-27T16:32:59.987Z","8.0.0-canary.52dc55acf.0":"2020-07-27T17:08:58.465Z","8.0.0-canary.d4274ff05.0":"2020-07-27T19:52:01.898Z","8.0.0-canary.b82d0696d.0":"2020-07-27T19:58:35.772Z","8.0.0-canary.c2852000d.0":"2020-07-27T20:58:48.284Z","8.0.0-canary.f86f83f54.0":"2020-07-27T21:54:30.946Z","8.0.0-canary.41eb1684c.0":"2020-07-28T17:50:48.648Z","8.0.0-canary.9e2f6c450.0":"2020-07-28T22:39:44.913Z","8.0.0-canary.e6950b55a.0":"2020-07-28T22:52:57.506Z","8.0.0-canary.5e51ee38e.0":"2020-07-28T23:16:29.325Z","8.0.0-canary.a3898ffcf.0":"2020-07-29T00:36:51.076Z","8.0.0-canary.bc5cc6c96.0":"2020-07-29T00:49:40.935Z","8.0.0-canary.9bdeaf928.0":"2020-07-29T01:21:09.371Z","8.0.0-canary.fde2c1f9d.0":"2020-07-29T01:35:26.129Z","8.0.0-canary.6b3876d5d.0":"2020-07-29T01:39:13.481Z","8.0.0-canary.30ce17873.0":"2020-07-29T17:15:19.723Z","8.0.0-canary.f6bb43bf0.0":"2020-07-29T18:25:53.947Z","8.0.0-canary.6af75f6ab.0":"2020-07-30T00:01:53.234Z","8.0.0-canary.42d7a65aa.0":"2020-07-30T00:10:56.277Z","8.0.0-canary.85abdabb7.0":"2020-07-30T00:15:44.979Z","8.0.0-canary.49fb20ca3.0":"2020-07-30T01:28:04.404Z","8.0.0-canary.962d4abbb.0":"2020-07-30T16:10:40.450Z","8.0.0-canary.2fcee40cb.0":"2020-07-30T17:21:55.989Z","8.0.0-canary.bd5987f5a.0":"2020-07-30T17:46:34.830Z","8.0.0-canary.005e86a9b.0":"2020-07-30T18:00:24.357Z","8.0.0-canary.e309c7c68.0":"2020-07-30T18:09:06.970Z","8.0.0-canary.935a51cc0.0":"2020-07-30T18:20:52.050Z","8.0.0-canary.74839da7b.0":"2020-07-30T18:31:50.065Z","8.0.0-canary.f041a48c9.0":"2020-07-30T23:00:07.450Z","8.0.0-canary.fbb1381e1.0":"2020-07-31T15:50:53.167Z","8.0.0-canary.7f61d5785.0":"2020-07-31T17:23:27.824Z","8.0.0-canary.e1bc84d10.0":"2020-08-03T17:51:15.446Z","8.0.0-canary.096a7a066.0":"2020-08-03T17:54:09.065Z","8.0.0-canary.aa3a3e5a4.0":"2020-08-03T17:54:51.044Z","8.0.0-canary.5903d39af.0":"2020-08-03T17:55:05.855Z","8.0.0-canary.72258f898.0":"2020-08-04T01:17:48.155Z","8.0.0-canary.1b44b43c8.0":"2020-08-04T16:48:45.753Z","8.0.0-canary.e9d2e2f96.0":"2020-08-04T20:24:40.852Z","8.0.0-canary.b9dff0a19.0":"2020-08-05T03:49:17.031Z","8.0.0-canary.2bd09a706.0":"2020-08-05T03:54:27.035Z","8.0.0-canary.e0560522f.0":"2020-08-05T17:20:24.837Z","8.0.0-canary.08ca4d0ec.0":"2020-08-05T17:39:51.703Z","8.0.0-canary.08090126b.0":"2020-08-06T19:33:03.704Z","8.0.0-canary.e8bf5b2ac.0":"2020-08-06T21:50:28.089Z","8.0.0-canary.e3b746208.0":"2020-08-06T22:27:12.098Z","8.0.0-canary.96a640534.0":"2020-08-06T22:41:55.313Z","8.0.0-canary.9f9aac825.0":"2020-08-07T20:51:48.422Z","8.0.0-canary.fc65fd00b.0":"2020-08-10T15:20:57.122Z","8.0.0-canary.02e372c5f.0":"2020-08-10T15:49:02.284Z","8.0.0-canary.66669e3b6.0":"2020-08-10T15:53:01.645Z","8.0.0-canary.6d1ea9761.0":"2020-08-11T14:31:17.474Z","8.0.0-canary.79414bf9f.0":"2020-08-11T19:02:22.140Z","8.0.0-canary.85a5272df.0":"2020-08-11T20:08:38.672Z","8.0.0-canary.fda053eb8.0":"2020-08-12T20:04:37.771Z","8.0.0-canary.760873445.0":"2020-08-12T21:43:42.221Z","8.0.0-canary.2f4711a30.0":"2020-08-12T21:53:42.161Z","8.0.0-canary.2d72f3659.0":"2020-08-12T22:01:09.861Z","8.0.0-canary.1fee70a5e.0":"2020-08-12T23:29:08.116Z","8.0.0-canary.023f3fa34.0":"2020-08-13T01:12:51.292Z","8.0.0-canary.80f3a9e5d.0":"2020-08-13T01:29:29.734Z","8.0.0-canary.a1dcfe97c.0":"2020-08-13T08:50:21.734Z","8.0.0-canary.af332d5be.0":"2020-08-13T21:17:54.147Z","8.0.0-canary.7dd4567c4.0":"2020-08-14T00:51:28.471Z","8.0.0-canary.ff870005a.0":"2020-08-14T01:16:39.326Z","8.0.0-canary.150f427a0.0":"2020-08-14T13:30:17.903Z","8.0.0-canary.bcc58290a.0":"2020-08-14T23:22:54.949Z","8.0.0-canary.4f55400bb.0":"2020-08-17T16:38:52.503Z","8.0.0-canary.000d64815.0":"2020-08-17T17:04:45.331Z","8.0.0-canary.defa599a8.0":"2020-08-17T20:32:16.557Z","8.0.0-canary.66b8ed7e6.0":"2020-08-18T18:37:17.257Z","8.0.0-canary.e2b1033df.0":"2020-08-19T18:42:26.094Z","8.0.0-canary.2e8c3dd2e.0":"2020-08-19T19:24:22.111Z","8.0.0-canary.b2e80a5d9.0":"2020-08-19T22:21:28.701Z","8.0.0-canary.ff88df637.0":"2020-08-19T22:33:31.013Z","8.0.0-canary.32fb314cd.0":"2020-08-20T10:38:07.769Z","8.0.0-canary.546277d32.0":"2020-08-20T16:43:48.319Z","8.0.0-canary.da72839f4.0":"2020-08-20T18:00:24.637Z","8.0.0-canary.346069ccb.0":"2020-08-20T18:18:55.747Z","8.0.0-canary.e27c5802f.0":"2020-08-20T19:15:34.933Z","8.0.0-canary.f4532b9c8.0":"2020-08-20T19:58:09.968Z","8.0.0-canary.fbf73c2a6.0":"2020-08-20T21:06:56.021Z","8.0.0-canary.cf800124f.0":"2020-08-20T21:53:02.960Z","8.0.0-canary.95e4eeea7.0":"2020-08-20T23:29:17.328Z","8.0.0-canary.91ab1c62a.0":"2020-08-21T15:12:12.416Z","8.0.0-canary.58eaa9f02.0":"2020-08-21T20:00:48.049Z","8.0.0-canary.238216fc4.0":"2020-08-24T15:41:18.104Z","8.0.0-canary.a1c65593d.0":"2020-08-25T03:04:17.739Z","8.0.0-canary.708cc09c4.0":"2020-08-25T15:56:51.002Z","8.0.0-canary.19bea2ad3.0":"2020-08-26T18:49:49.711Z","8.0.0-canary.911014711.0":"2020-08-27T16:08:31.445Z","8.0.0-canary.d3387f54c.0":"2020-09-03T20:56:05.143Z","8.0.0-canary.2ccf996cc.0":"2020-09-03T20:56:19.622Z","8.0.0-canary.744bfe5d8.0":"2020-09-03T20:57:06.765Z","8.0.0-canary.78da96eaf.0":"2020-09-08T19:13:17.799Z","8.0.0-canary.b0ed593cc.0":"2020-09-09T06:16:27.527Z","8.0.0-canary.85a1fa9ea.0":"2020-09-10T21:11:00.092Z","8.0.0-canary.0bc41a9c7.0":"2020-09-11T17:50:14.045Z","8.0.0-canary.fc0eb5013.0":"2020-09-11T19:56:05.314Z","8.0.0-canary.319bf66de.0":"2020-09-11T23:10:40.593Z","8.0.0-canary.5bfc305ec.0":"2020-09-13T23:00:40.399Z","8.0.0-canary.83d83f131.0":"2020-09-14T00:33:10.420Z","8.0.0-canary.d52b165b5.0":"2020-09-15T14:54:51.734Z","8.0.0-canary.a831d4799.0":"2020-09-15T17:52:21.983Z","8.0.0-canary.a306aa488.0":"2020-09-17T00:59:17.066Z","8.0.0-canary.fd608ff66.0":"2020-09-17T14:26:15.598Z","8.0.0-canary.3e435ba57.0":"2020-09-17T14:43:34.762Z","8.0.0-canary.c250ec52a.0":"2020-09-17T20:11:02.237Z","8.0.0-canary.e34e411b1.0":"2020-09-17T20:18:22.350Z","8.0.0-canary.4e9343929.0":"2020-09-17T20:43:39.742Z","8.0.0-canary.4e5c350c2.0":"2020-09-21T21:14:39.861Z","8.0.0-canary.16c563ef7.0":"2020-09-22T19:46:48.771Z","8.0.0-canary.fd8af3d43.0":"2020-09-23T19:32:50.850Z","8.0.0-canary.d4cd83a85.0":"2020-09-25T00:36:14.878Z","8.0.0-canary.199aecdfb.0":"2020-09-25T15:51:51.859Z","8.0.0-canary.38ef4501f.0":"2020-09-30T18:25:06.206Z","8.0.0-canary.774dcfc8e.0":"2020-10-01T09:54:42.617Z","8.0.0-canary.0f60323a8.0":"2020-10-08T21:10:37.986Z","8.0.0-canary.d71622574.0":"2020-10-09T16:32:21.922Z","8.0.0-canary.7a9afaf4b.0":"2020-10-09T22:54:31.916Z","8.0.0-canary.8a39352c8.0":"2020-10-12T17:47:00.945Z","8.0.0-canary.790ca85fd.0":"2020-10-12T21:57:20.721Z","8.0.0-canary.174c0becf.0":"2020-10-14T02:16:15.493Z","8.0.0-canary.c71ebfa02.0":"2020-10-14T04:18:09.884Z","8.0.0-canary.2ab716cbd.0":"2020-10-16T00:04:51.748Z","8.0.0-canary.43c1c5e2f.0":"2020-10-19T14:08:39.688Z","8.0.0-canary.ccc64eea3.0":"2020-10-26T22:52:10.120Z","8.0.0-canary.a79cdd019.0":"2020-10-27T16:32:11.591Z","8.0.0-canary.596e98424.0":"2020-10-28T16:04:11.928Z","8.0.0-canary.05d5facc2.0":"2020-10-28T16:12:46.193Z","8.0.0-canary.291b3553d.0":"2020-10-28T17:45:38.322Z","8.0.0-canary.dbc449b09.0":"2020-10-28T18:13:21.674Z","8.0.0-canary.4794b25da.0":"2020-10-28T18:41:47.619Z","8.0.0-canary.c61db90a5.0":"2020-10-28T19:00:23.289Z","8.0.0-canary.6d9648ab2.0":"2020-10-29T20:33:11.720Z","8.0.0-canary.5511c5254.0":"2020-10-30T18:00:51.180Z","8.0.0-canary.bd6e302a4.0":"2020-11-02T17:05:29.905Z","9.0.0-canary.d6b5cd418.0":"2020-11-02T22:59:50.758Z","8.0.0":"2020-11-02T23:00:10.622Z","9.0.0-canary.fdf9a2634.0":"2020-11-03T23:22:03.919Z","9.0.0-canary.4a86f30a0.0":"2020-11-03T23:28:35.667Z","9.0.0-canary.fc8b045f1.0":"2020-11-03T23:37:42.908Z","9.0.0-canary.a0b2db26b.0":"2020-11-04T00:09:47.275Z","9.0.0-canary.419e03572.0":"2020-11-04T01:33:35.257Z","9.0.0-canary.a432ad542.0":"2020-11-06T01:46:27.438Z","9.0.0-canary.e2e8aef1e.0":"2020-11-06T02:05:52.807Z","9.0.0-canary.ec6b68b34.0":"2020-11-06T18:57:07.528Z","9.0.0-canary.b39094d14.0":"2020-11-06T21:16:35.156Z","9.0.0-canary.8648b8258.0":"2020-11-12T10:45:10.966Z","9.0.0-canary.240c5f74f.0":"2020-11-12T20:21:22.046Z","9.0.0-canary.6cf6ba4f4.0":"2020-11-16T18:50:28.469Z","9.0.0-canary.07f3e01b7.0":"2020-11-16T21:46:20.165Z","9.0.0-canary.23491cf85.0":"2020-11-17T00:17:48.803Z","9.0.0-canary.b659d4fc3.0":"2020-11-17T00:25:40.671Z","9.0.0-canary.d8a3aed67.0":"2020-11-17T15:28:00.901Z","9.0.0-canary.482ff9091.0":"2020-11-17T17:58:39.401Z","9.0.0-canary.99cfb6bd5.0":"2020-11-18T18:44:25.957Z","9.0.0-canary.b98d15d90.0":"2020-11-18T22:35:24.158Z","9.0.0-canary.30c11bfc2.0":"2020-11-19T01:26:35.306Z","9.0.0-canary.1b731d51b.0":"2020-11-19T18:52:56.068Z","9.0.0-canary.4ae94ff78.0":"2020-11-19T18:55:50.978Z","9.0.0-canary.7ad038e1d.0":"2020-11-19T19:18:57.208Z","9.0.0-canary.a41527604.0":"2020-11-19T20:00:44.343Z","9.0.0-canary.7b0e2b377.0":"2020-11-20T22:56:19.216Z","9.0.0-canary.c927a5d05.0":"2020-11-23T19:48:01.679Z","9.0.0-canary.b349b5185.0":"2020-11-24T17:09:26.700Z","9.0.0-canary.9083b7d61.0":"2020-11-24T21:16:01.916Z","9.0.0-canary.eff7b46ac.0":"2020-11-24T23:31:36.555Z","9.0.0-canary.ae27b44b0.0":"2020-11-25T15:34:09.450Z","9.0.0-canary.2fbba2554.0":"2020-11-30T17:40:55.377Z","9.0.0-canary.6d8574fe1.0":"2020-11-30T17:51:53.618Z","9.0.0-canary.fd22355f7.0":"2020-11-30T23:00:06.963Z","9.0.0-canary.c4ab98722.0":"2020-12-02T00:57:20.944Z","9.0.0-canary.977585650.0":"2020-12-02T14:42:49.901Z","9.0.0-canary.c7edfc7b6.0":"2020-12-02T14:50:09.898Z","9.0.0-canary.4f3347306.0":"2020-12-02T15:08:04.537Z","9.0.0-canary.37fbae10d.0":"2020-12-02T18:16:59.628Z","9.0.0-canary.11da3c0db.0":"2020-12-02T20:23:02.302Z","9.0.0-canary.489d4c219.0":"2020-12-03T15:30:14.304Z","9.0.0-canary.6557a69d9.0":"2020-12-03T15:42:04.083Z","9.0.0-canary.4ea1b7c69.0":"2020-12-03T15:58:44.209Z","9.0.0-canary.eaeb78ce3.0":"2020-12-03T17:01:50.979Z","9.0.0-canary.1c156d69d.0":"2020-12-03T20:45:48.121Z","9.0.0-canary.832668d33.0":"2020-12-04T18:06:29.782Z","9.0.0-canary.4321323e4.0":"2020-12-07T11:29:31.514Z","9.0.0-canary.2d5f32d41.0":"2020-12-07T16:42:17.850Z","9.0.0-canary.8239afc64.0":"2020-12-07T19:50:04.382Z","9.0.0-canary.6871336f1.0":"2020-12-08T16:02:02.692Z","9.0.0-canary.9f718da94.0":"2020-12-08T16:13:50.056Z","9.0.0-canary.1fccb1418.0":"2020-12-08T16:28:52.764Z","9.0.0-canary.afb68894e.0":"2020-12-08T16:32:53.656Z","9.0.0-canary.fd88d40c2.0":"2020-12-08T16:46:13.572Z","9.0.0-canary.ba9e3109c.0":"2020-12-08T19:05:50.603Z","9.0.0-canary.1085c3b2d.0":"2020-12-09T19:11:33.782Z","9.0.0-canary.c5dda809d.0":"2020-12-09T20:50:22.836Z","9.0.0-canary.f5f1bd86a.0":"2020-12-09T21:08:03.502Z","9.0.0-canary.00f38200f.0":"2020-12-11T15:45:53.589Z","9.0.0-canary.ac41a5729.0":"2020-12-11T16:28:53.500Z","9.0.0-canary.7fe0e4f05.0":"2020-12-11T17:06:02.263Z","9.0.0-canary.9244508bd.0":"2020-12-11T19:07:52.654Z","9.0.0-canary.384a8eeb1.0":"2020-12-16T17:02:19.684Z","9.0.0-canary.eabf9d5c2.0":"2020-12-16T18:28:08.650Z","9.0.0-canary.30fdfd06e.0":"2020-12-16T19:07:58.844Z","9.0.0-canary.9590a8f90.0":"2020-12-22T17:42:27.211Z","9.0.0-canary.f89d8b8f2.0":"2020-12-22T23:05:37.117Z","9.0.0-canary.fb194dd35.0":"2020-12-28T20:46:06.445Z","9.0.0-canary.64f36e287.0":"2020-12-28T21:09:00.616Z","9.0.0-canary.b7bbe7022.0":"2020-12-29T18:48:28.959Z","9.0.0":"2020-12-29T19:46:33.991Z","10.0.0-canary.776c18681.0":"2020-12-30T00:40:39.065Z","10.0.0-canary.671d72d95.0":"2020-12-30T20:12:22.260Z","10.0.0-canary.b4f5a1c9e.0":"2020-12-30T21:46:57.580Z","10.0.0-canary.a94bd8deb.0":"2020-12-30T22:04:44.408Z","10.0.0-canary.5d128511b.0":"2020-12-30T22:10:10.507Z","10.0.0-canary.365c69360.0":"2021-01-05T17:48:46.494Z","10.0.0-canary.700a8261a.0":"2021-01-05T21:01:05.045Z","10.0.0-canary.766981c15.0":"2021-01-05T22:40:50.055Z","10.0.0-canary.b28c576d9.0":"2021-01-05T22:50:28.970Z","10.0.0-canary.968735356.0":"2021-01-06T15:51:26.377Z","10.0.0-canary.c5e18b020.0":"2021-01-06T19:44:44.335Z","10.0.0-canary.bcff8a66a.0":"2021-01-06T20:26:50.005Z","10.0.0-canary.79328c9ff.0":"2021-01-07T02:34:39.793Z","10.0.0-canary.121e1f303.0":"2021-01-07T23:20:21.678Z","10.0.0-canary.abdd10065.0":"2021-01-08T17:52:02.166Z","10.0.0-canary.089de519c.0":"2021-01-08T22:21:07.273Z","10.0.0-canary.163119837.0":"2021-01-08T23:45:47.606Z","10.0.0-canary.b8a1a58e4.0":"2021-01-11T16:24:41.890Z","10.0.0-canary.7584267ff.0":"2021-01-12T01:12:52.686Z","10.0.0-canary.251ac04c0.0":"2021-01-12T19:55:46.030Z","10.0.0-canary.772cc1068.0":"2021-01-14T00:07:36.898Z","10.0.0-canary.fe13dd130.0":"2021-01-14T01:10:47.952Z","10.0.0-canary.c7c5da28f.0":"2021-01-14T01:34:37.722Z","10.0.0-canary.b2faa116a.0":"2021-01-19T19:27:06.011Z","10.0.0-canary.0c95c9f7b.0":"2021-01-19T22:54:19.796Z","10.0.0-canary.5268222c4.0":"2021-01-20T19:19:48.718Z","10.0.0-canary.2ed2d829b.0":"2021-01-20T23:08:33.520Z","10.0.0-canary.df00c2b30.0":"2021-01-21T19:55:30.513Z","10.0.0-canary.fd61b0476.0":"2021-01-21T20:10:07.247Z","10.0.0-canary.3fb3a0265.0":"2021-01-22T00:05:22.869Z","10.0.0-canary.07deaec27.0":"2021-01-22T16:56:55.856Z","10.0.0-canary.d2959b16c.0":"2021-01-22T18:52:37.545Z","10.0.0-canary.75f3bfe7c.0":"2021-01-22T22:52:01.254Z","10.0.0-canary.b9adb7a0f.0":"2021-01-22T23:36:19.927Z","10.0.0-canary.d29ec2862.0":"2021-01-25T16:24:33.867Z","10.0.0-canary.96be07c68.0":"2021-01-26T00:10:42.729Z","10.0.0-canary.e383944e9.0":"2021-01-26T01:45:30.371Z","10.0.0-canary.623af861e.0":"2021-01-26T03:45:44.569Z","10.0.0-canary.6863fd43a.0":"2021-01-26T21:33:56.669Z","10.0.0-canary.ea55b87ca.0":"2021-01-26T23:46:40.590Z","10.0.0-canary.e902ff05f.0":"2021-01-27T00:04:45.175Z","10.0.0-canary.2c9fc538a.0":"2021-01-27T00:27:45.101Z","10.0.0-canary.6bf56aaa4.0":"2021-01-27T01:20:43.188Z","10.0.0-canary.994873795.0":"2021-01-27T14:51:41.797Z","10.0.0-canary.96878e1d0.0":"2021-01-27T18:02:51.888Z","10.0.0-canary.3c117cdcc.0":"2021-01-27T18:32:57.919Z","10.0.0-canary.b411e7033.0":"2021-01-27T22:04:11.148Z","10.0.0-canary.a9ac16b4a.0":"2021-01-27T23:04:04.462Z","10.0.0-canary.fec7b42ca.0":"2021-01-28T19:15:13.172Z","10.0.0-canary.8e66dbfee.0":"2021-02-01T23:21:00.314Z","10.0.0-canary.637d15da6.0":"2021-02-02T18:49:50.267Z","10.0.0-canary.fb793939e.0":"2021-02-02T23:43:34.437Z","10.0.0-canary.15a4d40dd.0":"2021-02-03T02:19:03.178Z","10.0.0-canary.7a003acf0.0":"2021-02-04T02:34:32.114Z","10.0.0-canary.05f249666.0":"2021-02-04T17:50:47.362Z","10.0.0-canary.1a3a39629.0":"2021-02-04T18:43:47.135Z","10.0.0-canary.8b1cdb1be.0":"2021-02-04T22:35:24.655Z","10.0.0-canary.8271f00f7.0":"2021-02-04T23:01:09.528Z","10.0.0-canary.533092a90.0":"2021-02-05T03:47:16.224Z","11.0.0-canary.633a9fc7a.0":"2021-02-05T16:18:02.338Z","10.0.0":"2021-02-05T16:19:31.432Z","11.0.0-canary.b5227247d.0":"2021-02-05T17:42:35.025Z","11.0.0-canary.95322b11e.0":"2021-02-05T23:32:10.940Z","11.0.0-canary.1f318ff0f.0":"2021-02-06T00:05:21.789Z","11.0.0-canary.ab12cf7a3.0":"2021-02-08T15:04:05.343Z","11.0.0-canary.98db2c5ec.0":"2021-02-08T15:35:09.169Z","11.0.0-canary.1f86b9f6d.0":"2021-02-08T17:17:59.066Z","11.0.0-canary.aac8f5d9a.0":"2021-02-08T18:00:59.438Z","11.0.0-canary.750e18fc7.0":"2021-02-08T21:41:51.852Z","11.0.0-canary.b62b1266d.0":"2021-02-09T21:53:13.590Z","11.0.0-canary.a6b3101fb.0":"2021-02-11T23:17:27.319Z","11.0.0-canary.ed88df700.0":"2021-02-12T00:07:25.050Z","11.0.0-canary.d30efe6b4.0":"2021-02-12T02:42:24.109Z","11.0.0-canary.0393bdc4b.0":"2021-02-12T04:31:24.824Z","11.0.0-canary.7cd26af4d.0":"2021-02-12T15:59:54.357Z","11.0.0-canary.71fe9a067.0":"2021-02-12T16:31:30.594Z","11.0.0-canary.0fd56a86b.0":"2021-02-13T00:12:14.410Z","11.0.0-canary.f19bbc4af.0":"2021-02-16T22:16:48.795Z","11.0.0-canary.f9cac96cc.0":"2021-02-17T16:10:24.035Z","11.0.0-canary.79ce0878b.0":"2021-02-17T19:25:38.976Z","11.0.0-canary.d6e507b5b.0":"2021-02-17T19:58:37.305Z","11.0.0-canary.f2658381b.0":"2021-02-17T22:45:16.735Z","11.0.0-canary.97c4d4035.0":"2021-02-18T02:35:34.867Z","11.0.0-canary.f5bb4648c.0":"2021-02-18T16:06:02.439Z","11.0.0-canary.302c7a960.0":"2021-02-18T18:38:40.349Z","11.0.0-canary.aa0aaf026.0":"2021-02-18T19:23:56.705Z","11.0.0-canary.07ff0c452.0":"2021-02-18T19:42:57.852Z","11.0.0-canary.bed7ecd3e.0":"2021-02-18T23:28:02.481Z","11.0.0-canary.06dead2d6.0":"2021-02-19T00:37:32.805Z","11.0.0-canary.cddb03553.0":"2021-02-19T03:13:40.049Z","11.0.0-canary.d6d8d0476.0":"2021-02-19T05:37:07.862Z","11.0.0-canary.0b4a4b2eb.0":"2021-02-19T15:46:14.969Z","11.0.0-canary.3201cae47.0":"2021-02-19T23:01:11.914Z","11.0.0-canary.f1b1fd5d3.0":"2021-02-22T19:49:57.001Z","11.0.0-canary.7899e0fe0.0":"2021-02-22T22:46:23.172Z","11.0.0-canary.f19c86d13.0":"2021-02-22T23:31:05.963Z","11.0.0-canary.60e892d79.0":"2021-02-23T01:14:35.350Z","11.0.0-canary.c96bfa495.0":"2021-02-23T19:33:27.827Z","11.0.0-canary.fa9b59f67.0":"2021-02-23T19:34:47.333Z","11.0.0-canary.869e3497c.0":"2021-02-23T19:35:21.098Z","11.0.0-canary.8ecd7c9a9.0":"2021-02-23T19:51:07.297Z","11.0.0-canary.9c85d505b.0":"2021-02-23T22:16:06.411Z","11.0.0-canary.9f2e85fb8.0":"2021-02-24T01:48:44.558Z","11.0.0-canary.19c4f29ef.0":"2021-02-25T19:23:02.434Z","11.0.0-canary.63df6e9bf.0":"2021-02-25T19:37:35.726Z","11.0.0-canary.981ad970a.0":"2021-02-26T00:07:55.699Z","11.0.0-canary.f9c9e39d6.0":"2021-02-26T18:39:17.529Z","11.0.0-canary.c97d7d881.0":"2021-03-01T20:53:38.789Z","11.0.0-canary.bf670dad7.0":"2021-03-03T00:21:27.783Z","11.0.0-canary.c7d98fcde.0":"2021-03-03T20:32:19.994Z","11.0.0-canary.4fef8bc1e.0":"2021-03-03T23:24:39.678Z","11.0.0-canary.afae3a3ec.0":"2021-03-03T23:42:37.996Z","11.0.0-canary.0a0b10f22.0":"2021-03-04T00:01:28.738Z","11.0.0-canary.6f678a91a.0":"2021-03-04T18:40:27.232Z","11.0.0-canary.f5f1b613c.0":"2021-03-04T20:50:00.482Z","11.0.0-canary.606e767ef.0":"2021-03-04T21:46:09.238Z","11.0.0-canary.f77a4dd1a.0":"2021-03-06T04:40:19.795Z","11.0.0-canary.2d6ba2c23.0":"2021-03-08T22:44:35.540Z","11.0.0-canary.7522dcaca.0":"2021-03-09T00:27:57.891Z","11.0.0-canary.5c0ab7401.0":"2021-03-09T22:52:46.596Z","11.0.0-canary.59010b6dc.0":"2021-03-10T16:57:45.378Z","11.0.0-canary.9e52f5544.0":"2021-03-10T23:25:22.962Z","11.0.0-canary.a678806f5.0":"2021-03-11T01:50:17.739Z","11.0.0-canary.b2d22df5b.0":"2021-03-11T17:03:10.105Z","11.0.0-canary.81911b707.0":"2021-03-11T18:23:42.374Z","11.0.0-canary.9eeb35c38.0":"2021-03-11T19:37:15.170Z","11.0.0-canary.12be3e95a.0":"2021-03-11T20:01:51.910Z","11.0.0-canary.e683bdf4a.0":"2021-03-11T20:09:13.503Z","11.0.0-canary.a07b6d486.0":"2021-03-11T20:33:34.339Z","11.0.0-canary.1e0653477.0":"2021-03-11T20:40:54.834Z","11.0.0-canary.148e8cfcc.0":"2021-03-11T22:44:37.513Z","11.0.0-canary.73a227194.0":"2021-03-12T00:24:26.507Z","11.0.0-canary.f8579b7ea.0":"2021-03-13T02:03:26.532Z","11.0.0-canary.d2a39d300.0":"2021-03-16T00:35:27.302Z","11.0.0-canary.7cf67823e.0":"2021-03-16T18:20:29.032Z","11.0.0-canary.67d780c79.0":"2021-03-16T19:48:11.993Z","11.0.0-canary.0f358ddae.0":"2021-03-16T22:12:45.934Z","11.0.0-canary.67eb0df80.0":"2021-03-16T22:39:55.684Z","11.0.0-canary.941ca3b3c.0":"2021-03-16T22:41:44.809Z","11.0.0-canary.3344d12ad.0":"2021-03-17T10:02:04.459Z","11.0.0-canary.6072ed604.0":"2021-03-17T22:59:46.723Z","11.0.0-canary.d3a6862af.0":"2021-03-18T16:20:23.836Z","11.0.0-canary.40dd242d5.0":"2021-03-18T21:17:38.063Z","11.0.0-canary.ec8f8465f.0":"2021-03-18T21:44:32.080Z","11.0.0-canary.da38969ec.0":"2021-03-18T22:18:13.825Z","11.0.0-canary.f5246264d.0":"2021-03-19T00:38:25.200Z","11.0.0-canary.03d34bbad.0":"2021-03-19T00:51:37.968Z","11.0.0-canary.cbc57c600.0":"2021-03-19T01:00:03.328Z","11.0.0-canary.d6c5bcf37.0":"2021-03-19T01:12:51.082Z","11.0.0-canary.fefc668d7.0":"2021-03-19T01:34:09.543Z","11.0.0-canary.faa7d3226.0":"2021-03-19T17:44:29.034Z","11.0.0-canary.c60449bc8.0":"2021-03-19T18:05:29.620Z","11.0.0-canary.5f0fc444a.0":"2021-03-19T18:38:03.480Z","11.0.0-canary.4567a750d.0":"2021-03-20T02:08:11.777Z","11.0.0-canary.0cde52f5a.0":"2021-03-23T00:03:13.079Z","11.0.0-canary.48f4b67fb.0":"2021-03-23T19:54:35.144Z","11.0.0-canary.0b8cff734.0":"2021-03-23T20:04:56.395Z","11.0.0-canary.8943b991f.0":"2021-03-23T20:29:57.175Z","11.0.0-canary.3955d8d3d.0":"2021-03-24T19:16:41.212Z","11.0.0-canary.23ea2d85e.0":"2021-03-25T17:33:03.445Z","11.0.0-canary.e3ec22f45.0":"2021-03-25T17:57:28.362Z","11.0.0-canary.4ceb42220.0":"2021-03-26T07:57:48.338Z","11.0.0-canary.dc9c84023.0":"2021-03-30T17:48:56.232Z","11.0.0-canary.56fc26962.0":"2021-03-31T00:21:09.307Z","11.0.0-canary.bc318250e.0":"2021-03-31T01:34:01.889Z","11.0.0-canary.edaee19aa.0":"2021-03-31T02:11:59.319Z","11.0.0-canary.24609b822.0":"2021-03-31T20:57:23.677Z","11.0.0-canary.b6cddc2b7.0":"2021-04-01T15:05:40.844Z","11.0.0-canary.94937c78c.0":"2021-04-01T21:01:11.037Z","11.0.0-canary.e7202cb57.0":"2021-04-01T22:47:39.283Z","11.0.0-canary.1f636b205.0":"2021-04-02T22:24:27.166Z","11.0.0-canary.94f50b260.0":"2021-04-05T15:05:31.774Z","11.0.0-canary.a4009b80a.0":"2021-04-05T22:00:55.287Z","11.0.0-canary.15604bd0d.0":"2021-04-05T22:42:35.777Z","11.0.0-canary.76da7876c.0":"2021-04-07T01:45:05.397Z","11.0.0-canary.6bcb6cbd2.0":"2021-04-07T18:54:09.713Z","11.0.0-canary.c91e8d141.0":"2021-04-07T18:58:08.711Z","11.0.0-canary.f77c50860.0":"2021-04-08T15:36:13.673Z","11.0.0-canary.367d88bdb.0":"2021-04-08T16:39:02.326Z","11.0.0-canary.0ec437d3b.0":"2021-04-08T19:35:42.729Z","11.0.0-canary.b2fa996a1.0":"2021-04-09T15:11:28.061Z","11.0.0-canary.24255c408.0":"2021-04-09T20:12:50.893Z","11.0.0-canary.7d6a4bb72.0":"2021-04-09T22:53:55.963Z","11.0.0-canary.352b295c1.0":"2021-04-12T18:15:57.710Z","11.0.0-canary.ab99b8064.0":"2021-04-13T14:43:50.590Z","11.0.0-canary.8f0a11e32.0":"2021-04-14T20:03:22.854Z","11.0.0-canary.f5c6db8fc.0":"2021-04-15T18:04:29.667Z","11.0.0-canary.3793a3143.0":"2021-04-15T18:31:44.998Z","11.0.0-canary.bc104bae7.0":"2021-04-15T19:46:28.550Z","12.0.0-canary.3f342c3f4.0":"2021-04-15T22:54:37.766Z","11.0.0":"2021-04-15T22:58:44.804Z","12.0.0-canary.2ebfc5374.0":"2021-04-16T20:45:26.886Z","12.0.0-canary.5631828e1.0":"2021-04-17T07:47:11.170Z","12.0.0-canary.bd685395b.0":"2021-04-19T18:41:41.533Z","12.0.0-canary.b52196498.0":"2021-04-19T19:58:11.474Z","12.0.0-canary.8ba3e298c.0":"2021-04-21T14:08:58.093Z","12.0.0-canary.c629eab71.0":"2021-04-21T19:57:36.444Z","12.0.0-canary.8ace3b810.0":"2021-04-21T20:38:14.288Z","12.0.0-canary.70beaf42d.0":"2021-04-21T20:49:47.514Z","12.0.0-canary.cad489689.0":"2021-04-22T16:49:54.384Z","12.0.0-canary.d928692b5.0":"2021-04-23T17:34:50.124Z","12.0.0-canary.8f68de8f3.0":"2021-04-23T18:13:37.135Z","12.0.0-canary.05753cf77.0":"2021-04-23T23:43:31.284Z","12.0.0-canary.ef43e6d96.0":"2021-04-23T23:49:50.486Z","12.0.0-canary.197f64fa2.0":"2021-04-26T17:10:17.632Z","12.0.0-canary.55ad2d7d8.0":"2021-04-27T01:20:15.255Z","12.0.0-canary.ec4ac5234.0":"2021-04-27T07:58:59.906Z","12.0.0-canary.b0579acdb.0":"2021-04-27T08:36:51.396Z","12.0.0-canary.81e2d4ff3.0":"2021-04-27T20:58:07.477Z","12.0.0-canary.c8edee52c.0":"2021-04-27T21:46:33.364Z","12.0.0-canary.f5b6110d6.0":"2021-04-27T22:07:54.393Z","12.0.0-canary.cee9b9e22.0":"2021-04-28T00:13:20.841Z","12.0.0-canary.96e83fca7.0":"2021-04-28T02:48:19.919Z","12.0.0-canary.4c497bd19.0":"2021-04-28T17:54:04.410Z","12.0.0-canary.105b15b96.0":"2021-04-28T21:45:13.921Z","12.0.0-canary.6e20259e3.0":"2021-04-28T21:49:39.829Z","12.0.0-canary.0f79a5d74.0":"2021-04-28T22:43:26.030Z","12.0.0-canary.84f3db9ed.0":"2021-04-29T14:18:28.520Z","12.0.0-canary.8fc29273c.0":"2021-04-29T21:24:11.788Z","12.0.0-canary.c50d20bab.0":"2021-04-29T23:02:28.757Z","12.0.0-canary.474836ad0.0":"2021-05-01T03:38:09.834Z","12.0.0-canary.f5ad92287.0":"2021-05-03T18:22:44.028Z","12.0.0-canary.af453daf8.0":"2021-05-03T18:54:00.154Z","12.0.0-canary.1f1918c24.0":"2021-05-03T19:23:01.194Z","12.0.0-canary.33148231f.0":"2021-05-03T19:39:15.748Z","12.0.0-canary.06b76fa74.0":"2021-05-03T19:46:21.427Z","12.0.0-canary.7c5000473.0":"2021-05-03T22:42:11.158Z","12.0.0-canary.de997644b.0":"2021-05-04T17:28:43.840Z","12.0.0-canary.d4d7f1cc2.0":"2021-05-04T17:55:31.631Z","12.0.0-canary.be999eb08.0":"2021-05-04T18:00:49.048Z","12.0.0-canary.eda1705fc.0":"2021-05-04T19:10:55.183Z","12.0.0-canary.718c90178.0":"2021-05-04T19:28:15.395Z","12.0.0-canary.0e3917299.0":"2021-05-04T19:30:56.862Z","12.0.0-canary.836b3c7db.0":"2021-05-04T20:34:22.498Z","12.0.0-canary.53d4e6d59.0":"2021-05-04T20:50:06.140Z","12.0.0-canary.18d147e27.0":"2021-05-04T20:58:33.800Z","12.0.0-canary.b9984794e.0":"2021-05-04T23:03:35.779Z","12.0.0-canary.b76f5fc9d.0":"2021-05-04T23:07:02.165Z","12.0.0-canary.055d4f10a.0":"2021-05-04T23:22:14.523Z","12.0.0-canary.5b6a46016.0":"2021-05-05T16:16:48.226Z","12.0.0-canary.33c9a737a.0":"2021-05-05T17:27:42.887Z","12.0.0-canary.9bc0effaf.0":"2021-05-05T21:00:30.293Z","12.0.0-canary.a1e0f2af5.0":"2021-05-05T21:41:30.552Z","12.0.0-canary.06930c96b.0":"2021-05-05T23:39:45.175Z","12.0.0-canary.03f525f9f.0":"2021-05-06T00:30:28.237Z","12.0.0-canary.e82ba2a26.0":"2021-05-06T15:57:03.009Z","12.0.0-canary.fc7c4e5ce.0":"2021-05-06T17:29:50.892Z","12.0.0-canary.65c04514d.0":"2021-05-06T18:44:04.632Z","12.0.0-canary.c97779ca6.0":"2021-05-06T21:43:37.999Z","12.0.0-canary.869d890d4.0":"2021-05-07T15:19:21.317Z","12.0.0-canary.ec22e1da9.0":"2021-05-10T18:23:58.211Z","12.0.0-nightly.7427449f0.0":"2021-05-10T18:45:09.527Z","12.0.0-canary.957cc3bf5.0":"2021-05-10T21:57:19.592Z","12.0.0-canary.88a33cd70.0":"2021-05-11T00:09:24.489Z","12.0.0-canary.d20dc6dba.0":"2021-05-11T00:25:13.968Z","12.0.0-canary.0ce2fdb02.0":"2021-05-11T00:59:03.983Z","12.0.0-canary.cb162da37.0":"2021-05-11T01:58:54.550Z","12.0.0-canary.573dc7ffd.0":"2021-05-11T02:17:45.126Z","12.0.0-canary.d5f6ad3fe.0":"2021-05-11T23:22:59.398Z","12.0.0-canary.25751d2ed.0":"2021-05-12T16:20:13.555Z","12.0.0-canary.a23ecb682.0":"2021-05-12T18:23:40.790Z","12.0.0-canary.33a954852.0":"2021-05-13T15:08:09.148Z","12.0.0-canary.a4484849b.0":"2021-05-13T15:31:29.304Z","12.0.0-canary.b4c3f513e.0":"2021-05-13T16:08:30.084Z","12.0.0-canary.1a8d06483.0":"2021-05-13T16:14:08.402Z","12.0.0-canary.8e6081836.0":"2021-05-14T21:41:06.361Z","12.0.0-canary.a2b0f4cee.0":"2021-05-14T21:54:19.444Z","12.0.0-canary.e8e39ad19.0":"2021-05-18T20:13:36.677Z","12.0.0-canary.4bb5eea2b.0":"2021-05-19T15:28:44.153Z","12.0.0-canary.ccce99cd6.0":"2021-05-20T00:57:15.793Z","12.0.0-canary.14767a8db.0":"2021-05-20T20:51:28.967Z","12.0.0-canary.22c6dcff9.0":"2021-05-24T15:19:05.326Z","12.0.0-canary.fadab3372.0":"2021-05-24T16:06:17.417Z","12.0.0-canary.caa73aeee.0":"2021-05-25T14:14:53.549Z","12.0.0-canary.ec31ae1ed.0":"2021-05-25T20:35:52.091Z","12.0.0-canary.8530d3514.0":"2021-05-27T16:05:19.269Z","12.0.0-canary.00b5899dc.0":"2021-06-01T22:46:01.876Z","12.0.0-canary.f1525ea3e.0":"2021-06-03T13:54:51.175Z","12.0.0-canary.464a00286.0":"2021-06-03T14:46:37.350Z","12.0.0-canary.474de7878.0":"2021-06-03T15:14:40.135Z","12.0.0-canary.b87ebf74d.0":"2021-06-03T17:46:43.266Z","12.0.0-canary.2daa49b35.0":"2021-06-04T16:14:34.699Z","12.0.0-canary.08db3d737.0":"2021-06-04T19:42:06.927Z","12.0.0-canary.5823407a7.0":"2021-06-08T00:48:48.473Z","12.0.0-canary.23b0c5e22.0":"2021-06-08T16:22:39.516Z","12.0.0-canary.2952c6a76.0":"2021-06-08T17:41:17.299Z","12.0.0-canary.f12425f88.0":"2021-06-10T01:06:39.134Z","12.0.0-canary.e543628c3.0":"2021-06-10T01:07:41.252Z","12.0.0-canary.e0c346286.0":"2021-06-10T16:36:16.363Z","12.0.0-canary.f43af5633.0":"2021-06-10T20:36:11.560Z","12.0.0-canary.8415ae585.0":"2021-06-11T16:06:17.286Z","12.0.0-canary.598fcccc8.0":"2021-06-11T21:46:50.539Z","12.0.0-canary.5d0605188.0":"2021-06-14T17:39:35.036Z","12.0.0-canary.f147a2271.0":"2021-06-14T19:18:31.753Z","12.0.0-canary.33579e00b.0":"2021-06-15T00:22:23.919Z","12.0.0-canary.a6909c0e6.0":"2021-06-15T18:30:32.819Z","12.0.0-canary.c18b5925b.0":"2021-06-15T21:03:59.322Z","12.0.0-canary.271fff902.0":"2021-06-15T22:51:29.641Z","12.0.0-canary.7ea2e830d.0":"2021-06-15T22:52:23.926Z","12.0.0-canary.d96f0a1e0.0":"2021-06-16T21:06:44.737Z","12.0.0-canary.a6183801a.0":"2021-06-16T22:05:53.908Z","12.0.0-canary.940550232.0":"2021-06-17T19:40:39.533Z","12.0.0-canary.f705e8048.0":"2021-06-18T15:24:57.641Z","12.0.0-canary.08d791f37.0":"2021-06-18T21:12:08.094Z","12.0.0-canary.e38d7440f.0":"2021-06-21T17:40:57.917Z","12.0.0-canary.75900a5a9.0":"2021-06-21T18:37:27.552Z","12.0.0-canary.33e6f50e9.0":"2021-06-23T00:12:29.933Z","12.0.0-canary.8c685301d.0":"2021-06-23T18:25:01.078Z","12.0.0-canary.8c7d994ae.0":"2021-06-23T19:27:50.668Z","12.0.0-canary.4ccd39bdd.0":"2021-06-24T16:15:21.838Z","12.0.0-canary.17553e9f8.0":"2021-06-28T22:52:59.468Z","12.0.0-canary.4c80072fd.0":"2021-06-29T18:41:17.160Z","12.0.0-canary.796811db7.0":"2021-07-01T00:03:50.663Z","12.0.0-canary.70e1efdca.0":"2021-07-01T17:07:01.269Z","12.0.0-canary.435866d32.0":"2021-07-02T18:21:38.725Z","12.0.0-canary.d0f9f3f2e.0":"2021-07-03T00:00:30.238Z","12.0.0-canary.adeac0549.0":"2021-07-08T15:09:42.271Z","12.0.0-canary.068fd5028.0":"2021-07-08T19:04:08.880Z","12.0.0-canary.5dfec7a14.0":"2021-07-12T20:04:38.625Z","12.0.0-canary.07a73750c.0":"2021-07-12T20:25:57.935Z","12.0.0-canary.3e4c6dca1.0":"2021-07-13T01:51:47.546Z","12.0.0-canary.ea77795b1.0":"2021-07-13T15:49:49.041Z","12.0.0-canary.15a179fad.0":"2021-07-13T18:09:53.159Z","12.0.0-canary.c73142a1b.0":"2021-07-13T18:44:41.636Z","12.0.0-canary.d923db73a.0":"2021-07-13T20:54:22.945Z","12.0.0-canary.22d29cbb4.0":"2021-07-13T22:51:03.154Z","12.0.0-canary.2749604bc.0":"2021-07-14T16:22:54.310Z","12.0.0-canary.e1703bed9.0":"2021-07-14T21:48:34.259Z","12.0.0-canary.de48eff0d.0":"2021-07-15T17:08:35.584Z","12.0.0-canary.4f060adc5.0":"2021-07-15T19:22:22.506Z","12.0.0-canary.bd25779b2.0":"2021-07-15T20:42:47.498Z","12.0.0-canary.9f68a932e.0":"2021-07-15T22:07:38.491Z","12.0.0-canary.4eecdeaf0.0":"2021-07-16T14:58:26.879Z","12.0.0-canary.7239684d4.0":"2021-07-16T15:59:36.132Z","12.0.0-canary.d5f1f7c72.0":"2021-07-16T16:14:29.875Z","12.0.0-canary.4d95812f9.0":"2021-07-16T19:43:37.310Z","12.0.0-canary.38d1846cc.0":"2021-07-19T18:42:28.853Z","12.0.0-canary.3f691eccf.0":"2021-07-20T16:09:20.963Z","12.0.0-canary.ebb5c73bb.0":"2021-07-20T16:57:18.519Z","12.0.0-nightly.778a0e8a.0":"2021-07-20T21:05:54.536Z","12.0.0-canary.791311bba.0":"2021-07-20T22:08:00.882Z","12.0.0-canary.85e9a6ac3.0":"2021-07-21T15:36:25.553Z","12.0.0-canary.6b0442278.0":"2021-07-21T18:50:22.409Z","12.0.0-canary.5f00e454a.0":"2021-07-22T17:06:52.903Z","12.0.0-canary.90e08fc6b.0":"2021-07-22T23:38:46.608Z","12.0.0-canary.cf5b9eb86.0":"2021-07-23T18:12:43.628Z","12.0.0-canary.3f36ac75c.0":"2021-07-23T18:32:40.298Z","12.0.0-canary.ea1e1b850.0":"2021-07-24T20:56:15.017Z","12.0.0-canary.22f390c43.0":"2021-07-27T19:00:22.413Z","12.0.0":"2021-07-27T19:50:23.062Z","13.0.0-canary.ae85f7eba.0":"2021-07-27T19:51:59.689Z","13.0.0-canary.5981207f7.0":"2021-07-27T23:18:39.048Z","13.0.0-canary.83bdd0222.0":"2021-07-28T17:26:18.638Z","13.0.0-canary.28656298a.0":"2021-07-29T18:13:33.553Z","13.0.0-canary.9e797daaf.0":"2021-07-29T18:35:48.489Z","13.0.0-canary.adb9f1ad8.0":"2021-07-30T19:05:33.479Z","13.0.0-canary.cc5377458.0":"2021-07-30T21:33:51.752Z","13.0.0-canary.a395972cf.0":"2021-08-03T21:23:48.502Z","13.0.0-canary.7c96e6b98.0":"2021-08-03T22:14:21.770Z","13.0.0-canary.a80c8b2c2.0":"2021-08-05T00:00:14.638Z","13.0.0-canary.3dd611091.0":"2021-08-05T03:56:57.357Z","13.0.0-canary.5dee37ff6.0":"2021-08-05T17:42:46.904Z","13.0.0-canary.bf405d22a.0":"2021-08-05T20:18:36.563Z","13.0.0-canary.b47dd37a6.0":"2021-08-05T20:50:24.951Z","13.0.0-canary.6c82b965b.0":"2021-08-06T16:15:21.113Z","13.0.0-canary.4ca11fe76.0":"2021-08-06T17:07:54.540Z","13.0.0-canary.510cf90f2.0":"2021-08-09T17:17:46.575Z","13.0.0-canary.17580ebf7.0":"2021-08-09T18:18:04.974Z","13.0.0-canary.7249a3060.0":"2021-08-09T18:22:04.982Z","13.0.0-canary.4c405863b.0":"2021-08-10T17:41:23.691Z","13.0.0-canary.f4241a42a.0":"2021-08-11T17:00:06.776Z","13.0.0-canary.0ad12ed3c.0":"2021-08-11T21:29:16.386Z","13.0.0-canary.077dcfcfe.0":"2021-08-12T17:55:49.232Z","13.0.0-canary.e3346766f.0":"2021-08-13T19:45:48.188Z","13.0.0-canary.2fb068fb0.0":"2021-08-13T19:48:59.675Z","13.0.0-canary.fb76c5069.0":"2021-08-16T20:08:36.983Z","13.0.0-canary.457d89aad.0":"2021-08-17T15:22:21.515Z","13.0.0-canary.0de2f2edc.0":"2021-08-17T20:54:45.232Z","13.0.0-canary.1f9259b9d.0":"2021-08-17T22:14:47.145Z","13.0.0-canary.3b9290351.0":"2021-08-18T05:24:10.320Z","13.0.0-canary.43d2eed2a.0":"2021-08-18T16:02:44.001Z","13.0.0-canary.0a9069300.0":"2021-08-19T16:18:09.059Z","13.0.0-canary.7da413ed8.0":"2021-08-20T15:49:19.650Z","13.0.0-canary.e1e69fd8e.0":"2021-08-20T19:32:46.646Z","13.0.0-canary.f5afc16df.0":"2021-08-20T20:27:10.879Z","13.0.0-canary.28d0d75bb.0":"2021-08-20T22:20:53.248Z","13.0.0-canary.21ece5360.0":"2021-08-20T23:44:47.078Z","13.0.0-canary.8de07c02a.0":"2021-08-23T15:27:13.578Z","13.0.0-canary.65aa63b0c.0":"2021-08-24T15:29:11.078Z","13.0.0-canary.15981e9d9.0":"2021-08-24T16:17:41.167Z","13.0.0-canary.fa7520f62.0":"2021-08-24T22:28:24.407Z","13.0.0-canary.ce25bc3ec.0":"2021-08-24T22:49:02.262Z","13.0.0-canary.12f5622e1.0":"2021-08-24T23:18:39.437Z","13.0.0-canary.d97f8f133.0":"2021-08-25T18:33:47.142Z","13.0.0-canary.d86fb6fac.0":"2021-08-25T18:54:17.318Z","13.0.0-canary.e8554dbbf.0":"2021-08-25T21:59:57.604Z","13.0.0-canary.877e3fb0d.0":"2021-08-26T15:38:42.130Z","13.0.0-canary.6236f3576.0":"2021-08-26T16:06:29.780Z","13.0.0-canary.1d19158a1.0":"2021-08-26T17:09:31.854Z","13.0.0-canary.6adc9e83f.0":"2021-08-30T22:44:51.105Z","13.0.0-canary.d082790f0.0":"2021-09-01T21:54:52.464Z","13.0.0-canary.e2c4f0196.0":"2021-09-02T02:11:56.482Z","13.0.0-canary.611db508e.0":"2021-09-02T03:15:40.741Z","13.0.0-canary.d4706933f.0":"2021-09-02T15:38:18.524Z","13.0.0-canary.c16fe03ce.0":"2021-09-02T17:45:19.677Z","13.0.0-canary.9203a958a.0":"2021-09-02T23:47:22.748Z","13.0.0-canary.fddd5ae93.0":"2021-09-03T07:31:03.733Z","13.0.0-canary.117599a8b.0":"2021-09-03T07:32:39.429Z","13.0.0-canary.e4180d07b.0":"2021-09-03T07:33:06.085Z","13.0.0-canary.42d175efc.0":"2021-09-03T15:43:53.411Z","13.0.0-canary.72464476c.0":"2021-09-07T15:35:12.689Z","13.0.0-canary.37d4db866.0":"2021-09-09T14:34:30.647Z","13.0.0-canary.6df682e74.0":"2021-09-09T15:44:13.722Z","13.0.0-canary.b49359c35.0":"2021-09-09T17:36:31.567Z","13.0.0-canary.470bd34e8.0":"2021-09-09T18:02:19.190Z","13.0.0-canary.d48a01771.0":"2021-09-09T18:11:22.764Z","13.0.0-canary.13db34b34.0":"2021-09-09T18:26:22.477Z","13.0.0-canary.864798678.0":"2021-09-09T18:37:55.878Z","13.0.0-canary.d04bda3fb.0":"2021-09-10T15:22:46.236Z","13.0.0-canary.5533f73d3.0":"2021-09-13T23:04:41.823Z","13.0.0-canary.08398f880.0":"2021-09-13T23:35:17.493Z","13.0.0-canary.818f4ee93.0":"2021-09-15T17:51:18.456Z","13.0.0-canary.8355e14dc.0":"2021-09-15T19:13:16.607Z","13.0.0-canary.d4e16a6c4.0":"2021-09-15T22:00:04.333Z","13.0.0-canary.65125b3a6.0":"2021-09-16T21:18:25.160Z","13.0.0-canary.80a583365.0":"2021-09-17T20:36:27.347Z","13.0.0-canary.83900936a.0":"2021-09-17T23:24:55.229Z","13.0.0-canary.860ad06a1.0":"2021-09-17T23:36:35.047Z","13.0.0-canary.3b8d4429e.0":"2021-09-20T17:48:10.711Z","13.0.0-canary.2da3606b9.0":"2021-09-20T19:38:16.751Z","13.0.0-canary.e8c598d1e.0":"2021-09-20T21:12:36.076Z","13.0.0-canary.1340ee9f7.0":"2021-09-22T17:58:34.029Z","13.0.0-canary.65084baff.0":"2021-09-23T21:26:04.911Z","13.0.0-canary.c79aa0cdd.0":"2021-09-24T13:42:35.967Z","13.0.0":"2021-09-24T19:46:28.911Z","14.0.0-canary.198431fcd.0":"2021-09-24T19:47:12.716Z","14.0.0-canary.9a02b6ef8.0":"2021-09-25T13:11:38.317Z","14.0.0-canary.758ce31d9.0":"2021-09-27T17:29:53.162Z","14.0.0-canary.86b50ef74.0":"2021-09-28T17:43:41.763Z","14.0.0-canary.b2fe3528b.0":"2021-09-29T22:57:30.603Z","14.0.0-canary.586e740dd.0":"2021-09-30T16:31:54.494Z","14.0.0-canary.2ac92d766.0":"2021-10-05T19:29:08.558Z","14.0.0-canary.353ca7e9f.0":"2021-10-08T18:47:32.092Z","14.0.0-canary.c78ff0429.0":"2021-10-11T17:22:45.459Z","14.0.0-canary.261f2db59.0":"2021-10-20T17:00:16.680Z","14.0.0-canary.9803d2dc1.0":"2021-10-20T19:22:30.456Z","14.0.0-canary.348665978.0":"2021-10-21T14:51:26.257Z","14.0.0-canary.b2b979a8a.0":"2021-10-28T15:12:58.341Z","14.0.0-canary.1af7c1c4a.0":"2021-10-28T17:53:27.831Z","14.0.0-canary.4afd353cd.0":"2021-10-29T15:02:13.251Z","14.0.0-canary.a986df922.0":"2021-10-29T21:35:38.413Z","14.0.0-canary.c3cdff07b.0":"2021-11-09T19:06:34.502Z","14.0.0-canary.468392606.0":"2021-11-11T19:40:47.037Z","14.0.0-canary.828f9803b.0":"2021-11-11T19:51:25.467Z","14.0.0-canary.8795cba87.0":"2021-11-11T19:57:23.089Z","14.0.0-canary.cd7f8cace.0":"2021-11-11T19:59:06.329Z","14.0.0-canary.207230eb8.0":"2021-11-11T22:25:10.924Z","14.0.0-canary.991fb99f7.0":"2021-11-11T22:37:03.481Z","14.0.0-canary.15db4f164.0":"2021-11-12T17:30:26.223Z","14.0.0-canary.8fcad5a3c.0":"2021-11-12T19:14:27.238Z","14.0.0-canary.f81fb1d23.0":"2021-11-12T22:40:55.878Z","14.0.0-canary.783f6fd5a.0":"2021-11-16T05:50:50.780Z","14.0.0-canary.d57ec74c7.0":"2021-11-16T16:17:32.406Z","14.0.0-canary.554c71829.0":"2021-11-16T16:20:22.248Z","14.0.0-canary.3ef470efe.0":"2021-11-16T16:25:12.763Z","14.0.0-canary.61a28b2b5.0":"2021-11-17T19:00:16.189Z","14.0.0-canary.fae6c652d.0":"2021-11-18T16:25:50.704Z","14.0.0-canary.978a3b5bb.0":"2021-11-19T19:40:18.709Z","14.0.0-canary.e6f43cf44.0":"2021-11-22T17:36:05.656Z","14.0.0-canary.39cf14bc3.0":"2021-11-22T23:05:34.294Z","14.0.0-canary.93134d453.0":"2021-11-23T15:40:12.612Z","14.0.0-canary.bbd11268f.0":"2021-11-23T22:33:11.992Z","14.0.0-canary.3db9c4d3d.0":"2021-11-24T15:38:16.183Z","14.0.0-canary.78305b6d5.0":"2021-11-24T19:51:35.088Z","14.0.0-canary.43d08ba77.0":"2021-11-30T22:56:57.015Z","14.0.0-canary.17a072535.0":"2021-12-02T18:06:18.210Z","14.0.0-canary.5d809696c.0":"2021-12-08T17:45:25.740Z","14.0.0-canary.b6510c8c1.0":"2021-12-08T18:07:31.602Z","14.0.0-canary.f460e23da.0":"2021-12-10T15:26:20.987Z","14.0.0-canary.7d8ea4624.0":"2021-12-10T19:30:12.537Z","14.0.0-canary.8fffcb5dd.0":"2021-12-14T08:56:10.511Z","14.0.0-canary.21e1cb9be.0":"2021-12-14T19:40:50.716Z","14.0.0-canary.ba78e8724.0":"2021-12-15T22:13:54.851Z","14.0.0-canary.e3e073c00.0":"2021-12-20T21:10:43.178Z","14.0.0-canary.3366a71d7.0":"2021-12-22T12:33:23.849Z","14.0.0-canary.c047f7c19.0":"2022-01-05T16:46:51.499Z","14.0.0-canary.05db65ec0.0":"2022-01-06T17:15:09.060Z","14.0.0-canary.6ca8b8f85.0":"2022-01-07T16:02:16.633Z","14.0.0-canary.173ee7a7a.0":"2022-01-10T16:55:22.884Z","14.0.0-canary.b704e4dfc.0":"2022-01-10T18:33:57.020Z","14.0.0-canary.c14e977ee.0":"2022-01-11T15:50:42.097Z","14.0.0-canary.b094eaa4e.0":"2022-01-14T18:43:26.938Z","14.0.0-canary.390220e42.0":"2022-01-17T16:47:12.868Z","14.0.0-canary.4b5391f8b.0":"2022-01-19T23:53:41.017Z","14.0.0-canary.cef6bc623.0":"2022-01-20T00:18:31.673Z","14.0.0-canary.0379179c4.0":"2022-01-20T18:55:25.410Z","14.0.0-canary.e62f3dabf.0":"2022-01-21T23:04:21.041Z","14.0.0-canary.3e20c1de8.0":"2022-01-25T15:32:59.358Z","14.0.0-canary.9f9d928b2.0":"2022-01-27T18:14:06.032Z","14.0.0-canary.a2bcb065c.0":"2022-01-28T19:38:07.926Z","14.0.0-canary.4e66fb2e1.0":"2022-01-28T19:42:20.146Z","14.0.0-canary.9736ddce9.0":"2022-01-29T09:50:50.552Z","14.0.0-canary.cc4ed13cc.0":"2022-02-04T18:23:52.066Z","14.0.0-canary.dcba26fe1.0":"2022-02-04T21:58:07.719Z","14.0.0-canary.ec54d9046.0":"2022-02-07T15:47:47.155Z","14.0.0-canary.ea9b5b463.0":"2022-02-09T17:54:44.792Z","14.0.0-canary.96ea061c1.0":"2022-02-09T19:00:19.007Z","14.0.0-canary.e00181e59.0":"2022-02-10T20:07:34.615Z","14.0.0-canary.037285f9b.0":"2022-02-11T18:30:26.522Z","14.0.0-canary.1aaa68dda.0":"2022-02-16T19:49:55.036Z","14.0.0-canary.ab4aba1af.0":"2022-02-17T18:17:06.441Z","14.0.0-canary.e58552c6e.0":"2022-02-18T18:04:52.865Z","14.0.0-canary.868793776.0":"2022-02-22T19:36:40.530Z","14.0.0-canary.fdc37a445.0":"2022-02-28T18:46:52.554Z","14.0.0-canary.43c7d87dc.0":"2022-03-01T15:33:53.959Z","14.0.0-canary.23043acd0.0":"2022-03-02T20:28:07.664Z","14.0.0-canary.6505e61c5.0":"2022-03-03T20:01:28.448Z","14.0.0-canary.16c166154.0":"2022-03-08T23:23:04.214Z","14.0.0-canary.bdf1d3771.0":"2022-03-14T14:29:24.082Z","14.0.0-canary.cf4292778.0":"2022-03-15T00:30:18.858Z","14.0.0-canary.bbd43e0e0.0":"2022-03-16T20:50:45.670Z","14.0.0-canary.1b6afad86.0":"2022-03-16T21:04:17.929Z","14.0.0-canary.bdf9d4af9.0":"2022-03-16T21:18:33.805Z","14.0.0-canary.32b391398.0":"2022-03-17T18:00:02.217Z","14.0.0-canary.ae8a6a3a3.0":"2022-03-18T16:39:58.457Z","14.0.0-canary.cbd9358a6.0":"2022-03-18T22:52:45.943Z","14.0.0-canary.dcfe49c98.0":"2022-03-21T18:44:48.772Z","14.0.0-canary.f31a833fa.0":"2022-03-23T00:51:29.302Z","14.0.0-canary.4b92e210a.0":"2022-03-24T20:19:15.068Z","14.0.0-canary.a657abb61.0":"2022-03-24T20:40:38.164Z","14.0.0-canary.443f63f50.0":"2022-03-25T23:05:18.214Z","14.0.0-canary.eb382f318.0":"2022-03-29T17:35:38.794Z","14.0.0-canary.344d52823.0":"2022-03-29T18:44:00.090Z","14.0.0-canary.4e372fb49.0":"2022-04-07T20:33:39.900Z","14.0.0-canary.3e30054fb.0":"2022-04-13T22:14:57.760Z","14.0.0-canary.8c4da223a.0":"2022-04-19T15:24:55.877Z","14.0.0-canary.7de8965cc.0":"2022-04-19T20:24:10.452Z","14.0.0-canary.641ed0851.0":"2022-04-20T16:06:26.747Z","14.0.0-canary.e88f83024.0":"2022-04-20T17:48:27.495Z","14.0.0-canary.7321d6254.0":"2022-04-20T20:12:03.037Z","14.0.0-canary.3ab956515.0":"2022-04-25T15:02:37.158Z","14.0.0-canary.53b3cad2f.0":"2022-04-27T12:46:10.155Z","14.0.0":"2022-04-28T16:56:42.659Z","15.0.0-canary.432c815e5.0":"2022-04-28T16:57:46.215Z","15.0.0-canary.a0f01f669.0":"2022-05-06T20:15:23.485Z","15.0.0-canary.276cb39a4.0":"2022-05-06T21:32:14.974Z","15.0.0-canary.4fe98ed70.0":"2022-05-06T21:56:46.165Z","15.0.0-canary.58b130a3d.0":"2022-05-06T21:59:04.861Z","15.0.0-canary.ae278a2fe.0":"2022-05-09T15:25:38.003Z","15.0.0-canary.bebf5bfdf.0":"2022-05-11T02:41:04.693Z","15.0.0-canary.e6072cd6a.0":"2022-05-11T20:19:17.354Z","15.0.0-canary.5b40eb988.0":"2022-05-12T02:45:00.094Z","15.0.0-canary.6a61d62f6.0":"2022-05-12T20:27:38.394Z","15.0.0-canary.05930a453.0":"2022-05-13T18:48:15.618Z","15.0.0-canary.c0a11ef0d.0":"2022-05-18T22:01:45.317Z","15.0.0-canary.2f9b268c0.0":"2022-05-20T19:33:27.315Z","15.0.0-canary.7741345b8.0":"2022-05-20T20:03:31.316Z","15.0.0-canary.f807e793f.0":"2022-05-20T22:22:34.770Z","15.0.0-canary.9f53d4a8a.0":"2022-05-23T14:58:34.076Z","15.0.0-canary.77cf00e37.0":"2022-05-31T17:40:54.660Z","15.0.0-canary.3c7b844c2.0":"2022-06-07T22:21:57.919Z","15.0.0-canary.df47894db.0":"2022-06-13T17:09:25.820Z","15.0.0-canary.b18a873dc.0":"2022-06-14T06:30:30.163Z","15.0.0-canary.ba9c29637.0":"2022-06-14T18:58:07.063Z","15.0.0-canary.9bfd12f01.0":"2022-06-22T19:23:16.716Z","15.0.0-canary.764de225d.0":"2022-06-29T16:27:46.544Z","15.0.0-canary.31e517cea.0":"2022-07-01T18:29:06.951Z","15.0.0-canary.9ea4e8e9c.0":"2022-07-01T22:55:45.679Z","15.0.0-canary.cd5bafabb.0":"2022-07-06T17:55:16.990Z","15.0.0-canary.a02fe49d3.0":"2022-07-06T18:51:48.417Z","15.0.0-canary.826a3d8be.0":"2022-07-06T19:31:44.882Z","15.0.0-canary.ef276aa93.0":"2022-07-07T17:03:23.510Z","15.0.0-canary.59cf61d6b.0":"2022-07-07T17:32:09.854Z","15.0.0-canary.8647092f7.0":"2022-07-07T20:39:25.409Z","15.0.0-canary.02ecd4d85.0":"2022-07-11T16:40:03.894Z","15.0.0-canary.63d3a146e.0":"2022-07-12T11:37:53.079Z","15.0.0-canary.88db01990.0":"2022-07-12T11:40:55.165Z","15.0.0-canary.6432d8fd7.0":"2022-07-14T07:29:40.521Z","15.0.0-canary.085f9b25c.0":"2022-07-14T16:35:42.748Z","15.0.0-canary.39f9424b3.0":"2022-07-14T17:06:00.499Z","15.0.0-canary.ae9fce587.0":"2022-07-14T18:08:51.414Z","15.0.0-canary.1ebddc343.0":"2022-07-15T08:50:04.338Z","15.0.0-canary.c5018840c.0":"2022-07-18T09:43:55.210Z","15.0.0-canary.551b40d18.0":"2022-07-18T10:01:50.420Z","15.0.0-canary.cf9f12371.0":"2022-07-18T10:05:51.127Z","15.0.0-canary.2797ff8b6.0":"2022-07-19T00:24:54.372Z","15.0.0-canary.110fafa17.0":"2022-07-20T07:47:30.833Z","15.0.0-canary.386ef1d2f.0":"2022-07-20T18:20:41.801Z","15.0.0-canary.c3924efef.0":"2022-07-20T18:30:28.449Z","15.0.0-canary.cf5c5907c.0":"2022-07-20T21:22:32.664Z","15.0.0-canary.0617e2319.0":"2022-07-20T21:40:53.040Z","15.0.0-canary.a743b7967.0":"2022-07-20T21:57:50.328Z","15.0.0-canary.69fd619d0.0":"2022-07-20T22:09:57.007Z","15.0.0-canary.2a6ddc1cf.0":"2022-07-29T16:05:19.464Z","15.0.0-canary.86efd56f6.0":"2022-08-02T14:46:22.053Z","15.0.0-canary.ccfc24d19.0":"2022-08-03T18:14:15.735Z","15.0.0-canary.e4570146f.0":"2022-08-03T18:41:31.760Z","15.0.0-canary.6683a36cb.0":"2022-08-03T19:21:34.040Z","15.0.0-canary.10196647d.0":"2022-08-03T21:54:29.689Z","15.0.0-canary.b20d3d73c.0":"2022-08-04T22:43:37.985Z","15.0.0-canary.47c0c6b1e.0":"2022-08-09T15:21:21.487Z","15.0.0-canary.0e3dc8e38.0":"2022-08-11T18:46:37.735Z","15.0.0-canary.d5a11f1c8.0":"2022-08-30T23:02:00.466Z","15.0.0-canary.bac992a95.0":"2022-09-01T07:06:28.142Z","15.0.0-canary.d25f3404c.0":"2022-09-01T09:45:30.291Z","15.0.0-canary.920d8a79e.0":"2022-09-01T20:21:43.464Z","15.0.0-canary.c363f267b.0":"2022-09-01T21:18:57.758Z","15.0.0-canary.a4eb4937a.0":"2022-09-06T18:20:31.158Z","15.0.0-canary.4299717da.0":"2022-09-07T16:16:28.164Z","15.0.0-canary.fa7d8d44b.0":"2022-09-07T19:19:39.399Z","15.0.0-canary.a40e3c768.0":"2022-09-09T20:04:36.068Z","15.0.0-canary.18cdc9a00.0":"2022-09-12T21:03:41.891Z","15.0.0-canary.7ab3cd3c8.0":"2022-09-13T22:39:53.430Z","15.0.0-canary.2860d244d.0":"2022-09-16T22:55:32.862Z","15.0.0-canary.e8726533c.0":"2022-09-20T20:18:24.403Z","15.0.0-canary.00d8de0aa.0":"2022-09-21T15:21:10.189Z","15.0.0-canary.271aedc30.0":"2022-09-21T15:36:43.960Z","15.0.0-canary.d3344c16f.0":"2022-09-22T09:25:10.750Z","15.0.0-canary.94f20ccb8.0":"2022-09-22T20:48:23.294Z","15.0.0-canary.81e4cb7b2.0":"2022-09-23T15:08:49.554Z","15.0.0-canary.aa85f9413.0":"2022-09-26T17:57:02.627Z","15.0.0-canary.7134a7752.0":"2022-09-26T21:58:13.384Z","15.0.0-canary.70b8ac16e.0":"2022-09-27T22:45:26.487Z","15.0.0-canary.c20d74405.0":"2022-09-27T23:31:49.906Z","15.0.0-canary.f033fc8d1.0":"2022-09-27T23:57:57.303Z","15.0.0-canary.8d7ae912a.0":"2022-09-28T07:56:39.023Z","15.0.0-canary.db414b864.0":"2022-09-28T14:53:18.975Z","15.0.0-canary.28cc6791f.0":"2022-09-28T18:07:37.121Z","15.0.0-canary.a515a2d18.0":"2022-09-28T18:56:22.498Z","15.0.0-canary.ce9523167.0":"2022-09-29T20:31:48.042Z","15.0.0-canary.b2310f7dc.0":"2022-09-30T00:14:23.749Z","15.0.0-canary.a44241e54.0":"2022-09-30T08:21:40.081Z","15.0.0-canary.0ce81e115.0":"2022-09-30T18:18:47.964Z","15.0.0-canary.3cc30f6ad.0":"2022-10-04T17:20:01.839Z","15.0.0-canary.d9cf98e60.0":"2022-10-04T19:04:22.837Z","15.0.0-canary.d71935c8b.0":"2022-10-06T08:15:26.027Z","15.0.0-canary.49c56a25d.0":"2022-10-06T18:51:28.770Z","15.0.0-canary.07acddef3.0":"2022-10-07T21:37:48.482Z","15.0.0-canary.1c74eb2c0.0":"2022-10-07T21:55:59.282Z","15.0.0-canary.dadfb713e.0":"2022-10-08T05:06:01.254Z","15.0.0-canary.395f1ce61.0":"2022-10-08T05:08:02.980Z","15.0.0-canary.e741b5c82.0":"2022-10-10T17:38:16.045Z","15.0.0-canary.582f3cc1c.0":"2022-10-11T04:49:13.210Z","15.0.0-canary.b1a6e3e88.0":"2022-10-12T12:02:32.530Z","15.0.0-canary.c9b1a31e4.0":"2022-10-12T16:58:43.815Z","15.0.0-canary.13e9b0d1f.0":"2022-10-12T19:21:20.426Z","15.0.0-canary.1dc797e7f.0":"2022-10-14T09:41:43.735Z","15.0.0-canary.ed4009397.0":"2022-10-14T16:51:26.185Z","15.0.0-canary.95ef196bc.0":"2022-10-14T23:14:04.194Z","15.0.0-canary.13eea1b2d.0":"2022-10-17T03:51:42.821Z","15.0.0-canary.ef9b2babb.0":"2022-10-17T09:18:08.534Z","15.0.0-canary.cec7fb987.0":"2022-10-17T10:56:29.814Z","15.0.0-canary.4fff58b08.0":"2022-10-17T15:22:38.762Z","15.0.0-canary.587d8f871.0":"2022-10-17T15:57:17.027Z","15.0.0-canary.edf4b98d0.0":"2022-10-17T16:40:36.263Z","15.0.0-canary.024ac5f16.0":"2022-10-17T22:42:29.840Z","15.0.0-canary.c8bdf6144.0":"2022-10-18T18:23:32.958Z","15.0.0-canary.bacda4885.0":"2022-10-18T18:42:51.416Z","15.0.0-canary.92b2556cf.0":"2022-10-19T01:13:32.940Z","15.0.0-canary.cc804509a.0":"2022-10-19T01:17:20.425Z","15.0.0-canary.982bedae9.0":"2022-10-19T01:37:18.621Z","15.0.0-canary.ee40081f4.0":"2022-10-19T20:11:58.760Z","15.0.0-canary.98f1b54e2.0":"2022-10-20T22:56:52.900Z","15.0.0-canary.e74b7ba7e.0":"2022-10-21T17:05:57.611Z","15.0.0-canary.ab55c07d2.0":"2022-10-22T18:19:20.750Z","15.0.0-canary.fc539db34.0":"2022-10-24T18:59:18.039Z","15.0.0-canary.e340b04c5.0":"2022-10-25T23:45:12.252Z","15.0.0-canary.2c1a8f8fd.0":"2022-10-26T17:30:42.398Z","15.0.0-canary.ecfee946f.0":"2022-10-26T20:15:24.841Z","15.0.0-canary.73ca9dbb0.0":"2022-10-31T17:32:37.427Z","15.0.0-canary.357f2e5f1.0":"2022-10-31T18:49:32.392Z","15.0.0-canary.eb103d4b5.0":"2022-10-31T19:56:34.253Z","15.0.0-canary.af5f01223.0":"2022-11-01T18:37:02.431Z","15.0.0-canary.58733ef41.0":"2022-11-02T18:10:53.288Z","15.0.0-canary.909b48215.0":"2022-11-03T04:08:00.640Z","15.0.0-canary.7f17127d5.0":"2022-11-03T18:19:21.283Z","15.0.0-canary.da95e2a05.0":"2022-11-04T16:59:14.071Z","15.0.0-canary.4832e2750.0":"2022-11-04T20:57:12.890Z","15.0.0-canary.215506426.0":"2022-11-05T01:06:08.229Z","15.0.0-canary.4cf917476.0":"2022-11-05T18:04:13.728Z","15.0.0-canary.eef14bd32.0":"2022-11-06T17:24:44.890Z","15.0.0-canary.6faa29fe9.0":"2022-11-07T03:13:34.302Z","15.0.0-canary.9af09b967.0":"2022-11-07T18:27:55.204Z","15.0.0-canary.0f54fbb93.0":"2022-11-08T21:56:44.016Z","15.0.0-canary.a8d47f9fe.0":"2022-11-09T04:18:06.196Z","15.0.0-canary.66a1e75e6.0":"2022-11-09T09:35:43.713Z","15.0.0-canary.5e5c2afc0.0":"2022-11-09T11:53:24.962Z","15.0.0-canary.3e3f43359.0":"2022-11-09T20:03:01.148Z","15.0.0-canary.3f667fac6.0":"2022-11-09T22:06:13.393Z","15.0.0-canary.faa28c1c5.0":"2022-11-11T16:35:57.665Z","15.0.0-canary.a868c7866.0":"2022-11-11T16:36:40.623Z","15.0.0-canary.602fe8efa.0":"2022-11-11T17:11:57.570Z","15.0.0-canary.558c2be62.0":"2022-11-11T22:45:25.138Z","15.0.0-canary.b5c13a7a8.0":"2022-11-14T15:58:42.010Z","15.0.0-canary.a6e1c0702.0":"2022-11-14T17:27:11.536Z","15.0.0-canary.b6f8a06de.0":"2022-11-15T09:28:30.089Z","15.0.0-canary.0163f3ba5.0":"2022-11-15T18:02:17.031Z","15.0.0-canary.66c5cbb94.0":"2022-11-15T19:30:17.717Z","15.0.0-canary.b01136063.0":"2022-11-16T00:15:59.262Z","15.0.0-canary.01da0cabb.0":"2022-11-16T09:13:25.962Z","15.0.0-canary.4ac393164.0":"2022-11-16T16:15:39.777Z","15.0.0-canary.6048fb563.0":"2022-11-16T16:17:44.479Z","15.0.0-canary.3777b03cb.0":"2022-11-16T18:41:37.938Z","15.0.0-canary.f7f56fff7.0":"2022-11-16T19:56:09.957Z","15.0.0-canary.7c73f6134.0":"2022-11-16T20:00:33.817Z","15.0.0-canary.f1e037150.0":"2022-11-16T20:05:24.896Z","15.0.0-canary.40b18d043.0":"2022-11-16T22:58:59.631Z","15.0.0-canary.86bde5c06.0":"2022-11-16T23:09:04.928Z","15.0.0-canary.bb7751002.0":"2022-11-17T00:00:17.182Z","15.0.0-canary.63aca9af6.0":"2022-11-17T19:01:50.674Z","15.0.0-canary.56482dc2e.0":"2022-11-17T21:55:46.315Z","15.0.0-canary.953e689f3.0":"2022-11-17T22:04:49.567Z","15.0.0-canary.b5606a793.0":"2022-11-18T10:21:20.046Z","15.0.0-canary.8c5675942.0":"2022-11-18T15:16:27.425Z","15.0.0-canary.697fbdebd.0":"2022-11-18T17:00:58.722Z","15.0.0-canary.d58410453.0":"2022-11-18T19:25:17.056Z","15.0.0-canary.7971d6ad5.0":"2022-11-19T08:45:24.290Z","15.0.0-canary.a0ae73b0e.0":"2022-11-21T10:53:55.222Z","15.0.0-canary.96f472604.0":"2022-11-21T12:52:53.165Z","15.0.0-canary.18b8f31e1.0":"2022-11-21T16:02:37.690Z","15.0.0-canary.912f33ce4.0":"2022-11-21T17:54:12.639Z","15.0.0-canary.1e1b1c369.0":"2022-11-23T19:00:48.100Z","15.0.0-canary.a2ec49244.0":"2022-11-23T19:31:07.256Z","15.0.0-canary.a7458ba0b.0":"2022-11-23T20:16:36.677Z","15.0.0-canary.7c35e5036.0":"2022-11-24T08:39:37.140Z","15.0.0-canary.4356e05c5.0":"2022-11-24T09:56:54.687Z","15.0.0-canary.cb605f8af.0":"2022-11-24T10:15:54.678Z","15.0.0-canary.05fb07f9f.0":"2022-11-24T17:13:57.143Z","15.0.0-canary.a911b386b.0":"2022-11-28T16:47:35.035Z","15.0.0-canary.2aa8050b4.0":"2022-11-28T19:11:47.309Z","15.0.0-canary.323904a9f.0":"2022-11-29T15:34:39.684Z","15.0.0-canary.168a629a4.0":"2022-11-29T16:49:40.131Z","15.0.0-canary.65c411674.0":"2022-11-29T17:38:37.072Z","15.0.0-canary.a86d36fd2.0":"2022-11-30T02:14:27.654Z","15.0.0-canary.3a1f46c66.0":"2022-11-30T12:07:25.497Z","15.0.0-canary.32d8a9648.0":"2022-12-01T17:29:24.468Z","15.0.0-canary.03618ab70.0":"2022-12-01T20:54:39.741Z","15.0.0-canary.68aaed940.0":"2022-12-01T21:24:22.965Z","15.0.0-canary.f0a0bbc75.0":"2022-12-02T09:02:27.212Z","15.0.0-canary.dd99c8764.0":"2022-12-02T14:01:13.851Z","15.0.0-canary.fabdcca3a.0":"2022-12-02T15:07:07.159Z","15.0.0-canary.2d26722d2.0":"2022-12-02T16:26:48.601Z","15.0.0-canary.eaa0c3a86.0":"2022-12-02T17:42:50.196Z","15.0.0-canary.79a613bbd.0":"2022-12-06T14:26:20.301Z","15.0.0-canary.c871fe61e.0":"2022-12-07T07:52:09.810Z","15.0.0-canary.9eaee7936.0":"2022-12-07T20:03:11.652Z","15.0.0-canary.1d37bf601.0":"2022-12-07T20:41:33.264Z","15.0.0-canary.a5fe069d5.0":"2022-12-09T18:44:32.974Z","15.0.0-canary.ce8b5326f.0":"2022-12-09T23:31:02.561Z","15.0.0-canary.43f5323bc.0":"2022-12-12T16:47:06.626Z","15.0.0-canary.5490e32e7.0":"2022-12-12T17:02:25.489Z","15.0.0-canary.817002c29.0":"2022-12-13T21:54:19.831Z","15.0.0-canary.313a1326a.0":"2022-12-14T10:29:03.464Z","15.0.0-canary.a69c14e10.0":"2022-12-14T11:19:43.562Z","15.0.0-canary.f43e0ceb5.0":"2022-12-14T16:45:09.570Z","15.0.0-canary.34767110.0":"2022-12-14T17:19:31.880Z","15.0.0-canary.1f99f3c50.0":"2022-12-15T14:25:49.602Z","15.0.0-canary.cfd69490f.0":"2022-12-16T20:08:52.243Z","15.0.0-canary.94ad8d986.0":"2022-12-19T19:27:23.498Z","15.0.0-canary.604264203.0":"2022-12-21T21:41:07.349Z","15.0.0-canary.85bcff6af.0":"2022-12-22T10:26:06.552Z","15.0.0-canary.ece3e8d21.0":"2022-12-22T17:12:29.245Z","15.0.0-canary.278ad53d1.0":"2022-12-27T17:05:22.201Z","15.0.0-canary.a7d8389e1.0":"2022-12-27T19:04:09.175Z","15.0.0-canary.8175d5eff.0":"2022-12-28T01:51:56.441Z","15.0.0-canary.e21dcb86d.0":"2022-12-29T14:02:32.653Z","15.0.0-canary.20ab6f5a8.0":"2022-12-29T19:41:15.197Z","15.0.0-canary.b9806f623.0":"2022-12-29T23:06:09.348Z","15.0.0-canary.50c9f550e.0":"2023-01-03T15:47:59.495Z","15.0.0-canary.af490a848.0":"2023-01-03T15:57:39.438Z","15.0.0-canary.7cf487c98.0":"2023-01-03T17:39:05.036Z","15.0.0-canary.a52be2d5e.0":"2023-01-03T19:13:27.235Z","15.0.0-canary.e38ba17c5.0":"2023-01-03T22:33:08.081Z","15.0.0-canary.49041a6c3.0":"2023-01-04T15:18:03.101Z","15.0.0-canary.c492898c2.0":"2023-01-04T17:37:58.905Z","15.0.0-canary.d7a2277de.0":"2023-01-04T21:35:57.571Z","15.0.0-canary.fd95ca7ef.0":"2023-01-05T01:03:06.199Z","15.0.0-canary.1eb44faf9.0":"2023-01-05T09:09:38.499Z","15.0.0-canary.adcdb7db9.0":"2023-01-05T16:22:29.819Z","15.0.0-canary.067af7eff.0":"2023-01-06T23:16:23.955Z","15.0.0-canary.21d1196a7.0":"2023-01-09T10:43:59.473Z","15.0.0-canary.8d2d8d3c4.0":"2023-01-09T22:24:13.798Z","15.0.0-canary.fc6ee6c32.0":"2023-01-10T16:28:20.133Z","15.0.0-canary.73537ab0f.0":"2023-01-10T18:11:50.326Z","15.0.0-canary.684e33d25.0":"2023-01-10T19:18:52.262Z","15.0.0-canary.0e89aab6b.0":"2023-01-11T16:18:35.352Z","15.0.0-canary.b0103d10a.0":"2023-01-11T19:13:10.503Z","15.0.0-canary.50e7a5312.0":"2023-01-11T20:54:29.022Z","15.0.0-canary.202823f54.0":"2023-01-11T21:36:02.015Z","15.0.0-canary.199fe2a2a.0":"2023-01-11T21:55:58.280Z","15.0.0-canary.8c0786d6f.0":"2023-01-12T14:36:34.189Z","15.0.0-canary.8a74f7c6d.0":"2023-01-17T19:24:50.703Z","15.0.0-canary.b4687fdc1.0":"2023-01-19T19:49:33.912Z","15.0.0-canary.b836b9892.0":"2023-01-24T22:39:27.025Z","15.0.0-canary.e8912fd37.0":"2023-01-26T18:30:04.201Z","15.0.0-canary.16fbd30ff.0":"2023-01-26T18:35:33.820Z","15.0.0-canary.033ae083a.0":"2023-01-26T19:27:05.409Z","15.0.0-canary.3a705fa1d.0":"2023-01-27T22:43:51.142Z","15.0.0-canary.d6bea2ff2.0":"2023-01-31T15:30:19.605Z","15.0.0-canary.0c94182c8.0":"2023-02-01T17:44:25.571Z","15.0.0-canary.15b221540.0":"2023-02-01T17:52:49.405Z","15.0.0-canary.eeebb8bba.0":"2023-02-01T18:22:27.998Z","15.0.0-canary.6a4b3f834.0":"2023-02-01T18:58:39.723Z","15.0.0-canary.b177b40e2.0":"2023-02-02T03:34:20.315Z","15.0.0-canary.d9f821042.0":"2023-02-02T17:38:30.361Z","15.0.0-canary.47c7deb19.0":"2023-02-03T09:09:09.751Z","15.0.0-canary.a16dbd1a6.0":"2023-02-04T06:14:46.120Z","15.0.0-canary.93416f87a.0":"2023-02-07T13:24:48.016Z","15.0.0-canary.49b8e7442.0":"2023-02-07T23:09:44.228Z","15.0.0-canary.de38de758.0":"2023-02-09T15:42:37.057Z","15.0.0-canary.4d62de70c.0":"2023-02-09T22:03:15.771Z","15.0.0-canary.6fcd8d418.0":"2023-02-13T11:50:04.993Z","15.0.0-canary.066d9439b.0":"2023-02-15T19:57:55.798Z","15.0.0-canary.7ab32468c.0":"2023-02-21T18:34:24.454Z","15.0.0-canary.fa27ba61d.0":"2023-02-27T16:20:33.534Z","15.0.0-canary.311ab4d4a.0":"2023-02-27T16:41:36.439Z","15.0.0-canary.901c83e77.0":"2023-02-27T18:06:24.998Z","15.0.0-canary.5cb8e2174.0":"2023-03-01T16:36:01.323Z","15.0.0-canary.f32339937.0":"2023-03-06T15:15:48.399Z","15.0.0-canary.7644d63d5.0":"2023-03-06T22:27:41.880Z","15.0.0-canary.d96330c08.0":"2023-03-08T11:42:00.139Z","15.0.0-canary.c99cae77c.0":"2023-03-08T23:43:08.844Z","15.0.0-canary.6023b1cd3.0":"2023-03-09T14:26:35.331Z","15.0.0-canary.274610c77.0":"2023-03-09T14:58:52.384Z","15.0.0-canary.a274583b9.0":"2023-03-09T19:52:52.447Z","15.0.0-canary.da22ca960.0":"2023-03-09T20:18:25.176Z","15.0.0-canary.304a94e8b.0":"2023-03-09T20:45:12.511Z","15.0.0-canary.6c265915c.0":"2023-03-09T21:47:29.008Z","15.0.0-canary.de5224633.0":"2023-03-09T23:55:56.279Z","15.0.0-canary.8879557e6.0":"2023-03-10T14:08:05.055Z","15.0.0-canary.23073a303.0":"2023-03-10T14:15:05.921Z","15.0.0-canary.51c7d4014.0":"2023-03-10T16:47:33.519Z","15.0.0-canary.1175a5be0.0":"2023-03-10T20:48:13.227Z","15.0.0-canary.7adf3af80.0":"2023-03-11T01:25:11.472Z","15.0.0-canary.82554d770.0":"2023-03-11T01:37:26.784Z","15.0.0-canary.93fc524b7.0":"2023-03-13T08:38:59.651Z","15.0.0-canary.50be0fbae.0":"2023-03-13T17:44:23.081Z","15.0.0-canary.6b5ffccd9.0":"2023-03-13T17:47:42.381Z","15.0.0-canary.1c8013f4e.0":"2023-03-13T18:02:54.495Z","15.0.0-canary.112715df5.0":"2023-03-13T18:39:23.314Z","15.0.0-canary.d250911f2.0":"2023-03-13T19:31:40.075Z","15.0.0-canary.7cd925c12.0":"2023-03-13T19:39:11.347Z","15.0.0-canary.b2ddacf73.0":"2023-03-13T19:43:36.787Z","15.0.0-canary.989ae2ecc.0":"2023-03-13T19:52:49.298Z","15.0.0-canary.89c66483a.0":"2023-03-13T20:16:36.072Z","15.0.0-canary.6a85742c2.0":"2023-03-14T02:47:31.133Z","15.0.0-canary.bb6cd78d5.0":"2023-03-14T18:16:58.091Z","15.0.0-canary.5f94aa37d.0":"2023-03-14T18:20:19.606Z","15.0.0-canary.1bd317240.0":"2023-03-14T18:24:09.270Z","15.0.0-canary.d441d2a2a.0":"2023-03-14T18:26:48.937Z","15.0.0-canary.fff4066c6.0":"2023-03-14T18:27:31.168Z","15.0.0-canary.87809c710.0":"2023-03-14T18:43:35.127Z","15.0.0-canary.48d30012d.0":"2023-03-14T18:47:55.584Z","15.0.0-canary.419b23cc6.0":"2023-03-14T18:58:56.063Z","15.0.0-canary.bf86521f4.0":"2023-03-14T23:13:35.169Z","15.0.0-canary.11f3d280e.0":"2023-03-15T00:11:25.566Z","15.0.0-canary.b281a409a.0":"2023-03-21T15:41:06.298Z","15.0.0-canary.39e473690.0":"2023-03-21T17:51:34.848Z","15.0.0-canary.cedffb44c.0":"2023-03-21T17:58:29.543Z","15.0.0-canary.36a4cba99.0":"2023-03-28T17:50:14.833Z","15.0.0-canary.ed7e82ded.0":"2023-03-28T20:34:45.792Z","15.0.0-canary.55093ee1e.0":"2023-03-29T18:48:45.048Z","15.0.0-canary.0c53abc81.0":"2023-04-07T01:41:18.229Z","15.0.0-canary.51311e69e.0":"2023-04-07T18:08:01.959Z","15.0.0-canary.113b1a38e.0":"2023-04-10T21:53:55.788Z","15.0.0-canary.ea2191426.0":"2023-04-11T21:56:13.463Z","15.0.0-canary.5a5c38538.0":"2023-04-11T22:30:26.682Z","15.0.0-canary.e4b5ea7eb.0":"2023-04-11T23:04:26.272Z","15.0.0-canary.a094dd9c1.0":"2023-04-14T22:42:38.573Z","15.0.0-canary.f771b091c.0":"2023-04-17T15:38:20.312Z","15.0.0-canary.79b1b612b.0":"2023-04-19T23:40:44.980Z","15.0.0-canary.6f50071e5.0":"2023-04-20T18:01:30.777Z","15.0.0-canary.ef754381c.0":"2023-04-24T20:51:04.981Z","15.0.0-canary.69ebf61ea.0":"2023-04-27T17:21:39.918Z","15.0.0-canary.b90be86de.0":"2023-04-29T00:21:46.547Z","15.0.0-canary.51f9c0c28.0":"2023-04-29T00:31:32.489Z","15.0.0-canary.4e840d685.0":"2023-05-02T15:33:43.560Z","15.0.0-canary.10b8563e4.0":"2023-05-02T23:41:58.841Z","15.0.0-canary.736b7fda4.0":"2023-05-03T15:09:32.855Z","15.0.0-canary.0e533c5a1.0":"2023-05-05T16:56:23.022Z","15.0.0-canary.5f01c15a2.0":"2023-05-05T17:26:24.407Z","15.0.0-canary.3b5b55e31.0":"2023-05-05T18:39:20.702Z","15.0.0-canary.d0788120f.0":"2023-05-09T08:23:12.746Z","15.0.0-canary.f52358dd0.0":"2023-05-12T14:30:35.861Z","15.0.0-canary.d3c3fbaa3.0":"2023-05-12T18:01:03.069Z","15.0.0-canary.576d3d2c8.0":"2023-05-16T02:00:09.219Z","15.0.0-canary.19bb36a46.0":"2023-05-16T19:54:09.475Z","15.0.0-canary.aa5ac7fe5.0":"2023-05-22T17:25:51.177Z","15.0.0-canary.90291f2e2.0":"2023-05-23T17:42:47.480Z","15.0.0-canary.446734f27.0":"2023-05-30T21:48:22.452Z","15.0.0-canary.19de312d8.0":"2023-06-06T17:18:31.489Z","15.0.0-canary.6081d829b.0":"2023-06-07T01:14:08.265Z","15.0.0-canary.b26c34a68.0":"2023-06-07T20:18:21.483Z","15.0.0-canary.4fe911371.0":"2023-06-07T23:06:07.184Z","15.0.0-canary.a9ff9866f.0":"2023-06-13T11:38:22.282Z","15.0.0-canary.b994146f6.0":"2023-06-14T21:03:56.726Z","15.0.0-canary.1fb4b1a06.0":"2023-06-27T18:57:19.603Z","15.0.0-canary.c64a2776e.0":"2023-06-27T20:16:47.229Z","15.0.0-canary.b05d9eb7c.0":"2023-06-29T16:23:51.251Z","15.0.0-canary.2a9697dc5.0":"2023-06-30T22:14:02.605Z","15.0.0-canary.0c52adeab.0":"2023-07-05T16:25:57.436Z","15.0.0-canary.83355c322.0":"2023-07-10T15:05:45.863Z","15.0.0-canary.bc9ae6c9c.0":"2023-08-03T21:21:04.267Z","15.0.0-canary.3c44cd956.0":"2023-08-07T17:47:27.150Z","15.0.0-canary.02702296e.0":"2023-08-25T12:05:07.035Z","15.0.0-canary.872b65832.0":"2023-08-30T12:13:29.705Z","15.0.0-canary.89b2e4122.0":"2023-08-31T16:06:57.434Z","15.0.0-canary.7a3942e7a.0":"2023-08-31T18:39:53.752Z","15.0.0-canary.54feb3020.0":"2023-09-11T21:05:14.843Z","15.0.0-canary.6cda3ce8d.0":"2023-09-12T01:45:14.477Z","15.0.0-canary.205b20b36.0":"2023-09-13T17:17:56.094Z","15.0.0-canary.22bf82024.0":"2023-09-18T09:12:03.231Z","15.0.0-canary.a246a4439.0":"2023-09-18T17:46:09.523Z","15.0.0-canary.d153db62b.0":"2023-09-19T19:15:13.806Z","15.0.0-canary.2528c1c3b.0":"2023-09-20T18:06:37.584Z","15.0.0-canary.1728a6dcf.0":"2023-09-26T01:23:15.407Z","15.0.0-canary.ebb636f3d.0":"2023-09-29T19:44:29.767Z","15.0.0-canary.c0d21ecc9.0":"2023-10-09T19:36:51.564Z","15.0.0-canary.127a44b28.0":"2023-10-12T20:00:22.629Z","15.0.0-canary.0ad128337.0":"2023-10-19T18:51:57.801Z","15.0.0-canary.9cec94097.0":"2023-10-19T23:09:24.910Z","15.0.0-canary.c51a0bbcc.0":"2023-11-15T20:58:38.938Z","15.0.0-canary.d76666ad4.0":"2023-11-27T22:13:04.155Z","15.0.0-canary.8656bf0e0.0":"2023-12-12T21:18:35.215Z","15.0.0-canary.7f224ddd4.0":"2023-12-28T06:09:00.561Z","15.0.0-canary.a0b8a90c0.0":"2024-02-07T19:19:26.671Z","15.0.0-canary.e50b478eb.0":"2024-02-08T18:07:57.307Z","15.0.0-canary.c43b3438b.0":"2024-02-23T20:17:29.199Z","15.0.0-canary.819498d8c.0":"2024-03-15T15:14:52.893Z","15.0.0-canary.453a6248a.0":"2024-03-25T17:13:29.625Z","15.0.0-canary.68edc03c6.0":"2024-04-08T19:05:56.182Z","15.0.0-canary.5bebc0064.0":"2024-04-11T21:40:47.688Z","15.0.0-canary.311f29a60.0":"2024-04-23T17:59:50.549Z","15.0.0-canary.65c10a622.0":"2024-04-25T18:48:47.175Z","15.0.0-canary.4b35cb7d0.0":"2024-05-02T12:02:51.008Z","15.0.0-canary.f80ac92b0.0":"2024-05-02T12:13:04.332Z","15.0.0-canary.2f5b899bc.0":"2024-05-20T13:56:05.855Z","15.0.0-canary.cfec83c74.0":"2024-05-20T18:56:38.971Z","15.0.0-canary.423edc3dc.0":"2024-06-26T18:12:04.992Z"},"maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","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-button"},"keywords":["material components","material design","button"],"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":""}